body{
    margin:0;
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter",sans-serif;
    color:var(--text-primary);
    background:var(--background);
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

/* TOPBAR */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding:max(14px, env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-right, 0px)) 14px max(40px, env(safe-area-inset-left, 0px));
    background:var(--topbar-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--glass-border);
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    width:32px;
    height:32px;
    border-radius:50%;
}

.logo a.auth-brand-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-primary);
    text-decoration:none;
    font-weight:700;
}

.topbar a{
    color:var(--text-primary);
    text-decoration:none;
    margin-left:20px;
    opacity:0.9;
}

.topbar a:hover{
    opacity:1;
    color:var(--accent);
}

/* CENTER */

.center{
    min-height:calc(100vh - 72px);
    min-height:calc(100dvh - 72px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

/* CARD */

.card{
    width:min(450px,100%);
    padding:40px;
    border-radius:18px;
    background:var(--content-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--shadow-soft);
    color:var(--text-primary);
}

/* FORM */

.form-group{
    margin-bottom:18px;
    display:flex;
    flex-direction:column;
}

label{
    font-size:14px;
    color:var(--text-secondary);
}

input,select,textarea{
    padding:12px;
    border-radius:10px;
    border:1px solid var(--border-light);
    margin-top:6px;
    font-size:14px;
    background:var(--search-bg);
    color:var(--text-primary);
    width:100%;
    box-sizing:border-box;
}

/* PASSWORD */

.password-box{
    position:relative;
}

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

.password-box:has(.auth-pw-info) input{
    padding-right:88px;
}

.auth-pw-toggle,
.auth-pw-info{
    position:absolute;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    border-radius:10px;
    transition:background 0.15s ease, color 0.15s ease;
}

.auth-pw-toggle{
    right:8px;
    top:36px;
    width:38px;
    height:38px;
    padding:0;
}

.auth-pw-toggle:hover,
.auth-pw-info:hover{
    background:color-mix(in srgb, var(--text-primary) 8%, transparent);
    color:var(--text-primary);
}

.auth-pw-info{
    right:46px;
    top:36px;
    width:36px;
    height:38px;
    padding:0;
    font-size:15px;
    line-height:1;
}

.auth-eye-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.auth-eye-inner .auth-svg-eye--on{
    display:none;
}

.auth-pw-toggle.is-revealed .auth-svg-eye--off{
    display:none;
}

.auth-pw-toggle.is-revealed .auth-svg-eye--on{
    display:block;
}

.auth-field-error{
    margin:6px 0 0;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    color:#dc2626;
}

html[data-theme="dark"] .auth-field-error{
    color:#fecaca;
}

.auth-input-invalid{
    border-color:color-mix(in srgb, #ef4444 55%, var(--border-light)) !important;
    box-shadow:0 0 0 1px color-mix(in srgb, #ef4444 22%, transparent);
}

.eye{
    position:absolute;
    right:12px;
    top:40px;
    cursor:pointer;
    font-size:18px;
    line-height:1;
    user-select:none;
}

.info{
    position:absolute;
    right:44px;
    top:40px;
    cursor:pointer;
    font-size:16px;
    user-select:none;
}

.password-info{
    display:none;
    font-size:13px;
    margin-top:6px;
    color:var(--text-secondary);
}

.auth-legal-consent{
    gap:8px;
    margin-top:2px;
    margin-bottom:14px;
}

.auth-legal-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.5;
    color:var(--text-secondary);
}

.auth-legal-row input[type="checkbox"]{
    width:16px;
    height:16px;
    margin:2px 0 0;
    flex:0 0 auto;
}

.auth-legal-row a{
    color:var(--accent);
    text-decoration:underline;
}

/* BUTTON */

.card > form > button,
.card button[type="submit"]:not(.account-dropdown-logout){
    width:100%;
    padding:13px;
    border-radius:10px;
    border:none;
    background:var(--accent,#02C39A);
    color:white;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
}

.card > form > button:hover,
.card button[type="submit"]:not(.account-dropdown-logout):hover{
    background:var(--accent-hover,#00A884);
}

/* LINKS */

.links{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
    font-size:14px;
}

.links a{
    color:var(--accent);
}

.links a:hover{
    color:var(--accent-hover);
}

/* ============================================================
   Auth surface — modern glass / AI-style (login, forgot, OTP)
   ============================================================ */

html[data-theme="dark"] body.auth-surface{
    --auth-glow-1: rgba(20, 184, 166, 0.14);
    --auth-glow-2: rgba(56, 189, 248, 0.10);
    --auth-card-shine: linear-gradient(135deg, rgba(45, 212, 191, 0.12), transparent 45%, rgba(167, 139, 250, 0.08));
}

html[data-theme="light"] body.auth-surface{
    --auth-glow-1: rgba(20, 184, 166, 0.10);
    --auth-glow-2: rgba(59, 130, 246, 0.08);
    --auth-card-shine: linear-gradient(135deg, rgba(20, 184, 166, 0.10), transparent 50%, rgba(139, 92, 246, 0.06));
}

body.auth-surface{
    position:relative;
    overflow-x:hidden;
}

.auth-ambient{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 80% 55% at 15% 20%, var(--auth-glow-1), transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 75%, var(--auth-glow-2), transparent 50%);
}

body.auth-surface > .topbar,
body.auth-surface > .center{
    position:relative;
    z-index:1;
}

.topbar-links{
    display:flex;
    align-items:center;
    gap:8px;
}

.topbar-links a{
    margin-left:0;
    padding:8px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    border:1px solid var(--glass-border);
    background:color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.topbar-links a:hover{
    background:var(--nav-hover);
    border-color:color-mix(in srgb, var(--text-primary) 14%, var(--glass-border));
}

.auth-glass-card{
    position:relative;
    width:min(440px, 100%);
    padding:0;
    border-radius:24px;
    border:1px solid color-mix(in srgb, var(--glass-border) 85%, #14b8a6 15%);
    background:color-mix(in srgb, var(--content-bg) 78%, transparent);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset,
        0 24px 80px color-mix(in srgb, #14b8a6 8%, transparent);
    overflow:hidden;
}

.auth-card-glow{
    position:absolute;
    inset:-40%;
    background:conic-gradient(from 200deg, rgba(20, 184, 166, 0.15), transparent 35%, rgba(56, 189, 248, 0.12), transparent 70%, rgba(167, 139, 250, 0.10));
    opacity:0.55;
    animation:authGlowSpin 22s linear infinite;
    pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
    .auth-card-glow{
        animation:none;
    }
}

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

.auth-card-inner{
    position:relative;
    z-index:1;
    padding:36px 32px 32px;
}

.auth-eyebrow{
    margin:0 0 8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-secondary);
}

.auth-title{
    margin:0 0 10px;
    font-size:1.65rem;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--text-primary);
    text-align:left;
}

.auth-lead{
    margin:0 0 24px;
    font-size:14px;
    line-height:1.6;
    color:var(--text-secondary);
}

.auth-lead strong{
    color:var(--text-primary);
    font-weight:700;
}

.auth-mono{
    font-weight:700;
    letter-spacing:0.06em;
    color:var(--text-primary);
}

.auth-hint{
    margin:8px 0 0;
    font-size:12px;
    line-height:1.45;
    color:var(--text-secondary);
}

.auth-otp-hints{
    margin:12px 0 0;
    padding:12px 14px;
    border-radius:14px;
    font-size:12px;
    line-height:1.55;
    color:var(--text-secondary);
    background:color-mix(in srgb, var(--text-primary) 6%, transparent);
    border:1px solid var(--glass-border);
}

.auth-otp-hints.hidden{
    display:none;
}

.auth-otp-hints strong{
    color:var(--text-primary);
    display:block;
    margin-bottom:6px;
}

.auth-banner{
    margin:0 0 18px;
    padding:12px 14px;
    border-radius:14px;
    font-size:13px;
    font-weight:600;
    line-height:1.45;
}

.auth-banner-error{
    background:color-mix(in srgb, #ef4444 12%, transparent);
    border:1px solid color-mix(in srgb, #ef4444 35%, var(--glass-border));
    color:color-mix(in srgb, #fecaca 92%, #7f1d1d 8%);
}

html[data-theme="light"] .auth-banner-error{
    color:#991b1b;
}

.auth-btn-primary{
    width:100%;
    margin-top:4px;
    padding:14px 18px;
    border-radius:14px;
    border:none;
    font-size:15px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    color:#042f2e;
    background:linear-gradient(135deg, #14b8a6, #2dd4bf);
    box-shadow:0 10px 28px color-mix(in srgb, #14b8a6 32%, transparent);
    transition:transform 0.15s ease, box-shadow 0.2s ease;
}

.auth-btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 36px color-mix(in srgb, #14b8a6 38%, transparent);
}

/* Hide default full-width green button when auth primary is used */
.auth-glass-card.card > form > button[type="submit"],
.auth-glass-card form .auth-btn-primary{
    background:linear-gradient(135deg, #14b8a6, #2dd4bf);
    color:#042f2e;
}

.auth-glass-card.card > form > button[type="submit"]:hover,
.auth-glass-card form .auth-btn-primary:hover{
    background:linear-gradient(135deg, #0d9488, #14b8a6);
}

/* Toast */
.toast{
    position:fixed;
    bottom:28px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    z-index:10050;
    max-width:min(420px, calc(100vw - 32px));
    padding:14px 20px;
    border-radius:16px;
    font-size:14px;
    font-weight:600;
    line-height:1.45;
    text-align:center;
    color:var(--text-primary);
    background:color-mix(in srgb, var(--content-bg) 88%, transparent);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--shadow-soft);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.toast.show{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

/* Toasts on auth pages: top-aligned so long messages don’t cover Sign in / links on mobile */
body.auth-surface .toast{
    bottom:auto;
    top:max(14px, env(safe-area-inset-top, 0px));
    transform:translateX(-50%) translateY(-10px);
}

body.auth-surface .toast.show{
    transform:translateX(-50%) translateY(0);
}

.toast.toast-error{
    border-color:color-mix(in srgb, #ef4444 40%, var(--glass-border));
    background:color-mix(in srgb, #ef4444 10%, var(--content-bg));
    color:var(--text-primary);
}

html[data-theme="dark"] .toast.toast-error{
    color:#fecaca;
}

.toast.toast-warn{
    border-color:color-mix(in srgb, #f59e0b 45%, var(--glass-border));
    background:color-mix(in srgb, #f59e0b 12%, var(--content-bg));
}

html[data-theme="dark"] .toast.toast-warn{
    color:#fde68a;
}

/* Register page h2 alignment */
.card > h2{
    text-align:center;
    margin-top:0;
}

/* Registration — wider card, phone row, OTP */
.auth-register-card{
    width:min(480px, 100%);
}

@media (max-width:520px){
    .auth-register-card .auth-lead{
        font-size:0.88rem;
        line-height:1.5;
    }

    .auth-card-inner{
        padding:28px 20px 28px;
    }
}

.auth-label-row{
    display:block;
    margin-bottom:6px;
}

.auth-phone-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:stretch;
}

.auth-country-select,
.auth-phone-row input[type="tel"]{
    min-height:48px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border-light);
    background:var(--search-bg);
    color:var(--text-primary);
    font-size:14px;
    box-sizing:border-box;
}

.auth-country-select{
    flex:1 1 220px;
    cursor:pointer;
}

.auth-phone-row input[type="tel"]{
    flex:2 1 180px;
    min-width:0;
}

.auth-btn-secondary{
    width:100%;
    margin-top:6px;
    padding:12px 18px;
    border-radius:14px;
    border:1px solid var(--glass-border);
    font-size:14px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    color:var(--text-primary);
    background:color-mix(in srgb, var(--text-primary) 6%, transparent);
    transition:background 0.15s ease, border-color 0.15s ease;
}

.auth-btn-secondary:hover{
    background:var(--nav-hover);
    border-color:color-mix(in srgb, var(--text-primary) 16%, var(--glass-border));
}

.auth-btn-secondary:disabled{
    opacity:0.55;
    cursor:not-allowed;
}

/* CTA that “powers up” to teal when OTP is complete (device verify + register) */
.auth-unlock-btn{
    width:100%;
    margin-top:18px;
    padding:14px 18px 12px;
    border-radius:14px;
    font-family:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.auth-unlock-btn-main{
    font-size:15px;
    font-weight:800;
    letter-spacing:0.02em;
}

.auth-unlock-btn-sub{
    font-size:11px;
    font-weight:600;
    line-height:1.35;
    max-width:28ch;
}

.auth-unlock-btn--idle{
    color:var(--text-secondary);
    background:color-mix(in srgb, var(--text-primary) 6%, transparent);
    border:1px solid var(--glass-border);
    box-shadow:none;
    cursor:not-allowed;
    opacity:0.88;
}

.auth-unlock-btn--idle .auth-unlock-btn-sub{
    color:var(--text-secondary);
    opacity:0.9;
}

.auth-unlock-btn--ready{
    color:#042f2e;
    font-weight:700;
    background:linear-gradient(135deg, #14b8a6, #2dd4bf);
    border:none;
    box-shadow:0 10px 28px color-mix(in srgb, #14b8a6 32%, transparent);
    cursor:pointer;
    opacity:1;
}

.auth-unlock-btn--ready .auth-unlock-btn-sub{
    display:none;
}

.auth-unlock-btn--ready:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 14px 36px color-mix(in srgb, #14b8a6 38%, transparent);
    background:linear-gradient(135deg, #0d9488, #14b8a6);
}

.auth-unlock-btn:disabled{
    cursor:not-allowed;
}

.auth-otp-section{
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid var(--glass-border);
}

.auth-otp-section.hidden{
    display:none !important;
}

.auth-otp-section--register .auth-otp-title{
    text-align:center;
}

.auth-otp-step-hint{
    margin:-6px 0 14px;
    font-size:13px;
    line-height:1.45;
    color:var(--text-secondary);
    text-align:center;
}

.auth-otp-field-block{
    margin-bottom:6px;
}

.auth-otp-input-wide{
    text-align:center;
    font-size:20px;
    font-weight:600;
    letter-spacing:0.28em;
    font-variant-numeric:tabular-nums;
    padding:12px 10px;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.auth-otp-title{
    margin:0 0 14px;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-secondary);
}

.auth-otp-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

@media (max-width:520px){
    .auth-otp-grid{
        grid-template-columns:1fr;
    }

    .topbar{
        padding-left:max(14px, env(safe-area-inset-left, 0px));
        padding-right:max(14px, env(safe-area-inset-right, 0px));
    }

    .topbar-links a{
        margin-left:12px;
    }

    .card{
        padding:28px 20px;
    }

    input,select,textarea{
        font-size:16px;
    }
}

.auth-btn-tight{
    margin-top:10px;
    width:100%;
    padding:10px 14px;
    font-size:13px;
}

.auth-verify-status{
    margin:8px 0 0;
    min-height:1.2em;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
}

.auth-verify-status.auth-verify-ok{
    color:var(--accent, #22c55e);
}

.auth-verify-status.auth-verify-warn{
    color:#f59e0b;
}

.auth-muted{
    font-size:13px;
    color:var(--text-secondary);
    margin-right:6px;
}

.auth-glass-card .links{
    margin-top:20px;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

/* Legacy spans (if any page still uses .eye / .info) */
.auth-glass-card .password-box .info{
    right:44px;
}

.auth-glass-card .password-box .eye{
    right:12px;
}

/* Login device step-up (email OTP) */
.device-verify-card{
    width:min(440px, 100%);
    padding:0;
    overflow:hidden;
}

.device-verify-inner{
    position:relative;
    z-index:1;
    padding:36px 32px 40px;
}

.device-verify-flow{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:6px;
}

.device-verify-step{
    display:flex;
    flex-direction:column;
    align-items:stretch;
}

.device-verify-step-badge{
    margin:0 0 12px;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.11em;
    text-transform:uppercase;
    text-align:center;
    color:var(--text-secondary);
}

.device-verify-step-badge--accent{
    color:color-mix(in srgb, var(--accent, #2dd4bf) 92%, var(--text-secondary));
}

.device-verify-rail{
    height:1px;
    margin:22px 0 20px;
    background:linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--accent, #2dd4bf) 35%, var(--glass-border)) 20%,
        color-mix(in srgb, var(--accent, #2dd4bf) 35%, var(--glass-border)) 80%,
        transparent
    );
    opacity:0.85;
}

.device-verify-step--code .device-verify-step-badge{
    margin-bottom:14px;
}

.device-verify-otp-shell{
    width:100%;
}

.device-verify-icon-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:8px;
}

.device-verify-icon{
    width:44px;
    height:44px;
    color:var(--accent, #2dd4bf);
    opacity:0.95;
}

.device-verify-title{
    text-align:center;
    margin-bottom:10px;
}

.device-verify-lead{
    text-align:center;
    margin-bottom:14px;
    line-height:1.55;
    max-width:34ch;
    margin-left:auto;
    margin-right:auto;
}

.device-verify-inbox{
    text-align:center;
    font-size:14px;
    color:var(--text-secondary);
    margin:0 0 16px;
    line-height:1.5;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--glass-border);
}

.device-verify-inbox strong{
    color:var(--text-primary);
    font-weight:600;
}

.device-verify-btn-send{
    width:100%;
    font-weight:600;
}

.device-verify-sr-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.device-verify-otp-input{
    text-align:center;
    font-size:22px;
    font-weight:600;
    letter-spacing:0.35em;
    font-variant-numeric:tabular-nums;
    padding:14px 12px;
    border-radius:12px;
    width:100%;
    box-sizing:border-box;
}

.device-verify-hint{
    margin:12px 0 0;
    font-size:12px;
    line-height:1.45;
    color:var(--text-secondary);
    text-align:center;
}

@media (max-width:480px){
    .device-verify-inner{
        padding:28px 20px 32px;
    }
    .device-verify-otp-input{
        font-size:20px;
        letter-spacing:0.28em;
    }
}