@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/golos-text-cyrillic-400.a82793f97f91.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/golos-text-latin-400.4b88b42724af.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/golos-text-cyrillic-500.97abfef86e34.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/golos-text-latin-500.b0c19f244d45.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/golos-text-cyrillic-600.894768c4c711.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/golos-text-latin-600.2938437410d6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/golos-text-cyrillic-700.ee4900035a09.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/golos-text-latin-700.12965d0becae.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root, :root[data-theme="light"] {
  --bg: #FFFFFF; --surface: #F7F6F3; --surface-2: #F1F0EC;
  --text: #2F2E2B; --muted: #6B6A66; --rule: #E8E7E4; --rule-strong: #D3D1CB;
  --btn: #2F2E2B; --btn-text: #FFFFFF; --focus: #3D7AB8;
  --red: #B42318; --red-bg: #FDECEA; --amber: #8A4B0C; --amber-bg: #FBF1E3; --green: #1F5E36; --green-bg: #E6F2EA;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #101317; --surface: #171B21; --surface-2: #1E232A;
  --text: #E7EAEE; --muted: #9AA4B1; --rule: #262C35; --rule-strong: #39414C;
  --btn: #E7EAEE; --btn-text: #101317; --focus: #5BB8FF;
  --red: #FF8A8A; --red-bg: #3A1C1F; --amber: #F2A93B; --amber-bg: #3A2A12; --green: #4CC38A; --green-bg: #15301F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 "Golos Text", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--btn); color: var(--btn-text); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; align-items: center; }
.nav a, .nav button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--muted); background: none; border: 0; font: inherit; cursor: pointer; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 600; }

.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; }
.page-narrow { max-width: 420px; }
h1 { margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.4px; }
.muted { color: var(--muted); }
.card { padding: 16px; border-radius: 12px; background: var(--surface); }
.stack { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field select { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--rule-strong); cursor: pointer; }

.btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rule-strong); background: transparent; color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
.btn-primary { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

.flash { padding: 12px 14px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.flash-error { background: var(--red-bg); color: var(--red); }
.qr { display: block; width: 220px; height: 220px; background: #FFFFFF; padding: 12px; border-radius: 12px; }
.secret { font-family: ui-monospace, monospace; letter-spacing: 1px; word-break: break-all; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }