:root{
    --auth-bg:#080b0f;
    --auth-panel:#0e1319;
    --auth-panel-2:#111820;
    --auth-border:#202a34;
    --auth-text:#f2f5f7;
    --auth-muted:#8f9ba8;
    --auth-red:#ef3340;
    --auth-red-dark:#c91f2b;
    --auth-green:#38c978;
}
.auth-body{background:var(--auth-bg);color:var(--auth-text);}
.auth-main,.account-main{min-height:70vh;padding:64px 16px 90px;}
.auth-card,.account-shell{width:100%;max-width:520px;margin:0 auto;}
.account-shell{max-width:980px;}
.auth-card{background:linear-gradient(180deg,var(--auth-panel-2),var(--auth-panel));border:1px solid var(--auth-border);border-radius:14px;padding:30px;box-shadow:0 18px 55px rgba(0,0,0,.24);}
.auth-eyebrow{display:inline-block;color:var(--auth-red);font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:8px;}
.auth-card h1,.account-hero h1{margin:0 0 8px;font-size:30px;line-height:1.1;}
.auth-lead,.account-hero p,.account-panel p,.auth-note{color:var(--auth-muted);line-height:1.55;}
.auth-form{margin-top:24px;}
.auth-field{display:block;margin-bottom:16px;}
.auth-field>span{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.auth-field input{box-sizing:border-box;width:100%;height:46px;border-radius:8px;border:1px solid var(--auth-border);background:#090d12;color:var(--auth-text);padding:0 13px;outline:none;}
.auth-field input:focus{border-color:var(--auth-red);box-shadow:0 0 0 3px rgba(239,51,64,.12);}
.auth-field small{display:block;color:var(--auth-muted);margin-top:6px;font-size:11px;}
.auth-check{display:flex;align-items:center;gap:9px;color:#c8d0d8;font-size:13px;margin:4px 0 18px;}
.auth-check input{accent-color:var(--auth-red);}
.auth-primary,.auth-secondary{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;text-decoration:none;font-weight:800;cursor:pointer;transition:.15s ease;}
.auth-primary{width:100%;min-height:46px;background:var(--auth-red);color:#fff;padding:0 18px;}
.auth-primary:hover{background:var(--auth-red-dark);}
.auth-secondary{min-height:40px;padding:0 15px;background:#151d25;border:1px solid var(--auth-border);color:#eef2f5;}
.auth-secondary:hover{border-color:#3b4855;}
.auth-danger{color:#ff8d95;}
.auth-alert,.auth-success{border-radius:8px;padding:12px 13px;margin:17px 0;font-size:13px;line-height:1.5;}
.auth-alert{background:rgba(239,51,64,.10);border:1px solid rgba(239,51,64,.35);color:#ffb2b8;}
.auth-success{background:rgba(56,201,120,.10);border:1px solid rgba(56,201,120,.35);color:#a8efc7;}
.auth-benefits{margin:21px 0 0;padding:16px;border-radius:9px;background:#090d12;border:1px solid var(--auth-border);color:#c8d0d8;font-size:13px;line-height:1.9;}
.auth-switch{text-align:center;color:var(--auth-muted);font-size:13px;margin:22px 0 0;}
.auth-switch a{color:#fff;text-decoration:none;font-weight:800;}
.auth-note{text-align:center;font-size:11px;margin:16px 0 -5px;}
.auth-honeypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.account-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(180deg,var(--auth-panel-2),var(--auth-panel));border:1px solid var(--auth-border);border-radius:14px;padding:28px;margin-bottom:18px;}
.account-status{white-space:nowrap;background:rgba(56,201,120,.10);border:1px solid rgba(56,201,120,.30);color:#9be8bd;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:900;letter-spacing:.08em;}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.account-panel{background:var(--auth-panel);border:1px solid var(--auth-border);border-radius:12px;padding:22px;}
.account-panel h2{font-size:18px;margin:0 0 14px;}
.account-details{margin:0;}
.account-details>div{padding:11px 0;border-bottom:1px solid var(--auth-border);}
.account-details>div:last-child{border-bottom:0;}
.account-details dt{color:var(--auth-muted);font-size:11px;margin-bottom:4px;}
.account-details dd{margin:0;word-break:break-word;font-size:14px;}
.account-benefits{list-style:none;padding:0;margin:0;color:#c7d0d8;line-height:2;}
.account-next-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;}
.account-next-panel p{margin:0;max-width:680px;}
.account-logout-form{margin-top:20px;text-align:right;}
.site-account-shell{display:flex;align-items:center;gap:6px;margin-left:9px;}
.site-account-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 10px;border:1px solid #26313b;border-radius:7px;color:#dce3e9;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.04em;white-space:nowrap;background:#0d1218;}
.site-account-button:hover{border-color:#465563;color:#fff;}
.site-account-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.site-header-logout-form{margin:0;padding:0;display:inline-flex;}
.site-logout-button{font-family:inherit;cursor:pointer;}
.site-logout-button:hover{border-color:#7d3037;color:#ffb5ba;background:#171014;}
@media(max-width:850px){
    .auth-main,.account-main{padding-top:38px;}
    .auth-card{padding:23px 18px;}
    .account-grid{grid-template-columns:1fr;}
    .account-hero,.account-next-panel{align-items:flex-start;flex-direction:column;}
    .site-account-text{display:none;}
    .site-account-button{width:34px;padding:0;}
    .site-account-shell{margin-left:5px;}
}

/* ---------------------------------------------------------
   Phase 3.1: compact desktop header account controls
   Keeps Watchlist + Logout in the header without crowding nav.
   --------------------------------------------------------- */
.site-account-shell{
    flex:0 0 auto;
    gap:5px;
    margin-left:6px;
}

/* Watchlist and Logout are utility actions: icon only on desktop. */
.site-watchlist-header-button,
.site-logout-button{
    width:34px;
    min-width:34px;
    padding:0;
    gap:0;
}
.site-watchlist-header-button .site-account-text,
.site-logout-button .site-account-text{
    display:none;
}

/* Keep Account readable when there is enough room. */
.site-account-shell > a[href="/account"]{
    padding-left:9px;
    padding-right:10px;
}

/* Mid-size desktop/laptop: switch Account to icon-only too. */
@media(max-width:1280px){
    .site-account-shell > a[href="/account"]{
        width:34px;
        min-width:34px;
        padding:0;
        gap:0;
    }
    .site-account-shell > a[href="/account"] .site-account-text{
        display:none;
    }
}

/* Small screens already use icon-only controls; keep spacing tight. */
@media(max-width:850px){
    .site-account-shell{
        gap:4px;
        margin-left:4px;
    }
}