:root {
  --bg: #0a0b0d; --card: #121418; --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.16);
  --ink: #f3efe7; --ink-2: #b9b3a8; --ink-3: #7d786f;
  --gold: #e8b84a; --gold-2: #ffd978; --gold-deep: #b97e1c; --warn: #f08a5d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.signin { position: relative; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 24px 20px; overflow: hidden; }
.glow { position: absolute; inset: -20% -10% auto; height: 70vh; background: radial-gradient(50% 50% at 50% 50%, rgba(232,184,74,0.16), transparent 70%); pointer-events: none; }
.signin-card { position: relative; width: 100%; max-width: 400px; display: grid; gap: 24px; padding: 32px 28px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.signin-logo { display: block; justify-self: center; width: 196px; max-width: 70%; height: auto; filter: drop-shadow(0 0 24px rgba(232,184,74,0.25)); }
.head { display: grid; gap: 8px; }
.chip { justify-self: start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(232,184,74,0.4); background: rgba(232,184,74,0.08); padding: 4px 10px; border-radius: 999px; }
h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.muted { margin: 0; color: var(--ink-2); }
.muted b { color: var(--ink); font-weight: 600; }
.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232,184,74,0.15); }
.btn { height: 52px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; }
.btn.primary { color: #1b1405; background: linear-gradient(135deg, var(--gold-2), var(--gold) 50%, var(--gold-deep)); box-shadow: 0 10px 28px rgba(232,184,74,0.28); }
.btn:disabled { opacity: .55; cursor: default; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp input { min-height: 58px; width: 100%; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); text-align: center; font: 600 22px "JetBrains Mono", ui-monospace, monospace; outline: none; transition: border-color .2s, box-shadow .2s; }
.otp input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232,184,74,0.15); }
.otp input[data-filled="true"] { border-color: var(--gold); }
.small { margin: 0; min-height: 20px; font-size: 13px; color: var(--ink-3); }
.btns { display: flex; justify-content: space-between; gap: 12px; }
.text-btn { background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--gold); }
.text-btn.dim { color: var(--ink-3); }
.text-btn:disabled { color: var(--ink-3); cursor: default; }
.error { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(240,138,93,0.4); background: rgba(240,138,93,0.08); color: #ffd2bf; font-size: 14px; }
.foot { margin: 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 420px) { .signin-card { padding: 26px 18px; } .otp { gap: 6px; } .otp input { min-height: 52px; font-size: 20px; } }