*{ box-sizing:border-box; }
html,body{ height:100%; }

/* ✅ Auth tokens are scoped to THIS page only (prevents clashing with header/footer tokens) */
body.auth-page{
    --bg0:#070A08;
    --bg1:#0C110E;
    --card:rgba(18,22,19,.78);
    --stroke:rgba(255,255,255,.10);
    --stroke2:rgba(255,255,255,.16);
    --text:#E9F0EA;
    --muted:rgba(233,240,234,.70);
    --gold:#F2C14E;
    --gold2:#DFAF3F;
    --red:#E24A4A;
    --green:#2FD07F;
    --amber:#F3B93A;
    --shadow: 0 20px 60px rgba(0,0,0,.50);
    --radius:20px;
    --radius2:28px;
    --max: 980px;
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    margin:0;
    font-family: var(--font);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;

    /* More "casino" background: gold/red glows + subtle sparkle + animated sheen */
    background:
        radial-gradient(900px 600px at 15% 10%, rgba(242,193,78,.22), transparent 60%),
        radial-gradient(900px 600px at 85% 15%, rgba(226,74,74,.18), transparent 60%),
        radial-gradient(800px 520px at 50% 105%, rgba(47,208,127,.10), transparent 60%),
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.20), transparent 60%),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.16), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Animated casino sheen overlay */
body.auth-page::before{
    content:"";
    position: fixed;
    inset: -40%;
    background:
        linear-gradient(110deg,
        rgba(242,193,78,.00) 10%,
        rgba(242,193,78,.10) 22%,
        rgba(226,74,74,.08) 32%,
        rgba(242,193,78,.00) 48%);
    filter: blur(28px);
    opacity: .55;
    transform: translate3d(-20%, -10%, 0) rotate(6deg);
    animation: sheen 10s ease-in-out infinite;
    pointer-events:none;
    z-index: 0;
}

@keyframes sheen{
    0%   { transform: translate3d(-18%, -10%, 0) rotate(6deg); opacity:.45; }
    50%  { transform: translate3d(18%, 8%, 0) rotate(6deg); opacity:.65; }
    100% { transform: translate3d(-18%, -10%, 0) rotate(6deg); opacity:.45; }
}

/* ✅ Safety: keep header/footer visually stable on this page */
body.auth-page header,
body.auth-page .spn-header,
body.auth-page footer,
body.auth-page .spn-footer{
    position: relative;
    z-index: 2;
}

.auth-shell{
    position: relative;
    z-index: 1;
}

.auth-wrap{
    max-width: 520px;
    margin: 26px auto 72px;
    padding: 0 16px;
}

/* ✅ Scope link rules to auth content so header nav styling isn't affected */
.auth-wrap a{ color: inherit; text-decoration: none; }
.auth-wrap a.link{
    color: rgba(242,193,78,.98);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.auth-wrap a.link:hover{ color: rgba(242,193,78,.85); }

/* In-your-face session warning */
.sessionBanner{
    border-radius: 18px;
    border: 1px solid rgba(242,193,78,.35);
    background:
        radial-gradient(260px 120px at 20% 20%, rgba(242,193,78,.28), rgba(242,193,78,.06) 60%, rgba(0,0,0,.10) 100%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
    padding: 14px 14px;
    margin-bottom: 14px;
}
.sessionRow{
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.sessionIcon{
    width: 14px; height: 14px;
    border-radius: 6px;
    margin-top: 3px;
    background: radial-gradient(circle at 30% 30%, rgba(242,193,78,1), rgba(242,193,78,.12) 60%, transparent 70%);
    box-shadow: 0 0 0 8px rgba(242,193,78,.07);
    flex:0 0 auto;
}
.sessionTitle{
    margin:0 0 4px;
    font-weight: 900;
    letter-spacing: -.2px;
}
.sessionText{
    margin:0;
    color: rgba(233,240,234,.80);
    line-height: 1.5;
    font-size: 13px;
}
.sessionActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 10px;
}

.auth-card{
    border-radius: var(--radius2);
    border: 1px solid var(--stroke);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 18px;
    backdrop-filter: blur(10px);
}

.brandMark{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 6px 0 14px;
}
.brandName{
    font-weight: 950;
    letter-spacing: .4px;
}

.auth-page-title{
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    text-align: center;
    color: var(--text);
}

.auth-tabs{
    display:flex;
    gap: 10px;
    margin-bottom: 14px;
}

.auth-tab{
    flex:1;
    padding: 12px 12px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    text-align:center;
    cursor:pointer;
    font-weight: 850;
    opacity:.65;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
    user-select:none;
}

.auth-tab:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    opacity: .9;
}

.auth-tab.active{
    opacity: 1;
    border-color: rgba(242,193,78,.45);
    background:
        radial-gradient(220px 80px at 30% 20%, rgba(242,193,78,.28), rgba(242,193,78,.08) 60%, rgba(255,255,255,.02) 100%);
}

.auth-wrap h1{
    margin: 8px 0 8px;
    font-size: 22px;
    letter-spacing: -.3px;
    line-height:1.15;
}

.sub{
    margin: 0 0 14px;
    color: rgba(233,240,234,.72);
    font-size: 13.5px;
    line-height:1.55;
}

.auth-form{ display:none; }
.auth-form.active{ display:block; }

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin: 12px 0;
}
.label{
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(233,240,234,.55);
}

