/* Стили служебных страниц (политика, условия, 404). Главная самодостаточна и
   этот файл не подключает: у неё весь CSS внутри index.html. Здесь общий слой
   для трёх текстовых страниц, чтобы не держать три копии одного и того же.
   Токены — те же, что в кабинете (ui/src/index.css), обе темы. */
@font-face{font-family:'Inter';src:url('/fonts/Inter-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';src:url('/fonts/Inter-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20BD,U+2713}
@font-face{font-family:'Space Grotesk';src:url('/fonts/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20BD,U+2713}

:root{
  color-scheme:light;
  --ink-900:236 238 251;--ink-850:243 244 252;--ink-800:255 255 255;--ink-700:238 240 248;
  --ink-600:226 229 241;--ink-500:211 215 232;--ink-400:188 193 218;--ink-300:154 160 189;
  --fg:28 32 48;--fg-muted:77 84 112;--fg-dim:96 102 132;
  --accent-600:79 70 229;--accent-500:108 99 255;--accent-400:91 84 240;
  --ok:15 118 54;--bad:206 24 64;
  --shadow-card:inset 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 4px rgb(20 24 60 / 0.04), 0 22px 48px -20px rgb(80 70 190 / 0.22);
  --shadow-glow:0 0 0 1px rgb(108 99 255 / 0.22), 0 16px 40px -8px rgb(108 99 255 / 0.26);
  --r-btn:14px;--r-card:20px;--r-chip:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}
html.dark{
  color-scheme:dark;
  --ink-900:7 6 16;--ink-850:13 12 26;--ink-800:23 23 43;--ink-700:32 33 57;
  --ink-600:46 48 78;--ink-500:60 63 98;--ink-400:80 84 124;--ink-300:104 109 150;
  --fg:235 236 246;--fg-muted:161 167 198;--fg-dim:132 138 172;
  --accent-600:91 84 240;--accent-500:108 99 255;--accent-400:138 131 255;
  --ok:61 220 132;--bad:255 91 110;
  --shadow-card:inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 60px -20px rgb(0 0 0 / 0.75);
  --shadow-glow:0 0 0 1px rgb(108 99 255 / 0.35), 0 16px 44px -8px rgb(108 99 255 / 0.30);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:rgb(var(--ink-900));color:rgb(var(--fg));
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:rgb(var(--accent-600));color:#fff;padding:10px 16px;border-radius:var(--r-btn);font-weight:600}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:2px solid rgb(var(--accent-500));outline-offset:3px;border-radius:2px}

.hdr{border-bottom:1px solid rgb(var(--ink-600));background:rgb(var(--ink-850))}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:62px}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.02em;white-space:nowrap}
.mark .dot{width:7px;height:7px;border-radius:50%;background:rgb(var(--accent-500));flex:none;box-shadow:0 0 0 3px rgb(var(--accent-500) / .25)}
.mark .sub{color:rgb(var(--fg-dim))}
.hdr .back{font-size:14px;color:rgb(var(--fg-muted));text-decoration:none}
/* Переключатель темы — тот же компонент, что на главной (ThemeToggle.jsx, pill). */
.theme-sw{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid rgb(var(--ink-600));border-radius:999px;background:rgb(var(--ink-800) / .6);flex:none;margin-left:auto}
.theme-sw button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:rgb(var(--fg-dim));cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.theme-sw button:hover{color:rgb(var(--fg))}
.theme-sw button[aria-pressed="true"]{background:rgb(var(--accent-500) / .16);color:rgb(var(--accent-400))}
.theme-sw svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hdr .back:hover{color:rgb(var(--fg))}

main{flex:1;padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px)}
.legal{max-width:760px}
.legal h1{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:clamp(26px,3.6vw,40px);margin:0 0 8px}
.legal .meta{font-size:12.5px;color:rgb(var(--fg-dim));margin:0 0 34px;font-variant-numeric:tabular-nums}
.legal h2{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;font-size:17px;line-height:1.3;margin:34px 0 10px;padding-top:20px;border-top:1px solid rgb(var(--ink-600))}
.legal p,.legal li{font-size:14.5px;color:rgb(var(--fg-muted));line-height:1.7;margin:0 0 10px}
.legal ul{display:grid;gap:7px;margin:10px 0 14px;padding-left:18px;list-style:disc}
.legal a{color:rgb(var(--accent-400));text-decoration:underline;text-underline-offset:2px}
.legal strong{color:rgb(var(--fg));font-weight:600}
.legal .num{font-family:'Space Grotesk','Inter',sans-serif;font-variant-numeric:tabular-nums}

/* ── Блог ──────────────────────────────────────────────────────────────────
   Тот же текстовый слой, что у политики: статья это такая же длинная страница,
   заводить ей второй набор типографики незачем. Своё здесь только листинг,
   хлебные крошки и блок призыва в конце статьи. */
.legal .lede{font-size:17px;line-height:1.55;color:rgb(var(--fg));margin:0 0 30px;max-width:62ch}
.crumbs{font-size:12.5px;color:rgb(var(--fg-dim));margin:0 0 14px;font-variant-numeric:tabular-nums}
.crumbs a{color:rgb(var(--fg-muted));text-decoration:none}
.crumbs a:hover{color:rgb(var(--fg))}

.post h2{font-size:21px}
.post h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.35;margin:26px 0 8px;color:rgb(var(--fg))}
.post p,.post li{font-size:16px;line-height:1.72}
.post blockquote{margin:20px 0;padding:14px 18px;border-left:3px solid rgb(var(--accent-500));background:rgb(var(--ink-800));border-radius:0 var(--r-chip) var(--r-chip) 0}
.post blockquote p{margin:0;color:rgb(var(--fg))}
.post code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:rgb(var(--ink-700));padding:2px 6px;border-radius:6px}
.post pre{overflow-x:auto;background:rgb(var(--ink-800));border:1px solid rgb(var(--ink-600));border-radius:var(--r-chip);padding:14px 16px}
.post pre code{background:none;padding:0}
.post img{max-width:100%;height:auto;border-radius:var(--r-chip);display:block;margin:20px 0}
.post table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px;display:block;overflow-x:auto}
.post th,.post td{text-align:left;padding:9px 12px;border-bottom:1px solid rgb(var(--ink-600));color:rgb(var(--fg-muted))}
.post th{color:rgb(var(--fg));font-weight:600;white-space:nowrap}

