/* TurtleGuard — общая система для всех страниц: шрифты, токены, база,
   кнопки, чипы, метки, поля, переключатели, таблицы, выноски, диалоги,
   меню, тосты, палитра Ctrl K, появления. Светлая и тёмная темы по макету
   клиентской панели (2026-10): глубокий зелёный, мятное действие, тёплый
   песок для денег и объёма, плоские карточки с волосяной кромкой, мелкая
   фаска. Раскладки — в site.css, landing.css и app.css. Токены и правила:
   docs/DESIGN.md. */

/* ── шрифты: свои файлы (OFL), латиница + кириллица, вариативные ─────── */
/* Inter — шрифт макета, для текста и заголовков; ₽ и стрелок в его
   подмножествах нет, их добирают крошечные подмножества Onest. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic.woff2") format("woff2"); font-weight: 100 900; 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/onest-rub.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+20BD; }
@font-face { font-family: "Inter"; src: url("../fonts/onest-arrows.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+2190-2199; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); font-weight: 100 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-sym.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+20BD; }
/* Метрически подогнанные запасные: пока грузятся свои шрифты, текст набран
   системными с той же шириной и вертикалью — без сдвига (CLS). Числа сняты
   fontTools с woff2 против arial / cour. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.1%; ascent-override: 90.4%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("Courier"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* ── токены ─────────────────────────────────────────────────────────── */
/* Палитра макета клиентской панели (2026-10). Сырые токены через
   light-dark(); тема — это color-scheme (система; в dev/превью cookie theme →
   data-theme на <html>). Тёмная — из макета: страница #111a16, карточка
   темнее страницы, мята #5ac9a9 — действие и состояние, песок #d2b492 —
   деньги и объём, коралл — опасность. Светлая выведена из неё же с контрастом
   AA. Имена --neon* и --shell-2 оставлены ради совместимости: это мята и
   песок, ничего не светится. См. docs/DESIGN.md. */
