:root{
  --bg:#0f172a;
  --panel:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#2563eb;
  --primary-ink:#ffffff;
  --danger:#ef4444;
  --warning:#f59e0b;
  --success:#10b981;
  --card:#1f2937;
  --border:#334155;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

.row{ display:flex; gap:8px; align-items:center }
.row.wrap{ flex-wrap:wrap }
.row.end{ justify-content:flex-end }

label{ display:block; margin:8px 0 6px; color:var(--muted) }
input[type="text"], input[type="password"], textarea, select{
  width:100%; background:#0b1220; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:10px 12px; font-size:16px;
}

button{
  border:none; border-radius:10px; padding:10px 14px; font-size:16px; cursor:pointer;
  background:#1f2937; color:var(--text); border:1px solid var(--border);
}
button.primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent }
button.secondary{ background:#0b1220 }
button.danger{ background:var(--danger); color:#fff; border-color:transparent }
button.warning{ background:var(--warning); color:#1f2937; border-color:transparent }
button.success{ background:var(--success); color:#083f2d; border-color:transparent }
button:disabled{ opacity:.6; cursor:not-allowed }

.muted{ color:var(--muted); margin-left:8px }
.hidden{ display:none !important }

#auth-overlay{
  position:fixed; inset:0; z-index:10002; display:none;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(37,99,235,.25), transparent 60%),
              radial-gradient(1200px 800px at 110% 110%, rgba(16,185,129,.18), transparent 60%),
              var(--bg);
  color:var(--text);
}
#auth-overlay.show{ display:block }
#auth-overlay .wrap{
  max-width:560px; margin:0 auto; padding:28px 16px; text-align:center;
  display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; height:100%;
}
#auth-overlay h2{ margin:0; font-size:28px }
#auth-overlay p{ margin:0; color:var(--muted) }
#auth-overlay .code{
  font-size:40px; font-weight:800; letter-spacing:.08em;
  background:#0b1220; border:1px solid var(--border); border-radius:14px; padding:10px 16px; display:inline-block;
}
#auth-overlay .hint{ color:var(--muted) }

/* Overlay helpers */
.overlay-block{ max-width:560px; width:100% }

/* Utilities */
.between{ justify-content:space-between }
.align-center{ align-items:center }
.align-end{ align-items:flex-end }
.gap-8{ gap:8px }
.gap-12{ gap:12px }
.gap-16{ gap:16px }
.mt-0{ margin-top:0 }
.mt-8{ margin-top:8px }
.mt-10{ margin-top:10px }
.mt-12{ margin-top:12px }
.mr-8{ margin-right:8px }
.flex-1{ flex:1 }
.min-w-160{ min-width:160px }
.min-w-200{ min-width:200px }
.max-w-180{ max-width:180px }