/* =========================================================================
   Bride & Baraat Luxe — sign-in screen (Default.aspx, Login_Admin.aspx)
   Palace-hall layout: ivory hall, gold garment rail with a menswear and a
   womenswear outfit flanking a centred sign-in card under a jharokha arch.

   Every colour is a --lux-* token. The defaults are Rajmahal Ivory; the other
   application themes (html[data-app-theme], set by AppTheme.js from the
   Template Customizer choice) override the tokens at the end of this file.
   Garments are drawn by /assets/MyJs/login-garments.js; auth stays in login.js.
   ========================================================================= */

:root {
    /* palette (Rajmahal Ivory) */
    --lux-gold-200: #F3DDA0;
    --lux-gold-300: #E9CF86;
    --lux-gold-500: #C9A24A;
    --lux-gold-700: #9A7426;
    --lux-gold-800: #8E6A22;
    --lux-danger: #B42335;

    /* hall */
    --lux-hall-top: #FBF5E8;
    --lux-hall-mid: #F8F0DF;
    --lux-hall-bottom: #F1E4C9;
    --lux-hall-glow: rgba(255, 236, 190, .9);
    --lux-hall-glow-2: rgba(255, 240, 205, .7);
    --lux-arch: #C9A24A;
    --lux-arch-opacity: .55;
    --lux-chand-fill: #F3DDA0;
    --lux-chand-line: #C9A24A;
    --lux-chand-bulb: #FFE9A8;
    --lux-lamp-glow: rgba(255, 214, 120, .55);
    --lux-rail-1: #F1D992;
    --lux-rail-2: var(--lux-gold-500);
    --lux-rail-3: var(--lux-gold-800);
    --lux-rail-post: var(--lux-gold-300);
    --lux-garment-shadow: rgba(80, 40, 10, .22);
    --lux-niche-1: rgba(122, 20, 36, .10);
    --lux-niche-2: rgba(122, 20, 36, .04);
    --lux-niche-3: rgba(201, 162, 74, .10);
    --lux-floor-1: rgba(214, 186, 134, .45);
    --lux-floor-2: rgba(196, 160, 104, .55);
    --lux-carpet-1: #8B1E2E;
    --lux-carpet-2: #C9A24A;
    --lux-carpet-3: #5A1020;
    --lux-petal-end: #6E0F22;

    /* brand + story */
    --lux-mark-bg: #4A0E1E;
    --lux-brand-ink: #4A0E1E;
    --lux-brand-sub: #9A7426;
    --lux-story-ink: #4A0E1E;
    --lux-story-muted: #5B4A42;
    --lux-occasion: #9A7426;
    --lux-chip-ink: #4A0E1E;
    --lux-chip-bg: rgba(255, 252, 245, .7);
    --lux-chip-border: rgba(201, 162, 74, .8);

    /* card + form */
    --lux-card-bg: #FFFCF5;
    --lux-card-border: rgba(201, 162, 74, .55);
    --lux-card-ring: rgba(201, 162, 74, .12);
    --lux-card-shadow: rgba(74, 14, 30, .45);
    --lux-card-ribbon: none;
    --lux-ink: #2B1A14;
    --lux-muted: #6F5B52;
    --lux-eyebrow: #9A7426;
    --lux-ornament: #C9A24A;
    --lux-label: #4A0E1E;
    --lux-icon: #9A7426;
    --lux-line: #DCC9A3;
    --lux-input-bg: #FFFEFA;
    --lux-input-ink: #2B1A14;
    --lux-placeholder: #9A948A;
    --lux-focus: #7A1424;
    --lux-focus-ring: rgba(122, 20, 36, .16);
    --lux-link: #7A1424;
    --lux-btn-1: #4A0E1E;
    --lux-btn-2: #8A1A2E;
    --lux-btn-ink: #FFF4DC;
    --lux-btn-shadow: rgba(74, 14, 30, .7);
    --lux-foot: #7A6A60;
    --lux-copyright: #7A1424;

    --lux-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --lux-sans: "Jost", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lux-ease: cubic-bezier(.22, .8, .24, 1);
    --lux-rail-y: 150px;
}

html, body.lux-auth { height: 100%; }