.post-cta{margin:44px 0 0;padding:22px;border:1px solid rgb(var(--ink-600));border-radius:var(--r-card);background:rgb(var(--ink-800));box-shadow:var(--shadow-card)}
.post-cta p{margin:0 0 14px;font-size:15px;color:rgb(var(--fg))}

.post-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:760px}
.post-card{display:block;padding:20px 22px;border:1px solid rgb(var(--ink-600));border-radius:var(--r-card);background:rgb(var(--ink-800));text-decoration:none;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.post-card:hover{border-color:rgb(var(--accent-500) / .5);transform:translateY(-2px)}
.post-card .meta{font-size:12.5px;color:rgb(var(--fg-dim));margin:0 0 6px;font-variant-numeric:tabular-nums}
.post-card h2{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;font-size:18px;line-height:1.3;margin:0 0 6px;padding:0;border:0;color:rgb(var(--fg))}
.post-card .dek{font-size:14.5px;color:rgb(var(--fg-muted));margin:0;line-height:1.6}
.post-list .empty p{color:rgb(var(--fg-dim))}
.feed{margin:28px 0 0;font-size:13px}
.feed a{color:rgb(var(--fg-muted))}
@media (prefers-reduced-motion:reduce){.post-card{transition:none}.post-card:hover{transform:none}}

/* Логотип в шапке служебных страниц: тело персонажа белое, на светлой теме оно
   сливается с фоном, поэтому под ним подложка с рамкой (как на главной). */
.mark .logo{flex:none;width:28px;height:28px;border-radius:50%;background:rgb(var(--ink-700));border:1px solid rgb(var(--ink-600));object-fit:cover}

.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;font-size:15px;text-decoration:none;padding:13px 22px;border-radius:var(--r-btn);border:1px solid transparent;white-space:nowrap;transition:background .18s var(--ease),border-color .18s var(--ease)}
.btn-primary{background:rgb(var(--accent-600));color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:rgb(var(--accent-500))}
.btn-ghost{border-color:rgb(var(--ink-500));color:rgb(var(--fg));background:rgb(var(--ink-800) / .7)}
.btn-ghost:hover{border-color:rgb(var(--accent-500) / .5)}

footer{border-top:1px solid rgb(var(--ink-600));padding:26px 0 32px;font-size:12.5px;color:rgb(var(--fg-dim));background:rgb(var(--ink-850))}
footer .f-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px}
footer a{color:rgb(var(--fg-muted));text-decoration:none}
footer a:hover{color:rgb(var(--fg))}
footer p{margin:0 0 4px;line-height:1.55}
@media (max-width:640px){.wrap{padding:0 18px}}