/* login.smilestory.ai — site theme overlay (family56 bundle B, 2026-10-28).
   ORIGINAL = LIGHT (glass card over the animated rainbow gradient). The original is NOT touched: every rule below is
   scoped to html[data-theme="dark"], which wia-site-theme.js sets on <html> before first paint. Nothing here styles
   the engine's own .wst-btn / .wst-menu (that comes from CFG.btnCss / menuCss / extraCss — see NOTES.md §3).
   Load position: </head> directly before it, AFTER each page's inline <style> (index.html line ~1276, signup 504,
   forgot-password 476, reset-password 118, qr-approve 274) and after /css/light-mode.css where linked.
   Do NOT give this <link> id="wia-light-mode-css" — index.html line 25 reserves that id to block the toolkit CSS.
   Covers 5 screens: index.html (full), signup.html, forgot-password.html, reset-password.html, qr-approve.html (shell).

   Dark palette                       on card #14161f (≈ what the 82% glass shows)
   ───────────────────────────────    ──────────────────────────────────────────
   page gradient  deep rainbow        body background-image only (keeps size/animation)
   card           rgba(20,22,31,.82)  --glass-bg
   text           #e9ecf2             13.5:1
   secondary      #c5cad8             9.9:1   (--text-mid)
   muted          #a3abbd             6.5:1   (--text-light, copyright, hints)
   placeholder    #8b93a7             4.6:1   (--text-muted)
   line           rgba(255,255,255,.14) / #2a2d3d
   link blue      #54a0ff             6.7:1   (kept — brand accent still passes on dark)
   link purple    #b9a3ff             8.1:1   (replaces #5f27cd 2.3:1 as TEXT; gradients keep #5f27cd)
   button fill    #2f6fd6 → #4c1fa8   white text 4.8:1 / 9.6:1 (original #54a0ff→#5f27cd gives 2.7:1 at the blue end)
   QR / OTP       untouched           QR tile stays #fff (scanners), OTP modals are already dark (#1a2f4e). */

/* ===== tokens (index.html :root) ===== */
html[data-theme="dark"] {
    --glass-bg: rgba(20, 22, 31, .82);
    --glass-border: rgba(255, 255, 255, .10);
    --text-dark: #e9ecf2;
    --text-mid: #c5cad8;
    --text-light: #a3abbd;
    --text-muted: #8b93a7;
    /* signup / forgot / reset / qr-approve :root names */
    --text-primary: #e9ecf2;
    --text-secondary: #a3abbd;
    --accent: #b9a3ff;
    --accent-hover: #cdbfff;
    --panel-bg: rgba(20, 22, 31, .82);
    --border-glow: rgba(255, 255, 255, .10);
}

/* ===== page: darkened rainbow, same 8 hues in the same order so the 20s flow still reads as the brand.
   background-image only — the shorthand would reset background-size:600% and kill the animation. ===== */
html[data-theme="dark"] body {
    background-image: linear-gradient(135deg,
        #3a1a22, #3b231c, #3a3014, #1e3620,
        #123742, #172a52, #241452, #3a1c3e,
        #3a1a22);
    color: var(--text-dark);
}
html[data-theme="dark"] .grid-overlay {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255,255,255,.05) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 40%, rgba(255,255,255,.03) 0%, transparent 60%);
}

/* ===== top-left home chip (inline style, translucent white — fine on dark; only the hover is JS) ===== */
html[data-theme="dark"] #headerHomeLink { border-color: rgba(255,255,255,.18) !important; } /* inline border rgba(255,255,255,.1) is invisible on the dark gradient */

/* ===== glass card ===== */
html[data-theme="dark"] .auth-box,
html[data-theme="dark"] .signup-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .success-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
/* forgot-password / qr-approve: .auth-box box-shadow is locked by `animation: glow-pulse` (both keyframes carry a
   white inset highlight that shows as a bright 1px line on a dark card). Only an !important declaration outranks an
   animation in the cascade — that is the one reason for it here. */