body.lux-auth {
    margin: 0;
    font-family: var(--lux-sans);
    color: var(--lux-ink);
    background: var(--lux-hall-mid);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.lux-auth .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- hall */

.lux-hall {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 470px) minmax(0, 1fr);
    grid-template-rows: 60px minmax(0, 1fr) auto;
    column-gap: 24px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 56px 18px;
    background:
        radial-gradient(60% 40% at 50% 0%, var(--lux-hall-glow), transparent 70%),
        radial-gradient(40% 30% at 12% 20%, var(--lux-hall-glow-2), transparent 70%),
        radial-gradient(40% 30% at 88% 20%, var(--lux-hall-glow-2), transparent 70%),
        linear-gradient(180deg, var(--lux-hall-top) 0%, var(--lux-hall-mid) 45%, var(--lux-hall-bottom) 100%);
    transition: background-color .4s;
}

/* scalloped arch colonnade along the top (SVG used as a mask, painted in --lux-arch) */
.lux-arches {
    position: absolute;
    inset: 0 0 auto 0;
    height: 46vh;
    min-height: 300px;
    z-index: 0;
    opacity: var(--lux-arch-opacity);
    pointer-events: none;
    background-color: var(--lux-arch);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='320' viewBox='0 0 220 320'><path d='M20 320V150c0-40 20-70 45-85 15-9 30-20 45-45 15 25 30 36 45 45 25 15 45 45 45 85v170' fill='none' stroke='%23000' stroke-width='2'/><path d='M34 320V155c0-34 18-60 40-73 14-8 26-18 36-36 10 18 22 28 36 36 22 13 40 39 40 73v165' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/><circle cx='110' cy='18' r='2.5' fill='%23000'/></svg>"), linear-gradient(180deg, #000 55%, transparent);
    -webkit-mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: center top, 0 0;
    -webkit-mask-size: 220px 320px, 100% 100%;
    -webkit-mask-composite: source-in;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='320' viewBox='0 0 220 320'><path d='M20 320V150c0-40 20-70 45-85 15-9 30-20 45-45 15 25 30 36 45 45 25 15 45 45 45 85v170' fill='none' stroke='%23000' stroke-width='2'/><path d='M34 320V155c0-34 18-60 40-73 14-8 26-18 36-36 10 18 22 28 36 36 22 13 40 39 40 73v165' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='1'/><circle cx='110' cy='18' r='2.5' fill='%23000'/></svg>"), linear-gradient(180deg, #000 55%, transparent);
    mask-repeat: repeat-x, no-repeat;
    mask-position: center top, 0 0;
    mask-size: 220px 320px, 100% 100%;
    mask-composite: intersect;
}

/* chandeliers (symbol in the page reads --lux-chand-*) */
.lux-chand {
    position: absolute;
    top: -6px;
    z-index: 1;
    width: 74px;
    height: 110px;
    pointer-events: none;
    overflow: visible;
    transform-origin: top center;
    animation: lux-sway 7s ease-in-out infinite;
}

.lux-chand.c1 { left: 38%; }
.lux-chand.c2 { left: calc(50% - 48px); width: 96px; height: 142px; animation-delay: -2s; }
.lux-chand.c3 { right: 38%; animation-delay: -4s; }

.lux-glow {
    position: absolute;
    top: 60px;
    left: 50%;
    z-index: 0;
    width: 260px;
    height: 260px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--lux-lamp-glow), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

.lux-glow.g1 { left: calc(38% + 37px); }
.lux-glow.g3 { left: auto; right: calc(38% + 37px); transform: translateX(50%); }

/* garment rail + posts */
.lux-rail {
    position: absolute;
    left: 5.5%;
    right: 5.5%;
    top: var(--lux-rail-y);
    height: 7px;
    z-index: 1;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--lux-rail-1), var(--lux-rail-2) 55%, var(--lux-rail-3));
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}

.lux-rail::before,
.lux-rail::after {
    content: "";
    position: absolute;
    top: -2px;
    width: 9px;
    height: calc(100vh - var(--lux-rail-y) - 96px);
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lux-rail-3), var(--lux-rail-post) 50%, var(--lux-rail-3));
}

.lux-rail::before { left: -4px; }
.lux-rail::after { right: -4px; }

/* brand */
.lux-brand {
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: lux-rise .8s var(--lux-ease) both;
}

