@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");
:root { --bg:#0e0e12; --panel:#131317; --panel2:#1b1b1f; --line:#2a292e; --text:#e4e1e7; --muted:#9b97a0; --red:#e10600; --red-hi:#ff1e19; --green:#30d158; --head:"Space Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --edge:#3d2c2a; --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--head); letter-spacing:-.01em; }
a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-family:var(--head); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:19px; text-decoration:none; white-space:nowrap; }
.logo::before { content:""; width:6px; height:22px; background:var(--red); transform:skewX(-18deg); }
.logo span { color:inherit; }
.muted { color:var(--muted); }

/* buttons */
.btn { white-space:nowrap; -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:2px; border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit; font-family:var(--head); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:13px; cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,transform .05s; }
.btn:hover { background:var(--panel2); border-color:#4a4850; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--red); border-color:var(--red); color:#fff; }
.btn.primary:hover { background:var(--red-hi); border-color:var(--red-hi); }
.btn.lg { padding:15px 28px; font-size:14px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:none; border-color:transparent; color:var(--muted); }
.btn.ghost:hover { color:var(--text); background:none; }

/* forms */
label { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
input[type=text], input[type=email], input[type=password] { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:2px; padding:11px 12px; font:inherit; }
input:focus { outline:2px solid #e1060055; border-color:var(--red); }
.msg { margin:12px 0 0; padding:10px 12px; border-radius:2px; font-size:13px; }
.msg.err { background:#3a1514; color:#ff9b96; border:1px solid #5c1f1c; }
.msg.ok { background:#12301c; color:#8be8a6; border:1px solid #1d5130; }
.msg.warn { background:#352c10; color:#f0d27a; border:1px solid #574a1a; }
.divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:18px 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* installed (PWA) mode: app-like, no pull-to-refresh bounce or accidental text selection on UI */
html.pwa { overscroll-behavior-y:none; }
html.pwa body { -webkit-touch-callout:none; }
html.pwa button, html.pwa .btn, html.pwa nav { -webkit-user-select:none; user-select:none; }

/* mobile */
body { overflow-x:hidden; -webkit-text-size-adjust:100%; }
button, a, input, select { touch-action:manipulation; }
@media (max-width:700px) {
  /* 16px+ inputs stop iOS Safari zooming the page on focus */
  input[type=text], input[type=email], input[type=password], select { font-size:16px; }
  input[type=text], input[type=email], input[type=password] { padding:13px 12px; }
  .btn { min-height:44px; }
  .wrap { padding:0 16px; }
}

/* skeleton loaders */
.skl { background:linear-gradient(90deg,#1b1b1f 25%,#2a272e 38%,#1b1b1f 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; max-width:100%; }
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce) { .skl { animation:none; } }