:root{
    --bg:#070b14;
    --bg2:#0b1120;
    --card:rgba(17,25,42,.78);
    --card-solid:#11192a;
    --card2:#151f33;
    --border:rgba(148,163,184,.15);
    --text:#f8fafc;
    --muted:#94a3b8;
    --muted2:#64748b;
    --primary:#7c5cff;
    --primary2:#38bdf8;
    --success:#34d399;
    --danger:#fb7185;
    --warning:#fbbf24;
    --shadow:0 25px 80px rgba(0,0,0,.35);
    --radius:20px;
    --surface-soft:rgba(255,255,255,.045);
    --focus-ring:0 0 0 3px rgba(124,92,255,.14);
    --ui-scale:1;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}

body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:
        radial-gradient(circle at 10% 0%,rgba(124,92,255,.16),transparent 30%),
        radial-gradient(circle at 90% 10%,rgba(56,189,248,.12),transparent 28%),
        linear-gradient(135deg,var(--bg),var(--bg2));
    color:var(--text);
    min-height:100vh;
    line-height:1.55;

    /*
     * Global accessibility scaling. The settings panel changes
     * --ui-scale and therefore scales all current and future UI.
     * Content containers compensate for the scale so the page stays within the viewport.
     */
    zoom:var(--ui-scale,1);
    width:100%;
}

button,input,select{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.container{
    width:min(1180px,calc(100% - 32px));
    margin:auto;
}

/* NAVIGATION */

.nav{
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(18px);
    background:rgba(7,11,20,.72);
    border-bottom:1px solid var(--border);
}

.nav-inner{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
}

.nav > .container{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:16px;
    padding-right:16px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.5px;
}

.logo-mark{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    box-shadow:0 8px 30px rgba(124,92,255,.35);
}

.nav-links{
    display:flex;
    align-items:center;
    gap:5px;
}

.nav-links button{
    color:var(--muted);
    background:transparent;
    border:0;
    padding:9px 12px;
    border-radius:10px;
}

.nav-links button:hover{
    color:white;
    background:rgba(255,255,255,.06);
}

.menu-btn{
    display:none;
    border:1px solid var(--border);
    color:white;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:8px 11px;
}
.feedback-nav-btn{
    border:1px solid var(--border);
    color:white;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:8px 11px;
    font-size:13px;
    font-weight:700;
    transition:.2s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.feedback-nav-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-2px);
}

@media(max-width:700px){
    .feedback-nav-btn span{display:none}
    .feedback-nav-btn{font-size:17px;padding:8px 10px}
}
.signout-nav-btn{
    border:1px solid var(--border);
    color:white;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:8px 11px;
    font-size:13px;
    font-weight:700;
    transition:.2s;
    display:none;
    align-items:center;
    gap:6px;
}
.signout-nav-btn:hover{
    background:rgba(251,113,133,.10);
    border-color:rgba(251,113,133,.35);
    color:#fecdd3;
    transform:translateY(-2px);
}

.settings-btn{
    border:1px solid var(--border);
    color:white;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:8px 11px;
    font-size:18px;
    transition:.2s;
}

.settings-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-2px);
}

/* AUTH / ACCOUNT */
.auth-wrap{position:relative;display:flex;align-items:center;gap:8px;flex:0 0 44px;width:44px;height:44px}
.auth-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap}
.auth-btn{
    border:1px solid var(--border);
    color:white;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:8px 12px;
    font-size:13px;
    font-weight:700;
    transition:.2s;
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.auth-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(calc(-50% - 2px)) !important;
}
.auth-btn:active{
    transform:translateY(calc(-50% - 2px)) !important;
}

.profile-nav-btn{
    width:42px;
    height:42px;
    padding:5px;
    border:1px solid var(--border);
    border-radius:50%;
    color:white;
    background:rgba(255,255,255,.05);
    display:none;
    align-items:center;
    justify-content:center;
    transition:.2s;
    overflow:hidden;
}
.profile-nav-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.45);
    transform:translateY(-2px);
}
.profile-nav-btn .auth-avatar,
.profile-nav-btn .auth-avatar-fallback{
    width:32px;
    height:32px;
    margin:0;
}
.profile-nav-btn .auth-avatar-fallback{
    font-size:14px;
}
.auth-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid var(--border);
}
.auth-avatar-fallback{
    width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;font-size:13px;font-weight:900;
}
.account-panel{
    position:absolute;right:0;top:calc(100% + 10px);z-index:3200;width:290px;padding:14px;
    background:rgba(11,17,31,.98);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
    backdrop-filter:blur(18px);display:none;
}
.account-panel.open{display:block}
.account-head{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:10px}
.account-head-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.account-head-fallback{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;font-weight:900}
.account-name{font-weight:800}.account-email{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-action{width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:var(--text);border-radius:10px;padding:10px 11px;text-align:left;font-weight:700}
.account-action:hover{background:var(--surface-soft);border-color:var(--border)}
.account-divider{height:1px;background:var(--border);margin:8px 0}
.account-action.danger{color:var(--danger)}
.account-section-title{font-size:11px;color:var(--muted2);font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin:12px 4px 6px}
.account-page-overlay{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.68);backdrop-filter:blur(10px)}
.account-page-overlay.open{display:flex}
.account-page-card{width:min(620px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;background:var(--card-solid,var(--card));border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.36);padding:24px}
.account-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.account-page-title-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.account-page-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex:0 0 auto}
.account-page-avatar-fallback{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;font-size:20px;font-weight:900;flex:0 0 auto}
.account-page-title{font-size:24px;font-weight:900}.account-page-email{font-size:13px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-page-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:18px;flex:0 0 auto}
.account-page-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.account-page-stat{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);text-align:center}.account-page-stat strong{display:block;font-size:20px}.account-page-stat span{font-size:11px;color:var(--muted)}
.account-page-empty{padding:28px 18px;border:1px dashed var(--border);border-radius:14px;text-align:center;color:var(--muted);line-height:1.6;background:var(--surface-soft)}
@media(max-width:520px){.account-page-card{padding:20px}.account-page-stats{grid-template-columns:1fr}.account-page-title{font-size:20px}}
.social-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 2px}
.social-preview-item{padding:8px 5px;border:1px solid var(--border);border-radius:10px;text-align:center;background:var(--surface-soft)}
.social-preview-item strong{display:block;font-size:16px}.social-preview-item span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
@media(max-width:700px){
    .auth-btn span.auth-label{display:none}
    .auth-btn{font-size:17px;padding:8px 10px}
    .profile-nav-btn{width:40px;height:40px;padding:4px}
    .signout-nav-btn span{display:none}
    .signout-nav-btn{font-size:17px;padding:8px 10px}
    .account-panel{right:-8px;width:275px}
}
html[data-theme="light"] .auth-btn{color:#0f172a;background:rgba(15,23,42,.045)}
html[data-theme="light"] .profile-nav-btn{color:#0f172a;background:rgba(15,23,42,.045)}
html[data-theme="light"] .signout-nav-btn{color:#0f172a;background:rgba(15,23,42,.045)}
html[data-theme="light"] .signout-nav-btn:hover{color:#be123c;background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.25)}
html[data-theme="light"] .account-panel{background:rgba(255,255,255,.98)}


/* EMAIL AUTH MODAL */
.auth-modal-overlay{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(12px);
}
.auth-modal-overlay.open{display:flex}
.auth-modal-card{
    width:min(430px,100%);
    padding:24px;
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 30px 90px rgba(0,0,0,.4);
}
.auth-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}
.auth-modal-head h2{
    margin:0;
    font-size:24px;
    line-height:1.2;
}
.auth-modal-head p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}
.auth-modal-close{
    width:36px;
    height:36px;
    flex:0 0 auto;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    font-size:18px;
}
.auth-field{margin-bottom:14px}
.auth-field>label{
    display:block;
    margin:0 0 7px;
    color:var(--text);
    font-size:13px;
    font-weight:800;
}
.auth-field input{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    background:var(--surface-soft);
    color:var(--text);
    font:inherit;
    outline:none;
}
.auth-field input:focus{
    border-color:rgba(124,92,255,.72);
    box-shadow:0 0 0 3px rgba(124,92,255,.12);
}
.auth-username-availability{
    min-height:18px;
    margin-top:6px;
    font-size:12px;
    line-height:1.4;
    font-weight:700;
}
.auth-username-availability.error{color:var(--danger)}
.auth-username-availability.success{color:#22c55e}
.auth-username-availability.checking{color:var(--muted)}

.auth-password-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}
.auth-password-label-row label{margin:0}
.auth-modal-submit{
    width:100%;
    margin-top:4px;
    border:1px solid rgba(124,92,255,.45);
    border-radius:12px;
    padding:12px 14px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:white;
    font-weight:900;
    font-size:14px;
    cursor:pointer;
}
.auth-modal-submit:hover{transform:translateY(-1px)}
.auth-modal-submit:disabled{opacity:.65;cursor:not-allowed;transform:none}
.auth-modal-status{
    min-height:20px;
    margin-top:12px;
    font-size:12px;
    line-height:1.5;
}
.auth-modal-status.error{color:var(--danger)}
.auth-modal-status.success{color:#22c55e}
.auth-modal-mode{
    margin-top:14px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

.auth-turnstile-wrap{
    min-height:0;
    margin:8px 0 14px;
}

.auth-turnstile-wrap:empty{
    display:none;
}

.auth-honeypot{
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.auth-honeypot input{
    position:absolute !important;
    left:-10000px !important;
}
.auth-modal-link{
    border:0;
    padding:0;
    background:transparent;
    color:var(--primary2);
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.auth-modal-link:hover{text-decoration:underline}
.auth-forgot-link{font-size:11px}

.auth-password-input-wrap{
    position:relative;
    width:100%;
}

.auth-password-input-wrap input{
    padding-right:48px;
}

.auth-password-toggle{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    font-size:27px;
    line-height:1;
    cursor:pointer;
    box-sizing:border-box;
    transition:transform .18s ease;
    outline:none;
    box-shadow:none;
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
}

.auth-password-toggle:hover{
    transform:translateY(-50%) !important;
}

.auth-password-toggle:active,
.auth-password-toggle:focus,
.auth-password-toggle:focus-visible{
    transform:translateY(-50%);
    color:var(--muted);
    background:transparent;
    border-color:transparent;
    outline:none;
    box-shadow:none;
}
@media(max-width:700px){
    /* Compact mobile auth modal across A-, A, A+ and A++. */
    .auth-modal-overlay{
        padding:8px !important;
        align-items:center !important;
    }

    .auth-modal-card{
        width:min(430px,100%) !important;
        max-height:calc((100dvh - 16px) / var(--ui-scale,1)) !important;
        overflow-y:auto !important;
        padding:14px !important;
        border-radius:16px !important;
    }

    .auth-modal-head{
        gap:10px !important;
        margin-bottom:12px !important;
    }

    .auth-modal-head h2{
        font-size:19px !important;
        line-height:1.15 !important;
    }

    .auth-modal-head p{
        margin-top:4px !important;
        font-size:11px !important;
        line-height:1.35 !important;
    }

    .auth-modal-close{
        width:32px !important;
        height:32px !important;
        font-size:16px !important;
    }

    .auth-field{
        margin-bottom:9px !important;
    }

    .auth-field>label{
        margin-bottom:4px !important;
        font-size:11px !important;
    }

    .auth-field input{
        min-height:38px !important;
        padding:8px 11px !important;
        border-radius:10px !important;
        font-size:14px !important;
    }

    .auth-password-input-wrap input{
        padding-right:44px !important;
    }

    .auth-password-toggle{
        width:38px !important;
        height:38px !important;
        right:6px !important;
        font-size:25px !important;
    }

    .auth-username-availability{
        min-height:14px !important;
        margin-top:3px !important;
        font-size:10px !important;
    }

    .auth-turnstile-wrap{
        margin:5px 0 8px !important;
    }

    .auth-modal-submit{
        min-height:38px !important;
        margin-top:2px !important;
        padding:8px 12px !important;
        border-radius:10px !important;
        font-size:12px !important;
    }

    .auth-modal-status{
        min-height:16px !important;
        margin-top:7px !important;
        font-size:10px !important;
    }

    .auth-modal-mode{
        margin-top:8px !important;
        font-size:10px !important;
    }

    .auth-forgot-link{
        font-size:10px !important;
    }
}

@media(max-width:700px){
    /* Extra compression for A+ and A++ phone settings. */
    html[data-ui-scale="large"] .auth-modal-card,
    html[data-ui-scale="xl"] .auth-modal-card{
        padding:11px !important;
        border-radius:14px !important;
    }

    html[data-ui-scale="large"] .auth-modal-head,
    html[data-ui-scale="xl"] .auth-modal-head{
        margin-bottom:9px !important;
    }

    html[data-ui-scale="large"] .auth-modal-head h2{
        font-size:17px !important;
    }

    html[data-ui-scale="xl"] .auth-modal-head h2{
        font-size:16px !important;
    }

    html[data-ui-scale="large"] .auth-modal-head p,
    html[data-ui-scale="xl"] .auth-modal-head p{
        font-size:10px !important;
        line-height:1.25 !important;
    }

    html[data-ui-scale="large"] .auth-field,
    html[data-ui-scale="xl"] .auth-field{
        margin-bottom:7px !important;
    }

    html[data-ui-scale="large"] .auth-field>label,
    html[data-ui-scale="xl"] .auth-field>label{
        margin-bottom:3px !important;
        font-size:10px !important;
    }

    html[data-ui-scale="large"] .auth-field input,
    html[data-ui-scale="xl"] .auth-field input{
        min-height:34px !important;
        padding:6px 9px !important;
        font-size:13px !important;
    }

    html[data-ui-scale="large"] .auth-password-input-wrap input,
    html[data-ui-scale="xl"] .auth-password-input-wrap input{
        padding-right:40px !important;
    }

    html[data-ui-scale="large"] .auth-password-toggle,
    html[data-ui-scale="xl"] .auth-password-toggle{
        width:35px !important;
        height:35px !important;
        right:5px !important;
        font-size:23px !important;
    }

    html[data-ui-scale="large"] .auth-username-availability,
    html[data-ui-scale="xl"] .auth-username-availability{
        min-height:12px !important;
        margin-top:2px !important;
        font-size:9px !important;
    }

    html[data-ui-scale="large"] .auth-turnstile-wrap,
    html[data-ui-scale="xl"] .auth-turnstile-wrap{
        margin:4px 0 6px !important;
    }

    html[data-ui-scale="large"] .auth-modal-submit,
    html[data-ui-scale="xl"] .auth-modal-submit{
        min-height:34px !important;
        padding:6px 10px !important;
        font-size:11px !important;
    }

    html[data-ui-scale="large"] .auth-modal-status,
    html[data-ui-scale="xl"] .auth-modal-status{
        min-height:13px !important;
        margin-top:5px !important;
        font-size:9px !important;
    }

    html[data-ui-scale="large"] .auth-modal-mode,
    html[data-ui-scale="xl"] .auth-modal-mode{
        margin-top:6px !important;
        font-size:9px !important;
    }

    html[data-ui-scale="large"] .auth-forgot-link,
    html[data-ui-scale="xl"] .auth-forgot-link{
        font-size:9px !important;
    }
}

.settings-panel{
    position:fixed;
    top:84px;
    right:20px;
    z-index:3100;
    width:320px;
    padding:20px;
    background:rgba(11,17,31,.96);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    display:none;
}

.settings-panel.open{
    display:block;
}

.settings-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px;
}

.settings-header h3{
    font-size:20px;
}

.settings-header button{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:9px;
    background:rgba(255,255,255,.05);
    color:white;
    font-size:16px;
}

.settings-header button:hover{
    background:rgba(255,255,255,.09);
}

.settings-section{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.settings-section label{
    color:#cbd5e1;
    font-size:13px;
    font-weight:600;
}

.settings-section select{
    width:100%;
}
/* HERO */

.hero{
    padding:90px 0 55px;
    text-align:center;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border:1px solid rgba(124,92,255,.3);
    border-radius:999px;
    background:rgba(124,92,255,.1);
    color:#c4b5fd;
    font-size:13px;
    margin-bottom:20px;
}

.hero h1{
    font-size:clamp(45px,8vw,82px);
    line-height:.95;
    letter-spacing:-4px;
    max-width:900px;
    margin:auto;
}

.gradient-text{
    background:linear-gradient(90deg,#fff,#c4b5fd,#67e8f9);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero p{
    max-width:680px;
    margin:25px auto 0;
    color:var(--muted);
    font-size:18px;
}

.hero-actions{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.hero-calculator-action{
    margin-top:24px;
    display:flex;
    justify-content:center;
}

.hero-calculator-action .btn-secondary{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),#5b8cff);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 28px rgba(124,92,255,.28);
    padding:14px 24px;
    border-radius:14px;
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.hero-calculator-action .btn-secondary:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 14px 34px rgba(124,92,255,.38);
    filter:brightness(1.08);
}

.btn{
    border:0;
    border-radius:12px;
    padding:13px 20px;
    font-weight:700;
    transition:.2s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    color:white;
    background:linear-gradient(135deg,var(--primary),#5b8cff);
    box-shadow:0 12px 35px rgba(124,92,255,.28);
}

.btn-secondary{
    color:#e2e8f0;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
}

/* STATS */

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin:35px 0 70px;
}

.stat{
    background:rgba(255,255,255,.035);
    border:1px solid var(--border);
    padding:20px;
    border-radius:16px;
    text-align:center;
}

.stat strong{
    display:block;
    font-size:27px;
}

.stat span{
    color:var(--muted);
    font-size:13px;
}

/* SECTION */

.section{
    padding:35px 0 80px;
}

.section-header{
    margin-bottom:25px;
}

.section-header h2{
    font-size:32px;
    letter-spacing:-1px;
}

.section-header p{
    color:var(--muted);
    margin-top:5px;
}

/* CALCULATOR CARDS */

.calculator-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.calc-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(20,30,50,.9),rgba(11,17,31,.9));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:25px;
    min-height:220px;
    transition:.25s;
}

.calc-card:before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    top:-90px;
    background:var(--glow,#7c5cff);
    filter:blur(75px);
    opacity:.15;
}

.calc-card:hover{
    transform:translateY(-5px);
    border-color:rgba(124,92,255,.4);
    box-shadow:var(--shadow);
}

.calc-icon{
    font-size:34px;
    margin-bottom:16px;
}

.calc-card h3{
    font-size:20px;
    margin-bottom:7px;
}

.calc-card p{
    color:var(--muted);
    font-size:14px;
}

.open-calc{
    margin-top:22px;
    color:#c4b5fd;
    background:transparent;
    border:0;
    font-weight:700;
}

/* APP */

.app{
    display:none;
    padding:35px 0 90px;
}

.app.active{display:block}

.app-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:25px;
}

.app-title{
    display:flex;
    gap:14px;
    align-items:center;
}

.app-title-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:28px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
}

.app-title h2{
    font-size:30px;
}

.app-title p{
    color:var(--muted);
}

.close-btn{
    background:rgba(255,255,255,.05);
    color:white;
    border:1px solid var(--border);
    border-radius:10px;
    padding:9px 13px;
}

/* FORM */

.panel{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:25px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(12px);
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.form-group.full{
    grid-column:1/-1;
}

label{
    color:#cbd5e1;
    font-size:13px;
    font-weight:600;
}

input,select{
    width:100%;
    color:white;
    background:#0b1220;
    border:1px solid #273449;
    border-radius:11px;
    padding:12px 13px;
    outline:none;
    transition:.2s;
}

input:focus,select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(124,92,255,.12);
}

.input-prefix{
    position:relative;
}

.input-prefix span{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
}

.input-prefix input{padding-left:32px}

.form-actions{
    margin-top:25px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* RESULTS */

.results{
    margin-top:25px;
}

.result-top{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:16px;
}

.result-hero{
    padding:28px;
    border-radius:var(--radius);
    border:1px solid rgba(52,211,153,.25);
    background:linear-gradient(135deg,rgba(16,185,129,.11),rgba(20,30,50,.8));
}

.result-label{
    color:var(--muted);
    font-size:13px;
}

.result-hero h3{
    font-size:30px;
    margin:5px 0;
}

.result-hero p{
    color:#a7f3d0;
}

.score-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
}

.score{
    width:100px;
    height:100px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:7px solid rgba(52,211,153,.25);
    font-size:28px;
    font-weight:800;
}

.result-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:15px;
}

.metric{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
}

.metric span{
    color:var(--muted);
    font-size:13px;
}

.metric strong{
    display:block;
    font-size:24px;
    margin-top:5px;
}

.chart-card{
    margin-top:15px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:25px;
}

.chart-card h3{
    margin-bottom:20px;
}

.chart{
    height:280px;
    display:flex;
    align-items:flex-end;
    gap:8px;
    overflow-x:auto;
    padding:10px 5px;
}

.bar-group{
    min-width:45px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
}

.bars{
    height:220px;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
}

.bar{
    width:15px;
    border-radius:5px 5px 2px 2px;
    min-height:2px;
    background:linear-gradient(to top,var(--primary),#a78bfa);
}

.bar.alt{
    background:linear-gradient(to top,#0ea5e9,#67e8f9);
}

.bar-label{
    font-size:10px;
    color:var(--muted2);
}

.legend{
    display:flex;
    gap:18px;
    margin-top:12px;
    color:var(--muted);
    font-size:12px;
}

.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
    margin-right:5px;
    background:var(--primary);
}

.dot.alt{background:#38bdf8}

/* TABLE */

.table-wrap{
    overflow-x:auto;
    margin-top:15px;
    border:1px solid var(--border);
    border-radius:16px;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:650px;
}

th,td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    text-align:left;
}

th{
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

td{
    font-size:14px;
}

tr:last-child td{border-bottom:0}

/* GENERIC CALCULATOR */

.generic-result{
    margin-top:20px;
    display:none;
}

.generic-result.active{display:block}

.big-result{
    text-align:center;
    padding:30px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(56,189,248,.08));
    border:1px solid rgba(124,92,255,.25);
}

.big-result .number{
    font-size:42px;
    font-weight:900;
    letter-spacing:-2px;
}

/* FAQ */

.faq{
    display:grid;
    gap:10px;
}

.faq-item{
    border:1px solid var(--border);
    background:rgba(255,255,255,.025);
    border-radius:14px;
    overflow:hidden;
}

.faq-question{
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    color:white;
    padding:17px;
    font-weight:700;
}

.faq-answer{
    display:none;
    padding:0 17px 17px;
    color:var(--muted);
    font-size:14px;
}

.faq-item.open .faq-answer{display:block}

/* FOOTER */

footer{
    border-top:1px solid var(--border);
    padding:35px 0;
    color:var(--muted);
    text-align:center;
    font-size:13px;
}

/* TOAST */

.toast{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:500;
    background:#111827;
    border:1px solid var(--border);
    color:white;
    padding:13px 17px;
    border-radius:12px;
    box-shadow:var(--shadow);
    transform:translateY(100px);
    opacity:0;
    transition:.3s;
}

.toast.show{
    transform:translateY(0);
    opacity:1;
}

/* =========================================================
   STANDARD CALCULATOR
========================================================= */

.calculator-mode-tabs{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:0 auto 18px;
}

.calculator-mode-btn{
    border:1px solid var(--border);
    background:rgba(255,255,255,.05);
    color:var(--muted);
    padding:10px 20px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.calculator-mode-btn:hover{
    color:var(--text);
    background:rgba(255,255,255,.08);
}

.calculator-mode-btn.active{
    color:white;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-color:transparent;
    box-shadow:0 6px 20px rgba(124,92,255,.25);
}

.calculator-panel{
    max-width:520px;
    margin:0 auto;
    padding:20px;
}

.calculator-display{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:15px 18px;
    margin-bottom:15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(0,0,0,.25);
    color:var(--text);
    font-size:32px;
    font-weight:700;
    overflow:hidden;
    word-break:break-all;
}

.calculator-keypad{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.calculator-key{
    min-height:58px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.15s;
}

.calculator-key:hover{
    background:rgba(255,255,255,.10);
    transform:translateY(-1px);
}

.calculator-key:active{
    transform:translateY(1px);
}

.calculator-key.operator{
    background:rgba(124,92,255,.15);
    color:var(--text);
}

.calculator-key.equals{
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-color:transparent;
    color:white;
}

.calculator-key.clear{
    color:#fca5a5;
    background:#4a151c;
    border-color:#7f1d1d;
}

.calculator-key.function,
.calculator-key.constant{
    background:rgba(255,255,255,.08);
    color:var(--text);
}

@media(max-width:600px){
    .calculator-mode-tabs{
        width:100%;
    }

    .calculator-mode-btn{
        flex:1;
        padding:10px 8px;
    }

    .calculator-panel{
        padding:14px;
    }

    .calculator-key{
        min-height:54px;
    }

    .calculator-display{
        font-size:26px;
    }
}

/* MOBILE */
    
@media(max-width:900px){
    .calculator-grid{grid-template-columns:repeat(2,1fr)}
    .result-top{grid-template-columns:1fr}
}

@media(max-width:700px){
    .container{width:min(100% - 22px,1180px)}

    .nav-links{
        display:none;
        position:absolute;
        left:10px;
        right:10px;
        top:68px;
        padding:10px;
        flex-direction:column;
        background:#0c1322;
        border:1px solid var(--border);
        border-radius:14px;
    }

    .nav-links.open{display:flex}

    .nav-links button{width:100%;text-align:left}

    .menu-btn{display:block}

    .hero{padding:65px 0 35px}

    .hero h1{
        font-size:48px;
        letter-spacing:-2.5px;
    }

    .stats{grid-template-columns:1fr}

    .calculator-grid{grid-template-columns:1fr}

    .form-grid{grid-template-columns:1fr}

    .form-group.full{grid-column:auto}

    .result-grid{grid-template-columns:1fr 1fr}

    .app-header{flex-direction:column}

    .result-hero h3{font-size:25px}
}

@media(max-width:450px){
    .result-grid{grid-template-columns:1fr}

    .hero h1{font-size:42px}
}

/* ================= FINAL UI / ACCESSIBILITY UPGRADES ================= */
:root{--ui-scale:1;--surface-soft:rgba(255,255,255,.025);--focus-ring:0 0 0 4px rgba(124,92,255,.14)}
html{font-size:16px}
body{overflow-x:hidden;width:100%;transition:background .25s ease,color .25s ease}
.nav,.settings-panel,.panel,.stat,.calc-card,.metric,.chart-card,.score-card,.faq-item,.toast{transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
html[data-theme="light"]{color-scheme:light;--bg:#f5f7fb;--bg2:#eaf0f8;--card:rgba(255,255,255,.92);--card-solid:#fff;--card2:#f8fafc;--border:rgba(15,23,42,.11);--text:#0f172a;--muted:#64748b;--muted2:#94a3b8;--shadow:0 20px 60px rgba(15,23,42,.12);--surface-soft:rgba(15,23,42,.035);--focus-ring:0 0 0 3px rgba(124,92,255,.16)}
html[data-theme="light"] body{background:radial-gradient(circle at 10% 0%,rgba(124,92,255,.10),transparent 30%),radial-gradient(circle at 90% 10%,rgba(56,189,248,.08),transparent 28%),linear-gradient(135deg,var(--bg),var(--bg2))}
html[data-theme="light"] .nav{background:rgba(255,255,255,.82)}
html[data-theme="light"] .nav-links button{color:#475569} html[data-theme="light"] .nav-links button:hover{color:#0f172a;background:rgba(15,23,42,.05)}
html[data-theme="light"] .menu-btn,html[data-theme="light"] .settings-btn,html[data-theme="light"] .feedback-nav-btn,html[data-theme="light"] .settings-header button,html[data-theme="light"] .close-btn{color:#0f172a;background:rgba(15,23,42,.045)}
html[data-theme="light"] .settings-panel{background:rgba(255,255,255,.97)} html[data-theme="light"] .settings-section label,html[data-theme="light"] label{color:#334155}
html[data-theme="light"] input,html[data-theme="light"] select{color:#0f172a;background:#fff;border-color:#cbd5e1}
html[data-theme="light"] .calc-card{background:linear-gradient(145deg,#fff,#f8fafc)} html[data-theme="light"] .btn-secondary{color:#334155;background:rgba(15,23,42,.045)} html[data-theme="light"] .faq-question{color:#0f172a} html[data-theme="light"] .toast{background:#fff;color:#0f172a}
html[data-theme="light"] .gradient-text{background:linear-gradient(90deg,#111827,#6d5dfc,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
.settings-section+.settings-section{margin-top:18px}.settings-options{display:flex;gap:8px;flex-wrap:wrap}.settings-option{flex:1;min-width:80px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:700;transition:.2s}.settings-option:hover{transform:translateY(-1px);border-color:rgba(124,92,255,.45)}.settings-option.active{border-color:var(--primary);box-shadow:var(--focus-ring);background:rgba(124,92,255,.11)}.settings-note{font-size:11px;color:var(--muted2);margin-top:2px}
.calculator-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 200px auto;gap:10px;padding:14px;margin-bottom:16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:16px}.calculator-search{position:relative}.calculator-search input{padding-left:40px}@media(min-width:781px){.money-container .calculator-search{width:calc(100% + 220px)}}.calculator-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.filter-clear{white-space:nowrap}.calc-empty{grid-column:1/-1;padding:34px 20px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:16px;background:var(--surface-soft)}
.feedback-trigger{display:inline-flex;align-items:center;gap:8px;margin-top:18px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);border-radius:12px;padding:10px 14px;font-weight:700}.feedback-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.62);backdrop-filter:blur(9px)}.feedback-overlay.open{display:flex}.feedback-modal-card{width:min(560px,100%);max-height:min(720px,calc(100vh - 40px));overflow:auto;background:var(--card-solid,var(--card));border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.34);padding:24px}.feedback-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}.feedback-head h3{font-size:24px}.feedback-head p{color:var(--muted);font-size:13px;margin-top:4px}.feedback-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:18px}.feedback-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.feedback-type button{border:1px solid var(--border);background:var(--surface-soft);color:var(--text);border-radius:12px;padding:11px 12px;font-weight:700}.feedback-type button.active{border-color:var(--primary);background:rgba(124,92,255,.11)}.feedback-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.feedback-field textarea{width:100%;min-height:150px;resize:vertical;color:var(--text);background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:12px 13px;outline:none}.feedback-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center}.feedback-status{font-size:12px;color:var(--muted);margin-right:auto}.feedback-status.success{color:var(--success)}.feedback-status.error{color:var(--danger)}.feedback-honeypot{position:absolute;left:-99999px;width:1px;height:1px;opacity:0;pointer-events:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)}button[disabled]{cursor:not-allowed;opacity:.6;transform:none!important}
@media(max-width:780px){.calculator-toolbar{grid-template-columns:1fr}.feedback-modal-card{padding:20px}}@media(max-width:520px){.settings-panel{left:12px;right:12px;width:auto}.feedback-type{grid-template-columns:1fr}.feedback-actions{flex-direction:column;align-items:stretch}.feedback-status{margin-right:0}}

.translate-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.68);backdrop-filter:blur(10px)}
.translate-overlay.open{display:flex}
.translate-modal-card{width:min(620px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;background:var(--card-solid,var(--card));border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.36);padding:24px}
.translate-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.translate-head h3{font-size:24px}.translate-head p{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.6}.translate-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:18px}
.translate-browser-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.translate-tab{border:1px solid var(--border);background:var(--surface-soft);color:var(--text);border-radius:12px;padding:11px 10px;font-weight:700}.translate-tab.active{border-color:var(--primary);background:rgba(124,92,255,.11)}
.translate-steps{display:grid;gap:10px}.translate-step{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.translate-step>strong{flex:0 0 30px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(124,92,255,.14);color:var(--text)}.translate-step b{display:block;margin-bottom:3px}.translate-step span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.translate-note{margin-top:15px;padding:13px 14px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:12px;line-height:1.5}.translate-actions{display:flex;justify-content:flex-end;margin-top:15px}
@media(max-width:520px){.translate-browser-tabs{grid-template-columns:1fr}.translate-modal-card{padding:20px}}
html[data-theme="light"] .translate-modal-card{background:#fff}

/* =========================================================
   LIGHT THEME - WEATHER & NEWS
========================================================= */

html[data-theme="light"] .weather-card,
html[data-theme="light"] .weather-forecast-card,
html[data-theme="light"] .weather-details > div,
html[data-theme="light"] .news-card {
    background: rgba(255,255,255,.92);
    border-color: rgba(15,23,42,.11);
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

html[data-theme="light"] .weather-details {
    border-top-color: rgba(15,23,42,.10);
}

html[data-theme="light"] .news-card:hover,
html[data-theme="light"] .weather-forecast-card:hover,
html[data-theme="light"] .weather-card:hover {
    border-color: rgba(15,23,42,.18);
}

html[data-theme="light"] .news-card-placeholder {
    background: rgba(15,23,42,.04);
    color: rgba(15,23,42,.40);
}

.ai-chat-nav-btn{
    border:1px solid var(--border);
    color:white;
    background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(56,189,248,.10));
    border-radius:10px;
    padding:8px 11px;
    font-size:13px;
    font-weight:800;
    transition:.2s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.ai-chat-nav-btn:hover{
    background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(56,189,248,.18));
    border-color:rgba(124,92,255,.5);
    transform:translateY(-2px);
}
.ai-chat-overlay{
    position:fixed;
    inset:0;
    z-index:1300;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,6,23,.68);
    backdrop-filter:blur(10px);
}
.ai-chat-overlay.open{display:flex}
.ai-chat-card{
    width:min(720px,100%);
    height:min(760px,calc(100vh - 40px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 30px 100px rgba(0,0,0,.38);
}
.ai-chat-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding:20px 20px 16px;
    border-bottom:1px solid var(--border);
}
.ai-chat-head h3{font-size:22px}
.ai-chat-head p{margin-top:4px;color:var(--muted);font-size:12px}
.ai-chat-close{
    width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface-soft);color:var(--text);font-size:18px;
}
.ai-chat-login{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:30px;
}
.ai-chat-login-icon{
    width:72px;height:72px;border-radius:22px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    font-size:34px;box-shadow:0 15px 45px rgba(124,92,255,.28);margin-bottom:18px;
}
.ai-chat-login h4{font-size:25px;margin-bottom:8px}
.ai-chat-login p{max-width:470px;color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:20px}
.ai-chat-messages{
    flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px;
}
.ai-chat-empty{
    margin:auto;max-width:500px;text-align:center;color:var(--muted);line-height:1.7;font-size:13px;
}
.ai-chat-message{max-width:82%;display:flex;flex-direction:column;gap:5px}
.ai-chat-message.user{align-self:flex-end;align-items:flex-end}
.ai-chat-message.assistant{align-self:flex-start;align-items:flex-start}
.ai-chat-bubble{
    padding:11px 13px;border-radius:16px;border:1px solid var(--border);
    line-height:1.6;font-size:13px;white-space:pre-wrap;word-break:break-word;
}
.ai-chat-message.user .ai-chat-bubble{
    background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.28);
}
.ai-chat-message.assistant .ai-chat-bubble{background:var(--surface-soft)}
.ai-chat-meta{font-size:10px;color:var(--muted2);padding:0 3px}
.ai-chat-composer{
    padding:14px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:flex-end;
}
.ai-chat-input{
    flex:1;min-height:46px;max-height:130px;resize:none;color:var(--text);
    background:var(--surface-soft);border:1px solid var(--border);border-radius:14px;padding:12px 13px;outline:none;
}
.ai-chat-send{
    min-width:92px;min-height:46px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:white;font-weight:800;padding:0 16px;
}
.ai-chat-send:disabled{opacity:.55;cursor:not-allowed}
.ai-chat-status{font-size:10px;color:var(--muted2);padding:0 16px 10px}
@media(max-width:700px){
    .ai-chat-nav-btn span{display:none}
    .ai-chat-nav-btn{font-size:17px;padding:8px 10px}
    .ai-chat-card{height:calc(100vh - 24px);border-radius:20px}
    .ai-chat-message{max-width:92%}
}
html[data-theme="light"] .ai-chat-nav-btn{color:#0f172a;background:rgba(15,23,42,.045)}


/* FINAL NAV LAYOUT FIX: keep account, Settings and AI Chat visible */
.nav-inner{
    justify-content:flex-start;
    min-width:0;
}
.nav-links{
    flex:1 1 auto;
    min-width:0;
    justify-content:center;
}
.nav-links button{
    white-space:nowrap;
}
.logo,.menu-btn,.auth-wrap,.feedback-nav-btn,.signout-nav-btn,.settings-btn,.ai-chat-nav-btn{
    flex:0 0 auto;
}
.ai-chat-nav-btn{
    position:relative;
    z-index:5;
    white-space:nowrap;
}
@media(max-width:1100px){
    .nav-links{gap:2px}
    .nav-links button{padding:8px 8px;font-size:12px}
}
@media(max-width:850px){
    .nav-links{display:none}
    .menu-btn{display:block}
    .ai-chat-nav-btn span{display:none}
    .ai-chat-nav-btn{font-size:17px;padding:8px 10px}
}


/* STABLE NAV LAYOUT: AI Chat is always visible and locked to the right of Settings */
.nav-inner{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    position:relative;
}
.nav-links{
    flex:1 1 0;
    min-width:0;
    justify-content:flex-start;
    overflow:visible;
}

.nav-calculator-spacer{
    width:24px;
    flex:0 0 24px;
}
.nav-links button{
    white-space:nowrap;
    flex:0 1 auto;
}
.nav-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex:0 0 auto;
    min-width:0;
}
.nav-actions > *{
    flex:0 0 auto;
}
.ai-chat-nav-btn{
    display:inline-flex !important;
    visibility:visible !important;
    flex:0 0 auto !important;
    order:99 !important;
    white-space:nowrap;
    min-width:0;
}

/* Keep the two utility buttons together at the far right. */
.settings-btn{order:98 !important;}
.ai-chat-nav-btn{order:99 !important;}

@media(max-width:1180px){
    .nav-inner{gap:8px}
    .nav-links{gap:1px}
    .nav-links button{padding:8px 6px;font-size:11px}
    .nav-actions{gap:5px}
}

@media(max-width:1000px){
    .nav-links{display:none}
    .menu-btn{display:block}
    .nav-actions{margin-left:auto}
}

@media(max-width:800px){
    .feedback-nav-btn span,
    .signout-nav-btn span,
    .ai-chat-nav-btn span{display:none}

    .feedback-nav-btn,
    .signout-nav-btn,
    .ai-chat-nav-btn{
        font-size:17px;
        padding:8px 9px;
    }

    .nav-actions{gap:5px}
}

@media(max-width:560px){
    .auth-wrap{flex-basis:36px;width:36px;height:36px}
    .nav-inner{gap:6px}
    .logo{font-size:17px;gap:7px}
    .logo-mark{width:34px;height:34px}
    .nav-actions{gap:4px}
    .settings-btn{font-size:17px;padding:7px 8px}
    .profile-nav-btn{width:36px;height:36px}
    .auth-btn{padding:7px 9px}
}

.admin-panel-nav-btn{
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface-soft);
    border-radius:12px;
    padding:9px 12px;
    font-size:13px;
    font-weight:800;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease;
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.admin-panel-nav-btn:hover{
    transform:translateY(-2px);
    background:rgba(124,92,255,.10);
    border-color:rgba(124,92,255,.46);
    box-shadow:
        0 8px 20px rgba(37,99,235,.12),
        0 3px 10px rgba(124,58,237,.09);
}

@media(max-width:700px){
    .admin-panel-nav-btn span{display:none}
    .admin-panel-nav-btn{
        font-size:18px;
        padding:8px 10px;
    }
}

/* =========================================================
   PRIVATE ADMIN PANEL
========================================================= */

.admin-panel-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(12px);
}

.admin-panel-overlay.open{
    display:flex;
}

.admin-panel-card{
    width:min(1040px,100%);
    max-height:min(88vh,900px);
    overflow:auto;
    padding:22px;
    color:var(--text);
    background:
        linear-gradient(
            145deg,
            rgba(20,30,50,.98),
            rgba(11,17,31,.98)
        );
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:
        0 30px 90px rgba(0,0,0,.38);
}

.admin-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.admin-panel-head-copy{
    min-width:0;
}

.admin-panel-eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 8px;
    border:1px solid rgba(124,92,255,.28);
    border-radius:8px;
    color:#c4b5fd;
    background:rgba(124,92,255,.09);
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
}

.admin-panel-head-copy h3{
    margin-top:8px;
    font-size:28px;
    letter-spacing:-.6px;
}

.admin-panel-head-copy p{
    margin-top:3px;
    color:var(--muted);
    font-size:13px;
}

.admin-panel-close,
.admin-panel-back-button{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid var(--border);
    border-radius:11px;
    color:var(--text);
    background:var(--surface-soft);
    font-weight:800;
    cursor:pointer;
}

.admin-panel-close{
    width:38px;
    height:38px;
    font-size:16px;
}

.admin-panel-close:hover,
.admin-panel-back-button:hover{
    background:rgba(124,92,255,.09);
    border-color:rgba(124,92,255,.42);
}

.admin-panel-divider{
    height:1px;
    margin:18px 0 20px;
    background:var(--border);
}

.admin-panel-content{
    min-height:300px;
}

.admin-panel-welcome{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            rgba(124,92,255,.07),
            rgba(56,189,248,.025)
        );
}

.admin-panel-welcome-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    flex:0 0 48px;
    border-radius:14px;
    background:rgba(124,92,255,.12);
    font-size:23px;
}

.admin-panel-welcome-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.admin-panel-welcome-copy strong{
    font-size:15px;
}

.admin-panel-welcome-copy span{
    color:var(--muted);
    font-size:12px;
}

.admin-panel-section-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:16px;
}
.admin-panel-section-button{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    padding:17px;
    text-align:left;
    color:var(--text);
    background:rgba(255,255,255,.035);
    border:1px solid var(--border);
    border-radius:17px;
    cursor:pointer;
}

.admin-panel-section-button:hover,
.admin-panel-section-button.active{
    background:
        linear-gradient(
            145deg,
            rgba(124,92,255,.09),
            rgba(56,189,248,.035)
        );
    border-color:rgba(124,92,255,.48);
    box-shadow:
        0 10px 28px rgba(37,99,235,.10),
        0 4px 14px rgba(124,58,237,.08);
}

.admin-panel-section-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(124,92,255,.10);
    font-size:21px;
}

.admin-panel-section-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.admin-panel-section-copy strong{
    font-size:14px;
}

.admin-panel-section-copy small{
    color:var(--muted);
    font-size:11px;
}

.admin-panel-section-arrow{
    font-size:25px;
    line-height:1;
    opacity:.55;
}

.admin-panel-section-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.admin-panel-back-button{
    width:38px;
    height:38px;
    font-size:23px;
}

.admin-panel-section-heading{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.admin-panel-section-heading > span{
    font-size:21px;
}

.admin-panel-section-heading h4{
    font-size:20px;
    letter-spacing:-.3px;
}

.admin-panel-section-heading p{
    margin-top:2px;
    color:var(--muted);
    font-size:12px;
}

.admin-panel-status{
    min-height:18px;
    margin-top:10px;
    color:var(--muted);
    font-size:12px;
}

.admin-panel-status.error{
    color:var(--danger);
}

.admin-panel-status.success{
    color:var(--success);
}

.admin-panel-loading{
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--muted);
}

.admin-panel-spinner{
    width:17px;
    height:17px;
    border:2px solid var(--border);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:adminPanelSpin .75s linear infinite;
}

@keyframes adminPanelSpin{
    to{transform:rotate(360deg)}
}

.admin-panel-empty,
.admin-panel-error{
    min-height:230px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-align:center;
    padding:24px;
    border:1px dashed var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.02);
}

.admin-panel-empty > span{
    font-size:30px;
    margin-bottom:4px;
}

.admin-panel-empty strong,
.admin-panel-error strong{
    font-size:15px;
}

.admin-panel-empty small,
.admin-panel-error span{
    color:var(--muted);
    font-size:12px;
}

.admin-panel-error .admin-panel-inline-button{
    margin-top:6px;
}

.admin-panel-list-head,
.admin-usage-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    color:var(--muted);
    font-size:12px;
}

.admin-panel-inline-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 11px;
    color:var(--text);
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:10px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.admin-panel-inline-button:hover{
    background:rgba(124,92,255,.09);
    border-color:rgba(124,92,255,.42);
}

.admin-feedback-modern-list{
    display:grid;
    gap:10px;
}

.admin-feedback-modern-item{
    padding:15px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(255,255,255,.03);
}

.admin-feedback-modern-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px;
}

.admin-feedback-modern-type{
    font-size:12px;
    font-weight:900;
}

.admin-feedback-modern-head time{
    color:var(--muted2);
    font-size:10px;
}

.admin-feedback-modern-message{
    white-space:pre-wrap;
    line-height:1.55;
    font-size:13px;
}

.admin-feedback-modern-page{
    margin-top:10px;
    color:var(--muted2);
    font-size:10px;
}

.admin-usage-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}

.admin-usage-summary-card{
    padding:16px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.admin-usage-summary-card span,
.admin-usage-summary-card small{
    display:block;
    color:var(--muted);
    font-size:11px;
}

.admin-usage-summary-card strong{
    display:block;
    margin:5px 0 2px;
    font-size:25px;
    letter-spacing:-.4px;
}

.admin-usage-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:16px;
    padding:12px 13px;
    border:1px solid rgba(56,189,248,.18);
    border-radius:13px;
    background:rgba(56,189,248,.04);
}

.admin-usage-note > span{
    flex:0 0 auto;
}

.admin-usage-note strong{
    display:block;
    font-size:11px;
}

.admin-usage-note p{
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
}

.admin-usage-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.admin-usage-card{
    min-width:0;
    padding:16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.018)
        );
}

.admin-usage-card:hover{
    border-color:rgba(124,92,255,.40);
    box-shadow:0 10px 26px rgba(37,99,235,.08);
}

.admin-usage-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.admin-usage-category{
    display:block;
    color:var(--muted2);
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.admin-usage-card h5{
    margin-top:3px;
    font-size:16px;
}

.admin-usage-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    padding:5px 7px;
    border-radius:8px;
    font-size:9px;
    font-weight:900;
}

.admin-usage-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.admin-usage-status.is-configured{
    color:var(--success);
    background:rgba(52,211,153,.08);
}

.admin-usage-status.is-missing{
    color:var(--warning);
    background:rgba(251,191,36,.08);
}

.admin-usage-provider{
    min-height:34px;
    margin-top:8px;
    color:var(--muted);
    font-size:10px;
    line-height:1.45;
}

.admin-usage-main-number{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-top:12px;
}

.admin-usage-main-number strong{
    font-size:28px;
    letter-spacing:-.5px;
}

.admin-usage-main-number span{
    color:var(--muted2);
    font-size:10px;
}

.admin-usage-remaining-detail{
    margin-top:3px;
    color:var(--muted2);
    font-size:9px;
    font-weight:700;
}

.admin-usage-metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
}

.admin-usage-metrics > div{
    padding:9px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.02);
}

.admin-usage-metrics span{
    display:block;
    color:var(--muted2);
    font-size:9px;
}

.admin-usage-metrics strong{
    display:block;
    margin-top:2px;
    font-size:13px;
}

.admin-usage-meta{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
    margin-top:13px;
    padding-top:11px;
    border-top:1px solid var(--border);
}

.admin-usage-meta div{
    min-width:0;
}

.admin-usage-meta span{
    display:block;
    color:var(--muted2);
    font-size:9px;
}

.admin-usage-meta strong{
    display:block;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
}

.admin-usage-meta code{
    display:block;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-size:9px;
}

.admin-usage-footer{
    margin-top:13px;
    color:var(--muted2);
    font-size:9px;
    line-height:1.5;
    text-align:center;
}

.admin-platform-section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin:20px 0 11px;
}
.admin-platform-section-title h5{
    font-size:15px;
    margin:0;
}
.admin-platform-section-title small{
    color:var(--muted2);
    font-size:10px;
    text-align:right;
}
.admin-platform-periods{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
    margin:0 0 15px;
}
.admin-platform-period-card{
    min-width:0;
    padding:13px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}
.admin-platform-period-card h6{
    margin:0 0 9px;
    font-size:12px;
}
.admin-platform-metric-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:11px;
}
.admin-platform-metric{
    min-width:0;
    padding:9px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.025);
}
.admin-platform-metric span,
.admin-platform-metric small{
    display:block;
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
}
.admin-platform-metric strong{
    display:block;
    margin-top:4px;
    font-size:14px;
    line-height:1.35;
    overflow-wrap:anywhere;
}
.admin-platform-metric small{
    margin-top:3px;
    font-size:9px;
    color:var(--muted2);
}
.admin-platform-database{
    padding:15px;
    margin:0 0 13px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.02);
}
.admin-platform-database-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:13px;
}
.admin-platform-database-head h5{
    margin:4px 0;
    font-size:15px;
    overflow-wrap:anywhere;
}
.admin-platform-database-head small{
    color:var(--muted2);
    font-size:10px;
    overflow-wrap:anywhere;
}
.admin-platform-database-size{
    flex:0 0 auto;
    text-align:right;
}
.admin-platform-database-size span,
.admin-platform-database-size small{
    display:block;
    color:var(--muted);
    font-size:10px;
}
.admin-platform-database-size strong{
    display:block;
    margin:4px 0;
    font-size:18px;
}
.admin-platform-warning{
    padding:12px 14px;
    margin:12px 0;
    border:1px solid rgba(245,158,11,.28);
    border-radius:12px;
    color:var(--text);
    background:rgba(245,158,11,.05);
    font-size:11px;
    line-height:1.55;
    overflow-wrap:anywhere;
}
.admin-platform-warning p{
    margin-top:5px;
    color:var(--muted);
}
.admin-platform-setup{
    padding:20px;
    border:1px solid var(--border);
    border-radius:17px;
    background:rgba(255,255,255,.025);
}
.admin-platform-setup-icon{
    font-size:28px;
    margin-bottom:8px;
}
.admin-platform-setup h5{
    margin:0 0 8px;
    font-size:16px;
}
.admin-platform-setup p,
.admin-platform-setup li{
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
}
.admin-platform-setup ol{
    margin:12px 0 14px;
    padding-left:20px;
}
.admin-platform-setup li{
    padding-left:3px;
    margin:5px 0;
}
.admin-platform-setup strong{
    color:var(--text);
}
.admin-platform-setup code,
.admin-platform-warning code{
    word-break:break-word;
    padding:2px 4px;
    border-radius:4px;
    background:rgba(127,127,127,.12);
}
.admin-platform-setup-footnote{
    margin:12px 0 !important;
}

html[data-theme="light"] .admin-panel-overlay{
    background:rgba(15,23,42,.42);
}

html[data-theme="light"] .admin-panel-card{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );
    box-shadow:0 30px 90px rgba(15,23,42,.20);
}

html[data-theme="light"] .admin-panel-eyebrow{
    color:#5b4cc4;
    background:rgba(124,92,255,.08);
}

html[data-theme="light"] .admin-panel-welcome,
html[data-theme="light"] .admin-usage-card,
html[data-theme="light"] .admin-panel-section-button,
html[data-theme="light"] .admin-feedback-modern-item,
html[data-theme="light"] .admin-usage-summary-card{
    background:rgba(15,23,42,.025);
}

html[data-theme="light"] .admin-panel-section-button:hover,
html[data-theme="light"] .admin-panel-section-button.active{
    background:rgba(124,92,255,.06);
}

html[data-theme="light"] .admin-usage-metrics > div{
    background:rgba(15,23,42,.018);
}

@media(max-width:760px){
    .admin-panel-overlay{
        align-items:flex-start;
        padding:12px;
    }

    .admin-panel-card{
        max-height:calc(100vh - 24px);
        padding:17px;
        border-radius:20px;
    }

    .admin-panel-head-copy h3{
        font-size:23px;
    }

    .admin-panel-content{
        min-height:260px;
    }

    .admin-panel-section-grid,
    .admin-usage-grid{
        grid-template-columns:1fr;
    }

    .admin-usage-summary-grid,
    .admin-platform-periods{
        grid-template-columns:1fr;
    }

    .admin-platform-section-title{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-platform-section-title small{
        text-align:left;
    }

    .admin-platform-database-head{
        flex-direction:column;
    }

    .admin-platform-database-size{
        text-align:left;
    }

    .admin-usage-summary-card{
        padding:13px;
    }

    .admin-usage-summary-card strong{
        font-size:22px;
    }

    .admin-panel-welcome{
        align-items:flex-start;
    }
}

@media(max-width:480px){
    .admin-usage-metrics{
        grid-template-columns:1fr;
    }

    .admin-panel-card{
        padding:14px;
    }

    .admin-panel-head{
        gap:10px;
    }

    .admin-panel-welcome{
        padding:14px;
        gap:10px;
    }

    .admin-panel-welcome-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        font-size:20px;
    }

    .admin-panel-welcome-copy span{
        font-size:11px;
    }

    .admin-panel-section-button{
        padding:14px;
        gap:10px;
    }

    .admin-panel-section-icon{
        width:40px;
        height:40px;
        font-size:19px;
    }

    .admin-usage-card{
        padding:13px;
    }

    .admin-usage-meta{
        grid-template-columns:1fr;
        gap:8px;
    }

    .admin-feedback-modern-head{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* =========================================================
   WEATHER FORECAST
========================================================= */

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    width: 100%;
}

.weather-forecast-card {
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.weather-forecast-day {
    font-weight: 700;
    margin-bottom: 10px;
}

.weather-forecast-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.weather-forecast-description {
    font-size: 13px;
    margin-bottom: 10px;
}

.weather-forecast-temp {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: baseline;
}

.weather-forecast-temp strong {
    font-size: 18px;
}

.weather-forecast-temp span {
    font-size: 14px;
    opacity: 0.6;
}

.weather-forecast-rain {
    margin-top: 10px;
    font-size: 13px;
}

@media (max-width: 800px) {

    .weather-forecast-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* =========================================================
   MAIN WEATHER CARD
========================================================= */

.weather-card {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 28px;
    border-radius: 22px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.10);
    box-sizing: border-box;
}

.weather-location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 15px;
    opacity: 0.85;
}

.weather-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 10px 0 28px;
}

.weather-icon {
    font-size: 64px;
    line-height: 1;
}

.weather-temperature {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

.weather-description {
    margin-top: 10px;
    font-size: 16px;
    opacity: 0.7;
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 20px;
}

.weather-details > div {
    text-align: center;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
}

.weather-details span {
    display: block;
    font-size: 12px;
    opacity: 0.6;
    margin-bottom: 6px;
}

.weather-details strong {
    font-size: 17px;
}

@media (max-width: 600px) {

    .weather-card {
        padding: 20px;
    }

    .weather-main {
        gap: 16px;
    }

    .weather-icon {
        font-size: 48px;
    }

    .weather-temperature {
        font-size: 40px;
    }

    .weather-details {
        gap: 8px;
    }

    .weather-details > div {
        padding: 12px 6px;
    }

}

/* =========================================================
   NEWS
========================================================= */

.news-category{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto 38px;
}


/* =========================================================
   NEWS CATEGORY NAV
========================================================= */

.news-category-nav{
    width:fit-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 auto 28px;
    padding:6px;

    overflow-x:auto;
    scrollbar-width:none;

    border:1px solid var(--border);
    border-radius:14px;

    background:rgba(255,255,255,.025);
}

.news-category-nav::-webkit-scrollbar{
    display:none;
}

.news-category-btn{
    flex:0 0 auto;

    border:1px solid transparent;
    border-radius:10px;

    background:transparent;
    color:var(--muted);

    padding:9px 14px;

    font-size:12px;
    font-weight:800;

      white-space:nowrap;

    transition:
        color .2s,
        background .2s,
        border-color .2s,
        transform .2s;
}

.news-category-btn:hover{
    color:var(--text);
    background:rgba(255,255,255,.06);
    border-color:var(--border);
}

.news-category-btn.active{
    color:white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );

    border-color:transparent;

    box-shadow:
        0 6px 18px rgba(124,92,255,.22);
}

/* =========================================================
   NEWS CATEGORY HEADER
========================================================= */

.news-category-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;

    margin-bottom:18px;
}

.news-category-header h3{
    margin:0;

    font-size:22px;
    line-height:1.2;
    letter-spacing:-.4px;
}

.news-category-header span{
    color:var(--muted2);

    font-size:11px;
    font-weight:700;

    white-space:nowrap;
}


/* =========================================================
   NEWS GRID
========================================================= */

.news-grid{
    width:100%;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;
}


/* =========================================================
   NEWS CARD
========================================================= */

.news-card{
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-width:0;

    background:
        linear-gradient(
            145deg,
            rgba(20,30,50,.9),
            rgba(11,17,31,.9)
        );

    border:1px solid var(--border);
    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;
}

.news-card:hover{
    transform:translateY(-5px);

    border-color:rgba(124,92,255,.4);

    box-shadow:var(--shadow);
}


/* =========================================================
   NEWS IMAGE
========================================================= */

.news-card-image{
    width:100%;
    height:190px;

    object-fit:cover;

    display:block;
    flex-shrink:0;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(124,92,255,.16),
            transparent 60%
        );
}

.news-card-placeholder{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;

    width:100%;
    min-height:190px;

    padding:0;

    box-sizing:border-box;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 22% 18%,
            rgba(124,92,255,.34),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(56,189,248,.25),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #16133a,
            #111b3b 54%,
            #102d47
        );

    color:white;
}

.news-card-image-emoji{
    display:block;
    font-size:54px;
    line-height:1;
}

.news-card-image-reason{
    display:block;
    width:100%;
    max-width:92%;

    color:rgba(255,255,255,.62);

    font-size:11px;
    line-height:1.35;
    font-weight:600;
    text-align:center;
}

.news-image-status[data-news-image-state="pending"] .news-card-image-reason{
    color:rgba(255,255,255,.48);
}

.news-fallback-art{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.news-fallback-orbit{
    position:absolute;

    width:150px;
    height:150px;

    border:1px solid rgba(255,255,255,.17);
    border-radius:50%;

    transform:rotate(-22deg);
}

.news-fallback-orbit-one{
    width:145px;
    height:62px;
}

.news-fallback-orbit-two{
    width:175px;
    height:80px;

    transform:
        rotate(54deg);
}

.news-fallback-icon{
    position:relative;
    z-index:3;

    width:82px;
    height:82px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.28);
    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.055)
        );

    box-shadow:
        0 18px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.16);

    font-size:35px;
    line-height:1;
}

.news-fallback-accent{
    position:absolute;
    right:18%;
    top:22%;

    width:9px;
    height:9px;

    border-radius:50%;

    background:rgba(255,255,255,.78);

    box-shadow:
        -46px 58px 0 rgba(255,255,255,.34),
        57px 46px 0 rgba(255,255,255,.27),
        28px -34px 0 rgba(255,255,255,.20);
}

.news-card-fallback-visual{
    --news-fallback-a:rgba(124,92,255,.34);
    --news-fallback-b:rgba(56,189,248,.25);
    --news-fallback-c:#102d47;
}

.news-card-fallback-visual{
    background:
        radial-gradient(
            circle at 22% 18%,
            var(--news-fallback-a),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 28%,
            var(--news-fallback-b),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #16133a,
            #111b3b 54%,
            var(--news-fallback-c)
        );
}

/* Category-specific neutral visuals. These are abstract UI motifs,
   not depictions of the article or its subject. */
.news-fallback-category-world{
    --news-fallback-a:rgba(59,130,246,.38);
    --news-fallback-b:rgba(45,212,191,.24);
    --news-fallback-c:#123b55;
}

.news-fallback-category-technology{
    --news-fallback-a:rgba(124,92,255,.40);
    --news-fallback-b:rgba(56,189,248,.28);
    --news-fallback-c:#182354;
}

.news-fallback-category-business{
    --news-fallback-a:rgba(34,197,94,.26);
    --news-fallback-b:rgba(250,204,21,.22);
    --news-fallback-c:#173c36;
}

.news-fallback-category-science{
    --news-fallback-a:rgba(14,165,233,.30);
    --news-fallback-b:rgba(139,92,246,.30);
    --news-fallback-c:#20245c;
}

.news-fallback-category-sports{
    --news-fallback-a:rgba(249,115,22,.35);
    --news-fallback-b:rgba(245,158,11,.24);
    --news-fallback-c:#4a2815;
}

.news-fallback-category-crime{
    --news-fallback-a:rgba(148,163,184,.24);
    --news-fallback-b:rgba(244,63,94,.20);
    --news-fallback-c:#202536;
}

.news-fallback-category-entertainment{
    --news-fallback-a:rgba(236,72,153,.34);
    --news-fallback-b:rgba(168,85,247,.28);
    --news-fallback-c:#351d55;
}

.news-fallback-category-culture{
    --news-fallback-a:rgba(217,70,239,.30);
    --news-fallback-b:rgba(251,191,36,.24);
    --news-fallback-c:#3b2450;
}

.news-fallback-category-health{
    --news-fallback-a:rgba(244,63,94,.28);
    --news-fallback-b:rgba(45,212,191,.22);
    --news-fallback-c:#253448;
}

.news-fallback-category-environment{
    --news-fallback-a:rgba(34,197,94,.34);
    --news-fallback-b:rgba(20,184,166,.24);
    --news-fallback-c:#123b34;
}

.news-fallback-category-food{
    --news-fallback-a:rgba(251,146,60,.34);
    --news-fallback-b:rgba(250,204,21,.22);
    --news-fallback-c:#4a311a;
}

.news-fallback-category-education{
    --news-fallback-a:rgba(99,102,241,.34);
    --news-fallback-b:rgba(14,165,233,.23);
    --news-fallback-c:#1d3156;
}

.news-fallback-caption{
    position:relative;
    z-index:4;

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;

    padding:
        9px
        11px
        10px;

    box-sizing:border-box;

    background:
        linear-gradient(
            180deg,
            rgba(3,7,18,.04),
            rgba(3,7,18,.86)
        );

    text-align:left;
}

.news-fallback-caption strong{
    color:rgba(255,255,255,.96);

    font-size:10px;
    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.35px;
}

.news-fallback-caption span{
    color:rgba(255,255,255,.72);

    font-size:9px;
    line-height:1.25;
    font-weight:700;
}

.news-fallback-caption small{
    width:100%;

    color:rgba(255,255,255,.76);

    font-size:9px;
    line-height:1.3;
    font-weight:600;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.news-card-image-loaded{
    position:relative;
    display:block;
    width:100%;
    height:190px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(124,92,255,.12),
            transparent 62%
        );
}

.news-card-image-inner{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.news-card-image-credit{
    position:absolute;

    left:8px;
    right:8px;
    bottom:8px;

    display:block;

    max-width:calc(100% - 16px);

    padding:4px 7px;

    border-radius:6px;

    background:rgba(0,0,0,.62);

    color:rgba(255,255,255,.86);

    font-size:8px;
    line-height:1.25;
    font-weight:600;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    pointer-events:none;
}

.news-image-pending{
    position:relative;
}

.news-image-pending::after{
    content:"";
    width:22px;
    height:22px;

    border:2px solid rgba(255,255,255,.16);
    border-top-color:rgba(255,255,255,.7);

    border-radius:50%;

    animation:newsImageSpin .8s linear infinite;

    position:absolute;
    right:14px;
    bottom:14px;
}

@keyframes newsImageSpin{
    to{
        transform:rotate(360deg);
    }
}

html[data-theme="light"] .news-card-image-credit{
    background:rgba(15,23,42,.68);
}

/* =========================================================
   NEWS LINK / CONTENT
========================================================= */

.news-card a{
    display:flex;
    flex-direction:column;
    flex:1;

    color:inherit;
    text-decoration:none;
}

.news-card-source,
.news-card-title,
.news-card-description,
.news-card-time{
    margin-left:20px;
    margin-right:20px;
}

.news-card-source{
    margin-top:18px;
    margin-bottom:6px;

    color:var(--muted);

    font-size:11px;
    font-weight:700;

    min-height:15px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.news-card-title{
    margin-bottom:9px;

    font-size:18px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:-.25px;

    min-height:47px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.news-card-description{
    color:var(--muted);

    font-size:12px;
    line-height:1.55;

    min-height:74px;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


/* =========================================================
   NEWS FOOTER
========================================================= */

.news-card-time{
    margin-top:auto;
    margin-bottom:20px;
    padding-top:18px;

    color:var(--muted2);

    font-size:10px;
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] .news-category-nav{
    background:rgba(15,23,42,.025);
}

html[data-theme="light"] .news-category-btn{
    color:#64748b;
}

html[data-theme="light"] .news-category-btn:hover{
    color:#0f172a;
    background:rgba(15,23,42,.05);
}

html[data-theme="light"] .news-category-btn.active{
    color:white;
}

html[data-theme="light"] .news-card{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color:rgba(15,23,42,.11);

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);
}

html[data-theme="light"] .news-card:hover{
    border-color:rgba(124,92,255,.35);

    box-shadow:
        0 16px 38px rgba(15,23,42,.11);
}

html[data-theme="light"] .news-card-placeholder{
    background:rgba(15,23,42,.035);

    color:rgba(15,23,42,.40);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .news-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:700px){

    .news-category{
        width:min(100% - 22px,1180px);

        margin-bottom:32px;
    }

    .news-category-nav{
        margin-bottom:24px;

        border-radius:12px;
        padding:5px;
    }

    .news-category-btn{
        padding:8px 12px;
        font-size:11px;
    }

    .news-category-header{
        align-items:flex-start;
        flex-direction:column;

        gap:5px;
    }

    .news-grid{
        grid-template-columns:1fr;
    }

    .news-card-image{
        height:210px;
    }

}

@media(max-width:450px){

    .news-card-image{
        height:190px;
    }

}


/* =========================================================
   SHOP
========================================================= */

.shop-section{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:45px 0 90px;
}

/* =========================================================
   HEADER
========================================================= */

.shop-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.shop-header h2{
    margin:0;
    font-size:32px;
    line-height:1.1;
    letter-spacing:-1px;
}

.shop-header p{
    color:var(--muted);
    margin-top:7px;
    font-size:14px;
}

.shop-header small{
    display:block;
    color:var(--muted2);
    margin-top:5px;
    font-size:11px;
}

.shop-close{
    flex:0 0 auto;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:9px 13px;
    font-weight:700;
    transition:.2s;
}

.shop-close:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-1px);
}

/* =========================================================
   FILTERS
========================================================= */

.shop-filters{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:28px;
}

.shop-filter{
    border:1px solid var(--border);
    background:rgba(255,255,255,.05);
    color:var(--muted);
    padding:9px 15px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    transition:.2s;
}

.shop-filter:hover{
    color:var(--text);
    background:rgba(255,255,255,.08);
    border-color:rgba(124,92,255,.35);
}

.shop-filter.active{
    color:white;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );
    border-color:transparent;
    box-shadow:0 6px 18px rgba(124,92,255,.20);
}

/* =========================================================
   GRID
========================================================= */

.shop-grid{
    width:100%;
    display:grid;
    align-items:start;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

/* =========================================================
   CARD
========================================================= */

.shop-card{
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-width:0;

    background:
        linear-gradient(
            145deg,
            rgba(20,30,50,.94),
            rgba(11,17,31,.94)
        );

    border:1px solid var(--border);
    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.shop-card:hover{
    transform:translateY(-5px);
    border-color:rgba(124,92,255,.42);
    box-shadow:0 22px 55px rgba(0,0,0,.28);
}

/* =========================================================
   IMAGE
========================================================= */

.shop-card-image{
    position:relative;

    width:100%;
    height:165px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(124,92,255,.16),
            transparent 60%
        );
}

.shop-image{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:0;
    box-sizing:border-box;
    display:block;
    transform:scale(1.12);
    transition:transform .35s ease;
}

.shop-card:hover .shop-image{
    transform:scale(1.5);
}

.shop-image-placeholder{
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    font-size:58px;

    background:rgba(255,255,255,.035);
}

/* =========================================================
   BADGE
========================================================= */

.shop-badge{
    position:absolute;
    top:12px;
    right:12px;

    padding:6px 10px;

    border-radius:999px;

    background:var(--danger);
    color:white;

    font-size:12px;
    font-weight:800;

    box-shadow:
        0 8px 20px rgba(251,113,133,.25);
}

/* =========================================================
   CARD CONTENT
========================================================= */

.shop-card-content{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:16px;
}

.shop-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    margin-bottom:8px;
}

.shop-category{
    color:var(--muted2);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.shop-title{
    margin:0 0 8px;

    font-size:17px;
    line-height:1.3;
    letter-spacing:-.2px;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.shop-store{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    margin-bottom:6px;
}

/* =========================================================
   PRICES
========================================================= */

.shop-prices{
    display:flex;
    align-items:baseline;
    gap:8px;

    margin-top:4px;
    margin-bottom:14px;
}

.shop-old-price{
    color:var(--muted2);
    font-size:14px;
    text-decoration:line-through;
}

.shop-new-price{
    color:var(--success);
    font-size:20px;
    font-weight:900;
}


/* =========================================================
   VALUE ANALYSIS
========================================================= */

.shop-value-analysis{
    margin-top:2px;
    padding:14px;

    border:1px solid var(--border);
    border-radius:14px;

    background:rgba(255,255,255,.025);
}

.shop-analysis-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    color:var(--muted);
    font-size:12px;
}

.shop-analysis-row + .shop-analysis-row{
    margin-top:8px;
}

.shop-analysis-row strong{
    color:var(--text);
    font-size:13px;
}

.shop-score-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-top:12px;
    padding-top:11px;

    border-top:1px solid var(--border);
}

.shop-score-row span{
    color:var(--muted);
    font-size:12px;
}

.shop-score-row strong{
    color:var(--warning);
    font-size:13px;
}

.shop-savings{
    color:var(--success)!important;
}

/* =========================================================
   VERDICT
========================================================= */

.shop-verdict{
    margin-top:14px;
    padding:13px 14px;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(52,211,153,.08),
            rgba(124,92,255,.06)
        );

    border:1px solid rgba(52,211,153,.18);
}

.shop-verdict-title{
    color:var(--success);
    font-size:13px;
    font-weight:900;
}

.shop-verdict p{
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

/* =========================================================
   WHERE TO BUY
========================================================= */

.shop-where-to-buy{
    margin-top:16px;
}

.shop-where-title{
    margin-bottom:9px;

    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.shop-best-price-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:12px;

    border:1px solid rgba(52,211,153,.22);
    border-radius:13px;

    background:rgba(52,211,153,.055);
}

.shop-best-price-info{
    min-width:0;
}

.shop-best-label{
    display:block;

    margin-bottom:3px;

    color:var(--success);

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.6px;
}

.shop-best-price-right{
    display:flex;
    align-items:center;
    gap:10px;

    flex:0 0 auto;
}

.shop-best-price{
    color:var(--success);
    font-size:16px;
    font-weight:900;
    white-space:nowrap;
}

.shop-buy-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--border);
    border-radius:9px;

    padding:8px 11px;

    color:white;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );

    font-size:11px;
    font-weight:800;

    white-space:nowrap;

    transition:.2s;
}

.shop-buy-button:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(124,92,255,.22);
}

.shop-buy-button-primary{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );
}

/* =========================================================
   OTHER STORES
========================================================= */

.shop-other-stores{
    margin-top:10px;

    border:1px solid var(--border);
    border-radius:12px;

    overflow:hidden;

    background:rgba(255,255,255,.02);
}

.shop-other-title{
    padding:9px 11px;

    color:var(--muted);
    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.6px;

    border-bottom:1px solid var(--border);
}

.shop-store-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:10px 11px;

    border-bottom:1px solid var(--border);
}

.shop-store-row:last-child{
    border-bottom:0;
}

.shop-store-name{
    min-width:0;

    color:var(--text);
    font-size:11px;
    font-weight:700;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.shop-store-action{
    display:flex;
    align-items:center;
    gap:8px;

    flex:0 0 auto;
}

.shop-store-price{
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}

/* =========================================================
   UPDATED
========================================================= */

.shop-updated{
    margin-top:auto;
    padding-top:16px;

    border-top:1px solid var(--border);

    color:var(--muted2);
    font-size:10px;
}

/* =========================================================
   LEGACY / COMPATIBILITY
========================================================= */

.shop-deal-button{
    display:block;
    width:100%;

    padding:11px 14px;

    border-radius:11px;

    text-align:center;

    color:white;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );

    font-weight:800;

    transition:.2s;
}

.shop-deal-button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(124,92,255,.25);
}

/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] .shop-card{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color:rgba(15,23,42,.11);

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);
}

html[data-theme="light"] .shop-card:hover{
    border-color:rgba(124,92,255,.35);

    box-shadow:
        0 16px 38px rgba(15,23,42,.11);
}

html[data-theme="light"] .shop-card-image{
    background:rgba(15,23,42,.035);
}

html[data-theme="light"] .shop-image-placeholder{
    background:rgba(15,23,42,.035);
}

html[data-theme="light"] .shop-value-analysis,
html[data-theme="light"] .shop-other-stores{
    background:rgba(15,23,42,.025);
}

html[data-theme="light"] .shop-best-price-box{
    background:rgba(16,185,129,.055);
}

html[data-theme="light"] .shop-verdict{
    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.055),
            rgba(124,92,255,.045)
        );
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .shop-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media(max-width:850px){

    .shop-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:700px){

    .shop-section{
        width:min(100% - 22px,1180px);
        padding:35px 0 70px;
    }

    .shop-header{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .shop-header h2{
        font-size:29px;
    }

    .shop-grid{
        grid-template-columns:1fr;
    }

    .shop-card-image{
        height:180px;
    }

}

@media(max-width:480px){

    .shop-header h2{
        font-size:27px;
    }

    .shop-card-content{
        padding:17px;
    }

    .shop-best-price-box{
        align-items:flex-start;
        flex-direction:column;
    }

    .shop-best-price-right{
        width:100%;
        justify-content:space-between;
    }

    .shop-buy-button{
        flex:1;
    }

}


/* =========================================================
   SHOP MODERNIZATION
========================================================= */

.shop-hero{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);
    gap:20px;
    align-items:stretch;
    margin-bottom:22px;
}

.shop-hero-copy{
    position:relative;
    overflow:hidden;
    padding:28px;
    border:1px solid var(--border);
    border-radius:24px;
    background:
        radial-gradient(circle at 85% 0%, rgba(124,92,255,.16), transparent 42%),
        linear-gradient(145deg, rgba(20,30,50,.96), rgba(11,17,31,.96));
    box-shadow:var(--shadow);
}

.shop-hero-copy::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-70px;
    bottom:-90px;
    border-radius:50%;
    background:rgba(52,211,153,.08);
    pointer-events:none;
}

.shop-eyebrow{
    margin-bottom:8px;
    color:var(--primary2);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.2px;
}

.shop-hero h2{
    margin:0;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-1.2px;
}

.shop-hero p{
    max-width:760px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.shop-hero-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    margin-top:16px;
    color:var(--muted2);
    font-size:11px;
    font-weight:700;
}

.shop-dot{
    opacity:.55;
}

.shop-trust-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:22px;
    border:1px solid rgba(52,211,153,.22);
    border-radius:24px;
    background:
        linear-gradient(145deg, rgba(52,211,153,.09), rgba(124,92,255,.055));
    box-shadow:var(--shadow);
}

.shop-trust-icon{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(52,211,153,.14);
    color:var(--success);
    font-size:18px;
    font-weight:900;
}

.shop-trust-box strong{
    display:block;
    color:var(--text);
    font-size:13px;
}

.shop-trust-box span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

.shop-controls{
    display:grid;
    grid-template-columns:minmax(220px,1fr) 210px 185px auto;
    gap:10px;
    align-items:center;
    margin-bottom:22px;
}

.shop-search-box,
.shop-select-box{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:44px;
    padding:0 13px;
    border:1px solid var(--border);
    border-radius:13px;
    background:rgba(255,255,255,.035);
    color:var(--muted);
    box-sizing:border-box;
}

.shop-search-box:focus-within,
.shop-select-box:focus-within{
    border-color:rgba(124,92,255,.48);
    box-shadow:0 0 0 3px rgba(124,92,255,.08);
}

.shop-search-box > span,
.shop-select-box > span{
    flex:0 0 auto;
    font-size:16px;
}

.shop-search-box input,
.shop-select-box select{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:12px;
}

.shop-search-box input::placeholder{
    color:var(--muted2);
}

.shop-select-box select{
    cursor:pointer;
}

.shop-select-box select option{
    background:#111827;
    color:#f8fafc;
}

.shop-control-result{
    justify-self:end;
    color:var(--muted2);
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.shop-result-count{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,255,255,.03);
}

.shop-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin:8px 0 10px;
}

.shop-section-heading h3,
.shop-partners-heading h3{
    margin:0;
    font-size:18px;
}

.shop-section-heading p,
.shop-partners-heading p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.shop-filters{
    justify-content:flex-start;
    margin-bottom:22px;
    padding-bottom:2px;
    overflow-x:auto;
    scrollbar-width:thin;
    flex-wrap:nowrap;
}

.shop-filter{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:8px 12px;
    border-radius:12px;
}

.shop-filter-icon{
    font-size:15px;
}

.shop-filter-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:var(--muted2);
    font-size:10px;
}

.shop-filter.active .shop-filter-count{
    background:rgba(255,255,255,.17);
    color:#fff;
}

.shop-filter.disabled{
    opacity:.5;
    cursor:not-allowed;
    filter:saturate(.55);
}

.shop-partners{
    margin-bottom:24px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:20px;
    background:rgba(255,255,255,.02);
}

.shop-partners-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.shop-partners-heading > span{
    flex:0 0 auto;
    padding:6px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--muted2);
    font-size:10px;
    font-weight:900;
}

.shop-partners-grid{
    --shop-partner-card-height:56px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:var(--shop-partner-card-height);
    gap:9px;
    max-height:calc((2 * var(--shop-partner-card-height)) + 9px);
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:8px;
    scrollbar-width:thin;
    scrollbar-color:rgba(148,163,184,.35) transparent;
    scrollbar-gutter:stable;
}

.shop-partners-grid::-webkit-scrollbar{
    width:7px;
}

.shop-partners-grid::-webkit-scrollbar-track{
    background:transparent;
}

.shop-partners-grid::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.35);
    border-radius:999px;
}

.shop-partners-grid::-webkit-scrollbar-thumb:hover{
    background:rgba(148,163,184,.52);
}

.shop-partner-card{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    min-height:var(--shop-partner-card-height);
    height:var(--shop-partner-card-height);
    padding:11px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

.shop-partner-icon{
    flex:0 0 auto;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(124,92,255,.1);
    font-size:15px;
}

.shop-partner-main{
    min-width:0;
    flex:1;
}

.shop-partner-main strong,
.shop-partner-main span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.shop-partner-main strong{
    color:var(--text);
    font-size:11px;
}

.shop-partner-main span{
    margin-top:2px;
    color:var(--muted2);
    font-size:9px;
}

.shop-partner-status{
    flex:0 0 auto;
    padding:5px 7px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--muted2);
    font-size:8px;
    font-weight:900;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.shop-partner-status.live{
    border-color:rgba(52,211,153,.24);
    background:rgba(52,211,153,.08);
    color:var(--success);
}

.shop-affiliate-card{
    border-color:rgba(124,92,255,.2);
}

.shop-partner-badge{
    position:absolute;
    left:12px;
    bottom:12px;
    max-width:70%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:6px 9px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(8,12,22,.74);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:9px;
    font-weight:900;
}

.shop-card-meta{
    align-items:flex-start;
}

.shop-category{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.shop-savings{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:-6px;
    margin-bottom:13px;
    font-size:11px;
    font-weight:800;
}

.shop-availability{
    margin-top:14px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(255,255,255,.025);
}

.shop-availability-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.shop-availability-head > div{
    min-width:0;
}

.shop-info-label{
    display:block;
    margin-bottom:3px;
    color:var(--muted2);
    font-size:9px;
    font-weight:900;
    letter-spacing:.65px;
    text-transform:uppercase;
}

.shop-availability-head strong{
    color:var(--text);
    font-size:12px;
}

.shop-availability-verified{
    flex:0 0 auto;
    padding:5px 7px;
    border:1px solid rgba(52,211,153,.2);
    border-radius:999px;
    background:rgba(52,211,153,.06);
    color:var(--success);
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

.shop-country-summary{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:9px;
}

.shop-country-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    max-width:100%;
    padding:4px 6px;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:var(--muted);
    font-size:9px;
    font-weight:800;
}

.shop-country-chip-full{
    padding:5px 7px;
}

.shop-country-details{
    width:100%;
    margin-top:8px;
}

.shop-country-details summary{
    display:inline-flex;
    cursor:pointer;
    color:var(--primary2);
    font-size:10px;
    font-weight:900;
    list-style:none;
}

.shop-country-details summary::-webkit-details-marker{
    display:none;
}

.shop-country-details summary::after{
    content:" ↓";
    opacity:.7;
}

.shop-country-details[open] summary::after{
    content:" ↑";
}

.shop-country-list{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    max-height:135px;
    overflow:auto;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--border);
}

.shop-availability-note{
    margin:9px 0 0;
    color:var(--muted2);
    font-size:9px;
    line-height:1.5;
}

.shop-delivery{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:9px;
    padding:10px 11px;
    border:1px dashed var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.018);
}

.shop-delivery-icon{
    flex:0 0 auto;
    font-size:14px;
}

.shop-delivery p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:9px;
    line-height:1.45;
}

.shop-empty-state{
    grid-column:1 / -1;
    display:grid;
    place-items:center;
    min-height:270px;
    padding:34px;
    border:1px dashed var(--border);
    border-radius:22px;
    background:rgba(255,255,255,.018);
    text-align:center;
}

.shop-empty-icon{
    font-size:40px;
    margin-bottom:10px;
}

.shop-empty-state h3{
    margin:0;
    font-size:18px;
}

.shop-empty-state p{
    max-width:600px;
    margin:7px 0 15px;
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.shop-reset-btn{
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    padding:9px 13px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.shop-reset-btn:hover{
    border-color:rgba(124,92,255,.35);
    background:rgba(124,92,255,.08);
}

.shop-updated{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.shop-updated strong{
    color:var(--muted);
    font-size:10px;
}

.shop-affiliate-disclosure{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:12px;
    color:var(--muted2);
    font-size:9px;
    line-height:1.4;
}

.shop-affiliate-disclosure span:first-child{
    color:var(--primary2);
    font-weight:900;
}

.shop-card-footer-note{
    margin-top:5px;
    color:var(--muted2);
    font-size:9px;
    line-height:1.4;
}

html[data-theme="light"] .shop-hero-copy{
    background:
        radial-gradient(circle at 85% 0%, rgba(124,92,255,.1), transparent 42%),
        linear-gradient(145deg, #ffffff, #f8fafc);
}

html[data-theme="light"] .shop-trust-box{
    background:
        linear-gradient(145deg, rgba(16,185,129,.065), rgba(124,92,255,.04));
}

html[data-theme="light"] .shop-partners,
html[data-theme="light"] .shop-partner-card,
html[data-theme="light"] .shop-controls{
    background:rgba(15,23,42,.018);
}

html[data-theme="light"] .shop-select-box select option{
    background:#ffffff;
    color:#0f172a;
}

@media(max-width:1100px){
    .shop-hero{
        grid-template-columns:1fr;
    }

    .shop-controls{
        grid-template-columns:minmax(200px,1fr) 190px 175px;
    }

    .shop-control-result{
        grid-column:1 / -1;
        justify-self:start;
    }

    .shop-partners-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:calc((3 * var(--shop-partner-card-height)) + 18px);
    }
}

@media(max-width:850px){
    .shop-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .shop-controls{
        grid-template-columns:1fr 1fr;
    }

    .shop-search-box{
        grid-column:1 / -1;
    }

    .shop-control-result{
        grid-column:1 / -1;
    }

    .shop-partners-grid{
        grid-template-columns:1fr 1fr;
        max-height:calc((3 * var(--shop-partner-card-height)) + 18px);
    }
}

@media(max-width:700px){
    .shop-section{
        width:min(100% - 22px,1180px);
        padding:28px 0 65px;
    }

    .shop-hero-copy{
        padding:22px;
    }

    .shop-hero h2{
        font-size:29px;
    }

    .shop-hero-meta{
        line-height:1.55;
    }

    .shop-controls{
        grid-template-columns:1fr;
    }

    .shop-search-box{
        grid-column:auto;
    }

    .shop-control-result{
        grid-column:auto;
        justify-self:start;
    }

    .shop-section-heading{
        align-items:flex-start;
    }

    .shop-partners{
        padding:14px;
    }

    .shop-partners-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .shop-partners-heading > span{
        align-self:flex-start;
    }

    .shop-partners-grid{
        grid-template-columns:1fr;
        max-height:calc((6 * var(--shop-partner-card-height)) + 45px);
    }

    .shop-filter{
        min-height:38px;
        padding:7px 10px;
        font-size:11px;
    }
}

@media(max-width:480px){
    .shop-hero-copy{
        padding:18px;
        border-radius:20px;
    }

    .shop-trust-box{
        padding:17px;
        border-radius:20px;
    }

    .shop-card-image{
        height:190px;
    }

    .shop-card-content{
        padding:16px;
    }

    .shop-country-list{
        max-height:170px;
    }
}

/* =========================================================
   SHOP COMPACT CARDS
========================================================= */

.shop-card-image{
    height:135px;
}

.shop-card-content{
    padding:14px;
}

.shop-title{
    font-size:15px;
    -webkit-line-clamp:2;
    line-clamp:2;
    margin-bottom:7px;
}

.shop-prices{
    margin-top:2px;
    margin-bottom:8px;
}

.shop-old-price{
    font-size:12px;
}

.shop-new-price{
    font-size:18px;
}

.shop-savings{
    margin-top:-2px;
    margin-bottom:9px;
}

.shop-affiliate-pick{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.shop-affiliate-pick-icon{
    flex:0 0 auto;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(124,92,255,.12);
    color:var(--primary2);
    font-size:11px;
    font-weight:900;
}

.shop-affiliate-pick > div{
    min-width:0;
}

.shop-affiliate-pick strong,
.shop-affiliate-pick small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
}

.shop-affiliate-pick strong{
    color:var(--text);
    font-size:11px;
    line-height:1.2;
}

.shop-affiliate-pick small{
    margin-top:2px;
    color:var(--muted2);
    font-size:8px;
    line-height:1.35;
}

.shop-details-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:9px;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.035);
    color:var(--text);
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.shop-details-toggle:hover{
    border-color:rgba(124,92,255,.35);
    background:rgba(124,92,255,.07);
}

.shop-details-toggle:focus-visible{
    outline:2px solid rgba(124,92,255,.6);
    outline-offset:2px;
}

.shop-details-chevron{
    color:var(--primary2);
    font-size:13px;
}

.shop-card-details[hidden]{
    display:none;
}

.shop-card-details{
    margin-top:3px;
}

.shop-card-expanded{
    border-color:rgba(124,92,255,.34);
    box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.shop-card-details .shop-value-analysis{
    margin-top:11px;
}

.shop-card-details .shop-availability{
    margin-top:11px;
}

.shop-card-details .shop-verdict{
    margin-top:11px;
}

.shop-card-details .shop-where-to-buy{
    margin-top:11px;
}

.shop-card-details .shop-updated{
    margin-top:12px;
}

.shop-footer-note{
    margin-top:34px;
}

html[data-theme="light"] .shop-affiliate-pick,
html[data-theme="light"] .shop-details-toggle{
    background:rgba(15,23,42,.018);
}

@media(max-width:700px){
    .shop-card-image{
        height:175px;
    }

    .shop-card-content{
        padding:15px;
    }
}

/* MARKETS */

.markets-section{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:42px 0 60px;
}

.markets-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.markets-header h2{
    margin:4px 0 8px;
    font-size:32px;
    line-height:1.1;
}

.markets-header p{
    margin:0;
    color:var(--muted);
}

.markets-refresh-btn{
    border:1px solid var(--border);
    background:rgba(255,255,255,.05);
    color:var(--text);
    border-radius:10px;
    padding:9px 14px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.markets-refresh-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-1px);
}

.markets-block{
    margin-top:28px;
}

.markets-block-header{
    margin-bottom:14px;
}

.markets-block-header h3{
    margin:0 0 4px;
    font-size:20px;
}

.markets-block-header p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.markets-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.market-card{
    display:grid;
    grid-template-columns:minmax(150px,1.4fr) minmax(100px,.8fr) minmax(120px,1fr);
    align-items:center;
    gap:16px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.035);
    transition:.2s;
}

.market-card:hover{
    background:rgba(255,255,255,.055);
    border-color:rgba(124,92,255,.35);
    transform:translateY(-1px);
}

.market-card-main{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.market-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    flex:0 0 40px;
    border-radius:10px;
    background:rgba(124,92,255,.12);
    font-size:20px;
}

.market-icon svg{    width:35px;
    height:35px;
    display:block;
}

.market-card-main strong{
    display:block;
    font-size:14px;
}

.market-card-main small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}

.market-price{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
}

.market-price-eur{
    display:block;
    font-size:15px;
    line-height:1.2;
}

.market-price-eur small{
    display:inline;
    margin:0;
    color:var(--muted);
    font-size:10px;
    font-weight:400;
}

.market-price-usd{
    display:block;
    color:var(--muted);
    font-size:11px;
    line-height:1.2;
}

.market-price-usd small{
    display:inline;
    margin:0;
    color:var(--muted);
    font-size:10px;
}

.market-movement{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
}

.movement-scale {
    position: relative;
    flex: 1;
    height: 8px;
    min-width: 55px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.movement-scale::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.35);
    z-index: 2;
}

.movement-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: currentColor;
}

.market-movement strong{
    min-width:52px;
    text-align:right;
    font-size:12px;
}

.markets-updated{
    margin-top:20px;
    color:var(--muted);
    font-size:11px;
    text-align:right;
}

html[data-theme="light"] .market-card{
    background:rgba(15,23,42,.025);
}

html[data-theme="light"] .movement-scale{
    background:rgba(15,23,42,.08);
}

@media(max-width:800px){
    .markets-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .markets-section{
        width:min(100% - 22px,1180px);
        padding-top:28px;
    }

    .markets-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .markets-header h2{
        font-size:28px;
    }

    .market-card{
        grid-template-columns:1fr;
        gap:12px;
    }

    .market-movement{
        width:100%;
    }
}

/* MORE MENU BUTTON */
.more-menu-btn{
    border:1px solid var(--border);
    color:white;
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:8px 11px;
    font-size:18px;
    font-weight:800;
    line-height:1;
    transition:.2s;
}

.more-menu-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-2px);
}

/* MORE MENU PANEL */
.more-menu{
    position:fixed;
    top:82px;
    right:20px;
    z-index:3050;
    width:300px;
    padding:14px;
    background:rgba(11,17,31,.98);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    display:none;
}

.more-menu.open{
    display:block;
}

.more-menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:4px 4px 12px;
    margin-bottom:8px;
    border-bottom:1px solid var(--border);
}

.more-menu-header strong{
    font-size:16px;
}

.more-menu-header button{
    width:32px;
    height:32px;
    border:1px solid var(--border);
    border-radius:9px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-size:15px;
}

.more-menu-header button:hover{
    background:rgba(255,255,255,.09);
}

.more-menu-items{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.more-menu-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid transparent;
    border-radius:12px;
    background:rgba(255,255,255,.035);
    color:var(--text);
    text-align:left;
}

.more-menu-item:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(124,92,255,.35);
}

.more-menu-item > span:first-child{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(124,92,255,.12);
    font-size:20px;
}

.more-menu-item strong{
    display:block;
    font-size:14px;
}

.more-menu-item small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
}

html[data-theme="light"] .more-menu{
    background:rgba(255,255,255,.98);
}

html[data-theme="light"] .more-menu-btn{
    color:#0f172a;
    background:rgba(15,23,42,.045);
}

@media(max-width:560px){
    .more-menu{
        right:11px;
        width:min(300px,calc(100vw - 22px));
    }
}

/* =========================================================
   MONEY / FX DASHBOARD
========================================================= */

.money-section{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:48px 0 76px;
}

/* =========================================================
   HEADER
========================================================= */

.money-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:34px;
}

.money-header h2{
    margin:6px 0 8px;
    font-size:38px;
    line-height:1;
    letter-spacing:-1.5px;
}

.money-header p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.section-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#a78bfa;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
}

/* =========================================================
   REFRESH
========================================================= */

.money-refresh-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:1px solid var(--border);
    background:rgba(255,255,255,.055);
    color:var(--text);

    border-radius:12px;
    padding:11px 17px;

    font-size:13px;
    font-weight:900;

    cursor:pointer;
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.money-refresh-btn:hover{
    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.14),
            rgba(56,189,248,.08)
        );

    border-color:rgba(124,92,255,.42);

    box-shadow:
        0 8px 24px rgba(0,0,0,.14);
}

/* =========================================================
   BLOCK
========================================================= */

.money-block{
    margin-top:34px;
}

.money-block-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px;
}

.money-block-header h3{
    margin:0 0 5px;
    font-size:21px;
    letter-spacing:-.45px;
}

.money-block-header p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

/* =========================================================
   GRID
========================================================= */

.money-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

/* =========================================================
   FX CARD
========================================================= */

.money-card{
    position:relative;
    
    display:grid;
    grid-template-columns:
        minmax(190px,1.35fr)
        minmax(120px,.85fr)
        minmax(160px,1fr);

    align-items:center;
    gap:20px;

    min-width:0;

    padding:19px;

    border:1px solid color-mix(in srgb,var(--border) 88%, rgba(124,92,255,.35));
    border-radius:20px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(124,92,255,.08),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,.11),
        inset 0 1px 0 rgba(255,255,255,.045);

    overflow:hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.money-card::after{
    content:"";

    position:absolute;
    inset:auto 0 0 0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent 4%,
            rgba(124,92,255,.55),
            rgba(56,189,248,.45),
            transparent 96%
        );

    opacity:.65;
}

.money-card:hover{
    transform:translateY(-4px);

    border-color:rgba(124,92,255,.42);

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(124,92,255,.13),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgba(124,92,255,.055),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 18px 48px rgba(0,0,0,.20);
}

/* =========================================================
   LEFT SIDE
========================================================= */

.money-card-main{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}

.money-icon{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 60px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.18),
            rgba(56,189,248,.11)
        );

    border:1px solid rgba(124,92,255,.18);

    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 7px 20px rgba(0,0,0,.10);
}

.money-icon .currency-card-flag-image{
    display:block;

    width:40px;
    height:30px;

    object-fit:cover;
    border-radius:4px;
}

.money-card-main > div{
    min-width:0;
}

.money-card-main strong{
    display:block;

    font-size:15px;
    font-weight:950;
    letter-spacing:-.25px;
}

.money-card-main small{
    display:block;

    margin-top:4px;

    color:var(--muted);
    font-size:11px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =========================================================
   PRICE
========================================================= */

.money-price{
    min-width:0;

    padding-left:2px;
}

.money-price strong{
    display:block;
    
    font-size:17px;
    line-height:1.1;
    font-weight:800;

    letter-spacing:-.3px;
}

.money-price small{
    display:block;

    margin-top:5px;

    color:var(--muted2);
    font-size:10px;
}

.major-exchange-rate{
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:-.3px !important;
}

/* =========================================================
   MOVEMENT
========================================================= */

.money-movement{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-width:0;
    width:100%;
}

.money-movement .movement-scale{
    position:relative;

    width:120px;
    min-width:120px;

    height:8px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    overflow:hidden;
}

.money-movement .movement-scale::before{
    content:"";

    position:absolute;

    left:50%;
    top:0;
    bottom:0;

    width:2px;

    transform:translateX(-50%);

    background:rgba(255,255,255,.35);

    z-index:2;
}

.money-movement .movement-bar{
    position:absolute;

    top:0;

    height:100%;

    border-radius:999px;

    background:currentColor;
}

.money-movement > strong{
    min-width:52px;

    text-align:right;

    font-size:12px;
    font-weight:950;
}

/* =========================================================
   UPDATED
========================================================= */

.money-updated{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    margin-top:28px;
    padding-top:17px;

    border-top:1px solid var(--border);

    color:var(--muted2);
    font-size:11px;
}

/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] .money-card{
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(124,92,255,.055),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color:rgba(15,23,42,.09);

    box-shadow:
        0 12px 34px rgba(15,23,42,.07);
}

html[data-theme="light"] .money-card:hover{
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(124,92,255,.09),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border-color:rgba(124,92,255,.32);

    box-shadow:
        0 18px 42px rgba(15,23,42,.11);
}

html[data-theme="light"] .money-icon{
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.08),
            rgba(56,189,248,.06)
        );

    border-color:rgba(124,92,255,.12);
}

html[data-theme="light"] .money-movement .movement-scale{
    background:
        linear-gradient(
            90deg,
            rgba(244,63,94,.13),
            rgba(15,23,42,.055) 50%,
            rgba(16,185,129,.13)
        );
}

html[data-theme="light"] .money-movement .movement-scale::before{
    background:rgba(15,23,42,.16);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .money-grid{
        grid-template-columns:1fr;
    }

    .money-card{
        grid-template-columns:
            minmax(190px,1.3fr)
            minmax(120px,.8fr)
            minmax(150px,1fr);
    }
}

@media(max-width:700px){

    .money-section{
        width:min(100% - 22px,1180px);
        padding:34px 0 60px;
    }

    .money-header{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
        margin-bottom:27px;
    }

    .money-header h2{
        font-size:31px;
    }

    .money-refresh-btn{
        width:100%;
    }

    .money-block{
        margin-top:28px;
    }

    .money-card{
        grid-template-columns:1fr;
        gap:14px;
        padding:16px;
    }

    .money-price{
        padding-left:61px;
    }

    .money-movement{
        padding-left:61px;
    }
}

@media(max-width:450px){

    .money-section{
        width:calc(100% - 18px);
    }

    .money-header h2{
        font-size:28px;
    }

    .money-block-header h3{
        font-size:19px;
    }

    .money-card{
        border-radius:16px;
        padding:14px;
    }

    .money-card-main{
        gap:11px;
    }

    .money-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        font-size:20px;
        border-radius:12px;
    }

    .money-card-main strong{
        font-size:14px;
    }

    .money-card-main small{
        font-size:10px;
    }

    .money-price{
        padding-left:53px;
    }

    .money-price strong{
        font-size:18px;
    }

    .money-movement{
        padding-left:53px;
    }

    .money-updated{
        justify-content:flex-start;
    }
}

/* =========================================================
   CAR COST PROJECTION - FULL WIDTH
========================================================= */

.chart-card{
    width:100%;
}

.chart{
    width:100%;
    display:flex;
}

.bar-group{
    flex:1 1 0;
    min-width:0;
}

/* CAR COST PROJECTION – LARGER BARS & LABELS */

.chart{
    gap:10px;
    padding:10px 14px;
}

.bars{
    gap:9px;
}

.bar{
    width:32px;
    border-radius:8px 8px 2px 2px;
}

.bar-label{
    font-size:15px;
}

.legend{
    font-size:14px;
}

.dot{
    width:11px;
    height:11px;
}

@media(max-width:700px){
    .bar{
        width:20px;
    }

    .bar-label{
        font-size:12px;
    }
}

.ai-chat-bubble ul,
.ai-chat-bubble ol {
    margin-left: 0;
    padding-left: 20px;
    box-sizing: border-box;
}

.ai-chat-bubble li {
    padding-left: 2px;
    box-sizing: border-box;
}

/* =========================================================
   NAVIGATION BUTTON FRAMES
========================================================= */

.nav-links button{
    border:1px solid var(--border);
    color:var(--muted);
    background:rgba(255,255,255,.05);
    border-radius:10px;
    padding:6px 8px;
    transition:.2s;
}

.nav-links button:hover{
    color:white;
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-2px);
}

html[data-theme="light"] .nav-links button{
    color:#475569;
    background:rgba(15,23,42,.045);
    border-color:rgba(15,23,42,.11);
}

html[data-theme="light"] .nav-links button:hover{
    color:#0f172a;
    background:rgba(15,23,42,.075);
    border-color:rgba(124,92,255,.4);
    transform:translateY(-2px);
}

/* =========================================================
   CURRENCY CARDS
========================================================= */

.currency-card{
    position:relative;
    display:block;
    min-width:0;
    padding:18px;

    border:1px solid var(--border);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 8px 24px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.045);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.currency-card:hover{
    transform:translateY(-3px);
    border-color:rgba(124,92,255,.4);
    background:
        linear-gradient(
            145deg,
            rgba(124,92,255,.075),
            rgba(255,255,255,.028)
        );
    box-shadow:
        0 16px 34px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.currency-card-main{
    display:grid;
    grid-template-columns:70px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    min-width:0;
}

/* FLAG */

.currency-card-flag{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 60px;

    border:1px solid var(--border);
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            var(--surface-soft),
            rgba(255,255,255,.035)
        );

    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);

    overflow:hidden;
}

.currency-card-flag-image{
    display:block;

    width:40px;
    height:30px;

    object-fit:cover;
    border-radius:4px;

    opacity:1;
    visibility:visible;
}

.currency-card-flag-fallback{
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;
    line-height:1;
}

/* CENTER */

.currency-card-info{
    min-width:0;
}

.currency-card-title{
    min-width:0;
}

.currency-card-title strong{
    display:block;

    font-size:17px;
    font-weight:900;
    line-height:1.2;
}

.currency-card-title small{
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:11px;
    line-height:1.3;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.currency-card-rate{
    display:flex;
    flex-direction:column;

    gap:4px;
    margin-top:10px;
}

.currency-card-rate span{
    color:var(--muted2);

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.5px;
}

.currency-card-rate strong{
    font-size:14px;
    line-height:1.4;
}

/* RIGHT SIDE */

.currency-card-side{
    min-width:78px;

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;

    gap:4px;
    padding-left:16px;

    border-left:1px solid var(--border);
}

.currency-card-side-label{
    color:var(--muted2);

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.5px;
}

.currency-card-symbol-value{
    font-size:20px;
    font-weight:900;
    line-height:1.1;
}

.currency-card-type{
    display:inline-flex;
    align-items:center;

    margin-top:3px;
    padding:3px 7px;

    border:1px solid var(--border);
    border-radius:999px;

    color:var(--muted);

    font-size:9px;
    font-weight:900;
    letter-spacing:.5px;
}

/* LIGHT THEME */

html[data-theme="light"] .currency-card{
    background:rgba(15,23,42,.025);
    border-color:rgba(15,23,42,.11);
    box-shadow:0 8px 24px rgba(15,23,42,.045);
}

html[data-theme="light"] .currency-card:hover{
    background:rgba(15,23,42,.045);
    border-color:rgba(124,92,255,.35);
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}

/* MOBILE */

@media(max-width:700px){

    .currency-card-main{
        grid-template-columns:54px minmax(0,1fr) auto;
        gap:12px;
    }

    .currency-card-flag{
        width:50px;
        height:50px;
        flex-basis:50px;
        border-radius:14px;
    }

    .currency-card-flag-image{
        width:32px;
        height:24px;
    }

    .currency-card-flag-fallback{
        font-size:26px;
    }

    .currency-card-title strong{
        font-size:15px;
    }

    .currency-card-rate strong{
        font-size:13px;
    }

    .currency-card-side{
        min-width:60px;
        padding-left:12px;
    }

    .currency-card-symbol-value{
        font-size:17px;
    }
}

/* =========================================================
   MAJOR CURRENCY MOVEMENT
========================================================= */

.money-movement{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:4px;

    min-width:78px;
    padding-left:16px;

    border-left:1px solid var(--border);
}

.money-movement-label{
    color:var(--muted2);

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.5px;

    text-align:center;
}

.money-movement-value{
    font-size:17px;
    font-weight:900;

    line-height:1.1;

    text-align:center;
}

@media(max-width:700px){

    .money-movement{
        min-width:0;
        width:100%;

        padding-left:0;
        padding-top:12px;

        border-left:0;
        border-top:1px solid var(--border);
    }

}

/* =========================================================
   CURRENCY MOVEMENT SCALE
========================================================= */

.market-movement {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.market-movement .movement-scale {
    width: 92% !important;
    height: 4px !important;
    min-height: 4px !important;
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    overflow: visible !important;
}

/* Cela horizontalna linija */
.market-movement .movement-scale::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    height: 3px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    z-index: 1 !important;
}

/* Centralna tačka */
.market-movement .movement-scale::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: currentColor !important;
    z-index: 3 !important;
}

/* Kretanje */
.market-movement .movement-bar {
    position: absolute !important;
    top: 50% !important;
    height: 4px !important;
    min-width: 0 !important;
    max-width: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: currentColor !important;
    z-index: 2 !important;
}

/* Rast */
.market-movement.market-up .movement-bar {
    left: 50% !important;
}

/* Pad */
.market-movement.market-down .movement-bar {
    right: 50% !important;
}

/* Bez promene — nema obojenog dela,
   ali osnovna linija ostaje vidljiva */
.market-movement.market-flat .movement-bar {
    display: none !important;
}

/* Procenat */
.market-movement > strong {
    display: block !important;
    margin: 2px 0 0 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
    text-align: center !important;
}

/* =========================================================
   CARS
   ========================================================= */

#carsContent {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cars-search {
    width: 100%;
}

.cars-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow);
    outline: none;
    font-size: 15px;
}

.cars-search input::placeholder {
    color: var(--muted);
}

.cars-search input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(124,92,255,.12),
        var(--shadow);
}


/* CAR SECTIONS */

.cars-section-block {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(17,25,42,.88),
            rgba(17,25,42,.72)
        );
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px;
    box-shadow:
        0 18px 55px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.cars-block-header {
    margin-bottom: 20px;
}

.cars-block-header h3 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.45px;
}

.cars-block-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.cars-results-description-with-info {
    display: block;
}

.cars-results-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}


/* POPULAR CARS */

.cars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: stretch;
}

.car-card {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    text-align: left;

    min-height: 290px;
    padding: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.048),
            rgba(255,255,255,.022)
        );
    border: 1px solid var(--border);
    border-radius: 18px;

    color: var(--text);
    box-shadow:
        0 12px 35px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.04);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.car-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124,92,255,.46);
    background:
        linear-gradient(
            180deg,
            rgba(124,92,255,.055),
            rgba(255,255,255,.025)
        );
    box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        0 0 0 1px rgba(124,92,255,.08);
}

.car-card:focus-visible {
    outline: none;
    border-color: rgba(124,92,255,.72);
    box-shadow: var(--focus-ring), 0 18px 48px rgba(0,0,0,.18);
}

.car-card strong {
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.2px;
}

.car-card span {
    color: var(--muted);
    font-size: 13px;
}

.car-card-title {
    display: block;
}

.car-card-meta {
    display: block;
    margin-top: 5px;
}

.car-card-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.car-card-price-label {
    color: var(--muted2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.car-card-price {
    color: var(--text);
    font-size: 15px;
    white-space: nowrap;
}

.car-card-price.is-unavailable {
    color: var(--muted2);
    font-weight: 600;
    font-size: 12px;
}

.car-card-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.car-card-quick-stats > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.car-card-quick-stats b {
    color: var(--text);
    font-weight: 800;
}

.car-card-quick-stats .is-unavailable {
    border-style: dashed;
    color: var(--muted2);
}

.car-card-click-hint {
    display: block;
    margin-top: auto;
    padding-top: 13px;
    color: var(--primary2) !important;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: .05px;
}


/* BROWSE CATEGORIES */

.cars-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.cars-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 112px;
    padding: 13px 10px;

    background: rgba(255,255,255,.035);
    border: 1px solid var(--border);
    border-radius: 13px;

    color: var(--text);
    text-align: center;

    transition: .2s;
}

.cars-category-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124,92,255,.45);
    box-shadow: var(--shadow);
}

.cars-category-card > span {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    margin-bottom: 7px;

    border-radius: 10px;
    background: rgba(124,92,255,.10);

    font-size: 19px;
}

.cars-category-card strong {
    font-size: 14.5px;
    line-height: 1.2;
}

.cars-category-card small {
    margin-top: 3px;

    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.2;
}


/* COMPARE PLACEHOLDER */

.cars-compare-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 180px;
    padding: 25px;

    text-align: center;

    border: 1px dashed var(--border);
    border-radius: 15px;

    background: rgba(255,255,255,.02);
}

.cars-compare-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.cars-compare-placeholder strong {
    font-size: 17px;
}

.cars-compare-placeholder p {
    max-width: 600px;
    margin: 6px 0 0;

    color: var(--muted);
    font-size: 13px;
}


/* LIGHT THEME */

html[data-theme="light"] .cars-search input,
html[data-theme="light"] .cars-section-block {
    background: var(--card);
}

html[data-theme="light"] .car-card,
html[data-theme="light"] .cars-category-card {
    background: rgba(15,23,42,.025);
}

html[data-theme="light"] .car-card-emoji {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(124,92,255,.09),
            transparent 58%
        ),
        rgba(15,23,42,.045);
}

html[data-theme="light"] .cars-section-block {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(248,250,252,.92)
        );
}

html[data-theme="light"] .cars-compare-placeholder {
    background: rgba(15,23,42,.015);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .cars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cars-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 600px) {

    #carsContent {
        gap: 18px;
    }

    .cars-section-block {
        padding: 18px;
    }

    .cars-grid {
        grid-template-columns: 1fr;
    }

    .cars-category-grid {
        grid-template-columns: 1fr;
    }

    .car-card {
        min-height: 270px;
        padding: 12px;
    }

    .car-card-price-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .car-card-emoji {
        height: 124px;
        min-height: 124px;
    }

}

.car-card-image {
    width: 100%;
    height: 180px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
}

.car-card-image-container {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.car-card-emoji {
    width: 100%;
    height: 132px;
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(124,92,255,.12),
            transparent 58%
        ),
        rgba(128,128,128,.055);
    font-size: 56px;
    line-height: 1;
    user-select: none;
}

@media (max-width: 600px) {
    .car-card-emoji {
        height: 130px;
        min-height: 130px;
        font-size: 50px;
    }
}

.car-card-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.car-card-content strong,
.car-card-content span,
.car-card-info-preview {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cars-empty-state {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 180px;
    padding: 30px;

    text-align: center;

    border: 1px dashed var(--border);
    border-radius: 15px;

    background: rgba(255,255,255,.02);
}

.cars-empty-icon {
    font-size: 38px;
    margin-bottom: 12px;
}

.cars-empty-state strong {
    font-size: 17px;
}

.cars-empty-state p {
    max-width: 500px;
    margin: 6px 0 0;

    color: var(--muted);
    font-size: 13px;
}


/* =========================================================
   GLOBAL THEME TOKENS + FUTURE SECTION FOUNDATION
   ========================================================= */

html[data-theme="light"] body{
    color:var(--text);
}

html[data-theme="light"] .panel,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .metric,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .calculator-toolbar,
html[data-theme="light"] .more-menu,
html[data-theme="light"] .settings-panel,
html[data-theme="light"] .cars-section-block,
html[data-theme="light"] .cars-search,
html[data-theme="light"] .cars-compare-placeholder{
    background:var(--card);
    border-color:var(--border);
    color:var(--text);
}

html[data-theme="light"] label,
html[data-theme="light"] .settings-section label{
    color:var(--text);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
    color:var(--text);
    background:var(--card-solid);
    border-color:var(--border);
}

html[data-theme="light"] .faq-question,
html[data-theme="light"] .settings-header button,
html[data-theme="light"] .more-menu-header button{
    color:var(--text);
}

html[data-theme="light"] .toast{
    background:var(--card-solid);
    color:var(--text);
}

html[data-theme="light"] .more-menu-item{
    color:var(--text);
}

html[data-theme="light"] .more-menu-item:hover{
    background:var(--surface-soft);
}

html[data-theme="light"] .markets-section,
html[data-theme="light"] .money-section,
html[data-theme="light"] .weather-card,
html[data-theme="light"] .news-card{
    color:var(--text);
}

/*
 * Future sections should inherit these tokens instead of defining
 * separate dark/light palettes:
 *   var(--bg), var(--card), var(--card-solid), var(--border),
 *   var(--text), var(--muted), var(--surface-soft), var(--shadow).
 */

/* =========================================================
   ACCESSIBILITY SCALE SYSTEM
   ========================================================= */

/*
 * The settings scale is applied globally on <body>. These layout
 * helpers compensate for zoom so the usable content width remains
 * inside the viewport at every accessibility level.
 *
 * Future sections should use .container when possible. Standalone
 * sections can use var(--ui-content-max) for their outer width.
 */
:root{
    --ui-content-max:min(
        1180px,
        calc((100% - 32px) / var(--ui-scale, 1))
    );
}

.container{
    width:var(--ui-content-max);
    max-width:1180px;
    min-width:0;
}

.nav > .container{
    width:100%;
    max-width:none;
}

main,
main > .section,
main > .app,
section,
.app,
.panel,
.calculator-grid,
.form-grid,
.result-top,
.result-grid,
.calculator-toolbar{
    min-width:0;
}

/* Keep the larger standalone dashboards inside the scaled viewport. */
.news-category,
.shop-section,
.markets-section,
.money-section{
    width:var(--ui-content-max);
    max-width:1180px;
    min-width:0;
}

/*
 * A+ and A++ intentionally use the existing hamburger menu.
 * This prevents Calculator / profile / feedback / settings / AI
 * controls from ever overlapping.
 */
html[data-ui-scale="large"] .nav-links,
html[data-ui-scale="xl"] .nav-links{
    display:none;
}

html[data-ui-scale="large"] .menu-btn,
html[data-ui-scale="xl"] .menu-btn{
    display:block;
}

html[data-ui-scale="large"] .nav-links.open,
html[data-ui-scale="xl"] .nav-links.open{
    position:absolute;
    left:10px;
    right:10px;
    top:68px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    padding:10px;
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    z-index:500;
}

html[data-ui-scale="large"] .nav-links.open button,
html[data-ui-scale="xl"] .nav-links.open button{
    width:100%;
    text-align:left;
}

html[data-ui-scale="large"] .nav-actions,
html[data-ui-scale="xl"] .nav-actions{
    margin-left:auto;
}

html[data-ui-scale="large"] .nav-inner,
html[data-ui-scale="xl"] .nav-inner{
    gap:8px;
}

/* Scale-aware content density. */
html[data-ui-scale="large"] .calculator-grid,
html[data-ui-scale="xl"] .calculator-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-ui-scale="xl"] .form-grid{
    grid-template-columns:1fr;
}

html[data-ui-scale="xl"] .result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-ui-scale="large"] .news-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

html[data-ui-scale="xl"] .news-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-ui-scale="large"] .shop-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

html[data-ui-scale="xl"] .shop-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-ui-scale="large"] .cars-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

html[data-ui-scale="xl"] .cars-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

html[data-ui-scale="large"] .cars-category-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

html[data-ui-scale="xl"] .cars-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

html[data-ui-scale="large"] .weather-forecast-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

html[data-ui-scale="xl"] .weather-forecast-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

html[data-ui-scale="xl"] .market-card{
    grid-template-columns:1fr;
}

html[data-ui-scale="xl"] .money-grid{
    grid-template-columns:1fr;
}

html[data-ui-scale="xl"] .money-card{
    grid-template-columns:1fr;
    gap:14px;
}

html[data-ui-scale="xl"] .money-price,
html[data-ui-scale="xl"] .money-movement{
    padding-left:61px;
}

html[data-ui-scale="xl"] .calculator-toolbar{
    grid-template-columns:1fr;
}

/* A++: keep the Currencies search field inside the viewport. */
html[data-ui-scale="xl"] .money-container .calculator-search{
    width:100%;
}

/* Standard calculator stays comfortably readable at every scale. */
html[data-ui-scale="xl"] .calculator-panel{
    width:min(520px,100%);
}

html[data-ui-scale="xl"] .calculator-display{
    font-size:28px;
    overflow:auto;
    white-space:normal;
}

/* =========================================================
   LIGHT THEME — CALCULATORS & ADMIN FEEDBACK
   ========================================================= */

html[data-theme="light"] .result-hero{
    background:
        linear-gradient(
            135deg,
            rgba(16,185,129,.08),
            rgba(124,92,255,.055)
        );
}

html[data-theme="light"] .big-result{
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.07),
            rgba(56,189,248,.055)
        );
}

html[data-theme="light"] .calculator-display{
    background:var(--card2);
    border-color:var(--border);
}

html[data-theme="light"] .calculator-key,
html[data-theme="light"] .calculator-mode-btn{
    background:var(--surface-soft);
    border-color:var(--border);
    color:var(--text);
}

html[data-theme="light"] .calculator-key.operator{    background:rgba(124,92,255,.08);
}

html[data-theme="light"] .calculator-key.function,
html[data-theme="light"] .calculator-key.constant{
    background:rgba(15,23,42,.045);
}

html[data-theme="light"] .admin-feedback-card{
    background:var(--card-solid);
    border-color:var(--border);
    color:var(--text);
}

html[data-theme="light"] .admin-feedback-item{
    background:var(--surface-soft);
    border-color:var(--border);
}

html[data-theme="light"] .admin-feedback-head > button{
    color:var(--text);
}

/* A little extra breathing room for large accessibility settings. */
html[data-ui-scale="large"] .panel,
html[data-ui-scale="xl"] .panel{
    overflow-x:auto;
}

html[data-ui-scale="large"] input,
html[data-ui-scale="large"] select,
html[data-ui-scale="large"] textarea,
html[data-ui-scale="xl"] input,
html[data-ui-scale="xl"] select,
html[data-ui-scale="xl"] textarea{
    min-width:0;
    max-width:100%;
}

/* =========================================================
   UNIFIED MOBILE / A+ / A++ NAVIGATION
   ========================================================= */

/*
 * On phones and accessibility sizes A+/A++, the main hamburger
 * opens one scrollable navigation containing every primary link,
 * followed immediately by the secondary sections below Shop.
 *
 * Future sections:
 * add another .nav-overflow-item inside #navOverflowItems in
 * index.html. The same menu, scrolling and accessibility rules
 * will apply automatically.
 */
.nav-overflow-items{
    display:none;
}

.nav-overflow-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-soft);
    color:var(--text);
    text-align:left;
    flex:0 0 auto;
}

.nav-overflow-item:hover{
    background:rgba(124,92,255,.08);
    border-color:rgba(124,92,255,.35);
}

.nav-overflow-item > span:first-child{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    flex:0 0 36px;
    border-radius:10px;
    background:rgba(124,92,255,.12);
    font-size:19px;
}

.nav-overflow-item > span:last-child{
    min-width:0;
}

.nav-overflow-item strong{
    display:block;
    font-size:14px;
    line-height:1.2;
}

.nav-overflow-item small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

html[data-ui-scale="large"] .nav-links.open,
html[data-ui-scale="xl"] .nav-links.open{
    position:fixed;
    left:calc(8px / var(--ui-scale,1));
    right:calc(8px / var(--ui-scale,1));
    top:calc(72px / var(--ui-scale,1));
    width:auto;
    max-height:calc((100vh - 84px) / var(--ui-scale,1));
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:5px;
    padding:10px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    z-index:1001;
}

html[data-ui-scale="large"] .nav-overflow-items,
html[data-ui-scale="xl"] .nav-overflow-items{
    display:flex;
    flex-direction:column;
    gap:5px;
    width:100%;
}

html[data-ui-scale="large"] .more-menu-btn,
html[data-ui-scale="xl"] .more-menu-btn{
    display:none !important;
}

html[data-ui-scale="large"] .nav-links.open > button,
html[data-ui-scale="xl"] .nav-links.open > button,
html[data-ui-scale="large"] .nav-links.open > .nav-overflow-items,
html[data-ui-scale="xl"] .nav-links.open > .nav-overflow-items{
    width:100%;
    flex:0 0 auto;
}

html[data-ui-scale="large"] .nav-links.open .nav-calculator-spacer,
html[data-ui-scale="xl"] .nav-links.open .nav-calculator-spacer{
    display:none;
}

@media(max-width:1000px){
    .nav-links.open{
        position:fixed;
        left:8px;
        right:8px;
        top:64px;
        width:auto;
        max-height:calc(100vh - 76px);
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:5px;
        padding:10px;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        background:var(--card-solid,var(--card));
        border:1px solid var(--border);
        border-radius:14px;
        box-shadow:var(--shadow);
        z-index:1001;
    }

    .nav-overflow-items{
        display:flex;
        flex-direction:column;
        gap:5px;
        width:100%;
    }

    .more-menu-btn{
        display:none !important;
    }

    .nav-links.open > button,
    .nav-links.open > .nav-overflow-items{
        width:100%;
        flex:0 0 auto;
    }

    .nav-links.open .nav-calculator-spacer{
        display:none;
    }

    .nav-links.open > button{
        text-align:left;
    }
}

/* =========================================================
   MOBILE-FIRST LAYOUT / TOUCH OPTIMIZATION
   ========================================================= */

@media(max-width:700px){
    html{
        overflow-x:hidden;
    }

    body{
        min-width:0;
        overflow-x:hidden;
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
    }

    .nav{
        z-index:1000;
    }

    .nav > .container{
        padding-left:10px;
        padding-right:10px;
    }

    .nav-inner{
        height:64px;
        gap:6px;
    }

    .logo{
        min-width:0;
        gap:7px;
        font-size:17px;
    }

    .logo-mark{
        width:34px;
        height:34px;
        flex:0 0 34px;
    }

    .nav-actions{
        gap:4px;
        margin-left:auto;
    }

    .nav-actions > *{
        flex:0 0 auto;
    }

    .menu-btn{
        flex:0 0 auto;
        min-width:38px;
        min-height:38px;
        padding:7px 9px;
    }

    .auth-btn,
    .feedback-nav-btn,
    .signout-nav-btn,
    .settings-btn,
    .ai-chat-nav-btn,
    .admin-feedback-nav-btn{
        min-height:38px;
        padding:7px 9px;
    }

    .profile-nav-btn{
        width:38px;
        height:38px;
        flex:0 0 38px;
    }

    .section,
    .app{
        padding-top:25px;
        padding-bottom:60px;
    }

    .section-header{
        margin-bottom:20px;
    }

    .section-header h2{
        font-size:28px;
        letter-spacing:-.7px;
    }

    .section-header p{
        font-size:13px;
        line-height:1.5;
    }

    .app-header{
        gap:14px;
        margin-bottom:18px;
    }

    .app-title{
        width:100%;
        align-items:flex-start;
        gap:10px;
    }

    .app-title-icon{
        width:46px;
        height:46px;
        flex:0 0 46px;
        border-radius:13px;
        font-size:23px;
    }

    .app-title h2{
        font-size:25px;
        line-height:1.15;
    }

    .app-title p{
        font-size:13px;
        line-height:1.45;
        margin-top:4px;
    }

    .close-btn{
        width:100%;
        min-height:42px;
        padding:10px 13px;
    }

    .panel{
        padding:18px;
        border-radius:17px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .form-group{
        gap:6px;
    }

    input,
    select,
    textarea{
        min-height:44px;
    }

    .form-actions{
        margin-top:18px;
    }

    .form-actions .btn{
        width:100%;
    }

    .result-top{
        grid-template-columns:1fr;
    }

    .result-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .result-hero,
    .score-card,
    .metric,
    .chart-card{
        min-width:0;
    }

    .chart-card{
        padding:16px;
        border-radius:17px;
    }

    .chart{
        min-width:0;
        height:230px;
        overflow-x:auto;
        padding:8px 4px;
    }

    .bar{
        width:20px;
    }

    .bar-label{
        font-size:12px;
    }

    .table-wrap{
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{
        min-width:560px;
    }

    .calculator-mode-tabs{
        width:100%;
        justify-content:flex-start;
        overflow-x:auto;
        padding:2px 1px 5px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .calculator-mode-tabs::-webkit-scrollbar{
        display:none;
    }

    .calculator-mode-btn{
        flex:0 0 auto;
        min-width:104px;
        min-height:44px;
        padding:10px 13px;
    }

    .calculator-panel{
        width:100%;
        max-width:none;
        padding:12px;
    }

    .calculator-display{
        min-height:62px;
        padding:12px 14px;
        margin-bottom:10px;
        font-size:clamp(22px,7vw,30px);
    }

    .calculator-keypad{
        gap:8px;
    }

    .calculator-key{
        min-height:52px;
        border-radius:11px;
    }

    .calculator-toolbar{
        grid-template-columns:1fr;
        gap:8px;
        padding:11px;
    }

    .filter-clear{
        width:100%;
    }

    .weather-main{
        flex-wrap:wrap;
        gap:14px;
    }

    .weather-details{
        grid-template-columns:1fr 1fr;
    }

    .weather-forecast-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .news-category,
    .shop-section,
    .markets-section,
    .money-section{
        width:min(calc(100% - 22px),1180px);
    }

    .news-category-nav{
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    .news-grid,
    .shop-grid,
    .money-grid,
    .markets-grid{
        grid-template-columns:1fr;
    }

    .market-card{
        grid-template-columns:1fr;
    }

    .money-card{
        grid-template-columns:1fr;
        gap:13px;
    }

    .money-price,
    .money-movement{
        padding-left:0;
    }

    .money-movement{
        width:100%;
    }

    .cars-grid{
        grid-template-columns:1fr;
    }

    .cars-category-grid{
        grid-template-columns:1fr;
    }

    .cars-section-block{
        padding:18px;
    }

    .feedback-modal-card,
    .translate-modal-card,
    .ai-chat-card,
    .account-page-card{
        max-width:100%;
    }

    .feedback-modal-card,
    .translate-modal-card,
    .account-page-card{
        padding:18px;
    }

    .ai-chat-card{
        height:calc(100vh - 20px);
        border-radius:18px;
    }

    .ai-chat-head{
        padding:16px;
    }

    .ai-chat-messages{
        padding:16px;
    }

    .ai-chat-composer{
        padding:10px;
    }

    .settings-panel{
        top:72px;
        left:10px;
        right:10px;
        width:auto;
        max-height:calc(100vh - 82px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
}

/* Large accessibility size on a phone:
   keep the body readable while letting every navigation/content
   layer scroll rather than overflow sideways. */
@media(max-width:700px){
    .hero{
        padding:48px 0 30px;
    }

    .hero h1{
        font-size:clamp(36px,11vw,48px);
        line-height:.98;
        letter-spacing:-2px;
        max-width:100%;
    }

    .hero p{
        max-width:100%;
        margin-top:18px;
        padding:0 6px;
        font-size:16px;
        line-height:1.5;
    }

    .hero-actions{
        margin-top:22px;
        gap:9px;
        flex-direction:column;
        align-items:center;
    }

    .hero-actions .btn{
        width:100%;
        max-width:360px;
    }

    .calc-card{
        min-height:0;
        padding:20px;
    }

    .calc-icon{
        font-size:30px;
        margin-bottom:12px;
    }

    .calc-card h3{
        font-size:19px;
    }

    .calc-card p{
        font-size:13px;
    }

    .open-calc{
        width:100%;
        margin-top:17px;
        min-height:42px;
    }
}

@media(max-width:700px){
    html[data-ui-scale="large"] .nav-links.open,
    html[data-ui-scale="xl"] .nav-links.open{
        left:calc(8px / var(--ui-scale,1));
        right:calc(8px / var(--ui-scale,1));
        top:calc(64px / var(--ui-scale,1));
        max-height:calc((100vh - 76px) / var(--ui-scale,1));
    }

    html[data-ui-scale="large"] .nav-inner,
    html[data-ui-scale="xl"] .nav-inner{
        gap:4px;
    }

    html[data-ui-scale="large"] .nav-actions,
    html[data-ui-scale="xl"] .nav-actions{
        gap:2px;
    }

    html[data-ui-scale="large"] .nav-actions > *,
    html[data-ui-scale="xl"] .nav-actions > *{
        min-width:0;
    }

    html[data-ui-scale="large"] .profile-nav-btn,
    html[data-ui-scale="xl"] .profile-nav-btn{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    html[data-ui-scale="large"] .auth-btn,
    html[data-ui-scale="large"] .feedback-nav-btn,
    html[data-ui-scale="large"] .signout-nav-btn,
    html[data-ui-scale="large"] .settings-btn,
    html[data-ui-scale="large"] .ai-chat-nav-btn,
    html[data-ui-scale="large"] .admin-feedback-nav-btn,
    html[data-ui-scale="xl"] .auth-btn,
    html[data-ui-scale="xl"] .feedback-nav-btn,
    html[data-ui-scale="xl"] .signout-nav-btn,
    html[data-ui-scale="xl"] .settings-btn,
    html[data-ui-scale="xl"] .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .admin-feedback-nav-btn{
        min-height:34px;
        padding:5px 7px;
    }

    html[data-ui-scale="large"] .menu-btn,
    html[data-ui-scale="xl"] .menu-btn{
        min-width:34px;
        min-height:34px;
        padding:5px 7px;
    }
}

html[data-theme="light"] .nav-overflow-item{
    background:rgba(15,23,42,.025);
}

html[data-theme="light"] .nav-overflow-item:hover{
    background:rgba(15,23,42,.055);
}

/* Keep Calculator locked at the bottom of the scrollable menu.
   The menu itself may scroll, but this primary action stays visible. */
@media(max-width:1000px){
    .nav-links.open > button:last-of-type{
        position:sticky;
        bottom:0;
        z-index:10;
        width:100%;
        margin-top:3px;
        padding-top:11px;
        padding-bottom:11px;
        background:var(--card-solid,var(--card));
        border-top:1px solid var(--border);
        box-shadow:0 -8px 18px rgba(0,0,0,.10);
    }
}

html[data-ui-scale="large"] .nav-links.open > button:last-of-type,
html[data-ui-scale="xl"] .nav-links.open > button:last-of-type{
    position:sticky;
    bottom:0;
    z-index:10;
    width:100%;
    margin-top:3px;
    padding-top:11px;
    padding-bottom:11px;
    background:var(--card-solid,var(--card));
    border-top:1px solid var(--border);
    box-shadow:0 -8px 18px rgba(0,0,0,.10);
}

/* =========================================================
   WORTH IT — GLOBAL MODERN UI HOVER THEME
========================================================= */

/*
 * Shared interaction language across the site.
 *
 * Markets keeps its dedicated interaction styling from
 * markets-ui.js completely untouched.
 */

button:not(.worth-it-market-category-button),
a.btn,
a[class*="-button"],
a[class*="button-"],
[role="button"]{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease,
        opacity .18s ease;
}

button:not([disabled]):not(.worth-it-market-category-button):hover,
a.btn:hover,
a[class*="-button"]:hover,
a[class*="button-"]:hover,
[role="button"]:hover{
    transform:
        translateY(-2px)
        scale(1.015);

    border-color:
        rgba(124,58,237,.55) !important;

    box-shadow:
        0 8px 20px rgba(37,99,235,.12),
        0 3px 10px rgba(124,58,237,.10) !important;
}

button:not([disabled]):not(.worth-it-market-category-button):active,
a.btn:active,
a[class*="-button"]:active,
a[class*="button-"]:active,
[role="button"]:active{
    transform:
        translateY(0)
        scale(.995);
}


/* Shared card hover treatment for non-Markets sections.
   Markets keeps its existing dedicated styling unchanged. */
:is(
    .calc-card,
    .stat,
    .score-card,
    .metric,
    .chart-card,
    .faq-item,
    .weather-card,
    .weather-forecast-card,
    .news-card,
    .shop-card,
    .money-card,
    .currency-card,
    .car-card,
    .cars-category-card
){
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease,
        background .20s ease;
}

:is(
    .calc-card,
    .stat,
    .score-card,
    .metric,
    .chart-card,
    .faq-item,
    .weather-card,
    .weather-forecast-card,
    .news-card,
    .shop-card,
    .money-card,
    .currency-card,
    .car-card,
    .cars-category-card
):hover{
    transform:
        translateY(-3px)
        scale(1.006);

    border-color:
        rgba(124,58,237,.48) !important;

    box-shadow:
        0 10px 26px rgba(37,99,235,.11),
        0 4px 14px rgba(124,58,237,.09);
}


/* Keep disabled controls completely static. */
button[disabled],
[aria-disabled="true"]{
    transform:none !important;
    box-shadow:none !important;
}


/* =========================================================
   WORTH IT — PROFILE AVATAR POLISH
   ========================================================= */

/* Premium profile avatar used after account sign-in. */
.profile-nav-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:3px;
    position:relative;
    isolation:isolate;
    border:1px solid transparent !important;
    border-radius:50%;
    background:
        linear-gradient(var(--card-solid,var(--card)),var(--card-solid,var(--card))) padding-box,
        linear-gradient(
            135deg,
            rgba(124,92,255,.96),
            rgba(56,189,248,.82),
            rgba(16,185,129,.78)
        ) border-box;
    box-shadow:
        0 5px 16px rgba(15,23,42,.22),
        0 0 0 1px rgba(255,255,255,.045);
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        filter .20s ease;
}

/* The icon holder is a fixed square so the profile image has one exact center. */
.profile-nav-btn > #profileNavIcon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    margin:0;
    padding:0;
    display:grid;
    place-items:center;
    align-self:center;
    overflow:hidden;
    line-height:0;
}

.profile-nav-btn .auth-avatar,
.profile-nav-btn .auth-avatar-fallback{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    object-fit:cover;
    object-position:center center;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    border-radius:50%;
    flex:0 0 36px;
    box-sizing:border-box;
    border:2px solid rgba(255,255,255,.72);
    box-shadow:
        0 2px 8px rgba(15,23,42,.20),
        inset 0 0 0 1px rgba(0,0,0,.08);
    align-self:center;
}

.profile-nav-btn .auth-avatar{
    display:block;
    object-fit:cover;
    object-position:50% 50%;
    vertical-align:middle;
}

.profile-nav-btn .auth-avatar-fallback{
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:#fff;
    font-size:14px;
    font-weight:900;
}

.profile-nav-btn:hover{
    transform:translateY(-2px) scale(1.045);
    border-color:transparent !important;
    background:
        linear-gradient(var(--card-solid,var(--card)),var(--card-solid,var(--card))) padding-box,
        linear-gradient(
            135deg,
            rgba(139,92,246,1),
            rgba(56,189,248,.95),
            rgba(16,185,129,.92)
        ) border-box;
    box-shadow:
        0 9px 24px rgba(37,99,235,.16),
        0 3px 12px rgba(124,58,237,.14),
        0 0 0 3px rgba(124,92,255,.08);
    filter:saturate(1.04);
}

.profile-nav-btn:active{
    transform:translateY(0) scale(.985);
}

html[data-theme="light"] .profile-nav-btn{
    background:
        linear-gradient(var(--card-solid,var(--card)),var(--card-solid,var(--card))) padding-box,
        linear-gradient(
            135deg,
            rgba(109,40,217,.88),
            rgba(14,165,233,.72),
            rgba(5,150,105,.68)
        ) border-box;
    box-shadow:
        0 5px 15px rgba(15,23,42,.14),
        0 0 0 1px rgba(15,23,42,.035);
}

html[data-theme="light"] .profile-nav-btn:hover{
    background:
        linear-gradient(var(--card-solid,var(--card)),var(--card-solid,var(--card))) padding-box,
        linear-gradient(
            135deg,
            rgba(109,40,217,.98),
            rgba(14,165,233,.92),
            rgba(5,150,105,.86)
        ) border-box;
    box-shadow:
        0 9px 24px rgba(37,99,235,.13),
        0 3px 12px rgba(124,58,237,.10),
        0 0 0 3px rgba(124,92,255,.07);
}

@media(max-width:700px){
    .profile-nav-btn{
        width:40px;
        height:40px;
        flex-basis:40px;
        padding:3px;
    }

    .profile-nav-btn .auth-avatar,
    .profile-nav-btn .auth-avatar-fallback{
        width:32px;
        height:32px;
        flex-basis:32px;
    }
}

html[data-ui-scale="large"] .profile-nav-btn,
html[data-ui-scale="xl"] .profile-nav-btn{
    width:38px;
    height:38px;
    flex-basis:38px;
    padding:3px;
}

html[data-ui-scale="large"] .profile-nav-btn .auth-avatar,
html[data-ui-scale="large"] .profile-nav-btn .auth-avatar-fallback,
html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar,
html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar-fallback{
    width:30px;
    height:30px;
    flex-basis:30px;
}

@media(max-width:700px){
    html[data-ui-scale="large"] .profile-nav-btn,
    html[data-ui-scale="xl"] .profile-nav-btn{
        width:36px;
        height:36px;
        flex-basis:36px;
        padding:2px;
    }

    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar-fallback{
        width:30px;
        height:30px;
        flex-basis:30px;
    }
}


/* =========================================================
   MOBILE-FIRST LAYOUT OPTIMIZATION
   ========================================================= */

/*
 * Phone-first navigation and layout.
 * Accessibility zoom remains active for content, while the header
 * gets a compact physical layout so right-side controls never
 * disappear off the viewport at A / A+ / A++.
 */
@media(max-width:700px){
    /* Keep the Home hero mathematically centered at every mobile text scale. */
    .hero > .container{
        width:calc(100% - 20px);
        max-width:680px;
        margin-left:auto;
        margin-right:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .hero .badge,
    .hero h1,
    .hero p,
    .hero .hero-actions{
        margin-left:auto;
        margin-right:auto;
    }

    html[data-ui-scale="small"] .hero > .container{
        width:calc(100% - 20px);
        max-width:680px;
    }

    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    .nav{
        width:100%;
        max-width:100%;
    }

    .nav > .container{
        width:100%;
        max-width:none;
        padding-left:8px;
        padding-right:8px;
    }

    .nav-inner{
        width:100%;
        min-width:0;
        height:60px;
        gap:5px;
    }

    .logo{
        min-width:0;
        flex:0 1 auto;
        gap:6px;
        font-size:16px;
    }

    .logo-mark{
        width:34px;
        height:34px;
        flex:0 0 34px;
        border-radius:10px;
    }

    .logo > span:not(.logo-mark){
        display:none;
    }

    .menu-btn{
        width:34px;
        height:34px;
        min-width:34px;
        padding:5px;
        display:grid;
        place-items:center;
        flex:0 0 34px;
        font-size:17px;
    }

    .nav-calculator-spacer{
        display:none;
    }

    .nav-actions{
        min-width:0;
        flex:1 1 auto;
        margin-left:auto;
        gap:3px;
        overflow:visible;
    }

    .nav-actions > *{
        flex:0 0 auto;
        min-width:0;
    }

    .auth-wrap{
        gap:3px;
    }

    .auth-btn,
    .feedback-nav-btn,
    .admin-panel-nav-btn,
    .signout-nav-btn,
    .settings-btn,
    .ai-chat-nav-btn{
        width:32px;
        height:32px;
        min-width:32px;
        min-height:32px;
        padding:4px !important;
        border-radius:9px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:15px !important;
        line-height:1;
        flex:0 0 32px !important;
    }

    .auth-btn .auth-label,
    .feedback-nav-btn span,
    .admin-panel-nav-btn span,
    .signout-nav-btn span,
    .ai-chat-nav-btn span{
        display:none !important;
    }

    .profile-nav-btn{
        width:34px;
        height:34px;
        min-width:34px;
        flex:0 0 34px;
        padding:2px;
    }

    .profile-nav-btn > #profileNavIcon{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .profile-nav-btn .auth-avatar,
    .profile-nav-btn .auth-avatar-fallback{
        width:28px;
        height:28px;
        flex-basis:28px;
        border-width:2px;
    }

    .settings-btn{
        font-size:16px !important;
    }

    .account-panel{
        right:-4px;
        width:min(275px,calc(100vw - 20px));
    }

    /* Keep the page itself inside the phone viewport. */
    main,
    section,
    .app,
    .section,
    .container{
        min-width:0;
        max-width:100%;
    }

    .container{
        width:calc(100% - 20px);
        margin-left:auto;
        margin-right:auto;
    }

    .section{
        padding:25px 0 55px;
    }

    .section-header{
        width:100%;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

    .section-header h2{
        font-size:27px;
        line-height:1.15;
    }

    .section-header p{
        font-size:13px;
    }

    .app{
        padding:25px 0 60px;
    }

    .app-header{
        align-items:center;
        flex-direction:column;
        text-align:center;
        gap:12px;
    }

    .app-title{
        justify-content:center;
        text-align:center;
    }

    .app-title h2{
        font-size:25px;
    }

    .app-title p{
        font-size:13px;
    }

    .panel{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        padding:17px;
        overflow-x:hidden;
    }

    .calculator-grid,
    .form-grid,
    .result-top,
    .result-grid,
    .calculator-toolbar,
    .stats{
        width:100%;
        grid-template-columns:1fr !important;
    }

    .calc-card,
    .metric,
    .stat{
        width:100%;
        min-width:0;
    }

    .hero{
        padding:55px 0 35px;
    }

    .hero h1{
        font-size:clamp(36px,11vw,58px);
        letter-spacing:-2px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-actions .btn{
        width:100%;
    }

    .table-wrap{
        max-width:100%;
    }

    input,
    select,
    textarea{
        font-size:16px;
    }

    .weather-card{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .weather-main{
        flex-wrap:wrap;
        text-align:center;
    }

    .weather-details{
        grid-template-columns:1fr !important;
    }

    .weather-forecast-grid{
        grid-template-columns:1fr 1fr !important;
    }

    .news-category,
    .shop-section,
    .markets-section,
    .money-section{
        width:calc(100% - 20px);
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .news-grid,
    .shop-grid,
    .cars-grid,
    .cars-category-grid,
    .money-grid{
        grid-template-columns:1fr !important;
    }

    .news-category-nav{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .market-card,
    .money-card{
        width:100%;
        min-width:0;
    }

    .more-menu{
        max-width:calc(100vw - 20px);
    }
}

/*
 * A / A+ / A++ on narrow phones: compact the header even further.
 * This is intentionally independent of the scaled content below it.
 */
@media(max-width:700px){
    html[data-ui-scale="large"] .nav-inner,
    html[data-ui-scale="xl"] .nav-inner{
        height:56px;
        gap:3px;
    }

    html[data-ui-scale="large"] .nav > .container,
    html[data-ui-scale="xl"] .nav > .container{
        padding-left:6px;
        padding-right:6px;
    }

    html[data-ui-scale="large"] .logo-mark,
    html[data-ui-scale="xl"] .logo-mark{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    html[data-ui-scale="large"] .menu-btn,
    html[data-ui-scale="xl"] .menu-btn{
        width:30px;
        min-width:30px;
        height:30px;
        min-height:30px;
        flex-basis:30px;
        padding:4px;
        font-size:15px;
    }

    html[data-ui-scale="large"] .nav-actions,
    html[data-ui-scale="xl"] .nav-actions{
        gap:2px;
        margin-left:auto;
    }

    html[data-ui-scale="large"] .auth-btn,
    html[data-ui-scale="large"] .feedback-nav-btn,
    html[data-ui-scale="large"] .admin-panel-nav-btn,
    html[data-ui-scale="large"] .signout-nav-btn,
    html[data-ui-scale="large"] .settings-btn,
    html[data-ui-scale="large"] .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .auth-btn,
    html[data-ui-scale="xl"] .feedback-nav-btn,
    html[data-ui-scale="xl"] .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .signout-nav-btn,
    html[data-ui-scale="xl"] .settings-btn,
    html[data-ui-scale="xl"] .ai-chat-nav-btn{
        width:29px;
        min-width:29px;
        height:29px;
        min-height:29px;
        flex-basis:29px !important;
        padding:3px !important;
        font-size:14px !important;
        border-radius:8px;
    }

    html[data-ui-scale="large"] .profile-nav-btn,
    html[data-ui-scale="xl"] .profile-nav-btn{
        width:31px;
        min-width:31px;
        height:31px;
        flex-basis:31px;
        padding:2px;
    }

    html[data-ui-scale="large"] .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .profile-nav-btn > #profileNavIcon{
        width:25px;
        height:25px;
        flex-basis:25px;
    }

    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar-fallback{
        width:25px;
        height:25px;
        flex-basis:25px;
    }

    html[data-ui-scale="large"] .section-header,
    html[data-ui-scale="xl"] .section-header,
    html[data-ui-scale="large"] .app-header,
    html[data-ui-scale="xl"] .app-header{
        text-align:center;
        justify-content:center;
    }

    html[data-ui-scale="large"] .app-title,
    html[data-ui-scale="xl"] .app-title{
        justify-content:center;
    }

    html[data-ui-scale="large"] .panel,
    html[data-ui-scale="xl"] .panel{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
}

/* Very narrow phones: preserve touch targets without allowing the header
   to push utility buttons outside the viewport. */
@media(max-width:360px){
    .nav-inner{
        gap:2px;
    }

    .nav-actions{
        gap:2px;
    }

    .logo-mark{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .menu-btn{
        width:29px;
        min-width:29px;
        height:29px;
        flex-basis:29px;
    }

    .auth-btn,
    .feedback-nav-btn,
    .admin-panel-nav-btn,
    .signout-nav-btn,
    .settings-btn,
    .ai-chat-nav-btn{
        width:28px;
        min-width:28px;
        height:28px;
        min-height:28px;
        flex-basis:28px !important;
    }

    .profile-nav-btn{
        width:30px;
        min-width:30px;
        height:30px;
        flex-basis:30px;
    }
}

/* =========================================================
   MOBILE — HEADER / PROFILE ACTIONS FINAL FIT
   Phone only. Desktop/tablet layout is intentionally untouched.
   ========================================================= */

@media (max-width:700px){

    /* Keep every header control inside the phone viewport. */
    .nav,
    .nav > .container,
    .nav-inner{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:visible;
    }

    .nav-inner{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:4px;
        flex-wrap:nowrap;
    }

    .logo{
        flex:0 0 auto;
        min-width:0;
    }

    .menu-btn{
        flex:0 0 auto;
    }

    .nav-actions{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        flex:1 1 auto;
        min-width:0;
        width:auto;
        max-width:none;
        gap:2px;
        margin-left:auto;
        overflow:visible;
        flex-wrap:nowrap;
    }

    .nav-actions > *{
        flex:0 0 auto !important;
        min-width:0;
        max-width:none;
        white-space:nowrap;
    }

    /* Never allow text labels to enlarge the phone header. */
    .nav-actions .auth-label,
    .nav-actions .feedback-nav-btn span,
    .nav-actions .admin-panel-nav-btn span,
    .nav-actions .signout-nav-btn span,
    .nav-actions .ai-chat-nav-btn span{
        display:none !important;
        width:0 !important;
        max-width:0 !important;
        overflow:hidden !important;
    }

    /* Compact, complete icon buttons. */
    .nav-actions .auth-btn,
    .nav-actions .feedback-nav-btn,
    .nav-actions .admin-panel-nav-btn,
    .nav-actions .signout-nav-btn,
    .nav-actions .settings-btn,
    .nav-actions .ai-chat-nav-btn{
        width:32px !important;
        min-width:32px !important;
        max-width:32px !important;
        height:32px !important;
        min-height:32px !important;
        max-height:32px !important;
        flex:0 0 32px !important;
        padding:3px !important;
        margin:0 !important;
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        line-height:1;
        font-size:15px !important;
    }

    .nav-actions .profile-nav-btn{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
        flex:0 0 34px !important;
        margin:0 !important;
        padding:2px !important;
        overflow:hidden;
    }

    .nav-actions .profile-nav-btn > #profileNavIcon{
        width:28px !important;
        height:28px !important;
        flex:0 0 28px !important;
    }

    .nav-actions .profile-nav-btn .auth-avatar,
    .nav-actions .profile-nav-btn .auth-avatar-fallback{
        width:28px !important;
        height:28px !important;
        flex:0 0 28px !important;
        max-width:28px !important;
        max-height:28px !important;
    }

    /* Prevent the profile dropdown itself from being clipped. */
    .account-panel{
        position:absolute;
        right:0;
        left:auto;
        width:min(275px,calc(100vw - 20px));
        max-width:calc(100vw - 20px);
    }
}

/* A+ / A++: slightly tighter physical header so the complete
   utility icon row still fits after the accessibility zoom. */
@media (max-width:700px){
    html[data-ui-scale="large"] .nav-inner,
    html[data-ui-scale="xl"] .nav-inner{
        gap:2px;
    }

    html[data-ui-scale="large"] .nav-actions,
    html[data-ui-scale="xl"] .nav-actions{
        gap:1px;
    }

    html[data-ui-scale="large"] .nav-actions .auth-btn,
    html[data-ui-scale="large"] .nav-actions .feedback-nav-btn,
    html[data-ui-scale="large"] .nav-actions .admin-panel-nav-btn,
    html[data-ui-scale="large"] .nav-actions .signout-nav-btn,
    html[data-ui-scale="large"] .nav-actions .settings-btn,
    html[data-ui-scale="large"] .nav-actions .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .auth-btn,
    html[data-ui-scale="xl"] .nav-actions .feedback-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .signout-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .settings-btn,
    html[data-ui-scale="xl"] .nav-actions .ai-chat-nav-btn{
        width:28px !important;
        min-width:28px !important;
        max-width:28px !important;
        height:28px !important;
        min-height:28px !important;
        max-height:28px !important;
        flex-basis:28px !important;
        padding:2px !important;
        font-size:14px !important;
    }

    html[data-ui-scale="large"] .nav-actions .profile-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn{
        width:30px !important;
        min-width:30px !important;
        max-width:30px !important;
        height:30px !important;
        min-height:30px !important;
        max-height:30px !important;
        flex-basis:30px !important;
    }

    html[data-ui-scale="large"] .nav-actions .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn > #profileNavIcon{
        width:24px !important;
        height:24px !important;
        flex-basis:24px !important;
    }

    html[data-ui-scale="large"] .nav-actions .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .nav-actions .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn .auth-avatar-fallback{
        width:24px !important;
        height:24px !important;
        flex-basis:24px !important;
    }
}

/* Very narrow phones: preserve all controls without horizontal clipping. */
@media (max-width:360px){
    .nav-inner{
        gap:2px;
    }

    .nav-actions{
        gap:1px;
    }

    .logo-mark{
        width:27px !important;
        height:27px !important;
        flex-basis:27px !important;
    }

    .menu-btn{
        width:28px !important;
        min-width:28px !important;
        height:28px !important;
        min-height:28px !important;
        flex-basis:28px !important;
        padding:3px !important;
    }

    .nav-actions .auth-btn,
    .nav-actions .feedback-nav-btn,
    .nav-actions .admin-panel-nav-btn,
    .nav-actions .signout-nav-btn,
    .nav-actions .settings-btn,
    .nav-actions .ai-chat-nav-btn{
        width:27px !important;
        min-width:27px !important;
        max-width:27px !important;
        height:27px !important;
        min-height:27px !important;
        max-height:27px !important;
        flex-basis:27px !important;
        padding:2px !important;
        font-size:13px !important;
    }

    .nav-actions .profile-nav-btn{
        width:29px !important;
        min-width:29px !important;
        max-width:29px !important;
        height:29px !important;
        min-height:29px !important;
        max-height:29px !important;
        flex-basis:29px !important;
    }

    .nav-actions .profile-nav-btn > #profileNavIcon{
        width:23px !important;
        height:23px !important;
        flex-basis:23px !important;
    }

    .nav-actions .profile-nav-btn .auth-avatar,
    .nav-actions .profile-nav-btn .auth-avatar-fallback{
        width:23px !important;
        height:23px !important;
        flex-basis:23px !important;
    }

    html[data-ui-scale="large"] .nav-actions .auth-btn,
    html[data-ui-scale="large"] .nav-actions .feedback-nav-btn,
    html[data-ui-scale="large"] .nav-actions .admin-panel-nav-btn,
    html[data-ui-scale="large"] .nav-actions .signout-nav-btn,
    html[data-ui-scale="large"] .nav-actions .settings-btn,
    html[data-ui-scale="large"] .nav-actions .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .auth-btn,
    html[data-ui-scale="xl"] .nav-actions .feedback-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .signout-nav-btn,
    html[data-ui-scale="xl"] .settings-btn,
    html[data-ui-scale="xl"] .nav-actions .ai-chat-nav-btn{
        width:25px !important;
        min-width:25px !important;
        max-width:25px !important;
        height:25px !important;
        min-height:25px !important;
        max-height:25px !important;
        flex-basis:25px !important;
        padding:2px !important;
        font-size:12px !important;
    }

    html[data-ui-scale="large"] .nav-actions .profile-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn{
        width:27px !important;
        min-width:27px !important;
        max-width:27px !important;
        height:27px !important;
        min-height:27px !important;
        max-height:27px !important;
        flex-basis:27px !important;
    }

    html[data-ui-scale="large"] .nav-actions .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn > #profileNavIcon{
        width:21px !important;
        height:21px !important;
        flex-basis:21px !important;
    }

    html[data-ui-scale="large"] .nav-actions .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .nav-actions .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .nav-actions .profile-nav-btn .auth-avatar-fallback{
        width:21px !important;
        height:21px !important;
        flex-basis:21px !important;
    }
}

/* =========================================================
   MOBILE — ACCOUNT / UTILITY CONTROLS FINAL ALIGNMENT
   Phone only. Desktop/tablet is intentionally untouched.
   ========================================================= */

@media (max-width:700px){

    /* When signed in, the old sign-in lock must not remain
       beside the profile avatar. */
    .auth-wrap:has(.profile-nav-btn[style*="inline-flex"]) .auth-btn{
        display:none !important;
    }

    /* Keep the profile popover centered on the profile/auth group,
       rather than drifting left as accessibility scale increases. */
    .auth-wrap{
        position:relative;
    }

    .account-panel{
        left:50% !important;
        right:auto !important;
        top:calc(100% + 8px) !important;
        transform:translateX(-50%);
        width:min(290px,calc(100vw - 20px)) !important;
        max-width:calc(100vw - 20px) !important;
        box-sizing:border-box;
        max-height:calc(100vh - 82px);
        overflow:auto;
        transform-origin:top center;
    }

    /* Keep the profile page dialog comfortably inside the phone. */
    .account-page-overlay{
        padding:12px !important;
        align-items:center;
    }

    .account-page-card{
        width:100% !important;
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100vh - 24px) !important;
        box-sizing:border-box;
        overflow:auto;
        padding:18px !important;
        border-radius:20px;
    }

    .account-page-head{
        gap:10px;
        margin-bottom:14px;
    }

    .account-page-title{
        font-size:20px;
        line-height:1.15;
    }

    .account-page-avatar,
    .account-page-avatar-fallback{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .account-page-stats{
        grid-template-columns:repeat(3,1fr) !important;
        gap:7px;
        margin-bottom:14px;
    }

    .account-page-stat{
        padding:10px 5px;
    }

    .account-page-stat strong{
        font-size:17px;
    }

    .account-page-empty{
        padding:20px 12px;
    }
}

/* A+ / A++ — reduce vertical growth of account/profile dialogs.
   Accessibility text remains larger, while the container itself
   does not become excessively tall. */
@media (max-width:700px){
    html[data-ui-scale="large"] .account-panel,
    html[data-ui-scale="xl"] .account-panel{
        width:min(275px,calc(100vw - 20px)) !important;
        max-width:calc(100vw - 20px) !important;
        padding:11px !important;
        border-radius:14px;
    }

    html[data-ui-scale="large"] .account-panel .account-head,
    html[data-ui-scale="xl"] .account-panel .account-head{
        gap:8px;
        padding:6px 6px 9px;
        margin-bottom:8px;
    }

    html[data-ui-scale="large"] .account-panel .social-preview,
    html[data-ui-scale="xl"] .account-panel .social-preview{
        gap:4px;
        margin:7px 0 1px;
    }

    html[data-ui-scale="large"] .account-panel .social-preview-item,
    html[data-ui-scale="xl"] .account-panel .social-preview-item{
        padding:6px 3px;
    }

    html[data-ui-scale="large"] .account-panel .account-section-title,
    html[data-ui-scale="xl"] .account-panel .account-section-title{
        margin-top:8px;
        margin-bottom:4px;
    }

    html[data-ui-scale="large"] .account-panel .account-action,
    html[data-ui-scale="xl"] .account-panel .account-action{
        padding:7px 8px;
        gap:7px;
    }

    html[data-ui-scale="large"] .account-page-card,
    html[data-ui-scale="xl"] .account-page-card{
        max-width:calc(100vw - 20px) !important;
        max-height:calc(100vh - 20px) !important;
        padding:14px !important;
        border-radius:18px;
    }

    html[data-ui-scale="large"] .account-page-head,
    html[data-ui-scale="xl"] .account-page-head{
        margin-bottom:10px;
        gap:8px;
    }

    html[data-ui-scale="large"] .account-page-avatar,
    html[data-ui-scale="large"] .account-page-avatar-fallback,
    html[data-ui-scale="xl"] .account-page-avatar,
    html[data-ui-scale="xl"] .account-page-avatar-fallback{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    html[data-ui-scale="large"] .account-page-title,
    html[data-ui-scale="xl"] .account-page-title{
        font-size:18px;
        line-height:1.12;
    }

    html[data-ui-scale="large"] .account-page-stats,
    html[data-ui-scale="xl"] .account-page-stats{
        gap:5px;
        margin-bottom:10px;
    }

    html[data-ui-scale="large"] .account-page-stat,
    html[data-ui-scale="xl"] .account-page-stat{
        padding:7px 4px;
    }

    html[data-ui-scale="large"] .account-page-stat strong,
    html[data-ui-scale="xl"] .account-page-stat strong{
        font-size:15px;
    }
    html[data-ui-scale="large"] .account-page-empty,
    html[data-ui-scale="xl"] .account-page-empty{
        padding:14px 10px;
    }
}

/* A- / A / A+ / A++ — never let the account panel exceed the
   visible phone height. */
@media (max-width:700px) and (max-height:700px){
    .account-panel{
        max-height:calc(100vh - 74px);
    }

    .account-page-card{
        max-height:calc(100vh - 16px) !important;
    }
}


/* =========================================================
   MOBILE — FINAL AUTH / UTILITY POLISH
   Phone only. Desktop/tablet is intentionally untouched.
   ========================================================= */

@media (max-width:700px){

    /* The previous compact-header rule used !important on display,
       which could keep Sign out visible after Supabase signed out.
       Let the profile state be the source of truth. */
    .nav-actions .signout-nav-btn{
        display:none !important;
    }

    .nav-actions:has(.profile-nav-btn[style*="inline-flex"]) .signout-nav-btn{
        display:inline-flex !important;
    }

    /* A+ / A++: keep these utility icons visually compact.
       The page-level accessibility zoom still enlarges their contents,
       but their physical header footprint no longer grows too tall. */
    html[data-ui-scale="large"] .nav-actions .feedback-nav-btn,
    html[data-ui-scale="large"] .nav-actions .admin-panel-nav-btn,
    html[data-ui-scale="large"] .nav-actions .settings-btn,
    html[data-ui-scale="large"] .nav-actions .ai-chat-nav-btn{
        width:24px !important;
        min-width:24px !important;
        max-width:24px !important;
        height:24px !important;
        min-height:24px !important;
        max-height:24px !important;
        flex-basis:24px !important;
        padding:1px !important;
        font-size:12px !important;
        border-radius:7px !important;
    }

    html[data-ui-scale="xl"] .nav-actions .feedback-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .nav-actions .settings-btn,
    html[data-ui-scale="xl"] .nav-actions .ai-chat-nav-btn{
        width:22px !important;
        min-width:22px !important;
        max-width:22px !important;
        height:22px !important;
        min-height:22px !important;
        max-height:22px !important;
        flex-basis:22px !important;
        padding:1px !important;
        font-size:11px !important;
        border-radius:6px !important;
    }

    /* The profile dropdown is positioned from JS using the actual
       profile button, so it stays directly under the icon even at A++. */
    .account-panel{
        transform:translateX(-50%) !important;
    }
}


/* =========================================================
   MOBILE — FINAL DIALOG FIT
   Phone only. Keeps Settings, Bugs, Admin and AI dialogs
   fully inside the visible phone viewport at every UI scale.
   ========================================================= */

@media (max-width:700px){

    .settings-panel{
        top:50% !important;
        right:auto !important;
        left:50% !important;
        width:calc(100vw - 24px) !important;
        max-width:340px !important;
        max-height:calc((100vh - 24px) / var(--ui-scale, 1)) !important;
        overflow:auto !important;
        transform:translate(-50%, -50%) !important;
        box-sizing:border-box;
        padding:14px !important;
    }

    .feedback-overlay,
    .admin-panel-overlay,
    .ai-chat-overlay{
        padding:8px !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
    }

    .feedback-modal-card{
        width:calc(100vw - 16px) !important;
        max-width:560px !important;
        max-height:calc((100vh - 16px) / var(--ui-scale, 1)) !important;
        padding:14px !important;
        border-radius:18px !important;
        box-sizing:border-box;
    }

    .admin-panel-card{
        width:calc(100vw - 16px) !important;
        max-width:1040px !important;
        max-height:calc((100vh - 16px) / var(--ui-scale, 1)) !important;
        padding:14px !important;
        border-radius:18px !important;
        box-sizing:border-box;
    }

    .ai-chat-card{
        width:calc(100vw - 16px) !important;
        max-width:720px !important;
        height:calc((100vh - 16px) / var(--ui-scale, 1)) !important;
        max-height:calc((100vh - 16px) / var(--ui-scale, 1)) !important;
        border-radius:18px !important;
        box-sizing:border-box;
    }

    /* A+ / A++: give the dialog a little more breathing room from
       both the top and bottom screen edges. */
    html[data-ui-scale="large"] .settings-panel,
    html[data-ui-scale="xl"] .settings-panel{
        width:calc(100vw - 20px) !important;
        max-width:330px !important;
        max-height:calc((100vh - 20px) / var(--ui-scale, 1)) !important;
        padding:11px !important;
    }

    html[data-ui-scale="large"] .feedback-modal-card,
    html[data-ui-scale="xl"] .feedback-modal-card,
    html[data-ui-scale="large"] .admin-panel-card,
    html[data-ui-scale="xl"] .admin-panel-card{
        max-height:calc((100vh - 14px) / var(--ui-scale, 1)) !important;
        padding:11px !important;
    }

    html[data-ui-scale="large"] .ai-chat-card,
    html[data-ui-scale="xl"] .ai-chat-card{
        width:calc(100vw - 14px) !important;
        height:calc((100vh - 14px) / var(--ui-scale, 1)) !important;
        max-height:calc((100vh - 14px) / var(--ui-scale, 1)) !important;
        border-radius:16px !important;
    }

    /* A++ only: keep the profile dropdown just slightly to the
       right of the exact profile-button center. JS clamps it to
       the viewport, so it can never be cut off. */
    html[data-ui-scale="xl"] .account-panel{
        transform:translateX(-50%) !important;
    }
}


/* =========================================================
   MOBILE — DIALOG SPACING REFINEMENT
   Phone only. Keeps more visible space above/below dialogs
   and makes Settings noticeably narrower.
   ========================================================= */

@media (max-width:700px){

    /* AI Chat — more breathing room from both phone edges. */
    .ai-chat-card{
        height:calc((100vh - 32px) / var(--ui-scale, 1)) !important;
        max-height:calc((100vh - 32px) / var(--ui-scale, 1)) !important;
    }

    /* Bugs & Suggestions — slightly shorter vertically. */
    .feedback-modal-card{
        max-height:calc((100vh - 28px) / var(--ui-scale, 1)) !important;
    }

    /* Settings — narrower from both left and right, with a little
       more space above and below. */
    .settings-panel{
        width:calc(100vw - 72px) !important;
        max-width:280px !important;
        max-height:calc((100vh - 32px) / var(--ui-scale, 1)) !important;
        padding:13px !important;
    }

    html[data-ui-scale="large"] .ai-chat-card,
    html[data-ui-scale="xl"] .ai-chat-card{
        width:calc(100vw - 20px) !important;
        height:calc((100vh - 38px) / var(--ui-scale, 1)) !important;
        max-height:calc((100vh - 38px) / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="large"] .feedback-modal-card,
    html[data-ui-scale="xl"] .feedback-modal-card{
        max-height:calc((100vh - 34px) / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="large"] .settings-panel,
    html[data-ui-scale="xl"] .settings-panel{
        width:calc(100vw - 84px) !important;
        max-width:270px !important;
        max-height:calc((100vh - 38px) / var(--ui-scale, 1)) !important;
        padding:10px !important;
    }
}


/* =========================================================
   MOBILE — MATCH UTILITY DIALOG SIZES
   Phone only. AI Chat and Bugs & Suggestions now use the
   same compact footprint as Settings.
   ========================================================= */

@media (max-width:700px){

    .ai-chat-card,
    .feedback-modal-card{
        width:calc(100vw - 72px) !important;
        max-width:280px !important;
        height:auto !important;
        max-height:calc((100vh - 32px) / var(--ui-scale, 1)) !important;
    }

    /* AI Chat keeps its internal flex layout, but the outer
       card is now the same compact size as Settings. */
    .ai-chat-card{
        min-height:0 !important;
    }

    html[data-ui-scale="large"] .ai-chat-card,
    html[data-ui-scale="large"] .feedback-modal-card,
    html[data-ui-scale="xl"] .ai-chat-card,
    html[data-ui-scale="xl"] .feedback-modal-card{
        width:calc(100vw - 84px) !important;
        max-width:270px !important;
        max-height:calc((100vh - 38px) / var(--ui-scale, 1)) !important;
    }
}


/* =========================================================
   DESKTOP — PROFILE MENU ALIGNMENT
   Desktop only. The account menu opens directly below the
   profile icon, with the profile identity centered inside it.
   ========================================================= */
@media (min-width:701px){
    .auth-wrap .account-panel{
        left:50%;
        right:auto;
        transform:translateX(-50%);
        transform-origin:top center;
    }

    .auth-wrap .account-head{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:8px;
        padding:10px 8px 12px;
    }

    .auth-wrap .account-head > div:last-child{
        width:100%;
        min-width:0;
    }

    .auth-wrap .account-email{
        text-align:center;
    }
}



/* =========================================================
   MOBILE — PROFILE DROPDOWN FINAL VIEWPORT FIT
   Phone only. Desktop/tablet are intentionally untouched.

   The site uses body zoom for A- / A / A+ / A++.
   The profile menu must therefore compensate its CSS width
   and remain centered on the profile control at every scale.
   ========================================================= */
@media (max-width:700px){

    .auth-wrap{
        position:relative !important;
    }

    .auth-wrap .account-panel{
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        top:calc(100% + 8px) !important;
        transform:translateX(-50%) !important;

        width:min(
            calc(290px / var(--ui-scale, 1)),
            calc((100vw - 20px) / var(--ui-scale, 1))
        ) !important;
        max-width:calc((100vw - 20px) / var(--ui-scale, 1)) !important;

        box-sizing:border-box !important;
        max-height:calc((100vh - 82px) / var(--ui-scale, 1)) !important;
        overflow:auto !important;
        transform-origin:top center !important;
    }
}


/* =========================================================
   MOBILE — PROFILE DROPDOWN FINAL
   The dropdown remains inside #authWrap; only its mobile geometry
   is overridden here. Other header controls keep their behavior.
   ========================================================= */
@media (max-width:700px){

    .auth-wrap{
        position:relative !important;
        z-index:20;
    }

    .account-panel{
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        top:calc(100% + 8px) !important;
        transform:translateX(-50%) !important;
        z-index:2147483646 !important;
        display:none;
        width:min(
            290px,
            calc((100vw - 20px) / var(--ui-scale, 1))
        ) !important;
        max-width:calc(
            (100vw - 20px) / var(--ui-scale, 1)
        ) !important;
        max-height:calc(
            (100vh - 28px) / var(--ui-scale, 1)
        ) !important;
        overflow:auto !important;
        box-sizing:border-box !important;
    }

    .account-panel.open{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    /*
     * Keep every signed-in utility control visible in the phone header.
     * Admin Panel remains governed by admin-panel.js through its inline
     * display state.
     */
    .nav-actions .feedback-nav-btn,
    .nav-actions .settings-btn,
    .nav-actions .ai-chat-nav-btn{
        display:inline-flex !important;
        visibility:visible !important;
    }

    .nav-actions .signout-nav-btn{
        display:none !important;
    }

    .nav-actions:has(.profile-nav-btn[style*="inline-flex"]) .signout-nav-btn{
        display:inline-flex !important;
        visibility:visible !important;
    }

    .nav-actions .admin-panel-nav-btn{
        visibility:visible;
    }
}

/* Re-enable the normal profile hover enlargement on devices that support hover. */
@media (hover:hover) and (max-width:700px){
    .profile-nav-btn:hover{
        transform:translateY(-2px) scale(1.045);
    }
}

@media (max-width:700px){
    .profile-nav-btn:active{
        transform:translateY(-2px) scale(1.045) !important;
    }
}

/* A- — slightly narrower profile dropdown on phones only. */
@media (max-width:700px){
    html[data-ui-scale="small"] .account-panel{
        width:min(
            270px,
            calc((100vw - 20px) / var(--ui-scale, 1))
        ) !important;
        max-width:calc(
            (100vw - 20px) / var(--ui-scale, 1)
        ) !important;
    }
}

/* =========================================================
   HAMBURGER MENU — FINAL VIEWPORT / STICKY CALCULATOR
   The existing menu structure stays unchanged. The menu itself is the
   scroll container and Calculator remains the last sticky row.
   ========================================================= */

/* A+ / A++ on computers. Keep the top exactly where the current
   accessibility menu places it, but give it a real bottom boundary. */
html[data-ui-scale="large"] .nav-links.open,
html[data-ui-scale="xl"] .nav-links.open{
    top:calc(72px / var(--ui-scale, 1)) !important;
    bottom:calc(10px / var(--ui-scale, 1)) !important;
    height:auto !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    box-sizing:border-box !important;
    scrollbar-gutter:stable;
    isolation:isolate;
}

/* The last button is Calculator. Its opaque background and high stacking
   order make every preceding navigation item disappear underneath it
   instead of remaining visible below/through it while scrolling. */
html[data-ui-scale="large"] .nav-links.open > button:last-child,
html[data-ui-scale="xl"] .nav-links.open > button:last-child{
    position:sticky !important;
    bottom:0 !important;
    z-index:100 !important;
    flex:0 0 auto !important;
    width:100% !important;
    margin-top:5px !important;
    background:var(--card-solid,var(--card)) !important;
    border-top:1px solid var(--border) !important;
    box-shadow:0 -10px 20px rgba(0,0,0,.16) !important;
}

/* Phones: preserve the existing top area and shorten the panel from the
   bottom so the complete Calculator row is always inside the screen. */
@media (max-width:700px){

    .nav-links.open{
        top:64px !important;
        bottom:8px !important;
        height:auto !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain !important;
        -webkit-overflow-scrolling:touch !important;
        touch-action:pan-y !important;
        box-sizing:border-box !important;
        scrollbar-gutter:stable;
        isolation:isolate;
    }

    .nav-links.open > button:last-child{
        position:sticky !important;
        bottom:0 !important;
        z-index:100 !important;
        flex:0 0 auto !important;
        width:100% !important;
        margin-top:5px !important;
        background:var(--card-solid,var(--card)) !important;
        border-top:1px solid var(--border) !important;
        box-shadow:0 -10px 20px rgba(0,0,0,.16) !important;
    }

    /* A+ / A++ phones use the scaled header geometry already defined
       earlier; only the lower boundary is adjusted here. */
    html[data-ui-scale="large"] .nav-links.open,
    html[data-ui-scale="xl"] .nav-links.open{
        top:calc(64px / var(--ui-scale, 1)) !important;
        bottom:calc(8px / var(--ui-scale, 1)) !important;
        height:auto !important;
        max-height:none !important;
    }
}


/* =========================================================
   HAMBURGER MENU — ISOLATED SCROLL AREA + SOLID CALCULATOR BASE
   The existing nav-scroll-content wrapper keeps all menu items in the
   scrolling area. Calculator stays completely outside that scroll area,
   and the menu clips all overflow so nothing can appear underneath it.
   ========================================================= */

html[data-ui-scale="large"] .nav-links.open,
html[data-ui-scale="xl"] .nav-links.open{
    position:fixed !important;
    top:calc(72px / var(--ui-scale,1)) !important;
    bottom:calc(10px / var(--ui-scale,1)) !important;
    height:calc((100vh - 82px) / var(--ui-scale,1)) !important;
    height:calc((100dvh - 82px) / var(--ui-scale,1)) !important;
    max-height:none !important;
    overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    box-sizing:border-box !important;
}

@media(max-width:1000px){
    .nav-links.open{
        position:fixed !important;
        top:64px !important;
        bottom:8px !important;
        height:calc(100vh - 72px) !important;
        height:calc(100dvh - 72px) !important;
        max-height:none !important;
        overflow:hidden !important;
        overflow-x:hidden !important;
        overflow-y:hidden !important;
        display:flex !important;
        flex-direction:column !important;
        min-height:0 !important;
        box-sizing:border-box !important;
    }
}

@media(max-width:700px){
    html[data-ui-scale="large"] .nav-links.open,
    html[data-ui-scale="xl"] .nav-links.open{
        top:calc(64px / var(--ui-scale,1)) !important;
        bottom:calc(8px / var(--ui-scale,1)) !important;
        height:calc((100vh - 72px) / var(--ui-scale,1)) !important;
        height:calc((100dvh - 72px) / var(--ui-scale,1)) !important;
    }
}

/* Only this inner area scrolls. It cannot paint below Calculator. */
.nav-links.open > .nav-scroll-content{
    min-height:0 !important;
    flex:1 1 auto !important;
    width:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    scrollbar-gutter:stable;
}

/* Calculator is a permanently visible bottom row, not part of the
   scrolling content. Its background is fully opaque in both themes. */
.nav-links.open > .nav-scroll-content + button:last-child{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    z-index:20 !important;
    flex:0 0 auto !important;
    width:100% !important;
    margin-top:5px !important;
    background:var(--card-solid,var(--card)) !important;
    border-top:1px solid var(--border) !important;
    box-shadow:0 -10px 20px rgba(0,0,0,.16) !important;
    isolation:isolate !important;
}

/* The menu itself has the theme surface all the way to its bottom edge,
   so even the area beneath Calculator can only show the current theme. */
html[data-theme="light"] .nav-links.open{
    background:#fff !important;
}

html:not([data-theme="light"]) .nav-links.open{
    background:var(--card-solid,var(--card)) !important;
}

/* =========================================================
   CALCULATOR — A+ / A++ PHONE WIDTH FIX
   Keep the complete Calculator and all three mode buttons inside
   the visual phone viewport while preserving the existing scale.
   Desktop and smaller accessibility sizes remain unchanged.
   ========================================================= */

@media(max-width:700px){
    html[data-ui-scale="large"] #calculatorApp > .container,
    html[data-ui-scale="xl"] #calculatorApp > .container{
        width:calc((100vw - 22px) / var(--ui-scale,1)) !important;
        max-width:none !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    html[data-ui-scale="large"] #calculatorApp .calculator-mode-tabs,
    html[data-ui-scale="xl"] #calculatorApp .calculator-mode-tabs{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    html[data-ui-scale="large"] #calculatorApp .calculator-mode-btn,
    html[data-ui-scale="xl"] #calculatorApp .calculator-mode-btn{
        min-width:0 !important;
        max-width:100% !important;
        flex:1 1 0 !important;
        padding-left:4px !important;
        padding-right:4px !important;
        white-space:nowrap !important;
    }

    html[data-ui-scale="large"] #calculatorApp .calculator-panel,
    html[data-ui-scale="xl"] #calculatorApp .calculator-panel{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding:12px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    html[data-ui-scale="large"] #calculatorApp .calculator-display,
    html[data-ui-scale="xl"] #calculatorApp .calculator-display,
    html[data-ui-scale="large"] #calculatorApp .calculator-keypad,
    html[data-ui-scale="xl"] #calculatorApp .calculator-keypad{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    html[data-ui-scale="large"] #calculatorApp .calculator-key,
    html[data-ui-scale="xl"] #calculatorApp .calculator-key{
        min-width:0 !important;
        max-width:100% !important;
    }
}


/* =========================================================
   CRYPTO CURRENCIES
   ========================================================= */

.crypto-section{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:42px 0 70px;
}

.crypto-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.crypto-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border:1px solid rgba(124,92,255,.3);
    border-radius:999px;
    background:rgba(124,92,255,.1);
    color:#c4b5fd;
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
}

.crypto-header h2{
    font-size:clamp(28px,4vw,42px);
    letter-spacing:-1px;
    margin-bottom:5px;
}

.crypto-header p{
    color:var(--muted);
}

.crypto-refresh{
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface-soft);
    border-radius:12px;
    padding:9px 13px;
    font-weight:800;
    transition:.2s;
}

.crypto-refresh:hover{
    border-color:rgba(124,92,255,.55);
    transform:translateY(-2px);
    background:rgba(124,92,255,.08);
}

.crypto-global-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:20px;
}

.crypto-stat-card,
.crypto-card{
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    box-shadow:0 14px 40px rgba(0,0,0,.12);
}

.crypto-stat-card{
    border-radius:16px;
    padding:15px;
}

.crypto-stat-card span{
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    margin-bottom:5px;
}

.crypto-stat-card strong{
    font-size:18px;
}

.crypto-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.crypto-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.crypto-filters button{
    border:1px solid var(--border);
    color:var(--muted);
    background:var(--surface-soft);
    border-radius:11px;
    padding:8px 11px;
    font-size:12px;
    font-weight:800;
    transition:.2s;
}

.crypto-filters button:hover,
.crypto-filters button.active{
    color:var(--text);
    border-color:rgba(124,92,255,.65);
    background:rgba(124,92,255,.1);
    box-shadow:0 0 0 1px rgba(56,189,248,.12) inset;
}

.crypto-search-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    width:min(290px,100%);
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-soft);
    padding:0 11px;
    color:var(--muted);
}

.crypto-search-wrap input{
    width:100%;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent;
    color:var(--text);
    padding:10px 0;
}

.crypto-search-wrap:focus-within{
    border-color:var(--primary);
    box-shadow:var(--focus-ring);
}

.crypto-results-row{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    margin:8px 2px 12px;
}

.crypto-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.crypto-card{
    min-width:0;
    border-radius:18px;
    padding:16px;
    transition:.2s;
}

.crypto-card:hover{
    transform:translateY(-2px);
    border-color:rgba(124,92,255,.48);
    box-shadow:0 18px 50px rgba(0,0,0,.2);
}

.crypto-card-top{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.crypto-image-wrap{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:14px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:rgba(124,92,255,.08);
    border:1px solid var(--border);
    position:relative;
}

.crypto-image-placeholder{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:21px;
}

.crypto-image{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:7px;
    position:relative;
    z-index:1;
    opacity:0;
    transition:opacity .2s;
    background:var(--card-solid,var(--card));
}

.crypto-image.loaded{
    opacity:1;
}

.crypto-card-name{
    min-width:0;
}

.crypto-card-name strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.crypto-card-name span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:2px;
}

.crypto-fiat-prices{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin:17px 0 13px;
}

.crypto-fiat-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:28px;
}

.crypto-fiat-row > strong{
    font-size:21px;
    line-height:1.2;
    letter-spacing:-.4px;
    font-weight:700;
}

.crypto-change{
    border-radius:999px;
    padding:4px 7px;
    font-size:11px;
    font-weight:900;
}

.crypto-change.positive{
    color:#34d399;
    background:rgba(52,211,153,.1);
}

.crypto-change.negative{
    color:#fb7185;
    background:rgba(251,113,133,.1);
}

.crypto-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.crypto-metrics > div{
    min-width:0;
    border:1px solid var(--border);
    border-radius:11px;
    padding:9px;
    background:var(--surface-soft);
}

.crypto-metrics span{
    display:block;
    color:var(--muted2);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.crypto-metrics strong{
    display:block;
    margin-top:3px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.crypto-empty,
.crypto-loading{
    grid-column:1/-1;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    border:1px dashed var(--border);
    border-radius:18px;
    color:var(--muted);
    background:var(--surface-soft);
}

.crypto-empty strong,
.crypto-loading strong{
    color:var(--text);
}

.crypto-attribution{
    margin-top:18px;
    color:var(--muted2);
    font-size:10px;
    line-height:1.6;
}

.crypto-attribution a{
    text-decoration:underline;
}

@media(max-width:1000px){
    .crypto-global-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
    .crypto-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:700px){
    .crypto-section{
        width:calc(100% - 22px);
        padding:28px 0 55px;
    }

    .crypto-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .crypto-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .crypto-search-wrap{
        width:100%;
    }

    .crypto-global-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .crypto-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:460px){
    .crypto-grid{
        grid-template-columns:1fr;
    }

    .crypto-global-stats{
        grid-template-columns:1fr 1fr;
    }
}

html[data-theme="light"] .crypto-stat-card,
html[data-theme="light"] .crypto-card{
    background:#fff;
}

.crypto-pager{
    display:flex;
    justify-content:center;
    margin-top:18px;
}
.crypto-floating-show-less{
    position:fixed;
    right:max(8px, calc((100vw - 1180px) / 2 - 140px));
    top:50%;
    z-index:10050;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface-soft);
    border-radius:14px;
    padding:11px 15px;
    min-height:56px;
    font-size:.90rem;
    font-weight:900;
    box-shadow:0 12px 32px rgba(0,0,0,.22);
    opacity:0;
    visibility:hidden;
    transform:translateY(-40%);
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,border-color .2s ease,background .2s ease;
}

.crypto-floating-show-less.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%);
    pointer-events:auto;
}

.crypto-floating-show-less:hover{
    border-color:rgba(124,92,255,.65);
    background:rgba(124,92,255,.1);
    transform:translateY(-50%) scale(1.018) !important;
    transform-origin:50% 50% !important;
}

.crypto-floating-show-less span{
    font-size:14px;
    line-height:1;
}

html[data-theme="light"] .crypto-floating-show-less{
    background:#fff;
}

@media (max-width:1400px) and (min-width:701px){
    .crypto-floating-show-less{
        right:8px;
    }
}

@media (max-width:1024px){
    .crypto-floating-show-less{
        right:14px;
    }
}

@media(max-width:700px){
    .crypto-floating-show-less{
        right:8px;
        top:50%;
        min-height:56px;
        padding:12px 16px;
        border-radius:14px;
        font-size:.90rem;
    }
}

html[data-ui-scale="small"] .crypto-floating-show-less{
    min-height:62px;
    padding:13px 18px;
    font-size:1rem;
}

html[data-ui-scale="large"] .crypto-floating-show-less,
html[data-ui-scale="xl"] .crypto-floating-show-less{
    min-height:46px;
    padding:10px 16px;
    font-size:.82rem;
}

.crypto-show-btn{
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface-soft);
    border-radius:12px;
    padding:10px 15px;
    font-size:12px;
    font-weight:800;
    transition:.2s;
}
.crypto-show-btn:hover{
    border-color:rgba(124,92,255,.65);
    background:rgba(124,92,255,.1);
    transform:translateY(-2px);
}
html[data-theme="light"] .crypto-show-btn{
    background:#fff;
}

 
/* =========================================================
   CRYPTO DETAIL PANEL
   ========================================================= */
.crypto-card[role="button"]{cursor:pointer}
.crypto-card[role="button"]:focus-visible{
    outline:3px solid rgba(124,92,255,.42);
    outline-offset:2px;
}

.crypto-detail-nav{
    position:absolute;
    top:50%;
    z-index:2202;
    width:62px;
    height:82px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card-solid,var(--card));
    color:var(--text);
    box-shadow:0 14px 40px rgba(0,0,0,.24);
    cursor:pointer;
    transform:translateY(-50%);
    transition:background .16s ease,border-color .16s ease,opacity .16s ease;
}
.crypto-detail-nav:hover,
.crypto-detail-nav:focus-visible,
.crypto-detail-nav:active,
.crypto-detail-nav:disabled:hover{
    background:var(--surface-soft);
    border-color:rgba(124,92,255,.42);
    transform:translateY(-50%) !important;
}
.crypto-detail-nav:disabled{
    opacity:.28;
    cursor:default;
}
/* Cryptocurrencies detail navigation — 50px closer to the panel on every UI scale (A− / A / A+ / A++). */
@media(min-width:1081px){
    .crypto-detail-nav-prev{
        left:max(12px,calc(50% - 450px));
    }
    .crypto-detail-nav-next{
        right:max(12px,calc(50% - 450px));
    }

    /* A: 20px further inward */
    html[data-ui-scale="normal"] .crypto-detail-nav-prev,
    html:not([data-ui-scale]) .crypto-detail-nav-prev{
        left:max(12px,calc(50% - 430px));
    }
    html[data-ui-scale="normal"] .crypto-detail-nav-next,
    html:not([data-ui-scale]) .crypto-detail-nav-next{
        right:max(12px,calc(50% - 430px));
    }

    /* A+: 5px outward from the current position */
    html[data-ui-scale="large"] .crypto-detail-nav-prev{
        left:max(12px,calc(50% - 415px));
    }
    html[data-ui-scale="large"] .crypto-detail-nav-next{
        right:max(12px,calc(50% - 415px));
    }

    /* A++: 10px further inward from the current position */
    html[data-ui-scale="xl"] .crypto-detail-nav-prev{
        left:max(12px,calc(50% - 380px));
    }
    html[data-ui-scale="xl"] .crypto-detail-nav-next{
        right:max(12px,calc(50% - 380px));
    }
}
.crypto-detail-nav-key{
    order:1;
    font-size:.82rem;
    line-height:1;
    font-weight:800;
    color:var(--muted);
}
.crypto-detail-nav-chevron{
    order:2;
    font-size:34px;
    line-height:.75;
    font-weight:400;
}
.crypto-detail-nav-main{
    order:3;
    font-size:22px;
    line-height:.8;
    font-weight:300;
}
@media(max-width:1080px){
    .crypto-detail-nav-prev{left:8px}
    .crypto-detail-nav-next{right:8px}
}
@media(max-width:650px){
    .crypto-detail-nav{width:48px;height:66px;border-radius:14px}
    .crypto-detail-nav-prev{left:3px}
    .crypto-detail-nav-next{right:3px}
    .crypto-detail-nav-main{font-size:16px}
    .crypto-detail-nav-chevron{font-size:24px}
    .crypto-detail-nav-key{font-size:.58rem}
}
@media(max-width:420px){
    .crypto-detail-nav{width:42px;height:60px}
    .crypto-detail-nav-main{font-size:15px}
    .crypto-detail-nav-chevron{font-size:22px}
    .crypto-detail-nav-key{display:none}
}

.crypto-detail-overlay{
    position:fixed;
    inset:0;
    z-index:2200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(10px);
}
.crypto-detail-overlay.open{display:flex}

.crypto-detail-card{
    width:min(760px,100%);
    max-height:min(820px,calc(100vh - 40px));
    overflow:auto;
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 30px 100px rgba(0,0,0,.38);
    padding:22px;
}

html[data-theme="light"] .crypto-detail-card{background:#fff}

/* Cryptocurrencies A+ detail panel and side navigation sit 30px lower. */
html[data-ui-scale="large"] .crypto-detail-card{
    position:relative;
    top:30px;
}

html[data-ui-scale="large"] .crypto-detail-nav{
    top:calc(50% + 30px);
}

.crypto-detail-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.crypto-detail-title-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.crypto-detail-image{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    border-radius:17px;
    background:rgba(124,92,255,.08);
    border:1px solid var(--border);
    font-size:28px;
}
.crypto-detail-symbol{
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.crypto-detail-card h2{
    font-size:28px;
    line-height:1.1;
    margin:2px 0 3px;
}
.crypto-detail-rank{
    color:var(--muted2);
    font-size:11px;
    font-weight:700;
}
.crypto-detail-close{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-soft);
    color:var(--text);
    font-size:17px;
}
.crypto-detail-close:hover{
    border-color:rgba(124,92,255,.55);
    transform:translateY(-1px);
}

.crypto-detail-price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:22px 0 16px;
}
.crypto-detail-price-row > strong{
    font-size:32px;
    letter-spacing:-1px;
}
.crypto-detail-change{
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}
.crypto-detail-change.positive{color:#34d399;background:rgba(52,211,153,.1)}
.crypto-detail-change.negative{color:#fb7185;background:rgba(251,113,133,.1)}

.crypto-detail-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}
.crypto-detail-metrics > div{
    min-width:0;
    padding:11px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface-soft);
}
.crypto-detail-metrics span{
    display:block;
    color:var(--muted2);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.crypto-detail-metrics strong{
    display:block;
    margin-top:4px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.crypto-performance-section{
    margin-top:18px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface-soft);
}
.crypto-detail-section-head{
    display:flex;
    justify-content:space-between;
    margin-bottom:13px;
}
.crypto-detail-section-head strong{display:block}
.crypto-detail-section-head span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:2px;
}
.crypto-performance-row{
    display:grid;
    grid-template-columns:52px 1fr 75px;
    align-items:center;
    gap:10px;
    margin:9px 0;
}
.crypto-performance-row > span{
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}
.crypto-performance-track{
    height:8px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(148,163,184,.12);
}
.crypto-performance-track i{
    display:block;
    height:100%;
    border-radius:99px;
}
.crypto-performance-track i.positive{background:linear-gradient(90deg,var(--primary),var(--primary2))}
.crypto-performance-track i.negative{background:linear-gradient(90deg,var(--danger),#f59e0b)}
.crypto-performance-row > strong{
    text-align:right;
    font-size:11px;
}
.crypto-performance-row .positive{color:#34d399}
.crypto-performance-row .negative{color:#fb7185}

.crypto-detail-description{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--border);
}
.crypto-detail-description strong{
    display:block;
    margin-bottom:7px;
}
.crypto-detail-description p{
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}
.crypto-detail-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:15px;
}
.crypto-detail-links a{
    border:1px solid var(--border);
    background:var(--surface-soft);
    border-radius:10px;
    padding:8px 10px;
    font-size:11px;
    font-weight:800;
}
.crypto-detail-links a:hover{
    border-color:rgba(124,92,255,.55);
}
.crypto-detail-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:14px;
}
.crypto-detail-tags strong{
    width:100%;
    font-size:11px;
}
.crypto-detail-tags span{
    padding:5px 8px;
    border-radius:999px;
    background:rgba(124,92,255,.08);
    border:1px solid rgba(124,92,255,.18);
    color:var(--muted);
    font-size:10px;
}
.crypto-detail-source{
    margin-top:16px;
    color:var(--muted2);
    font-size:10px;
}

.crypto-detail-loading,
.crypto-detail-no-chart{
    padding:22px;
    text-align:center;
    color:var(--muted);
    font-size:11px;
}

@media(max-width:700px){
    .crypto-detail-overlay{padding:10px}
    .crypto-detail-card{
        max-height:calc(100vh - 20px);
        padding:17px;
        border-radius:20px;
    }
    .crypto-detail-card h2{font-size:23px}
    .crypto-detail-price-row > strong{font-size:27px}
    .crypto-detail-metrics{grid-template-columns:1fr 1fr}
    .crypto-performance-row{grid-template-columns:42px 1fr 67px}
}

/* A+ / A++ — keep the Crypto detail dialog compact on phones.
   The accessibility scale remains active, but the dialog no longer
   grows disproportionately and the About text stays easy to read. */
@media(max-width:700px){
    html[data-ui-scale="large"] .crypto-detail-overlay,
    html[data-ui-scale="xl"] .crypto-detail-overlay{
        padding:8px !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
    }

    html[data-ui-scale="large"] .crypto-detail-card{
        width:calc(100vw - 24px) !important;
        max-width:325px !important;
        max-height:calc((100vh - 24px) / var(--ui-scale,1)) !important;
        padding:13px !important;
        border-radius:17px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-card{
        width:calc(100vw - 20px) !important;
        max-width:305px !important;
        max-height:calc((100vh - 20px) / var(--ui-scale,1)) !important;
        padding:11px !important;
        border-radius:16px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-title-wrap,
    html[data-ui-scale="xl"] .crypto-detail-title-wrap{
        gap:9px;
    }

    html[data-ui-scale="large"] .crypto-detail-image,
    html[data-ui-scale="xl"] .crypto-detail-image{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:13px;
        font-size:22px;
    }

    html[data-ui-scale="large"] .crypto-detail-card h2,
    html[data-ui-scale="xl"] .crypto-detail-card h2{
        font-size:20px;
    }

    html[data-ui-scale="large"] .crypto-detail-price-row,
    html[data-ui-scale="xl"] .crypto-detail-price-row{
        margin:14px 0 10px;
        gap:7px;
    }

    html[data-ui-scale="large"] .crypto-detail-price-row > strong{
        font-size:23px;
    }

    html[data-ui-scale="xl"] .crypto-detail-price-row > strong{
        font-size:21px;
    }

    html[data-ui-scale="large"] .crypto-detail-metrics,
    html[data-ui-scale="xl"] .crypto-detail-metrics{
        gap:6px;
    }

    html[data-ui-scale="large"] .crypto-detail-metrics > div,
    html[data-ui-scale="xl"] .crypto-detail-metrics > div{
        padding:8px;
    }

    html[data-ui-scale="large"] .crypto-performance-section,
    html[data-ui-scale="xl"] .crypto-performance-section{
        margin-top:12px;
        padding:11px;
    }

    html[data-ui-scale="large"] .crypto-detail-description,
    html[data-ui-scale="xl"] .crypto-detail-description{
        margin-top:12px;
        padding-top:12px;
    }

    html[data-ui-scale="large"] .crypto-detail-description p,
    html[data-ui-scale="xl"] .crypto-detail-description p{
        font-size:11px;
        line-height:1.45;
    }

    html[data-ui-scale="large"] .crypto-detail-source,
    html[data-ui-scale="xl"] .crypto-detail-source{
        margin-top:11px;
    }
}


.crypto-chart-controls{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:14px;
}

.crypto-chart-controls button{
    border:1px solid var(--border);
    border-radius:9px;
    padding:7px 10px;
    background:var(--surface-soft);
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    transition:.2s;
}

.crypto-chart-controls button:hover,
.crypto-chart-controls button.active{
    color:var(--text);
    border-color:rgba(124,92,255,.6);
    background:rgba(124,92,255,.1);
}

.crypto-chart-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}

.crypto-chart-summary .positive{color:#34d399}
.crypto-chart-summary .negative{color:#fb7185}

.crypto-history-svg{
    display:block;
    width:100%;
    height:300px;
    overflow:visible;
}

.crypto-chart-grid{
    stroke:rgba(148,163,184,.12);
    stroke-width:1;
}

.crypto-chart-label{
    fill:var(--muted2);
    font-size:10px;
}

.crypto-chart-area{
    fill:rgba(124,92,255,.09);
}

.crypto-chart-line{
    fill:none;
    stroke:var(--primary2);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

.crypto-chart-point{
    fill:var(--primary);
    stroke:var(--card-solid,var(--card));
    stroke-width:1.5;
}

.crypto-chart-range{
    display:flex;
    justify-content:space-between;
    margin-top:3px;
    color:var(--muted2);
    font-size:9px;
}

@media(max-width:700px){
    .crypto-chart-controls{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:3px;
        scrollbar-width:none;
    }

    .crypto-chart-controls::-webkit-scrollbar{
        display:none;
    }

    .crypto-chart-controls button{
        flex:0 0 auto;
    }

    .crypto-history-svg{
        height:245px;
    }
}

/* CRYPTO DETAIL — DESKTOP ACCESSIBILITY SIZE
 * Keep the detail dialog physically smaller at A, A+ and A++.
 * A− remains unchanged.
 */
@media(min-width:701px){
    html[data-ui-scale="normal"] .crypto-detail-card{
        transform:scaleX(.95) scaleY(.93) !important;
        transform-origin:center center !important;
    }

    html[data-ui-scale="large"] .crypto-detail-card{
        transform:scale(.90) !important;
        transform-origin:center center !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-card{
        transform:scale(.82) !important;
        transform-origin:center center !important;
    }
}

/* =========================================================
   GLOBAL HEADER — ALWAYS FOLLOWS THE VIEWPORT
   The navigation remains visible while scrolling through every
   section. The body keeps the same vertical space the header
   previously occupied so page content does not move underneath it.
========================================================= */

body{
    padding-top:72px;
}

.nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
}

/* Keep header controls above Leaflet's internal map panes at every UI scale. */
.nav{
    z-index:3000 !important;
}

@media(max-width:700px){
    body{
        padding-top:60px;
    }

    html[data-ui-scale="large"] body,
    html[data-ui-scale="xl"] body{
        padding-top:56px;
    }
}

/* =========================================================
   SECTION CONTROLS — SETTINGS VISIBILITY
   Floating section controls must never remain visible through
   the Settings panel. Settings is a UI overlay, not another
   section, so its open state temporarily hides these controls.
========================================================= */
html.settings-open #worthItVehicleFloatingCollapse,
html.settings-open #worthItMarketsBackUp,
html.settings-open #cryptoFloatingShowLess{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Keep the floating Crypto control in exactly the same viewport
   position while hovering; only its size changes. */
.crypto-floating-show-less:hover{
    transform:translateY(-50%) scale(1.018) !important;
}

/* Same position-preserving hover behavior for the Cars floating
   control, avoiding accidental vertical movement from global rules. */
.worth-it-vehicle-floating-collapse:hover{
    transform:translateY(-50%) scale(1.018) !important;
}

/* Same principle for Markets. */
.worth-it-markets-back-up:hover{
    transform:translateY(-50%) scale(1.018) !important;
}


/* Crypto / Cars data freshness labels */
.crypto-last-updated,
.cars-last-updated{
    display:block;
    margin-top:6px;
    font-size:.78rem;
    line-height:1.45;
    opacity:.72;
    font-weight:600;
}

.crypto-eur-price{display:none;}

.crypto-detail-eur-price{
    display:inline-block;
    margin-left:8px;
    font-size:.72em;
    font-weight:700;
    opacity:.72;
}


/* =========================================================
   CRYPTO DETAIL — FINAL A+ / A++ PHONE FIT
   Keep the complete detail content visible within the viewport.
   A++ gets extra vertical compression instead of cutting the
   dialog at the top or bottom of the phone.
   ========================================================= */

@media(max-width:700px){
    html[data-ui-scale="large"] .crypto-detail-card{
        max-height:calc((100vh - 44px) / var(--ui-scale,1)) !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-card{
        max-height:calc((100vh - 64px) / var(--ui-scale,1)) !important;
        padding:9px !important;
    }

    html[data-ui-scale="large"] .crypto-performance-section,
    html[data-ui-scale="xl"] .crypto-performance-section{
        margin-top:9px !important;
        padding:9px !important;
        border-radius:13px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-section-head,
    html[data-ui-scale="xl"] .crypto-detail-section-head{
        margin-bottom:8px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-section-head strong,
    html[data-ui-scale="xl"] .crypto-detail-section-head strong{
        font-size:12px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-section-head span,
    html[data-ui-scale="xl"] .crypto-detail-section-head span{
        font-size:9px !important;
        line-height:1.3 !important;
    }

    html[data-ui-scale="large"] .crypto-chart-controls,
    html[data-ui-scale="xl"] .crypto-chart-controls{
        gap:4px !important;
        margin-bottom:7px !important;
        padding-bottom:1px !important;
    }

    html[data-ui-scale="large"] .crypto-chart-controls button,
    html[data-ui-scale="xl"] .crypto-chart-controls button{
        padding:5px 7px !important;
        font-size:9px !important;
        border-radius:7px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-no-chart,
    html[data-ui-scale="xl"] .crypto-detail-no-chart{
        padding:7px 5px !important;
        font-size:9px !important;
        line-height:1.3 !important;
    }

    html[data-ui-scale="large"] .crypto-detail-description,
    html[data-ui-scale="xl"] .crypto-detail-description{
        margin-top:9px !important;
        padding-top:9px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-description strong,
    html[data-ui-scale="xl"] .crypto-detail-description strong{
        margin-bottom:4px !important;
        font-size:12px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-description p,
    html[data-ui-scale="xl"] .crypto-detail-description p{
        margin:0 !important;
        font-size:10px !important;
        line-height:1.35 !important;
    }

    html[data-ui-scale="large"] .crypto-detail-source,
    html[data-ui-scale="xl"] .crypto-detail-source{
        margin-top:8px !important;
        font-size:9px !important;
        line-height:1.3 !important;
    }
}


/* =========================================================
   CRYPTO DETAIL — DESKTOP A+ / A++ FIT
   Desktop only. The phone-specific Crypto detail rules above
   remain untouched.
   ========================================================= */

@media(min-width:701px){
    html[data-ui-scale="large"] .crypto-detail-overlay,
    html[data-ui-scale="xl"] .crypto-detail-overlay{
        padding:10px !important;
        overflow:auto !important;
    }

    html[data-ui-scale="large"] .crypto-detail-card{
        max-height:calc((100dvh - 28px) / var(--ui-scale,1)) !important;
        padding:16px !important;
        border-radius:19px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-card{
        max-height:calc((100dvh - 28px) / var(--ui-scale,1)) !important;
        padding:13px !important;
        border-radius:18px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-head,
    html[data-ui-scale="xl"] .crypto-detail-head{
        gap:10px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-title-wrap{
        gap:10px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-title-wrap{
        gap:8px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-image{
        width:50px !important;
        height:50px !important;
        flex-basis:50px !important;
        border-radius:15px !important;
        font-size:24px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-image{
        width:46px !important;
        height:46px !important;
        flex-basis:46px !important;
        border-radius:14px !important;
        font-size:22px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-card h2{
        font-size:24px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-card h2{
        font-size:22px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-price-row,
    html[data-ui-scale="xl"] .crypto-detail-price-row{
        margin:14px 0 10px !important;
        gap:8px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-price-row > strong{
        font-size:27px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-price-row > strong{
        font-size:24px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-metrics,
    html[data-ui-scale="xl"] .crypto-detail-metrics{
        gap:6px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-metrics > div,
    html[data-ui-scale="xl"] .crypto-detail-metrics > div{
        padding:8px !important;
    }

    html[data-ui-scale="large"] .crypto-performance-section{
        margin-top:11px !important;
        padding:10px !important;
        border-radius:14px !important;
    }

    html[data-ui-scale="xl"] .crypto-performance-section{
        margin-top:9px !important;
        padding:9px !important;
        border-radius:13px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-section-head{
        margin-bottom:8px !important;
    }

    html[data-ui-scale="xl"] .crypto-detail-section-head{
        margin-bottom:7px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-section-head span,
    html[data-ui-scale="xl"] .crypto-detail-section-head span{
        font-size:9px !important;
        line-height:1.3 !important;
    }

    html[data-ui-scale="large"] .crypto-detail-no-chart,
    html[data-ui-scale="xl"] .crypto-detail-no-chart{
        padding:8px 5px !important;
        font-size:9px !important;
        line-height:1.3 !important;
    }

    html[data-ui-scale="large"] .crypto-chart-controls,
    html[data-ui-scale="xl"] .crypto-chart-controls{
        gap:4px !important;
        margin-bottom:7px !important;
    }

    html[data-ui-scale="large"] .crypto-chart-controls button,
    html[data-ui-scale="xl"] .crypto-chart-controls button{
        padding:5px 7px !important;
        font-size:9px !important;
        border-radius:7px !important;
    }

    html[data-ui-scale="large"] .crypto-history-svg{
        height:235px !important;
    }

    html[data-ui-scale="xl"] .crypto-history-svg{
        height:205px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-description,
    html[data-ui-scale="xl"] .crypto-detail-description{
        margin-top:10px !important;
        padding-top:10px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-description strong,
    html[data-ui-scale="xl"] .crypto-detail-description strong{
        margin-bottom:4px !important;
        font-size:12px !important;
    }

    html[data-ui-scale="large"] .crypto-detail-description p,
    html[data-ui-scale="xl"] .crypto-detail-description p{
        margin:0 !important;
        font-size:10px !important;
        line-height:1.4 !important;
    }

    html[data-ui-scale="large"] .crypto-detail-source,
    html[data-ui-scale="xl"] .crypto-detail-source{
        margin-top:7px !important;
        font-size:9px !important;
        line-height:1.3 !important;
    }
}


/* =========================================================
   CRYPTOCURRENCIES — MOBILE POLISH
   Phone-only layout. Desktop Crypto styling stays untouched.
   ========================================================= */

@media(max-width:700px){

    .crypto-section{
        width:calc(100% - 18px) !important;
        max-width:none !important;
        padding:22px 0 52px !important;
        overflow:visible;
    }

    .crypto-header{
        align-items:stretch !important;
        gap:12px !important;
        margin-bottom:16px !important;
    }

    .crypto-header > div{
        min-width:0;
    }

    .crypto-badge{
        margin-bottom:8px !important;
        padding:6px 10px !important;
        font-size:11px !important;
    }

    .crypto-header h2{
        font-size:clamp(24px,7vw,31px) !important;
        line-height:1.08 !important;
        letter-spacing:-.7px !important;
        margin-bottom:5px !important;
    }

    .crypto-header p{
        font-size:13px !important;
        line-height:1.45 !important;
}

}

/* =========================================================
   WATER LEVELS
   Modern centered discovery layout. Kept fully scoped to this
   section so the rest of the site remains unchanged.
========================================================= */

.water-levels-section{
    display:block;
    overflow-anchor:none !important;
    width:min(1040px, calc(100% - 32px)) !important;
    max-width:1040px !important;
    margin:0 auto !important;
    padding:42px 0 64px !important;
    box-sizing:border-box !important;
    color:var(--text);
}

.water-levels-header{
    width:100%;
    max-width:860px;
    margin:0 auto 24px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:center;
}

.water-levels-header > div{
    min-width:0;
}

.water-levels-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px 12px;
    border:1px solid rgba(124,92,255,.30);
    border-radius:999px;
    background:rgba(124,92,255,.10);
    color:var(--text);
    font-size:12px;
    font-weight:800;
}

.water-levels-header h2{
    margin:10px 0 7px !important;
    font-size:clamp(30px,4vw,42px) !important;
    line-height:1.08;
    letter-spacing:-1px;
    text-align:center;
}

.water-levels-header p{
    margin:0 auto;
    max-width:700px;
    color:var(--muted);
    line-height:1.55;
    text-align:center;
}

.water-levels-header-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
}

.water-levels-refresh:disabled{
    opacity:.52 !important;
    cursor:default !important;
    transform:none !important;
    box-shadow:none !important;
}

.water-levels-refresh:disabled:hover{
    border-color:var(--border) !important;
    background:var(--surface-soft) !important;
    transform:none !important;
}

.water-levels-refresh-info{
    position:relative;
}

.water-levels-info-button{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-soft);
    color:var(--muted);
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    transition:.2s;
}

.water-levels-info-button:hover,
.water-levels-info-button[aria-expanded="true"]{
    color:var(--text);
    border-color:rgba(124,92,255,.55);
    background:rgba(124,92,255,.08);
    transform:translateY(-1px);
}

.water-levels-refresh-info-popover{
    position:absolute;
    z-index:20;
    top:calc(100% + 9px);
    right:0;
    width:min(320px,calc(100vw - 32px));
    padding:12px 13px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:5px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--card-solid,var(--card));
    color:var(--text);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    text-align:left;
}

.water-levels-refresh-info-popover[hidden]{
    display:none !important;
}

.water-levels-refresh-info-popover strong{
    font-size:12px;
}

.water-levels-refresh-info-popover span{
    color:var(--muted);
    font-size:11px;
    line-height:1.45;
}

.water-levels-refresh{
    border:1px solid var(--border) !important;
    color:var(--text) !important;
    background:var(--surface-soft) !important;
    border-radius:12px !important;
    padding:10px 15px !important;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.water-levels-refresh:hover{
    border-color:rgba(124,92,255,.55) !important;
    transform:translateY(-2px);
    background:rgba(124,92,255,.08) !important;
}

.water-levels-toolbar{
    width:100%;
    max-width:900px;
    margin:0 auto 14px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.water-levels-filters{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    width:100%;
}

.water-levels-filters button{
    border:1px solid var(--border);
    color:var(--muted);
    background:var(--surface-soft);
    border-radius:11px;
    padding:8px 11px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.water-levels-filters button:hover,
.water-levels-filters button.active{
    color:var(--text);
    border-color:rgba(124,92,255,.65);
    background:rgba(124,92,255,.1);
    box-shadow:0 0 0 1px rgba(56,189,248,.12) inset;
}

.water-levels-search-wrap{
    width:min(100%,520px) !important;
    min-width:0 !important;
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 14px;
    margin:0 auto;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface-soft);
    color:var(--muted);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    box-sizing:border-box;
}

.water-levels-search-wrap:focus-within{
    border-color:rgba(124,92,255,.55);
    box-shadow:0 0 0 3px rgba(124,92,255,.10);
}

.water-levels-search-wrap input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    text-align:center;
}

.water-levels-search-wrap input::placeholder{
    color:var(--muted);
    opacity:.9;
}

.water-levels-results-row{
    width:100%;
    max-width:1040px;
    margin:0 auto 14px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 10px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.water-levels-results-row > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.water-levels-results-row .water-levels-search-hint{
    margin-left:0;
}

.water-levels-grid{
    width:100%;
    max-width:1040px;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:stretch;
}

.water-level-card{
    position:relative;
    min-width:0;
    min-height:248px;
    padding:18px !important;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    overflow:hidden;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    background:var(--card-solid,var(--card)) !important;
    box-shadow:0 14px 40px rgba(0,0,0,.12) !important;
    transition:transform .20s ease,border-color .20s ease,box-shadow .20s ease;
}

.water-level-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:2px;
    background:linear-gradient(90deg,var(--primary),var(--primary2));
    opacity:.75;
}

.water-level-card:hover{
    transform:translateY(-4px);
    border-color:rgba(124,92,255,.48) !important;
    box-shadow:0 20px 48px rgba(0,0,0,.18) !important;
}

.water-level-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.water-level-card-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(124,92,255,.11);
    border:1px solid rgba(124,92,255,.20);
    font-size:22px;
}

.water-level-card-status{
    padding:5px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.055);
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.water-level-card h3{
    margin:0 0 5px !important;
    font-size:17px;
    text-align:left;
}

.water-level-card-location{
    margin:0 0 16px !important;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
    text-align:left;
}

.water-level-card-metrics{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:auto;
}

.water-level-metric{
    padding:10px 11px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    text-align:left;
}

.water-level-metric span{
    display:block;
    margin-bottom:4px;
    color:var(--muted);
    font-size:10px;
}

.water-level-metric strong{
    display:block;
    font-size:14px;
    color:var(--text);
}

.water-level-empty{
    grid-column:1/-1;
    padding:36px 20px;
    text-align:center;
    border:1px dashed var(--border);
    border-radius:18px;
    color:var(--muted);
    background:var(--surface-soft);
}

html[data-theme="light"] .water-level-card{
    background:var(--card-solid,#fff) !important;
}

@media(max-width:900px){
    .water-levels-section{
        width:min(760px, calc(100% - 28px)) !important;
    }

    .water-levels-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:650px){
    .water-levels-section{
        width:calc(100% - 20px) !important;
        max-width:none !important;
        padding:30px 0 50px !important;
    }

    .water-levels-header h2{
        font-size:26px !important;
    }

    .water-levels-header p{
        font-size:13px;
    }

    .water-levels-header-actions{
        width:100%;
        justify-content:center;
    }

    .water-levels-refresh{
        width:auto !important;
        align-self:center;
    }

    .water-levels-refresh-info-popover{
        right:50%;
        transform:translateX(50%);
    }

    .water-levels-filters{
        gap:7px;
    }

    .water-levels-filters button{
        padding:8px 12px !important;
        font-size:12px;
    }

    .water-levels-search-wrap{
        width:100% !important;
    }

    .water-levels-search-wrap input{
        text-align:left;
    }

    .water-levels-grid{
        grid-template-columns:1fr !important;
    }

    .water-level-card{
        min-height:0;
    }
}



/* =========================================================
   WATER LEVELS — COPERNICUS DATA UI
   Scoped only to Water Levels.
========================================================= */

.water-levels-source-row{
    width:100%;
    max-width:920px;
    margin:0 auto 18px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.water-levels-source-row span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 11px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-soft);
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}

.water-levels-dataset-grid{
    width:100%;
    max-width:1040px;
    margin:0 auto 22px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.water-levels-dataset-card{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:10px;
    row-gap:3px;
    align-items:center;
    padding:13px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-soft);
}

.water-levels-dataset-icon{
    grid-row:1 / span 2;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(124,92,255,.10);
    border:1px solid rgba(124,92,255,.18);
    font-size:18px;
}

.water-levels-dataset-card strong{
    display:block;
    min-width:0;
    font-size:12px;
    line-height:1.25;
}

.water-levels-dataset-card small{
    display:block;
    color:var(--muted);
    font-size:10px;
    line-height:1.3;
}

.water-levels-dataset-card em{
    grid-column:2;
    color:var(--muted2,var(--muted));
    font-size:9px;
    font-style:normal;
    font-weight:800;
}

.water-levels-search-hint{
    display:block;
    margin-left:auto;
    color:var(--muted2,var(--muted));
    font-size:10px;
    font-weight:500;
}

.water-levels-card-title h3{
    margin:0 0 4px;
    font-size:17px;
}

.water-levels-card-title p{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.45;
}

.water-level-card-top{
    position:relative;
}

.water-level-card-type{
    margin-left:auto;
    margin-right:auto;
    padding:4px 8px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--muted);
    background:rgba(255,255,255,.025);
    font-size:9px;
    font-weight:800;
}

.water-level-card-hero{
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:8px;
    margin:15px 0 10px;
}

.water-level-card-hero > div{
    min-width:0;
    padding:11px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(124,92,255,.045);
}

.water-level-card-hero span{
    display:block;
    color:var(--muted);
    font-size:9px;
    line-height:1.25;
}

.water-level-card-hero strong{
    display:block;
    margin-top:4px;
    font-size:22px;
    line-height:1;
}

.water-level-card-hero small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:8px;
    line-height:1.25;
}

.water-level-card-meta{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-top:9px;
    color:var(--muted2,var(--muted));
    font-size:9px;
    line-height:1.3;
}

.water-level-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:12px;
}

.water-level-action{
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    padding:9px 10px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.water-level-action:hover{
    border-color:rgba(124,92,255,.48);
    background:rgba(124,92,255,.08);
    transform:translateY(-1px);
}

.water-level-action.secondary{
    color:var(--muted);
}

.water-levels-attribution{
    width:100%;
    max-width:1040px;
    margin:22px auto 0;
    padding-top:14px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.water-levels-attribution div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.water-levels-attribution strong{
    font-size:11px;
}

.water-levels-attribution span,
.water-levels-attribution a{
    color:var(--muted);
    font-size:10px;
}

.water-levels-attribution a{
    text-decoration:underline;
}

.water-levels-refresh.is-refreshing{
    animation:waterLevelsRefreshSpin .55s ease-in-out;
}

@keyframes waterLevelsRefreshSpin{
    50%{transform:rotate(2deg) scale(.98)}
}

.water-levels-back-up{
    position:fixed !important;
    right:max(8px, calc((100vw - 1180px) / 2 - 140px)) !important;
    top:50% !important;
    z-index:10050 !important;
    min-height:46px !important;
    padding:10px 16px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--surface-soft) !important;
    color:var(--text) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-50%) !important;
    transition:opacity .18s ease,visibility .18s ease,background .18s ease,border-color .18s ease,transform .18s ease !important;
}

.water-levels-back-up.visible{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.water-levels-back-up:hover{
    background:var(--surface-soft) !important;
    border-color:rgba(124,92,255,.48) !important;
    transform:translateY(-50%) scale(1.018) !important;
}

html[data-theme="light"] .water-levels-back-up{
    background:var(--card-solid,#fff) !important;
    color:var(--text) !important;
}

/* Hide Water Levels "Go back up" while Settings is open so it never overlaps the panel. */
html.settings-open .water-levels-back-up{
    display:none !important;
}

/* Water Levels "Go back up" — scale-specific desktop positioning. */
@media(min-width:701px){
    html[data-ui-scale="small"] .water-levels-back-up{
        right:max(24px, calc((100vw - 1040px) / 2 + 60px)) !important;
    }

    html[data-ui-scale="normal"] .water-levels-back-up,
    html:not([data-ui-scale]) .water-levels-back-up{
        right:max(24px, calc((100vw - 1040px) / 2 - 150px)) !important;
    }

    html[data-ui-scale="large"] .water-levels-back-up{
        right:max(8px, calc((100vw - 1180px) / 2 - 210px)) !important;
    }

    html[data-ui-scale="xl"] .water-levels-back-up{
        right:max(8px, calc((100vw - 1180px) / 2 - 310px)) !important;
    }
}

@media(max-width:700px){
    .water-levels-back-up{
        right:8px !important;
        min-height:46px !important;
        padding:10px 14px !important;
        border-radius:12px !important;
    }
}

.water-levels-detail-overlay{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(10px);
}

.water-levels-detail-overlay.open{
    display:flex;
}

.water-levels-detail-card{
    width:min(980px,100%);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    padding:20px;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--card-solid,var(--card));
    box-shadow:0 30px 90px rgba(0,0,0,.32);
}

.water-levels-detail-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.water-levels-detail-title{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.water-levels-detail-icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(124,92,255,.11);
    border:1px solid rgba(124,92,255,.20);
    font-size:25px;
}

.water-levels-detail-title > div:last-child{
    min-width:0;
}

.water-levels-detail-title span{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}

.water-levels-detail-title h2{
    margin:4px 0 0;
    font-size:25px;
    line-height:1.15;
}

.water-levels-detail-close{
    width:38px;
    height:38px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    cursor:pointer;
    font-size:17px;
}

.water-levels-detail-status{
    display:inline-flex;
    margin:16px 0;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(124,92,255,.10);
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}

.water-levels-detail-hero{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:10px;
    margin-bottom:16px;
}

.water-levels-detail-hero > div{
    min-width:0;
    padding:15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-soft);
}

.water-levels-detail-hero span{
    display:block;
    color:var(--muted);
    font-size:10px;
}

.water-levels-detail-hero strong{
    display:block;
    margin-top:5px;
    font-size:25px;
}

.water-levels-detail-hero small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

.water-levels-detail-section,
.water-levels-detail-history{
    margin-top:14px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(255,255,255,.02);
}

.water-levels-detail-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.water-levels-detail-section-head strong{
    font-size:12px;
}

.water-levels-detail-section-head span{
    color:var(--muted);
    font-size:9px;
    line-height:1.4;
    text-align:right;
}

.water-levels-detail-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.water-levels-detail-metrics .water-level-metric{
    min-width:0;
}

.water-levels-history-controls{
    display:flex;
    gap:6px;
    margin-bottom:10px;
}

.water-levels-history-controls button{
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-soft);
    color:var(--muted);
    padding:7px 10px;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}

.water-levels-history-controls button:hover{
    color:var(--text);
    border-color:rgba(124,92,255,.42);
}

.water-levels-history-controls button.active{
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-color:transparent;
}

.water-levels-history-chart{
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed var(--border);
    border-radius:13px;
    background:var(--surface-soft);
}

.water-levels-history-placeholder{
    max-width:420px;
    padding:30px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
}

.water-levels-history-placeholder span{
    font-size:26px;
}

.water-levels-history-placeholder strong{
    font-size:13px;
}

.water-levels-history-placeholder small{
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
}

.water-levels-detail-footer{
    margin-top:14px;
    color:var(--muted);
    font-size:9px;
    line-height:1.4;
}


.water-levels-detail-nav{
    position:fixed;
    top:50%;
    z-index:1202;
    width:62px;
    height:82px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card-solid,var(--card));
    color:var(--text);
    box-shadow:0 14px 40px rgba(0,0,0,.24);
    cursor:pointer;
    transform:translateY(-50%);
    transition:background .16s ease,border-color .16s ease,opacity .16s ease;
}

.water-levels-detail-nav:hover,
.water-levels-detail-nav:focus-visible,
.water-levels-detail-nav:active,
.water-levels-detail-nav:disabled:hover{
    background:var(--surface-soft);
    border-color:rgba(124,92,255,.42);
    transform:translate3d(0,-50%,0) !important;
}

.water-levels-detail-nav:disabled{
    opacity:.28;
    cursor:default;
}



.water-levels-detail-nav-prev{
    left:calc(50% - 560px);
}

.water-levels-detail-nav-next{
    right:calc(50% - 560px);
}

/* Keep the navigation controls at the same visual gap from the detail card at each accessibility scale. */
html[data-ui-scale="large"] .water-levels-detail-nav-prev{
    left:calc(50% - 440px);
}

html[data-ui-scale="large"] .water-levels-detail-nav-next{
    right:calc(50% - 440px);
}

html[data-ui-scale="xl"] .water-levels-detail-nav-prev{
    left:calc(50% - 388px);
}

html[data-ui-scale="xl"] .water-levels-detail-nav-next{
    right:calc(50% - 388px);
}

.water-levels-detail-nav-key{
    order:1;
    font-size:.82rem;
    line-height:1;
    font-weight:800;
    color:var(--muted);
}

.water-levels-detail-nav-chevron{
    order:2;
    font-size:34px;
    line-height:.75;
    font-weight:400;
}

.water-levels-detail-nav-main{
    order:3;
    font-size:22px;
    line-height:.8;
    font-weight:300;
}

@media(max-width:1080px){
    .water-levels-detail-nav-prev{left:8px}
    .water-levels-detail-nav-next{right:8px}
}

@media(max-width:650px){
    .water-levels-detail-nav{
        width:48px;
        height:66px;
        border-radius:14px;
    }

    .water-levels-detail-nav-prev{left:3px}
    .water-levels-detail-nav-next{right:3px}

    .water-levels-detail-nav-main{font-size:16px}
    .water-levels-detail-nav-chevron{font-size:24px}
    .water-levels-detail-nav-key{font-size:.58rem}
}

@media(max-width:420px){
    .water-levels-detail-nav{
        width:42px;
        height:60px;
    }

    .water-levels-detail-nav-main{font-size:15px}
    .water-levels-detail-nav-chevron{font-size:22px}
    .water-levels-detail-nav-key{display:none}
}

html.water-levels-modal-open,
body.water-levels-modal-open{
    overflow:hidden;
}

@media(max-width:900px){
    .water-levels-dataset-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .water-levels-detail-hero{
        grid-template-columns:1fr 1fr;
    }

    .water-levels-detail-hero > div:last-child{
        grid-column:1/-1;
    }

    .water-levels-detail-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:650px){
    .water-levels-source-row{
        gap:6px;
    }

    .water-levels-source-row span{
        font-size:10px;
        padding:6px 9px;
    }

    .water-levels-dataset-grid{
        grid-template-columns:1fr;
    }

    .water-levels-results-row{
        text-align:center;
    }

    .water-levels-search-hint{
        margin:5px 0 0;
        line-height:1.4;
    }

    .water-level-card-hero{
        grid-template-columns:1fr 1fr;
    }

    .water-levels-attribution{
        align-items:flex-start;
        flex-direction:column;
    }

    .water-levels-detail-card{
        padding:14px;
        border-radius:18px;
        max-height:calc(100dvh - 20px);
    }

    .water-levels-detail-title h2{
        font-size:21px;
    }

    .water-levels-detail-hero{
        grid-template-columns:1fr;
    }

    .water-levels-detail-hero > div:last-child{
        grid-column:auto;
    }

    .water-levels-detail-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .water-levels-detail-section-head{
        flex-direction:column;
    }

    .water-levels-detail-section-head span{
        text-align:left;
    }
}

/* =========================================================
   WATER LEVELS — LIVE CHART
========================================================= */

.water-levels-detail-history.is-focused{
    border-color:rgba(124,92,255,.55) !important;
    box-shadow:0 0 0 3px rgba(124,92,255,.10);
    transition:border-color .2s ease,box-shadow .2s ease;
}

.water-levels-chart-inner{
    width:100%;
    padding:12px 14px 10px;
    box-sizing:border-box;
}

.water-levels-chart-svg{
    width:100%;
    height:auto;
    min-height:220px;
    display:block;
    color:var(--text);
}

.water-levels-chart-summary{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
}

@media(max-width:650px){
    .water-levels-chart-inner{
        padding:8px 7px 9px;
    }

    .water-levels-chart-summary{
        flex-direction:column;
        gap:3px;
    }
}


/* =========================================================
   WATER LEVELS — ACCESSIBILITY SCALE OPTIMIZATION
   The whole site uses body.zoom for A-, A, A+ and A++.
   Keep the Water Levels detail modal compact inside the
   remaining viewport at every accessibility scale.
========================================================= */

.water-levels-detail-overlay{
    padding:
        max(10px, calc(18px / var(--ui-scale,1)))
        !important;
}

.water-levels-detail-card{
    width:min(
        980px,
        calc(
            (100vw - 36px) /
            var(--ui-scale,1)
        )
    ) !important;
    max-height:
        calc(
            (100dvh - 36px) /
            var(--ui-scale,1)
        ) !important;
    padding:
        min(
            20px,
            calc(20px / var(--ui-scale,1))
        ) !important;
    box-sizing:border-box !important;
}

.water-levels-detail-head{
    gap:12px;
}

.water-levels-detail-title h2{
    font-size:23px;
}

.water-levels-detail-status{
    margin:12px 0;
    padding:6px 9px;
    max-width:100%;
}

.water-levels-detail-hero{
    gap:8px;
    margin-bottom:12px;
}

.water-levels-detail-hero > div{
    padding:11px;
}

.water-levels-detail-hero strong{
    font-size:22px;
}

.water-levels-detail-section,
.water-levels-detail-history{
    margin-top:10px;
    padding:12px;
}

.water-levels-detail-metrics{
    gap:7px;
}

.water-level-metric{
    padding:8px 9px;
}

.water-level-metric span{
    margin-bottom:3px;
    font-size:9px;
}

.water-level-metric strong{
    font-size:13px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.water-levels-history-chart{
    min-height:190px;
}

.water-levels-chart-svg{
    min-height:190px;
}

.water-levels-detail-footer{
    margin-top:10px;
}

/* A+ */
html[data-ui-scale="large"] .water-levels-detail-overlay{
    align-items:center;
    padding:12px !important;
}

html[data-ui-scale="large"] .water-levels-detail-card{
    width:min(
        820px,
        calc(
            (100vw - 48px) /
            var(--ui-scale,1)
        )
    ) !important;
    max-height:
        calc(
            (100dvh - 48px) /
            var(--ui-scale,1)
        ) !important;
    padding:12px !important;
    border-radius:16px;
}

html[data-ui-scale="large"] .water-levels-detail-title h2{
    font-size:20px;
}

html[data-ui-scale="large"] .water-levels-detail-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
    font-size:22px;
}

html[data-ui-scale="large"] .water-levels-detail-hero strong{
    font-size:20px;
}

html[data-ui-scale="large"] .water-levels-detail-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

/* A++ */
html[data-ui-scale="xl"] .water-levels-detail-overlay{
    align-items:center;
    padding:10px !important;
}

html[data-ui-scale="xl"] .water-levels-detail-card{
    width:min(
        780px,
        calc(
            (100vw - 48px) /
            var(--ui-scale,1)
        )
    ) !important;
    max-height:
        calc(
            (100dvh - 48px) /
            var(--ui-scale,1)
        ) !important;
    padding:10px !important;
    border-radius:14px;
}

html[data-ui-scale="xl"] .water-levels-detail-head{
    gap:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-title{
    gap:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:12px;
    font-size:20px;
}

html[data-ui-scale="xl"] .water-levels-detail-title span{
    font-size:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-title h2{
    margin-top:2px;
    font-size:19px;
}

html[data-ui-scale="xl"] .water-levels-detail-close{
    width:34px;
    height:34px;
    font-size:15px;
}

html[data-ui-scale="xl"] .water-levels-detail-status{
    margin:9px 0;
    padding:5px 8px;
    font-size:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-hero{
    gap:6px;
    margin-bottom:8px;
}

html[data-ui-scale="xl"] .water-levels-detail-hero > div{
    padding:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-hero span{
    font-size:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-hero strong{
    margin-top:3px;
    font-size:18px;
}

html[data-ui-scale="xl"] .water-levels-detail-hero small{
    margin-top:2px;
    font-size:8px;
}

html[data-ui-scale="xl"] .water-levels-detail-section,
html[data-ui-scale="xl"] .water-levels-detail-history{
    margin-top:7px;
    padding:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-section-head{
    margin-bottom:7px;
    gap:8px;
}

html[data-ui-scale="xl"] .water-levels-detail-section-head strong{
    font-size:11px;
}

html[data-ui-scale="xl"] .water-levels-detail-section-head span{
    font-size:8px;
}

html[data-ui-scale="xl"] .water-levels-detail-metrics{
    gap:5px;
}

html[data-ui-scale="xl"] .water-level-metric{
    padding:7px 8px;
    border-radius:9px;
}

html[data-ui-scale="xl"] .water-level-metric span{
    font-size:8px;
}

html[data-ui-scale="xl"] .water-level-metric strong{
    font-size:12px;
}

html[data-ui-scale="xl"] .water-levels-history-controls{
    margin-bottom:7px;
}

html[data-ui-scale="xl"] .water-levels-history-controls button{
    padding:6px 8px;
    font-size:9px;
}

html[data-ui-scale="xl"] .water-levels-history-chart,
html[data-ui-scale="xl"] .water-levels-chart-svg{
    min-height:160px;
}

html[data-ui-scale="xl"] .water-levels-chart-inner{
    padding:7px 8px 6px;
}

html[data-ui-scale="xl"] .water-levels-chart-summary{
    font-size:9px;
}

html[data-ui-scale="xl"] .water-levels-detail-footer{
    margin-top:7px;
    font-size:8px;
}

/* A-, A and A+ on phones share the same compact modal geometry. */
@media(max-width:650px){
    .water-levels-detail-overlay{
        padding:8px !important;
        align-items:center;
    }

    .water-levels-detail-card{
        max-height:80dvh !important;
        overflow:auto !important;
        width:
            calc(
                (100vw - 28px) /
                var(--ui-scale,1)
            ) !important;
        max-width:none !important;
        max-height:
            calc(
                (100dvh - 28px) /
                var(--ui-scale,1)
            ) !important;
        padding:9px !important;
        border-radius:14px !important;
    }

    .water-levels-detail-head{
        gap:8px;
    }

    .water-levels-detail-title{
        gap:8px;
    }

    .water-levels-detail-title h2{
        font-size:19px !important;
        line-height:1.1;
    }

    .water-levels-detail-icon{
        width:44px !important;
        height:44px !important;
        flex-basis:44px !important;
        border-radius:12px !important;
        font-size:20px !important;
    }

    .water-levels-detail-close{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px;
    }

    .water-levels-detail-status{
        margin:9px 0 !important;
        font-size:9px;
        line-height:1.25;
    }

    .water-levels-detail-hero{
        grid-template-columns:1fr 1fr !important;
        gap:6px !important;
        margin-bottom:8px;
    }

    .water-levels-detail-hero > div{
        padding:9px !important;
    }

    .water-levels-detail-hero > div:last-child{
        grid-column:1/-1;
    }

    .water-levels-detail-hero strong{
        font-size:18px !important;
    }

    .water-levels-detail-section,
    .water-levels-detail-history{
        padding:9px !important;
        margin-top:7px !important;
        border-radius:12px;
    }

    .water-levels-detail-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:5px !important;
    }

    .water-level-metric{
        padding:7px 8px !important;
    }

    .water-level-metric span{
        font-size:8px;
    }

    .water-level-metric strong{
        font-size:12px;
        line-height:1.2;
    }

    .water-levels-detail-section-head{
        margin-bottom:7px;
    }

    .water-levels-history-controls{
        margin-bottom:7px;
    }

    .water-levels-history-controls button{
        padding:6px 8px;
        font-size:9px;
    }

    .water-levels-history-chart{
        min-height:155px !important;
    }

    .water-levels-chart-svg{
        min-height:155px !important;
    }

    .water-levels-chart-inner{
        padding:6px 7px 6px !important;
    }

    .water-levels-chart-summary{
        font-size:9px;
    }

    .water-levels-detail-footer{
        font-size:8px;
        margin-top:7px;
    }
}

/* Extra compaction for A++ phones. */
@media(max-width:650px){
    html[data-ui-scale="xl"] .water-levels-detail-overlay{
        padding:8px !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-card{
        width:
            calc(
                (100vw - 28px) /
                var(--ui-scale,1)
            ) !important;
        max-height:
            calc(
                (100dvh - 28px) /
                var(--ui-scale,1)
            ) !important;
        padding:9px !important;
        border-radius:14px !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-title h2{
        font-size:17px !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-icon{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
        font-size:18px !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-hero strong{
        font-size:16px !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-metrics{
        gap:4px !important;
    }

    html[data-ui-scale="xl"] .water-level-metric{
        padding:6px 7px !important;
    }

    html[data-ui-scale="xl"] .water-level-metric strong{
        font-size:11px !important;
    }

    html[data-ui-scale="xl"] .water-levels-history-chart,
    html[data-ui-scale="xl"] .water-levels-chart-svg{
        min-height:135px !important;
    }
}


/* =========================================================
   SHIP TRACKING — MODERN UI
   Scoped only to Ship Tracking.
========================================================= */

.ship-tracking-section{
    display:block;
    overflow-anchor:none !important;
    width:min(1040px,calc(100% - 32px)) !important;
    max-width:1040px !important;
    margin:0 auto !important;
    padding:42px 0 64px !important;
    box-sizing:border-box !important;
    color:var(--text);
}
.ship-tracking-header{width:100%;max-width:860px;margin:0 auto 20px !important;display:flex;flex-direction:column;align-items:center;text-align:center}
.ship-tracking-badge{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border:1px solid rgba(124,92,255,.30);border-radius:999px;background:rgba(124,92,255,.10);color:var(--text);font-size:12px;font-weight:800}
.ship-tracking-header h2{margin:10px 0 7px !important;font-size:clamp(30px,4vw,42px) !important;line-height:1.08;letter-spacing:-1px}
.ship-tracking-header p{margin:0 auto;max-width:720px;color:var(--muted);line-height:1.55}
.ship-tracking-source-row{width:100%;max-width:920px;margin:0 auto 18px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.ship-tracking-source-row span{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:11px;font-weight:800}
.ship-tracking-dataset-grid{width:100%;max-width:1040px;margin:0 auto 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ship-tracking-dataset-card{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.ship-tracking-dataset-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(124,92,255,.10);border:1px solid rgba(124,92,255,.18);font-size:18px}
.ship-tracking-dataset-card strong{display:block;min-width:0;font-size:12px;line-height:1.25}
.ship-tracking-dataset-card small{display:block;color:var(--muted);font-size:10px;line-height:1.3;margin-top:3px}
.ship-tracking-toolbar{width:100%;max-width:900px;margin:0 auto 14px !important;display:flex;flex-direction:column;align-items:center;gap:12px}
.ship-tracking-filters{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}
.ship-tracking-filters button{border:1px solid var(--border);color:var(--muted);background:var(--surface-soft);border-radius:11px;padding:8px 11px;font-size:12px;font-weight:800;cursor:pointer;transition:.2s}
.ship-tracking-filters button:hover,.ship-tracking-filters button.active{color:var(--text);border-color:rgba(124,92,255,.65);background:rgba(124,92,255,.1);box-shadow:0 0 0 1px rgba(56,189,248,.12) inset}
.ship-tracking-search-wrap{width:min(100%,520px) !important;min-width:0 !important;display:flex;align-items:center;gap:9px;padding:11px 14px;margin:0 auto;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);color:var(--muted);box-shadow:0 10px 30px rgba(0,0,0,.08);box-sizing:border-box}
.ship-tracking-search-wrap:focus-within{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 3px rgba(124,92,255,.10)}
.ship-tracking-search-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;text-align:center}
.ship-tracking-search-wrap input::placeholder{color:var(--muted);opacity:.9}
.ship-tracking-status-row{width:100%;max-width:1040px;margin:0 auto 14px !important;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;text-align:center;color:var(--muted);font-size:12px;font-weight:800}
.ship-tracking-status-row > span{display:inline-flex;align-items:center;justify-content:center}
.ship-tracking-status-hint{color:var(--muted2,var(--muted));font-size:10px;font-weight:500}
.ship-tracking-map-card{width:100%;min-height:330px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:18px;background:var(--card-solid,var(--card));box-shadow:0 14px 40px rgba(0,0,0,.12);overflow:hidden}
.ship-tracking-map-placeholder{width:min(620px,calc(100% - 36px));margin:32px auto;padding:34px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed var(--border);border-radius:16px;background:var(--surface-soft);text-align:center}
.ship-tracking-map-icon{font-size:42px;line-height:1}
.ship-tracking-map-placeholder strong{font-size:18px}
.ship-tracking-map-placeholder span{max-width:520px;color:var(--muted);font-size:12px;line-height:1.5}
.ship-tracking-grid{width:100%;max-width:1040px;margin:0 auto !important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ship-tracking-empty{grid-column:1/-1;min-height:190px;padding:34px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1px dashed var(--border);border-radius:18px;color:var(--muted);background:var(--surface-soft)}
.ship-tracking-empty-icon{font-size:32px;line-height:1}
.ship-tracking-empty strong{color:var(--text);font-size:14px}
.ship-tracking-empty span{max-width:620px;font-size:11px;line-height:1.5}
.ship-tracking-attribution{width:100%;max-width:1040px;margin:18px auto 0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.ship-tracking-attribution > div{min-width:0;display:flex;flex-direction:column;gap:3px}
.ship-tracking-attribution strong{font-size:11px}
.ship-tracking-attribution span{color:var(--muted);font-size:10px;line-height:1.4}
.ship-tracking-attribution a{flex:0 0 auto;color:var(--text);font-size:11px;font-weight:800;text-decoration:none}
.ship-tracking-attribution a:hover{text-decoration:underline}
@media(max-width:900px){.ship-tracking-section{width:min(760px,calc(100% - 28px)) !important}.ship-tracking-dataset-grid,.ship-tracking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.ship-tracking-section{width:calc(100% - 20px) !important;max-width:none !important;padding:30px 0 50px !important}.ship-tracking-header h2{font-size:26px !important}.ship-tracking-header p{font-size:13px}.ship-tracking-dataset-grid,.ship-tracking-grid{grid-template-columns:1fr}.ship-tracking-search-wrap input{text-align:left}.ship-tracking-map-card{min-height:270px}.ship-tracking-attribution{flex-direction:column;align-items:flex-start}}

html[data-theme="light"] .ship-tracking-map-card{background:var(--card-solid,#fff)}


/* =========================================================
   SHIP TRACKING — LIVE MAP / VESSEL CARDS
========================================================= */

.ship-tracking-map{
    position:relative;
    z-index:0;
    isolation:isolate;
    contain:layout paint;
    width:100%;
    min-height:460px;
    height:460px;
    background:var(--surface-soft);
}

.ship-tracking-map .leaflet-container{
    font:inherit;
    background:var(--surface-soft);
}

/* Single interactive canvas replaces hundreds of DOM vessel markers. */
.ship-tracking-vessel-canvas{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    outline:none;
    pointer-events:auto;
    touch-action:none;
}

.ship-tracking-canvas-tooltip{
    position:absolute;
    z-index:960;
    max-width:220px;
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:9px;
    background:rgba(11,17,31,.96);
    color:var(--text);
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    pointer-events:none;
    white-space:nowrap;
}

.ship-tracking-canvas-tooltip strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:10px;
    line-height:1.2;
}

.ship-tracking-canvas-tooltip span{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:8px;
    line-height:1.2;
}

html[data-theme="light"] .ship-tracking-canvas-tooltip{
    background:rgba(255,255,255,.97);
}

.ship-tracking-map .leaflet-control-zoom a{
    color:#111827;
}

.ship-tracking-map-switcher{
    margin-top:8px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:max-content;
    gap:6px !important;
}

.ship-tracking-map-switcher-btn{
    display:block;
    width:112px;
    min-width:112px;
    min-height:31px;
    padding:5px 9px;
    border:1px solid rgba(17,24,39,.22);
    border-radius:8px;
    background:rgba(255,255,255,.95);
    color:#111827;
    box-shadow:0 1px 5px rgba(0,0,0,.16);
    font:inherit;
    font-size:11px;
    font-weight:700;
    line-height:1.15;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.ship-tracking-map-switcher-btn:hover{
    border-color:#6366f1;
    background:#f5f7ff;
}

.ship-tracking-map-switcher-btn.active{
    border-color:#6366f1;
    background:#eef2ff;
    color:#4338ca;
}

.ship-tracking-map-switcher-btn:active{
    transform:translateY(1px);
}

html[data-theme="dark"] .ship-tracking-map-switcher-btn{
    border-color:rgba(255,255,255,.18);
    background:rgba(15,23,42,.95);
    color:#e5e7eb;
}

html[data-theme="dark"] .ship-tracking-map-switcher-btn:hover{
    border-color:#818cf8;
    background:#172036;
}

.ship-tracking-vessel-card{
    min-width:0;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--card-solid,var(--card));
    box-shadow:0 12px 30px rgba(0,0,0,.09);
}

.ship-tracking-vessel-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.ship-tracking-vessel-type{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border:1px solid rgba(124,92,255,.24);
    border-radius:999px;
    background:rgba(124,92,255,.08);
    color:var(--muted);
    font-size:9px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.ship-tracking-vessel-card h3{
    margin:7px 0 0;
    font-size:18px;
    line-height:1.2;
}

.ship-tracking-vessel-live{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(34,197,94,.10);
    color:#16a34a;
    font-size:9px;
    font-weight:900;
    white-space:nowrap;
}

.ship-tracking-vessel-metrics,
.ship-tracking-detail-grid{
    margin-top:15px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.ship-tracking-metric{
    min-width:0;
    padding:10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-soft);
}

.ship-tracking-metric span{
    display:block;
    color:var(--muted);
    font-size:9px;
    line-height:1.2;
}

.ship-tracking-metric strong{
    display:block;
    margin-top:4px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-size:11px;
    line-height:1.25;
}

.ship-tracking-vessel-meta{
    margin-top:11px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.ship-tracking-vessel-meta span{
    max-width:100%;
    padding:5px 7px;
    border-radius:8px;
    background:var(--surface-soft);
    color:var(--muted);
    font-size:9px;
    line-height:1.2;
}

.ship-tracking-vessel-actions,
.ship-tracking-detail-actions{
    margin-top:13px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.ship-tracking-action-btn{
    border:1px solid rgba(124,92,255,.32);
    border-radius:10px;
    padding:8px 11px;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    transition:.2s ease;
}

.ship-tracking-action-btn:hover{
    border-color:rgba(124,92,255,.76);
    transform:translateY(-1px);
}

.ship-tracking-action-secondary{
    border-color:var(--border);
}

.ship-tracking-vessel-time{
    margin-left:auto;
    color:var(--muted);
    font-size:9px;
}

.ship-tracking-detail{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(10px);
    overflow:hidden;
}

.ship-tracking-detail.open{
    display:flex;
}

.ship-tracking-detail-card{
    width:min(980px,100%);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    padding:20px;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--card-solid,var(--card));
    box-shadow:0 30px 90px rgba(0,0,0,.32);
}

body.ship-tracking-modal-open{
    overflow:hidden;
}

.ship-tracking-detail-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.ship-tracking-detail-head h3{
    margin:8px 0 4px;
    font-size:22px;
    line-height:1.2;
}

.ship-tracking-detail-subtitle{
    color:var(--muted);
    font-size:10px;
}

.ship-tracking-detail-close{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    cursor:pointer;
    font-size:15px;
}

.ship-tracking-detail-note,
.ship-tracking-track-note{
    color:var(--muted);
    font-size:10px;
    line-height:1.45;
}

.ship-tracking-detail-loading{
    min-height:130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    color:var(--muted);
}

.ship-tracking-detail-loading span{
    font-size:30px;
}

.ship-tracking-detail-loading strong{
    color:var(--text);
    font-size:12px;
}

@media(max-width:650px){
    .ship-tracking-overlap-picker{
        width:min(340px,calc(100% - 20px));
        max-height:calc(100% - 20px);
        padding:10px;
    }

    .ship-tracking-overlap-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:300px;
    }

    .ship-tracking-map{
        min-height:320px;
        height:320px;
    }

    .ship-tracking-vessel-card{
        padding:15px;
    }

    .ship-tracking-vessel-card h3{
        font-size:16px;
    }

    .ship-tracking-vessel-metrics,
    .ship-tracking-detail-grid{
        grid-template-columns:1fr;
    }

    .ship-tracking-vessel-time{
        width:100%;
        margin-left:0;
    }

    .ship-tracking-detail{
        padding:12px;
    }

    .ship-tracking-detail-card{
        max-height:calc(100dvh - 24px);
        padding:16px;
        border-radius:18px;
    }
}


/* =========================================================
   SHIP TRACKING — FULL WORLD VECTOR MAP
========================================================= */

.ship-tracking-vessel-arrow-wrap{
    background:transparent !important;
    border:0 !important;
    width:auto !important;
    height:auto !important;
}

.ship-tracking-vessel-arrow{
    display:block;
    width:20px;
    height:20px;
    line-height:20px;
    transform:rotate(var(--ship-arrow-rotation,-90deg));
    transform-origin:50% 50%;
    color:var(--primary2,var(--primary));
    font-family:Arial,sans-serif;
    font-size:16px;
    font-weight:900;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
    filter:drop-shadow(0 1px 1px rgba(255,255,255,.28));
    pointer-events:auto;
}

.ship-tracking-vessel-arrow.is-selected{
    width:24px;
    height:24px;
    line-height:24px;
    font-size:20px;
    color:var(--primary,var(--primary2));
    text-shadow:0 1px 3px rgba(0,0,0,.55);
}

.ship-tracking-overlap-picker{
    position:absolute;
    z-index:950;
    box-sizing:border-box;
    width:min(360px,calc(100% - 24px));
    max-height:min(430px,calc(100% - 24px));
    padding:11px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card-solid,var(--card));
    color:var(--text);
    box-shadow:0 20px 50px rgba(0,0,0,.28);
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
}

.ship-tracking-overlap-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px;
    flex:0 0 auto;
}

.ship-tracking-overlap-head > div{
    min-width:0;
}

.ship-tracking-overlap-head strong{
    display:block;
    font-size:11px;
    line-height:1.3;
}

.ship-tracking-overlap-head span{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:9px;
    line-height:1.3;
}

.ship-tracking-overlap-close{
    flex:0 0 auto;
    width:28px;
    height:28px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-soft);
    color:var(--text);
    cursor:pointer;
    font-size:13px;
}

.ship-tracking-overlap-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    min-height:0;
    max-height:330px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-gutter:stable;
    padding-right:4px;
}

.ship-tracking-overlap-item{
    min-width:0;
    min-height:64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:7px 4px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    cursor:pointer;
    font:inherit;
}

.ship-tracking-overlap-item:hover,
.ship-tracking-overlap-item:focus-visible{
    border-color:rgba(124,92,255,.76);
    outline:none;
}

.ship-tracking-overlap-arrow{
    display:block;
    width:22px;
    height:22px;
    line-height:22px;
    transform:rotate(var(--ship-arrow-rotation,-90deg));
    transform-origin:50% 50%;
    color:var(--primary2,var(--primary));
    font-family:Arial,sans-serif;
    font-size:18px;
    font-weight:900;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.ship-tracking-overlap-name{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-size:8px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
}

.ship-tracking-overlap-mmsi{
    color:var(--muted);
    font-size:7px;
    line-height:1.1;
}

.ship-tracking-map{
    background:#9fd3ea !important;
}

.ship-tracking-map .leaflet-container{
    background:#9fd3ea !important;
}


/* =========================================================
   MOBILE / ACCESSIBILITY COMPACTION
   Admin, Water Levels details/history and Ship Tracking only.
========================================================= */

@media(max-width:760px){
    .admin-panel-overlay{
        padding:7px !important;
    }

    .admin-panel-card{
        width:calc(100vw - 14px) !important;
        max-width:none !important;
        max-height:calc(100dvh - 14px) !important;
        padding:12px !important;
        border-radius:16px !important;
    }

    .admin-panel-head{
        gap:8px;
    }

    .admin-panel-head-copy h3{
        font-size:20px;
    }

    .admin-panel-head-copy p{
        font-size:11px;
    }

    .admin-panel-content{
        min-height:0;
    }

    .admin-panel-section-head{
        gap:8px;
        margin-bottom:10px;
    }

    .admin-panel-back-button{
        width:32px;
        height:32px;
        font-size:20px;
        border-radius:9px;
    }

    .admin-panel-section-heading{
        gap:7px;
    }

    .admin-panel-section-heading > span{
        font-size:18px;
    }

    .admin-panel-section-heading h4{
        font-size:17px;
    }

    .admin-panel-section-heading p{
        font-size:10px;
    }

    .admin-panel-section-grid{
        gap:9px;
        margin-top:10px;
    }

    .admin-panel-section-button{
        padding:11px;
        gap:9px;
        border-radius:13px;
    }

    .admin-panel-section-icon{
        width:36px;
        height:36px;
        border-radius:10px;
        font-size:17px;
    }

    .admin-panel-section-copy strong{
        font-size:12px;
    }

    .admin-panel-section-copy small{
        font-size:9px;
    }

    .admin-panel-section-arrow{
        font-size:21px;
    }

    .admin-panel-welcome{
        padding:12px;
        gap:9px;
    }

    .admin-panel-welcome-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
        border-radius:11px;
        font-size:18px;
    }

    .admin-panel-welcome-copy strong{
        font-size:13px;
    }

    .admin-panel-welcome-copy span{
        font-size:10px;
    }

    .admin-usage-summary-grid{
        gap:7px;
        margin-bottom:9px;
    }

    .admin-usage-summary-card{
        padding:10px;
        border-radius:12px;
    }

    .admin-usage-summary-card strong{
        font-size:19px;
        margin:3px 0 1px;
    }

    .admin-usage-summary-card span,
    .admin-usage-summary-card small{
        font-size:9px;
    }

    .admin-usage-note{
        gap:7px;
        margin-bottom:9px;
        padding:9px 10px;
    }

    .admin-usage-note strong{
        font-size:10px;
    }

    .admin-usage-note p{
        font-size:9px;
        line-height:1.4;
    }

    .admin-usage-toolbar{
        margin-bottom:8px;
        font-size:10px;
    }

    .admin-panel-inline-button{
        min-height:29px;
        padding:5px 8px;
        font-size:9px;
        border-radius:8px;
    }

    .admin-usage-grid{
        gap:8px;
    }

    .admin-usage-card{
        padding:10px;
        border-radius:13px;
    }

    .admin-usage-card-top{
        gap:7px;
    }

    .admin-usage-category{
        font-size:8px;
    }

    .admin-usage-card h5{
        font-size:13px;
    }

    .admin-usage-status{
        padding:4px 6px;
        font-size:8px;
    }

    .admin-usage-provider{
        min-height:0;
        margin-top:5px;
        font-size:9px;
        line-height:1.35;
    }

    .admin-usage-main-number{
        gap:4px;
        margin-top:7px;
    }

    .admin-usage-main-number strong{
        font-size:22px;
    }

    .admin-usage-main-number span,
    .admin-usage-remaining-detail{
        font-size:8px;
    }

    .admin-usage-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:5px;
        margin-top:8px;
    }

    .admin-usage-metrics > div{
        padding:7px 6px;
        border-radius:8px;
    }

    .admin-usage-metrics span{
        font-size:8px;
        line-height:1.2;
    }

    .admin-usage-metrics strong{
        font-size:11px;
    }

    .admin-usage-meta{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px;
        margin-top:8px;
        padding-top:8px;
    }

    .admin-usage-meta span,
    .admin-usage-meta strong{
        font-size:8px;
    }

    .admin-feedback-modern-list{
        gap:7px;
    }

    .admin-feedback-modern-item{
        padding:10px;
        border-radius:12px;
    }

    .admin-feedback-modern-head{
        margin-bottom:6px;
    }

    .admin-feedback-modern-type{
        font-size:10px;
    }

    .admin-feedback-modern-head time,
    .admin-feedback-modern-page{
        font-size:8px;
    }

    .admin-feedback-modern-message{
        font-size:11px;
        line-height:1.45;
    }

    .admin-panel-empty,
    .admin-panel-error{
        min-height:170px;
        padding:16px;
    }
}

@media(max-width:650px){
    /* Water Levels detail/history */
    .water-levels-detail-card{
        width:calc((100vw - 12px) / var(--ui-scale,1)) !important;
        max-width:none !important;
        max-height:calc((100dvh - 12px) / var(--ui-scale,1)) !important;
        padding:9px !important;
        border-radius:14px !important;
    }

    .water-levels-detail-title h2{
        font-size:17px !important;
    }

    .water-levels-detail-icon{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
        border-radius:11px !important;
        font-size:18px !important;
    }

    .water-levels-detail-close{
        width:32px !important;
        height:32px !important;
        flex-basis:32px !important;
    }

    .water-levels-detail-status{
        margin:7px 0 !important;
        padding:5px 7px !important;
        font-size:8px !important;
    }

    .water-levels-detail-hero{
        gap:5px !important;
        margin-bottom:6px !important;
    }

    .water-levels-detail-hero > div{
        padding:8px !important;
        border-radius:10px !important;
    }

    .water-levels-detail-hero strong{
        font-size:16px !important;
    }

    .water-levels-detail-section,
    .water-levels-detail-history{
        margin-top:6px !important;
        padding:8px !important;
        border-radius:11px !important;
    }

    .water-levels-detail-section-head{
        gap:5px !important;
        margin-bottom:6px !important;
    }

    .water-levels-detail-section-head strong{
        font-size:10px !important;
    }

    .water-levels-detail-section-head span{
        font-size:8px !important;
        line-height:1.3 !important;
    }

    .water-levels-detail-metrics{
        gap:4px !important;
    }

    .water-level-metric{
        padding:6px 7px !important;
        border-radius:8px !important;
    }

    .water-level-metric span{
        font-size:7px !important;
    }

    .water-level-metric strong{
        font-size:10px !important;
        line-height:1.15 !important;
    }

    .water-levels-history-controls{
        gap:4px !important;
        margin-bottom:5px !important;
    }

    .water-levels-history-controls button{
        padding:5px 7px !important;
        border-radius:8px !important;
        font-size:8px !important;
    }

    .water-levels-history-chart,
    .water-levels-chart-svg{
        min-height:135px !important;
    }

    .water-levels-chart-inner{
        padding:5px 6px !important;
    }

    .water-levels-chart-summary{
        font-size:8px !important;
    }

    .water-levels-detail-footer{
        margin-top:6px !important;
        font-size:7px !important;
    }

    /* Ship Tracking phone layout */
    .ship-tracking-section{
        width:calc((100vw - 12px) / var(--ui-scale,1)) !important;
        max-width:none !important;
        padding:22px 0 34px !important;
    }

    .ship-tracking-header{
        margin-bottom:12px !important;
    }

    .ship-tracking-header h2{
        font-size:23px !important;
        letter-spacing:-.5px !important;
    }

    .ship-tracking-header p{
        font-size:11px !important;
        line-height:1.4 !important;
    }

    .ship-tracking-source-row{
        gap:5px !important;
        margin-bottom:10px !important;
    }

    .ship-tracking-source-row span{
        padding:5px 7px !important;
        font-size:8px !important;
    }

    .ship-tracking-dataset-grid{
        gap:6px !important;
        margin-bottom:10px !important;
    }

    .ship-tracking-dataset-card{
        padding:9px !important;
        column-gap:7px !important;
        border-radius:11px !important;
    }

    .ship-tracking-dataset-icon{
        width:32px !important;
        height:32px !important;
        border-radius:9px !important;
        font-size:15px !important;
    }

    .ship-tracking-dataset-card strong{
        font-size:10px !important;
    }

    .ship-tracking-dataset-card small{
        font-size:8px !important;
        margin-top:2px !important;
    }

    .ship-tracking-toolbar{
        gap:8px !important;
        margin-bottom:9px !important;
    }

    .ship-tracking-filters{
        gap:5px !important;
    }

    .ship-tracking-filters button{
        padding:6px 8px !important;
        border-radius:9px !important;
        font-size:9px !important;
    }

    .ship-tracking-search-wrap{
        padding:8px 10px !important;
        border-radius:11px !important;
        gap:7px !important;
    }

    .ship-tracking-search-wrap input{
        font-size:11px !important;
    }

    .ship-tracking-status-row{
        margin-bottom:9px !important;
        gap:4px 7px !important;
        font-size:9px !important;
    }

    .ship-tracking-status-hint{
        font-size:8px !important;
    }

    .ship-tracking-map-card{
        min-height:245px !important;
        margin-bottom:10px !important;
        border-radius:13px !important;
    }

    .ship-tracking-map{
        min-height:280px !important;
        height:280px !important;
    }

    .ship-tracking-map-switcher-btn{
        width:96px !important;
        min-width:96px !important;
        min-height:28px !important;
        padding:4px 7px !important;
        font-size:9px !important;
    }

    .ship-tracking-grid{
        gap:9px !important;
    }

    .ship-tracking-vessel-card{
        padding:11px !important;
        border-radius:13px !important;
    }

    .ship-tracking-vessel-card h3{
        font-size:14px !important;
    }

    .ship-tracking-vessel-metrics,
    .ship-tracking-detail-grid{
        gap:5px !important;
        margin-top:9px !important;
    }

    .ship-tracking-metric{
        padding:7px 8px !important;
        border-radius:9px !important;
    }

    .ship-tracking-metric span{
        font-size:8px !important;
    }

    .ship-tracking-metric strong{
        font-size:10px !important;
    }

    .ship-tracking-vessel-actions,
    .ship-tracking-detail-actions{
        margin-top:8px !important;
        gap:5px !important;
    }

    .ship-tracking-action-btn{
        padding:6px 8px !important;
        border-radius:8px !important;
        font-size:9px !important;
    }

    .ship-tracking-vessel-time{
        font-size:8px !important;
    }

    .ship-tracking-detail{
        padding:6px !important;
    }

    .ship-tracking-detail-card{
        width:calc((100vw - 12px) / var(--ui-scale,1)) !important;
        max-width:none !important;
        max-height:calc((100dvh - 12px) / var(--ui-scale,1)) !important;
        padding:10px !important;
        border-radius:14px !important;
    }

    .ship-tracking-detail-head{
        gap:7px !important;
    }

    .ship-tracking-detail-head h3{
        margin-top:5px !important;
        font-size:17px !important;
    }

    .ship-tracking-detail-subtitle{
        font-size:8px !important;
    }

    .ship-tracking-detail-close{
        width:32px !important;
        height:32px !important;
        font-size:14px !important;
    }

    .ship-tracking-detail-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .ship-tracking-detail-note,
    .ship-tracking-track-note{
        font-size:8px !important;
        line-height:1.35 !important;
    }
}

@media(max-width:650px){
    html[data-ui-scale="large"] .admin-panel-card,
    html[data-ui-scale="xl"] .admin-panel-card{
        width:calc((100vw - 10px) / var(--ui-scale,1)) !important;
        max-height:calc((100dvh - 10px) / var(--ui-scale,1)) !important;
        padding:9px !important;
    }

    html[data-ui-scale="large"] .admin-usage-card,
    html[data-ui-scale="xl"] .admin-usage-card{
        padding:8px !important;
    }

    html[data-ui-scale="large"] .admin-usage-main-number strong{
        font-size:19px !important;
    }

    html[data-ui-scale="xl"] .admin-usage-main-number strong{
        font-size:17px !important;
    }

    html[data-ui-scale="large"] .admin-panel-section-button,
    html[data-ui-scale="xl"] .admin-panel-section-button{
        padding:9px !important;
    }

    html[data-ui-scale="large"] .water-levels-detail-card,
    html[data-ui-scale="xl"] .water-levels-detail-card{
        padding:8px !important;
        width:calc((100vw - 8px) / var(--ui-scale,1)) !important;
        max-height:calc((100dvh - 8px) / var(--ui-scale,1)) !important;
    }

    html[data-ui-scale="large"] .water-levels-history-chart,
    html[data-ui-scale="large"] .water-levels-chart-svg{
        min-height:120px !important;
    }

    html[data-ui-scale="xl"] .water-levels-history-chart,
    html[data-ui-scale="xl"] .water-levels-chart-svg{
        min-height:110px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-section,
    html[data-ui-scale="xl"] .ship-tracking-section{
        width:calc((100vw - 8px) / var(--ui-scale,1)) !important;
        padding-top:18px !important;
        padding-bottom:26px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-header h2{
        font-size:20px !important;
    }

    html[data-ui-scale="xl"] .ship-tracking-header h2{
        font-size:18px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-header p,
    html[data-ui-scale="xl"] .ship-tracking-header p{
        font-size:9px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-source-row span,
    html[data-ui-scale="xl"] .ship-tracking-source-row span{
        font-size:7px !important;
        padding:4px 6px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-dataset-card,
    html[data-ui-scale="xl"] .ship-tracking-dataset-card{
        padding:7px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-dataset-icon,
    html[data-ui-scale="xl"] .ship-tracking-dataset-icon{
        width:28px !important;
        height:28px !important;
        font-size:13px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-dataset-card strong{
        font-size:9px !important;
    }

    html[data-ui-scale="xl"] .ship-tracking-dataset-card strong{
        font-size:8px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-filters button,
    html[data-ui-scale="xl"] .ship-tracking-filters button{
        padding:5px 7px !important;
        font-size:8px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-search-wrap input,
    html[data-ui-scale="xl"] .ship-tracking-search-wrap input{
        font-size:10px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-map{
        height:260px !important;
        min-height:260px !important;
    }

    html[data-ui-scale="xl"] .ship-tracking-map{
        height:235px !important;
        min-height:235px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-vessel-card,
    html[data-ui-scale="xl"] .ship-tracking-vessel-card{
        padding:9px !important;
    }

    html[data-ui-scale="large"] .ship-tracking-detail-card,
    html[data-ui-scale="xl"] .ship-tracking-detail-card{
        width:calc((100vw - 8px) / var(--ui-scale,1)) !important;
        max-height:calc((100dvh - 8px) / var(--ui-scale,1)) !important;
        padding:8px !important;
    }
}


/* =========================================================
   WATER LEVELS — FINAL DETAIL/HISTORY MODAL SAFETY OVERRIDE
   Keep the modal centered and shorter than the viewport so
   the header and close button are always reachable.
   This affects Water Levels only.
========================================================= */

.water-levels-detail-overlay{
    align-items:center !important;
    justify-content:center !important;
}

.water-levels-detail-card{
    max-height:78dvh !important;
    overflow:auto !important;
}

html[data-ui-scale="large"] .water-levels-detail-card{
    width:min(820px,calc((100vw - 48px) / var(--ui-scale,1))) !important;
    max-height:76dvh !important;
}

html[data-ui-scale="xl"] .water-levels-detail-card{
    width:min(780px,calc((100vw - 48px) / var(--ui-scale,1))) !important;
    max-height:74dvh !important;
}

@media(max-width:650px){
    .water-levels-detail-overlay{
        align-items:center !important;
        padding:10px !important;
    }

    .water-levels-detail-card{
        width:calc((100vw - 20px) / var(--ui-scale,1)) !important;
        max-width:none !important;
        max-height:78dvh !important;
        overflow:auto !important;
        padding:9px !important;
    }

    html[data-ui-scale="large"] .water-levels-detail-card{
        width:calc((100vw - 20px) / var(--ui-scale,1)) !important;
        max-height:74dvh !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-card{
        width:calc((100vw - 20px) / var(--ui-scale,1)) !important;
        max-height:70dvh !important;
    }
}


/* FINAL WATER LEVELS A+ / A++ COMPACT OVERRIDE
 * Keep the detail/history modal visibly smaller than the surrounding
 * accessibility-scaled page while preserving centering and internal scrolling.
 */
html[data-ui-scale="large"] .water-levels-detail-card{
    transform:scale(.90) !important;
    transform-origin:center center !important;
    max-height:70dvh !important;
}

html[data-ui-scale="xl"] .water-levels-detail-card{
    transform:scale(.82) !important;
    transform-origin:center center !important;
    max-height:65dvh !important;
}

@media(max-width:650px){
    html[data-ui-scale="large"] .water-levels-detail-card{
        transform:scale(.88) !important;
        transform-origin:center center !important;
        max-height:68dvh !important;
    }

    html[data-ui-scale="xl"] .water-levels-detail-card{
        transform:scale(.80) !important;
        transform-origin:center center !important;
        max-height:62dvh !important;
    }
}

/* FINAL DESKTOP ADMIN PANEL A+ / A++ COMPACT OVERRIDE
 * Keep the private Admin Panel home, Suggestions & Bugs, and API Usage
 * dialog compact on desktop without changing the mobile layout.
 */
@media(min-width:761px){
    html[data-ui-scale="large"] .admin-panel-card{
        width:min(900px,calc((100vw - 48px) / var(--ui-scale,1))) !important;
        max-height:72dvh !important;
        padding:18px !important;
        transform:scale(.90) !important;
        transform-origin:center center !important;
    }

    html[data-ui-scale="xl"] .admin-panel-card{
        width:min(840px,calc((100vw - 48px) / var(--ui-scale,1))) !important;
        max-height:68dvh !important;
        padding:16px !important;
        transform:scale(.82) !important;
        transform-origin:center center !important;
    }
}


.shop-savings{
    justify-content:flex-start;
    flex-wrap:wrap;
}

.shop-discount-status{
    margin-left:auto;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.shop-discount-status.on-discount{
    color:var(--success);
}

.shop-discount-status.not-on-discount{
    color:var(--muted2);
}

@media (max-width:640px){
    .shop-discount-status{
        margin-left:auto;
    }
}


/*
 * Vehicle details modal accessibility tuning.
 * Keep the information panel physically compact when A+/A++ zoom is active.
 */
.worth-it-vehicle-modal-navigation:hover,
.worth-it-vehicle-modal-navigation:focus-visible{
    transform:translateY(-50%) !important;
}

@media (min-width:761px){
    html[data-ui-scale="normal"] .worth-it-vehicle-modal-dialog,
    html:not([data-ui-scale]) .worth-it-vehicle-modal-dialog{
        max-height:min(900px,calc(100vh - 148px)) !important;
    }

    html[data-ui-scale="large"] .worth-it-vehicle-modal-dialog{
        width:min(880px,calc((100vw - 120px) / var(--ui-scale,1))) !important;
        max-height:76dvh !important;
        transform:scale(.88) !important;
        transform-origin:center center !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-body{
        padding:22px !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-navigation{
        width:60px !important;
        height:88px !important;
        font-size:52px !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-navigation-previous{
        left:max(8px,calc(50% - 455px)) !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-navigation-next{
        right:max(8px,calc(50% - 455px)) !important;
    }

    html[data-ui-scale="xl"] .worth-it-vehicle-modal-dialog{
        width:min(820px,calc((100vw - 120px) / var(--ui-scale,1))) !important;
        max-height:72dvh !important;
        transform:scale(.80) !important;
        transform-origin:center center !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-body{
        padding:18px !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-navigation{
        width:52px !important;
        height:78px !important;
        font-size:44px !important;
        border-radius:15px !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-navigation-previous{
        left:max(8px,calc(50% - 387px)) !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-navigation-next{
        right:max(8px,calc(50% - 387px)) !important;
    }
}

@media (max-width:760px){
    .worth-it-vehicle-modal{
        padding:8px !important;
    }
    .worth-it-vehicle-modal-dialog{
        width:min(100%,calc((100vw - 88px) / var(--ui-scale,1))) !important;
        max-width:none !important;
        max-height:calc(100dvh - 16px) !important;
        border-radius:15px !important;
    }
    .worth-it-vehicle-modal-body{
        padding:14px !important;
    }
    .worth-it-vehicle-modal-navigation{
        width:48px !important;
        height:72px !important;
        font-size:40px !important;
        border-radius:14px !important;
    }
    .worth-it-vehicle-modal-navigation-previous{
        left:2px !important;
    }
    .worth-it-vehicle-modal-navigation-next{
        right:2px !important;
    }
    .worth-it-vehicle-detail-header{
        gap:12px !important;
    }
    .worth-it-vehicle-detail-image-wrap,
    .worth-it-vehicle-detail-image,
    .worth-it-vehicle-detail-image-placeholder{
        min-height:185px !important;
        height:185px !important;
    }
    .worth-it-vehicle-detail-heading{
        padding:12px 4px !important;
    }
    .worth-it-vehicle-detail-heading h2{
        font-size:clamp(1.45rem,7vw,2.1rem) !important;
    }
    .worth-it-vehicle-detail-section{
        margin-top:20px !important;
    }
    .worth-it-vehicle-detail-section h3{
        margin-bottom:8px !important;
        font-size:1rem !important;
    }
    .worth-it-vehicle-detail-actions{
        gap:8px !important;
        margin-top:20px !important;
        padding-top:14px !important;
    }
    .worth-it-vehicle-compare-button,
    .worth-it-vehicle-favorite-button{
        min-height:40px !important;
        padding:0 13px !important;
    }

    html[data-ui-scale="large"] .worth-it-vehicle-modal-dialog{
        width:min(100%,calc((100vw - 96px) / var(--ui-scale,1))) !important;
        max-height:calc(100dvh - 18px) !important;
        transform:scale(.88) !important;
        transform-origin:center center !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-body{
        padding:12px !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-navigation{
        width:44px !important;
        height:66px !important;
        font-size:36px !important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-detail-image-wrap,
    html[data-ui-scale="large"] .worth-it-vehicle-detail-image,
    html[data-ui-scale="large"] .worth-it-vehicle-detail-image-placeholder{
        min-height:170px !important;
        height:170px !important;
    }

    html[data-ui-scale="xl"] .worth-it-vehicle-modal-dialog{
        width:min(100%,calc((100vw - 96px) / var(--ui-scale,1))) !important;
        max-height:calc(100dvh - 18px) !important;
        transform:scale(.80) !important;
        transform-origin:center center !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-body{
        padding:10px !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-navigation{
        width:40px !important;
        height:60px !important;
        font-size:32px !important;
        border-radius:12px !important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-detail-image-wrap,
    html[data-ui-scale="xl"] .worth-it-vehicle-detail-image,
    html[data-ui-scale="xl"] .worth-it-vehicle-detail-image-placeholder{
        min-height:155px !important;
        height:155px !important;
    }
}

/* ============================================================
 * Vehicles — search/personal lists/details enhancements
 * ============================================================ */

.cars-personal-panels {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-soft);
}

.cars-personal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.cars-personal-tab {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 13px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cars-personal-tab.is-active {
    background: rgba(124,92,255,.12);
    border-color: rgba(124,92,255,.42);
    color: var(--text);
}

.cars-personal-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.cars-personal-panels[data-active-tab="favorites"] .cars-personal-content {
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    align-content: start;
    grid-auto-rows: 44px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-right: 6px;
}

@media (max-width: 900px) {
    .cars-personal-panels[data-active-tab="favorites"] .cars-personal-content {
        height: 170px;
        max-height: 170px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cars-personal-panels[data-active-tab="favorites"] .cars-personal-content {
        height: 220px;
        max-height: 220px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cars-personal-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 10px;
    color: var(--muted);
}

.cars-personal-empty > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(124,92,255,.1);
    font-size: 20px;
}

.cars-personal-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.cars-personal-empty p {
    margin: 4px 0 0;
    font-size: 12px;
}

.cars-personal-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.cars-personal-item:hover,
.cars-personal-item:focus-visible {
    border-color: rgba(124,92,255,.48);
    outline: none;
}

.cars-personal-item-icon {
    flex: 0 0 auto;
    font-size: 16px;
}

.cars-personal-item-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.cars-personal-item-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.cars-personal-item-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 11px;
}

.cars-personal-item-action {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.car-card {
    position: relative;
}

.car-card-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(10,10,18,.78);
    color: var(--muted);
    font-size: 18px !important;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.car-card-favorite:hover,
.car-card-favorite:focus-visible,
.car-card-favorite.is-favorite {
    border-color: rgba(124,92,255,.55);
    color: var(--text);
    outline: none;
}

.worth-it-vehicle-detail-verification {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 2px;
}

.worth-it-vehicle-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(124,92,255,.35);
    border-radius: 999px;
    background: rgba(124,92,255,.08);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
}

.worth-it-vehicle-favorite-button {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.worth-it-vehicle-favorite-button:hover,
.worth-it-vehicle-favorite-button.is-favorite {
    border-color: rgba(124,92,255,.48);
    background: rgba(124,92,255,.1);
}

@media (max-width: 640px) {
    .cars-personal-content {
        grid-template-columns: 1fr;
    }

    .cars-personal-panels {
        padding: 11px;
    }

    .car-card-favorite {
        width: 32px;
        height: 32px;
    }
}


.cars-results-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cars-compare-jump-button {
    margin-left: 8px;
}


/* =========================================================
   HEADER / YOUTUBE-STYLE NAVIGATION
   Keep the hamburger beside the logo. The hamburger opens the
   existing navigation panel, while the primary navigation remains
   visible on wider screens and Calculator stays beside FAQ.
   ========================================================= */

.nav-inner{
    gap:12px;
}

.nav-inner > .menu-btn{
    display:grid !important;
    place-items:center;
    width:38px;
    height:38px;
    min-width:38px;
    padding:0;
    flex:0 0 38px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-size:18px;
    line-height:1;
    margin:0;
}

.nav-inner > .menu-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(124,92,255,.4);
}

.nav-links{
    flex:0 1 auto;
    min-width:0;
}

.nav-scroll-content{
    display:flex;
    align-items:center;
    gap:2px;
    min-width:0;
}

.nav-secondary-item,
.nav-overflow-items{
    display:none;
}

.nav-calculator-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:0;
    color:var(--muted);
    background:transparent;
    padding:9px 12px;
    border-radius:10px;
    font-weight:600;
}

.nav-calculator-btn:hover{
    color:var(--text);
    background:rgba(255,255,255,.06);
}

@media(min-width:901px){
    .nav-links.open{
        position:fixed !important;
        top:72px !important;
        bottom:0 !important;
        left:0 !important;
        right:auto !important;
        width:min(360px,88vw) !important;
        max-height:none !important;
        height:calc(100vh - 72px) !important;
        height:calc(100dvh - 72px) !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:0 !important;
        padding:14px !important;
        overflow:hidden !important;
        background:var(--card-solid,var(--card)) !important;
        border:1px solid var(--border) !important;
        border-left:0 !important;
        border-radius:0 18px 18px 0 !important;
        box-shadow:30px 0 70px rgba(0,0,0,.24) !important;
        z-index:1001 !important;
    }

    .nav-links.open > .nav-scroll-content{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:7px !important;
        width:100% !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding:0 !important;
    }

    .nav-links.open .nav-primary-item{
        display:none !important;
    }

    .nav-links.open .nav-secondary-item{
        display:flex !important;
        order:1;
        width:100% !important;
        text-align:left !important;
        flex:0 0 auto !important;
    }

    .nav-links.open .nav-overflow-items{
        display:flex !important;
        order:2;
        flex-direction:column !important;
        gap:7px !important;
        width:100% !important;
    }

    .nav-links.open .nav-calculator-spacer{
        display:none !important;
    }

    .nav-links.open .nav-overflow-item{
        display:flex !important;
    }

    .nav-links.open .nav-secondary-item{
        border:1px solid var(--border);
        background:var(--surface-soft);
        color:var(--text);
        padding:12px;
        border-radius:12px;
        font-weight:700;
    }
}

@media(max-width:900px){
    .nav-links{
        display:none !important;
    }

    .nav-links.open{
        position:fixed !important;
        top:56px !important;
        bottom:0 !important;
        left:0 !important;
        right:auto !important;
        width:min(360px,92vw) !important;
        max-height:none !important;
        height:calc(100vh - 56px) !important;
        height:calc(100dvh - 56px) !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:0 !important;
        padding:10px !important;
        overflow:hidden !important;
        background:var(--card-solid,var(--card)) !important;
        border:1px solid var(--border) !important;
        border-left:0 !important;
        border-radius:0 16px 16px 0 !important;
        box-shadow:25px 0 60px rgba(0,0,0,.26) !important;
        z-index:1001 !important;
    }

    .nav-links.open > .nav-scroll-content{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:6px !important;
        width:100% !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding:0 !important;
    }

    .nav-links.open .nav-secondary-item{
        display:flex !important;
        order:1;
        width:100% !important;
        text-align:left !important;
        flex:0 0 auto !important;
    }

    .nav-links.open .nav-overflow-items{
        display:flex !important;
        order:2;
        flex-direction:column !important;
        gap:6px !important;
        width:100% !important;
    }

    .nav-links.open .nav-primary-item{
        display:flex !important;
        order:3;
        width:100% !important;
        text-align:left !important;
        flex:0 0 auto !important;
    }

    .nav-links.open .nav-secondary-item{
        border:1px solid var(--border);
        background:var(--surface-soft);
        color:var(--text);
        padding:11px 12px;
        border-radius:11px;
        font-weight:700;
    }

    .nav-links.open .nav-calculator-spacer{
        display:none !important;
    }

    .nav-calculator-btn{
        padding:8px 10px;
        font-size:13px;
    }
}

@media(max-width:700px){
    .nav-inner{
        height:56px !important;
        gap:4px !important;
    }

    .nav-inner > .menu-btn{
        width:30px;
        height:30px;
        min-width:30px;
        flex-basis:30px;
        font-size:15px;
    }

    .nav-calculator-btn{
        font-size:0;
        width:32px;
        min-width:32px;
        height:32px;
        padding:0;
    }

    .nav-calculator-btn::first-letter{
        font-size:17px;
    }

    html[data-ui-scale="large"] .nav-inner,
    html[data-ui-scale="xl"] .nav-inner{
        height:56px !important;
        gap:3px !important;
    }

    html[data-ui-scale="large"] .nav-inner > .menu-btn,
    html[data-ui-scale="xl"] .nav-inner > .menu-btn{
        width:30px;
        height:30px;
        min-width:30px;
        flex-basis:30px;
    }

    html[data-ui-scale="large"] .nav-calculator-btn,
    html[data-ui-scale="xl"] .nav-calculator-btn{
        width:30px;
        min-width:30px;
        height:30px;
    }
}

@media(max-width:450px){
    .nav-calculator-btn{
        width:30px;
        min-width:30px;
        height:30px;
    }
}


@media(min-width:901px){
    html[data-ui-scale="large"] .nav-links,
    html[data-ui-scale="xl"] .nav-links{
        display:flex !important;
        flex:0 1 auto !important;
        min-width:0 !important;
    }
}


/* Hamburger discovery panel: every destination uses the same card layout. */
.nav-links.open .nav-secondary-item{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    padding:11px 12px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:var(--surface-soft) !important;
    color:var(--text) !important;
    text-align:left !important;
    flex:0 0 auto !important;
    font-weight:700 !important;
}

.nav-links.open .nav-secondary-item:hover{
    background:rgba(124,92,255,.08) !important;
    border-color:rgba(124,92,255,.35) !important;
}

.nav-links.open .nav-secondary-item > span:first-child{
    width:36px !important;
    height:36px !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 36px !important;
    border-radius:10px !important;
    background:rgba(124,92,255,.12) !important;
    font-size:19px !important;
}

.nav-links.open .nav-secondary-item > span:last-child{
    min-width:0 !important;
}

.nav-links.open .nav-secondary-item strong{
    display:block !important;
    font-size:14px !important;
    line-height:1.2 !important;
}

.nav-links.open .nav-secondary-item small{
    display:block !important;
    margin-top:3px !important;
    color:var(--muted) !important;
    font-size:11px !important;
    line-height:1.35 !important;
}


/* FINAL: identical geometry and surface for every hamburger destination. */
.nav-links.open .nav-secondary-item,
.nav-links.open .nav-overflow-item{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;
    height:58px !important;
    margin:0 !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.045) !important;
    color:var(--text) !important;
    text-align:left !important;
    box-shadow:none !important;
    flex:0 0 58px !important;
    transform:none !important;
}

.nav-links.open .nav-secondary-item:hover,
.nav-links.open .nav-overflow-item:hover{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(124,92,255,.35) !important;
    transform:none !important;
}

.nav-links.open .nav-secondary-item > span:first-child,
.nav-links.open .nav-overflow-item > span:first-child{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    flex:0 0 36px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:rgba(124,92,255,.12) !important;
    font-size:19px !important;
    line-height:1 !important;
}

.nav-links.open .nav-secondary-item > span:last-child,
.nav-links.open .nav-overflow-item > span:last-child{
    min-width:0 !important;
    flex:1 1 auto !important;
}

.nav-links.open .nav-secondary-item strong,
.nav-links.open .nav-overflow-item strong{
    display:block !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.2 !important;
}

.nav-links.open .nav-secondary-item small,
.nav-links.open .nav-overflow-item small{
    display:block !important;
    margin:3px 0 0 !important;
    color:var(--muted) !important;
    font-size:11px !important;
    line-height:1.25 !important;
}


/* FINAL: keep Calculator visually consistent with the header navigation buttons. */
.nav-calculator-btn{
    border:1px solid var(--border) !important;
    background:rgba(255,255,255,.05) !important;
    color:var(--muted) !important;
    border-radius:10px !important;
    padding:9px 12px !important;
    font:inherit;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.nav-calculator-btn:hover,
.nav-calculator-btn:focus-visible{
    color:var(--text) !important;
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(124,92,255,.4) !important;
    outline:none;
    transform:translateY(-2px);
}

html[data-theme="light"] .nav-calculator-btn{
    color:#475569 !important;
    background:rgba(15,23,42,.045) !important;
    border-color:rgba(15,23,42,.11) !important;
}

html[data-theme="light"] .nav-calculator-btn:hover,
html[data-theme="light"] .nav-calculator-btn:focus-visible{
    color:#0f172a !important;
    background:rgba(15,23,42,.075) !important;
    border-color:rgba(124,92,255,.4) !important;
}


/* FINAL: A+ / A++ hamburger must stay completely hidden until opened. */
@media(min-width:901px){
    html[data-ui-scale="large"] .nav-links:not(.open),
    html[data-ui-scale="xl"] .nav-links:not(.open){
        display:none !important;
    }

    html[data-ui-scale="large"] .nav-links.open,
    html[data-ui-scale="xl"] .nav-links.open{
        display:flex !important;
    }
}

html[data-ui-scale="large"] .nav-overflow-items,
html[data-ui-scale="xl"] .nav-overflow-items{
    display:none !important;
}

html[data-ui-scale="large"] .nav-links.open .nav-overflow-items,
html[data-ui-scale="xl"] .nav-links.open .nav-overflow-items{
    display:flex !important;
}


/* FINAL: A+ / A++ keep FAQ and Calculator together in the header. */
@media(min-width:901px){
    html[data-ui-scale="large"] .nav-links:not(.open),
    html[data-ui-scale="xl"] .nav-links:not(.open){
        display:flex !important;
        flex:0 0 auto !important;
        width:auto !important;
        min-width:0 !important;
        overflow:visible !important;
    }

    html[data-ui-scale="large"] .nav-links:not(.open) > .nav-scroll-content,
    html[data-ui-scale="xl"] .nav-links:not(.open) > .nav-scroll-content{
        display:flex !important;
        align-items:center !important;
        width:auto !important;
        min-width:0 !important;
        overflow:visible !important;
        gap:2px !important;
    }

    html[data-ui-scale="large"] .nav-links:not(.open) .nav-primary-item,
    html[data-ui-scale="xl"] .nav-links:not(.open) .nav-primary-item{
        display:none !important;
    }

    html[data-ui-scale="large"] .nav-links:not(.open) .nav-primary-item:first-child,
    html[data-ui-scale="xl"] .nav-links:not(.open) .nav-primary-item:first-child{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:auto !important;
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    

    html[data-ui-scale="large"] .nav-links:not(.open) .nav-primary-item[onclick="scrollToFAQ()"],
    html[data-ui-scale="xl"] .nav-links:not(.open) .nav-primary-item[onclick="scrollToFAQ()"]{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:auto !important;
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    html[data-ui-scale="large"] .nav-links:not(.open) .nav-secondary-item,
    html[data-ui-scale="xl"] .nav-links:not(.open) .nav-secondary-item,
    html[data-ui-scale="large"] .nav-links:not(.open) .nav-overflow-items,
    html[data-ui-scale="xl"] .nav-links:not(.open) .nav-overflow-items,
    html[data-ui-scale="large"] .nav-links:not(.open) .nav-calculator-spacer,
    html[data-ui-scale="xl"] .nav-links:not(.open) .nav-calculator-spacer{
        display:none !important;
    }

    html[data-ui-scale="large"] .nav-calculator-btn,
    html[data-ui-scale="xl"] .nav-calculator-btn{
        flex:0 0 auto !important;
        margin-left:0 !important;
    }
}


/* FINAL: keep Calculator directly next to FAQ at A- and normal A size. */
@media(min-width:901px){
    html[data-ui-scale="small"] .nav-calculator-btn,
    html[data-ui-scale="normal"] .nav-calculator-btn,
    html:not([data-ui-scale]) .nav-calculator-btn{
        margin-left:-24px !important;
    }
}


/* FINAL: when the A- / A hamburger is open, move Calculator slightly right.
   The closed-header position remains completely unchanged. */
@media(min-width:901px){
    html[data-ui-scale="small"] .nav-links.open + .nav-calculator-btn,
    html[data-ui-scale="normal"] .nav-links.open + .nav-calculator-btn,
    html:not([data-ui-scale]) .nav-links.open + .nav-calculator-btn{
        position:relative !important;
        left:56px !important;
    }
}




/* CLS FIX — reserve signed-in navigation slots before auth/admin state resolves. */
@media (min-width:701px){
    /*
     * Keep the signed-in header geometry stable during the first paint.
     * These controls reserve their final width immediately, while their
     * visibility still follows the existing auth/admin state.
     */
    .nav-actions .signout-nav-btn{
        display:inline-flex !important;
    }

    .nav-actions:not(:has(.profile-nav-btn[style*="inline-flex"])) .signout-nav-btn{
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .nav-actions .admin-panel-nav-btn{
        display:inline-flex !important;
    }

    .nav-actions .admin-panel-nav-btn[style*="display: none"]{
        visibility:hidden !important;
        pointer-events:none !important;
    }
}

/* Cars — image attribution / license */
.worth-it-vehicle-image-attribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin-top: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0.82;
}

.worth-it-vehicle-image-attribution a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.worth-it-vehicle-image-attribution a:hover {
    opacity: 0.9;
}

@media (max-width: 640px) {
    .worth-it-vehicle-image-attribution {
        font-size: 0.72rem;
        padding: 0.4rem 0.55rem;
    }
}



/* Calculator buttons — stronger colors in Light theme only. */
html[data-theme="light"] #calculatorApp .calculator-mode-btn{
    color:#3730a3;
    background:#eef2ff;
    border-color:#c7d2fe;
    box-shadow:0 3px 10px rgba(79,70,229,.08);
}

html[data-theme="light"] #calculatorApp .calculator-mode-btn:hover{
    color:#312e81;
    background:#e0e7ff;
    border-color:#a5b4fc;
}

html[data-theme="light"] #calculatorApp .calculator-mode-btn.active{
    color:#fff;
    background:linear-gradient(135deg,#6d5dfc,#2563eb);
    border-color:transparent;
    box-shadow:0 7px 18px rgba(79,70,229,.24);
}

html[data-theme="light"] #calculatorApp .calculator-key{
    color:#1e293b;
    background:#f1f5f9;
    border-color:#cbd5e1;
    box-shadow:0 2px 7px rgba(15,23,42,.06);
}

html[data-theme="light"] #calculatorApp .calculator-key:hover{
    background:#e2e8f0;
    border-color:#94a3b8;
    box-shadow:0 4px 12px rgba(15,23,42,.09);
}

html[data-theme="light"] #calculatorApp .calculator-key.operator{
    color:#4338ca;
    background:#e0e7ff;
    border-color:#a5b4fc;
}

html[data-theme="light"] #calculatorApp .calculator-key.function,
html[data-theme="light"] #calculatorApp .calculator-key.constant{
    color:#0369a1;
    background:#e0f2fe;
    border-color:#7dd3fc;
}

html[data-theme="light"] #calculatorApp .calculator-key.clear{
    color:#dc2626;
    background:#fee2e2;
    border-color:#fca5a5;
}

html[data-theme="dark"] #calculatorApp .calculator-key.clear{
    color:#ff8a8a;
    background:#4a151b;
    border-color:#7f1d1d;
}

html[data-theme="light"] #calculatorApp .calculator-key.equals{
    color:#fff;
    background:linear-gradient(135deg,#6d5dfc,#2563eb);
    border-color:transparent;
    box-shadow:0 6px 16px rgba(79,70,229,.22);
}

/* Wikipedia informational descriptions — Markets & Currencies. */
.markets-grid .market-card{height:190px !important;min-height:190px !important;max-height:190px !important;}
.markets-grid .worth-it-market-image-wrap,.markets-grid .worth-it-market-image,.markets-grid .worth-it-market-image-placeholder{min-height:190px !important;}
.worth-it-market-card-content{height:190px !important;min-height:190px !important;max-height:190px !important;padding:10px 13px 9px !important;}
.worth-it-market-wikipedia,.worth-it-currency-wikipedia{min-width:0;margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:5px;border-top:1px solid var(--border);}
.worth-it-market-wikipedia-description,.worth-it-currency-wikipedia-description{margin:0;color:var(--muted);font-size:.68rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:2.55em;}
.worth-it-market-wikipedia-link,.worth-it-currency-wikipedia-link{align-self:flex-end;color:var(--primary2);font-size:.68rem;font-weight:800;text-decoration:none;white-space:nowrap;opacity:.75;pointer-events:none;}
.worth-it-market-wikipedia-link.is-loaded,.worth-it-currency-wikipedia-link.is-loaded{opacity:1;pointer-events:auto;}
.worth-it-market-wikipedia-link:hover,.worth-it-currency-wikipedia-link:hover{text-decoration:underline;text-underline-offset:2px;}
.worth-it-market-wikipedia-link.is-unavailable,.worth-it-currency-wikipedia-link.is-unavailable{display:none;}
@media(max-width:900px){.markets-grid .market-card{height:205px !important;min-height:205px !important;max-height:205px !important;}.markets-grid .worth-it-market-image-wrap,.markets-grid .worth-it-market-image,.markets-grid .worth-it-market-image-placeholder{min-height:205px !important;}.worth-it-market-card-content{height:205px !important;min-height:205px !important;max-height:205px !important;}.money-card{grid-template-columns:1fr !important;gap:10px !important;}}
@media(max-width:700px){.markets-grid .market-card{grid-template-columns:95px minmax(0,1fr) !important;height:205px !important;min-height:205px !important;max-height:205px !important;}.markets-grid .worth-it-market-image-wrap,.markets-grid .worth-it-market-image,.markets-grid .worth-it-market-image-placeholder{min-width:95px !important;width:95px !important;min-height:205px !important;}}

/* Keep Water Levels and Currencies detail navigation buttons solid on hover/focus. */
.water-levels-detail-nav:hover,
.water-levels-detail-nav:focus-visible,
.water-levels-detail-nav:active,
.water-levels-detail-nav:disabled:hover,
.currency-detail-nav:hover,
.currency-detail-nav:focus-visible,
.currency-detail-nav:active,
.currency-detail-nav:disabled:hover{
    background:var(--card-solid,var(--card)) !important;
}


/* =========================================================
   DETAIL MODALS — KEEP GLOBAL HEADER INTERACTIVE
   Detail backdrops stay below the global header, menus and
   utility panels so those controls remain sharp and clickable.
   ========================================================= */
.nav{
    z-index:50000 !important;
}

.more-menu{
    z-index:50010 !important;
}

.settings-panel{
    z-index:50020 !important;
}

.feedback-overlay,
.admin-panel-overlay,
.auth-modal-overlay,
.ai-chat-overlay{
    z-index:40000 !important;
}



/* =========================================================
   DETAIL PANELS — KEEP GLOBAL HEADER INTERACTIVE
   When a card-detail panel is open, the main navigation and
   its utility menus stay above the detail backdrop so they
   remain sharp and clickable. The detail panel stays open.
========================================================= */

html:has(
    #cryptoDetailOverlay.open,
    #currencyDetailModal.is-open,
    #worthItMarketDetailModal.is-open,
    #waterLevelsDetailOverlay.open,
    #worthItVehicleDetailsModal.is-open
) .nav{
    z-index:13000 !important;
}

html:has(
    #cryptoDetailOverlay.open,
    #currencyDetailModal.is-open,
    #worthItMarketDetailModal.is-open,
    #waterLevelsDetailOverlay.open,
    #worthItVehicleDetailsModal.is-open
) .more-menu,
html:has(
    #cryptoDetailOverlay.open,
    #currencyDetailModal.is-open,
    #worthItMarketDetailModal.is-open,
    #waterLevelsDetailOverlay.open,
    #worthItVehicleDetailsModal.is-open
) .settings-panel{
    z-index:13020 !important;
}

html:has(
    #cryptoDetailOverlay.open,
    #currencyDetailModal.is-open,
    #worthItMarketDetailModal.is-open,
    #waterLevelsDetailOverlay.open,
    #worthItVehicleDetailsModal.is-open
) .ai-chat-overlay,
html:has(
    #cryptoDetailOverlay.open,
    #currencyDetailModal.is-open,
    #worthItMarketDetailModal.is-open,
    #waterLevelsDetailOverlay.open,
    #worthItVehicleDetailsModal.is-open
) .feedback-overlay{
    z-index:13040 !important;
}

html:has(
    #cryptoDetailOverlay.open,
    #currencyDetailModal.is-open,
    #worthItMarketDetailModal.is-open,
    #waterLevelsDetailOverlay.open,
    #worthItVehicleDetailsModal.is-open
) .admin-panel-overlay{
    z-index:13050 !important;
}


/* =========================================================
   MOBILE HEADER — LOCKED TO BASE PHONE SIZE
   A+ / A++ must not enlarge the top header row. Accessibility
   scaling continues to affect the page content and the opened
   navigation menu, but the closed header keeps the same compact
   geometry as A / A- so future header actions have stable space.
   ========================================================= */
@media(max-width:700px){
    html[data-ui-scale="large"] body,
    html[data-ui-scale="xl"] body{
        padding-top:60px !important;
    }

    html[data-ui-scale="large"] .nav-inner,
    html[data-ui-scale="xl"] .nav-inner{
        height:60px !important;
        gap:5px !important;
    }

    html[data-ui-scale="large"] .nav > .container,
    html[data-ui-scale="xl"] .nav > .container{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    html[data-ui-scale="large"] .logo,
    html[data-ui-scale="xl"] .logo{
        min-width:0 !important;
        flex:0 1 auto !important;
        gap:6px !important;
        font-size:16px !important;
    }

    html[data-ui-scale="large"] .logo-mark,
    html[data-ui-scale="xl"] .logo-mark{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
        border-radius:10px !important;
    }

    html[data-ui-scale="large"] .menu-btn,
    html[data-ui-scale="xl"] .menu-btn{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        min-height:34px !important;
        flex:0 0 34px !important;
        padding:5px !important;
        font-size:17px !important;
    }

    html[data-ui-scale="large"] .nav-actions,
    html[data-ui-scale="xl"] .nav-actions{
        min-width:0 !important;
        flex:1 1 auto !important;
        gap:3px !important;
    }

    html[data-ui-scale="large"] .nav-actions > *,
    html[data-ui-scale="xl"] .nav-actions > *{
        min-width:0 !important;
    }

    html[data-ui-scale="large"] .auth-btn,
    html[data-ui-scale="large"] .feedback-nav-btn,
    html[data-ui-scale="large"] .admin-panel-nav-btn,
    html[data-ui-scale="large"] .signout-nav-btn,
    html[data-ui-scale="large"] .settings-btn,
    html[data-ui-scale="large"] .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .auth-btn,
    html[data-ui-scale="xl"] .feedback-nav-btn,
    html[data-ui-scale="xl"] .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .signout-nav-btn,
    html[data-ui-scale="xl"] .settings-btn,
    html[data-ui-scale="xl"] .ai-chat-nav-btn{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        min-height:32px !important;
        flex:0 0 32px !important;
        padding:4px !important;
        border-radius:9px !important;
        font-size:15px !important;
        line-height:1 !important;
    }

    html[data-ui-scale="large"] .profile-nav-btn,
    html[data-ui-scale="xl"] .profile-nav-btn{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        min-height:34px !important;
        flex:0 0 34px !important;
        padding:2px !important;
    }

    html[data-ui-scale="large"] .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .profile-nav-btn > #profileNavIcon{
        width:28px !important;
        height:28px !important;
        flex-basis:28px !important;
    }

    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar-fallback{
        width:28px !important;
        height:28px !important;
        flex-basis:28px !important;
    }
}


/* =========================================================
   MOBILE HEADER — CANCEL PAGE ZOOM AT A+ / A++
   The page keeps accessibility zoom, but the closed top header
   keeps the same physical size and full phone width as A / A-.
   This prevents header buttons from growing or being pushed
   into the wrong positions when A+ / A++ narrows the layout.
   ========================================================= */
@media(max-width:700px){
    html[data-ui-scale="large"] .nav,
    html[data-ui-scale="xl"] .nav{
        zoom:calc(1 / var(--ui-scale, 1)) !important;
        width:calc(100% * var(--ui-scale, 1)) !important;
        left:0 !important;
        right:auto !important;
        box-sizing:border-box !important;
    }
}

/* =========================================================
   THEME VISUAL POLISH — NON-MARKETS UI ONLY
   Markets category/card/detail buttons keep their existing
   visual treatment. This pass improves the surrounding page,
   shared neutral controls and common UI surfaces without
   changing layout or functionality.
========================================================= */

:root{
    --ui-button-bg:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    --ui-button-bg-hover:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.055));
    --ui-button-border:rgba(148,163,184,.24);
    --ui-button-shadow:0 7px 20px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.045) inset;
    --ui-button-shadow-hover:0 10px 26px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.06) inset;
}

body{
    background:
        radial-gradient(circle at 8% -5%,rgba(124,92,255,.19),transparent 31%),
        radial-gradient(circle at 94% 7%,rgba(56,189,248,.13),transparent 29%),
        radial-gradient(circle at 52% 115%,rgba(124,92,255,.06),transparent 32%),
        linear-gradient(145deg,#060a13,#0a1020 54%,#0a1120);
}

:where(
    .btn-secondary,
    .menu-btn,
    .feedback-nav-btn,
    .signout-nav-btn,
    .settings-btn,
    .auth-btn,
    .profile-nav-btn,
    .ai-chat-nav-btn,
    .more-menu-btn,
    .money-refresh-btn,
    .settings-header button,
    .close-btn,
    .settings-option,
    .feedback-trigger,
    .feedback-close,
    .translate-close,
    .translate-tab,
    .calculator-mode-btn,
    .news-category-btn,
    .crypto-filters button,
    .crypto-chart-controls button,
    .water-levels-filters button,
    .water-levels-info-button,
    .water-levels-history-controls button,
    .ship-tracking-filters button,
    .ship-tracking-map-switcher-btn,
    .admin-panel-back-button,
    .admin-panel-inline-button,
    .admin-panel-section-button,
    .cars-personal-tab,
    .more-menu-header button
):not(.markets-section button){
    background:var(--ui-button-bg);
    border-color:var(--ui-button-border);
    box-shadow:var(--ui-button-shadow);
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        color .18s ease;
}

:where(
    .btn-secondary,
    .menu-btn,
    .feedback-nav-btn,
    .signout-nav-btn,
    .settings-btn,
    .auth-btn,
    .profile-nav-btn,
    .ai-chat-nav-btn,
    .more-menu-btn,
    .money-refresh-btn,
    .settings-header button,
    .close-btn,
    .settings-option,
    .feedback-trigger,
    .feedback-close,
    .translate-close,
    .translate-tab,
    .calculator-mode-btn,
    .news-category-btn,
    .crypto-filters button,
    .crypto-chart-controls button,
    .water-levels-filters button,
    .water-levels-info-button,
    .water-levels-history-controls button,
    .ship-tracking-filters button,
    .ship-tracking-map-switcher-btn,
    .admin-panel-back-button,
    .admin-panel-inline-button,
    .admin-panel-section-button,
    .cars-personal-tab,
    .more-menu-header button
):not(.markets-section button):not(.active):not(.is-active):not([aria-expanded="true"]):hover{
    background:var(--ui-button-bg-hover);
    border-color:rgba(124,92,255,.38);
    box-shadow:var(--ui-button-shadow-hover);
}

html[data-theme="light"] body{
    background:
        radial-gradient(circle at 8% -5%,rgba(124,92,255,.11),transparent 31%),
        radial-gradient(circle at 94% 7%,rgba(56,189,248,.10),transparent 29%),
        radial-gradient(circle at 52% 115%,rgba(124,92,255,.045),transparent 32%),
        linear-gradient(145deg,#f7f8fc,#eef3f9 55%,#edf2f8);
}

html[data-theme="light"]{
    --ui-button-bg:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,250,252,.86));
    --ui-button-bg-hover:linear-gradient(145deg,#ffffff,rgba(248,250,252,.96));
    --ui-button-border:rgba(15,23,42,.13);
    --ui-button-shadow:0 6px 18px rgba(15,23,42,.07),0 1px 0 rgba(255,255,255,.86) inset;
    --ui-button-shadow-hover:0 9px 24px rgba(15,23,42,.10),0 1px 0 rgba(255,255,255,.96) inset;
}

html[data-theme="light"] :where(
    .btn-secondary,
    .menu-btn,
    .feedback-nav-btn,
    .signout-nav-btn,
    .settings-btn,
    .auth-btn,
    .profile-nav-btn,
    .ai-chat-nav-btn,
    .more-menu-btn,
    .money-refresh-btn,
    .settings-header button,
    .close-btn,
    .settings-option,
    .feedback-trigger,
    .feedback-close,
    .translate-close,
    .translate-tab,
    .calculator-mode-btn,
    .news-category-btn,
    .crypto-filters button,
    .crypto-chart-controls button,
    .water-levels-filters button,
    .water-levels-info-button,
    .water-levels-history-controls button,
    .ship-tracking-filters button,
    .ship-tracking-map-switcher-btn,
    .admin-panel-back-button,
    .admin-panel-inline-button,
    .admin-panel-section-button,
    .cars-personal-tab,
    .more-menu-header button
):not(.markets-section button){
    box-shadow:var(--ui-button-shadow);
}

html[data-theme="dark"] .markets-section{
    background:
        radial-gradient(circle at 15% 0%,rgba(124,92,255,.055),transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.005));
}

html[data-theme="light"] .markets-section{
    background:
        radial-gradient(circle at 15% 0%,rgba(124,92,255,.045),transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.16));
}

/* Keep Markets' own buttons visually independent from this pass. */
.markets-section .markets-refresh-btn,
.markets-section .worth-it-market-category-button{
    box-shadow:none;
}
/* =========================================================
   LEGAL / POLICY UI
========================================================= */

html.legal-open,
html.legal-open body{
    overflow:hidden;
}

.footer-legal-links{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    margin-top:2px;
    color:var(--muted);
    font-size:12px;
}

.footer-legal-links button{
    border:0;
    padding:0;
    background:none;
    color:var(--muted);
    font:inherit;
    text-decoration:none;
    cursor:pointer;
}

.footer-legal-links button:hover,
.footer-legal-links button:focus-visible{
    color:var(--text);
    text-decoration:underline;
}

.legal-overlay{
    position:fixed;
    inset:0;
    z-index:1200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(2,6,23,.68);
    backdrop-filter:blur(10px);
}

.legal-overlay.open{
    display:flex;
}

.legal-modal{
    width:min(860px,100%);
    max-height:min(860px,calc(100vh - 28px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--card-solid,var(--card));
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.38);
}

.legal-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:22px 24px 16px;
    border-bottom:1px solid var(--border);
}

.legal-kicker{
    margin-bottom:4px;
    color:var(--primary2);
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.legal-modal-head h2{
    margin:0;
    color:var(--text);
    font-size:26px;
}

.legal-modal-head p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
}

.legal-close{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-soft);
    color:var(--text);
    font-size:18px;
    cursor:pointer;
}

.legal-close:hover,
.legal-close:focus-visible{
    transform:scale(1.04);
    border-color:var(--primary);
}

.legal-nav{
    display:flex;
    gap:8px;
    padding:12px 24px;
    overflow-x:auto;
    border-bottom:1px solid var(--border);
    scrollbar-width:thin;
}

.legal-nav button{
    flex:0 0 auto;
    white-space:nowrap;
    border:1px solid var(--border);
    border-radius:999px;
    padding:8px 12px;
    background:var(--surface-soft);
    color:var(--muted);
    font:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.legal-nav button:hover,
.legal-nav button:focus-visible,
.legal-nav button.active{
    color:var(--text);
    border-color:var(--primary);
    background:rgba(124,92,255,.10);
}

.legal-content{
    min-width:0;
    overflow:auto;
    padding:24px;
    color:var(--text);
    font-size:14px;
    line-height:1.68;
    overscroll-behavior:contain;
}

.legal-content:focus{
    outline:2px solid rgba(124,92,255,.45);
    outline-offset:-4px;
}

.legal-content h3{
    margin:0 0 8px;
    padding-top:4px;
    color:var(--text);
    font-size:16px;
}

.legal-content h3:not(:first-child){
    margin-top:24px;
}

.legal-content p{
    margin:0 0 12px;
    color:var(--muted);
}

.legal-content strong{
    color:var(--text);
}

.legal-content ul{
    margin:0 0 14px 20px;
    padding:0;
    color:var(--muted);
}

.legal-final-note{
    margin-top:22px!important;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-soft);
}

/* Signup agreement */
.auth-legal-wrap{
    margin:-2px 0 14px;
}

.auth-legal-check{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
}

.auth-legal-check input{
    width:16px;
    height:16px;
    flex:0 0 16px;
    margin-top:1px;
    accent-color:var(--primary);
}

.auth-inline-link{
    border:0;
    padding:0;
    background:none;
    color:var(--primary2);
    font:inherit;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer;
}

.auth-inline-link:hover,
.auth-inline-link:focus-visible{
    color:var(--text);
}

@media(max-width:520px){
    .legal-overlay{
        align-items:flex-start;
        padding:10px;
    }

    .legal-modal{
        max-height:calc(100vh - 20px);
        border-radius:20px;
    }

    .legal-modal-head{
        padding:18px 18px 14px;
    }

    .legal-modal-head h2{
        font-size:22px;
    }

    .legal-nav{
        padding:10px 14px;
    }

    .legal-content{
        padding:18px;
        font-size:13px;
        line-height:1.62;
    }

    .legal-content h3{
        font-size:15px;
    }

    .footer-legal-links{
        gap:6px;
        font-size:11px;
    }
}

html[data-ui-scale="large"] .legal-content{
    font-size:13px;
}

html[data-ui-scale="xl"] .legal-content{
    font-size:12.5px;
}

html[data-ui-scale="large"] .legal-modal-head h2,
html[data-ui-scale="xl"] .legal-modal-head h2{
    font-size:22px;
}
/* =========================================================
   LEGAL MODAL — ABOVE AUTH + HEADER / BUTTON LAYOUT FIX
========================================================= */

.legal-overlay{
    z-index:60000 !important;
}

.legal-modal{
    width:min(860px,calc(100vw - 32px));
}

.legal-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    overflow:visible;
}

.legal-nav button{
    width:100%;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.25;
}

@media(max-width:700px){
    .legal-overlay{
        padding:10px;
    }

    .legal-modal{
        width:100%;
        max-width:100%;
        max-height:calc(100dvh - 20px);
    }

    .legal-nav{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
        padding:10px 14px;
    }

    .legal-nav button{
        min-height:36px;
        padding:7px 8px;
        font-size:11px;
    }

    .legal-content{
        min-height:0;
        max-height:none;
    }
}

@media(max-width:380px){
    .legal-modal{
        border-radius:18px;
    }

    .legal-modal-head{
        padding:15px 15px 12px;
    }

    .legal-modal-head h2{
        font-size:20px;
    }

    .legal-nav{
        padding:8px 11px;
    }

    .legal-nav button{
        font-size:10px;
        min-height:34px;
        padding:6px 5px;
    }

    .legal-content{
        padding:15px;
        font-size:12.5px;
    }
}

html[data-ui-scale="large"] .legal-modal{
    width:min(820px,calc(100vw - 32px));
}

html[data-ui-scale="xl"] .legal-modal{
    width:min(800px,calc(100vw - 28px));
}

html[data-ui-scale="large"] .legal-nav,
html[data-ui-scale="xl"] .legal-nav{
    gap:7px;
}
/* Legal modal compact height for larger UI scales:
   A+ closes 50px from top and 50px from bottom.
   A++ closes 100px from top and 100px from bottom. */
html[data-ui-scale="large"] .legal-modal{
    max-height:min(760px,calc(100dvh - 120px));
}

html[data-ui-scale="xl"] .legal-modal{
    max-height:min(720px,calc(100dvh - 240px));
}
/* Signup/auth modal height tuning:
   A: top -20px
   A+: top -70px, bottom -20px
   A++: top -100px, bottom -60px */
@media(max-width:700px){
    html[data-ui-scale="normal"] .auth-modal-card{
        max-height:calc((100dvh - 16px) / var(--ui-scale,1) - 20px) !important;
        transform:translateY(10px);
    }

    html[data-ui-scale="large"] .auth-modal-card{
        max-height:calc((100dvh - 16px) / var(--ui-scale,1) - 90px) !important;
        transform:translateY(25px);
    }

    html[data-ui-scale="xl"] .auth-modal-card{
        max-height:calc((100dvh - 16px) / var(--ui-scale,1) - 160px) !important;
        transform:translateY(20px);
    }
}
/* Signup modal — targeted vertical compression */
.auth-modal-card:has(#authLegalWrap[style*="block"]){
    padding-top:4px !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]){
    padding-top:0 !important;
    padding-bottom:4px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]){
    padding-top:0 !important;
    padding-bottom:0 !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-head{
    margin-bottom:10px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-head{
    margin-bottom:4px !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-head p,
html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-head p{
    margin-top:4px !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-field{
    margin-bottom:5px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-field{
    margin-bottom:2px !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-field input{
    padding-top:4px !important;
    padding-bottom:4px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-field input{
    padding-top:3px !important;
    padding-bottom:3px !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-turnstile-wrap{
    margin-top:2px !important;
    margin-bottom:2px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-turnstile-wrap{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-submit{
    margin-top:0 !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-submit{
    margin-top:0 !important;
    padding-top:3px !important;
    padding-bottom:3px !important;
}

html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-mode{
    margin-top:5px !important;
}

html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]) .auth-modal-mode{
    margin-top:2px !important;
}

/* Keep the compressed signup card inside the viewport. */
html[data-ui-scale="large"] .auth-modal-card:has(#authLegalWrap[style*="block"]),
html[data-ui-scale="xl"] .auth-modal-card:has(#authLegalWrap[style*="block"]){
    max-height:calc(100dvh - 24px) !important;
    overflow-y:auto !important;
}
/* =========================================================
   AUTH MODAL POSITIONING — SCALE-SPECIFIC
========================================================= */

/* Move the whole Create account modal downward in A and A++. */
html[data-ui-scale="normal"] .auth-modal-overlay.signup-mode .auth-modal-card,
html:not([data-ui-scale]) .auth-modal-overlay.signup-mode .auth-modal-card{
    transform:translateY(20px);
}

html[data-ui-scale="xl"] .auth-modal-overlay.signup-mode .auth-modal-card{
    transform:translateY(20px);
}

/* Close button: 10px down + 10px right in every UI size. */
.auth-modal-close{
    transform:translate(10px,10px);
    transition:none !important;
}

.auth-modal-close:hover,
.auth-modal-close:focus,
.auth-modal-close:focus-visible,
.auth-modal-close:active{
    transform:translate(10px,10px) !important;
}

/* Sign in close button: move 20px upward from the current position. */
.auth-modal-overlay:not(.signup-mode) .auth-modal-close{
    transform:translate(10px,-10px);
}

.auth-modal-overlay:not(.signup-mode) .auth-modal-close:hover,
.auth-modal-overlay:not(.signup-mode) .auth-modal-close:focus,
.auth-modal-overlay:not(.signup-mode) .auth-modal-close:focus-visible,
.auth-modal-overlay:not(.signup-mode) .auth-modal-close:active{
    transform:translate(10px,-10px) !important;
}
/* Create account close button: 10px upward from its current position. */
.auth-modal-overlay.signup-mode .auth-modal-close{
    transform:translate(10px,0) !important;
}

.auth-modal-overlay.signup-mode .auth-modal-close:hover,
.auth-modal-overlay.signup-mode .auth-modal-close:focus,
.auth-modal-overlay.signup-mode .auth-modal-close:focus-visible,
.auth-modal-overlay.signup-mode .auth-modal-close:active{
    transform:translate(10px,0) !important;
}
/* Auth username field alignment */
#authUsernameWrap{
    transform:translateY(10px);
}

/* Signup-only alignment */
#authModalOverlay.signup-mode .auth-modal-head{
    transform:translateY(10px);
}

#authModalOverlay.signup-mode #authUsernameWrap{
    transform:translateY(10px);
}
/* Create account heading alignment */
.auth-modal-overlay.signup-mode .auth-modal-head{
    transform:translateY(10px);
}
/* Sign-in reached after Create account: keep the close button aligned with the initial Sign in position. */
.auth-modal-overlay.returned-signin-mode .auth-modal-close{
    transform:translate(10px,-10px);
}
.auth-modal-overlay.returned-signin-mode .auth-modal-close:hover,
.auth-modal-overlay.returned-signin-mode .auth-modal-close:focus,
.auth-modal-overlay.returned-signin-mode .auth-modal-close:focus-visible,
.auth-modal-overlay.returned-signin-mode .auth-modal-close:active{
    transform:translate(10px,-10px) !important;
}
.auth-username-rules{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
    line-height:1.4;
}
.auth-modal-overlay:not(.signup-mode) .auth-username-rules{
    display:none;
}


/* PHONE-ONLY AUTH MODAL POLISH — Sign in, Create account, and returned Sign in. */
@media (max-width:700px){
    /* Keep the dialog physically inside the phone viewport at every UI scale. */
    #authModalOverlay{
        padding:calc(12px / var(--ui-scale,1)) !important;
        align-items:center !important;
        justify-content:center !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
    }

    #authModalOverlay .auth-modal-card{
        width:min(
            calc(430px / var(--ui-scale,1)),
            calc((100vw - 24px) / var(--ui-scale,1))
        ) !important;
        max-width:100% !important;
        max-height:calc((100dvh - 24px) / var(--ui-scale,1)) !important;
        box-sizing:border-box !important;
        padding:
            calc(22px / var(--ui-scale,1))
            calc(20px / var(--ui-scale,1))
            calc(18px / var(--ui-scale,1)) !important;
        border-radius:20px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        transform:none !important;
    }

    #authModalOverlay .auth-modal-head{
        display:flex !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:calc(12px / var(--ui-scale,1)) !important;
        margin-bottom:calc(18px / var(--ui-scale,1)) !important;
        transform:none !important;
    }

    #authModalOverlay .auth-modal-head > div{
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    #authModalOverlay .auth-modal-head h2{
        font-size:clamp(20px,5.7vw,24px) !important;
        line-height:1.16 !important;
        letter-spacing:-.035em;
        overflow-wrap:normal;
    }

    #authModalOverlay .auth-modal-head p{
        margin-top:calc(7px / var(--ui-scale,1)) !important;
        font-size:12px !important;
        line-height:1.45 !important;
    }

    /* Keep the close control inside the card; no desktop-only offsets on phones. */
    #authModalOverlay .auth-modal-close,
    #authModalOverlay .auth-modal-close:hover,
    #authModalOverlay .auth-modal-close:focus,
    #authModalOverlay .auth-modal-close:focus-visible,
    #authModalOverlay .auth-modal-close:active{
        width:36px !important;
        height:36px !important;
        flex:0 0 36px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 !important;
        font-size:18px !important;
        line-height:1 !important;
        transform:none !important;
    }

    #authModalOverlay #authForm{
        min-width:0;
    }

    #authModalOverlay .auth-field{
        margin-bottom:calc(14px / var(--ui-scale,1)) !important;
        min-width:0;
    }

    #authModalOverlay .auth-field > label,
    #authModalOverlay .auth-password-label-row label{
        margin-bottom:calc(6px / var(--ui-scale,1)) !important;
        font-size:12px !important;
        line-height:1.35 !important;
    }

    #authModalOverlay .auth-field input{
        min-height:calc(46px / var(--ui-scale,1)) !important;
        padding:
            calc(10px / var(--ui-scale,1))
            calc(12px / var(--ui-scale,1)) !important;
        border-radius:12px !important;
        font-size:15px !important;
        line-height:1.35 !important;
    }

    #authModalOverlay .auth-password-label-row{
        gap:8px !important;
        margin-bottom:calc(6px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay .auth-forgot-link{
        font-size:11px !important;
        white-space:nowrap;
    }

    #authModalOverlay .auth-password-input-wrap input{
        padding-right:calc(48px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay .auth-password-toggle{
        width:calc(38px / var(--ui-scale,1)) !important;
        height:calc(38px / var(--ui-scale,1)) !important;
        right:calc(5px / var(--ui-scale,1)) !important;
        font-size:25px !important;
    }

    #authModalOverlay #authUsernameWrap{
        transform:none !important;
    }

    #authModalOverlay .auth-username-availability{
        min-height:0 !important;
        margin-top:calc(5px / var(--ui-scale,1)) !important;
        font-size:10px !important;
        line-height:1.4 !important;
    }

    #authModalOverlay .auth-username-rules{
        margin-top:calc(5px / var(--ui-scale,1)) !important;
        font-size:10px !important;
        line-height:1.45 !important;
    }

    #authModalOverlay .auth-legal-wrap{
        margin:0 0 calc(12px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay .auth-legal-check{
        gap:calc(9px / var(--ui-scale,1)) !important;
        font-size:11px !important;
        line-height:1.5 !important;
    }

    #authModalOverlay .auth-legal-check input{
        width:16px !important;
        height:16px !important;
        flex:0 0 16px !important;
    }

    #authModalOverlay .auth-turnstile-wrap{
        width:100% !important;
        min-height:0 !important;
        margin:
            calc(8px / var(--ui-scale,1))
            0
            calc(14px / var(--ui-scale,1)) !important;
    }

    /* Counteract page zoom for the fixed-size Cloudflare verification widget. */
    #authModalOverlay #authTurnstile{
        max-width:100%;
        zoom:calc(1 / var(--ui-scale,1));
    }

    #authModalOverlay #authTurnstile iframe{
        max-width:100% !important;
    }

    #authModalOverlay .auth-modal-submit{
        min-height:calc(46px / var(--ui-scale,1)) !important;
        margin-top:calc(4px / var(--ui-scale,1)) !important;
        padding:
            calc(11px / var(--ui-scale,1))
            calc(14px / var(--ui-scale,1)) !important;
        border-radius:12px !important;
        font-size:14px !important;
    }

    #authModalOverlay .auth-modal-status{
        min-height:20px !important;
        margin-top:calc(10px / var(--ui-scale,1)) !important;
        font-size:11px !important;
        line-height:1.45 !important;
    }

    #authModalOverlay .auth-modal-mode{
        margin-top:calc(14px / var(--ui-scale,1)) !important;
        font-size:12px !important;
        line-height:1.5 !important;
    }

    /* Undo signup-only desktop offsets and compression on phones. */
    #authModalOverlay.signup-mode .auth-modal-head{
        transform:none !important;
    }

    #authModalOverlay.signup-mode .auth-modal-card:has(#authLegalWrap[style*="block"]){
        padding:
            calc(22px / var(--ui-scale,1))
            calc(20px / var(--ui-scale,1))
            calc(18px / var(--ui-scale,1)) !important;
        max-height:calc((100dvh - 24px) / var(--ui-scale,1)) !important;
        overflow-y:auto !important;
    }
}

@media (max-width:360px){
    /* Fit the fixed-size Cloudflare widget on especially narrow phones. */
    #authModalOverlay #authTurnstile{
        width:calc(100% / .82);
        transform:scale(.82);
        transform-origin:top left;
        margin-bottom:-12px;
    }
}


/* PHONE-ONLY SIGNUP CARD HEIGHT FIX — keep the full Create account heading visible. */
@media (max-width:700px){
    /* Signup only: start lower on the screen so its top edge cannot be clipped. */
    #authModalOverlay.signup-mode{
        align-items:flex-start !important;
        justify-content:center !important;
        padding:
            calc(20px / var(--ui-scale,1))
            calc(12px / var(--ui-scale,1))
            calc(12px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-modal-card{
        width:min(
            calc(390px / var(--ui-scale,1)),
            calc((100vw - 24px) / var(--ui-scale,1))
        ) !important;
        max-width:100% !important;
        max-height:calc((100dvh - 34px) / var(--ui-scale,1)) !important;
        margin:0 auto !important;
        padding:
            calc(14px / var(--ui-scale,1))
            calc(16px / var(--ui-scale,1))
            calc(12px / var(--ui-scale,1)) !important;
        border-radius:17px !important;
        transform:none !important;
    }

    #authModalOverlay.signup-mode .auth-modal-head{
        gap:calc(8px / var(--ui-scale,1)) !important;
        margin-bottom:calc(10px / var(--ui-scale,1)) !important;
        transform:none !important;
    }

    #authModalOverlay.signup-mode .auth-modal-head h2{
        font-size:calc(19px / var(--ui-scale,1)) !important;
        line-height:1.16 !important;
        letter-spacing:-.025em !important;
    }

    #authModalOverlay.signup-mode .auth-modal-head p{
        margin-top:calc(4px / var(--ui-scale,1)) !important;
        font-size:calc(10px / var(--ui-scale,1)) !important;
        line-height:1.35 !important;
    }

    #authModalOverlay.signup-mode .auth-modal-close,
    #authModalOverlay.signup-mode .auth-modal-close:hover,
    #authModalOverlay.signup-mode .auth-modal-close:focus,
    #authModalOverlay.signup-mode .auth-modal-close:focus-visible,
    #authModalOverlay.signup-mode .auth-modal-close:active{
        width:calc(32px / var(--ui-scale,1)) !important;
        height:calc(32px / var(--ui-scale,1)) !important;
        flex-basis:calc(32px / var(--ui-scale,1)) !important;
        font-size:calc(16px / var(--ui-scale,1)) !important;
        transform:none !important;
    }

    #authModalOverlay.signup-mode .auth-field{
        margin-bottom:calc(7px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-field > label,
    #authModalOverlay.signup-mode .auth-password-label-row label{
        margin-bottom:calc(4px / var(--ui-scale,1)) !important;
        font-size:calc(10px / var(--ui-scale,1)) !important;
        line-height:1.25 !important;
    }

    #authModalOverlay.signup-mode .auth-field input{
        min-height:calc(36px / var(--ui-scale,1)) !important;
        padding:
            calc(7px / var(--ui-scale,1))
            calc(10px / var(--ui-scale,1)) !important;
        border-radius:10px !important;
        font-size:calc(13px / var(--ui-scale,1)) !important;
        line-height:1.3 !important;
    }

    #authModalOverlay.signup-mode .auth-password-input-wrap input{
        padding-right:calc(42px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-password-toggle{
        width:calc(34px / var(--ui-scale,1)) !important;
        height:calc(34px / var(--ui-scale,1)) !important;
        right:calc(4px / var(--ui-scale,1)) !important;
        font-size:calc(22px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode #authUsernameWrap{
        transform:none !important;
    }

    #authModalOverlay.signup-mode .auth-username-availability{
        min-height:0 !important;
        margin-top:calc(3px / var(--ui-scale,1)) !important;
        font-size:calc(9px / var(--ui-scale,1)) !important;
        line-height:1.3 !important;
    }

    #authModalOverlay.signup-mode .auth-username-rules{
        margin-top:calc(3px / var(--ui-scale,1)) !important;
        font-size:calc(8px / var(--ui-scale,1)) !important;
        line-height:1.35 !important;
    }

    #authModalOverlay.signup-mode .auth-legal-wrap{
        margin:0 0 calc(7px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-legal-check{
        gap:calc(7px / var(--ui-scale,1)) !important;
        font-size:calc(9px / var(--ui-scale,1)) !important;
        line-height:1.35 !important;
    }

    #authModalOverlay.signup-mode .auth-turnstile-wrap{
        margin:
            calc(4px / var(--ui-scale,1))
            0
            calc(7px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-modal-submit{
        min-height:calc(38px / var(--ui-scale,1)) !important;
        margin-top:0 !important;
        padding:
            calc(8px / var(--ui-scale,1))
            calc(11px / var(--ui-scale,1)) !important;
        border-radius:10px !important;
        font-size:calc(12px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-modal-status{
        min-height:calc(12px / var(--ui-scale,1)) !important;
        margin-top:calc(5px / var(--ui-scale,1)) !important;
        font-size:calc(9px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-modal-mode{
        margin-top:calc(7px / var(--ui-scale,1)) !important;
        font-size:calc(10px / var(--ui-scale,1)) !important;
        line-height:1.35 !important;
    }
}

/* On short phones, keep the signup card's top edge visible and allow its content to scroll. */
@media (max-width:700px) and (max-height:700px){
    #authModalOverlay.signup-mode{
        align-items:flex-start !important;
        padding-top:calc(12px / var(--ui-scale,1)) !important;
    }

    #authModalOverlay.signup-mode .auth-modal-card{
        max-height:calc((100dvh - 24px) / var(--ui-scale,1)) !important;
    }
}


/* PHONE-ONLY SIGNUP MODAL: move the whole Create account card down by 50px. */
@media (max-width:700px){
    #authModalOverlay.signup-mode .auth-modal-card{
        transform:translateY(50px) !important;
    }
}

/* Auth modal close buttons: match the subtle 2px upward hover lift. */
#authModalOverlay .auth-modal-close{
    transition:transform .2s ease !important;
}

#authModalOverlay:not(.signup-mode) .auth-modal-close:hover,
#authModalOverlay:not(.signup-mode) .auth-modal-close:focus,
#authModalOverlay:not(.signup-mode) .auth-modal-close:focus-visible,
#authModalOverlay:not(.signup-mode) .auth-modal-close:active{
    transform:translate(10px,-12px) !important;
}

#authModalOverlay.signup-mode .auth-modal-close:hover,
#authModalOverlay.signup-mode .auth-modal-close:focus,
#authModalOverlay.signup-mode .auth-modal-close:focus-visible,
#authModalOverlay.signup-mode .auth-modal-close:active{
    transform:translate(10px,-2px) !important;
}

/* Phone layout resets the X button's base transform, so lift it relative to that position. */
@media (max-width:700px){
    #authModalOverlay:not(.signup-mode) .auth-modal-close:hover,
    #authModalOverlay:not(.signup-mode) .auth-modal-close:focus,
    #authModalOverlay:not(.signup-mode) .auth-modal-close:focus-visible,
    #authModalOverlay:not(.signup-mode) .auth-modal-close:active,
    #authModalOverlay.signup-mode .auth-modal-close:hover,
    #authModalOverlay.signup-mode .auth-modal-close:focus,
    #authModalOverlay.signup-mode .auth-modal-close:focus-visible,
    #authModalOverlay.signup-mode .auth-modal-close:active{
        transform:translateY(-2px) !important;
    }
}

/* URL-addressable legal documents: render as a full page, not a modal overlay. */
html.legal-page-mode,
html.legal-page-mode body{
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
}

html.legal-page-mode body > :not(#legalOverlay){
    display:none !important;
}

html.legal-page-mode #legalOverlay{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    width:100%;
    min-height:100vh;
    box-sizing:border-box;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding:clamp(16px,4vh,40px) 16px !important;
    background:transparent !important;
    backdrop-filter:none !important;
}

html.legal-page-mode #legalOverlay .legal-modal{
    width:min(900px,100%) !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 auto;
    overflow:hidden;
}

html.legal-page-mode #legalOverlay .legal-content{
    overflow:visible !important;
    flex:0 0 auto !important;
}

@media(max-width:700px){
    html.legal-page-mode #legalOverlay{
        padding:12px !important;
    }

    html.legal-page-mode #legalOverlay .legal-modal{
        min-height:0 !important;
        border-radius:18px;
    }

    html.legal-page-mode #legalOverlay .legal-modal-head{
        padding:18px 16px 14px;
    }

    html.legal-page-mode #legalOverlay .legal-nav{
        padding:10px 14px;
    }

    html.legal-page-mode #legalOverlay .legal-content{
        padding:18px 16px;
        font-size:13px;
    }
}


/* Clickable affiliate-source cards and the partner information dialog. */
.shop-partner-card{
    appearance:none;
    width:100%;
    text-align:left;
    font-family:inherit;
    color:var(--text);
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.shop-partner-card:hover{
    transform:translateY(-1px);
    border-color:rgba(124,92,255,.48);
    background:rgba(124,92,255,.055);
}

.shop-partner-card:focus-visible{
    outline:2px solid var(--primary2);
    outline-offset:2px;
    border-color:rgba(124,92,255,.58);
    box-shadow:var(--focus-ring);
}

.shop-partner-status.pending{
    color:var(--warning);
    border-color:rgba(251,191,36,.34);
    background:rgba(251,191,36,.075);
}

.shop-partner-modal-overlay{
    position:fixed;
    inset:0;
    z-index:15000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,6,23,.74);
    backdrop-filter:blur(12px);
}

.shop-partner-modal-overlay[hidden]{
    display:none !important;
}

.shop-partner-modal{
    width:min(620px,100%);
    max-height:min(800px,calc(100vh - 40px));
    overflow:auto;
    padding:24px;
    border:1px solid var(--border);
    border-radius:24px;
    background:var(--card-solid,var(--bg2));
    color:var(--text);
    box-shadow:0 30px 90px rgba(0,0,0,.42);
    overscroll-behavior:contain;
}

.shop-partner-modal-header,
.shop-partner-modal-brand{
    display:flex;
    align-items:center;
    min-width:0;
}

.shop-partner-modal-header{
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.shop-partner-modal-brand{
    gap:12px;
}

.shop-partner-modal-icon{
    display:grid;
    place-items:center;
    flex:0 0 46px;
    width:46px;
    height:46px;
    border:1px solid rgba(124,92,255,.2);
    border-radius:14px;
    background:rgba(124,92,255,.1);
    font-size:22px;
}

.shop-partner-modal-title-wrap{
    min-width:0;
}

.shop-partner-modal-title-wrap > span{
    display:block;
    margin-bottom:2px;
    color:var(--muted2);
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.shop-partner-modal-title-wrap h3{
    color:var(--text);
    font-size:clamp(18px,3vw,23px);
    font-weight:900;
    line-height:1.2;
    overflow-wrap:anywhere;
}

.shop-partner-modal-close{
    display:grid;
    place-items:center;
    flex:0 0 38px;
    width:38px;
    height:38px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-soft);
    color:var(--text);
    font-size:24px;
    line-height:1;
    transition:transform .18s ease,border-color .18s ease;
}

.shop-partner-modal-close:hover{
    transform:translateY(-1px) scale(1.035);
    border-color:rgba(124,92,255,.45);
}

.shop-partner-modal-body{
    display:grid;
    gap:14px;
}

.shop-partner-detail-summary{
    padding:14px 15px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface-soft);
}

.shop-partner-detail-summary p{
    color:var(--text);
    font-size:13px;
    line-height:1.65;
}

.shop-partner-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.shop-partner-detail-item{
    min-width:0;
    padding:13px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

.shop-partner-detail-label{
    display:block;
    margin-bottom:5px;
    color:var(--muted2);
    font-size:9px;
    font-weight:900;
    letter-spacing:.65px;
    text-transform:uppercase;
}

.shop-partner-detail-item strong{
    display:block;
    color:var(--text);
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.shop-partner-special-offer{
    padding:15px;
    border:1px solid rgba(251,191,36,.28);
    border-radius:16px;
    background:rgba(251,191,36,.045);
}

.shop-partner-special-offer-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.shop-partner-special-offer h4{
    color:var(--text);
    font-size:14px;
    font-weight:900;
    line-height:1.4;
}

.shop-partner-special-offer-head > span{
    flex:0 0 auto;
    max-width:45%;
    padding:5px 8px;
    border:1px solid rgba(251,191,36,.28);
    border-radius:999px;
    color:var(--warning);
    font-size:9px;
    font-weight:900;
    text-align:center;
}

.shop-partner-special-offer p{
    color:var(--muted);
    font-size:12px;
    line-height:1.65;
}

.shop-partner-modal-disclosure{
    color:var(--muted2);
    font-size:10px;
    line-height:1.6;
}

body.shop-partner-modal-open{
    overflow:hidden;
}

html[data-theme="light"] .shop-partner-card:hover{
    background:rgba(124,92,255,.055);
}

html[data-theme="light"] .shop-partner-modal{
    background:#ffffff;
    color:#0f172a;
}

html[data-theme="light"] .shop-partner-modal-title-wrap h3,
html[data-theme="light"] .shop-partner-detail-summary p,
html[data-theme="light"] .shop-partner-detail-item strong,
html[data-theme="light"] .shop-partner-special-offer h4{
    color:#0f172a;
}

html[data-theme="light"] .shop-partner-detail-item{
    background:rgba(15,23,42,.025);
}

@media(max-width:700px){
    .shop-partner-modal-overlay{
        padding:12px;
    }

    .shop-partner-modal{
        max-height:calc(100vh - 24px);
        padding:18px;
        border-radius:20px;
    }

    .shop-partner-modal-header{
        gap:9px;
        margin-bottom:14px;
    }

    .shop-partner-modal-icon{
        flex-basis:40px;
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .shop-partner-detail-grid{
        grid-template-columns:1fr;
        gap:8px;
    }

    .shop-partner-special-offer-head{
        flex-direction:column;
        gap:6px;
    }

    .shop-partner-special-offer-head > span{
        max-width:100%;
    }
}

.shop-partner-open-indicator{
    flex:0 0 auto;
    margin-left:1px;
    color:var(--muted2);
    font-size:11px;
    font-weight:900;
    line-height:1;
    transition:color .18s ease,transform .18s ease;
}

.shop-partner-card:hover .shop-partner-open-indicator{
    color:var(--primary2);
    transform:translate(1px,-1px);
}


/* Worth It profile panel and shareable full-page profile */
.account-divider{height:1px;background:var(--border);margin:10px 2px 8px}
.account-view-profile-btn{margin-top:0;justify-content:flex-start}
.account-action-arrow{margin-left:auto;color:var(--muted);font-size:17px}
.social-preview-item strong{font-variant-numeric:tabular-nums}
.worth-it-profile-section{min-height:calc(100vh - 84px);padding:30px 0 64px;box-sizing:border-box}
.worth-it-profile-container{max-width:900px}
.worth-it-profile-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.worth-it-profile-eyebrow,.worth-it-profile-overline{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.worth-it-profile-card{width:100%;max-width:760px;margin:0 auto;padding:clamp(18px,4vw,34px);box-sizing:border-box;background:var(--card-solid,var(--card));border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}

.worth-it-profile-cover{position:relative;isolation:isolate;overflow:hidden;margin:calc(-1 * clamp(18px,4vw,34px)) calc(-1 * clamp(18px,4vw,34px)) 0;padding:clamp(18px,4vw,34px);border-radius:23px 23px 0 0;background:var(--card-solid,var(--card))}
.worth-it-profile-banner-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.worth-it-profile-cover.has-banner:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,rgba(3,6,18,.86),rgba(3,6,18,.60) 58%,rgba(3,6,18,.38))}
.worth-it-profile-cover.has-banner .worth-it-profile-header{position:relative;z-index:2}
.worth-it-profile-cover.has-banner .worth-it-profile-heading h1{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.worth-it-profile-cover.has-banner .worth-it-profile-username,.worth-it-profile-cover.has-banner .worth-it-profile-email,.worth-it-profile-cover.has-banner .worth-it-profile-avatar-guidance{color:rgba(255,255,255,.88)}
.worth-it-profile-cover.has-banner .worth-it-profile-avatar-action{background:rgba(15,23,42,.78);border-color:rgba(255,255,255,.4);color:#fff}
.worth-it-profile-cover.has-banner .worth-it-profile-avatar-limit{color:#ff8585}

.worth-it-profile-header{display:flex;align-items:center;gap:18px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.worth-it-profile-avatar-wrap{width:88px;height:88px;flex:0 0 88px;display:grid;place-items:center}
.worth-it-profile-avatar,.worth-it-profile-avatar-fallback{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid var(--border);box-sizing:border-box}
.worth-it-profile-avatar-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;font-size:30px;font-weight:900}
.worth-it-profile-heading{min-width:0}
.worth-it-profile-heading h1{margin:0;font-size:clamp(23px,3.5vw,32px);font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.worth-it-profile-username,.worth-it-profile-email{margin:6px 0 0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.worth-it-profile-id-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.worth-it-profile-id-row>div{display:flex;flex-direction:column;gap:5px}
.worth-it-profile-id-row strong{font-size:23px;font-weight:900;font-variant-numeric:tabular-nums}
.worth-it-profile-id-note{font-size:12px;color:var(--muted);text-align:right}
.worth-it-profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;margin-bottom:22px}
.worth-it-profile-stat{padding:16px 10px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft);text-align:center;min-width:0}
.worth-it-profile-stat strong{display:block;font-size:25px;font-weight:900;font-variant-numeric:tabular-nums}
.worth-it-profile-stat span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.worth-it-profile-status{margin:0 0 18px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);color:var(--muted);font-size:13px;line-height:1.55}
.worth-it-profile-status.is-error{border-color:rgba(239,68,68,.28);color:var(--danger)}
.worth-it-profile-share{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}
.worth-it-profile-share-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.worth-it-profile-share-copy .worth-it-profile-overline{color:var(--text);font-weight:900}
.worth-it-profile-share-copy a{color:var(--text);font-size:13px;overflow-wrap:anywhere;text-decoration:none}
.worth-it-profile-share-copy a:hover{text-decoration:underline}
.worth-it-profile-copy{flex:0 0 auto;white-space:nowrap}

.worth-it-profile-avatar-controls{margin-top:12px;max-width:100%;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:12px;align-items:center}
.worth-it-profile-banner-controls{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.worth-it-profile-cover.has-banner .worth-it-profile-banner-controls{border-top-color:rgba(255,255,255,.28)}
.worth-it-profile-avatar-controls[hidden],.worth-it-profile-avatar-action[hidden]{display:none!important}
.worth-it-profile-avatar-actions{grid-column:1;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.worth-it-profile-avatar-action{appearance:none;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);padding:7px 10px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.worth-it-profile-avatar-action:hover,.worth-it-profile-avatar-action:focus-visible{border-color:var(--primary);transform:translateY(-1px)}
.worth-it-profile-avatar-action:disabled{opacity:.6;cursor:wait;transform:none}
.worth-it-profile-avatar-remove{color:var(--danger)}
.worth-it-profile-avatar-guidance{grid-column:1/-1;grid-row:2;margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.5;max-width:440px}
.worth-it-profile-avatar-limit{grid-column:2;grid-row:1;align-self:center;margin:0;color:#ef4444;font-size:10px;font-weight:800;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.worth-it-profile-avatar-limit[hidden]{display:none!important}

.worth-it-profile-member-since{margin:16px 0 0;color:var(--muted);font-size:12px}
html[data-theme="light"] .worth-it-profile-card{background:#fff}
@media(max-width:520px){
 .worth-it-profile-avatar-controls{grid-template-columns:minmax(0,1fr);row-gap:0}
 .worth-it-profile-avatar-actions{grid-column:1;grid-row:1}
 .worth-it-profile-avatar-limit{grid-column:1;grid-row:2;margin-top:8px}
 .worth-it-profile-avatar-guidance{grid-column:1;grid-row:3}
 .worth-it-profile-banner-controls{margin-top:14px}
 .worth-it-profile-section{padding:18px 0 44px}
 .worth-it-profile-toolbar{align-items:flex-start}
 .worth-it-profile-header{gap:13px}
 .worth-it-profile-avatar-wrap,.worth-it-profile-avatar,.worth-it-profile-avatar-fallback{width:66px;height:66px;flex-basis:66px}
 .worth-it-profile-avatar-fallback{font-size:24px}
 .worth-it-profile-id-row{align-items:flex-start;flex-direction:column}
 .worth-it-profile-id-note{text-align:left}
 .worth-it-profile-stats{gap:6px}
 .worth-it-profile-stat{padding:12px 5px}
 .worth-it-profile-stat strong{font-size:21px}
 .worth-it-profile-stat span{font-size:11px}
 .worth-it-profile-share{align-items:stretch;flex-direction:column}
 .worth-it-profile-copy{width:100%}
}


/* Profile banner: use the uploaded image as the background for the entire profile card. */
.worth-it-profile-card{position:relative;isolation:isolate;overflow:hidden}
.worth-it-profile-card.has-banner{color:#fff;border-color:rgba(255,255,255,.25)}
.worth-it-profile-card.has-banner:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,rgba(3,6,18,.84),rgba(3,6,18,.63) 48%,rgba(3,6,18,.82))}
.worth-it-profile-card>.worth-it-profile-banner-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.worth-it-profile-card>:not(.worth-it-profile-banner-image){position:relative;z-index:2}
.worth-it-profile-card.has-banner .worth-it-profile-cover{background:transparent}
.worth-it-profile-cover.has-banner:before{background:transparent}
.worth-it-profile-card.has-banner .worth-it-profile-header{border-bottom-color:rgba(255,255,255,.25)}
.worth-it-profile-card.has-banner .worth-it-profile-id-row .worth-it-profile-overline,
.worth-it-profile-card.has-banner .worth-it-profile-id-note,
.worth-it-profile-card.has-banner .worth-it-profile-member-since{color:rgba(255,255,255,.82)}
.worth-it-profile-card.has-banner .worth-it-profile-stat{background:rgba(10,16,32,.58);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}
.worth-it-profile-card.has-banner .worth-it-profile-stat span{color:rgba(255,255,255,.78)}
.worth-it-profile-card.has-banner .worth-it-profile-share{background:rgba(10,16,32,.58);border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.worth-it-profile-card.has-banner .worth-it-profile-share-copy a{color:#fff}
.worth-it-profile-card.has-banner .worth-it-profile-status:not(.is-error){background:rgba(10,16,32,.62);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}
.worth-it-profile-card.has-banner .worth-it-profile-status.is-error{background:rgba(58,8,14,.78);border-color:rgba(255,125,125,.48);color:#ffc4c4}
.worth-it-profile-card.has-banner .worth-it-profile-avatar-remove{color:#ffc4c4}
@media(prefers-reduced-transparency:reduce){
 .worth-it-profile-card.has-banner .worth-it-profile-stat,
 .worth-it-profile-card.has-banner .worth-it-profile-share,
 .worth-it-profile-card.has-banner .worth-it-profile-status{backdrop-filter:none}
}


/* Mini account profile: reuse the saved banner (including animated GIFs) as its background. */
.account-panel{isolation:isolate}
.account-panel>.account-panel-banner-image{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:inherit;pointer-events:none}
.account-panel>.account-panel-banner-image[hidden]{display:none!important}
.account-panel.has-banner{background:rgba(7,12,25,.3);border-color:rgba(255,255,255,.3);color:#fff}
.account-panel.has-banner:before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(3,6,18,.84),rgba(3,6,18,.63) 58%,rgba(3,6,18,.78))}
.account-panel>:not(.account-panel-banner-image){position:relative;z-index:2}
.account-panel.has-banner .account-name{color:#fff}
.account-panel.has-banner .account-email{color:rgba(255,255,255,.82)}
.account-panel.has-banner .account-head{border-bottom-color:rgba(255,255,255,.27)}
.account-panel.has-banner .account-head-avatar{border-color:rgba(255,255,255,.55)}
.account-panel.has-banner .social-preview-item{background:rgba(10,16,32,.56);border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.account-panel.has-banner .social-preview-item strong{color:#fff}
.account-panel.has-banner .social-preview-item span{color:rgba(255,255,255,.78)}
.account-panel.has-banner .account-divider{background:rgba(255,255,255,.25)}
.account-panel.has-banner .account-action{color:#fff}
.account-panel.has-banner .account-action:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26)}
@media(prefers-reduced-transparency:reduce){
 .account-panel.has-banner .social-preview-item{backdrop-filter:none}
}


/* Full-bleed profile section: the uploaded banner is confined to this section, never the site header or footer. */
.worth-it-profile-section{position:relative;isolation:isolate;min-height:calc(100vh - 84px);padding:24px 0 42px;box-sizing:border-box;background:transparent}
.worth-it-profile-section>.worth-it-profile-banner-image{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.worth-it-profile-section>.worth-it-profile-banner-image[hidden]{display:none!important}
.worth-it-profile-section.has-banner:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,rgba(3,6,18,.84),rgba(3,6,18,.66) 48%,rgba(3,6,18,.82))}
.worth-it-profile-container{position:relative;z-index:2;width:100%;max-width:none;margin:0 auto;padding:0 clamp(14px,2.8vw,42px);box-sizing:border-box}
.worth-it-profile-toolbar{max-width:none}
.worth-it-profile-card,.worth-it-profile-section .worth-it-profile-card{position:relative;isolation:auto;overflow:visible;width:100%;max-width:none;min-height:0;margin:0;padding:0;box-sizing:border-box;background:transparent;border:0;border-radius:0;box-shadow:none}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-card{background:transparent}
.worth-it-profile-cover{position:relative;isolation:auto;overflow:visible;margin:0;padding:0 0 24px;border:0;border-radius:0;background:transparent}
.worth-it-profile-section.has-banner .worth-it-profile-cover{background:transparent}
.worth-it-profile-section>.worth-it-profile-container{position:relative;z-index:2}
.worth-it-profile-section.has-banner .worth-it-profile-toolbar{position:relative;z-index:2}
.worth-it-profile-section.has-banner .worth-it-profile-eyebrow,
.worth-it-profile-section.has-banner .worth-it-profile-id-row .worth-it-profile-overline,
.worth-it-profile-section.has-banner .worth-it-profile-id-row strong,
.worth-it-profile-section.has-banner .worth-it-profile-id-note,
.worth-it-profile-section.has-banner .worth-it-profile-member-since{color:rgba(255,255,255,.9)}
.worth-it-profile-section.has-banner .worth-it-profile-header{border-bottom-color:rgba(255,255,255,.25)}
.worth-it-profile-section.has-banner .worth-it-profile-stat{background:rgba(10,16,32,.58);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}
.worth-it-profile-section.has-banner .worth-it-profile-stat span{color:rgba(255,255,255,.8)}
.worth-it-profile-section.has-banner .worth-it-profile-share{background:rgba(10,16,32,.58);border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.worth-it-profile-section.has-banner .worth-it-profile-share-copy a{color:#fff}
.worth-it-profile-section.has-banner .worth-it-profile-status:not(.is-error){background:rgba(10,16,32,.62);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.92)}
.worth-it-profile-section.has-banner .worth-it-profile-status.is-error{background:rgba(58,8,14,.78);border-color:rgba(255,125,125,.48);color:#ffc4c4}
.worth-it-profile-section.has-banner .worth-it-profile-avatar-remove{color:#ffc4c4}
@media(max-width:520px){
 .worth-it-profile-section{min-height:calc(100vh - 84px);padding:18px 0 36px}
 .worth-it-profile-container{width:100%;padding:0 14px}
 .worth-it-profile-card,.worth-it-profile-section .worth-it-profile-card{padding:0}
 .worth-it-profile-cover{padding-bottom:20px}
}
@media(prefers-reduced-transparency:reduce){
 .worth-it-profile-section.has-banner .worth-it-profile-stat,
 .worth-it-profile-section.has-banner .worth-it-profile-share,
 .worth-it-profile-section.has-banner .worth-it-profile-status{backdrop-filter:none}
}


/* Extend the profile banner visually behind the footer while keeping the sticky site header clear. */
.profile-banner-backdrop{position:fixed!important;top:var(--profile-banner-top,72px)!important;right:0!important;bottom:0!important;left:0!important;z-index:0!important;display:block;width:100%!important;height:calc(100vh - var(--profile-banner-top,72px))!important;height:calc(100dvh - var(--profile-banner-top,72px))!important;max-width:none!important;object-fit:cover;object-position:center;pointer-events:none}
.profile-banner-backdrop[hidden]{display:none!important}
html.profile-banner-active body:before{content:"";position:fixed;top:var(--profile-banner-top,72px);right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,rgba(3,6,18,.82),rgba(3,6,18,.65) 48%,rgba(3,6,18,.82))}
html.profile-banner-active .nav{background:rgba(7,11,20,.97)}
html.profile-banner-active #profileSection{position:relative;z-index:2;background:transparent}
html.profile-banner-active footer{position:relative;z-index:2;background:transparent!important;border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.9)}
html.profile-banner-active footer .footer-legal-links{color:rgba(255,255,255,.82)}
html.profile-banner-active footer .footer-legal-links button{color:rgba(255,255,255,.82)}
html.profile-banner-active footer .footer-legal-links button:hover,
html.profile-banner-active footer .footer-legal-links button:focus-visible{color:#fff}
html.profile-banner-active footer .feedback-trigger{color:#fff}
html.profile-banner-active .worth-it-profile-section.has-banner:before{background:transparent}
@media(prefers-reduced-transparency:reduce){
 html.profile-banner-active body:before{background:rgba(3,6,18,.76)}
}


/* Display-name editor — the username beneath it remains read-only for now. */
.worth-it-profile-name-row{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.worth-it-profile-name-row h1{min-width:0}
.worth-it-profile-display-name-edit{width:32px;height:32px;min-width:32px;flex:0 0 32px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font-size:17px;line-height:1;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.worth-it-profile-display-name-edit:hover,.worth-it-profile-display-name-edit:focus-visible{border-color:var(--primary);background:var(--card);transform:translateY(-1px);outline:none}
.worth-it-profile-display-name-edit[hidden]{display:none!important}
.worth-it-profile-section.has-banner .worth-it-profile-display-name-edit{border-color:rgba(255,255,255,.38);background:rgba(15,23,42,.78);color:#fff}
.worth-it-profile-section.has-banner .worth-it-profile-display-name-edit:hover,.worth-it-profile-section.has-banner .worth-it-profile-display-name-edit:focus-visible{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.65)}
.worth-it-display-name-overlay{position:fixed;inset:0;z-index:65000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(2,6,23,.72);backdrop-filter:blur(10px)}
.worth-it-display-name-overlay[hidden]{display:none!important}
.worth-it-display-name-modal{width:min(440px,100%);box-sizing:border-box;padding:24px;background:var(--card-solid,var(--card));color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.42)}
.worth-it-display-name-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.worth-it-display-name-modal-head h2{margin:0;font-size:22px;line-height:1.2}
.worth-it-display-name-modal-head p{margin:7px 0 0;color:var(--muted);font-size:13px}
.worth-it-display-name-close{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;padding:0;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);font-size:17px;cursor:pointer}
.worth-it-display-name-label{display:block;margin:0 0 7px;font-size:13px;font-weight:800}
.worth-it-display-name-input{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--text);font:inherit;outline:none}
.worth-it-display-name-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,255,.14)}
.worth-it-display-name-hint{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.worth-it-display-name-status{min-height:20px;margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.worth-it-display-name-status.is-error{color:var(--danger)}
.worth-it-display-name-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.worth-it-display-name-actions button{min-height:38px;padding:8px 13px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.worth-it-display-name-cancel{background:var(--surface-soft);color:var(--text)}
.worth-it-display-name-save{background:linear-gradient(135deg,var(--primary),var(--primary2));border-color:transparent!important;color:#fff}
.worth-it-display-name-actions button:disabled{opacity:.52;cursor:not-allowed}
@media(max-width:520px){.worth-it-display-name-modal{padding:19px;border-radius:17px}.worth-it-profile-display-name-edit{width:30px;height:30px;min-width:30px;flex-basis:30px}.worth-it-display-name-modal-head h2{font-size:20px}}


/* Worth It profile social layout: identity left, clickable counts/actions right. */
.worth-it-profile-header{
 display:grid;grid-template-columns:minmax(66px,88px) minmax(250px,max-content) minmax(260px,390px);
 align-items:center;gap:clamp(14px,2vw,24px)
}
.worth-it-profile-social-column{display:flex;flex-direction:column;gap:10px;min-width:0;width:100%;align-self:center}
.worth-it-profile-social-column .worth-it-profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;transform:translate(-130px,-150px)}
#profileSection.signed-out-profile-view .worth-it-profile-social-column .worth-it-profile-stats{transform:translate(10px,10px)}
#profileSection.signed-out-profile-view .worth-it-profile-social-actions{transform:translate(10px,10px)}
.worth-it-profile-social-column .worth-it-profile-stat{
 appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70px;
 padding:12px 5px;font:inherit;color:inherit;border:1px solid var(--border);border-radius:14px;
 background:rgba(10,16,32,.42);text-align:center;cursor:pointer;
 transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease
}
.worth-it-profile-social-column .worth-it-profile-stat:hover,
.worth-it-profile-social-column .worth-it-profile-stat:focus-visible{
 border-color:var(--primary);background:rgba(124,92,255,.17);transform:scale(1.02);box-shadow:0 8px 22px rgba(0,0,0,.16);outline:none
}
.worth-it-profile-social-column .worth-it-profile-stat strong{font-size:clamp(20px,2vw,26px);line-height:1.15}
.worth-it-profile-social-column .worth-it-profile-stat span{font-size:12px;line-height:1.35}
.worth-it-profile-section.has-banner .worth-it-profile-social-column .worth-it-profile-stat{background:rgba(10,16,32,.64);border-color:rgba(255,255,255,.24);color:#fff}
.worth-it-profile-social-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.worth-it-profile-social-actions[hidden],.worth-it-profile-friends-preview[hidden],.worth-it-profile-pending-requests[hidden],.worth-it-profile-connections-page[hidden]{display:none!important}
.worth-it-profile-social-button{
 appearance:none;min-width:0;border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:10px 12px;
 font:inherit;font-size:12px;font-weight:850;line-height:1.3;text-align:center;cursor:pointer;color:#fff;
 background:rgba(15,23,42,.75);transition:transform .18s ease,border-color .18s ease,background .18s ease
}
.worth-it-profile-social-button:hover,.worth-it-profile-social-button:focus-visible{transform:scale(1.015);border-color:var(--primary2);outline:none}
.worth-it-profile-social-button.primary{background:linear-gradient(115deg,rgba(124,92,255,.86),rgba(56,189,248,.72));border-color:rgba(255,255,255,.28)}
.worth-it-profile-social-button.secondary{background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.45)}
.worth-it-profile-social-button.quiet{background:rgba(15,23,42,.56);color:rgba(255,255,255,.88)}
.worth-it-profile-social-button:disabled{opacity:.65;cursor:default;transform:none}
.worth-it-profile-social-hint{grid-column:1/-1;margin:0;color:rgba(255,255,255,.84);font-size:11px;line-height:1.4}
.worth-it-profile-section:not(.has-banner) .worth-it-profile-social-hint{color:var(--muted)}
.worth-it-profile-friends-preview{margin:0 0 22px;padding:17px 0 16px;border-bottom:1px solid var(--border)}
.worth-it-profile-friends-title{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 12px;color:var(--text);font-size:15px}
.worth-it-profile-friends-title strong{font-size:15px;font-weight:900}
.worth-it-profile-friends-title #worthItProfileFriendsMood{font-size:22px;line-height:1}
.worth-it-profile-friends-count{color:var(--muted);font-size:12px;font-weight:700}
.worth-it-profile-section.has-banner .worth-it-profile-friends-title,.worth-it-profile-section.has-banner .worth-it-profile-friends-count{color:rgba(255,255,255,.94)}
.worth-it-profile-view-all{margin-left:auto;padding:6px 9px;border:1px solid rgba(255,255,255,.28);border-radius:9px;background:rgba(15,23,42,.55);color:inherit;font:inherit;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
.worth-it-profile-view-all:hover{border-color:var(--primary2);background:rgba(124,92,255,.2)}
.worth-it-profile-friends-strip{display:flex;align-items:center;gap:12px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 1px 10px;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.65) transparent;overscroll-behavior-x:contain}
.worth-it-profile-friend-chip{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:7px;max-width:100px;color:inherit;text-decoration:none}
.worth-it-profile-friend-avatar,.worth-it-profile-connection-avatar{display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.35);background:linear-gradient(135deg,rgba(124,92,255,.9),rgba(56,189,248,.78));color:#fff;font-size:18px;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.worth-it-profile-friend-avatar{width:50px;height:50px;border-radius:50%}
.worth-it-profile-friend-avatar img,.worth-it-profile-connection-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.worth-it-profile-friend-chip-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800;text-align:center}
.worth-it-profile-friend-chip:hover .worth-it-profile-friend-avatar{border-color:var(--primary2);transform:scale(1.05)}
.worth-it-profile-friends-empty{color:rgba(255,255,255,.76);font-size:12px}
.worth-it-profile-section:not(.has-banner) .worth-it-profile-friends-empty{color:var(--muted)}
.worth-it-profile-pending-requests{margin:0 0 22px;padding:15px;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:rgba(10,16,32,.54);backdrop-filter:blur(8px)}
.worth-it-profile-pending-requests h2{margin:0 0 12px;font-size:16px;font-weight:900;color:#fff}
.worth-it-profile-pending-list{display:grid;gap:9px}
.worth-it-profile-pending-item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.worth-it-profile-pending-actions{display:flex;flex:0 0 auto;gap:7px}
.worth-it-profile-pending-actions .worth-it-profile-social-button{padding:8px 12px}
.worth-it-profile-connections-page{width:100%;max-width:1180px;margin:0 auto;padding:0 0 28px;color:#fff}
.worth-it-profile-connections-head{display:flex;align-items:center;gap:20px;margin:0 0 20px}
.worth-it-profile-connections-head>div{min-width:0}
.worth-it-profile-connections-head h1{margin:0;font-size:clamp(24px,3.5vw,34px);font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.worth-it-profile-connections-head p{margin:6px 0 0;color:rgba(255,255,255,.8);font-size:14px;overflow-wrap:anywhere}
.worth-it-profile-connection-tabs{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:0 0 12px;margin-bottom:12px}
.worth-it-profile-connection-tabs button{flex:0 0 auto;padding:9px 15px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(10,16,32,.46);color:#fff;font:inherit;font-size:12px;font-weight:850;cursor:pointer}
.worth-it-profile-connection-tabs button.active,.worth-it-profile-connection-tabs button[aria-current="page"]{background:linear-gradient(115deg,rgba(124,92,255,.88),rgba(56,189,248,.76));border-color:rgba(255,255,255,.4)}
.worth-it-profile-connections-status{margin:8px 0 16px;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(10,16,32,.5);color:rgba(255,255,255,.88);font-size:13px;backdrop-filter:blur(8px)}
.worth-it-profile-connections-status.is-error{color:#ffd1d1;border-color:rgba(255,125,125,.5);background:rgba(58,8,14,.7)}
.worth-it-profile-connections-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.worth-it-profile-connection-card{display:flex;align-items:center;gap:13px;min-width:0;min-height:82px;padding:13px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:rgba(10,16,32,.58);color:#fff;text-decoration:none;backdrop-filter:blur(9px);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.worth-it-profile-connection-card:hover,.worth-it-profile-connection-card:focus-visible{transform:scale(1.012);border-color:rgba(56,189,248,.75);background:rgba(20,29,53,.75);outline:none}
.worth-it-profile-connection-avatar{width:54px;height:54px;border-radius:50%;font-size:21px}
.worth-it-profile-connection-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.worth-it-profile-connection-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:900;color:#fff}
.worth-it-profile-connection-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgba(255,255,255,.78)}
.worth-it-profile-pending-item .worth-it-profile-connection-card{flex:1 1 auto;min-width:0;min-height:65px;border:0;background:transparent;padding:5px}
.worth-it-profile-pending-item .worth-it-profile-connection-avatar{width:42px;height:42px;font-size:16px}
.worth-it-profile-pending-item .worth-it-profile-connection-text strong{font-size:13px}
@media(max-width:1050px){
 .worth-it-profile-social-column .worth-it-profile-stats{transform:none}
 #profileSection.signed-out-profile-view .worth-it-profile-social-column .worth-it-profile-stats{transform:none}
 #profileSection.signed-out-profile-view .worth-it-profile-social-actions{transform:none}
 .worth-it-profile-header{grid-template-columns:minmax(66px,88px) minmax(0,1fr)}
 .worth-it-profile-social-column{grid-column:1/-1;width:100%;max-width:none}
 .worth-it-profile-social-column .worth-it-profile-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
 .worth-it-profile-header{grid-template-columns:66px minmax(0,1fr);gap:12px;padding-bottom:18px}
 .worth-it-profile-social-column{grid-column:1/-1}
 .worth-it-profile-social-column .worth-it-profile-stat{min-height:62px;padding:9px 4px}
 .worth-it-profile-social-column .worth-it-profile-stat strong{font-size:21px}
 .worth-it-profile-social-column .worth-it-profile-stat span{font-size:11px}
 .worth-it-profile-social-actions{gap:7px}
 .worth-it-profile-social-button{padding:9px 7px;font-size:11px}
 .worth-it-profile-friends-preview{padding:14px 0;margin-bottom:17px}
 .worth-it-profile-friends-title{font-size:14px}
 .worth-it-profile-friend-avatar{width:44px;height:44px}
 .worth-it-profile-friend-chip-name{max-width:86px;font-size:10px}
 .worth-it-profile-connections-head{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:15px}
 .worth-it-profile-connections-list{grid-template-columns:minmax(0,1fr);gap:8px}
 .worth-it-profile-connection-card{min-height:74px;padding:10px}
 .worth-it-profile-pending-item{align-items:stretch;flex-direction:column;gap:8px}
 .worth-it-profile-pending-actions{justify-content:flex-end}
}
@media(prefers-reduced-transparency:reduce){
 .worth-it-profile-pending-requests,.worth-it-profile-connections-status,.worth-it-profile-connection-card{backdrop-filter:none}
}

/* Prevent the home screen and signed-out header from flashing on direct profile refreshes. */
html.worth-it-profile-route-pending #homePage{display:none!important}
html.worth-it-profile-route-pending #authWrap{visibility:hidden}


/* Logged-out profile social controls: requested precise offsets only when signed out. */
.worth-it-profile-social-actions.is-logged-out {
 transform: translate(30px, 0px);
}
.worth-it-profile-social-actions.is-logged-out .worth-it-profile-social-hint {
 /* Parent adds (+30px, +10px); this offsets it to a net (-20px, +30px). */
 transform: translate(-50px, 20px);
}


/* =========================================================
   LIGHT THEME — USER PROFILE AND CONNECTIONS
   Keep profile banner text white for contrast, but use readable
   light surfaces and dark text for unbannered profiles and lists.
   ========================================================= */
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) {
    color: var(--text);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-header {
    border-bottom-color: var(--border);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-column .worth-it-profile-stat {
    color: var(--text);
    background: rgba(255,255,255,.9);
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-column .worth-it-profile-stat:hover,
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-column .worth-it-profile-stat:focus-visible {
    color: var(--text);
    background: rgba(124,92,255,.08);
    border-color: rgba(124,92,255,.45);
    box-shadow: 0 8px 22px rgba(15,23,42,.08);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-button {
    color: #1e293b;
    background: rgba(255,255,255,.94);
    border-color: var(--border);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-button.primary {
    color: #fff;
    background: linear-gradient(115deg,rgba(124,92,255,.95),rgba(56,189,248,.88));
    border-color: rgba(124,92,255,.32);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-button.secondary {
    color: #075985;
    background: rgba(56,189,248,.12);
    border-color: rgba(14,165,233,.35);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-social-button.quiet {
    color: #334155;
    background: rgba(241,245,249,.95);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-pending-requests {
    color: var(--text);
    background: rgba(255,255,255,.94);
    border-color: var(--border);
    box-shadow: 0 8px 26px rgba(15,23,42,.05);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-pending-requests h2 {
    color: var(--text);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-view-all {
    color: var(--text);
    background: rgba(255,255,255,.88);
    border-color: var(--border);
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-friends-empty {
    color: var(--muted);
}

/* The Friends / Followers / Following page uses its own theme-aware surfaces. */
html[data-theme="light"] .worth-it-profile-connections-page {
    color: #0f172a;
}
html[data-theme="light"] .worth-it-profile-connections-head p {
    color: #64748b;
}
html[data-theme="light"] .worth-it-profile-connection-tabs button {
    color: #334155;
    background: rgba(255,255,255,.94);
    border-color: rgba(15,23,42,.14);
}
html[data-theme="light"] .worth-it-profile-connection-tabs button:hover,
html[data-theme="light"] .worth-it-profile-connection-tabs button:focus-visible {
    background: rgba(124,92,255,.07);
    border-color: rgba(124,92,255,.42);
    outline: none;
}
html[data-theme="light"] .worth-it-profile-connection-tabs button.active,
html[data-theme="light"] .worth-it-profile-connection-tabs button[aria-current="page"] {
    color: #fff;
    background: linear-gradient(115deg,rgba(124,92,255,.94),rgba(56,189,248,.84));
    border-color: rgba(124,92,255,.34);
}
html[data-theme="light"] .worth-it-profile-connections-status {
    color: #334155;
    background: rgba(255,255,255,.95);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
html[data-theme="light"] .worth-it-profile-connections-status.is-error {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}
html[data-theme="light"] .worth-it-profile-connection-card {
    color: #0f172a;
    background: rgba(255,255,255,.96);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
html[data-theme="light"] .worth-it-profile-connection-card:hover,
html[data-theme="light"] .worth-it-profile-connection-card:focus-visible {
    color: #0f172a;
    background: #fff;
    border-color: rgba(124,92,255,.55);
    box-shadow: 0 10px 28px rgba(15,23,42,.09);
}
html[data-theme="light"] .worth-it-profile-connection-text strong {
    color: #0f172a;
}
html[data-theme="light"] .worth-it-profile-connection-text small {
    color: #64748b;
}


/* =========================================================
   LIGHT THEME — PROFILE CONTROLS INCLUDING ACTIVE BANNERS
   UI surfaces follow the selected theme; uploaded profile and
   banner images themselves are deliberately not modified.
   ========================================================= */

/* A custom profile banner must not force the site navigation back to dark mode. */
html[data-theme="light"] .nav {
    color: #0f172a !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom-color: rgba(15,23,42,.12) !important;
}
html[data-theme="light"] .nav .logo {
    color: #0f172a !important;
}
html[data-theme="light"] .nav .menu-btn,
html[data-theme="light"] .nav .auth-btn,
html[data-theme="light"] .nav .settings-btn,
html[data-theme="light"] .nav .ai-chat-nav-btn,
html[data-theme="light"] .nav .signout-nav-btn,
html[data-theme="light"] .nav .feedback-nav-btn {
    color: #0f172a !important;
    background: rgba(15,23,42,.045) !important;
    border-color: rgba(15,23,42,.13) !important;
}
html[data-theme="light"] .nav .ai-chat-nav-btn {
    background: linear-gradient(135deg,rgba(124,92,255,.09),rgba(56,189,248,.10)) !important;
}
html[data-theme="light"] .nav .menu-btn:hover,
html[data-theme="light"] .nav .auth-btn:hover,
html[data-theme="light"] .nav .settings-btn:hover,
html[data-theme="light"] .nav .ai-chat-nav-btn:hover,
html[data-theme="light"] .nav .signout-nav-btn:hover,
html[data-theme="light"] .nav .feedback-nav-btn:hover {
    color: #0f172a !important;
    background: rgba(15,23,42,.085) !important;
    border-color: rgba(124,92,255,.42) !important;
}
/* Keep the existing avatar frame/image treatment; only the nav surface changes. */

/* Profile statistics are real controls, so render them as light cards even over a banner. */
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-column .worth-it-profile-stat {
    color: #0f172a !important;
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(15,23,42,.13) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.09) !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-column .worth-it-profile-stat strong {
    color: #0f172a !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-column .worth-it-profile-stat span {
    color: #64748b !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-column .worth-it-profile-stat:hover,
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-column .worth-it-profile-stat:focus-visible {
    color: #0f172a !important;
    background: #fff !important;
    border-color: rgba(124,92,255,.5) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.12) !important;
}

/* Friend/follow and other profile controls use light surfaces; the primary action keeps its brand gradient. */
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-button:not(.primary) {
    color: #1e293b !important;
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-social-button.primary {
    color: #fff !important;
    background: linear-gradient(115deg,rgba(124,92,255,.95),rgba(56,189,248,.88)) !important;
    border-color: rgba(124,92,255,.34) !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-view-all {
    color: #334155 !important;
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-pending-requests {
    color: #0f172a !important;
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(15,23,42,.13) !important;
    box-shadow: 0 8px 26px rgba(15,23,42,.07) !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-pending-requests h2 {
    color: #0f172a !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-friends-empty {
    color: #64748b !important;
}
/* The back buttons on both profile and connection views must match the selected light theme. */
html[data-theme="light"] .worth-it-profile-toolbar .btn-secondary,
html[data-theme="light"] .worth-it-profile-connections-page .btn-secondary {
    color: #334155 !important;
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .worth-it-profile-toolbar .btn-secondary:hover,
html[data-theme="light"] .worth-it-profile-connections-page .btn-secondary:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    border-color: rgba(124,92,255,.4) !important;
}

/* Give Friends / Followers / Following a real light-theme surface, even with a banner behind the section. */
html[data-theme="light"] .worth-it-profile-connections-page {
    color: #0f172a !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 12px 36px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .worth-it-profile-connections-head h1 {
    color: #0f172a !important;
}
html[data-theme="light"] .worth-it-profile-connections-head p {
    color: #64748b !important;
}
html[data-theme="light"] .worth-it-profile-connection-tabs button {
    color: #334155 !important;
    background: #f8fafc !important;
    border-color: rgba(15,23,42,.14) !important;
}
html[data-theme="light"] .worth-it-profile-connection-tabs button:hover,
html[data-theme="light"] .worth-it-profile-connection-tabs button:focus-visible {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    border-color: rgba(124,92,255,.45) !important;
}
html[data-theme="light"] .worth-it-profile-connection-tabs button.active,
html[data-theme="light"] .worth-it-profile-connection-tabs button[aria-current="page"] {
    color: #fff !important;
    background: linear-gradient(115deg,rgba(124,92,255,.95),rgba(56,189,248,.88)) !important;
    border-color: rgba(124,92,255,.35) !important;
}
html[data-theme="light"] .worth-it-profile-connections-status {
    color: #334155 !important;
    background: #f8fafc !important;
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .worth-it-profile-connections-status.is-error {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}
html[data-theme="light"] .worth-it-profile-connection-card {
    color: #0f172a !important;
    background: #fff !important;
    border-color: rgba(15,23,42,.13) !important;
    box-shadow: 0 7px 22px rgba(15,23,42,.07) !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .worth-it-profile-connection-card:hover,
html[data-theme="light"] .worth-it-profile-connection-card:focus-visible {
    color: #0f172a !important;
    background: #fdfcff !important;
    border-color: rgba(124,92,255,.5) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.1) !important;
}
html[data-theme="light"] .worth-it-profile-connection-text strong {
    color: #0f172a !important;
}
html[data-theme="light"] .worth-it-profile-connection-text small {
    color: #64748b !important;
}
@media(max-width:600px) {
    html[data-theme="light"] .worth-it-profile-connections-page {
        padding: 16px 12px 20px !important;
        border-radius: 16px !important;
    }
}


/* =========================================================
   LIGHT THEME — PROFILE SHARE CARD
   The link field follows the selected theme even when a banner
   is active; the banner and profile picture remain untouched.
   ========================================================= */
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-share {
    color: #0f172a !important;
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(15,23,42,.13) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.07) !important;
    backdrop-filter: none !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-share-copy .worth-it-profile-overline,
html[data-theme="light"] .worth-it-profile-section #worthItProfileLinkLabel {
    color: #0f172a !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-share-copy a,
html[data-theme="light"] .worth-it-profile-section #worthItProfileLink {
    color: #0f172a !important;
}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-share-copy a:hover,
html[data-theme="light"] .worth-it-profile-section #worthItProfileLink:hover {
    color: #6d28d9 !important;
}


/* Profile descriptions: owner-only editor above the friends preview, public read-only text. */
.worth-it-profile-description{position:relative;box-sizing:border-box;margin:0 0 22px;padding:18px 20px;border:1px solid rgba(148,163,184,.28);border-radius:16px;background:rgba(10,16,32,.56);color:#f8fafc;box-shadow:0 8px 24px rgba(0,0,0,.08);backdrop-filter:blur(9px)}
.worth-it-profile-description-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.worth-it-profile-description-heading h2{margin:0;font-size:16px;font-weight:900;line-height:1.3;color:inherit}
.worth-it-profile-description-text,.worth-it-profile-description-empty{margin:0;color:inherit;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.worth-it-profile-description-empty{opacity:.72;font-size:13px}
.worth-it-profile-description-editor{display:grid;gap:9px}
.worth-it-profile-description-editor label{font-size:12px;font-weight:800;color:inherit}
.worth-it-profile-description-editor textarea{display:block;box-sizing:border-box;width:100%;min-height:104px;padding:12px 13px;border:1px solid rgba(148,163,184,.4);border-radius:11px;background:rgba(2,6,23,.36);color:inherit;font:inherit;font-size:13px;line-height:1.55;resize:vertical;outline:none;transition:border-color .16s ease,box-shadow .16s ease}
.worth-it-profile-description-editor textarea::placeholder{color:rgba(226,232,240,.58)}
.worth-it-profile-description-editor textarea:focus{border-color:#8b7cff;box-shadow:0 0 0 3px rgba(124,92,255,.17)}
.worth-it-profile-description-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.worth-it-profile-description-meta{display:grid;gap:5px;min-width:0}
.worth-it-profile-description-character-count{font-size:11px;font-weight:800;opacity:.72}
.worth-it-profile-description-status{font-size:11px;line-height:1.45;overflow-wrap:anywhere;color:rgba(226,232,240,.82)}
.worth-it-profile-description-status.is-error{color:#ffb4b4}
.worth-it-profile-description-save{flex:0 0 auto;min-height:38px;padding:9px 15px;font-size:12px;font-weight:850}
.worth-it-profile-description-save:disabled{opacity:.52;cursor:not-allowed;transform:none}
#worthItProfileDescriptionText[hidden],#worthItProfileDescriptionEmpty[hidden],#worthItProfileDescriptionEditor[hidden]{display:none!important}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-description{background:rgba(255,255,255,.97);border-color:rgba(15,23,42,.13);color:#0f172a;box-shadow:0 8px 24px rgba(15,23,42,.07);backdrop-filter:none}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-description-editor textarea{background:#f8fafc;border-color:rgba(15,23,42,.18);color:#0f172a}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-description-editor textarea::placeholder{color:#64748b}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-description-status{color:#475569}
html[data-theme="light"] .worth-it-profile-section .worth-it-profile-description-status.is-error{color:#b91c1c}
@media(max-width:600px){
 .worth-it-profile-description{margin-bottom:17px;padding:14px 13px;border-radius:13px}
 .worth-it-profile-description-heading h2{font-size:15px}
 .worth-it-profile-description-text,.worth-it-profile-description-empty{font-size:13px}
 .worth-it-profile-description-actions{align-items:stretch;flex-direction:column;gap:10px}
 .worth-it-profile-description-save{width:100%}
}
@media(prefers-reduced-transparency:reduce){.worth-it-profile-description{backdrop-filter:none}}


/* =========================================================
   Social notifications inbox and optional unfriend reason
   ========================================================= */
.worth-it-notification-wrap{position:relative;display:flex;align-items:center;flex:0 0 40px;width:40px;height:42px;overflow:visible}
.worth-it-notification-wrap[hidden],.worth-it-notification-panel[hidden],.worth-it-notification-content[hidden],.worth-it-notification-badge[hidden],.worth-it-notification-tabs span[hidden]{display:none!important}
.worth-it-notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:20px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.worth-it-notification-bell:hover,.worth-it-notification-bell:focus-visible{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.55);transform:translateY(-1px)}
.worth-it-notification-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);border-radius:999px;background:#ef4444;color:#fff;font-size:10px;line-height:1;font-weight:900;box-sizing:border-box}
.worth-it-notification-panel{position:absolute;top:calc(100% + 11px);right:-52px;z-index:3300;width:min(390px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 90px));overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;background:rgba(10,16,30,.985);color:#f8fafc;box-shadow:0 18px 58px rgba(0,0,0,.4);backdrop-filter:blur(20px)}
.worth-it-notification-panel[hidden]{display:none!important}
.worth-it-notification-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.worth-it-notification-header>strong{font-size:15px;font-weight:900}
.worth-it-notification-close{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.06);color:inherit;font-size:14px;cursor:pointer}
.worth-it-notification-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;padding:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.worth-it-notification-tabs button{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border:1px solid transparent;border-radius:9px;background:transparent;color:rgba(226,232,240,.7);font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.worth-it-notification-tabs button.active{border-color:rgba(124,92,255,.42);background:rgba(124,92,255,.16);color:#fff}
.worth-it-notification-tabs span{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:rgba(124,92,255,.3);font-size:10px}
.worth-it-notification-content{min-height:0;overflow-y:auto;padding:8px}
.worth-it-notification-list{display:grid;gap:7px}
.worth-it-notification-item{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035)}
.worth-it-notification-item.is-unread{border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.095)}
.worth-it-notification-person{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;color:inherit;text-decoration:none}
.worth-it-notification-person:hover .worth-it-notification-person-text strong{text-decoration:underline}
.worth-it-notification-avatar{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;overflow:hidden;border:1px solid rgba(148,163,184,.35);border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:14px;font-weight:900}
.worth-it-notification-avatar img{width:100%;height:100%;object-fit:cover}
.worth-it-notification-person-text{display:grid;gap:3px;min-width:0}
.worth-it-notification-person-text strong{overflow-wrap:anywhere;font-size:12px;font-weight:900;line-height:1.25}
.worth-it-notification-person-text small{color:rgba(203,213,225,.7);font-size:11px;line-height:1.25;overflow-wrap:anywhere}
.worth-it-notification-actions{display:flex;flex:0 0 auto;gap:5px}
.worth-it-notification-action{padding:7px 9px;border:1px solid rgba(255,255,255,.17);border-radius:8px;background:rgba(255,255,255,.06);color:#f8fafc;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.worth-it-notification-action.primary{border-color:rgba(124,92,255,.5);background:linear-gradient(135deg,rgba(124,92,255,.9),rgba(59,130,246,.85))}
.worth-it-notification-action:disabled{opacity:.5;cursor:wait}
.worth-it-notification-event{align-items:flex-start}
.worth-it-notification-event-body{display:grid;gap:5px;min-width:0;flex:1 1 auto}
.worth-it-notification-event-title{margin:0;font-size:12px;font-weight:750;line-height:1.45;overflow-wrap:anywhere}
.worth-it-notification-reason{margin:0;padding:8px 9px;border-left:2px solid rgba(124,92,255,.75);border-radius:0 7px 7px 0;background:rgba(124,92,255,.08);color:rgba(241,245,249,.9);font-size:12px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.worth-it-notification-date{color:rgba(203,213,225,.58);font-size:10px}
.worth-it-notification-empty{margin:0;padding:18px 9px;color:rgba(203,213,225,.7);font-size:12px;line-height:1.5;text-align:center}
.worth-it-notification-empty.is-error{color:#fca5a5}
.worth-it-unfriend-overlay{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.68);backdrop-filter:blur(9px)}
.worth-it-unfriend-overlay[hidden]{display:none!important}
.worth-it-unfriend-dialog{position:relative;width:min(440px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 22px 75px rgba(0,0,0,.38)}
.worth-it-unfriend-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);font-size:14px;cursor:pointer}
.worth-it-unfriend-dialog h2{margin:0 42px 9px 0;font-size:20px;line-height:1.3}
.worth-it-unfriend-intro{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.55}
.worth-it-unfriend-dialog form{display:grid;gap:8px}
.worth-it-unfriend-dialog label{font-size:12px;font-weight:850}
.worth-it-unfriend-dialog textarea{width:100%;box-sizing:border-box;min-height:100px;resize:vertical;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:13px;line-height:1.45}
.worth-it-unfriend-dialog textarea:focus{outline:2px solid rgba(124,92,255,.55);outline-offset:1px}
.worth-it-unfriend-char-count{text-align:right;color:var(--muted);font-size:10px}
.worth-it-unfriend-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.worth-it-unfriend-actions button{min-height:38px;padding:9px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:12px;font-weight:850;cursor:pointer}
.worth-it-unfriend-actions .worth-it-unfriend-confirm{border-color:rgba(239,68,68,.65);background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff}
html[data-theme="light"] .worth-it-notification-panel{background:rgba(255,255,255,.99);color:#0f172a;border-color:rgba(148,163,184,.55);box-shadow:0 18px 58px rgba(15,23,42,.2)}
html[data-theme="light"] .worth-it-notification-header{border-color:rgba(15,23,42,.1)}
html[data-theme="light"] .worth-it-notification-close{color:#334155;border-color:rgba(15,23,42,.13);background:rgba(15,23,42,.04)}
html[data-theme="light"] .worth-it-notification-tabs{border-color:rgba(15,23,42,.1)}
html[data-theme="light"] .worth-it-notification-tabs button{color:#475569}
html[data-theme="light"] .worth-it-notification-tabs button.active{color:#312e81;background:rgba(124,92,255,.1)}
html[data-theme="light"] .worth-it-notification-item{border-color:rgba(15,23,42,.1);background:rgba(15,23,42,.025)}
html[data-theme="light"] .worth-it-notification-item.is-unread{background:rgba(124,92,255,.07);border-color:rgba(124,92,255,.4)}
html[data-theme="light"] .worth-it-notification-person-text small,html[data-theme="light"] .worth-it-notification-empty{color:#64748b}
html[data-theme="light"] .worth-it-notification-action{border-color:rgba(15,23,42,.15);background:#f8fafc;color:#0f172a}
html[data-theme="light"] .worth-it-notification-action.primary{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}
html[data-theme="light"] .worth-it-notification-reason{color:#334155;background:rgba(124,92,255,.065)}
html[data-theme="light"] .worth-it-notification-date{color:#64748b}
html[data-theme="light"] .worth-it-notification-empty.is-error{color:#b91c1c}
@media(max-width:700px){
 .worth-it-notification-wrap{flex:0 0 36px;width:36px;height:38px}
 .worth-it-notification-bell{width:36px;height:36px;flex-basis:36px;font-size:18px}
 .worth-it-notification-panel{right:-52px;width:min(390px,calc(100vw - 16px));max-width:calc(100vw - 16px);top:calc(100% + 9px);max-height:calc(100vh - 82px)}
 .worth-it-notification-item.worth-it-notification-request{align-items:flex-start;flex-wrap:wrap}
 .worth-it-notification-request .worth-it-notification-person{flex:1 1 100%}
 .worth-it-notification-actions{width:100%;justify-content:flex-end}
 .worth-it-notification-action{min-width:65px}
 .worth-it-unfriend-dialog{padding:21px 17px}
}


/* Worth It Chat — glassy midnight gradient, responsive drawer and full-screen conversation. */
.worth-it-chat-nav-wrap{position:relative;display:flex;align-items:center}
.worth-it-chat-nav-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.24);border-radius:14px;background:linear-gradient(145deg,rgba(99,102,241,.17),rgba(14,165,233,.11));color:var(--text);font-size:20px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.worth-it-chat-nav-btn:hover{transform:translateY(-1px);border-color:rgba(129,140,248,.65);background:linear-gradient(145deg,rgba(99,102,241,.25),rgba(14,165,233,.18))}
.worth-it-chat-nav-badge{position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;border:2px solid var(--bg,#0b1020);font-size:10px;font-weight:800}
.worth-it-chat-nav-badge[hidden],.worth-it-chat-nav-wrap[hidden],.worth-it-chat-overlay[hidden],.worth-it-chat-group-dialog[hidden]{display:none!important}
.worth-it-chat-overlay{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vw,28px);background:rgba(4,8,24,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.worth-it-chat-window{--chat-line:rgba(148,163,184,.17);--chat-muted:#9aa8c5;position:relative;display:grid;grid-template-columns:270px minmax(0,1fr);width:min(1120px,100%);height:min(780px,calc(100dvh - 48px));overflow:hidden;border:1px solid rgba(148,163,184,.24);border-radius:25px;background:linear-gradient(135deg,#0b1022 0%,#111832 46%,#10152b 100%);box-shadow:0 35px 100px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.04);color:#eef2ff;transition:width .2s ease,height .2s ease,border-radius .2s ease}
.worth-it-chat-overlay.is-fullscreen{padding:0;align-items:stretch;justify-content:stretch}
.worth-it-chat-window.is-fullscreen{flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;transform:none;border-radius:0;border:0}
.worth-it-chat-sidebar{min-width:0;display:flex;flex-direction:column;padding:20px 13px 12px;background:linear-gradient(180deg,rgba(30,41,75,.82),rgba(15,23,48,.94));border-right:1px solid var(--chat-line);overflow:hidden}
.worth-it-chat-brand{display:flex;align-items:center;justify-content:space-between;padding:2px 7px 22px}
.worth-it-chat-brand>div{display:flex;align-items:center;gap:10px}
.worth-it-chat-brand-mark{width:37px;height:37px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#8b5cf6,#3b82f6 65%,#22d3ee);box-shadow:0 7px 22px rgba(99,102,241,.3);font-size:20px;color:white}
.worth-it-chat-brand strong{display:block;font-size:14px;letter-spacing:.01em}.worth-it-chat-brand small{display:block;margin-top:3px;color:var(--chat-muted);font-size:11px}
.worth-it-chat-side-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 10px;border:1px solid transparent;border-radius:14px;background:transparent;color:#e6eaff;cursor:pointer}
.worth-it-chat-side-item>span:first-child{width:35px;height:35px;flex:0 0 35px;display:grid;place-items:center;border-radius:11px;background:rgba(99,102,241,.17);font-size:18px}
.worth-it-chat-side-item>span:nth-child(2){min-width:0;flex:1}.worth-it-chat-side-item strong{display:block;font-size:12px}.worth-it-chat-side-item small{display:block;color:var(--chat-muted);font-size:10px;margin-top:3px}.worth-it-chat-side-item i{font-style:normal;color:#a5b4fc}
.worth-it-chat-side-item:hover,.worth-it-chat-side-item.is-active{background:linear-gradient(100deg,rgba(99,102,241,.2),rgba(14,165,233,.08));border-color:rgba(129,140,248,.24)}
.worth-it-chat-side-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:21px 7px 8px;color:#8290b1;font-size:9px;font-weight:800;letter-spacing:.12em}
.worth-it-chat-text-btn{border:0;background:transparent;color:#a5b4fc;font-size:10px;cursor:pointer;letter-spacing:normal}.worth-it-chat-text-btn:hover{color:#fff}
.worth-it-chat-friends,.worth-it-chat-conversations{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent}
.worth-it-chat-friends{max-height:32%;flex:0 1 auto}.worth-it-chat-conversations{flex:1}
.worth-it-chat-person-btn{width:100%;display:flex;align-items:center;gap:9px;padding:8px 7px;border:1px solid transparent;border-radius:12px;background:transparent;color:#e5e7eb;text-align:left;cursor:pointer}
.worth-it-chat-person-btn:hover,.worth-it-chat-person-btn.is-active{background:rgba(99,102,241,.14);border-color:rgba(129,140,248,.19)}
.worth-it-chat-person-avatar{width:33px;height:33px;flex:0 0 33px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:linear-gradient(135deg,#3730a3,#0e7490);color:#fff;font-weight:800;font-size:12px}
.worth-it-chat-person-avatar img{width:100%;height:100%;object-fit:cover}.worth-it-chat-person-info{min-width:0;flex:1}.worth-it-chat-person-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700}.worth-it-chat-person-info small{display:block;margin-top:3px;color:var(--chat-muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.worth-it-chat-person-count{min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border-radius:7px;background:#6366f1;color:white;font-size:9px;font-weight:800}
.worth-it-chat-muted{padding:8px;color:#8996b5;font-size:11px;line-height:1.6}
.worth-it-chat-sidebar-footer{display:flex;align-items:center;gap:7px;padding:14px 6px 2px;margin-top:auto;color:#8d9aba;font-size:9px;border-top:1px solid var(--chat-line)}
.worth-it-chat-status-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px rgba(52,211,153,.45)}
.worth-it-chat-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 75% 0%,rgba(79,70,229,.19),transparent 40%),radial-gradient(ellipse at 8% 80%,rgba(8,145,178,.11),transparent 35%),linear-gradient(160deg,#0c1227,#0d152a 52%,#10172d)}
.worth-it-chat-main:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(rgba(165,180,252,.5) .7px,transparent .7px);background-size:22px 22px;mask-image:linear-gradient(135deg,#000,transparent 75%)}
.worth-it-chat-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 22px;border-bottom:1px solid var(--chat-line);background:rgba(15,23,48,.58);backdrop-filter:blur(16px)}
.worth-it-chat-header-person{min-width:0;display:flex;align-items:center;gap:12px}.worth-it-chat-header-avatar{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,rgba(139,92,246,.32),rgba(14,165,233,.23));border:1px solid rgba(165,180,252,.18);font-size:20px;overflow:hidden}.worth-it-chat-header-avatar img{width:100%;height:100%;object-fit:cover}
.worth-it-chat-header h2{margin:0;color:#f5f7ff;font-size:16px;font-weight:800;letter-spacing:-.02em}.worth-it-chat-header p{margin:4px 0 0;color:#98a6c5;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.worth-it-chat-header-actions{display:flex;gap:7px}.worth-it-chat-icon-btn{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.19);border-radius:11px;background:rgba(148,163,184,.07);color:#dbeafe;font-size:15px;cursor:pointer}.worth-it-chat-icon-btn:hover{background:rgba(99,102,241,.23);border-color:rgba(129,140,248,.42)}
.worth-it-chat-mobile-close{display:none}
.worth-it-chat-safety-note{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:10px 22px;background:linear-gradient(90deg,rgba(99,102,241,.09),rgba(14,165,233,.04));border-bottom:1px solid rgba(148,163,184,.09);color:#a8b5d3;font-size:10px}.worth-it-chat-safety-note span{color:#a5b4fc}
.worth-it-chat-messages{position:relative;z-index:1;min-height:0;flex:1;overflow:auto;padding:23px clamp(14px,3vw,34px);display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent}
.worth-it-chat-empty{margin:auto;max-width:300px;text-align:center;color:#a5b4d0}.worth-it-chat-empty>span{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 15px;border-radius:18px;background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(14,165,233,.18));font-size:23px;color:#c4b5fd}.worth-it-chat-empty strong{display:block;color:#e9edff;font-size:15px}.worth-it-chat-empty p{font-size:12px;line-height:1.7}
.worth-it-chat-message{display:flex;align-items:flex-end;gap:9px;max-width:min(86%,640px);animation:worthItChatAppear .18s ease-out}.worth-it-chat-message.is-mine{align-self:flex-end;flex-direction:row-reverse}.worth-it-chat-message .worth-it-chat-person-avatar{width:30px;height:30px;flex-basis:30px;border-radius:10px;font-size:10px}
.worth-it-chat-message-stack{min-width:0;display:flex;flex-direction:column;gap:5px}.worth-it-chat-message.is-mine .worth-it-chat-message-stack{align-items:flex-end}
.worth-it-chat-message-name{font-size:10px;color:#9caed0;padding:0 4px}.worth-it-chat-bubble{max-width:100%;padding:11px 14px;border:1px solid rgba(148,163,184,.13);border-radius:16px 16px 16px 5px;background:linear-gradient(145deg,rgba(39,51,83,.86),rgba(29,40,68,.88));box-shadow:0 5px 18px rgba(0,0,0,.12);color:#edf2ff;font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.worth-it-chat-message.is-mine .worth-it-chat-bubble{border-radius:16px 16px 5px 16px;background:linear-gradient(135deg,rgba(91,72,190,.92),rgba(49,89,164,.91));border-color:rgba(165,180,252,.18)}
.worth-it-chat-message-time{font-size:9px;color:#7e8eaf;padding:0 4px}.worth-it-chat-filter-reason{max-width:100%;margin:0;padding:0 4px;color:#fb7185;font-size:10px;line-height:1.5}.worth-it-chat-media{display:block;max-width:min(100%,360px);max-height:300px;object-fit:contain;border-radius:12px;margin-top:7px;border:1px solid rgba(255,255,255,.12)}.worth-it-chat-link{color:#93c5fd;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.worth-it-chat-link:hover{color:#bfdbfe}
.worth-it-chat-compose-wrap{position:relative;z-index:1;padding:13px clamp(12px,2.4vw,25px) 12px;background:linear-gradient(0deg,rgba(9,14,30,.96),rgba(11,18,37,.86));border-top:1px solid var(--chat-line)}
.worth-it-chat-compose{display:flex;align-items:flex-end;gap:8px;padding:7px;border:1px solid rgba(129,140,248,.26);border-radius:17px;background:rgba(30,41,70,.62);box-shadow:0 0 0 3px rgba(99,102,241,.04);transition:border-color .18s ease,box-shadow .18s ease}.worth-it-chat-compose:focus-within{border-color:rgba(129,140,248,.62);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.worth-it-chat-attach-btn{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:12px;background:rgba(148,163,184,.1);color:#c7d2fe;font-size:22px;cursor:pointer}.worth-it-chat-attach-btn:hover{background:rgba(99,102,241,.25)}
.worth-it-chat-compose textarea{min-width:0;max-height:140px;flex:1;resize:none;border:0;outline:0;background:transparent;color:#f1f5ff;font:inherit;font-size:13px;line-height:1.5;padding:8px 2px}.worth-it-chat-compose textarea::placeholder{color:#8998b8}
.worth-it-chat-send-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:37px;padding:0 15px;border:1px solid rgba(165,180,252,.2);border-radius:12px;background:linear-gradient(135deg,#7c3aed,#4f46e5 60%,#2563eb);color:#fff;font-size:11px;font-weight:800;box-shadow:0 5px 15px rgba(79,70,229,.22);cursor:pointer;white-space:nowrap}.worth-it-chat-send-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.worth-it-chat-send-btn:disabled{opacity:.55;cursor:wait;transform:none}
.worth-it-chat-compose-meta{display:flex;justify-content:space-between;gap:8px;padding:7px 4px 0;color:#7181a3;font-size:9px}.worth-it-chat-compose-meta strong{color:#a5b4fc;font-variant-numeric:tabular-nums}
.worth-it-chat-compose-status{min-height:0;margin:0;padding:0 4px;color:#fbbf24;font-size:10px;line-height:1.5}.worth-it-chat-compose-status:not(:empty){padding-top:6px}.worth-it-chat-compose-status.is-error{color:#fb7185}.worth-it-chat-attachment-preview{display:flex;align-items:center;gap:9px;margin:0 0 9px;padding:8px 10px;border:1px solid rgba(129,140,248,.18);border-radius:12px;background:rgba(30,41,70,.5);color:#dbeafe;font-size:11px}.worth-it-chat-attachment-preview img{width:43px;height:43px;object-fit:cover;border-radius:8px}.worth-it-chat-attachment-preview button{margin-left:auto;border:0;background:transparent;color:#fda4af;cursor:pointer;font-size:17px}
.worth-it-chat-group-dialog{position:fixed;inset:0;z-index:10060;display:grid;place-items:center;padding:18px;background:rgba(2,6,23,.72);backdrop-filter:blur(10px)}.worth-it-chat-group-card{position:relative;width:min(440px,100%);max-height:min(700px,90dvh);overflow:auto;padding:28px;border:1px solid rgba(148,163,184,.2);border-radius:23px;background:linear-gradient(145deg,#121a36,#0d142a);color:#f1f5ff;box-shadow:0 30px 90px rgba(0,0,0,.45)}.worth-it-chat-group-close{position:absolute;right:17px;top:17px}.worth-it-chat-modal-kicker{color:#a5b4fc;font-size:9px;font-weight:800;letter-spacing:.15em}.worth-it-chat-group-card h2{margin:12px 0 8px;font-size:23px;letter-spacing:-.04em}.worth-it-chat-group-card>p{margin:0 0 19px;color:#a3b0cd;font-size:12px;line-height:1.7}.worth-it-chat-group-card label{display:block;margin:12px 0 7px;font-size:11px;color:#cbd5e1;font-weight:700}.worth-it-chat-group-card input:not([type=checkbox]){width:100%;padding:12px;border:1px solid rgba(148,163,184,.24);border-radius:12px;outline:none;background:rgba(15,23,42,.8);color:#fff;font:inherit}.worth-it-chat-group-friend-list{display:grid;gap:3px;max-height:250px;overflow:auto;margin:12px 0}.worth-it-chat-group-friend-option{display:flex!important;align-items:center;gap:9px;padding:9px;border-radius:10px;background:rgba(148,163,184,.05);cursor:pointer}.worth-it-chat-group-friend-option input{accent-color:#818cf8}.worth-it-chat-group-friend-option span{font-size:12px;font-weight:500!important;margin:0!important}.worth-it-chat-group-card>.worth-it-chat-send-btn{width:100%;margin-top:7px}
@keyframes worthItChatAppear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="light"] .worth-it-chat-window{--chat-muted:#64748b;background:linear-gradient(135deg,#f8faff,#edf3ff);color:#1e293b}
html[data-theme="light"] .worth-it-chat-sidebar{background:linear-gradient(180deg,#e8edff,#f5f8ff);border-color:rgba(100,116,139,.18)}
html[data-theme="light"] .worth-it-chat-side-item{color:#1e293b}
html[data-theme="light"] .worth-it-chat-side-item small,html[data-theme="light"] .worth-it-chat-brand small,html[data-theme="light"] .worth-it-chat-muted{color:#64748b}
html[data-theme="light"] .worth-it-chat-main{background:radial-gradient(ellipse at 75% 0%,rgba(99,102,241,.12),transparent 40%),linear-gradient(160deg,#f8faff,#edf4ff)}
html[data-theme="light"] .worth-it-chat-header{background:rgba(248,250,255,.8)}
html[data-theme="light"] .worth-it-chat-header h2,html[data-theme="light"] .worth-it-chat-brand strong{color:#172554}
html[data-theme="light"] .worth-it-chat-header p,html[data-theme="light"] .worth-it-chat-safety-note{color:#64748b}
html[data-theme="light"] .worth-it-chat-bubble{background:linear-gradient(145deg,#e7edff,#dfe8ff);color:#172554;border-color:rgba(100,116,139,.16)}
html[data-theme="light"] .worth-it-chat-message.is-mine .worth-it-chat-bubble{background:linear-gradient(135deg,#ddd6fe,#bfdbfe);color:#1e1b4b}
html[data-theme="light"] .worth-it-chat-message-name{color:#64748b}html[data-theme="light"] .worth-it-chat-message-time{color:#64748b}
html[data-theme="light"] .worth-it-chat-compose-wrap{background:linear-gradient(0deg,rgba(245,248,255,.97),rgba(239,244,255,.9))}
html[data-theme="light"] .worth-it-chat-compose{background:rgba(255,255,255,.82)}
html[data-theme="light"] .worth-it-chat-compose textarea{color:#172554}html[data-theme="light"] .worth-it-chat-compose textarea::placeholder{color:#64748b}
html[data-theme="light"] .worth-it-chat-group-card{background:linear-gradient(145deg,#fff,#eef3ff);color:#172554}
html[data-theme="light"] .worth-it-chat-group-card>p,html[data-theme="light"] .worth-it-chat-group-card label{color:#475569}
html[data-theme="light"] .worth-it-chat-group-card input:not([type=checkbox]){background:#fff;color:#172554}
@media(max-width:760px){
 .worth-it-chat-overlay{padding:0}.worth-it-chat-window{grid-template-columns:210px minmax(0,1fr);width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}
 .worth-it-chat-sidebar{padding:13px 8px 9px}.worth-it-chat-brand{padding:4px 4px 15px}.worth-it-chat-brand-mark{width:31px;height:31px}.worth-it-chat-brand strong{font-size:12px}
 .worth-it-chat-side-heading{padding:16px 5px 7px;font-size:8px}.worth-it-chat-side-item{padding:8px 5px;gap:6px}.worth-it-chat-side-item>span:first-child{width:29px;height:29px;flex-basis:29px}
 .worth-it-chat-header{padding:13px}.worth-it-chat-header-avatar{width:37px;height:37px;flex-basis:37px}.worth-it-chat-header h2{font-size:14px}.worth-it-chat-header p{font-size:10px}
 .worth-it-chat-safety-note{padding:8px 13px;font-size:9px}.worth-it-chat-messages{padding:16px 12px}.worth-it-chat-message{max-width:94%}.worth-it-chat-compose-wrap{padding:10px}.worth-it-chat-compose-meta{font-size:8px}
}
@media(max-width:540px){
 .worth-it-chat-window{display:block}.worth-it-chat-sidebar{display:none;width:100%;height:100%;border:0}.worth-it-chat-window.is-mobile-sidebar .worth-it-chat-sidebar{display:flex}.worth-it-chat-window.is-mobile-sidebar .worth-it-chat-main{display:none}
 .worth-it-chat-mobile-close{display:grid}.worth-it-chat-header-actions .worth-it-chat-icon-btn:first-child{display:none}
 .worth-it-chat-window:not(.is-mobile-sidebar) .worth-it-chat-main{height:100dvh}.worth-it-chat-header{padding:12px 13px}.worth-it-chat-header-person{gap:9px}.worth-it-chat-header h2{font-size:13px}.worth-it-chat-header p{max-width:190px}
 .worth-it-chat-message .worth-it-chat-person-avatar{display:none}.worth-it-chat-message{max-width:97%}.worth-it-chat-bubble{font-size:12px;padding:10px 12px}.worth-it-chat-send-btn{padding:0 12px}.worth-it-chat-compose textarea{font-size:12px}
 .worth-it-chat-group-card{padding:23px 18px}
}

body.worth-it-chat-open{overflow:hidden}
.worth-it-chat-mobile-list-btn{display:none}
@media(max-width:540px){.worth-it-chat-mobile-list-btn{display:grid}}

/* Keep the chat panel lower on desktop when opened from the header button. */
.worth-it-chat-window:not(.is-fullscreen){transform:translateY(400px)}
@media(max-width:760px){.worth-it-chat-window:not(.is-fullscreen){transform:none}}


/* Hard-pin the chat to the viewport in fullscreen; bypass the normal desktop offset and any ancestor layout constraints. */
.worth-it-chat-overlay.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  transform: none !important;
}
.worth-it-chat-overlay.is-fullscreen > .worth-it-chat-window.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: none !important;
}


/* Keep the New Group dialog above the chat overlay and preserve its requested vertical offset. */
.worth-it-chat-group-dialog {
  z-index: 2147483647 !important;
  isolation: isolate;
}
.worth-it-chat-group-card {
  position: relative;
  z-index: 1;
  transform: translateY(0);
}


/* Searchable, scrollable friend picker for New Group. */
.worth-it-chat-group-list-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 7px;color:var(--chat-muted,#94a3b8);font-size:11px;font-weight:800}
.worth-it-chat-group-list-heading span{font-size:10px;font-weight:500;opacity:.8}
.worth-it-chat-group-card #worthItChatGroupSearch{margin-bottom:2px}
.worth-it-chat-group-friend-list{display:grid;gap:5px;max-height:min(290px,34dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(129,140,248,.65) rgba(148,163,184,.1);padding:5px;margin:4px -5px 12px;border:1px solid rgba(148,163,184,.16);border-radius:14px}
.worth-it-chat-group-friend-option{display:flex!important;align-items:center;gap:11px;padding:10px 11px!important;margin:0!important;border:1px solid transparent;background:rgba(148,163,184,.06);transition:background .15s,border-color .15s}
.worth-it-chat-group-friend-option:hover{background:rgba(129,140,248,.11);border-color:rgba(129,140,248,.24)}
.worth-it-chat-group-friend-option:has(input:checked){background:rgba(99,102,241,.15);border-color:rgba(129,140,248,.55)}
.worth-it-chat-group-friend-option input[type=checkbox]{width:17px;height:17px;flex:0 0 17px;margin:0;accent-color:#818cf8;cursor:pointer}
.worth-it-chat-group-friend-option .worth-it-chat-person-avatar{flex:0 0 34px;width:34px;height:34px}
.worth-it-chat-group-friend-option .worth-it-chat-group-friend-details{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.worth-it-chat-group-friend-option .worth-it-chat-group-friend-details strong{overflow:hidden;color:inherit;font-size:12px;font-weight:750!important;text-overflow:ellipsis;white-space:nowrap}
.worth-it-chat-group-friend-option .worth-it-chat-group-friend-details small{overflow:hidden;color:var(--chat-muted,#94a3b8);font-size:10px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.worth-it-chat-group-no-results{padding:18px 10px!important;margin:0!important;text-align:center;color:var(--chat-muted,#94a3b8)!important;font-size:12px}
html[data-theme="light"] .worth-it-chat-group-friend-list{border-color:rgba(100,116,139,.2);background:rgba(226,232,240,.4)}
html[data-theme="light"] .worth-it-chat-group-friend-option{background:rgba(255,255,255,.82)}
html[data-theme="light"] .worth-it-chat-group-friend-option:hover{background:#eef2ff}
html[data-theme="light"] .worth-it-chat-group-friend-option:has(input:checked){background:#e0e7ff;border-color:#818cf8}
html[data-theme="light"] .worth-it-chat-group-friend-option .worth-it-chat-group-friend-details small{color:#64748b}
@media(max-width:540px){.worth-it-chat-group-friend-list{max-height:30dvh}.worth-it-chat-group-list-heading{align-items:flex-start;flex-direction:column;gap:3px}}

.worth-it-chat-group-friend-option[hidden],.worth-it-chat-no-results[hidden],.worth-it-chat-group-no-results[hidden]{display:none!important}


/* Worth It Chat — focused polish for the Create a group chat dialog. */
.worth-it-chat-group-card{
  box-sizing:border-box;
  width:min(520px,100%);
  max-height:min(760px,92dvh);
  padding:30px;
  scrollbar-width:thin;
  scrollbar-color:rgba(129,140,248,.45) transparent;
}
.worth-it-chat-group-card .worth-it-chat-modal-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid rgba(129,140,248,.24);
  border-radius:999px;
  background:rgba(99,102,241,.11);
  font-size:10px;
  letter-spacing:.12em;
}
.worth-it-chat-group-card h2{
  margin:16px 0 8px;
  font-size:clamp(23px,3vw,27px);
  line-height:1.15;
}
.worth-it-chat-group-card>p{
  max-width:430px;
  margin-bottom:20px;
  font-size:12px;
  line-height:1.65;
}
.worth-it-chat-group-card>label{
  display:block;
  margin:15px 0 7px;
  color:#dbe4ff;
  font-size:11px;
  font-weight:800;
}
.worth-it-chat-group-card input:not([type=checkbox]){
  box-sizing:border-box;
  min-height:44px;
  border-radius:12px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.worth-it-chat-group-card input:not([type=checkbox]):focus{
  border-color:rgba(129,140,248,.8);
  box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
.worth-it-chat-group-list-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  color:#e7eaff;
  font-size:12px;
  font-weight:800;
}
.worth-it-chat-group-list-heading .worth-it-chat-group-list-title{
  font-size:12px;
  font-weight:800;
}
.worth-it-chat-group-list-heading>span:last-child{
  color:#94a3c5;
  font-size:10px;
  font-weight:600;
  text-align:right;
}
.worth-it-chat-group-selection-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:9px 0 10px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.17);
  border-radius:12px;
  background:rgba(15,23,42,.34);
}
.worth-it-chat-group-selection-summary strong{
  color:#dbeafe;
  font-size:11px;
  font-weight:800;
}
.worth-it-chat-group-selection-summary strong.is-ready{color:#a5f3fc}
.worth-it-chat-group-selection-summary strong.is-over-limit{color:#fda4af}
.worth-it-chat-group-selection-summary>span{
  color:#9eaccb;
  font-size:10px;
  line-height:1.45;
}
.worth-it-chat-group-friend-list{
  display:grid;
  gap:5px;
  max-height:270px;
  overscroll-behavior:contain;
  padding:2px 4px 2px 0;
  margin:0 0 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(129,140,248,.45) rgba(15,23,42,.12);
}
.worth-it-chat-group-friend-option{
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:20px 38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:60px;
  margin:0!important;
  padding:9px 11px;
  border:1px solid rgba(148,163,184,.1);
  border-radius:13px;
  background:rgba(148,163,184,.045);
  color:#eef2ff!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.worth-it-chat-group-friend-option:hover{
  border-color:rgba(129,140,248,.35);
  background:rgba(99,102,241,.09);
}
.worth-it-chat-group-friend-option.is-selected{
  border-color:rgba(129,140,248,.62);
  background:linear-gradient(100deg,rgba(99,102,241,.17),rgba(59,130,246,.08));
}
.worth-it-chat-group-friend-option>input[type=checkbox]{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#818cf8;
  cursor:pointer;
}
.worth-it-chat-group-friend-option>.worth-it-chat-group-avatar{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  min-width:38px;
  border:1px solid rgba(165,180,252,.25);
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(59,130,246,.24));
  color:#e0e7ff;
  font-size:11px;
  font-weight:800;
}
.worth-it-chat-group-friend-option>.worth-it-chat-group-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.worth-it-chat-group-friend-option>.worth-it-chat-friend-details,
.worth-it-chat-group-friend-option>.worth-it-chat-group-friend-details{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
}
.worth-it-chat-group-friend-option .worth-it-chat-group-friend-details strong{
  display:block;
  overflow:hidden;
  color:#f1f5ff;
  font-size:12px;
  font-weight:750;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.worth-it-chat-group-friend-option .worth-it-chat-group-friend-details small{
  display:block;
  overflow:hidden;
  color:#9eaccb;
  font-size:10px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.worth-it-chat-group-no-results{
  margin:8px 0!important;
  padding:14px;
  border:1px dashed rgba(148,163,184,.22);
  border-radius:12px;
  color:#9eaccb!important;
  text-align:center;
  font-size:11px!important;
}
.worth-it-chat-group-card>.worth-it-chat-compose-status{
  margin:8px 0!important;
  font-size:11px;
}
.worth-it-chat-group-card>.worth-it-chat-send-btn{
  min-height:45px;
  width:100%;
  margin-top:8px;
}
.worth-it-chat-group-card>.worth-it-chat-send-btn:disabled,
.worth-it-chat-group-card>.worth-it-chat-send-btn:disabled:hover{
  opacity:.48;
  cursor:not-allowed;
  transform:none;
  filter:saturate(.65);
  box-shadow:none;
}
html[data-theme="light"] .worth-it-chat-group-card>label{color:#334155}
html[data-theme="light"] .worth-it-chat-group-list-heading{color:#1e293b}
html[data-theme="light"] .worth-it-chat-group-list-heading>span:last-child{color:#64748b}
html[data-theme="light"] .worth-it-chat-group-selection-summary{
  border-color:rgba(100,116,139,.2);
  background:rgba(226,232,240,.42);
}
html[data-theme="light"] .worth-it-chat-group-selection-summary strong{color:#1e3a8a}
html[data-theme="light"] .worth-it-chat-group-selection-summary>span{color:#64748b}
html[data-theme="light"] .worth-it-chat-group-friend-option{
  border-color:rgba(100,116,139,.13);
  background:rgba(226,232,240,.4);
  color:#1e293b!important;
}
html[data-theme="light"] .worth-it-chat-group-friend-option:hover{background:rgba(99,102,241,.08)}
html[data-theme="light"] .worth-it-chat-group-friend-option.is-selected{
  border-color:rgba(99,102,241,.5);
  background:linear-gradient(100deg,rgba(99,102,241,.12),rgba(59,130,246,.07));
}
html[data-theme="light"] .worth-it-chat-group-friend-option .worth-it-chat-group-friend-details strong{color:#172554}
html[data-theme="light"] .worth-it-chat-group-friend-option .worth-it-chat-group-friend-details small{color:#64748b}
html[data-theme="light"] .worth-it-chat-group-no-results{color:#64748b!important}
@media(max-width:540px){
  .worth-it-chat-group-dialog{padding:10px}
  .worth-it-chat-group-card{
    width:100%;
    max-height:calc(100dvh - 20px);
    padding:24px 18px 18px;
    border-radius:19px;
  }
  .worth-it-chat-group-card h2{font-size:23px}
  .worth-it-chat-group-list-heading{margin-top:19px}
  .worth-it-chat-group-friend-list{max-height:min(300px,34dvh)}
}



/* Worth It Chat: notification toggle belongs only to the active chat header. */
.worth-it-chat-global-row{margin-bottom:3px}
.worth-it-chat-global-row>.worth-it-chat-side-item{
  width:100%;
  min-width:0;
  padding:11px 7px;
  gap:7px;
}
.worth-it-chat-global-row>.worth-it-chat-side-item>span:first-child{width:31px;flex-basis:31px}
.worth-it-chat-global-row>.worth-it-chat-side-item>i{display:none}
.worth-it-chat-global-count[hidden]{display:none!important}
.worth-it-chat-global-row>.worth-it-chat-side-item>.worth-it-chat-global-count{margin-left:auto;flex:0 0 auto}
.worth-it-chat-notification-btn[hidden]{display:none!important}

.worth-it-chat-header-actions{align-items:center;flex:0 0 auto}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications{
  flex:0 0 auto;
  width:auto;
  min-width:142px;
  min-height:34px;
  padding:7px 9px;
  gap:6px;
}
.worth-it-chat-header-notifications .worth-it-chat-notification-icon{font-size:14px}
.worth-it-chat-header-notifications .worth-it-chat-notification-label{
  font-size:9px;
  line-height:1.2;
  white-space:nowrap;
  overflow-wrap:normal;
}
html[data-theme="light"] .worth-it-chat-header-notifications{
  border-color:rgba(99,102,241,.2);
  background:rgba(99,102,241,.055);
  color:#4338ca;
}
html[data-theme="light"] .worth-it-chat-header-notifications.is-muted{
  border-color:rgba(100,116,139,.22);
  background:rgba(148,163,184,.09);
  color:#64748b;
}
@media(max-width:760px){
  .worth-it-chat-global-row>.worth-it-chat-side-item>span:first-child{width:28px;flex-basis:28px}
  .worth-it-chat-header-actions{gap:5px}
  .worth-it-chat-header-actions>.worth-it-chat-header-notifications{
    min-width:116px;
    padding:6px 7px;
    gap:5px;
  }
  .worth-it-chat-header-notifications .worth-it-chat-notification-label{font-size:8px}
}
@media(max-width:540px){
  .worth-it-chat-header-actions{gap:4px}
  .worth-it-chat-header-actions>.worth-it-chat-header-notifications{
    min-width:0;
    padding:6px 5px;
    gap:4px;
  }
  .worth-it-chat-header-notifications .worth-it-chat-notification-label{
    max-width:88px;
    font-size:7.5px;
    white-space:normal;
  }
}


/* Refined theme-aware styling for the active chat's notification toggle. */
.worth-it-chat-header-actions>.worth-it-chat-header-notifications{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid rgba(129,140,248,.38);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(59,130,246,.12));
  color:#e0e7ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(30,41,91,.18);
  font:inherit;
  font-weight:750;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications.is-enabled{
  border-color:rgba(129,140,248,.42);
  background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(37,99,235,.16));
  color:#e0e7ff;
}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications.is-muted{
  border-color:rgba(148,163,184,.27);
  background:linear-gradient(135deg,rgba(71,85,105,.24),rgba(51,65,85,.2));
  color:#cbd5e1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications:hover{
  border-color:rgba(129,140,248,.78);
  background:linear-gradient(135deg,rgba(124,58,237,.32),rgba(37,99,235,.25));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 18px rgba(79,70,229,.22);
  transform:translateY(-1px);
}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications:active{
  transform:translateY(0);
}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications:focus-visible{
  outline:2px solid #818cf8;
  outline-offset:2px;
}
.worth-it-chat-header-actions>.worth-it-chat-header-notifications:disabled{
  opacity:.65;
  cursor:wait;
  transform:none;
}
.worth-it-chat-header-notifications .worth-it-chat-notification-icon{
  flex:0 0 auto;
  line-height:1;
}
.worth-it-chat-header-notifications .worth-it-chat-notification-label{
  font-weight:750;
}
html[data-theme="light"] .worth-it-chat-header-actions>.worth-it-chat-header-notifications{
  border-color:rgba(99,102,241,.27);
  background:linear-gradient(135deg,#ffffff,#eef2ff);
  color:#3730a3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 12px rgba(79,70,229,.09);
}
html[data-theme="light"] .worth-it-chat-header-actions>.worth-it-chat-header-notifications.is-enabled{
  border-color:rgba(99,102,241,.3);
  background:linear-gradient(135deg,#ffffff,#e8edff);
  color:#3730a3;
}
html[data-theme="light"] .worth-it-chat-header-actions>.worth-it-chat-header-notifications.is-muted{
  border-color:rgba(100,116,139,.26);
  background:linear-gradient(135deg,#ffffff,#f1f5f9);
  color:#475569;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 8px rgba(15,23,42,.05);
}
html[data-theme="light"] .worth-it-chat-header-actions>.worth-it-chat-header-notifications:hover{
  border-color:rgba(99,102,241,.55);
  background:linear-gradient(135deg,#fff,#e0e7ff);
  color:#312e81;
  box-shadow:0 5px 15px rgba(79,70,229,.13);
}


/* Worth It Chat routed view: open directly at full viewport size without a maximize step. */
.worth-it-chat-overlay.is-fullscreen:not([hidden]){
    position:fixed!important;inset:0!important;padding:0!important;
    align-items:stretch!important;justify-content:stretch!important;
}
.worth-it-chat-overlay.is-fullscreen:not([hidden])>.worth-it-chat-window.is-fullscreen{
    display:grid!important;grid-template-columns:270px minmax(0,1fr)!important;
    width:100%!important;height:100vh!important;height:100dvh!important;
    min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
    margin:0!important;transform:none!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;flex:1 1 auto!important;
}
.worth-it-chat-window.is-fullscreen:not(.is-mobile-sidebar){transform:none!important;}
.worth-it-chat-main{min-width:0;min-height:0;}
#worthItChatShareInviteBtn:not([hidden]){display:grid!important;}
#worthItChatShareInviteBtn[hidden],.worth-it-chat-invite-dialog[hidden]{display:none!important;}
.worth-it-chat-signin-btn{
    margin-top:8px;padding:11px 18px;border:1px solid rgba(129,140,248,.55);
    border-radius:12px;background:linear-gradient(120deg,#6654e8,#3268d9);
    color:#fff;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(66,83,220,.2);
    transition:transform .16s ease,filter .16s ease;
}
.worth-it-chat-signin-btn:hover{transform:translateY(-1px);filter:brightness(1.08);}
.worth-it-chat-invite-dialog{
    position:fixed;inset:0;z-index:10080;display:grid;place-items:center;
    padding:clamp(12px,3vw,26px);background:rgba(3,7,19,.76);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.worth-it-chat-invite-card{
    position:relative;width:min(480px,100%);max-height:min(90dvh,720px);overflow:auto;
    padding:clamp(24px,5vw,38px);border:1px solid rgba(129,140,248,.3);
    border-radius:24px;color:#edf1ff;text-align:center;
    background:radial-gradient(120% 110% at 0% 0%,rgba(101,82,232,.18),transparent 55%),linear-gradient(145deg,#0b1224,#111d3b);
    box-shadow:0 28px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04);
}
.worth-it-chat-invite-card .worth-it-chat-modal-kicker{
    display:block;margin:0 0 18px;color:#aeb7ff;font-size:10px;font-weight:900;
    letter-spacing:.18em;text-transform:uppercase;
}
.worth-it-chat-invite-icon{
    width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;
    border:1px solid rgba(129,140,248,.35);border-radius:18px;
    background:linear-gradient(145deg,rgba(124,92,255,.2),rgba(41,111,221,.13));font-size:26px;
}
.worth-it-chat-invite-card h2{margin:0;color:#f7f8ff;font-size:clamp(22px,4vw,28px);line-height:1.2;font-weight:850;letter-spacing:-.035em;}
.worth-it-chat-invite-card>p:not(.worth-it-chat-compose-status){margin:12px 0 22px;color:#b9c4df;font-size:14px;line-height:1.7;}
.worth-it-chat-invite-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.worth-it-chat-invite-actions .worth-it-chat-send-btn{width:auto;min-width:150px;min-height:44px;padding:11px 18px;}
.worth-it-chat-invite-actions .worth-it-chat-send-btn:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.45);}
.worth-it-chat-invite-cancel{
    min-height:44px;padding:10px 18px;border:1px solid rgba(148,163,184,.28);
    border-radius:12px;background:rgba(148,163,184,.08);color:#dce4f8;
    font:inherit;font-weight:750;cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.worth-it-chat-invite-cancel:hover{background:rgba(148,163,184,.16);border-color:rgba(165,180,252,.42);}
.worth-it-chat-invite-card .worth-it-chat-compose-status{margin:14px 0 0;}
.worth-it-community-footer-link{margin:8px 0 0;}
.worth-it-community-footer-link a{color:#9fa9ff;text-decoration:none;font-weight:750;}
.worth-it-community-footer-link a:hover{text-decoration:underline;}
html[data-theme="light"] .worth-it-chat-invite-dialog{background:rgba(31,41,75,.28);}
html[data-theme="light"] .worth-it-chat-invite-card{
    color:#1e293b;border-color:rgba(99,102,241,.2);
    background:radial-gradient(120% 110% at 0% 0%,rgba(129,140,248,.11),transparent 55%),linear-gradient(145deg,#fff,#f1f5ff);
    box-shadow:0 25px 80px rgba(42,55,100,.2),inset 0 1px #fff;
}
html[data-theme="light"] .worth-it-chat-invite-card .worth-it-chat-modal-kicker{color:#5b54c9;}
html[data-theme="light"] .worth-it-chat-invite-icon{border-color:rgba(99,102,241,.2);background:linear-gradient(145deg,#eeedff,#eaf1ff);}
html[data-theme="light"] .worth-it-chat-invite-card h2{color:#18234b;}
html[data-theme="light"] .worth-it-chat-invite-card>p:not(.worth-it-chat-compose-status){color:#52617d;}
html[data-theme="light"] .worth-it-chat-invite-cancel{background:#fff;color:#334155;border-color:#cbd5e1;}
html[data-theme="light"] .worth-it-chat-invite-cancel:hover{background:#f1f5ff;border-color:#9298ec;}
html[data-theme="light"] .worth-it-community-footer-link a{color:#4f46e5;}
@media(max-width:760px){
    .worth-it-chat-overlay.is-fullscreen:not([hidden])>.worth-it-chat-window.is-fullscreen{grid-template-columns:210px minmax(0,1fr)!important;}
}
@media(max-width:540px){
    .worth-it-chat-overlay.is-fullscreen:not([hidden])>.worth-it-chat-window.is-fullscreen{display:block!important;grid-template-columns:none!important;}
    .worth-it-chat-overlay.is-fullscreen:not([hidden]) .worth-it-chat-window.is-fullscreen:not(.is-mobile-sidebar) .worth-it-chat-main{height:100vh;height:100dvh;}
    #worthItChatShareInviteBtn:not([hidden]){display:grid!important;}
    .worth-it-chat-invite-card{padding:24px 20px;border-radius:20px;}
    .worth-it-chat-invite-actions{flex-direction:column;}
    .worth-it-chat-invite-actions .worth-it-chat-send-btn,.worth-it-chat-invite-cancel{width:100%;}
}

/* The mobile friend/group list must remain full-height while switching away from a conversation. */
.worth-it-chat-window.is-mobile-sidebar{transform:none!important;}


/* Worth It presence: distinctive signal-orb indicators, consistent across all profile avatars. */
.worth-it-presence-host{position:relative!important}
.worth-it-presence-indicator{position:absolute;right:0;bottom:0;z-index:5;display:block;width:16px;height:16px;box-sizing:border-box;border:2px solid var(--card-solid,var(--card));border-radius:50%;background:#778196;box-shadow:0 1px 5px rgba(0,0,0,.48);cursor:help;pointer-events:auto;touch-action:manipulation;outline-offset:3px}
.worth-it-presence-indicator:before{content:"";position:absolute;inset:2px;border-radius:50%;background:#c3cbd7;pointer-events:none}
.worth-it-presence-indicator.is-online{background:#10b981;box-shadow:0 0 0 1px rgba(16,185,129,.24),0 0 10px rgba(16,185,129,.65),0 1px 4px rgba(0,0,0,.32)}
.worth-it-presence-indicator.is-online:before{inset:2px;background:#eafff5}
.worth-it-presence-indicator.is-online:after{content:"";position:absolute;inset:-4px;border:1px solid rgba(16,185,129,.52);border-radius:50%;animation:worthItPresencePulse 2.4s ease-out infinite;pointer-events:none}
.worth-it-presence-indicator.is-offline{background:#737d8d;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.worth-it-presence-indicator.is-offline:before{background:#c0c7d2}
.worth-it-presence-tooltip{position:absolute;left:50%;bottom:calc(100% + 7px);z-index:20;display:block;width:max-content;max-width:110px;padding:4px 8px;border:1px solid rgba(148,163,184,.35);border-radius:7px;background:#111827;color:#f8fafc;font:800 11px/1.35 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;box-shadow:0 5px 16px rgba(0,0,0,.36);opacity:0;visibility:hidden;transform:translate(-50%,3px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.worth-it-presence-tooltip.is-portal{position:fixed;left:50%;right:auto;bottom:auto;z-index:2147483647;opacity:0;visibility:hidden;transform:translate(-50%,-100%);will-change:top,left}
.worth-it-presence-tooltip.is-portal.is-visible{opacity:1;visibility:visible;transform:translate(-50%,-100%)}
.worth-it-presence-tooltip.is-portal.is-below{transform:translate(-50%,3px)}
.worth-it-presence-tooltip.is-portal.is-below.is-visible{transform:translate(-50%,0)}
.worth-it-presence-indicator:hover .worth-it-presence-tooltip:not(.is-portal),.worth-it-presence-indicator:focus-visible .worth-it-presence-tooltip:not(.is-portal),.worth-it-presence-indicator.is-tooltip-open .worth-it-presence-tooltip:not(.is-portal){opacity:1;visibility:visible;transform:translate(-50%,0)}
.worth-it-profile-avatar-wrap .worth-it-presence-indicator{width:20px;height:20px;right:2px;bottom:2px;border-width:3px}
.worth-it-chat-header-avatar .worth-it-presence-indicator{width:17px;height:17px;right:0;bottom:0}
.profile-nav-btn .worth-it-presence-indicator{width:14px;height:14px;right:1px;bottom:0;border-width:2px}
#accountHeadAvatar .worth-it-presence-indicator{width:17px;height:17px}
.worth-it-profile-friend-avatar .worth-it-presence-indicator,.worth-it-profile-connection-avatar .worth-it-presence-indicator,.worth-it-notification-avatar .worth-it-presence-indicator{width:14px;height:14px;border-width:2px;right:0;bottom:0}
.worth-it-chat-person-avatar .worth-it-presence-indicator{width:14px;height:14px;border-width:2px;right:0;bottom:0}
.worth-it-profile-presence-text{display:flex;align-items:center;gap:7px;margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.worth-it-presence-status-dot{position:relative;display:inline-block;flex:0 0 9px;width:9px;height:9px;box-sizing:border-box;border-radius:50%;background:#778196;box-shadow:0 0 0 2px rgba(115,125,141,.13)}
.worth-it-presence-status-dot:after{content:"";position:absolute;inset:2px;border-radius:50%;background:#d3d9e2}
.worth-it-presence-status-dot.is-online{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12),0 0 8px rgba(16,185,129,.36)}
.worth-it-presence-status-dot.is-online:after{background:#eafff5}
.worth-it-profile-presence-text.is-online .worth-it-presence-label{color:#10b981;font-weight:800}
.worth-it-profile-section.has-banner .worth-it-profile-presence-text{color:rgba(255,255,255,.78)}
.worth-it-profile-section.has-banner .worth-it-profile-presence-text.is-online .worth-it-presence-label{color:#86efac}
.worth-it-person-presence-label{color:var(--muted2)!important;font-size:10px!important;font-weight:700!important}
.worth-it-chat-person-presence{display:block;margin-top:2px;color:var(--muted2);font-size:10px;line-height:1.25}
.worth-it-chat-message-receipt{display:block;align-self:flex-end;margin-top:-2px;padding:0 2px;color:var(--muted2);font-size:10px;font-weight:750;line-height:1.25;letter-spacing:.01em}
.worth-it-chat-message-receipt.is-sent{color:var(--muted2)}
.worth-it-chat-message-receipt.is-seen{color:#76a7ff}
html[data-theme="light"] .worth-it-chat-message-receipt.is-seen{color:#3768d7}
@keyframes worthItPresencePulse{0%{transform:scale(.74);opacity:.6}80%,100%{transform:scale(1.65);opacity:0}}
@media(prefers-reduced-motion:reduce){.worth-it-presence-indicator.is-online:after{animation:none;inset:-2px;opacity:.4}}
html[data-theme="light"] .worth-it-presence-indicator{border-color:#fff}


/* Separate group list actions from the group-opening target. */
.worth-it-chat-conversation-item{display:flex;align-items:stretch;gap:4px;min-width:0;margin:2px 0}
.worth-it-chat-conversation-item .worth-it-chat-conversation-open{flex:1 1 auto;width:auto;min-width:0;max-width:100%}
.worth-it-chat-group-actions-btn{display:grid;place-items:center;flex:0 0 32px;width:32px;min-width:32px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--chat-muted,#94a3b8);font-size:21px;line-height:1;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.worth-it-chat-group-actions-btn:hover,.worth-it-chat-group-actions-btn:focus-visible{outline:none;border-color:rgba(129,140,248,.35);background:rgba(124,92,255,.12);color:var(--text,#fff)}
.worth-it-chat-message-avatar-link{display:block;flex:0 0 30px;align-self:flex-end;text-decoration:none;border-radius:10px}
.worth-it-chat-message-avatar-link:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
.worth-it-chat-message-name{display:inline-block;cursor:pointer;text-decoration:none}
.worth-it-chat-message-name:hover{text-decoration:underline;text-underline-offset:2px;color:#c7d2fe}
.worth-it-chat-message-name:focus-visible{outline:2px solid #818cf8;outline-offset:2px;border-radius:3px}
.worth-it-chat-header-profile-link{color:inherit;text-decoration:none;cursor:pointer}
.worth-it-chat-header-profile-link:hover{text-decoration:underline;text-underline-offset:3px}
.worth-it-chat-header-avatar.is-profile-link{cursor:pointer;outline-offset:3px}
.worth-it-chat-header-avatar.is-profile-link:focus-visible{outline:2px solid #818cf8}
html[data-theme="light"] .worth-it-chat-message-name:hover{color:#4338ca}
.worth-it-chat-manage-dialog,.worth-it-user-search-overlay{position:fixed;inset:0;z-index:12020;display:grid;place-items:center;padding:clamp(12px,3vw,26px);box-sizing:border-box;background:rgba(3,7,19,.76);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.worth-it-chat-manage-dialog[hidden],.worth-it-user-search-overlay[hidden]{display:none!important}
.worth-it-chat-manage-card{width:min(450px,100%);max-height:min(90dvh,740px);overflow:auto;box-sizing:border-box;padding:clamp(22px,4.5vw,34px);border:1px solid rgba(129,140,248,.3);border-radius:23px;color:#edf1ff;text-align:center;background:radial-gradient(120% 110% at 0% 0%,rgba(101,82,232,.18),transparent 55%),linear-gradient(145deg,#0b1224,#111d3b);box-shadow:0 28px 100px rgba(0,0,0,.5)}
.worth-it-chat-manage-icon{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 15px;border:1px solid rgba(129,140,248,.35);border-radius:17px;background:linear-gradient(145deg,rgba(124,92,255,.2),rgba(41,111,221,.13));font-size:25px}
.worth-it-chat-manage-card h2{margin:0;color:#f7f8ff;font-size:clamp(21px,4vw,27px);line-height:1.2;overflow-wrap:anywhere}
.worth-it-chat-manage-card>p:not(.worth-it-chat-compose-status){margin:12px 0 22px;color:#b9c4df;font-size:13px;line-height:1.65}
.worth-it-chat-manage-actions{display:grid;gap:9px}
.worth-it-chat-manage-actions button{min-height:43px;width:100%;padding:10px 14px;border:1px solid rgba(148,163,184,.28);border-radius:11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:transform .16s ease,filter .16s ease}
.worth-it-chat-manage-actions button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.worth-it-chat-manage-actions button:disabled{opacity:.55;cursor:wait;transform:none}
.worth-it-chat-manage-leave{background:rgba(148,163,184,.1);color:#e2e8f0}
.worth-it-chat-manage-delete{border-color:rgba(248,113,113,.45)!important;background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff}
.worth-it-chat-manage-delete[hidden]{display:none!important}
.worth-it-chat-manage-cancel{background:rgba(148,163,184,.06);color:#b9c4df}
.worth-it-chat-manage-card .worth-it-chat-compose-status{margin:12px 0 0}
.worth-it-chat-manage-card .worth-it-chat-compose-status.is-error{color:#fda4af}
.worth-it-user-search-btn{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.worth-it-user-search-btn:hover,.worth-it-user-search-btn:focus-visible{outline:none;background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.55);transform:translateY(-1px)}
.worth-it-user-search-btn svg,.worth-it-user-search-symbol svg{display:block;width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.worth-it-user-search-card{display:flex;flex-direction:column;width:min(510px,100%);max-height:min(86dvh,720px);overflow:hidden;box-sizing:border-box;padding:23px;border:1px solid rgba(129,140,248,.3);border-radius:22px;background:var(--card-solid,var(--card));color:var(--text);box-shadow:0 28px 100px rgba(0,0,0,.48)}
.worth-it-user-search-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.worth-it-user-search-symbol{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border:1px solid rgba(124,92,255,.27);border-radius:13px;background:rgba(124,92,255,.11);color:var(--primary2,var(--primary))}
.worth-it-user-search-head>div:nth-child(2){min-width:0;flex:1}
.worth-it-user-search-head h2{margin:0;font-size:21px;font-weight:900;line-height:1.2}
.worth-it-user-search-head p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.worth-it-user-search-close{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);font-size:15px;cursor:pointer}
.worth-it-user-search-close:hover{border-color:var(--primary)}
.worth-it-user-search-label{margin:0 0 7px;font-size:12px;font-weight:850}
.worth-it-user-search-input{width:100%;height:44px;box-sizing:border-box;padding:11px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:14px;outline:none}
.worth-it-user-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,255,.14)}
.worth-it-user-search-hint{margin:8px 0 0;color:var(--muted2);font-size:10px;line-height:1.5}
.worth-it-user-search-status{margin:13px 0 8px;color:var(--muted);font-size:12px;line-height:1.5}
.worth-it-user-search-status.is-error{color:var(--danger)}
.worth-it-user-search-results{min-height:0;overflow-y:auto;display:grid;gap:7px;margin-top:2px;padding:1px 2px 2px}
.worth-it-user-search-result{display:flex;align-items:center;gap:11px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft);color:var(--text);text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.worth-it-user-search-result:hover,.worth-it-user-search-result:focus-visible{outline:none;transform:translateY(-1px);border-color:rgba(124,92,255,.52);background:rgba(124,92,255,.065)}
.worth-it-user-search-avatar{position:relative;display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;overflow:visible;border:1px solid rgba(124,92,255,.25);border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:14px;font-weight:900}
.worth-it-user-search-avatar>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.worth-it-user-search-avatar .worth-it-presence-indicator{width:12px;height:12px;right:0;bottom:0;border-color:var(--card-solid,var(--card))}
.worth-it-user-search-result-info{display:grid;gap:3px;min-width:0;flex:1}
.worth-it-user-search-result-info strong{font-size:13px;font-weight:900;line-height:1.25;overflow-wrap:anywhere}
.worth-it-user-search-result-info small{color:var(--muted);font-size:11px;line-height:1.35;overflow-wrap:anywhere}
.worth-it-user-search-presence{color:var(--muted2)!important;font-size:10px!important}
.worth-it-user-search-empty{padding:19px 8px;color:var(--muted);font-size:12px;line-height:1.6;text-align:center}
html[data-theme="light"] .worth-it-chat-manage-dialog,html[data-theme="light"] .worth-it-user-search-overlay{background:rgba(31,41,75,.28)}
html[data-theme="light"] .worth-it-chat-manage-card{color:#1e293b;border-color:rgba(99,102,241,.2);background:radial-gradient(120% 110% at 0% 0%,rgba(129,140,248,.11),transparent 55%),linear-gradient(145deg,#fff,#f1f5ff);box-shadow:0 25px 80px rgba(42,55,100,.2),inset 0 1px #fff}
html[data-theme="light"] .worth-it-chat-manage-card h2{color:#18234b}
html[data-theme="light"] .worth-it-chat-manage-card>p:not(.worth-it-chat-compose-status){color:#52617d}
html[data-theme="light"] .worth-it-chat-manage-leave{color:#334155;border-color:#cbd5e1;background:#fff}
html[data-theme="light"] .worth-it-chat-manage-cancel{color:#52617d;border-color:#cbd5e1;background:#f8fafc}
html[data-theme="light"] .worth-it-chat-manage-card .worth-it-chat-compose-status.is-error{color:#b91c1c}
html[data-theme="light"] .worth-it-user-search-card{background:#fff;border-color:rgba(99,102,241,.2);box-shadow:0 25px 80px rgba(42,55,100,.2)}
html[data-theme="light"] .worth-it-user-search-result{background:#f8fafc;border-color:#e2e8f0}
html[data-theme="light"] .worth-it-user-search-result:hover{background:#f0edff}
html[data-theme="light"] .worth-it-user-search-result-info small{color:#64748b}
@media(max-width:540px){
 .worth-it-user-search-card{padding:18px;border-radius:18px;max-height:calc(100dvh - 28px)}
 .worth-it-user-search-head h2{font-size:19px}
 .worth-it-chat-manage-card{padding:23px 19px;border-radius:19px}
 .worth-it-chat-message .worth-it-chat-person-avatar{display:grid;width:24px;height:24px;flex-basis:24px;border-radius:8px}
 .worth-it-chat-message-avatar-link{flex-basis:24px}
}


/* Make the avatar/GIF in the compact account popover easier to recognize. */
#accountHeadAvatar{width:58px!important;height:58px!important;min-width:58px!important;flex:0 0 58px!important;position:relative!important;overflow:visible!important;border-radius:16px!important}
#accountHeadAvatar img,#accountHeadAvatar .account-head-avatar,#accountHeadAvatar .auth-avatar-fallback,#accountHeadAvatar>div{width:58px!important;height:58px!important;min-width:58px!important;border-radius:16px!important;object-fit:cover!important;font-size:24px!important}
#accountHeadAvatar .worth-it-presence-indicator{width:17px;height:17px;right:-2px;bottom:-2px}


/* Keep the profile presence label directly beneath the avatar, compact and readable. */
.worth-it-profile-avatar-column{display:flex;flex:0 0 88px;flex-direction:column;align-items:center;gap:6px;min-width:0}
.worth-it-profile-avatar-column #worthItProfilePresence{display:flex;align-items:center;justify-content:center;gap:4px;margin:0;color:var(--muted);font-size:10px;font-weight:750;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.worth-it-profile-avatar-column #worthItProfilePresence .worth-it-presence-status-dot{width:8px;height:8px;flex-basis:8px}
.worth-it-profile-avatar-column #worthItProfilePresence.is-offline .worth-it-presence-label{color:var(--muted2)}
.worth-it-profile-section.has-banner .worth-it-profile-avatar-column #worthItProfilePresence.is-online .worth-it-presence-label{color:#86efac}
@media(max-width:520px){
 .worth-it-profile-avatar-column{flex-basis:66px;width:66px;gap:5px}
 .worth-it-profile-avatar-column #worthItProfilePresence{gap:3px;font-size:9px}
}


/* Reposition the three profile statistic buttons only for signed-in visitors viewing someone else's profile. */
@media(min-width:1051px){
 #profileSection.signed-in-other-profile-view .worth-it-profile-social-column .worth-it-profile-stats{transform:translate(-30px,0px)}
}


/* Shift the signed-in other-profile friend/follow action buttons left by 20px on desktop. */
@media(min-width:1051px){
 #profileSection.signed-in-other-profile-view .worth-it-profile-social-actions{transform:translate(-28px,0)}
}


/* Let status dots protrude beyond the circular friend avatars without unrounding the photos. */
.worth-it-profile-friend-avatar{position:relative;overflow:visible}
.worth-it-profile-friend-avatar>img{border-radius:50%}


/* Notification dismissal controls and the 24-hour retention note. */
.worth-it-notification-expiry-note{margin:0;padding:8px 13px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(203,213,225,.7);font-size:10px;line-height:1.45;text-align:center}
.worth-it-notification-dismiss{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;margin:0 0 0 auto;padding:0;border:1px solid rgba(148,163,184,.2);border-radius:8px;background:rgba(148,163,184,.07);color:inherit;font:800 16px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.worth-it-notification-dismiss:hover,.worth-it-notification-dismiss:focus-visible{border-color:rgba(248,113,113,.5);background:rgba(239,68,68,.12);color:#fca5a5;outline:none;transform:scale(1.04)}
.worth-it-notification-dismiss:disabled{opacity:.5;cursor:wait;transform:none}
.worth-it-notification-request .worth-it-notification-actions .worth-it-notification-dismiss{margin-left:1px}
html[data-theme="light"] .worth-it-notification-expiry-note{color:#64748b;border-color:rgba(15,23,42,.08)}
html[data-theme="light"] .worth-it-notification-dismiss{border-color:rgba(15,23,42,.14);background:rgba(15,23,42,.035);color:#475569}
html[data-theme="light"] .worth-it-notification-dismiss:hover,html[data-theme="light"] .worth-it-notification-dismiss:focus-visible{border-color:rgba(220,38,38,.4);background:rgba(239,68,68,.08);color:#b91c1c}


/* FULL ACCOUNT SETTINGS PAGE */
.worth-it-settings-page{min-height:calc(100vh - 72px);padding:34px 0 76px;color:var(--text)}
.worth-it-settings-container{max-width:1040px}
.worth-it-settings-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:34px}
.worth-it-settings-section-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px}
.worth-it-settings-section-nav span{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.worth-it-settings-page [hidden],.worth-it-settings-page [hidden="hidden"]{display:none!important}
.worth-it-settings-overline,.worth-it-settings-kicker{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.13em}
.worth-it-settings-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 0 28px;border-bottom:1px solid var(--border);margin-bottom:26px}
.worth-it-settings-kicker{margin-bottom:8px;color:var(--primary2)}
.worth-it-settings-hero h1{font-size:clamp(30px,4vw,42px);line-height:1.15;letter-spacing:-.04em;margin-bottom:10px}
.worth-it-settings-hero p:not(.worth-it-settings-kicker){color:var(--muted);max-width:620px}
.worth-it-settings-save-note{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:12px;border:1px solid var(--border);border-radius:999px;padding:9px 13px;background:var(--surface-soft)}
.worth-it-settings-save-note span{color:var(--success);font-weight:900}
.worth-it-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.worth-it-settings-card,.worth-it-settings-panel{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:0 12px 34px rgba(0,0,0,.08)}
.worth-it-settings-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:14px;padding:20px}
.worth-it-settings-card-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;border:1px solid rgba(124,92,255,.22);background:rgba(124,92,255,.1);font-size:21px}
.worth-it-settings-card-copy{min-width:0}
.worth-it-settings-card h2,.worth-it-settings-panel h2{font-size:16px;line-height:1.35;margin:2px 0 7px}
.worth-it-settings-card p,.worth-it-settings-panel-heading p{font-size:13px;line-height:1.6;color:var(--muted)}
.worth-it-settings-status{align-self:start;margin-top:3px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap}
.worth-it-settings-panel{padding:24px}
.worth-it-settings-panel-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.worth-it-settings-panel-heading h2{font-size:18px;margin-bottom:5px}
.worth-it-settings-control-group{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.worth-it-settings-control-group>label{font-size:13px;font-weight:700;color:var(--text)}
.worth-it-settings-page-options{max-width:560px}
.worth-it-settings-reset{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--border);margin-top:25px;padding-top:20px}
.worth-it-settings-reset strong{font-size:13px}
.worth-it-settings-reset p{font-size:12px;color:var(--muted);margin-top:4px}
.worth-it-settings-reset .settings-option{flex:0 0 auto}
.worth-it-settings-roadmap{margin:16px 3px 0;color:var(--muted2);font-size:11px;line-height:1.6}
.settings-more-option{width:100%;background:linear-gradient(110deg,rgba(124,92,255,.12),rgba(56,189,248,.09));border-color:rgba(124,92,255,.32)}
@media(max-width:700px){
 .worth-it-settings-page{padding:22px 0 48px}
 .worth-it-settings-toolbar{align-items:flex-start;flex-direction:column;margin-bottom:26px}
 .worth-it-settings-section-nav{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:18px}
 .worth-it-settings-hero{align-items:flex-start;flex-direction:column;gap:16px;padding-bottom:22px}
 .worth-it-settings-grid{grid-template-columns:minmax(0,1fr);gap:10px}
 .worth-it-settings-card{padding:16px;grid-template-columns:40px minmax(0,1fr);gap:12px}
 .worth-it-settings-card-icon{width:40px;height:40px;font-size:19px}
 .worth-it-settings-status{grid-column:2;grid-row:2;justify-self:start;margin-top:-4px}
 .worth-it-settings-panel{padding:18px}
 .worth-it-settings-reset{align-items:stretch;flex-direction:column;gap:12px}
 .worth-it-settings-reset .settings-option{width:100%}
}


/* Account details inside full Settings */
.account-settings-field{padding:18px 0;border-top:1px solid var(--border);min-width:0}
.account-settings-field:first-of-type{border-top:0;padding-top:0}
.account-settings-label-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px}
.account-settings-label-row label{font-size:13px;font-weight:800;color:var(--text)}
.account-settings-current-value{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:11px;font-weight:700;overflow-wrap:anywhere}
.account-settings-current-value.is-success{color:#22c55e;border-color:rgba(34,197,94,.3)}
.account-settings-current-value.is-error{color:#f87171;border-color:rgba(248,113,113,.3)}
.account-settings-help{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 11px}
.account-settings-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.account-settings-input-row input{width:100%;min-width:0;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:13px;outline:none}
.account-settings-input-row input:focus{border-color:var(--primary);box-shadow:var(--focus-ring)}
.account-settings-save{flex:0 0 auto;min-width:112px}
.account-settings-save:disabled{opacity:.45;cursor:not-allowed;transform:none}
.account-settings-status{font-size:12px;line-height:1.55;color:var(--muted);margin-top:9px;overflow-wrap:anywhere}
.account-settings-status.is-error{color:#f87171}
.account-settings-status.is-success{color:#22c55e}
.account-settings-profile-link{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--border);padding-top:18px;margin-top:4px}
.account-settings-profile-link strong{font-size:13px}
.account-settings-profile-link p{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.55}
#accountSettingsSignedOut{padding:8px 0 2px}
#accountSettingsSignedOut strong{font-size:14px}
#accountSettingsSignedOut p{margin:7px 0 14px;color:var(--muted);font-size:13px;line-height:1.6}
#accountSettingsSignedOut .settings-option{flex:0 0 auto}
@media(max-width:620px){
 .account-settings-input-row{grid-template-columns:minmax(0,1fr)}
 .account-settings-save{width:100%}
 .account-settings-label-row{align-items:flex-start}
 .account-settings-profile-link{align-items:stretch;flex-direction:column;gap:12px}
 .account-settings-profile-link .settings-option{width:100%}
}


/* Security & Login settings */
.account-settings-actions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.security-mfa-enroll,.security-mfa-disable{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:15px;background:var(--surface-soft)}
.security-mfa-enroll h3{font-size:15px;margin-bottom:6px}
.security-mfa-enroll>p,.security-mfa-disable>p{font-size:12px;line-height:1.6;color:var(--muted);margin-bottom:12px}
.security-mfa-qr{display:block;width:min(240px,100%);height:auto;aspect-ratio:1;margin:14px auto;padding:10px;background:#fff;border-radius:12px}
.security-mfa-secret-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:14px 0}
.security-mfa-secret-wrap label,.security-mfa-enroll>label,.security-mfa-disable>label{font-size:12px;font-weight:800;color:var(--text)}
.security-mfa-secret-wrap code{max-width:100%;padding:9px 10px;line-height:1.5;border:1px solid var(--border);border-radius:9px;background:var(--card);overflow-wrap:anywhere;user-select:all;color:var(--text)}
.security-mfa-code{display:block;width:min(300px,100%);padding:12px 14px;margin:8px 0 10px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:18px;letter-spacing:.2em;text-align:center}
.security-danger-button{border-color:rgba(239,68,68,.38);color:#f87171}
.security-danger-button:hover{border-color:rgba(239,68,68,.72);background:rgba(239,68,68,.08)}


/* Privacy, notifications and personal data controls in full Settings. */
.worth-it-settings-card[data-settings-target]{cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.worth-it-settings-card[data-settings-target]:hover{transform:translateY(-2px);border-color:rgba(124,92,255,.4);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.worth-it-settings-card[data-settings-target]:focus-visible{outline:2px solid var(--accent,#7c5cff);outline-offset:3px}
.account-settings-select{display:block;width:100%;max-width:560px;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:13px}
.account-settings-select:focus-visible{outline:2px solid var(--accent,#7c5cff);outline-offset:2px}
.account-settings-toggle{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;cursor:pointer;min-width:0}
.account-settings-toggle input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent,#7c5cff);cursor:pointer}
.account-settings-toggle strong{display:block;color:var(--text);font-size:13px;line-height:1.45}
.account-settings-toggle small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.55;font-weight:400}
.account-settings-toggle input:disabled{cursor:not-allowed;opacity:.55}
.account-settings-status.is-warning{color:var(--warning,#d4a72c)}
#yourDataSummary{line-height:1.8;overflow-wrap:anywhere}

.worth-it-presence-indicator.is-hidden{display:none!important}
.worth-it-profile-presence-text.is-hidden .worth-it-presence-status-dot{display:none}
.worth-it-profile-presence-text.is-hidden .worth-it-presence-label{color:var(--muted)}


/* Keep the logged-out Sign in button in normal flow so it cannot overlap the separate user-search button. */
.auth-wrap:has(> #authBtn:not([style*="display: none"])){
    flex:0 0 auto !important;
    width:max-content !important;
    min-width:max-content !important;
}
.auth-wrap:has(> #authBtn:not([style*="display: none"])) > #authBtn{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
}
.auth-wrap:has(> #authBtn:not([style*="display: none"])) > #authBtn:hover,
.auth-wrap:has(> #authBtn:not([style*="display: none"])) > #authBtn:active{
    transform:translateY(-2px) !important;
}


/* Guest Lite: visible daily account prompt choice and access-limit dialog. */
.auth-modal-guest-choice{
    display:none;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:42px;
    margin-top:9px;
    padding:10px 14px;
    border:1px solid rgba(124,92,255,.32);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(124,92,255,.09),rgba(56,189,248,.06));
    color:var(--text);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.auth-modal-guest-choice:hover,
.auth-modal-guest-choice:focus-visible{
    outline:none;
    border-color:rgba(124,92,255,.72);
    background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(56,189,248,.1));
    transform:translateY(-1px);
}
.auth-modal-guest-choice[hidden]{display:none!important}
.auth-modal-overlay.signup-mode .auth-modal-guest-choice{display:flex}

.worth-it-guest-overlay{
    position:fixed;
    inset:0;
    z-index:15050;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    padding:clamp(10px,2.5vw,26px);
    box-sizing:border-box;
    background:rgba(3,7,19,.78);
    -webkit-backdrop-filter:blur(13px);
    backdrop-filter:blur(13px);
}
.worth-it-guest-overlay[hidden]{display:none!important}
.worth-it-guest-card{
    display:flex;
    flex-direction:column;
    width:min(850px,100%);
    max-height:min(94dvh,900px);
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
    padding:clamp(17px,3vw,28px);
    border:1px solid rgba(129,140,248,.33);
    border-radius:22px;
    color:var(--text);
    background:var(--card-solid,var(--card));
    box-shadow:0 28px 100px rgba(0,0,0,.48);
}
.worth-it-guest-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    flex:0 0 auto;
    padding-bottom:17px;
    border-bottom:1px solid var(--border);
}
.worth-it-guest-head>div{min-width:0}
.worth-it-guest-kicker{
    display:block;
    margin-bottom:7px;
    color:var(--primary2);
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
}
.worth-it-guest-head h2{
    margin:0;
    font-size:clamp(21px,3vw,28px);
    font-weight:900;
    line-height:1.18;
    letter-spacing:-.025em;
}
.worth-it-guest-head p{
    max-width:700px;
    margin:9px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.65;
}
.worth-it-guest-close{
    display:grid;
    place-items:center;
    flex:0 0 35px;
    width:35px;
    height:35px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    font-size:17px;
    cursor:pointer;
}
.worth-it-guest-close:hover{border-color:var(--primary)}
.worth-it-guest-body{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:12px;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:17px 2px 15px;
}
.worth-it-guest-list{
    min-width:0;
    padding:15px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface-soft);
}
.worth-it-guest-list h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 11px;
    font-size:13px;
    font-weight:900;
    line-height:1.35;
}
.worth-it-guest-allowed h3>span{color:#34d399}
.worth-it-guest-restricted h3>span{font-size:14px}
.worth-it-guest-list ul{
    display:grid;
    gap:9px;
    margin:0;
    padding-left:17px;
    color:var(--muted);
    font-size:11px;
    line-height:1.58;
}
.worth-it-guest-list li{padding-left:1px}
.worth-it-guest-list strong{color:var(--text);font-weight:850}
.worth-it-guest-consent{
    display:flex;
    align-items:flex-start;
    gap:11px;
    flex:0 0 auto;
    padding:13px 14px;
    border:1px solid rgba(124,92,255,.35);
    border-radius:13px;
    background:rgba(124,92,255,.075);
    cursor:pointer;
}
.worth-it-guest-consent input{
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--primary);
    cursor:pointer;
}
.worth-it-guest-consent span{display:block;min-width:0}
.worth-it-guest-consent strong{
    display:block;
    color:var(--text);
    font-size:12px;
    font-weight:850;
    line-height:1.55;
}
.worth-it-guest-consent small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
}
.worth-it-guest-consent-status{
    min-height:16px;
    margin:7px 1px 11px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
}
.worth-it-guest-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex:0 0 auto;
    padding-top:12px;
    border-top:1px solid var(--border);
}
.worth-it-guest-actions button{
    min-height:42px;
    padding:10px 14px;
    border-radius:11px;
    font:inherit;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
    transition:transform .16s ease,filter .16s ease,border-color .16s ease;
}
.worth-it-guest-actions button:hover{transform:translateY(-1px)}
.worth-it-guest-create-account{
    border:1px solid var(--border);
    background:var(--surface-soft);
    color:var(--text);
}
.worth-it-guest-continue{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(124,92,255,.52);
    background:linear-gradient(135deg,var(--primary),#2563eb);
    color:#fff;
    box-shadow:0 8px 24px rgba(87,75,220,.2);
}
.worth-it-guest-continue:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.worth-it-guest-dialog-open{overscroll-behavior:none}
html[data-theme="light"] .worth-it-guest-overlay{background:rgba(31,41,75,.31)}
html[data-theme="light"] .worth-it-guest-card{
    background:#fff;
    border-color:rgba(99,102,241,.22);
    box-shadow:0 25px 80px rgba(42,55,100,.22);
}
html[data-theme="light"] .worth-it-guest-allowed h3>span{color:#059669}
html[data-theme="light"] .worth-it-guest-consent{background:#f4f1ff;border-color:#d8ccff}
@media(max-width:650px){
    .worth-it-guest-overlay{align-items:center;padding:8px}
    .worth-it-guest-card{max-height:calc(100dvh - 16px);padding:15px;border-radius:17px}
    .worth-it-guest-head{gap:9px;padding-bottom:12px}
    .worth-it-guest-head h2{font-size:21px}
    .worth-it-guest-head p{font-size:11px;line-height:1.5}
    .worth-it-guest-body{grid-template-columns:minmax(0,1fr);gap:9px;padding:12px 1px}
    .worth-it-guest-list{padding:12px}
    .worth-it-guest-list h3{font-size:12px;margin-bottom:8px}
    .worth-it-guest-list ul{font-size:10px;gap:7px}
    .worth-it-guest-consent{padding:11px;gap:9px}
    .worth-it-guest-consent strong{font-size:11px}
    .worth-it-guest-actions{align-items:stretch;flex-direction:column-reverse}
    .worth-it-guest-actions button{width:100%;min-height:40px}
}


/* Keep the hamburger dropdown above account/header actions at every compact breakpoint.
   At widths between 701px and 1000px the previous rules could leave the menu in the
   navbar flex row, allowing taps to reach neighbouring account controls. */
@media(max-width:1000px) {
    .nav-links {
        display: none;
    }

    .nav-links.open {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 68px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 10px;
        max-height: calc(100vh - 86px);
        overflow-y: auto;
        background: var(--card-solid, var(--card));
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--shadow);
        z-index: 800;
    }

    .nav-links.open button {
        width: 100%;
        text-align: left;
    }
}

html[data-ui-scale="large"] .nav-links.open,
html[data-ui-scale="xl"] .nav-links.open {
    z-index: 800;
}


/* Final hamburger hit-testing guard.
   The dropdown must sit above every header control, and while it is open the
   underlying actions (especially Sign out) must not receive pointer events. */
#navLinks.nav-links.open {
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}

#navLinks.nav-links.open,
#navLinks.nav-links.open * {
    pointer-events: auto !important;
}

.nav-inner:has(> #navLinks.nav-links.open) > .nav-actions {
    pointer-events: none !important;
}

.nav-inner:has(> #navLinks.nav-links.open) > .nav-actions * {
    pointer-events: none !important;
}

/*
 * The signed-in account controls are direct siblings of .nav-actions in the
 * current header markup. Shield every other header sibling and its contents
 * while the dropdown is open, not just .nav-actions; otherwise Sign out can
 * remain an accidental click target behind the menu.
 */
.nav-inner:has(> #navLinks.nav-links.open) > :not(#navLinks):not(.menu-btn):not(.logo),
.nav-inner:has(> #navLinks.nav-links.open) > :not(#navLinks):not(.menu-btn):not(.logo) * {
    pointer-events: none !important;
}

/* A menu item is the only interactive surface in the open dropdown. */
#navLinks.nav-links.open button {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
}


/* =========================================================
   SITE-WIDE THEME + RESPONSIVE COMPATIBILITY GUARDS
   Keep section-specific layouts intact while preventing min-content
   overflow, inaccessible light-theme statuses and scaled modal clipping.
   ========================================================= */

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html,
body { max-width: 100%; }

body { overflow-x: clip; }

@supports not (overflow: clip) {
    body { overflow-x: hidden; }
}

:where(
    main, main > *, .container, .section, section, .app, .panel,
    [class*="-grid"], [class*="-card"], [class*="-row"],
    [class*="-content"], [class*="-body"], [class*="-header"],
    [class*="-actions"]
) { min-width: 0; }

:where(main, .container, .section, section, .app) { max-width: 100%; }

:where(img:not(.leaflet-tile), video, iframe) { max-width: 100%; }

:where(
    p, li, dt, dd, blockquote, figcaption, td, th, code, .settings-note,
    [class*="-description"], [class*="-subtitle"], [class*="-email"],
    [class*="-username"], [class*="-url"], [class*="-link"],
    [class*="-status"], [class*="-hint"], [class*="-help"], [class*="-message"]
) { overflow-wrap: anywhere; }

:where(button, input, select, textarea) {
    min-width: 0;
    max-width: 100%;
}

#navLinks.nav-links.open {
    box-sizing: border-box;
    max-width: calc((100vw - 16px) / var(--ui-scale, 1));
}

@media (max-width: 1000px) {
    #navLinks.nav-links.open button {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #navLinks .nav-overflow-item,
    #navLinks .nav-secondary-item {
        max-width: 100%;
        min-width: 0;
    }
    #navLinks .nav-overflow-item > span:last-child,
    #navLinks .nav-secondary-item > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

:where(
    .table-wrap, .table-responsive, .table-scroll,
    [class*="-table-wrap"], [class*="-table-container"]
) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-ui-scale="large"] :where(
    .feedback-modal-card, .translate-modal-card, .worth-it-guest-card,
    .worth-it-display-name-modal, .account-page-card, .worth-it-chat-group-card,
    .worth-it-chat-invite-card, .worth-it-chat-manage-card,
    .worth-it-user-search-card, .admin-panel-card
),
html[data-ui-scale="xl"] :where(
    .feedback-modal-card, .translate-modal-card, .worth-it-guest-card,
    .worth-it-display-name-modal, .account-page-card, .worth-it-chat-group-card,
    .worth-it-chat-invite-card, .worth-it-chat-manage-card,
    .worth-it-user-search-card, .admin-panel-card
) {
    max-width: calc((100vw - 24px) / var(--ui-scale, 1));
    max-height: calc((100dvh - 24px) / var(--ui-scale, 1));
}

html[data-ui-scale="large"] .worth-it-display-name-modal,
html[data-ui-scale="xl"] .worth-it-display-name-modal,
html[data-ui-scale="large"] .worth-it-chat-invite-card,
html[data-ui-scale="xl"] .worth-it-chat-invite-card { overflow-y: auto; }

html[data-ui-scale="large"] .ai-chat-card,
html[data-ui-scale="xl"] .ai-chat-card {
    height: min(760px, calc((100dvh - 24px) / var(--ui-scale, 1)));
    max-height: calc((100dvh - 24px) / var(--ui-scale, 1));
}

@media (min-width: 761px) {
    html[data-ui-scale="large"] .worth-it-chat-window:not(.is-fullscreen),
    html[data-ui-scale="xl"] .worth-it-chat-window:not(.is-fullscreen) {
        width: min(1120px, calc((100vw - 24px) / var(--ui-scale, 1)));
        height: min(780px, calc((100dvh - 24px) / var(--ui-scale, 1)));
        max-width: calc((100vw - 24px) / var(--ui-scale, 1));
        max-height: calc((100dvh - 24px) / var(--ui-scale, 1));
    }
}

@media (max-width: 760px) {
    html[data-ui-scale="large"] .worth-it-chat-window:not(.is-fullscreen),
    html[data-ui-scale="xl"] .worth-it-chat-window:not(.is-fullscreen) {
        width: calc(100vw / var(--ui-scale, 1));
        height: calc(100dvh / var(--ui-scale, 1));
        max-width: none;
        max-height: calc(100dvh / var(--ui-scale, 1));
    }
}

html[data-ui-scale="large"] .worth-it-chat-overlay.is-fullscreen,
html[data-ui-scale="xl"] .worth-it-chat-overlay.is-fullscreen {
    width: calc(100vw / var(--ui-scale, 1)) !important;
    height: calc(100dvh / var(--ui-scale, 1)) !important;
}

html[data-ui-scale="large"] .worth-it-chat-overlay.is-fullscreen > .worth-it-chat-window.is-fullscreen,
html[data-ui-scale="xl"] .worth-it-chat-overlay.is-fullscreen > .worth-it-chat-window.is-fullscreen {
    width: calc(100vw / var(--ui-scale, 1)) !important;
    height: calc(100dvh / var(--ui-scale, 1)) !important;
}

html[data-theme="dark"] select option {
    color: var(--text);
    background: var(--card-solid);
}
html[data-theme="light"] select option {
    color: #0f172a;
    background: #fff;
}
html[data-theme="dark"] :where(input, textarea)::placeholder {
    color: var(--muted);
    opacity: 1;
}
html[data-theme="light"] :where(input, textarea)::placeholder {
    color: #64748b;
    opacity: 1;
}

html[data-theme="light"] .account-settings-current-value.is-error,
html[data-theme="light"] .account-settings-status.is-error,
html[data-theme="light"] .security-danger-button,
html[data-theme="light"] .worth-it-user-search-status.is-error,
html[data-theme="light"] .worth-it-chat-compose-status.is-error,
html[data-theme="light"] .worth-it-chat-manage-card .worth-it-chat-compose-status.is-error,
html[data-theme="light"] .worth-it-chat-invite-card .worth-it-chat-compose-status.is-error {
    color: #b91c1c;
}
html[data-theme="light"] .account-settings-current-value.is-success,
html[data-theme="light"] .account-settings-status.is-success {
    color: #15803d;
}
html[data-theme="light"] .account-settings-status.is-warning,
html[data-theme="light"] .worth-it-chat-compose-status {
    color: #92400e;
}
html[data-theme="light"] .worth-it-chat-group-selection-summary strong.is-ready {
    color: #0f766e;
}
html[data-theme="light"] .worth-it-chat-group-selection-summary strong.is-over-limit {
    color: #b91c1c;
}
html[data-theme="light"] .worth-it-profile-section:not(.has-banner) .worth-it-profile-presence-text.is-online .worth-it-presence-label {
    color: #047857;
}


/* Responsive Layout QA repairs — 2026-10-18. */
.worth-it-notification-panel{
    position:fixed!important;
    top:calc(100% + 8px)!important;
    right:8px!important;
    left:auto!important;
    max-height:calc(100dvh - 96px)!important;
}
@media(max-width:700px){
    .worth-it-notification-panel{
        top:calc(100% + 8px)!important;
        right:8px!important;
        max-width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 80px)!important;
    }
}

/* Keep vehicle-detail panels away from the physical top/bottom screen edge. */
@media(max-width:760px){
    .worth-it-vehicle-modal-dialog{
        max-height:calc(100dvh - 36px)!important;
    }
    html[data-ui-scale="large"] .worth-it-vehicle-modal-dialog{
        max-height:calc(100dvh - 52px)!important;
    }
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-dialog{
        max-height:calc(100dvh - 79px)!important;
    }
}

/* The account-creation card is shorter on desktop; long forms scroll inside it. */
@media(min-width:701px){
    #authModalOverlay.signup-mode .auth-modal-card{
        max-height:min(calc(82dvh / var(--ui-scale,1)),calc((100dvh - 48px) / var(--ui-scale,1)))!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        box-sizing:border-box!important;
    }
    #authModalOverlay.signup-mode .auth-modal-card:has(#authLegalWrap[style*="block"]){
        padding-top:16px!important;
        padding-bottom:16px!important;
    }
    #authModalOverlay.signup-mode .auth-modal-head{
        margin-bottom:12px!important;
        transform:none!important;
    }
    #authModalOverlay.signup-mode .auth-field{
        margin-bottom:8px!important;
    }
    #authModalOverlay.signup-mode .auth-field input{
        min-height:38px;
        padding-top:8px!important;
        padding-bottom:8px!important;
    }
}

/* Fullscreen chat must use viewport dimensions at every accessibility scale. */
.worth-it-chat-overlay.is-fullscreen:not([hidden]){
    box-sizing:border-box!important;
    padding:0!important;
    overflow:hidden!important;
}
.worth-it-chat-overlay.is-fullscreen:not([hidden])>.worth-it-chat-window.is-fullscreen{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    box-sizing:border-box!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
}
html[data-ui-scale] .worth-it-chat-overlay.is-fullscreen:not([hidden])>.worth-it-chat-window.is-fullscreen{
    width:100vw!important;
    height:100dvh!important;
}
.worth-it-chat-overlay.is-fullscreen .worth-it-chat-main{
    height:100%!important;
    min-height:0!important;
}
@media(max-width:760px){
    .worth-it-chat-window:not(.is-fullscreen){
        width:100vw!important;
        height:100dvh!important;
        max-width:100vw!important;
        max-height:100dvh!important;
    }
    .worth-it-chat-window:not(.is-fullscreen):not(.is-mobile-sidebar) .worth-it-chat-main{
        height:100%!important;
        min-height:0!important;
    }
}

/* Final QA repair: the chat overlay sits inside .nav. Because the nav uses
   backdrop-filter, a fixed descendant is positioned against the header unless
   the overlay supplies its own viewport dimensions. Center the window against
   the viewport instead of the header, at every accessibility scale. */
.worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) {
    position:fixed!important;
    inset:auto!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    transform:none!important;
}
.worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) > .worth-it-chat-window:not(.is-fullscreen) {
    transform:none!important;
}
@media(max-width:760px) {
    .worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) {
        padding:0!important;
    }
    .worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) > .worth-it-chat-window:not(.is-fullscreen) {
        width:100vw!important;
        height:100dvh!important;
        max-width:100vw!important;
        max-height:100dvh!important;
    }
}

/* Keep the mobile Create account card inside the viewport. An older
   translateY(50px) rule moved the card beyond the bottom edge at A/A+/A++. */
@media(max-width:700px) {
    #authModalOverlay.signup-mode {
        padding-top:calc(12px / var(--ui-scale,1))!important;
        padding-right:calc(12px / var(--ui-scale,1))!important;
        padding-bottom:calc(12px / var(--ui-scale,1))!important;
        padding-left:calc(12px / var(--ui-scale,1))!important;
    }
    #authModalOverlay.signup-mode .auth-modal-card {
        transform:none!important;
        max-height:calc((100dvh - 24px) / var(--ui-scale,1))!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        box-sizing:border-box!important;
    }
}


/* Layout QA follow-up — scale-safe Community Chat viewport sizing — 2026-10-18. */
/* body uses zoom(var(--ui-scale)); therefore viewport-sized chat layers must
   divide their CSS dimensions by the same scale to occupy the real viewport. */
.worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) {
    width: calc(100vw / var(--ui-scale, 1)) !important;
    height: calc(100dvh / var(--ui-scale, 1)) !important;
    max-width: calc(100vw / var(--ui-scale, 1)) !important;
    max-height: calc(100dvh / var(--ui-scale, 1)) !important;
}
.worth-it-chat-overlay.is-fullscreen:not([hidden]) {
    width: calc(100vw / var(--ui-scale, 1)) !important;
    height: calc(100dvh / var(--ui-scale, 1)) !important;
    max-width: calc(100vw / var(--ui-scale, 1)) !important;
    max-height: calc(100dvh / var(--ui-scale, 1)) !important;
    box-sizing: border-box !important;
}
.worth-it-chat-overlay.is-fullscreen:not([hidden]) > .worth-it-chat-window.is-fullscreen {
    width: calc(100vw / var(--ui-scale, 1)) !important;
    height: calc(100dvh / var(--ui-scale, 1)) !important;
    max-width: calc(100vw / var(--ui-scale, 1)) !important;
    max-height: calc(100dvh / var(--ui-scale, 1)) !important;
    box-sizing: border-box !important;
}

@media (min-width: 761px) {
    /* Keep the window at its intended desktop size even when the page is zoomed. */
    html[data-ui-scale="large"] .worth-it-chat-window:not(.is-fullscreen),
    html[data-ui-scale="xl"] .worth-it-chat-window:not(.is-fullscreen) {
        width: min(
            calc(1120px / var(--ui-scale, 1)),
            calc((100vw - 24px) / var(--ui-scale, 1))
        ) !important;
        height: min(
            calc(780px / var(--ui-scale, 1)),
            calc((100dvh - 24px) / var(--ui-scale, 1))
        ) !important;
        max-width: calc((100vw - 24px) / var(--ui-scale, 1)) !important;
        max-height: calc((100dvh - 24px) / var(--ui-scale, 1)) !important;
        box-sizing: border-box !important;
    }
}


/* Notification layout: keep the sender column readable at every accessibility scale. */
.worth-it-notification-event .worth-it-notification-person{
    flex:0 1 38%;
    max-width:38%;
}
.worth-it-notification-event .worth-it-notification-event-body{
    flex:1 1 0%;
}
.worth-it-notification-event .worth-it-notification-person-text strong,
.worth-it-notification-event .worth-it-notification-person-text small{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow-wrap:normal;
}

/* Keep the profile avatar wrapper as the positioning context for the photo and presence dot. */
.profile-nav-btn > #profileNavIcon{
    position:relative !important;
    overflow:visible !important;
}
.profile-nav-btn > #profileNavIcon > .auth-avatar,
.profile-nav-btn > #profileNavIcon > .auth-avatar-fallback{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
}



/* Responsive polish — menu sizing, compact car header, profile presence, and vehicle details. */

/* Keep the open section menu below the scaled header and fill the remaining viewport. */
@media (min-width: 901px) {
    #navLinks.nav-links.open {
        position: fixed !important;
        top: 72px !important;
        bottom: auto !important;
        height: calc((100vh / var(--ui-scale, 1)) - 72px) !important;
        height: calc((100dvh / var(--ui-scale, 1)) - 72px) !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 900px) {
    #navLinks.nav-links.open {
        position: fixed !important;
        top: 64px !important;
        bottom: auto !important;
        height: calc((100vh / var(--ui-scale, 1)) - 64px) !important;
        height: calc((100dvh / var(--ui-scale, 1)) - 64px) !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* Give the A, A+ and A++ phone header controls their own breathing room. */
@media (max-width: 700px) {
    html[data-ui-scale="normal"] .nav > .container,
    html[data-ui-scale="large"] .nav > .container,
    html[data-ui-scale="xl"] .nav > .container {
        padding-left: calc(5px / var(--ui-scale, 1)) !important;
        padding-right: calc(5px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .nav-inner,
    html[data-ui-scale="large"] .nav-inner,
    html[data-ui-scale="xl"] .nav-inner {
        gap: calc(3px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .nav-actions,
    html[data-ui-scale="large"] .nav-actions,
    html[data-ui-scale="xl"] .nav-actions {
        gap: calc(4px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .nav-actions > button,
    html[data-ui-scale="large"] .nav-actions > button,
    html[data-ui-scale="xl"] .nav-actions > button {
        flex: 0 0 calc(30px / var(--ui-scale, 1)) !important;
        width: calc(30px / var(--ui-scale, 1)) !important;
        min-width: calc(30px / var(--ui-scale, 1)) !important;
        height: calc(30px / var(--ui-scale, 1)) !important;
        min-height: calc(30px / var(--ui-scale, 1)) !important;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
        font-size: calc(14px / var(--ui-scale, 1)) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html[data-ui-scale="normal"] .menu-btn,
    html[data-ui-scale="large"] .menu-btn,
    html[data-ui-scale="xl"] .menu-btn,
    html[data-ui-scale="normal"] .logo-mark,
    html[data-ui-scale="large"] .logo-mark,
    html[data-ui-scale="xl"] .logo-mark {
        flex: 0 0 calc(30px / var(--ui-scale, 1)) !important;
        width: calc(30px / var(--ui-scale, 1)) !important;
        min-width: calc(30px / var(--ui-scale, 1)) !important;
        height: calc(30px / var(--ui-scale, 1)) !important;
        min-height: calc(30px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .auth-wrap,
    html[data-ui-scale="large"] .auth-wrap,
    html[data-ui-scale="xl"] .auth-wrap {
        flex: 0 0 calc(30px / var(--ui-scale, 1)) !important;
        width: calc(30px / var(--ui-scale, 1)) !important;
        min-width: calc(30px / var(--ui-scale, 1)) !important;
        height: calc(30px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .profile-nav-btn,
    html[data-ui-scale="large"] .profile-nav-btn,
    html[data-ui-scale="xl"] .profile-nav-btn {
        flex: 0 0 calc(28px / var(--ui-scale, 1)) !important;
        width: calc(28px / var(--ui-scale, 1)) !important;
        height: calc(28px / var(--ui-scale, 1)) !important;
        padding: 0 !important;
    }

    html[data-ui-scale="normal"] .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="large"] .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .profile-nav-btn > #profileNavIcon {
        flex: 0 0 calc(22px / var(--ui-scale, 1)) !important;
        width: calc(22px / var(--ui-scale, 1)) !important;
        height: calc(22px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="normal"] .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .profile-nav-btn .auth-avatar-fallback {
        width: calc(22px / var(--ui-scale, 1)) !important;
        height: calc(22px / var(--ui-scale, 1)) !important;
        flex-basis: calc(22px / var(--ui-scale, 1)) !important;
        border-width: 1px !important;
    }
}

@media (max-width: 380px) {
    html[data-ui-scale="normal"] .nav > .container,
    html[data-ui-scale="large"] .nav > .container,
    html[data-ui-scale="xl"] .nav > .container {
        padding-left: calc(4px / var(--ui-scale, 1)) !important;
        padding-right: calc(4px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .nav-actions,
    html[data-ui-scale="large"] .nav-actions,
    html[data-ui-scale="xl"] .nav-actions {
        gap: calc(3px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .nav-actions > button,
    html[data-ui-scale="large"] .nav-actions > button,
    html[data-ui-scale="xl"] .nav-actions > button {
        flex-basis: calc(27px / var(--ui-scale, 1)) !important;
        width: calc(27px / var(--ui-scale, 1)) !important;
        min-width: calc(27px / var(--ui-scale, 1)) !important;
        height: calc(27px / var(--ui-scale, 1)) !important;
        min-height: calc(27px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="normal"] .menu-btn,
    html[data-ui-scale="large"] .menu-btn,
    html[data-ui-scale="xl"] .menu-btn,
    html[data-ui-scale="normal"] .logo-mark,
    html[data-ui-scale="large"] .logo-mark,
    html[data-ui-scale="xl"] .logo-mark {
        flex-basis: calc(27px / var(--ui-scale, 1)) !important;
        width: calc(27px / var(--ui-scale, 1)) !important;
        min-width: calc(27px / var(--ui-scale, 1)) !important;
        height: calc(27px / var(--ui-scale, 1)) !important;
        min-height: calc(27px / var(--ui-scale, 1)) !important;
    }
}

/* Tune the profile status marker to each accessibility text size. */
.profile-nav-btn {
    overflow: visible !important;
}

.profile-nav-btn > #profileNavIcon {
    overflow: visible !important;
}

/* Desktop: reduce the current 20px marker by 1px per text-size step. */
.profile-nav-btn .worth-it-presence-indicator {
    width: 18px !important;
    height: 18px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-width: 4px !important;
}

html[data-ui-scale="small"] .profile-nav-btn .worth-it-presence-indicator {
    width: 19px !important;
    height: 19px !important;
}

html[data-ui-scale="large"] .profile-nav-btn .worth-it-presence-indicator {
    width: 17px !important;
    height: 17px !important;
}

html[data-ui-scale="xl"] .profile-nav-btn .worth-it-presence-indicator {
    width: 16px !important;
    height: 16px !important;
}

.profile-nav-btn .worth-it-presence-indicator.is-online::after {
    inset: -2px !important;
}

@media (max-width: 700px) {
    /* Phone baseline is 14px; A−, A+, and A++ adjust it by their requested steps. */
    .profile-nav-btn .worth-it-presence-indicator {
        width: 14px !important;
        height: 14px !important;
        right: -4px !important;
        bottom: -4px !important;
        border-width: 3px !important;
    }

    html[data-ui-scale="small"] .profile-nav-btn .worth-it-presence-indicator {
        width: 15px !important;
        height: 15px !important;
    }

    html[data-ui-scale="large"] .profile-nav-btn .worth-it-presence-indicator {
        width: 13px !important;
        height: 13px !important;
    }

    html[data-ui-scale="xl"] .profile-nav-btn .worth-it-presence-indicator {
        width: 12px !important;
        height: 12px !important;
    }

    .profile-nav-btn .worth-it-presence-indicator.is-online::after {
        inset: -2px !important;
    }
}

/* Let vehicle information use the full phone card width. */
@media (max-width: 600px) {
    .cars-section-block:has(#carsResultsTitle) {
        padding: 14px !important;
    }

    .cars-section-block:has(#carsResultsTitle) .cars-block-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        column-gap: 10px !important;
        row-gap: 7px !important;
        margin-bottom: 16px !important;
    }

    #carsResultsTitle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        font-size: clamp(18px, 5vw, 21px) !important;
        line-height: 1.2 !important;
        letter-spacing: -.35px !important;
        overflow-wrap: normal !important;
    }

    .cars-section-block:has(#carsResultsTitle) .cars-results-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    .cars-section-block:has(#carsResultsTitle) .cars-results-actions .cars-compare-jump-button {
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    #carsResultsDescription {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        overflow-wrap: normal !important;
    }

    #carsResultsDescription.cars-results-description-with-info {
        display: flex !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #carsResultsDescription .cars-results-description-text {
        min-width: 0 !important;
        flex: 1 1 220px !important;
    }

    #carsLastUpdated {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        margin-top: 0 !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }
}

/* Give vehicle details more room and keep its A/D controls inside the visible frame. */
@media (min-width: 761px) {
    .worth-it-vehicle-modal {
        --worth-it-vehicle-frame-width: 960px;
    }

    html[data-ui-scale="large"] .worth-it-vehicle-modal {
        --worth-it-vehicle-frame-width: 880px;
    }

    html[data-ui-scale="xl"] .worth-it-vehicle-modal {
        --worth-it-vehicle-frame-width: 820px;
    }

    .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="normal"] .worth-it-vehicle-modal-dialog,
    html:not([data-ui-scale]) .worth-it-vehicle-modal-dialog {
        width: min(
            calc(var(--worth-it-vehicle-frame-width, 960px) / var(--ui-scale, 1)),
            calc((100vw - 48px) / var(--ui-scale, 1))
        ) !important;
        max-width: calc((100vw - 48px) / var(--ui-scale, 1)) !important;
        max-height: calc((100dvh - 32px) / var(--ui-scale, 1)) !important;
        transform: none !important;
        transform-origin: center center !important;
    }

    .worth-it-vehicle-modal-body {
        padding-left: calc(86px / var(--ui-scale, 1)) !important;
        padding-right: calc(86px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-modal-navigation-previous {
        left: calc(
            (100vw - min(var(--worth-it-vehicle-frame-width, 960px), calc(100vw - 48px))) / 2 / var(--ui-scale, 1)
            + 12px / var(--ui-scale, 1)
        ) !important;
    }

    .worth-it-vehicle-modal-navigation-next {
        right: calc(
            (100vw - min(var(--worth-it-vehicle-frame-width, 960px), calc(100vw - 48px))) / 2 / var(--ui-scale, 1)
            + 12px / var(--ui-scale, 1)
        ) !important;
    }

    .worth-it-vehicle-modal-navigation {
        width: calc(60px / var(--ui-scale, 1)) !important;
        height: calc(88px / var(--ui-scale, 1)) !important;
        font-size: calc(52px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-navigation-arrow {
        font-size: calc(52px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-navigation-key {
        font-size: calc(15px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="large"] .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-dialog {
        width: min(
            calc(var(--worth-it-vehicle-frame-width) / var(--ui-scale, 1)),
            calc((100vw - 48px) / var(--ui-scale, 1))
        ) !important;
    }

    html[data-ui-scale="large"] .worth-it-vehicle-modal-body,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-body {
        padding-left: calc(86px / var(--ui-scale, 1)) !important;
        padding-right: calc(86px / var(--ui-scale, 1)) !important;
    }
}

@media (max-width: 760px) {
    .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="normal"] .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="large"] .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-dialog,
    html:not([data-ui-scale]) .worth-it-vehicle-modal-dialog {
        width: calc((100vw - 16px) / var(--ui-scale, 1)) !important;
        max-width: none !important;
        max-height: calc((100dvh - 20px) / var(--ui-scale, 1)) !important;
        transform: none !important;
        transform-origin: center center !important;
        border-radius: 16px !important;
    }

    .worth-it-vehicle-modal-navigation-previous {
        left: calc(12px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-modal-navigation-next {
        right: calc(12px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-modal-navigation,
    html[data-ui-scale="large"] .worth-it-vehicle-modal-navigation,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-navigation {
        width: calc(38px / var(--ui-scale, 1)) !important;
        height: calc(58px / var(--ui-scale, 1)) !important;
        padding: 0 !important;
        border-radius: 11px !important;
        font-size: calc(34px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-navigation-arrow {
        font-size: calc(34px / var(--ui-scale, 1)) !important;
        line-height: .82 !important;
    }

    .worth-it-vehicle-navigation-key {
        font-size: calc(10px / var(--ui-scale, 1)) !important;
        line-height: 1 !important;
    }

    .worth-it-vehicle-modal-body,
    html[data-ui-scale="large"] .worth-it-vehicle-modal-body,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-body {
        padding-top: calc(14px / var(--ui-scale, 1)) !important;
        padding-right: calc(42px / var(--ui-scale, 1)) !important;
        padding-bottom: calc(14px / var(--ui-scale, 1)) !important;
        padding-left: calc(42px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-detail-image-wrap,
    .worth-it-vehicle-detail-image,
    .worth-it-vehicle-detail-image-placeholder {
        min-height: calc(160px / var(--ui-scale, 1)) !important;
        height: calc(160px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-detail-heading {
        padding-top: calc(10px / var(--ui-scale, 1)) !important;
        padding-bottom: calc(10px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-detail-heading h2 {
        font-size: clamp(1.2rem, 6vw, 2rem) !important;
        line-height: 1.12 !important;
    }
}


/* Cars mobile-only layout refinement (desktop layout intentionally unchanged). */
@media (max-width: 600px) {
    .cars-section-block:has(#carsResultsTitle) {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .cars-section-block:has(#carsResultsTitle) .cars-block-header {
        row-gap: 5px !important;
        margin-bottom: 9px !important;
    }

    #carsResultsTitle {
        font-size: clamp(17px, 4.6vw, 19px) !important;
        line-height: 1.18 !important;
    }

    .cars-section-block:has(#carsResultsTitle) .cars-results-actions .cars-compare-jump-button {
        min-height: 32px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    #carsResultsDescription {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    #carsResultsDescription .cars-results-description-text {
        flex-basis: 180px !important;
    }

    #carsLastUpdated {
        font-size: 9.5px !important;
        line-height: 1.3 !important;
    }

    .cars-personal-panels {
        margin-bottom: 10px !important;
        padding: 10px !important;
        border-radius: 13px !important;
    }

    .cars-personal-panels .cars-personal-tabs,
    .cars-personal-panels .cars-personal-panel-tabs {
        margin-bottom: 8px !important;
    }

    .cars-personal-panels .cars-personal-list,
    .cars-personal-panels .cars-recent-list {
        gap: 6px !important;
    }
}

@media (max-width: 760px) {
    .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="normal"] .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="large"] .worth-it-vehicle-modal-dialog,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-dialog,
    html:not([data-ui-scale]) .worth-it-vehicle-modal-dialog {
        width: calc((100vw - 8px) / var(--ui-scale, 1)) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .worth-it-vehicle-modal-body,
    html[data-ui-scale="large"] .worth-it-vehicle-modal-body,
    html[data-ui-scale="xl"] .worth-it-vehicle-modal-body {
        padding-left: calc(28px / var(--ui-scale, 1)) !important;
        padding-right: calc(28px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-modal-navigation {
        width: calc(32px / var(--ui-scale, 1)) !important;
        height: calc(50px / var(--ui-scale, 1)) !important;
        font-size: calc(28px / var(--ui-scale, 1)) !important;
        border-radius: 9px !important;
    }

    .worth-it-vehicle-modal-navigation-previous {
        left: calc(2px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-modal-navigation-next {
        right: calc(2px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-navigation-arrow {
        font-size: calc(28px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-navigation-key {
        font-size: calc(8px / var(--ui-scale, 1)) !important;
    }

    .worth-it-vehicle-detail-section {
        margin-top: 14px !important;
    }

    .worth-it-vehicle-detail-section h3 {
        margin-bottom: 6px !important;
    }

    .worth-it-vehicle-description {
        line-height: 1.45 !important;
        overflow-wrap: anywhere;
    }
}


/* Guest Lite mobile height: keep the consent/actions reachable while the long
   feature list scrolls inside the dialog at A, A+ and A++. */
@media (max-width: 650px) {
    .worth-it-guest-overlay {
        align-items: center !important;
        padding: 8px !important;
    }

    .worth-it-guest-card,
    html[data-ui-scale="normal"] .worth-it-guest-card,
    html:not([data-ui-scale]) .worth-it-guest-card,
    html[data-ui-scale="large"] .worth-it-guest-card,
    html[data-ui-scale="xl"] .worth-it-guest-card {
        max-height: min(78dvh, calc((100dvh - 32px) / var(--ui-scale, 1))) !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .worth-it-guest-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    html[data-ui-scale="large"] .worth-it-guest-card,
    html[data-ui-scale="xl"] .worth-it-guest-card {
        padding: calc(12px / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="large"] .worth-it-guest-body,
    html[data-ui-scale="xl"] .worth-it-guest-body {
        padding-top: calc(9px / var(--ui-scale, 1)) !important;
        padding-bottom: calc(9px / var(--ui-scale, 1)) !important;
    }
}


/* Guest Lite is modal: keep the sticky navigation behind its backdrop.
   This override is active only while the Guest Lite dialog is open. */
body.worth-it-guest-dialog-open .nav {
    z-index: 15040 !important;
}


/* Sign-in and account-creation dialogs also need to cover the sticky header.
   Keep the nav's normal stacking order whenever the auth dialog is closed. */
body:has(.auth-modal-overlay.open):not(.worth-it-guest-dialog-open) .nav {
    z-index: 1190 !important;
}



/* A++ desktop signup modal: apply one 30px upward offset only.
   Do not combine top positioning with a second translate offset. */
@media (min-width: 701px) {
    html[data-ui-scale="xl"] #authModalOverlay.signup-mode .auth-modal-card {
        position: relative !important;
        top: -20px !important;
        padding-top: 6px !important;
        padding-bottom: 14px !important;
    }
}


/* Keep the desktop profile button aligned on A+ / A++ while hovered.
   Preserve its border and glow; remove only the scale/lift transform. */
@media (min-width: 701px) {
    html[data-ui-scale="large"] .profile-nav-btn:hover,
    html[data-ui-scale="xl"] .profile-nav-btn:hover {
        transform: none !important;
    }
}

/* Vehicle details: keep the navigation arrows attached to the image,
   rather than fixed over the description while the dialog is scrolled. */
#worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap {
    position: relative !important;
}

#worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation {
    top: 50% !important;
    width: calc(54px / var(--ui-scale, 1)) !important;
    height: calc(80px / var(--ui-scale, 1)) !important;
    padding: 0 !important;
    gap: calc(4px / var(--ui-scale, 1)) !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box !important;
}

#worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation-previous {
    left: calc(10px / var(--ui-scale, 1)) !important;
    right: auto !important;
}

#worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation-next {
    right: calc(10px / var(--ui-scale, 1)) !important;
    left: auto !important;
}

#worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation .worth-it-vehicle-navigation-arrow {
    font-size: calc(38px / var(--ui-scale, 1)) !important;
    line-height: .86 !important;
}

#worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation .worth-it-vehicle-navigation-key {
    font-size: calc(12px / var(--ui-scale, 1)) !important;
    line-height: 1 !important;
}

/* On phones, place the entire vehicle panel below the compact sticky header.
   This keeps the image/title from being hidden behind the always-clickable nav. */
@media (max-width: 760px) {
    #worthItVehicleDetailsModal {
        top: calc(60px / var(--ui-scale, 1)) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        padding: calc(8px / var(--ui-scale, 1)) calc(4px / var(--ui-scale, 1)) !important;
        align-items: flex-start !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-modal-dialog {
        width: calc((100vw - 16px) / var(--ui-scale, 1)) !important;
        max-width: calc((100vw - 16px) / var(--ui-scale, 1)) !important;
        max-height: calc((100dvh - 76px) / var(--ui-scale, 1)) !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        box-sizing: border-box !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-modal-body {
        padding: calc(14px / var(--ui-scale, 1)) !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-header {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: calc(10px / var(--ui-scale, 1)) !important;
        align-items: start !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap,
    #worthItVehicleDetailsModal .worth-it-vehicle-detail-image,
    #worthItVehicleDetailsModal .worth-it-vehicle-detail-image-placeholder {
        width: 100% !important;
        min-height: calc(160px / var(--ui-scale, 1)) !important;
        height: calc(160px / var(--ui-scale, 1)) !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-heading {
        min-width: 0 !important;
        padding: calc(8px / var(--ui-scale, 1)) 0 !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-title-row {
        align-items: center !important;
        gap: calc(8px / var(--ui-scale, 1)) !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-title-row h2 {
        font-size: clamp(1.15rem, 5.8vw, 1.75rem) !important;
        line-height: 1.15 !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-web-search-button {
        flex: 0 0 calc(38px / var(--ui-scale, 1)) !important;
        width: calc(38px / var(--ui-scale, 1)) !important;
        height: calc(38px / var(--ui-scale, 1)) !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-section {
        margin-top: calc(16px / var(--ui-scale, 1)) !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-section h3 {
        margin-bottom: calc(7px / var(--ui-scale, 1)) !important;
        line-height: 1.25 !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-description {
        max-width: 100% !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation {
        width: calc(34px / var(--ui-scale, 1)) !important;
        height: calc(44px / var(--ui-scale, 1)) !important;
        border-radius: 50% !important;
        padding: 0 !important;
        gap: 0 !important;
        background: rgba(12, 14, 19, .78) !important;
        border-color: rgba(255, 255, 255, .28) !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation .worth-it-vehicle-navigation-key {
        display: none !important;
    }

    #worthItVehicleDetailsModal .worth-it-vehicle-detail-image-wrap > .worth-it-vehicle-modal-navigation .worth-it-vehicle-navigation-arrow {
        font-size: calc(24px / var(--ui-scale, 1)) !important;
        line-height: 1 !important;
    }
}


/* HEADER UTILITY LAYOUT — two rows aligned to the upper-right.
   Row one contains notifications, messages, user search/profile and AI Chat.
   Row two contains Bugs & Suggestions, Admin Panel, Sign out and Settings. */
.nav-right-stack {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    margin-left: auto;
}

.nav-top-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.nav-top-row .nav-actions {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
    margin-left: 0 !important;
}

.nav-top-row .ai-chat-nav-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.nav-secondary-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.nav-secondary-row > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (min-width: 901px) {
    .nav-inner {
        height: auto !important;
        min-height: 72px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        align-items: center !important;
    }

    .nav-right-stack {
        max-width: calc(100% - 180px);
    }

    body {
        padding-top: 114px !important;
    }

    #navLinks.nav-links.open {
        top: 114px !important;
        height: calc(100dvh - 114px) !important;
    }
}

@media (max-width: 900px) {
    .nav-inner {
        height: auto !important;
        min-height: 88px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .nav-right-stack {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        gap: 4px;
        margin-left: auto !important;
    }

    .nav-top-row,
    .nav-secondary-row {
        gap: 3px;
        width: 100%;
    }

    .nav-top-row .nav-actions {
        gap: 3px !important;
        margin-left: 0 !important;
    }

    .nav-secondary-row > .feedback-nav-btn,
    .nav-secondary-row > .admin-panel-nav-btn,
    .nav-secondary-row > .signout-nav-btn,
    .nav-secondary-row > .settings-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
        padding: 4px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        justify-content: center;
        align-items: center;
    }

    .nav-secondary-row > .feedback-nav-btn span,
    .nav-secondary-row > .admin-panel-nav-btn span,
    .nav-secondary-row > .signout-nav-btn span,
    .nav-top-row .ai-chat-nav-btn span {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

    .nav-top-row .ai-chat-nav-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 4px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    body {
        padding-top: 88px !important;
    }

    #navLinks.nav-links.open {
        top: 88px !important;
        height: calc(100dvh - 88px) !important;
    }
}

/* Keep the two-row phone header at the same physical height under accessibility zoom. */
@media (max-width: 700px) {
    html[data-ui-scale="large"] body {
        padding-top: 76px !important;
    }

    html[data-ui-scale="xl"] body {
        padding-top: 67px !important;
    }

    html[data-ui-scale="large"] #navLinks.nav-links.open {
        top: calc(88px / var(--ui-scale, 1)) !important;
        height: calc((100dvh - 88px) / var(--ui-scale, 1)) !important;
    }

    html[data-ui-scale="xl"] #navLinks.nav-links.open {
        top: calc(88px / var(--ui-scale, 1)) !important;
        height: calc((100dvh - 88px) / var(--ui-scale, 1)) !important;
    }
}

@media (max-width: 380px) {
    .nav-right-stack {
        gap: 3px;
    }

    .nav-top-row,
    .nav-secondary-row {
        gap: 2px;
    }

    .nav-secondary-row > .feedback-nav-btn,
    .nav-secondary-row > .admin-panel-nav-btn,
    .nav-secondary-row > .signout-nav-btn,
    .nav-secondary-row > .settings-btn,
    .nav-top-row .ai-chat-nav-btn {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        flex-basis: 27px !important;
        padding: 2px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 700px) {
    html[data-ui-scale="large"] .nav-secondary-row > .feedback-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .admin-panel-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .signout-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .settings-btn,
    html[data-ui-scale="large"] .nav-top-row .ai-chat-nav-btn {
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        flex-basis: 24px !important;
        padding: 1px !important;
        font-size: 12px !important;
    }

    html[data-ui-scale="xl"] .nav-secondary-row > .feedback-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .signout-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .settings-btn,
    html[data-ui-scale="xl"] .nav-top-row .ai-chat-nav-btn {
        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        flex-basis: 22px !important;
        padding: 1px !important;
        font-size: 11px !important;
    }
}

/* Keep the entire right-side utility stack inert while the hamburger menu is open. */
.nav-inner:has(> #navLinks.nav-links.open) > .nav-right-stack {
    pointer-events: none !important;
}

.nav-inner:has(> #navLinks.nav-links.open) > .nav-right-stack * {
    pointer-events: none !important;
}


/* User search stays available beside the brand, leaving only the four intended
   controls in the upper-right row (notifications, messages, profile, AI Chat). */
.nav-inner > .worth-it-user-search-btn {
    flex: 0 0 40px;
    margin: 0 2px 0 0;
}

@media (max-width: 900px) {
    .nav-inner > .worth-it-user-search-btn {
        flex: 0 0 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
    }
}

@media (max-width: 380px) {
    .nav-inner > .worth-it-user-search-btn {
        flex-basis: 27px !important;
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
    }
}

/* Upper-right utility order: notifications, messages, AI Chat, profile.
   The signed-in profile icon is the rightmost control in the top row. */
.nav-top-row .nav-actions > .worth-it-notification-wrap {
    order: 0 !important;
}

.nav-top-row .nav-actions > .worth-it-chat-nav-wrap {
    order: 1 !important;
}

.nav-top-row .nav-actions > .ai-chat-nav-btn {
    order: 2 !important;
}

.nav-top-row .nav-actions > .auth-wrap {
    order: 3 !important;
}


/* =========================================================
   PROFILE DROPDOWN — HEADER ROW AND VIEWPORT FIT
   The menu opens under Admin / Sign out and aligns to the right edge of
   the header controls, instead of centering off-screen from the far-right
   profile icon. JS supplies measured offsets for every UI scale.
   ========================================================= */
.nav-top-row .nav-actions .auth-wrap .account-panel {
    left: auto !important;
    right: 0 !important;
    top: var(--account-panel-top, calc(100% + 48px)) !important;
    transform: none !important;
    width: min(290px, calc((100vw - 20px) / var(--ui-scale, 1))) !important;
    max-width: calc((100vw - 20px) / var(--ui-scale, 1)) !important;
    max-height: var(--account-panel-available-height, calc((100vh - 28px) / var(--ui-scale, 1))) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    transform-origin: top right !important;
}


/* =========================================================
   PUBLIC FEEDBACK + PHONE PROFILE AVATAR SIZING
   Bugs & Suggestions is visible to every visitor. On phones, enlarge the
   profile tap target and avatar while preserving physical sizes under the
   site's body zoom. A+ / A++ shift the four top-row utilities by exactly
   5px / 10px in the rendered viewport.
   ========================================================= */

/* Public feedback controls: retain their normal flex appearance, even if
   older markup or role-related styles attempt to hide the entry points. */
.nav-secondary-row > .feedback-nav-btn,
.feedback-trigger {
    display: inline-flex !important;
}

@media (max-width: 700px) {
    .nav-top-row .nav-actions {
        position: relative !important;
    }

    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
        padding: 2px !important;
    }

    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
    }
}

/* At A+ / A++, compensate for body zoom so the enlarged profile control
   remains about 40px across and its image about 34px across. */
@media (min-width: 361px) and (max-width: 700px) {
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 34.5px !important;
        min-width: 34.5px !important;
        max-width: 34.5px !important;
        height: 34.5px !important;
        min-height: 34.5px !important;
        max-height: 34.5px !important;
        flex-basis: 34.5px !important;
    }

    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon {
        width: 29.3px !important;
        height: 29.3px !important;
        flex-basis: 29.3px !important;
    }

    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 29.3px !important;
        height: 29.3px !important;
        min-width: 29.3px !important;
        min-height: 29.3px !important;
        max-width: 29.3px !important;
        max-height: 29.3px !important;
        flex-basis: 29.3px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 30.3px !important;
        min-width: 30.3px !important;
        max-width: 30.3px !important;
        height: 30.3px !important;
        min-height: 30.3px !important;
        max-height: 30.3px !important;
        flex-basis: 30.3px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon {
        width: 25.8px !important;
        height: 25.8px !important;
        flex-basis: 25.8px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 25.8px !important;
        height: 25.8px !important;
        min-width: 25.8px !important;
        min-height: 25.8px !important;
        max-width: 25.8px !important;
        max-height: 25.8px !important;
        flex-basis: 25.8px !important;
    }
}

/* Extra-narrow phones: maintain a compact but visibly larger avatar target. */
@media (max-width: 360px) {
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex-basis: 36px !important;
    }

    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        flex-basis: 30px !important;
    }

    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        flex-basis: 31px !important;
    }

    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        flex-basis: 26px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 27.25px !important;
        min-width: 27.25px !important;
        max-width: 27.25px !important;
        height: 27.25px !important;
        min-height: 27.25px !important;
        max-height: 27.25px !important;
        flex-basis: 27.25px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 22.75px !important;
        height: 22.75px !important;
        min-width: 22.75px !important;
        min-height: 22.75px !important;
        max-width: 22.75px !important;
        max-height: 22.75px !important;
        flex-basis: 22.75px !important;
    }
}

/* The whole notification/message/AI/profile group moves left by exactly
   5px at A+ and 10px at A++ after the CSS body zoom is applied. */
@media (max-width: 700px) {
    html[data-ui-scale="large"] .nav-top-row .nav-actions {
        left: -4.31px !important; /* 5px / 1.16 */
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions {
        left: -7.58px !important; /* 10px / 1.32 */
    }
}


/* Keep the profile wrapper the same width as its enlarged button so its
   flex slot does not overlap the adjacent AI Chat icon on narrow phones. */
@media (max-width: 700px) {
    .nav-top-row .nav-actions > .auth-wrap {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }
}

@media (min-width: 361px) and (max-width: 700px) {
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .auth-wrap {
        width: 34.5px !important;
        min-width: 34.5px !important;
        max-width: 34.5px !important;
        height: 34.5px !important;
        flex-basis: 34.5px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .auth-wrap {
        width: 30.3px !important;
        min-width: 30.3px !important;
        max-width: 30.3px !important;
        height: 30.3px !important;
        flex-basis: 30.3px !important;
    }
}

@media (max-width: 360px) {
    .nav-top-row .nav-actions > .auth-wrap {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    html[data-ui-scale="large"] .nav-top-row .nav-actions > .auth-wrap {
        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
    }

    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .auth-wrap {
        width: 27.25px !important;
        min-width: 27.25px !important;
        max-width: 27.25px !important;
        height: 27.25px !important;
        flex-basis: 27.25px !important;
    }
}

/* =========================================================
   HEADER CONTROL SIZE LOCK — MATCH THE A SETTING
   The site-wide accessibility zoom still changes page content, but every
   control in the main header keeps its A-sized physical dimensions.
   ========================================================= */

.nav-inner > .menu-btn,
.nav-inner > .worth-it-user-search-btn,
.nav-top-row .nav-actions > .worth-it-notification-wrap > .worth-it-notification-bell,
.nav-top-row .nav-actions > .worth-it-chat-nav-wrap > .worth-it-chat-nav-btn,
.nav-top-row .nav-actions > .ai-chat-nav-btn,
.nav-top-row .nav-actions > .auth-wrap > #authBtn,
.nav-top-row .nav-actions > .auth-wrap > .profile-nav-btn,
.nav-secondary-row > button {
    zoom: calc(1 / var(--ui-scale, 1)) !important;
}

/* Keep the signed-in profile slot at its A-sized width on desktop. The
   separate logged-out Sign in rule keeps its natural text width. */
@media (min-width: 701px) {
    .nav-top-row .nav-actions > .auth-wrap:not(:has(> #authBtn:not([style*="display: none"]))) {
        width: calc(44px / var(--ui-scale, 1)) !important;
        min-width: calc(44px / var(--ui-scale, 1)) !important;
        max-width: calc(44px / var(--ui-scale, 1)) !important;
        height: calc(44px / var(--ui-scale, 1)) !important;
        flex: 0 0 calc(44px / var(--ui-scale, 1)) !important;
    }
}

/* In the regular phone breakpoint, A's controls are 32px. Restore that
   same baseline for A+ and A++ before their local zoom is counteracted. */
@media (min-width: 381px) and (max-width: 900px) {
    html[data-ui-scale="large"] .nav-secondary-row > .feedback-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .admin-panel-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .signout-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .settings-btn,
    html[data-ui-scale="large"] .nav-top-row .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .feedback-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .signout-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .settings-btn,
    html[data-ui-scale="xl"] .nav-top-row .ai-chat-nav-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
        padding: 4px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}

/* At narrow phone widths, A's responsive baseline is 27px. Keep that exact
   baseline for A−/A/A+/A++ rather than inheriting the old 24px/22px rules. */
@media (max-width: 380px) {
    .nav-secondary-row > .feedback-nav-btn,
    .nav-secondary-row > .admin-panel-nav-btn,
    .nav-secondary-row > .signout-nav-btn,
    .nav-secondary-row > .settings-btn,
    .nav-top-row .ai-chat-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .feedback-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .admin-panel-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .signout-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > .settings-btn,
    html[data-ui-scale="large"] .nav-top-row .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .feedback-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .admin-panel-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .signout-nav-btn,
    html[data-ui-scale="xl"] .nav-secondary-row > .settings-btn,
    html[data-ui-scale="xl"] .nav-top-row .ai-chat-nav-btn {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        flex: 0 0 27px !important;
        padding: 2px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }
}

/* Signed-in profile target and avatar: match the existing A dimensions at
   each responsive breakpoint and override the former A+/A++ reductions. */
@media (min-width: 361px) and (max-width: 700px) {
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
        padding: 2px !important;
    }

    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
    }
}

@media (max-width: 360px) {
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        padding: 2px !important;
    }

    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="large"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn > #profileNavIcon,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions .auth-wrap > .profile-nav-btn .auth-avatar-fallback {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        flex: 0 0 30px !important;
    }
}

/* FINAL A-SIZE OVERRIDES — avoid double compensation from older calc(.../--ui-scale) rules.
   Logo sizing is intentionally left on its existing responsive CSS path. */
@media (max-width: 700px) {
    html[data-ui-scale] .nav-inner > .menu-btn {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        flex: 0 0 30px !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    html[data-ui-scale] .nav-right-stack .nav-secondary-row > button,
    html[data-ui-scale] .nav-top-row .nav-actions > .ai-chat-nav-btn,
    html[data-ui-scale] .nav-top-row .nav-actions > .auth-wrap > #authBtn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
        padding: 4px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        border-radius: 9px !important;
    }

    html[data-ui-scale] .nav-top-row .nav-actions > .auth-wrap > .profile-nav-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
        padding: 2px !important;
    }

    /* Presence marker also stays at the A-size for the selected breakpoint. */
    html[data-ui-scale] .profile-nav-btn .worth-it-presence-indicator {
        width: 14px !important;
        height: 14px !important;
    }

    html[data-ui-scale] .nav-top-row .nav-actions > .auth-wrap {
        width: calc(40px / var(--ui-scale, 1)) !important;
        min-width: calc(40px / var(--ui-scale, 1)) !important;
        max-width: calc(40px / var(--ui-scale, 1)) !important;
        height: calc(40px / var(--ui-scale, 1)) !important;
        flex: 0 0 calc(40px / var(--ui-scale, 1)) !important;
    }
}

@media (max-width: 380px) {
    html[data-ui-scale] .nav-inner > .menu-btn {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        flex: 0 0 27px !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    html[data-ui-scale] .nav-right-stack .nav-secondary-row > button,
    html[data-ui-scale] .nav-top-row .nav-actions > .ai-chat-nav-btn,
    html[data-ui-scale] .nav-top-row .nav-actions > .auth-wrap > #authBtn {
        width: 27px !important;
        min-width: 27px !important;
        max-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        flex: 0 0 27px !important;
        padding: 2px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        border-radius: 9px !important;
    }

    html[data-ui-scale] .nav-top-row .nav-actions > .auth-wrap > .profile-nav-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        padding: 2px !important;
    }

    html[data-ui-scale] .nav-top-row .nav-actions > .auth-wrap {
        width: calc(36px / var(--ui-scale, 1)) !important;
        min-width: calc(36px / var(--ui-scale, 1)) !important;
        max-width: calc(36px / var(--ui-scale, 1)) !important;
        height: calc(36px / var(--ui-scale, 1)) !important;
        flex: 0 0 calc(36px / var(--ui-scale, 1)) !important;
    }
}

/* Keep the status dot the same size as A on desktop as well. */
html[data-ui-scale] .profile-nav-btn .worth-it-presence-indicator {
    width: 18px !important;
    height: 18px !important;
}
@media (max-width: 700px) {
    html[data-ui-scale] .profile-nav-btn .worth-it-presence-indicator {
        width: 14px !important;
        height: 14px !important;
    }
}

/* =========================================================
   MOBILE HEADER DOUBLE-ZOOM FIX — A+ / A++ ONLY
   The nav itself already cancels body zoom at these scales. Do NOT
   counter-zoom its individual buttons again, or they render smaller.
   The avatar wrapper must also use its physical A-size, not size/scale.
   ========================================================= */
@media (max-width: 700px) {
    html[data-ui-scale="large"] .nav-inner > .menu-btn,
    html[data-ui-scale="xl"] .nav-inner > .menu-btn,
    html[data-ui-scale="large"] .nav-inner > .worth-it-user-search-btn,
    html[data-ui-scale="xl"] .nav-inner > .worth-it-user-search-btn,
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .worth-it-notification-wrap > .worth-it-notification-bell,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .worth-it-notification-wrap > .worth-it-notification-bell,
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .worth-it-chat-nav-wrap > .worth-it-chat-nav-btn,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .worth-it-chat-nav-wrap > .worth-it-chat-nav-btn,
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .ai-chat-nav-btn,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .ai-chat-nav-btn,
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .auth-wrap > #authBtn,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .auth-wrap > #authBtn,
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .auth-wrap > .profile-nav-btn,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .auth-wrap > .profile-nav-btn,
    html[data-ui-scale="large"] .nav-secondary-row > button,
    html[data-ui-scale="xl"] .nav-secondary-row > button {
        zoom: 1 !important;
    }
}

/* On A+ / A++ the navbar's own inverse zoom has already neutralized the
   global page zoom, so these flex slots must remain physical A-sized too. */
@media (min-width: 361px) and (max-width: 700px) {
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .auth-wrap,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .auth-wrap {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
    }
}

@media (max-width: 360px) {
    html[data-ui-scale="large"] .nav-top-row .nav-actions > .auth-wrap,
    html[data-ui-scale="xl"] .nav-top-row .nav-actions > .auth-wrap {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
    }
}

/* Mobile Community Chat: keep the same viewport footprint at A, A+ and A++.
   The page itself uses zoom(var(--ui-scale)), so compensate the chat window's
   viewport dimensions as well as the overlay dimensions on phones/tablets. */
@media (max-width: 760px) {
    .worth-it-chat-fullscreen-btn {
        display: none !important;
    }

    .worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) {
        width: calc(100vw / var(--ui-scale, 1)) !important;
        height: calc(100dvh / var(--ui-scale, 1)) !important;
        max-width: calc(100vw / var(--ui-scale, 1)) !important;
        max-height: calc(100dvh / var(--ui-scale, 1)) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) > .worth-it-chat-window:not(.is-fullscreen) {
        width: calc(100vw / var(--ui-scale, 1)) !important;
        height: calc(100dvh / var(--ui-scale, 1)) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: calc(100vw / var(--ui-scale, 1)) !important;
        max-height: calc(100dvh / var(--ui-scale, 1)) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
}


/* COMMUNITY CHAT — LOCK PHONE PANEL TO THE A− SCALE.
   The rest of the site still uses the selected accessibility scale.
   Inside the non-fullscreen chat panel on phones, keep the overlay's effective zoom at the A− reference value (0.82)
   regardless of the accessibility scale selected for the rest of the page. */
@media (max-width: 760px) {
    html[data-ui-scale] .worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) {
        position: fixed !important;
        inset: 0 auto auto 0 !important;
        width: calc(100vw / 0.82) !important;
        height: calc(100dvh / 0.82) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
        zoom: 0.82 !important;
    }

    html[data-ui-scale] .worth-it-chat-overlay:not(.is-fullscreen):not([hidden]) > .worth-it-chat-window:not(.is-fullscreen) {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
}

/* On narrow phones, keep the message area and composer at the same A− height too. */
@media (max-width: 540px) {
    html[data-ui-scale] .worth-it-chat-window:not(.is-fullscreen):not(.is-mobile-sidebar) .worth-it-chat-main {
        height: calc(100dvh / 0.82) !important;
        min-height: 0 !important;
    }
}