/* ✅ Scope inputs to auth only so header inputs/search aren't affected */
.auth-wrap input{
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
    color: var(--text);
    outline:none;
    font-size:14px;
}
.auth-wrap input::placeholder{ color: rgba(233,240,234,.45); }
.auth-wrap input:focus{
    border-color: rgba(242,193,78,.40);
    box-shadow: 0 0 0 6px rgba(242,193,78,.10);
}

.checks{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin: 12px 0 4px;
}
.checkRow{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color: rgba(233,240,234,.80);
    font-size: 13px;
    line-height:1.5;
}
.checkRow input[type="checkbox"]{
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--gold);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(233,240,234,.92);
    font-weight: 900;
    letter-spacing:.2px;
    font-size: 14px;
    cursor:pointer;
    user-select:none;
    width: 100%;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
    margin-top: 20px;
}
.btn:hover{
    transform: translateY(-1px);
    border-color: rgba(242,193,78,.35);
    background: rgba(242,193,78,.10);
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
}

.btnSmall{
    width: auto;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
}
.btnGhost{
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.12);
    color: rgba(233,240,234,.80);
}
.btnGhost:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
}

.noteRow{
    margin-top: 14px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    font-size: 13px;
    color: rgba(233,240,234,.70);
}

.fineprint{
    margin-top: 14px;
    font-size: 12px;
    color: rgba(233,240,234,.55);
    line-height:1.5;
}

.modal-backdrop{
    position:fixed; inset:0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    z-index: 9999;
}
.modal{
    position:fixed; inset:0;
    display:grid;
    place-items:center;
    padding: 20px;
    z-index: 10000;
}
.modal[hidden], .modal-backdrop[hidden]{ display:none !important; }

.modal-card{
    width:min(520px,100%);
    border-radius: 18px;
    background: #0f1116;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    padding: 22px;
    position: relative;
}

.modal-close{
    position:absolute; top:12px; right:12px;
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color:#fff;
    cursor:pointer;
}

input {
    padding: 5px;
    border-radius: 5px;
}

.modal-subtext{ opacity:.8; margin: 8px 0 16px; }
.modal-form{ display:grid; gap: 12px; }

.modal-hint{ font-size: 13px; margin-top: 6px; opacity:.9; }
.modal-hint.ok{ color: var(--green); }
.modal-hint.err{ color: var(--red); }

.modal-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.6);
    z-index:9998;
}
.modal{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
}
.modal[hidden], .modal-backdrop[hidden]{ display:none !important; }

.modal-card{
    width:min(520px, calc(100% - 32px));
    border-radius:20px;
    padding:18px;
    background: rgba(18,22,19,.92);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal-close{
    appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    float:right;
}
.modal-hint.ok{ color:#2FD07F; }
.modal-hint.err{ color:#E24A4A; }

/* General authentication error (top-level login failure) */
.auth-error {
    margin: 18px 0;
    padding: 16px 18px;
    border-radius: 16px;

    background: rgba(220, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.4);

    color: #ff3b3b;
    font-weight: 600;
    font-size: 15px;

    backdrop-filter: blur(8px);
}

/* Field-specific error (e.g. email) */
.field-error {
    margin-top: 8px;
    color: #ff4d4d;
    font-size: 14px;
    font-weight: 500;
}