html[data-theme="dark"] .auth-box {
    box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ===== tabs (index.html) ===== */
html[data-theme="dark"] .auth-tabs { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .auth-tab.active {
    background: linear-gradient(135deg, #2f6fd6, #4c1fa8);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
html[data-theme="dark"] .auth-tab:hover:not(.active) { color: #8fc0ff; background: rgba(84,160,255,.12); }
html[data-theme="dark"] .auth-tab-lang { color: #7ab8ff; border-color: rgba(122,184,255,.4); }
html[data-theme="dark"] .auth-tab-lang:hover { background: rgba(84,160,255,.14); border-color: #7ab8ff; }

/* ===== inputs ===== */
html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] #neuralWiaCode {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color: var(--text-dark);
}
html[data-theme="dark"] .input-group input:focus,
html[data-theme="dark"] .form-input:focus {
    background: #0f1118;
    border-color: #7ab8ff;
    box-shadow: 0 0 0 4px rgba(84,160,255,.22);
}
html[data-theme="dark"] .input-group input::placeholder,
html[data-theme="dark"] .form-input::placeholder { color: var(--text-muted); }
html[data-theme="dark"] .input-group > i,
html[data-theme="dark"] .password-toggle { color: var(--text-muted); }
html[data-theme="dark"] .input-group:focus-within > i { color: #7ab8ff; }
html[data-theme="dark"] .password-toggle:hover { color: var(--text-dark); }
html[data-theme="dark"] .form-label { color: var(--text-mid); }
html[data-theme="dark"] .form-label i { color: #7ab8ff; }
html[data-theme="dark"] .remember-check { color: var(--text-mid); }
html[data-theme="dark"] .remember-check input,
html[data-theme="dark"] .terms-item input[type="checkbox"] { accent-color: #7ab8ff; }

/* ===== links ===== */
html[data-theme="dark"] .forgot-link,
html[data-theme="dark"] .signup-section a,
html[data-theme="dark"] .links a,
html[data-theme="dark"] .login-link a,
html[data-theme="dark"] .back-link a,
html[data-theme="dark"] .terms-item a { color: #7ab8ff; }
html[data-theme="dark"] .forgot-link:hover,
html[data-theme="dark"] .signup-section a:hover,
html[data-theme="dark"] .links a:hover,
html[data-theme="dark"] .login-link a:hover,
html[data-theme="dark"] .back-link a:hover { color: #b9a3ff; }
html[data-theme="dark"] .signup-section p,
html[data-theme="dark"] .login-link,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .divider span,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .advanced-title { color: var(--text-light); }

/* ===== primary buttons ===== */
html[data-theme="dark"] .auth-btn,
html[data-theme="dark"] .submit-btn,
html[data-theme="dark"] .btn-approve,
html[data-theme="dark"] .success-card a {
    background: linear-gradient(135deg, #2f6fd6, #4c1fa8);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
html[data-theme="dark"] .auth-btn:hover,
html[data-theme="dark"] .submit-btn:hover,
html[data-theme="dark"] .btn-approve:hover { box-shadow: 0 6px 28px rgba(0,0,0,.5); }
html[data-theme="dark"] .btn-deny { color: #ff7b7b; border-color: rgba(255,123,123,.4); background: rgba(239,68,68,.12); }

/* dividers / separators */
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after,
html[data-theme="dark"] .advanced-title::before,
html[data-theme="dark"] .advanced-title::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
html[data-theme="dark"] .signup-section,
html[data-theme="dark"] .links,
html[data-theme="dark"] .terms-item.all { border-color: rgba(255,255,255,.12); }

/* ===== social / advanced buttons (index.html + signup.html) ===== */
html[data-theme="dark"] .social-btn,
html[data-theme="dark"] .advanced-btn {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: var(--text-mid);
}
html[data-theme="dark"] .social-btn:hover,
html[data-theme="dark"] .advanced-btn:hover {
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
html[data-theme="dark"] .advanced-btn i { color: #7ab8ff; }
/* brand tiles: Apple stays black (needs an edge on a dark card); Kakao stays yellow; GitHub/X were #000/#333 on white */
html[data-theme="dark"] .social-btn.apple { background: #000; border-color: rgba(255,255,255,.28); }
html[data-theme="dark"] .social-btn.apple:hover { background: #1a1a1a; border-color: rgba(255,255,255,.45); }
html[data-theme="dark"] .social-btn.kakao { color: #3C1E1E; }
html[data-theme="dark"] .social-btn.github { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .social-btn.github:hover { border-color: #e9ecf2; background: rgba(255,255,255,.14); }
html[data-theme="dark"] .social-btn.github i,
html[data-theme="dark"] .advanced-btn.github i { color: #e9ecf2; }
html[data-theme="dark"] .advanced-btn.github:hover { border-color: #e9ecf2; }
html[data-theme="dark"] .advanced-btn.twitter { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .advanced-btn.twitter i { color: #fff; }
html[data-theme="dark"] .advanced-btn.twitter:hover { background: #000; border-color: rgba(255,255,255,.45); }
html[data-theme="dark"] .social-btn.naver { background: rgba(3,199,90,.12); }
html[data-theme="dark"] .social-btn.line { background: rgba(0,185,0,.12); }
html[data-theme="dark"] .social-btn.facebook { background: rgba(24,119,242,.14); }
html[data-theme="dark"] .social-btn.facebook i { color: #5ea2ff; }  /* #1877F2 is 4.3:1 on the card; lifted for the icon */
html[data-theme="dark"] .advanced-btn.linkedin i { color: #4f9be6; } /* #0A66C2 3.2:1 → 5.6:1 */
html[data-theme="dark"] .advanced-btn.discord i { color: #8b95ff; }
html[data-theme="dark"] .advanced-btn.gitee,
html[data-theme="dark"] .advanced-btn.gitee i { color: #ff7378; }    /* #C71D23 is 3.1:1 — too low for the label text */
html[data-theme="dark"] .advanced-btn.enterprise {
    background: rgba(95,39,205,.18);
    border-color: rgba(185,163,255,.38);
}
html[data-theme="dark"] .advanced-btn.enterprise i { color: #b9a3ff; }
html[data-theme="dark"] .advanced-btn.enterprise:hover { border-color: #b9a3ff; background: rgba(95,39,205,.28); }
html[data-theme="dark"] .advanced-btn.passkey-btn {
    background: rgba(84,160,255,.10);
    border-color: rgba(122,184,255,.38);
}
html[data-theme="dark"] .advanced-btn.passkey-btn:hover { border-color: #7ab8ff; background: rgba(84,160,255,.18); }
/* "다른 방법으로 로그인 (N)" — injected by the compact-login script (index.html ~line 3169, id wlCompactCss) */
html[data-theme="dark"] .wl-more { border-color: rgba(255,255,255,.26); color: var(--text-mid); opacity: 1; }
html[data-theme="dark"] .wl-more:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .wl-recent-lbl { color: var(--text-light); opacity: 1; }

/* ===== error / success / status messages ===== */
html[data-theme="dark"] #neuralError,
html[data-theme="dark"] .error-msg,
html[data-theme="dark"] .error-message i,
html[data-theme="dark"] .status-msg.error i { color: #ff7b7b; }
html[data-theme="dark"] .error-msg { background: rgba(239,68,68,.14); border-color: rgba(255,123,123,.35); }
html[data-theme="dark"] .success-msg { background: rgba(34,197,94,.12); border-color: rgba(74,222,128,.35); }
html[data-theme="dark"] .success-msg i,
html[data-theme="dark"] .success-msg h3,
html[data-theme="dark"] .status-msg.success i { color: #4ade80; }
html[data-theme="dark"] .success-msg p,
html[data-theme="dark"] .social-msg p,
html[data-theme="dark"] .status-msg p,
html[data-theme="dark"] .success-message p,
html[data-theme="dark"] .error-message p,
html[data-theme="dark"] .success-card p { color: var(--text-mid); }
html[data-theme="dark"] .social-msg { background: rgba(95,39,205,.16); border-color: rgba(185,163,255,.35); }
html[data-theme="dark"] .social-msg h3,
html[data-theme="dark"] .success-card h2 { color: #b9a3ff; }
html[data-theme="dark"] .status-msg h3,
html[data-theme="dark"] .success-message h2,
html[data-theme="dark"] .error-message h2 { color: var(--text-dark); }

/* ===== QR / WIA Code panel (index.html) — the code tile itself stays white: phone cameras need it ===== */
html[data-theme="dark"] .qr-instructions { color: var(--text-mid); }
html[data-theme="dark"] .qr-instructions strong { color: #7ab8ff !important; }                 /* inline color:#3b82f6 (4.9:1, lifted to 6.7:1) */
html[data-theme="dark"] .qr-instructions > span { color: var(--text-light) !important; }       /* inline #94a3b8 / #64748b (#64748b = 3.8:1) */
html[data-theme="dark"] #wiaHelpLink { color: #b9a3ff !important; }                            /* inline color:#5f27cd = 2.3:1 on dark */
html[data-theme="dark"] #qrMatchBox { background: rgba(185,163,255,.12) !important; border-color: rgba(185,163,255,.45) !important; } /* inline */
html[data-theme="dark"] #qrMatchBox > div { color: var(--text-mid) !important; }                /* inline color:#4a4a6a */
html[data-theme="dark"] #qrMatchNum { color: #f4f5fa !important; }                             /* inline color:#1a1a2e */
html[data-theme="dark"] .qr-code { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
/* qr-approve.html device card + timer */
html[data-theme="dark"] .device-info { background: rgba(168,224,99,.10); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .device-info p { color: var(--text-dark); }
html[data-theme="dark"] .timer { color: var(--text-light); }

/* ===== Neural Glyph tab (index.html, display:none by default — inline-styled, light placeholders only) ===== */
html[data-theme="dark"] #neuralCanvas { background: rgba(255,255,255,.9) !important; }  /* keep the drawing surface light: strokes are drawn dark by JS */

/* ===== page headers (signup / forgot / reset / qr-approve) ===== */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title h1 { color: var(--text-dark); text-shadow: none; }
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .card-title p { color: var(--text-light); }
html[data-theme="dark"] .home-btn { color: var(--text-dark); border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .lang-btn { background: rgba(84,160,255,.12); border-color: rgba(122,184,255,.4); color: #7ab8ff; }
html[data-theme="dark"] .lang-btn:hover { background: rgba(84,160,255,.2); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
html[data-theme="dark"] .terms-section { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .terms-item { color: var(--text-mid); }
html[data-theme="dark"] .terms-item.all { color: var(--text-dark); }
html[data-theme="dark"] .password-strength { background: rgba(255,255,255,.14); }
html[data-theme="dark"] .success-overlay { background: rgba(11,13,18,.85); }

/* ===== footer / legal lines ===== */
html[data-theme="dark"] .auth-copyright,
html[data-theme="dark"] #footerCopyright { color: var(--text-light) !important; }  /* inline color:#64748b = 3.8:1 on the dark card */
html[data-theme="dark"] .footer-copyright { color: var(--text-light); }

/* ===== logged-in profile chip + dropdown (#userProfileArea, rendered by JS with these classes) ===== */
html[data-theme="dark"] .user-profile-btn { background: rgba(20,22,31,.8); border-color: rgba(255,255,255,.14); color: var(--text-dark); }
html[data-theme="dark"] .user-profile-btn:hover { background: rgba(28,30,42,.95); }
html[data-theme="dark"] .user-avatar { border-color: rgba(122,184,255,.45); }
html[data-theme="dark"] .user-dropdown-menu { background: rgba(20,22,31,.96); border-color: rgba(255,255,255,.12); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .user-dropdown-menu a { color: var(--text-dark); border-bottom-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .user-dropdown-menu a:hover { background: rgba(84,160,255,.16); color: #7ab8ff; }
html[data-theme="dark"] .user-dropdown-menu a i { color: var(--text-light); }
html[data-theme="dark"] .user-dropdown-menu a:hover i { color: #7ab8ff; }

/* ===== dead CSS in index.html (no markup today: .security-bar, footer, .benefits-panel, .tier-card) — minimal shell
   so nothing turns white if someone re-adds them ===== */
html[data-theme="dark"] .security-bar,
html[data-theme="dark"] footer { background: rgba(11,13,18,.8); border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .footer-section ul li a,
html[data-theme="dark"] .footer-bottom p,
html[data-theme="dark"] .footer-brand p { color: var(--text-mid); }