:root {
  --bg: #08061A; --panel: #0F0D24; --panel-2: #14112B; --line: #241F45; --ink: #F2F1FA; --muted: #A7A3C7;
  --brand: #818CF8; --brand-deep: #4F46E5; --ok: #3CCF91; --bad: #F2736A;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--brand); }
.wordmark { font: italic 800 22px/1 Saira, Inter, sans-serif; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.wordmark span { color: var(--brand); }
.wordmark img { width: 30px; height: 30px; margin-right: 10px; }
.top { max-width: 1120px; margin: 0 auto; padding: 22px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top nav { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.top nav > a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid #2E2860; background: linear-gradient(180deg, #1E1A44, #17143A); color: #F2F1FA; font: 600 13px Inter, system-ui, sans-serif; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.top nav > a:hover, .top nav > a:focus-visible { border-color: #818CF8; box-shadow: 0 0 0 3px rgba(129,140,248,.18); color: #F2F1FA; outline: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--brand-deep); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.auth { max-width: 400px; margin: 8vh auto; padding: 32px; }
.auth h1 { margin: 0 0 6px; font: italic 800 30px/1.1 Saira, sans-serif; }
.auth p { color: var(--muted); margin: 0 0 22px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
input, select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--ink); font: inherit; }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(129,140,248,.2); }
.error { color: var(--bad); font-size: 14px; min-height: 20px; margin: 0 0 10px; }
.error:empty { display: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* log out is red */
.top nav > a#out, .top nav > a#out-link { border-color: rgba(242,115,106,.45); background: linear-gradient(180deg, #3A1420, #2A0F18); color: #FCA5A5; }
.top nav > a#out:hover, .top nav > a#out-link:hover, .top nav > a#out:focus-visible, .top nav > a#out-link:focus-visible { border-color: #F2736A; box-shadow: 0 0 0 3px rgba(242,115,106,.2); color: #FFE4E6; }