/* ═══ OVN FM — Auth Pages v7 ═══
   Restored original design (v2.0.0 era) + post-sprint features.
   Design-system.css provides: buttons (.btn), modals (.modal-overlay/.modal-box),
   typography, colors. Auth.css: auth-specific layout only. */

/* ── Body ── */
body {
    background: #0f172a;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
    padding: 40px 24px;
    overflow-x: hidden; overflow-y: auto;
    margin: 0 !important;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}
[data-theme="dark"] body {
    background: radial-gradient(circle at 0% 0%, rgba(99,102,241,0.15) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(139,92,246,0.15) 0%, transparent 50%),
                #0f172a;
}
[data-theme="light"] body {
    background: radial-gradient(circle at 0% 0%, rgba(99,102,241,0.08) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(139,92,246,0.08) 0%, transparent 50%),
                #f8fafc;
}

/* ── Theme toggle (inside card header) ──
     NOTE: uses html[data-theme=] selector to match 01-tokens.css specificity */
.theme-toggle {
    width: 36px !important; height: 36px !important; border-radius: 10px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.3);
    color: #6366f1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
    padding: 0; box-sizing: border-box;
    position: absolute; bottom: 100%; right: 0; margin-bottom: 10px; z-index: 1001;
}
.theme-toggle:hover { background: rgba(99,102,241,0.25); }
@media (max-width: 480px) {
    .theme-toggle { width: 34px !important; height: 34px !important; top: 12px; right: 12px; bottom: auto; margin-bottom: 0; }
}
@media (min-width: 1025px) {
    .theme-toggle { position: fixed; top: 24px; right: 24px; bottom: auto; margin-bottom: 0; }
}
/* Icon defaults */
.sun-icon  { width: 18px; height: 18px; display: none; }
.moon-icon { width: 18px; height: 18px; display: none; }
/* Show sun in dark mode (click for light), moon in light mode (click for dark) */
html[data-theme="dark"]  .sun-icon  { display: inline; }
html[data-theme="dark"]  .moon-icon { display: none; }
html[data-theme="light"] .sun-icon  { display: none; }
html[data-theme="light"] .moon-icon { display: inline; }