:root {
  --bg: light-dark(#eef2ec, #111a16);
  --bg-2: light-dark(#e7ece5, #0f1713);
  --sf0: light-dark(#ffffff, #0e1d16);
  --sf1: light-dark(#e6ece4, #141f19);
  --sf2: light-dark(#f8faf6, #0c1912);
  --sf3: light-dark(#e0e7de, #17231b);
  --pop: light-dark(#ffffff, #17231b);
  --ink: light-dark(#14201a, #eceee5);
  --ink-2: light-dark(#34443a, #c3ccc5);
  --ink-3: light-dark(#4c5d52, #a3b0a7);
  --ink-4: light-dark(#5a6b60, #859a8b);
  --neon: light-dark(#17735d, #5ac9a9);
  --neon-2: light-dark(#115c4a, #79dabd);
  --neon-deep: light-dark(#0f4d3e, #1d7c65);
  --on-neon: light-dark(#f3fbf7, #0b1f17);
  --shell-2: light-dark(#7d5c33, #d2b492);
  --ok: light-dark(#1d6e43, #6fcf97);
  --amber: light-dark(#83560f, #d9a869);
  --red: light-dark(#ad4535, #e18474);
  --blue: light-dark(#2c628c, #86b6d8);
  --violet: light-dark(#7a4a8c, #c6a3d6);
  --tint: light-dark(#14201a, #e0eee4);
  /* серии графиков: мята, песок, сланец, шалфей, коралл */
  --c1: light-dark(#1f8a6e, #61d1b0);
  --c2: light-dark(#a07a48, #d2b492);
  --c3: light-dark(#3f79a6, #7fa9cc);
  --c4: light-dark(#6d8a3e, #a9bf86);
  --c5: light-dark(#c45a48, #e18474);
}
:root { --ribbons: 1; --ribbons-amt: 0.34; --scute-on: 0; --em: var(--neon); --sand: var(--shell-2); --coral: var(--red); }
:root {
  /* производные: линии и заливки — доля --tint (чернила темы); кромка
     макета rgba(224,238,228,.12) = --glass-line */
  --glass: var(--sf2);
  --glass-line: color-mix(in oklab, var(--tint) 12%, transparent);
  --glass-hi: transparent;
  --surface: var(--sf2);
  --surface-solid: var(--sf2);
  --surface-2: color-mix(in oklab, var(--tint) 5%, transparent);
  --surface-3: color-mix(in oklab, var(--tint) 9%, transparent);
  --field: var(--sf0);
  --line: color-mix(in oklab, var(--tint) 9%, transparent);
  --line-2: color-mix(in oklab, var(--tint) 14%, transparent);
  --line-3: color-mix(in oklab, var(--tint) 24%, transparent);
  --hi: transparent;
  --hi-c: var(--tint);
  --shadow-c: light-dark(#14201a, #000000);
  --jade-soft: color-mix(in oklab, var(--neon) 12%, transparent);
  --jade-ring: color-mix(in oklab, var(--neon) 38%, transparent);
  --glow: transparent;
  --amber-soft: color-mix(in oklab, var(--amber) 13%, transparent);
  --amber-ring: color-mix(in oklab, var(--amber) 38%, transparent);
  --red-soft: color-mix(in oklab, var(--red) 12%, transparent);
  --red-ring: color-mix(in oklab, var(--red) 38%, transparent);
  --ok-soft: color-mix(in oklab, var(--ok) 12%, transparent);
  --sand-soft: color-mix(in oklab, var(--shell-2) 12%, transparent);
  --scute: color-mix(in oklab, var(--tint) 4%, transparent);
  /* плоско: глубину даёт кромка; тень — только у всплывающих слоёв */
  --shadow-2: none;
  --shadow-pop: 0 14px 40px light-dark(rgb(20 32 26 / 0.16), rgb(0 0 0 / 0.42));
  --scrim: light-dark(rgb(20 32 26 / 0.3), rgb(5 10 8 / 0.66));
  /* статусы: форма + цвет + текст */
  --up: var(--ok); --slow: var(--amber); --down: var(--red); --idle: var(--ink-3);
  --f-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: var(--f-sans);
  --f-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Consolas, monospace;
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.089 25%, 1.085 27.5%, 1.053 32.6%, 0.996 41.4%, 0.985 46.4%, 1.001 60.9%, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  /* фаска макета: 3–5px у кнопок, полей и карточек, 7px у всплывающих */
  --r-xs: 3px; --r-sm: 4px; --r-md: 5px; --r-lg: 7px;
  color-scheme: light dark;
}
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }

/* ── база ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; interpolate-size: allow-keywords; }
body { margin: 0; color: var(--ink); background: transparent; font: 400 16px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100vh; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }
input[type=checkbox], input[type=radio] { accent-color: var(--neon); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
code, kbd, samp, pre { font-family: var(--f-mono); font-variant-ligatures: none; }
.mono { font-family: var(--f-mono); letter-spacing: -0.01em; }
.sans { font-family: var(--f-sans); }
.num, .r { font-variant-numeric: tabular-nums; }
.dim, .subtle { color: var(--ink-3); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.link, .prose-link { color: var(--neon); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--neon) 35%, transparent); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
/* слово-акцент заголовка: тем же шрифтом, мятой (в макете нет второго начертания) */
em.i { color: var(--em, inherit); font-style: normal; font-weight: inherit; }
.sr, .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 400; padding: 8px 14px; border-radius: var(--r-sm); background: var(--neon); color: var(--on-neon); font-weight: 500; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: color-mix(in oklab, var(--neon) 35%, transparent); }
[hidden] { display: none !important; }

/* фон: узор щитков панциря (соты марки), почти невидимый, гаснет книзу.
   Цвет — --scute; палитра может выключить узор (--scute-on: 0). */
:root { --hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  --scute-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='132' viewBox='0 0 38 66'%3E%3Cpath d='M19 0 38 11v22L19 44 0 33V11zM19 44v22' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E"); }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--scute-on, 1); background: var(--scute);
  -webkit-mask: var(--scute-img) 0 0 / 76px 132px, linear-gradient(#000, transparent 75%); -webkit-mask-composite: source-in;
  mask: var(--scute-img) 0 0 / 76px 132px, linear-gradient(#000, transparent 75%); mask-composite: intersect; }
#ribbons { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; display: block; opacity: 0; transition: opacity 1.2s var(--out); }
#ribbons.on { opacity: 1; }
#ribbons-fallback { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--bg); }
/* без WebGL и под reduced motion: тот же пучок течений, нарисованный один раз (коралл входит сверху, мята выходит, песок к краю) */
body:has(#ribbons) #ribbons-fallback::before { --rib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M822 1530 L801 1429 787 1328 781 1226 781 1125 789 1024 803 922 825 821 854 720 825 619 803 518 789 416 781 315 781 214 787 112 801 11 822 -90' stroke-opacity='0.30'/%3E%3Cpath d='M888 1530 L856 1429 832 1328 816 1226 808 1125 808 1024 816 922 832 821 855 720 832 619 816 518 808 416 808 315 816 214 832 112 856 11 888 -90' stroke-opacity='0.40'/%3E%3Cpath d='M953 1530 L910 1429 876 1328 851 1226 835 1125 827 1024 828 922 838 821 857 720 838 619 828 518 827 416 835 315 851 214 876 112 910 11 953 -90' stroke-opacity='0.50'/%3E%3Cpath d='M1019 1530 L965 1429 921 1328 886 1226 861 1125 846 1024 840 922 845 821 858 720 845 619 840 518 846 416 861 315 886 214 921 112 965 11 1019 -90' stroke-opacity='0.60'/%3E%3Cpath d='M1085 1530 L1020 1429 965 1328 922 1226 888 1125 865 1024 853 922 851 821 860 720 851 619 853 518 865 416 888 315 922 214 965 112 1020 11 1085 -90' stroke-opacity='0.70'/%3E%3Cpath d='M1151 1530 L1075 1429 1010 1328 957 1226 915 1125 884 1024 865 922 858 821 861 720 858 619 865 518 884 416 915 315 957 214 1010 112 1075 11 1151 -90' stroke-opacity='0.80'/%3E%3Cpath d='M1216 1530 L1129 1429 1055 1328 992 1226 942 1125 904 1024 878 922 864 821 863 720 864 619 878 518 904 416 942 315 992 214 1055 112 1129 11 1216 -90' stroke-opacity='0.90'/%3E%3Cpath d='M1282 1530 L1184 1429 1099 1328 1027 1226 968 1125 923 1024 890 922 871 821 864 720 871 619 890 518 923 416 968 315 1027 214 1099 112 1184 11 1282 -90' stroke-opacity='1.00'/%3E%3Cpath d='M1348 1530 L1239 1429 1144 1328 1063 1226 995 1125 942 1024 903 922 877 821 865 720 877 619 903 518 942 416 995 315 1063 214 1144 112 1239 11 1348 -90' stroke-opacity='0.90'/%3E%3Cpath d='M1413 1530 L1293 1429 1188 1328 1098 1226 1022 1125 961 1024 915 922 884 821 867 720 884 619 915 518 961 416 1022 315 1098 214 1188 112 1293 11 1413 -90' stroke-opacity='0.80'/%3E%3Cpath d='M1479 1530 L1348 1429 1233 1328 1133 1226 1049 1125 980 1024 927 922 890 821 868 720 890 619 927 518 980 416 1049 315 1133 214 1233 112 1348 11 1479 -90' stroke-opacity='0.70'/%3E%3Cpath d='M1545 1530 L1403 1429 1277 1328 1168 1226 1076 1125 999 1024 940 922 897 821 870 720 897 619 940 518 999 416 1076 315 1168 214 1277 112 1403 11 1545 -90' stroke-opacity='0.60'/%3E%3Cpath d='M1611 1530 L1458 1429 1322 1328 1204 1226 1102 1125 1019 1024 952 922 903 821 871 720 903 619 952 518 1019 416 1102 315 1204 214 1322 112 1458 11 1611 -90' stroke-opacity='0.50'/%3E%3Cpath d='M1676 1530 L1512 1429 1366 1328 1239 1226 1129 1125 1038 1024 965 922 910 821 873 720 910 619 965 518 1038 416 1129 315 1239 214 1366 112 1512 11 1676 -90' stroke-opacity='0.40'/%3E%3Cpath d='M1742 1530 L1567 1429 1411 1328 1274 1226 1156 1125 1057 1024 977 922 916 821 874 720 916 619 977 518 1057 416 1156 315 1274 214 1411 112 1567 11 1742 -90' stroke-opacity='0.30'/%3E%3C/g%3E%3C/svg%3E"); content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg) 30%, transparent 50%, transparent 82%, color-mix(in oklab, var(--shell-2) 70%, transparent)), linear-gradient(180deg, var(--red) 6%, var(--neon) 46%, var(--neon) 70%, var(--shell-2) 100%); opacity: calc(var(--ribbons-amt) * 1.2);
  -webkit-mask: var(--rib) 50% 0 / cover no-repeat; mask: var(--rib) 50% 0 / cover no-repeat; }

.wrap { width: min(1200px, 100% - 64px); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: calc(100% - 32px); } }

/* ── марка и бренд ──────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.tile { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--neon); box-shadow: none; flex: none; }
.tile svg { width: 60%; height: 60%; color: var(--on-neon); }
.tg-mark { color: var(--neon); }

/* ── публичная шапка и подвал (лендинг и внутренние страницы) ───────── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.hdr.solid { background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--glass-line); }
.hdr .wrap { display: flex; align-items: center; height: 72px; gap: 24px; }
.hdr-nav { margin-inline: auto; display: flex; gap: 30px; font-size: 14.5px; color: var(--ink-2); }
.hdr-nav a { transition: color .2s; white-space: nowrap; }
.hdr-nav a:hover, .hdr-nav a[aria-current] { color: var(--ink); }
.hdr-nav a[aria-current] {  }
.hdr-m { display: none; }
.hdr .right { display: flex; gap: 10px; align-items: center; }
.lang { font: 500 12px/1 var(--f-mono); text-transform: uppercase; color: var(--ink-3); padding: 8px 6px; border-radius: var(--r-sm); transition: color .15s; }
.lang:hover { color: var(--ink); }
.hdr .burger { display: none; }
/* меню «Продукты» в шапке: details[data-menu], без JS раскрывается по клику */
.hdr-menu { position: relative; }
.hdr-menu summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; white-space: nowrap; transition: color .2s; border-radius: var(--r-sm); }
.hdr-menu summary::-webkit-details-marker { display: none; }
.hdr-menu summary:hover, .hdr-menu summary.cur, .hdr-menu[open] summary { color: var(--ink); }
.hdr-menu .chev { width: 12px; height: 12px; transition: rotate .25s var(--spring); }
.hdr-menu[open] .chev { rotate: 180deg; }
.hdr-pop { position: absolute; top: calc(100% + 18px); left: 50%; translate: -50% 0; z-index: 70; width: min(640px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--r-lg); border: 1px solid var(--glass-line); background: var(--pop); box-shadow: var(--shadow-pop); }
.hdr-pop a { display: grid; gap: 3px; height: 100%; padding: 10px 12px; border-radius: var(--r-md); white-space: normal; color: var(--ink-2); }
.hdr-pop a:hover, .hdr-pop a:focus-visible, .hdr-pop a[aria-current] { background: var(--surface-2); color: var(--ink); }
.hdr-pop a b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.hdr-pop a.big b { font-size: 15.5px; }
.hdr-pop a small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.hdr-pop .tag { height: 18px; padding: 0 6px; font-size: 10.5px; }
.pub { padding-top: 72px; }
.pfoot { margin-top: 100px; padding-bottom: 34px; }
.statusline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 400 12.5px var(--f-mono); color: var(--ink-3); padding: 18px 0; border-top: 1px solid var(--glass-line); }
.statusline > *::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 9px; box-shadow: none; vertical-align: 1px; }
.statusline a:hover { color: var(--ink); }
.foot-g { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding: 34px 0 30px; border-top: 1px solid var(--glass-line); }
.foot-g .about p { color: var(--ink-3); font-size: 14px; margin-top: 14px; max-width: 30em; }
.foot-g h2 { font: 500 12px var(--f-sans); color: var(--ink-3); margin-bottom: 12px; }
.foot-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.foot-g ul a { color: var(--ink-2); transition: color .15s; }
.foot-g ul a:hover { color: var(--neon); }
.pfoot .copy { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; height: auto; padding: 18px 0 0; border: 0; border-top: 1px solid var(--glass-line); border-radius: 0; background: none; font: 400 12px var(--f-mono); color: var(--ink-3); cursor: auto; }
.pfoot .copy a:hover { color: var(--neon); }
@media (max-width: 1100px) { .hdr-nav { gap: 20px; font-size: 14px; } }
@media (max-width: 960px) {
  .hdr .burger { display: grid; margin-right: -6px; }
  .hdr .lang, .hdr .hide-s { display: none; }
  .hdr-nav { position: fixed; inset: 72px 12px auto; z-index: 60; display: grid; gap: 2px; padding: 10px; margin: 0; border-radius: var(--r-lg); border: 1px solid var(--glass-line); background: var(--pop); box-shadow: var(--shadow-pop); font-size: 16px; opacity: 0; translate: 0 -8px; pointer-events: none; visibility: hidden; transition: opacity .2s, translate .45s var(--spring), visibility 0s .2s; }
  .hdr-nav a { padding: 11px 12px; border-radius: var(--r-md); }
  .hdr-nav a:hover { background: var(--surface-2); }
  .hdr-m { display: grid; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .hdr-menu summary { display: flex; padding: 11px 12px; border-radius: var(--r-md); }
  .hdr-menu summary:hover { background: var(--surface-2); }
  .hdr-pop { position: static; translate: none; width: auto; grid-template-columns: 1fr; padding: 0 0 4px 10px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .hdr-pop a small { display: none; }
  .nav-open .hdr-nav { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition: opacity .2s, translate .45s var(--spring), visibility 0s; }
  .nav-open .hdr { background: color-mix(in oklab, var(--sf1) 80%, transparent); backdrop-filter: blur(16px); }
  .foot-g { grid-template-columns: 1fr 1fr; }
  .foot-g .about { grid-column: 1 / -1; }
}

/* ── чип / метка ────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 9px; height: 28px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--glass-line); background: var(--sf2); font: 400 12.5px/1 var(--f-sans); color: var(--ink-2); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: none; flex: none; }
.chip.warn::before, .chip.slow::before { background: var(--amber); box-shadow: none; }
.chip.down::before { background: var(--red); box-shadow: none; }
.chip.plain::before { display: none; }
.chip.sq { border-radius: var(--r-sm); border-color: var(--line-2); }
.chip.sq::before { background: var(--neon); }
a.chip:hover { border-color: var(--line-3); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips .chip::before { display: none; }

/* ── кнопки ─────────────────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; isolation: isolate; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 22px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--sf2); color: var(--ink); font: 500 15px/1 var(--f-sans); white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .5s var(--spring), border-color .2s, color .3s, background-color .2s, box-shadow .3s; }
.btn:active { transform: scale(0.97); }
.btn:hover { border-color: var(--line-3); background: var(--sf3); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-neon, .btn-primary, .btn-dye { background: var(--neon); color: var(--on-neon); border-color: transparent; }
.btn-neon:hover, .btn-primary:hover, .btn-dye:hover { border-color: transparent; background: var(--neon-2); }
.btn-fill::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--out); border-radius: inherit; }
.btn-fill:hover::after { transform: scaleX(1); }
.btn-fill:hover { color: var(--on-neon); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; backdrop-filter: none; color: var(--ink-2); }
.btn-ghost:hover { background: color-mix(in oklab, var(--tint) 6%, transparent); border-color: transparent; color: var(--ink); }
.btn-danger, .btn.danger { color: var(--red); border-color: var(--red-ring); background: transparent; }
.btn-danger:hover, .btn.danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.btn-ghost.danger { border-color: transparent; }
/* the confirming button of a destructive dialog */
.btn-primary.danger, .btn-neon.danger { color: var(--bg); background: var(--red); border-color: transparent; }
.btn-primary.danger:hover, .btn-neon.danger:hover { color: var(--bg); background: color-mix(in oklab, var(--red) 85%, var(--ink)); }
.btn-sm { height: 34px; padding: 0 15px; font-size: 13.5px; gap: 7px; }
.btn-xs { height: 28px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.btn-xs svg { width: 13px; height: 13px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; pointer-events: none; }
.btn .tri { width: 0; height: 0; border-left: 7px solid currentColor; border-block: 4.5px solid transparent; }
.btn .htmx-indicator { display: none; }
.btn.htmx-request .htmx-indicator { display: inline-block; }
.btn.htmx-request { opacity: .7; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions.end { justify-content: flex-end; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--neon); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--neon) 35%, transparent); text-underline-offset: 3px; }
.icon-btn { position: relative; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; flex: none; }
.icon-btn:hover, .icon-btn[aria-expanded=true] { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-3); cursor: pointer; font-size: 20px; line-height: 1; transition: color .15s, background-color .15s; flex: none; }
.x:hover { color: var(--ink); background: var(--surface-2); }

/* ── стекло ─────────────────────────────────────────────────────────── */
.glass { position: relative; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-line); }

/* ── метки, точки, состояния ────────────────────────────────────────── */
kbd { font: 500 11px/1 var(--f-mono); padding: 3px 6px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--sf2); color: var(--ink-3); }
.lbl-m { font: 500 12px/1.4 var(--f-sans); color: var(--ink-3); }
.tag, .badge { --c: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font: 500 11.5px/1 var(--f-sans); color: var(--c); background: color-mix(in oklab, var(--tint) 6%, transparent); border: 1px solid var(--glass-line); white-space: nowrap; vertical-align: middle; letter-spacing: 0; }
.tag.neon, .tag.jade, .badge.dye { --c: var(--neon); background: var(--jade-soft); border-color: color-mix(in oklab, var(--neon) 25%, transparent); }
/* money and volume: sand */
.tag.sand, .badge.sand { --c: var(--shell-2); background: var(--sand-soft); border-color: color-mix(in oklab, var(--shell-2) 28%, transparent); }
.badge.up { --c: var(--ok); background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
.tag.amber, .badge.slow, .badge.info { --c: var(--amber); background: color-mix(in oklab, var(--amber) 10%, transparent); border-color: color-mix(in oklab, var(--amber) 25%, transparent); }
.badge.warn { --c: var(--amber); background: var(--amber-soft); border-color: var(--amber-ring); }
.badge.bad { --c: var(--red); background: var(--red-soft); border-color: var(--red-ring); }
.tag.red, .badge.down { --c: var(--red); background: var(--red-soft); border-color: color-mix(in oklab, var(--red) 30%, transparent); }
.badge.info { --c: var(--blue); background: color-mix(in oklab, var(--blue) 10%, transparent); border-color: color-mix(in oklab, var(--blue) 25%, transparent); }
.badge.fill { background: var(--c); color: var(--bg); border-color: transparent; }
.badge.dash { border-style: dashed; }
.tag svg, .badge svg { width: 11px; height: 11px; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-sm); font: 500 11.5px/1 var(--f-sans); letter-spacing: 0; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: none; flex: none; }
.pill.ok, .pill.up { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 22%, transparent); }
.pill.warn, .pill.slow { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in oklab, var(--amber) 22%, transparent); }
.pill.bad, .pill.down { color: var(--red); background: var(--red-soft); border-color: var(--red-ring); }
.pill.bad .dot, .live-dot, .st-live { position: relative; }
.pill.bad .dot::after, .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; animation: ping 1.8s var(--out) infinite; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
@keyframes ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: none; flex: none; display: inline-block; }
.dot.amber { background: var(--amber); box-shadow: none; } .dot.red { background: var(--red); box-shadow: none; } .dot.off { background: transparent; box-shadow: none; border: 1.5px solid var(--ink-4); }
.dot.live { animation: dotp 1.6s ease-in-out infinite; }
@keyframes dotp { 50% { opacity: .35; } }
/* .st — состояние точкой: форма + цвет (+ текст рядом); круглые, как в макете. */
.st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: .08em; margin-right: .5em; flex: none; }
.st-up { background: var(--ok); box-shadow: none; }
.st-slow { background: var(--amber); box-shadow: none; }
.st-down { background: var(--red); box-shadow: none; }
.st-none { background: transparent; border: 1.5px solid var(--ink-3); }
/* a state mark with text that may wrap: the text wraps beside the mark */
.st-line { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.st-down.st-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--red); animation: ping 1.8s var(--out) infinite; }
.act { font: 500 11.5px/1 var(--f-sans); white-space: nowrap; color: var(--ink-2); }
.act::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--c, var(--ink-3)); box-shadow: none; vertical-align: .05em; }
.act.pass, .act.allow { --c: var(--ok); } .act.cache { --c: var(--blue); } .act.challenge { --c: var(--amber); } .act.block { --c: var(--red); } .act.log { --c: var(--ink-3); } .act.off { --c: transparent; }
.act.off::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.bar { display: block; height: 4px; margin-top: 5px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w, 0); background: var(--c, var(--neon)); border-radius: inherit; box-shadow: none; }
.pending { color: var(--ink-3); }
.pending::after { content: "…"; animation: dots 1s steps(4) infinite; display: inline-block; width: 1ch; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.25ch; } }

/* ── поля ───────────────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
/* a fieldset that only groups (no frame of its own) */
fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.label { padding: 0; margin-bottom: 7px; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field > span, .field > label, .field > .label, .label { font: 500 12.5px/1.3 var(--f-sans); color: var(--ink-3); }
.field .hint, .hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.field .err { margin: 0; font-size: 12.5px; color: var(--red); }
/* fields side by side start on one line: a hint under one never pushes its
   neighbour's label down */
.row-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: start; }
.input, .field :is(input:not([type=checkbox], [type=radio], [type=range], [type=hidden]), select, textarea), .inline-form :is(input:not([type=checkbox], [type=radio], [type=hidden]), select), .afilter :is(input, select) {
  height: 44px; width: 100%; min-width: 0; padding: 0 15px; border-radius: var(--r-md); border: 1px solid color-mix(in oklab, var(--tint) 12%, transparent); background-color: var(--field); color: var(--ink); font: 400 14.5px/1.3 var(--f-sans); outline: none; caret-color: var(--neon); transition: border-color .2s, box-shadow .2s; }
.field textarea, textarea.input { height: auto; min-height: 104px; padding: 11px 15px; resize: vertical; line-height: 1.5; }
.input.mono, .field :is(input, select, textarea).mono, .field .mono, textarea.mono, .inline-form > input.mono { font: 400 13px/1.5 var(--f-mono); }
.input::placeholder, .field :is(input, textarea)::placeholder, .inline-form input::placeholder { color: var(--ink-4); }
.input:hover, .field :is(input, select, textarea):hover { border-color: color-mix(in oklab, var(--tint) 20%, transparent); }
.input:focus, .field :is(input, select, textarea):focus, .inline-form :is(input, select):focus, .afilter :is(input, select):focus { border-color: color-mix(in oklab, var(--neon) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--neon) 12%, transparent); }
select.input, .field select, .inline-form select, .afilter select { appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--surface-solid); color: var(--ink); }
.field input[type=number] { font-family: var(--f-mono); font-size: 13.5px; }
.field :is(input, select, textarea):user-invalid, .field.is-error :is(input, select, textarea) { border-color: var(--red); }
.field.is-error, .shake { animation: shake .32s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 20%, 60% { translate: -3px 0; } 40%, 80% { translate: 3px 0; } }
.field .pre { display: flex; align-items: stretch; }
.field .pre > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid color-mix(in oklab, var(--tint) 12%, transparent); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--surface-2); font: 400 12.5px/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.field .pre > input { border-radius: 0 var(--r-md) var(--r-md) 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.inline-form > :is(input:not([type=checkbox], [type=radio], [type=hidden]), select) { width: auto; flex: 1 1 10rem; height: 36px; font-size: 13.5px; border-radius: var(--r-sm); }
.inline-form > select { flex: 0 1 9rem; }
.check, .ck { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input, .ck input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--neon-2); flex: none; }
.code-input { width: 100%; height: 60px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--tint) 12%, transparent); border-radius: var(--r-md); background: var(--field); color: var(--ink); font: 500 26px/1 var(--f-mono); letter-spacing: .5em; text-align: center; caret-color: var(--neon); outline: none; transition: border-color .2s, box-shadow .2s; }
.code-input:focus { border-color: color-mix(in oklab, var(--neon) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--neon) 12%, transparent); }
.form-err { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--red-ring); background: var(--red-soft); font-size: 14px; color: var(--ink); }
.pw-meter, .meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.pw-meter i, .meter i { height: 4px; border-radius: 4px; background: color-mix(in oklab, var(--tint) 10%, transparent); transition: background .3s, box-shadow .3s; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--amber); }
.pw-meter[data-s="3"] i:nth-child(-n+3), .pw-meter[data-s="4"] i { background: var(--ok); box-shadow: none; }

/* переключатель: <input class="switch" type="checkbox" role="switch"> или .sw > input + i */
.switch { appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0; border: 1px solid var(--glass-line); border-radius: 99px; background: color-mix(in oklab, var(--tint) 10%, transparent); cursor: pointer; transition: background-color .25s, border-color .25s, box-shadow .25s; vertical-align: middle; }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform .5s var(--spring), background-color .2s; }
.switch:checked { background: var(--neon); border-color: transparent; box-shadow: none; }
.switch:checked::before { transform: translateX(16px); background: var(--on-neon); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.switch.htmx-request { opacity: .6; }
.sw { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 99px; background: color-mix(in oklab, var(--tint) 10%, transparent); border: 1px solid var(--glass-line); transition: all .25s; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform .5s var(--spring), background .2s; }
.sw input:checked + i { background: var(--neon); border-color: transparent; box-shadow: none; }
.sw input:checked + i::after { transform: translateX(16px); background: var(--on-neon); }
.sw input:focus-visible + i { outline: 2px solid var(--neon); outline-offset: 2px; }
/* сегменты */
.seg { justify-self: start; max-width: 100%; display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--field); border: 1px solid var(--glass-line); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span, .seg a { display: block; padding: 6px 14px; border-radius: var(--r-sm); font: 500 12.5px/1.2 var(--f-sans); color: var(--ink-3); white-space: nowrap; transition: all .25s; }
.seg label:hover span, .seg a:hover { color: var(--ink); }
.seg input:checked + span, .seg a[aria-current] { background: var(--neon); color: var(--on-neon); box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--neon); }
.seg input:disabled + span { opacity: .45; cursor: not-allowed; }
/* карточки выбора: режимы, шифрование, тарифы, способы оплаты */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 12px; }
.choice { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color .2s, box-shadow .3s, transform .45s var(--spring); }
.choice:hover { transform: translateY(-2px); border-color: var(--line-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: color-mix(in oklab, var(--neon) 45%, transparent); background: linear-gradient(color-mix(in oklab, var(--neon) 6%, transparent), color-mix(in oklab, var(--neon) 6%, transparent)), var(--surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--neon) 25%, transparent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--neon); outline-offset: 2px; }
.choice:has(input:disabled) { cursor: not-allowed; transform: none; border-style: dashed; background: none; }
.choice:has(input:disabled) > :not(.lock) { opacity: .6; }
.choice-t { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.choice-t::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-3); flex: none; transition: border .2s, box-shadow .2s; }
.choice:has(input:checked) .choice-t::before { border: 5px solid var(--neon); box-shadow: none; }
.choice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.choice .meter { display: flex; gap: 3px; margin-top: 4px; }
.choice .meter i { width: 18px; height: 4px; flex: none; border-radius: 2px; background: var(--surface-3); }
.choice .meter i.on { background: var(--neon); box-shadow: none; }
.choice .lock { justify-self: start; margin-top: 4px; font-size: 12.5px; color: var(--amber); }

/* ── таблицы ────────────────────────────────────────────────────────── */
.table { overflow-x: auto; scrollbar-width: thin; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--sf2); }
/* a table wider than its box shows a soft edge on the side that scrolls (covers move with the content, edges stay) */
.table { --tb: var(--sf2); background:
  linear-gradient(90deg, var(--tb) 45%, transparent) 0 0 / 40px 100% no-repeat local,
  linear-gradient(270deg, var(--tb) 45%, transparent) 100% 0 / 40px 100% no-repeat local,
  linear-gradient(90deg, color-mix(in oklab, var(--tint) 16%, transparent), transparent) 0 0 / 16px 100% no-repeat scroll,
  linear-gradient(270deg, color-mix(in oklab, var(--tint) 16%, transparent), transparent) 100% 0 / 16px 100% no-repeat scroll,
  var(--tb); }
.table table, table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.table th, .tbl th { text-align: left; font: 500 12px/1.3 var(--f-sans); color: var(--ink-3); padding: 11px 16px; white-space: nowrap; }
.table thead th { position: sticky; top: 0; z-index: 1; background: var(--sf1); }
.table tbody th { font: 500 13.5px/1.45 var(--f-sans); color: var(--ink); }
.table td, .tbl td { padding: 11px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.table.mid td, .tbl td { vertical-align: middle; }
/* a row header aligns with its row's cells */
.table tbody th { vertical-align: top; }
.table.mid tbody th, .tbl tbody th { vertical-align: middle; }
.table tbody tr, .tbl tbody tr { transition: background-color .12s; }
.table tbody tr:hover, .tbl tbody tr:hover { background: color-mix(in oklab, var(--neon) 3.5%, transparent); }
.table td.tight, .table th.tight { width: 1%; white-space: nowrap; }
.table .r, .tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.table.scroll { max-height: 34rem; overflow: auto; }
/* secondary columns step aside on phones; the row link keeps the details */
@media (max-width: 640px) { .table .col-s, .table:has(.col-s) .site-name > .fav { display: none; } }
.table a.row-link, .tbl a.row-link { color: var(--ink); font-weight: 500; }
.table a.row-link:hover, .tbl a.row-link:hover { color: var(--neon); }
.table tfoot td { font-weight: 500; background: var(--surface-2); }
.table caption { padding: 12px 16px; text-align: left; font: 500 12px var(--f-sans); color: var(--ink-3); caption-side: top; }
.table .mono, .tbl .mono { font-size: 12.5px; }
.table td .actions, .tbl td .actions { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
tr.is-down td:first-child { box-shadow: inset 2px 0 0 var(--red); }
tr.is-slow td:first-child { box-shadow: inset 2px 0 0 var(--amber); }

/* ── пары ключ — значение ───────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 14px; }
.kv dt { font: 400 12.5px/1.7 var(--f-sans); color: var(--ink-3); }
.kv dd { margin: 0; font: 400 13px/1.6 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.kv dd.sans { font: 400 14px/1.6 var(--f-sans); }
/* pairs grouped in <div>s: a grid of label-over-value cells that fits any width */
.kv:has(> div) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 14px 20px; }
.kv > div { display: grid; gap: 2px; align-content: start; min-width: 0; }

/* ── выноски ────────────────────────────────────────────────────────── */
.callout { --c: var(--neon); display: block; margin-top: 16px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in oklch, var(--c) 30%, transparent); background: linear-gradient(color-mix(in oklab, var(--c) 6%, transparent), color-mix(in oklab, var(--c) 6%, transparent)); font-size: 14px; color: var(--ink-2); }
.callout-t { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-weight: 500; color: var(--ink); }
.callout-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: none; flex: none; }
.callout-t svg { display: none; }
.callout > p { margin: 4px 0 0; }
.callout > p:first-child { margin-top: 0; }
.callout-warning, .callout-caution { --c: var(--red); }
.callout-tip { --c: var(--neon); }
.callout-important { --c: var(--blue); }
.callout-slow { --c: var(--amber); }
.callout .actions { margin-top: 12px; }

/* ── код ────────────────────────────────────────────────────────────── */
.code, .cblock { position: relative; margin-top: 16px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--glass-line); background: color-mix(in oklab, var(--sf0) 80%, transparent); box-shadow: none; }
.code-name, .cblock-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 16px; border-bottom: 1px solid var(--glass-line); font: 400 11.5px var(--f-mono); color: var(--ink-3); }
.copy { height: 28px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--glass-line); background: color-mix(in oklab, var(--tint) 4%, transparent); color: var(--ink-2); font: 400 11.5px var(--f-mono); cursor: pointer; transition: all .2s; }
.copy:hover { border-color: color-mix(in oklab, var(--neon) 40%, transparent); color: var(--neon); }
.copy.done { color: var(--on-neon); background: var(--neon); border-color: transparent; }
.code pre, .cblock pre, pre.apre { margin: 0; padding: 14px 18px; overflow-x: auto; font: 400 13px/1.7 var(--f-mono); color: var(--ink); tab-size: 2; scrollbar-width: thin; }
pre.cmd, .cmd code { user-select: all; }
.ic { font: 400 .88em var(--f-mono); padding: 1px 6px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--tint) 7%, transparent); border: 1px solid var(--glass-line); overflow-wrap: anywhere; }
/* a code alone in a table cell is an identifier: keep it whole, the table scrolls */
.table td > code.ic:only-child { white-space: nowrap; overflow-wrap: normal; }

