:root { --bg:#0b0f19; --card:rgba(255,255,255,.045); --border:rgba(255,255,255,.11); --text:#f8fafc; --muted:#94a3b8; --accent:#a855f7; --gradient:linear-gradient(135deg,#6366f1,#a855f7 52%,#ec4899); --error:#f87171; }
body.light-mode { --bg:#eef2ff; --card:rgba(255,255,255,.78); --border:rgba(15,23,42,.12); --text:#0f172a; --muted:#64748b; --accent:#7c3aed; --error:#dc2626; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.25rem; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.glow-orb { position:fixed; inset:8% auto auto 12%; width:420px; height:420px; border-radius:50%; background:var(--gradient); filter:blur(130px); opacity:.2; pointer-events:none; }
.login-card { position:relative; z-index:1; width:100%; max-width:460px; flex:none; padding:2.5rem; border:1px solid var(--border); border-radius:24px; background:var(--card); backdrop-filter:blur(22px); box-shadow:0 22px 55px rgba(0,0,0,.4); }
.login-preferences { display:flex; justify-content:flex-end; gap:.5rem; margin:-.65rem -.65rem 1rem 0; }
.preference-control { display:flex; align-items:center; gap:.35rem; min-height:38px; padding:0 .45rem; border:1px solid var(--border); border-radius:10px; color:var(--muted); background:rgba(255,255,255,.05); }
.preference-control select { width:auto; min-height:34px; padding:0 1.4rem 0 .2rem; border:0; color:var(--text); background:transparent; font:inherit; font-size:.8rem; font-weight:700; outline:none; }
.preference-control option { color:var(--text); background:var(--bg); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.brand-header { text-align:center; margin-bottom:2rem; }
.store-branding-loader { display:flex;min-height:92px;align-items:center;justify-content:center;gap:.7rem;color:var(--muted);font-size:.88rem;font-weight:750; }
.store-branding-loader[hidden],.store-brand-content[hidden] { display:none; }
.store-branding-spinner { width:24px;height:24px;border:3px solid color-mix(in srgb,var(--muted) 28%,transparent);border-top-color:var(--accent);border-radius:50%;animation:store-branding-spin .8s linear infinite; }
.store-brand-content { animation:store-branding-in .2s ease-out; }
@keyframes store-branding-spin { to { transform:rotate(360deg); } }
@keyframes store-branding-in { from { opacity:0;transform:translateY(4px); } }
.brand-eyebrow { color:#c4b5fd; font-size:.72rem; font-weight:800; letter-spacing:.18em; }
h1 { margin:.35rem 0; font-size:clamp(2rem,8vw,3rem); line-height:1.05; background:var(--gradient); background-clip:text; -webkit-background-clip:text; color:transparent; }
.brand-header p,.panel-heading p { margin:.35rem 0 0; color:var(--muted); line-height:1.45; }
.login-panel { display:none; }
.login-panel.active { display:block; animation:panel-in .22s ease-out; }
@keyframes panel-in { from { opacity:0; transform:translateY(8px); } }
.input-group { margin-bottom:1rem; text-align:left; }
.input-group label { display:block; margin-bottom:.45rem; color:var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
input { width:100%; min-height:52px; padding:.85rem 1rem; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.24); color:var(--text); font:inherit; font-size:1.05rem; outline:none; }
body.light-mode input { background:rgba(255,255,255,.78); }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(168,85,247,.2); }
button,.file-btn { font:inherit; cursor:pointer; }
.primary-btn,.secondary-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:.8rem 1rem; border-radius:12px; font-weight:700; }
.primary-btn { border:0; color:white; background:var(--gradient); box-shadow:0 7px 20px rgba(168,85,247,.28); }
.secondary-btn { border:1px solid var(--border); color:var(--text); background:rgba(255,255,255,.055); }
.text-btn { display:block; margin:1rem auto 0; border:0; background:none; color:#c4b5fd; font-weight:700; }
.panel-heading { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1.25rem; }
.panel-heading h2 { margin:0; font-size:1.35rem; }
.back-btn { flex:0 0 38px; height:38px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); font-size:1.2rem; }
.status-message { min-height:1.5rem; margin:.8rem 0; color:var(--muted); text-align:center; }
.manual-access { margin-top:1rem; padding:1rem; color:var(--muted); font-size:.9rem; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,.16); }
.code-access-card { margin-top:0; padding:1.25rem; }
.manual-access > label { display:block; color:var(--text); font-size:1rem; font-weight:800; }
.manual-access > p { margin:.3rem 0 0; line-height:1.4; }
.manual-access strong { color:#c4b5fd; letter-spacing:.08em; }
.manual-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; margin-top:.75rem; }
.manual-row input { min-width:0; }
.manual-row .primary-btn { width:auto; min-width:120px; }
#manual-table-id { text-align:center; font-size:1.45rem; font-weight:800; letter-spacing:.22em; font-variant-numeric:tabular-nums; }
.auth-methods { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem; }
.auth-method { min-height:42px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.04); color:var(--muted); font-weight:700; }
.auth-method.active { border-color:var(--accent); color:white; background:rgba(168,85,247,.17); }
.error-message { display:none; margin:1rem 0 0; color:var(--error); text-align:center; font-weight:700; }
.error-message.visible { display:block; }
.hidden { display:none!important; }
footer { position:fixed; bottom:1rem; color:var(--muted); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }
@media (max-width:540px) { .login-card { padding:1.25rem; border-radius:20px; } .login-preferences { margin:-.35rem -.35rem .85rem 0; } .manual-row { grid-template-columns:1fr; } .manual-row .primary-btn { width:100%; } footer { position:static; margin-top:1rem; } body { justify-content:flex-start; } }
@media (prefers-reduced-motion:reduce) { .store-branding-spinner { animation-duration:1.8s; } .store-brand-content { animation:none; } }