.lux-brand .lux-logo {
    display: block;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55);
}

.lux-brand-name strong {
    display: block;
    font-family: var(--lux-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--lux-brand-ink);
}

.lux-brand-name strong em { font-style: italic; font-weight: 500; }

.lux-brand-name span {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--lux-brand-sub);
}

/* garments (SVG injected by login-garments.js) */
.lux-hero { display: contents; }

.lux-garment {
    grid-row: 2;
    align-self: start;
    justify-self: center;
    z-index: 2;
    margin-top: 56px;
    height: min(60vh, 540px);
    aspect-ratio: 300 / 620;
    transform-origin: 50% 2%;
    animation: lux-hang 6.5s ease-in-out infinite;
}

.lux-garment svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 30px 24px var(--lux-garment-shadow));
}

.lux-garment-left { grid-column: 1; animation-delay: -1.2s; }
.lux-garment-right { grid-column: 3; animation-delay: -3.6s; }

.lux-garment .gm-shine { animation: lux-shine 9s ease-in-out infinite; }

/* ---------------------------------------------------------------- panel */

.lux-panel {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 0 8px;
}

.lux-jharokha {
    position: absolute;
    inset: -6px -22px auto -22px;
    height: calc(100% + 10px);
    z-index: -1;
    pointer-events: none;
}

.lux-jharokha svg { width: 100%; height: 100%; }
.lux-jharokha path { stroke: var(--lux-arch); }
.lux-jharokha circle { fill: var(--lux-arch); }

.lux-niche {
    position: absolute;
    inset: 14px 0 34px;
    z-index: -2;
    border-radius: 200px 200px 26px 26px;
    background: linear-gradient(180deg, var(--lux-niche-1), var(--lux-niche-2) 40%, var(--lux-niche-3));
}

.lux-card {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 30px 36px 22px;
    overflow: hidden;
    border: 1px solid var(--lux-card-border);
    border-radius: 20px;
    background: var(--lux-card-bg);
    box-shadow: 0 40px 70px -28px var(--lux-card-shadow), 0 0 0 6px var(--lux-card-ring);
    animation: lux-rise .9s var(--lux-ease) .15s both;
}

.lux-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--lux-card-ribbon);
    pointer-events: none;
}

.lux-card-head { text-align: center; margin-bottom: 26px; }

.lux-card-head .lux-mark {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 14px;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5);
}

.lux-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--lux-eyebrow);
}

.lux-card-head h1 {
    margin: 0 0 8px;
    font-family: var(--lux-serif);
    font-size: clamp(30px, 3.2vw, 40px);
    font-weight: 600;
    line-height: 1.05;
    color: var(--lux-ink);
    text-wrap: balance;
}

.lux-card-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--lux-muted);
}

.lux-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 170px;
    margin: 18px auto 0;
}

.lux-ornament::before,
.lux-ornament::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lux-ornament));
}

.lux-ornament::after { background: linear-gradient(90deg, var(--lux-ornament), transparent); }

.lux-ornament i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--lux-ornament);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------- form */

.lux-field { margin-bottom: 18px; }

.lux-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lux-label);
}

.lux-auth .lux-input {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.lux-input > .lux-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    font-size: 1.15rem;
    color: var(--lux-icon);
    pointer-events: none;
    transition: color .2s;
}

.lux-auth .lux-control {
    flex: 1 1 auto;
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    border: 1.5px solid var(--lux-line);
    border-radius: 12px;
    font-family: var(--lux-sans);
    font-size: 1rem; /* 16px: stops iOS zooming on focus */
    color: var(--lux-input-ink);
    background: var(--lux-input-bg);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.lux-auth .lux-control::placeholder { color: var(--lux-placeholder); }
.lux-auth .lux-control:hover { border-color: var(--lux-focus); }

.lux-auth .lux-control:focus {
    border-color: var(--lux-focus);
    box-shadow: 0 0 0 4px var(--lux-focus-ring);
}

.lux-auth .lux-control:disabled { opacity: .6; cursor: not-allowed; }

.lux-input:focus-within > .lux-icon { color: var(--lux-focus); }

.lux-auth .lux-control.has-toggle { padding-right: 48px; }

.lux-toggle {
    position: absolute;
    right: 6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    font-size: 1.15rem;
    color: var(--lux-muted);
    background: transparent;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.lux-toggle:hover { color: var(--lux-ink); background: var(--lux-focus-ring); }
.lux-toggle:focus-visible { outline: 2px solid var(--lux-focus); outline-offset: 1px; }

/* FormValidation messages */
.lux-auth .lux-control.is-invalid,
.lux-field.fv-plugins-bootstrap5-row-invalid .lux-control {
    border-color: var(--lux-danger);
    background-image: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lux-danger) 14%, transparent);
}