/* ── пустые состояния ───────────────────────────────────────────────── */
.empty { display: grid; justify-items: start; gap: 8px; padding: 34px 26px; border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--ink-3); }
.empty.center { justify-items: center; text-align: center; }
/* inside a panel the panel is the frame: no second, dashed one */
.panel > .empty { border: 0; border-radius: 0; padding: 18px 22px 26px; }
.panel-b > .empty { border: 0; border-radius: 0; padding: 12px 0; }
.empty svg { width: 40px; height: 44px; color: var(--neon); opacity: .7; }
.empty h3 { color: var(--ink); font-size: 16px; font-weight: 500; }
.empty p { margin: 0; max-width: 36rem; font-size: 14px; }
.empty .actions { margin-top: 8px; }

/* ── подсказки: data-tip, без JS ────────────────────────────────────── */
a.gl { position: relative; color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: color-mix(in oklab, var(--neon) 60%, transparent); cursor: help; }
a.gl:hover, a.gl:focus-visible { color: var(--neon); }
a.gl::after, .tip::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: max-content; max-width: min(24rem, calc(100vw - 2rem)); padding: 9px 12px; font: 400 13px/1.5 var(--f-sans); text-align: left; white-space: normal; color: var(--ink); background: var(--pop); border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; translate: 0 -3px; pointer-events: none; transition: opacity .12s, translate .12s, visibility 0s .12s; }
.tip { position: relative; cursor: help; }
.tip.q { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line-2); border-radius: 50%; font: 500 10px/1 var(--f-mono); color: var(--ink-3); vertical-align: .1em; }
a.gl:is(:hover, :focus-visible)::after, .tip:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .12s .12s, translate .12s .12s, visibility 0s .12s; }
@supports (anchor-name: --gl) {
  a.gl:is(:hover, :focus-visible), .tip:is(:hover, :focus-visible) { anchor-name: --gl; }
  a.gl:is(:hover, :focus-visible)::after, .tip:is(:hover, :focus-visible)::after { position: fixed; position-anchor: --gl; top: anchor(bottom); left: anchor(left); margin-top: 8px; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}

/* ── диалоги: <dialog class="modal"> ────────────────────────────────── */
dialog.modal { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--glass-line); border-radius: var(--r-lg); background: var(--pop); color: var(--ink); box-shadow: var(--shadow-pop);
  opacity: 0; translate: 0 10px; transition: opacity .2s, translate .45s var(--spring), display .2s allow-discrete, overlay .2s allow-discrete; overflow: auto; overscroll-behavior: contain; }