/* ── Login card (original naming) ── */
.login-card {
    width: 100%; max-width: 420px;
    padding: 48px; text-align: center;
    background: rgba(30,41,59,0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    color: white; position: relative; z-index: 1000;
}
[data-theme="light"] .login-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12);
    color: #0f172a;
}
@media (max-width: 480px) {
    body {
        padding: 16px 12px;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    /* Mobile: heavy blur(20px) + background-attachment:fixed are very expensive
       on phones (recomputed per frame). Fall back to cheap solid backgrounds. */
    html[data-theme="dark"] body,
    html[data-theme="light"] body {
        background: var(--bg-base, #0f172a);
        background-attachment: scroll;
    }
    .login-card {
        padding: 28px 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: rgba(15, 23, 42, 0.92);
    }
    [data-theme="light"] .login-card {
        background: rgba(255, 255, 255, 0.96);
    }
}


/* ── Auth-card alias (for register/forgot/reset) ── */
.auth-card { /* same as .login-card */ }
.auth-card {
    width: 100%; max-width: 420px;
    padding: 48px; text-align: center;
    background: rgba(30,41,59,0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    color: white; position: relative; z-index: 1000;
    margin: 0 auto;
}
[data-theme="light"] .auth-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12);
    color: #0f172a;
}
@media (max-width: 480px) {
    .auth-card {
        padding: 28px 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: rgba(15, 23, 42, 0.92);
        margin-left: auto; margin-right: auto;
    }
    [data-theme="light"] .auth-card {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* ── Card footer ── */
.login-card-footer {
    width: 100%; max-width: 420px; text-align: center;
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8; font-size: 14px;
}
[data-theme="light"] .login-card-footer { border-top-color: rgba(0,0,0,0.1); }
.auth-link { color: #6366f1; text-decoration: none; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }

/* ── Login header ── */
.login-header { position: relative; }

/* ── Logo ── */
.login-logo {
    width: 140px; height: 140px;
    margin: 0 auto 12px;
    color: #6366f1;
    filter: drop-shadow(0 0 20px rgba(99,102,241,0.4));
    position: relative; overflow: visible;
    display: flex; align-items: center; justify-content: center;
}
.login-logo svg { overflow: visible; }
@media (max-width: 480px) {
    .login-logo { width: 72px; height: 72px; margin-bottom: 8px; }
    /* Smaller drop-shadow on mobile — saves GPU on backdrop-filter stack */
    .login-logo { filter: drop-shadow(0 0 12px rgba(99,102,241,0.4)); }
}

/* Logo alias for register/forgot/reset */
.auth-logo {
    width: 140px; height: 140px;
    margin: 0 auto 12px;
    color: var(--accent, #6366f1);
    filter: drop-shadow(0 0 20px rgba(99,102,241,0.4));
    position: relative; overflow: visible;
    display: flex; align-items: center; justify-content: center;
}
.auth-logo svg { overflow: visible; }
@media (max-width: 480px) {
    .auth-logo { width: 72px; height: 72px; margin-bottom: 8px; }
    .auth-logo { filter: drop-shadow(0 0 12px rgba(99,102,241,0.4)); }
}

/* ── Ripple wave animation ── */
.login-logo .wave, .auth-logo .wave {
    transform-origin: center;
    animation: ripple 3s infinite cubic-bezier(0.4,0,0.6,1);
    opacity: 0; fill: none; stroke: currentColor;
}
.login-logo .wave-1, .auth-logo .wave-1 { animation-delay: 0s; }
.login-logo .wave-2, .auth-logo .wave-2 { animation-delay: 1s; }
.login-logo .wave-3, .auth-logo .wave-3 { animation-delay: 2s; }
@keyframes ripple {
    0%   { transform: scale(1); opacity: 0; }
    50%  { opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}
.beacon { animation: blink 1.5s infinite alternate; }
@keyframes blink { from { opacity:1; } to { opacity:0.3; } }

/* ── Lang switcher ── */
.lang-switch {
    position: absolute; top: 4px; right: 4px; z-index: 1001;
}
.lang-switch a {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #64748b; text-decoration: none;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    transition: all 0.15s;
}
.lang-switch a:hover { color: #6366f1; border-color: #6366f1; }
[data-theme="light"] .lang-switch a { border-color: rgba(0,0,0,0.1); }

/* ── Subtitle ── */
.login-subtitle, .subtitle {
    color: #94a3b8; font-size: 16px;
    margin-bottom: 32px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-subtitle::before, .login-subtitle::after,
.subtitle::before, .subtitle::after {
    content: ''; display: inline-block;
    width: 5px; height: 5px;
    background: #34d399; border-radius: 50%;
    animation: pulse-dot 2s infinite;
}
.login-subtitle::after, .subtitle::after { animation-delay: 0.5s; }
.login-subtitle.no-dots::before, .login-subtitle.no-dots::after { display: none; }
[data-theme="light"] .login-subtitle,
[data-theme="light"] .subtitle { color: #64748b; }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(1.5); } }
@media (max-width: 480px) {
    .login-subtitle, .subtitle { font-size: 14px; margin-bottom: 24px; }
    .auth-divider-text { margin: 20px 0; }
    .checkbox-row { margin-bottom: 20px; }
    .form-group { margin-bottom: 16px; }
}

/* ── Auth title ── */
.auth-title { font-size: 24px; font-weight: 800; margin: 0 0 24px; }
[data-theme="light"] .auth-title { color: #0f172a; }

/* ── Form ── */
.form-group { text-align: left; margin-bottom: 20px; }
.form-label {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 8px; color: #94a3b8; text-transform: uppercase;
}
[data-theme="light"] .form-label { color: #475569; }
.form-input-wrapper { position: relative; }
.form-input-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: #6366f1; opacity: 0.7;
    width: 18px;
}
.form-input {
    width: 100%; padding: 12px 16px 12px 42px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; color: inherit;
    font-size: 15px; box-sizing: border-box;
    transition: all 0.2s;
}
.form-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
    outline: none;
}
.form-input::placeholder { color: rgba(148,163,184,0.55); }
[data-theme="light"] .form-input {
    background: rgba(15,23,42,0.04); border-color: rgba(0,0,0,0.1); color: #0f172a;
}
[data-theme="light"] .form-input:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
@media (max-width: 480px) {
    .form-input { padding: 12px 14px 12px 40px; font-size: 14px; }
    .form-label { color: rgba(148,163,184,0.85); letter-spacing: 0.5px; }
}

.code-input {
    text-align: center; font-size: 24px;
    letter-spacing: 10px; font-family: 'SF Mono', monospace;
    padding: 14px 16px;
}

/* ── Button styles from design-system.css + auth overrides ── */
.btn-login {
    width: 100%; height: 48px;
    background: #6366f1; color: white;
    border: none; border-radius: 12px;
    font-weight: 600; cursor: pointer;
    font-size: 16px; transition: all 0.2s;
}
.btn-login:hover { background: #6366f1; }

/* Auth context: .btn (inline-flex) + .w-full doesn't actually stretch inline element.
   Override: force block-level fill so passkey + telegram buttons stack/align correctly. */
.login-card .btn.w-full,
.auth-card .btn.w-full { display: flex; width: 100%; box-sizing: border-box; }
/* Gap between stacked secondary buttons (passkey + telegram) on auth card */
.login-card > .btn.w-full + .btn.w-full,
.auth-card > .btn.w-full + .btn.w-full { margin-top: 8px; }

/* ── Error box ── */
.error-box {
    background: rgba(239,68,68,0.1); color: #f87171;
    padding: 12px; border-radius: 10px;
    margin-bottom: 20px; display: none;
}
.success-box {
    background: rgba(52,211,153,0.1); color: #34d399;
    padding: 12px; border-radius: 10px;
    margin-bottom: 20px; display: none;
}

/* ── Password toggle ── */
.password-toggle {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #6366f1; opacity: 0.7; padding: 4px;
}
.password-toggle:hover { opacity: 1; }
.password-toggle i, .password-toggle svg { width: 18px; height: 18px; }

/* ── Checkbox row ── */
.checkbox-row {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 24px;
}
.checkbox-label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 14px; color: #94a3b8;
}
.checkbox-input { width: 16px; height: 16px; accent-color: #6366f1; }
.forgot-link { font-size: 13px; color: #6366f1; text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }

/* ── Divider (или...) ── */
.auth-divider-text {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0; color: rgba(255,255,255,0.2); font-size: 13px;
}
.auth-divider-text::before, .auth-divider-text::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.12);
}
[data-theme="light"] .auth-divider-text { color: rgba(0,0,0,0.2); }
[data-theme="light"] .auth-divider-text::before,
[data-theme="light"] .auth-divider-text::after { background: rgba(0,0,0,0.1); }

/* ── Telegram / OAuth / Passkey ── */
.telegram-login-container { margin-bottom: 12px; }
.oauth-buttons { display: flex; gap: 8px; }
.oauth-buttons .btn { flex: 1; }

/* ── Support footer ── */
.auth-support { margin-top: 12px; font-size: 12px; color: #64748b; text-align: center; }
.auth-support-link { color: #64748b; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.auth-support-link:hover { color: #6366f1; }

/* ── Hide sidebar ── */
.sidebar, .main-header, .sidebar-overlay { display: none !important; }

/* ── Honeypot ── */
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ── Registration ── */
.progress-steps { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.progress-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(255,255,255,0.12); transition: all 0.3s;
}
.progress-dot.active { background: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
.progress-dot.done { background: #22c55e; }
.progress-dot { position: relative; }
.progress-dot[aria-label]:hover::after {
    content: attr(aria-label);
    position: absolute;
    top: -28px; left: 50%; transform: translateX(-50%);
    background: rgba(15,23,42,0.95); color: #f1f5f9;
    padding: 4px 8px; border-radius: 6px;
    font-size: 11px; white-space: nowrap;
    pointer-events: none; z-index: 100;
}
[data-theme="light"] .progress-dot { background: rgba(0,0,0,0.1); }
.step { display: none; }
.step.active { display: block; }

/* ── 2FA modal icon ── */
.tg-modal-icon-wrap {
    background: rgba(34,158,217,0.1);
    color: #229ED9;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 14px;
}
.tg-modal-icon-wrap i, .tg-modal-icon-wrap svg { width: 24px; height: 24px; }
.tg-modal-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }

/* 2FA overlay: show via .active class */
#2fa-step.modal-overlay { display: none; }
#2fa-step.modal-overlay.active { display: flex; }

/* ── Autofill override ── */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9 !important;
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

/* ── Icons ── */
i[data-lucide] { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────────────────── */
/* Access-code auth (anonymous-style registration/login) */
/* ────────────────────────────────────────────────────────────────────────── */

.auth-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    padding: 4px;
    background: var(--bg-secondary, rgba(255,255,255,0.06));
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 12px;
}
.auth-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: var(--text-secondary, #94a3b8);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}
.auth-tab:hover {
    color: var(--text-primary, #f1f5f9);
}
.auth-tab.active {
    background: var(--accent, #6366f1);
    color: #fff;
}
.auth-tab i[data-lucide] {
    width: 16px;
    height: 16px;
}
.auth-tab-panel.hidden,
.hidden { display: none !important; }

/* Access-code info card (warning/info block on register & login) */
.ac-info-card {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(99,102,241,0.04));
    border: 1px solid rgba(99,102,241,0.35);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
}
.ac-info-card-compact {
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ac-info-card-compact .ac-info-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary, #94a3b8);
}
.ac-info-card-compact .ac-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
}
.ac-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent, #6366f1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.ac-info-icon i[data-lucide] {
    width: 22px;
    height: 22px;
}
.ac-info-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
}
.ac-info-list {
    margin: 0;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #cbd5e1);
}
.ac-info-list li { margin-bottom: 4px; }
.ac-info-list li:last-child { margin-bottom: 0; color: #fbbf24; }

/* Acknowledgement checkbox */
.ac-ack {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 8px 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #cbd5e1);
    cursor: pointer;
    user-select: none;
}
.ac-ack input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--accent, #6366f1);
    width: 18px;
    height: 18px;
}

/* Captcha row */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 14px;
    background: var(--bg-secondary, rgba(255,255,255,0.06));
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
}
.captcha-question {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
}
.btn-icon {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    margin-left: auto;
}
.btn-icon:hover {
    border-color: var(--accent, #6366f1);
    color: var(--text-primary, #f1f5f9);
}
.btn-icon i[data-lucide] {
    width: 16px;
    height: 16px;
}
.form-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
}

/* Success step 3 — access code display */
.ac-code-display {
    margin: 8px 0 24px;
}
.ac-code-warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #fca5a5;
}
.ac-code-warning i[data-lucide] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}
.ac-code-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.04));
    border: 1.5px dashed rgba(99,102,241,0.6);
    border-radius: 12px;
    padding: 14px;
}
.ac-code-text {
    flex: 1;
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    word-break: break-all;
    letter-spacing: 0.5px;
    background: transparent;
    user-select: all;
}
.ac-code-copy {
    flex-shrink: 0;
    width: 44px;
    height: auto;
    margin-left: 0;
}
.ac-code-confirm {
    margin-top: 4px;
}
.ac-confirm-hint {
    margin: 8px 0 0;
    font-size: 12px;
}
.form-input.valid {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.08) !important;
}
.form-input.invalid {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* btn-disabled visual state for the "go login" anchor */
.btn-disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}