.lux-field.fv-plugins-bootstrap5-row-invalid .lux-icon { color: var(--lux-danger); }

.lux-field .fv-plugins-message-container,
.lux-field .invalid-feedback {
    display: block;
    margin: 0;
    font-size: .8rem;
    color: var(--lux-danger);
}

.lux-field .fv-plugins-message-container > * { margin-top: 6px; }

/* Remember / forgot row */
.lux-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 22px;
    font-size: 14px;
}

.lux-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--lux-muted);
    cursor: pointer;
    user-select: none;
}

.lux-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--lux-focus);
    cursor: pointer;
}

.lux-check input:focus-visible { outline: 2px solid var(--lux-ornament); outline-offset: 2px; }

.lux-link {
    padding: 0;
    border: 0;
    font: inherit;
    font-weight: 500;
    color: var(--lux-link);
    background: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s;
}

.lux-link:hover { text-decoration-color: currentColor; }
.lux-link:focus-visible { outline: 2px solid var(--lux-focus); outline-offset: 3px; border-radius: 4px; }

/* Submit */
.lux-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    font-family: var(--lux-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lux-btn-ink);
    background: linear-gradient(135deg, var(--lux-btn-1), var(--lux-btn-2));
    box-shadow: 0 16px 30px -12px var(--lux-btn-shadow);
    cursor: pointer;
    transition: transform .2s var(--lux-ease), box-shadow .2s, filter .2s;
}

.lux-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s;
}

.lux-submit:hover { transform: translateY(-1px); filter: brightness(1.06); }
.lux-submit:hover::after { transform: translateX(120%); }
.lux-submit:active { transform: translateY(0); }
.lux-submit:focus-visible { outline: 3px solid var(--lux-ornament); outline-offset: 3px; }

.lux-submit .icon-base { font-size: 1.1rem; transition: transform .25s var(--lux-ease); }
.lux-submit:hover .icon-base { transform: translateX(3px); }

.lux-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--lux-btn-ink) 35%, transparent);
    border-top-color: var(--lux-btn-ink);
    border-radius: 50%;
    animation: lux-spin .8s linear infinite;
}

.lux-submit.is-loading { cursor: progress; filter: saturate(.7); opacity: .88; transform: none; }
.lux-submit.is-loading .lux-spinner { display: inline-block; }
.lux-submit.is-loading .icon-base { display: none; }
.lux-submit:disabled { cursor: progress; }

.lux-foot {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--lux-line);
    text-align: center;
    font-size: 12.5px;
    color: var(--lux-foot);
}

.lux-foot strong { font-weight: 600; color: var(--lux-link); }

.lux-copyright {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--lux-copyright);
    opacity: .85;
}

/* ---------------------------------------------------------------- story + chips */

.lux-story {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    z-index: 3;
    max-width: 360px;
    animation: lux-rise .9s var(--lux-ease) .3s both;
}

.lux-story h2 {
    margin: 0 0 8px;
    font-family: var(--lux-serif);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--lux-story-ink);
}

.lux-occasion {
    display: inline-grid;
    font-style: italic;
    color: var(--lux-occasion);
}

.lux-occasion span {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .6s var(--lux-ease), transform .6s var(--lux-ease);
}

.lux-occasion span.is-active { opacity: 1; transform: none; }
.lux-occasion span.is-leaving { transform: translateY(-.45em); }

.lux-story p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--lux-story-muted);
}

.lux-chips {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 360px;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: lux-rise .9s var(--lux-ease) .4s both;
}

.lux-chips li {
    padding: 8px 14px;
    border: 1px solid var(--lux-chip-border);
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lux-chip-ink);
    background: var(--lux-chip-bg);
}

/* floor + carpet */
.lux-floor {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 150px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--lux-floor-1) 55%, var(--lux-floor-2));
}