dialog.modal[open] { opacity: 1; translate: 0 0; }
@starting-style { dialog.modal[open] { opacity: 0; translate: 0 10px; } }
dialog.modal::backdrop, dialog.palette::backdrop { background: var(--scrim); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s, display .2s allow-discrete, overlay .2s allow-discrete; }
dialog.modal[open]::backdrop, dialog.palette[open]::backdrop { opacity: 1; }
@starting-style { dialog.modal[open]::backdrop, dialog.palette[open]::backdrop { opacity: 0; } }
.modal-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 4px 24px; }
.modal-h h2 { font-size: 20px; letter-spacing: -0.02em; }
.modal-h p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); }
.modal-b { padding: 16px 24px; display: grid; gap: 16px; }
.modal-f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
dialog.modal.danger { border-color: var(--red-ring); }
dialog.modal.danger .modal-h h2 { color: var(--red); }

/* ── меню-поповеры ──────────────────────────────────────────────────── */
.menu[popover] { margin: 0; padding: 6px; min-width: 15rem; max-width: min(22rem, calc(100vw - 16px)); border: 1px solid var(--glass-line); border-radius: var(--r-lg); background: var(--pop); color: var(--ink); box-shadow: var(--shadow-pop);
  position: fixed; inset: 64px 16px auto auto; opacity: 0; translate: 0 -4px; transition: opacity .15s, translate .3s var(--spring), display .15s allow-discrete, overlay .15s allow-discrete; }
