@font-face { font-family: 'Sora'; src: url('/fonts/sora.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root, [data-theme="light"] {
  --bg: #F3F6FB; --surface: #FFFFFF; --surface-2: #EEF2F9; --ink: #10214A; --ink-2: #33456E; --muted: #5B6B8C; --line: #DCE3EF;
  --primary: #1E6BFF; --primary-ink: #FFFFFF; --primary-soft: #E3EDFF;
  --brand: #10214A; --brand-ink: #FFFFFF; --accent: #FFB400;
  --ok: #0F9D58; --ok-soft: #DDF5E8; --warn: #C27803; --warn-soft: #FFF2D6; --bad: #D92D3A; --bad-soft: #FDE3E5; --idle: #8A97B2;
  --shadow: 0 1px 2px rgba(16,33,74,.06), 0 8px 24px rgba(16,33,74,.08);
  --radius-l: 20px; --radius: 14px; --radius-s: 10px;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #08111F; --surface: #0F1C33; --surface-2: #15253F; --ink: #E8EEFA; --ink-2: #C3CFE6; --muted: #8C9BBA; --line: #22345A;
  --primary: #4C8DFF; --primary-soft: #16294D; --brand: #0B1628; --accent: #FFC233;
  --ok: #34C77B; --ok-soft: #10301F; --warn: #F2B544; --warn-soft: #33270C; --bad: #FF5A66; --bad-soft: #3A1418; --idle: #6D7C9C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
[data-theme="green"]  { --primary: #0E9F6E; --primary-soft: #DDF4EA; --brand: #0B3B2E; --bg: #F1F7F4; --line: #D5E6DD; --ink: #0E2C22; --ink-2: #2B4A3E; --muted: #557366; }
[data-theme="red"]    { --primary: #D62839; --primary-soft: #FCE4E6; --brand: #5A0E1B; --bg: #FBF3F4; --line: #EED8DB; --ink: #3B0D14; --ink-2: #5E2730; --muted: #85525A; }
[data-theme="pink"]   { --primary: #D93D7A; --primary-soft: #FCE4EE; --brand: #5C1035; --bg: #FCF4F8; --line: #F0D8E3; --ink: #3D0F25; --ink-2: #5E2A43; --muted: #8A5670; }
[data-theme="violet"] { --primary: #7048E8; --primary-soft: #ECE6FD; --brand: #2A1663; --bg: #F6F3FD; --line: #E0D9F5; --ink: #1F1147; --ink-2: #3D2F6B; --muted: #6A5E91; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -0.01em; }
a { color: var(--primary); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid transparent; background: var(--primary); color: var(--primary-ink, #fff); font: 600 15px var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.soft { background: var(--primary-soft); color: var(--primary); }
.btn.ok { background: var(--ok); color: #fff; }
.btn.bad { background: var(--bad); color: #fff; }
.btn.amber { background: var(--accent); color: #10214A; }
.btn.block { width: 100%; }
.btn.big { min-height: 56px; font-size: 17px; border-radius: 16px; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }

input, select, textarea { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: 15px var(--font-body); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin: 12px 0 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 19px var(--font-display); color: inherit; text-decoration: none; letter-spacing: -0.02em; }
.wordmark img { width: 34px; height: 34px; }
.wordmark span { font-weight: 400; opacity: .85; }

[hidden] { display: none !important; }