.lux-floor::after {
    content: "";
    position: absolute;
    left: 30%; right: 30%; bottom: 0;
    height: 16px;
    border-radius: 40px 40px 0 0;
    background: repeating-linear-gradient(90deg, var(--lux-carpet-1) 0 18px, var(--lux-carpet-2) 18px 22px, var(--lux-carpet-3) 22px 40px);
    opacity: .35;
}

/* petals (spans added by login-luxe.js) */
.lux-petals {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.lux-petal {
    position: absolute;
    top: -30px;
    width: var(--size, 12px);
    height: calc(var(--size, 12px) * 1.35);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(135deg, var(--tone, #A8253A), var(--lux-petal-end));
    opacity: .75;
    animation: lux-fall var(--dur, 14s) linear var(--delay, 0s) infinite;
}

/* ---------------------------------------------------------------- motion */

@keyframes lux-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes lux-hang {
    0%, 100% { transform: rotate(-1.1deg); }
    50%      { transform: rotate(1.1deg); }
}

@keyframes lux-sway {
    0%, 100% { transform: rotate(-1.4deg); }
    50%      { transform: rotate(1.4deg); }
}

@keyframes lux-shine {
    0%, 60% { transform: translateX(0); }
    100%    { transform: translateX(520px); }
}

@keyframes lux-fall {
    0%   { transform: translate3d(0, -30px, 0) rotate(0); }
    100% { transform: translate3d(var(--drift, 60px), 110vh, 0) rotate(520deg); }
}

@keyframes lux-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lux-auth *,
    .lux-auth *::before,
    .lux-auth *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .lux-petals, .lux-garment .gm-shine { display: none; }
    .lux-garment, .lux-chand { animation: none; }
}

/* ---------------------------------------------------------------- responsive */

/* Laptop / tablet landscape */
@media (max-width: 1199.98px) {
    :root { --lux-rail-y: 138px; }
    .lux-hall {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) minmax(0, 1fr);
        column-gap: 12px;
        padding: 20px 32px 16px;
    }
    .lux-garment { height: min(52vh, 420px); margin-top: 48px; }
    .lux-story, .lux-chips { display: none; }
}

/* Short desktop screens */
@media (min-width: 1200px) and (max-height: 820px) {
    .lux-garment { height: min(56vh, 480px); }
    .lux-card { padding-top: 24px; padding-bottom: 18px; }
    .lux-card-head { margin-bottom: 18px; }
    .lux-card-head .lux-mark { width: 46px; height: 46px; margin-bottom: 10px; }
    .lux-story p { display: none; }
}

/* Phone / portrait tablet: rail hero, then the card */
@media (max-width: 767.98px) {
    .lux-hall {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 16px 16px 20px;
    }
    .lux-arches { height: 300px; }
    .lux-chand, .lux-glow { display: none; }
    .lux-brand { margin-bottom: 8px; }

    .lux-hero {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 28px;
        height: 240px;
        margin: 0 -16px 12px;
        padding: 0 16px;
    }
    .lux-rail { top: 26px; left: 8%; right: 8%; }
    .lux-rail::before, .lux-rail::after { display: none; }
    .lux-garment { height: 200px; margin-top: 14px; animation-duration: 8s; }

    .lux-panel { padding: 8px 0 0; }
    .lux-jharokha, .lux-niche { display: none; }
    .lux-card { max-width: 100%; padding: 30px 22px 24px; border-radius: 18px; }
    .lux-auth .lux-control { height: 48px; }
    .lux-submit { height: 52px; }

    .lux-story { display: block; max-width: none; margin-top: 18px; text-align: center; }
    .lux-story h2 { font-size: 24px; }
    .lux-story p { display: block; font-size: 13.5px; }
    .lux-chips { display: flex; justify-content: center; max-width: none; margin-top: 14px; }
    .lux-floor { display: none; }
}

@media (max-width: 400px) {
    .lux-hero { gap: 12px; height: 220px; }
    .lux-garment { height: 180px; }
    .lux-chips li:nth-child(n+3) { display: none; }
}

/* =========================================================================
   Application themes (AppTheme.js sets html[data-app-theme])
   rajmahal = the defaults above.
   ========================================================================= */

/* ---- Emerald Atelier: blush boutique, emerald + gold ---- */
:root[data-app-theme="emerald"] {
    --lux-hall-top: #FBEDEA;
    --lux-hall-mid: #F6DCD8;
    --lux-hall-bottom: #EDC9C2;
    --lux-hall-glow: rgba(255, 244, 236, .9);
    --lux-hall-glow-2: rgba(255, 236, 228, .7);
    --lux-arch: #C9A24A;
    --lux-arch-opacity: .5;
    --lux-chand-fill: #EED9A2;
    --lux-lamp-glow: rgba(255, 220, 150, .5);
    --lux-garment-shadow: rgba(90, 40, 30, .25);
    --lux-niche-1: rgba(15, 75, 63, .10);
    --lux-niche-2: rgba(15, 75, 63, .04);
    --lux-floor-1: rgba(232, 189, 182, .45);
    --lux-floor-2: rgba(210, 160, 150, .5);
    --lux-carpet-1: #0F4B3F;
    --lux-carpet-3: #083229;
    --lux-petal-end: #D98F8A;

    --lux-mark-bg: #0F4B3F;
    --lux-brand-ink: #083229;
    --lux-story-ink: #083229;
    --lux-story-muted: #5E4A46;
    --lux-occasion: #B0603F;
    --lux-chip-ink: #FFFFFF;
    --lux-chip-bg: #0F4B3F;
    --lux-chip-border: rgba(201, 162, 74, .7);

    --lux-card-bg: #FBF6EF;
    --lux-card-border: rgba(201, 162, 74, .5);
    --lux-card-shadow: rgba(8, 50, 41, .45);
    --lux-ink: #1E2A26;
    --lux-muted: #5E6B66;
    --lux-label: #0F4B3F;
    --lux-line: #D9CDB8;
    --lux-input-bg: #FFFFFF;
    --lux-input-ink: #1E2A26;
    --lux-focus: #0F4B3F;
    --lux-focus-ring: rgba(15, 75, 63, .16);
    --lux-link: #0F4B3F;
    --lux-btn-1: #0F4B3F;
    --lux-btn-2: #1F7A66;
    --lux-btn-ink: #FFFFFF;
    --lux-btn-shadow: rgba(8, 50, 41, .75);
    --lux-foot: #72807A;
    --lux-copyright: #0F4B3F;
}

/* ---- Midnight Atelier: navy hall, peach + champagne, dark card ---- */
:root[data-app-theme="midnight"] {
    --lux-gold-200: #F1DDA6;
    --lux-hall-top: #1C3160;
    --lux-hall-mid: #16264A;
    --lux-hall-bottom: #0C1730;
    --lux-hall-glow: rgba(242, 183, 154, .22);
    --lux-hall-glow-2: rgba(255, 214, 150, .10);
    --lux-arch: #E4C78F;
    --lux-arch-opacity: .32;
    --lux-chand-fill: #F1DDA6;
    --lux-chand-line: #D8B77A;
    --lux-lamp-glow: rgba(255, 200, 150, .35);
    --lux-rail-1: #F1DDA6;
    --lux-rail-2: #D8B77A;
    --lux-rail-3: #8C6A34;
    --lux-rail-post: #E4C78F;
    --lux-garment-shadow: rgba(0, 0, 0, .45);
    --lux-niche-1: rgba(242, 183, 154, .12);
    --lux-niche-2: rgba(242, 183, 154, .03);
    --lux-niche-3: rgba(228, 199, 143, .08);
    --lux-floor-1: rgba(8, 15, 34, .35);
    --lux-floor-2: rgba(8, 15, 34, .6);
    --lux-carpet-1: #F2B79A;
    --lux-carpet-2: #E4C78F;
    --lux-carpet-3: #243B6E;
    --lux-petal-end: #D9906E;

    --lux-mark-bg: #0C1730;
    --lux-brand-ink: #FFFFFF;
    --lux-brand-sub: #E4C78F;
    --lux-story-ink: #FFFFFF;
    --lux-story-muted: #B9C2DA;
    --lux-occasion: #F2B79A;
    --lux-chip-ink: #FCE3D5;
    --lux-chip-bg: rgba(12, 23, 48, .55);
    --lux-chip-border: rgba(242, 183, 154, .6);

    --lux-card-bg: #141F3D;
    --lux-card-border: rgba(228, 199, 143, .35);
    --lux-card-ring: rgba(228, 199, 143, .08);
    --lux-card-shadow: rgba(0, 0, 0, .65);
    --lux-ink: #FFFFFF;
    --lux-muted: #B9C2DA;
    --lux-eyebrow: #F2B79A;
    --lux-ornament: #E4C78F;
    --lux-label: #E4C78F;
    --lux-icon: #F2B79A;
    --lux-line: #324675;
    --lux-input-bg: #0F1A35;
    --lux-input-ink: #FFFFFF;
    --lux-placeholder: #7D8AA8;
    --lux-focus: #F2B79A;
    --lux-focus-ring: rgba(242, 183, 154, .22);
    --lux-link: #F2B79A;
    --lux-btn-1: #F6C6AC;
    --lux-btn-2: #E39C7B;
    --lux-btn-ink: #0C1730;
    --lux-btn-shadow: rgba(217, 144, 110, .55);
    --lux-foot: #8F9AB8;
    --lux-copyright: #E4C78F;
    --lux-danger: #FF8C8C;
}

/* ---- Runway Festive: teal runway, marigold + ivory card ---- */
:root[data-app-theme="runway"] {
    --lux-gold-200: #F3D27A;
    --lux-hall-top: #0F4C57;
    --lux-hall-mid: #0B3A44;
    --lux-hall-bottom: #082E36;
    --lux-hall-glow: rgba(255, 225, 150, .20);
    --lux-hall-glow-2: rgba(26, 107, 120, .6);
    --lux-arch: #D4AF5A;
    --lux-arch-opacity: .32;
    --lux-chand-fill: #F3D27A;
    --lux-chand-line: #D4AF5A;
    --lux-lamp-glow: rgba(255, 225, 150, .38);
    --lux-rail-1: #F3D27A;
    --lux-rail-2: #D4AF5A;
    --lux-rail-3: #8E6A22;
    --lux-rail-post: #F3D27A;
    --lux-garment-shadow: rgba(0, 0, 0, .5);
    --lux-niche-1: rgba(225, 178, 60, .12);
    --lux-niche-2: rgba(225, 178, 60, .03);
    --lux-niche-3: rgba(248, 241, 227, .06);
    --lux-floor-1: rgba(248, 241, 227, .08);
    --lux-floor-2: rgba(248, 241, 227, .16);
    --lux-carpet-1: #E1B23C;
    --lux-carpet-2: #F8F1E3;
    --lux-carpet-3: #0F5A66;
    --lux-petal-end: #B8892E;

    --lux-mark-bg: #0F4C57;
    --lux-brand-ink: #FFFFFF;
    --lux-brand-sub: #F3D27A;
    --lux-story-ink: #FFFFFF;
    --lux-story-muted: #B9D0D4;
    --lux-occasion: #F3D27A;
    --lux-chip-ink: #F3D27A;
    --lux-chip-bg: rgba(8, 46, 54, .5);
    --lux-chip-border: rgba(225, 178, 60, .6);

    --lux-card-bg: #F8F1E3;
    --lux-card-border: rgba(212, 175, 90, .6);
    --lux-card-ring: rgba(255, 255, 255, .05);
    --lux-card-shadow: rgba(0, 0, 0, .7);
    --lux-card-ribbon: linear-gradient(90deg, #E1B23C, #F3D27A, #E1B23C);
    --lux-ink: #10262B;
    --lux-muted: #5C6E72;
    --lux-eyebrow: #B8892E;
    --lux-ornament: #E1B23C;
    --lux-label: #0F4C57;
    --lux-icon: #B8892E;
    --lux-line: #D9CEB6;
    --lux-input-bg: #FFFFFF;
    --lux-input-ink: #10262B;
    --lux-focus: #0F4C57;
    --lux-focus-ring: rgba(225, 178, 60, .28);
    --lux-link: #0F4C57;
    --lux-btn-1: #0F4C57;
    --lux-btn-2: #1A6B78;
    --lux-btn-ink: #FFFFFF;
    --lux-btn-shadow: rgba(8, 46, 54, .85);
    --lux-foot: #6F7F82;
    --lux-copyright: #F3D27A;
}