.menu[popover]:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .menu[popover]:popover-open { opacity: 0; translate: 0 -4px; } }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); font: 400 13.5px/1.3 var(--f-sans); text-align: left; cursor: pointer; transition: background-color .12s, color .12s; }
.menu a:hover, .menu button:hover, .menu a:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.menu hr { margin: 6px 0; }
.menu form { margin: 0; }
.menu .menu-h { padding: 8px 10px 6px; font: 500 11.5px/1.4 var(--f-sans); color: var(--ink-3); }
.menu .menu-h b { display: block; font: 500 13.5px/1.3 var(--f-sans); color: var(--ink); }
.menu small { color: var(--ink-3); font: 400 11px var(--f-mono); }
.menu .check-mark { margin-left: auto; color: var(--neon); }

/* ── тосты ──────────────────────────────────────────────────────────── */
.toasts { position: fixed; left: 50%; bottom: 26px; z-index: 300; display: grid; gap: 8px; justify-items: center; translate: -50% 0; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { --c: var(--ok); display: flex; gap: 10px; align-items: center; padding: 11px 18px 11px 14px; border-radius: var(--r-sm); background: var(--pop); border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; box-shadow: var(--shadow-pop); pointer-events: auto; transition: opacity .25s, translate .6s var(--spring); }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: none; flex: none; }
@starting-style { .toast { opacity: 0; translate: 0 30px; } }
.toast.out { opacity: 0; translate: 0 20px; }
.toast.down { --c: var(--red); } .toast.slow { --c: var(--amber); } .toast.info { --c: var(--blue); }

/* ── Ctrl K ─────────────────────────────────────────────────────────── */
dialog.palette { width: min(640px, calc(100vw - 32px)); margin: 13vh auto auto; padding: 0; border: 1px solid var(--glass-line); border-radius: var(--r-lg); overflow: hidden; background: var(--pop); color: var(--ink); box-shadow: var(--shadow-pop);
  opacity: 0; translate: 0 -10px; scale: .98; transition: opacity .2s, translate .5s var(--spring), scale .5s var(--spring), display .2s allow-discrete, overlay .2s allow-discrete; }
dialog.palette[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { dialog.palette[open] { opacity: 0; translate: 0 -10px; scale: .98; } }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--glass-line); font-size: 20px; color: var(--ink-3); }
.cmdk-in input { flex: 1; min-width: 0; height: 60px; border: 0; background: none; outline: none; font-size: 16.5px; color: var(--ink); caret-color: var(--neon); }
.cmdk-in input::placeholder { color: var(--ink-4); }
.cmdk-l { max-height: min(430px, 55vh); overflow: auto; margin: 0; padding: 8px; list-style: none; scrollbar-width: thin; }
.cmdk-g { font: 500 11.5px var(--f-sans); color: var(--ink-3); padding: 12px 12px 6px; }
.cmdk-i { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); cursor: pointer; color: var(--ink-2); font-size: 14.5px; }
.cmdk-i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); flex: none; }
.cmdk-i small { margin-left: auto; font: 400 11.5px var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.cmdk-i span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-i[aria-selected="true"], .cmdk-i:hover { background: color-mix(in oklab, var(--neon) 9%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--neon) 25%, transparent); }
.cmdk-i[aria-selected="true"]::before { background: var(--neon); box-shadow: none; }
.cmdk-f { display: flex; flex-wrap: wrap; gap: 18px; padding: 11px 20px; border-top: 1px solid var(--glass-line); font: 400 11.5px var(--f-mono); color: var(--ink-3); }
.cmdk-f span:last-child { margin-left: auto; }
.cmdk-e { padding: 26px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ── геометрия щитков: общий язык ──────────────────────────────────────
   --hex (заливка clip-path), --hex-line (контур маской), соты --scute-img.
   Всё на CSS/SVG, движение уважает prefers-reduced-motion и ?shot. */
:root { --hex-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M13 1.5 24 7.8v14.4L13 28.5 2 22.2V7.8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@property --tr { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* иллюстрация в своём пространстве, без подложки */
.hexart { position: relative; display: grid; place-items: center; isolation: isolate; }

.hexart img { display: block; width: 100%; height: auto; }
.hexart.sm { width: 160px; margin-bottom: 4px; }
.empty .hexart.sm + h3 { margin-top: 2px; }
/* изометрическая кучка щитков: плитки со «срезом» (жёсткая тень без размытия) */
.iso { display: inline-block; width: 96px; filter: drop-shadow(0 4px 0 color-mix(in oklab, var(--neon-deep) 55%, transparent)); }
.iso svg { width: 100%; height: auto; overflow: visible; transform: matrix(0.866, 0.5, -0.866, 0.5, 0, 0); }
.iso.sm { width: 56px; }
.iso polygon { stroke: var(--bg); stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.iso .t0 { fill: var(--neon); } .iso .t1 { fill: color-mix(in oklab, var(--neon) 55%, var(--bg)); }
.iso .t2 { fill: color-mix(in oklab, var(--shell-2) 75%, var(--bg)); } .iso .t3 { fill: color-mix(in oklab, var(--tint) 16%, var(--bg)); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rv .iso polygon { opacity: 0; translate: 0 -26px; transition: opacity .5s var(--out), translate .8s var(--spring); transition-delay: calc(200ms + var(--i) * 80ms); }
  .rv.in .iso polygon { opacity: 1; translate: 0 0; }
}
.shot .iso polygon { opacity: 1 !important; translate: none !important; }
/* разделитель-соты: ряд щитков по линии */
.hexrule { position: relative; height: 16px; border: 0; margin: 0; }
.hexrule::before { content: ""; position: absolute; inset: 0; background: var(--line-3); -webkit-mask: var(--hex-line) 0 50% / 14px 16px repeat-x, linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); -webkit-mask-composite: source-in; mask: var(--hex-line) 0 50% / 14px 16px repeat-x, linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-composite: intersect; }
/* загрузка щитком: сегменты загораются по кругу */
.hx-spin { display: inline-block; width: 14px; height: 16px; clip-path: var(--hex); background: conic-gradient(var(--neon) 0 120deg, var(--line-3) 120deg 360deg); animation: hx-spin 1.2s steps(6) infinite; vertical-align: -3px; }
@keyframes hx-spin { to { transform: rotate(360deg); } }

/* ── появления ──────────────────────────────────────────────────────── */
@media (scripting: enabled) {
  .rv { opacity: 0; transform: translateY(24px); filter: blur(12px); transition: opacity 1.1s var(--out), transform 1.1s var(--out), filter 1.1s var(--out); transition-delay: calc(var(--d, 0) * 110ms); }
  .rv.in { opacity: 1; transform: none; filter: none; }
}
.words .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(0.25em); transition: all .9s var(--out); transition-delay: calc(var(--k) * 60ms); }
.words.in .w { opacity: 1; filter: none; transform: none; }
.shot .rv, .shot .words .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
.shot .glass, .shot .toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── переходы между страницами без JS ───────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .rv, .words .w { opacity: 1 !important; filter: none !important; transform: none !important; }
  @view-transition { navigation: none; }
}
@media print {
  .rail, .tbar, .hdr, .toasts, .grain, #ribbons, #ribbons-fallback, .pfoot { display: none !important; }
  body { background: var(--hi-c); color: var(--shadow-c); }
}
/* поверх нитей узор щитков остаётся вторым, едва заметным слоем */
html:has(#ribbons.on) .grain { opacity: .55; }