/* =====================================================================
   Дизайн-система CS2 Replay — направление «Радар» (точный прибор).
   Почти чёрный корпус, линии 1 px, шкалы, круглый окуляр. Интерфейс монохромный:
   цветные только данные (CT / T) и ошибка.

   – Токены цвета — с префиксом --ds-, чтобы не пересекаться с переменными приложения
     (replay.css привязывает к ним свои --bg, --panel, --text, --line, --accent…).
   – Тема — атрибут data-theme="dark|light" на <html> (js/theme.js и инлайн-скрипт в <head>).
     Тёмная — по умолчанию (:root), светлая — :root[data-theme="light"].
   – Шрифты — fonts/fonts.css (self-hosted): Unbounded 300 — только крупное (от ~20 px):
     заголовки, счёт, большие цифры; Onest 400/600 — весь текст; JetBrains Mono 500 —
     координаты, время, номера раундов.
   – Компоненты — классы с префиксом ds- (кнопки, чипы, поле, вкладки, карточка, метрика,
     окуляр-лоадер, выноска, нижний лист). Существующие классы приложения не трогаем.
   Ванильный CSS, без сборки.
   ===================================================================== */

:root {
  /* --- шрифты --- */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- шкала размеров (rem: масштабируется настройкой «Размер текста») --- */
  --ds-fs-micro: 0.6875rem; /* 11 — гравировка на корпусе, деления шкал */
  --ds-fs-xs: 0.75rem;      /* 12 */
  --ds-fs-sm: 0.8125rem;    /* 13 */
  --ds-fs-base: 0.9375rem;  /* 15 */
  --ds-fs-md: 1.0625rem;    /* 17 */
  --ds-fs-lg: 1.375rem;     /* 22 — дисплей S (Unbounded 300 допустим) */
  --ds-fs-xl: 2rem;         /* 32 — дисплей M */
  --ds-fs-2xl: clamp(1.875rem, 1.2rem + 3.2vw, 3.5rem); /* 30→56 — дисплей L */

  /* --- корпус: «тёплый графит» — почти чёрный с лёгким янтарным подтоном --- */
  --ds-bg: #0e0c0a;
  --ds-bg-2: #12100d;
  --ds-surface: #15120f;
  --ds-surface-2: #1b1814;
  --ds-surface-3: #221e19;
  --ds-line: rgba(226, 212, 192, 0.10);
  --ds-line-2: rgba(226, 212, 192, 0.18);
  --ds-line-3: rgba(226, 212, 192, 0.32);
  --ds-text: #ece5da;       /* 15.6 : 1 на --ds-bg */
  --ds-text-2: #b3a898;     /* 8.3 : 1 */
  --ds-text-3: #958b7e;     /* 5.8 : 1 на --ds-bg, 4.95 на --ds-surface-3 — минимум для подписей */
  --ds-glow: rgba(240, 228, 208, 0.55);
  /* «стрелка прибора»: главная кнопка и активный элемент — слоновая кость в тёмной теме */
  --ds-face: #ece3d3;
  --ds-face-ink: #0e0c0a;

  /* --- данные: единственные яркие цвета --- */
  --ds-ct: #5b9bd5;
  --ds-t: #e0b441;
  --ds-ct-text: #84b6e3;
  --ds-t-text: #e3c26b;
  --ds-ct-soft: rgba(91, 155, 213, 0.14);
  --ds-t-soft: rgba(224, 180, 65, 0.14);

  /* --- сигналы --- */
  --ds-bad: #f2674e;                       /* единый цвет ошибки */
  --ds-bad-soft: rgba(242, 103, 78, 0.13);
  --ds-good: #8cc9a3;                      /* только для данных (рост, «верно»); чип «хорошо» — монохромный */
  --ds-good-soft: rgba(140, 201, 163, 0.13);
  --ds-approx: #b3a898;                    /* ≈ спорно — нейтральный, пунктир */
  --ds-warn: #d6a35c;                      /* предупреждение приложения (не ошибка) */

  /* --- карта всегда тёмная, независимо от темы --- */
  --ds-map-bg: #0b0a08;
  --ds-map-line: rgba(226, 212, 192, 0.16);
  /* canvas-карта (render.js читает один раз и при смене темы): в обеих темах одинаковые */
  --ds-map-ink: #ece5da;                    /* ники, палочка взгляда, HP */
  --ds-map-ink-2: #a89e90;                  /* оружие в подписи, вторичное */
  --ds-map-label: rgba(222, 210, 192, 0.5); /* буквы и цифры сетки */
  --ds-map-halo: #0b0a08;                   /* тёмная обводка текста и маркеров */
  --ds-map-bad: #f2674e;                    /* ошибка на карте — яркая и в светлой теме */
  --ds-map-radar: #1f1b17;                  /* подложка радара, пока картинка не загрузилась */

  /* --- геометрия и движение --- */
  --ds-r-s: 4px;
  --ds-r-m: 8px;
  --ds-r-l: 14px;
  --ds-gutter: 16px;
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
}

/* светлая тема: «слоновая кость / бумага» */
:root[data-theme="light"] {
  --ds-bg: #f2ede4;
  --ds-bg-2: #ebe5da;
  --ds-surface: #f9f5ee;
  --ds-surface-2: #ece6db;
  --ds-surface-3: #e1dacd;
  --ds-line: rgba(40, 30, 20, 0.10);
  --ds-line-2: rgba(40, 30, 20, 0.18);
  --ds-line-3: rgba(40, 30, 20, 0.34);
  --ds-text: #1a1612;       /* 15.4 : 1 на --ds-bg */
  --ds-text-2: #4f463c;     /* 7.9 : 1 */
  --ds-text-3: #665c50;     /* 5.6 : 1 на --ds-bg, 4.7 на --ds-surface-3 */
  --ds-glow: rgba(26, 22, 18, 0.18);
  --ds-face: #1a1612;
  --ds-face-ink: #f9f5ee;
  --ds-ct-text: #2b6aa6;
  --ds-t-text: #835f00;
  --ds-ct-soft: rgba(91, 155, 213, 0.16);
  --ds-t-soft: rgba(224, 180, 65, 0.22);
  --ds-bad: #c23a22;
  --ds-bad-soft: rgba(194, 58, 34, 0.10);
  --ds-good: #2c7a4b;
  --ds-good-soft: rgba(44, 122, 75, 0.10);
  --ds-approx: #4f463c;
  --ds-warn: #8a5a00;
}

/* ---------- типографика ---------- */
.ds-display-l { font: 300 var(--ds-fs-2xl)/1.08 var(--font-display); letter-spacing: -0.025em; }
.ds-display-m { font: 300 var(--ds-fs-xl)/1.15 var(--font-display); letter-spacing: -0.02em; }
.ds-display-s { font: 300 var(--ds-fs-lg)/1.2 var(--font-display); letter-spacing: -0.01em; }
.ds-num { font-family: var(--font-display); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ds-mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* гравировка на корпусе: мелко, разрядкой */
.ds-label {
  font: 600 var(--ds-fs-micro)/1.2 var(--font-text);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-text-3);
}
.ds-lead { font-size: var(--ds-fs-md); line-height: 1.55; color: var(--ds-text-2); max-width: 36em; }
.ds-muted { color: var(--ds-text-2); }
.ds-code { font: 600 0.92em var(--font-text); padding: 1px 6px; border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-s); }

/* горизонтальная шкала-линейка */
.ds-ruler {
  display: block; height: 8px; border-bottom: 1px solid var(--ds-line-2);
  background:
    repeating-linear-gradient(90deg, var(--ds-line-3) 0 1px, transparent 1px 40px) bottom/100% 8px no-repeat,
    repeating-linear-gradient(90deg, var(--ds-line-2) 0 1px, transparent 1px 8px) bottom/100% 4px no-repeat;
}
/* угловые метки прибора: на любой позиционированный блок */
.ds-corners { position: relative; }
.ds-corners::before, .ds-corners::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--ds-line-3); border-style: solid;
}
.ds-corners::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.ds-corners::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ---------- кнопки ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--ds-r-m);
  border: 1px solid transparent; background: transparent; color: var(--ds-text);
  font: 600 var(--ds-fs-sm)/1.1 var(--font-text); letter-spacing: 0.02em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease), box-shadow .2s var(--ds-ease), color .2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ds-btn svg { width: 18px; height: 18px; flex: none; }
.ds-btn-primary { background: var(--ds-face); color: var(--ds-face-ink); }
.ds-btn-primary:hover { box-shadow: 0 0 0 4px var(--ds-line), 0 0 24px -6px var(--ds-glow); }
.ds-btn-secondary { background: var(--ds-surface-2); color: var(--ds-text); border-color: var(--ds-line); }
.ds-btn-secondary:hover { border-color: var(--ds-line-3); }
.ds-btn-ghost { color: var(--ds-text); border-color: var(--ds-line-2); }
.ds-btn-ghost:hover { border-color: var(--ds-line-3); background: var(--ds-surface-2); }
.ds-btn-quiet { color: var(--ds-text-2); padding: 0 12px; }
.ds-btn-quiet:hover { color: var(--ds-text); }
.ds-btn-danger { color: var(--ds-bad); border-color: var(--ds-bad); border-color: color-mix(in srgb, var(--ds-bad) 45%, transparent); }
.ds-btn-sm { min-height: 40px; padding: 0 14px; font-size: var(--ds-fs-xs); }
.ds-btn-icon { width: 44px; min-height: 44px; padding: 0; border-color: var(--ds-line-2); }
.ds-btn-block { width: 100%; }
.ds-btn:focus-visible { outline: 1px solid var(--ds-text); outline-offset: 3px; }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- чипы и бейджи ---------- */
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--ds-line-2); border-radius: 999px;
  font: 600 var(--ds-fs-xs)/1 var(--font-text); color: var(--ds-text-2); white-space: nowrap;
}
.ds-chip > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; font-style: normal; }
.ds-chip-good { color: var(--ds-text); border-color: var(--ds-line-3); }
.ds-chip-good > i { background: var(--ds-text); box-shadow: 0 0 6px var(--ds-glow); }
.ds-chip-bad { color: var(--ds-bad); border-color: var(--ds-bad); border-color: color-mix(in srgb, var(--ds-bad) 40%, transparent); background: var(--ds-bad-soft); }
.ds-chip-approx { color: var(--ds-approx); border-style: dashed; }
.ds-chip-approx > i { background: transparent; border: 1px solid currentColor; }
.ds-chip-ct { color: var(--ds-ct-text); border-color: var(--ds-ct); border-color: color-mix(in srgb, var(--ds-ct) 40%, transparent); background: var(--ds-ct-soft); }
.ds-chip-ct > i { background: var(--ds-ct); }
.ds-chip-t { color: var(--ds-t-text); border-color: var(--ds-t); border-color: color-mix(in srgb, var(--ds-t) 40%, transparent); background: var(--ds-t-soft); }
.ds-chip-t > i { background: var(--ds-t); }
/* бейдж-гравировка: квадратный, разрядка */
.ds-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ds-r-s);
  border: 1px solid var(--ds-line-2); color: var(--ds-text-2);
  font: 600 var(--ds-fs-micro)/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.ds-tag-bad { color: var(--ds-bad); border-color: var(--ds-bad); border-color: color-mix(in srgb, var(--ds-bad) 45%, transparent); }

/* ---------- поле ввода ---------- */
.ds-field-label { display: block; margin-bottom: 6px; }
.ds-input {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-m);
  background: var(--ds-bg-2); color: var(--ds-text);
  font: 400 var(--ds-fs-base) var(--font-text);
  transition: border-color .2s, box-shadow .2s;
}
textarea.ds-input { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ds-input::placeholder { color: var(--ds-text-3); }
.ds-input:focus { outline: none; border-color: var(--ds-line-3); box-shadow: 0 0 0 3px var(--ds-line); }
.ds-input[aria-invalid="true"] { border-color: var(--ds-bad); }
.ds-field-hint { margin-top: 6px; font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-field-error { margin-top: 6px; font-size: var(--ds-fs-xs); color: var(--ds-bad); }

/* ---------- вкладки ---------- */
.ds-tabs { display: flex; border-bottom: 1px solid var(--ds-line); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  position: relative; flex: 1 0 auto; min-height: 46px; padding: 0 14px;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font: 600 var(--ds-fs-sm)/1 var(--font-text); color: var(--ds-text-3);
}
.ds-tab:hover { color: var(--ds-text-2); }
.ds-tab[aria-selected="true"], .ds-tab.active { color: var(--ds-text); }
.ds-tab[aria-selected="true"]::after, .ds-tab.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px;
  background: var(--ds-text); box-shadow: 0 0 8px var(--ds-glow);
}

/* ---------- карточка ---------- */
.ds-card { position: relative; padding: 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-l); background: var(--ds-surface); min-width: 0; }
a.ds-card { display: block; color: inherit; text-decoration: none; transition: border-color .2s; }
a.ds-card:hover { border-color: var(--ds-line-3); }
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* ---------- плитка метрики: значение + шкала с указателем ----------
   <div class="ds-metric"><span class="ds-label">Размены</span>
     <div class="ds-metric-val"><b>42</b><small>%</small></div>
     <div class="ds-scale"><span class="ds-scale-band" style="left:30%;width:25%"></span>
       <span class="ds-needle" style="left:42%"></span></div>
     <div class="ds-metric-foot"><span>0</span><b>медиана 38</b><span>100</span></div></div> */
.ds-metric { padding: 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-l); background: var(--ds-surface); min-width: 0; }
.ds-metric-val { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 14px; }
.ds-metric-val b { font: 300 2.25rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ds-metric-val small { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.ds-scale { position: relative; height: 22px; }
.ds-scale::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background:
    linear-gradient(90deg, var(--ds-line-3) 0 1px, transparent 1px) 0 0/25% 9px repeat-x,
    linear-gradient(90deg, var(--ds-line-2) 0 1px, transparent 1px) 0 5px/5% 4px repeat-x;
  border-bottom: 1px solid var(--ds-line-2);
}
.ds-scale-band { position: absolute; bottom: 0; height: 1px; background: var(--ds-text-2); }
.ds-needle { position: absolute; bottom: 0; width: 1px; height: 22px; background: var(--ds-text); box-shadow: 0 0 6px var(--ds-glow); }
.ds-needle::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-text); }
.ds-needle-bad { background: var(--ds-bad); box-shadow: none; }
.ds-needle-bad::before { background: var(--ds-bad); }
.ds-metric-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.ds-metric-foot b { color: var(--ds-text-2); font-weight: 600; }

/* ---------- окуляр-лоадер: малый радар с процентом ----------
   <div class="ds-gauge" style="--p:62" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">
     <svg viewBox="0 0 56 56"><circle class="ds-g-track" cx="28" cy="28" r="26"/><circle class="ds-g-ticks" cx="28" cy="28" r="22"/>
       <circle class="ds-g-val" cx="28" cy="28" r="26" pathLength="100"/></svg>
     <i class="ds-g-sweep"></i><b>62<small>%</small></b></div>
   Без --p (неизвестный прогресс) — крутится только развёртка. Размер L — .ds-gauge-l. */
.ds-gauge { position: relative; width: 56px; height: 56px; flex: none; }
.ds-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ds-g-track { fill: none; stroke: var(--ds-line-2); stroke-width: 1; }
.ds-g-ticks { fill: none; stroke: var(--ds-line-2); stroke-width: 4; stroke-dasharray: 1 5.28; }
.ds-g-val {
  fill: none; stroke: var(--ds-text); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0));
  filter: drop-shadow(0 0 3px var(--ds-glow)); transition: stroke-dashoffset .4s var(--ds-ease);
}
.ds-g-sweep {
  position: absolute; inset: 14%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 300deg, var(--ds-line-3) 360deg); background: conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb, var(--ds-text) 18%, transparent) 360deg);
  animation: ds-sweep 2.4s linear infinite;
}
.ds-gauge > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ds-gauge > b small { font-size: .8em; color: var(--ds-text-2); }
.ds-gauge-l { width: 132px; height: 132px; }
.ds-gauge-l > b { font: 300 26px/1 var(--font-display); letter-spacing: -0.02em; }
.ds-gauge-l > b small { font: 600 12px var(--font-text); margin-left: 2px; }

/* ---------- окуляр: круглое окно карты со шкалой (шкалу рисует js/hero.js) ---------- */
.ds-scope { position: relative; aspect-ratio: 1; width: 100%; }
.ds-scope > svg.ds-dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ds-scope-glass {
  position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: var(--ds-map-bg); isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(226, 212, 192, .22), inset 0 0 60px 10px rgba(0, 0, 0, .85), 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.ds-scope-glass .ds-scope-map {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.78) contrast(1.2); opacity: .92;
}
.ds-scope-grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 24.6%, rgba(226,212,192,.14) 24.8% 25%, transparent 25.2% 49.6%, rgba(226,212,192,.14) 49.8% 50%, transparent 50.2% 74.6%, rgba(226,212,192,.14) 74.8% 75%, transparent 75.2%),
    linear-gradient(rgba(226,212,192,.12), rgba(226,212,192,.12)) center/100% 1px no-repeat,
    linear-gradient(rgba(226,212,192,.12), rgba(226,212,192,.12)) center/1px 100% no-repeat;
}
.ds-scope-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-sweep {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, rgba(240,228,208,0) 0deg 300deg, rgba(240,228,208,.03) 335deg, rgba(240,228,208,.13) 359.3deg, rgba(240,228,208,.7) 359.8deg, rgba(240,228,208,0) 360deg);
  animation: ds-sweep 6s linear infinite;
}
.ds-vignette { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 42%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.ds-dial .tk { stroke: var(--ds-line-2); stroke-width: 1; }
.ds-dial .tk-major { stroke: var(--ds-line-3); }
.ds-dial .tk-lab { fill: var(--ds-text-3); font: 500 9px var(--font-mono); letter-spacing: .04em; }
.ds-dial .ring { fill: none; stroke: var(--ds-line); }
.ds-dial .ring-2 { fill: none; stroke: var(--ds-line-2); }
.ds-dial .bearing { stroke: var(--ds-text); stroke-width: 1.4; }
@keyframes ds-sweep { to { transform: rotate(360deg); } }

/* ---------- выноска-подсказка: круг вокруг точки, линия, подпись разрядкой ----------
   Внутри позиционированного контейнера (карта, окуляр):
   <span class="ds-callout" style="--x:42%;--y:61%"><span class="ds-callout-text">Изоляция</span></span>
   .ds-callout-left — выноска влево; .ds-callout-neutral — не ошибка, а нейтральная пометка. */
.ds-callout {
  --c: var(--ds-bad);
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; pointer-events: none;
  color: var(--c);
}
.ds-callout-neutral { --c: var(--ds-text); }
.ds-callout::before { /* кольцо вокруг точки */
  content: ""; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  border: 1.2px solid currentColor; border-radius: 50%;
}
.ds-callout::after { /* наклонная часть линии */
  content: ""; position: absolute; left: 12.7px; top: -12.7px; width: 34px; height: 1px;
  background: currentColor; transform-origin: 0 50%; transform: rotate(-45deg);
}
.ds-callout-text {
  position: absolute; left: 36.7px; top: -36.7px; transform: translateY(-100%);
  padding: 0 4px 4px 4px; border-bottom: 1px solid currentColor; white-space: nowrap;
  font: 600 var(--ds-fs-micro)/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0, 0, 0, .8);
}
.ds-callout-left::after { left: -12.7px; transform: rotate(-135deg); }
.ds-callout-left .ds-callout-text { left: auto; right: 36.7px; }

/* ---------- нижний лист ---------- */
.ds-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 86dvh; overflow: auto;
  border: 1px solid var(--ds-line-2); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: var(--ds-surface); color: var(--ds-text);
  padding: 0 var(--ds-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .6);
}
.ds-sheet-static { position: relative; z-index: auto; }
.ds-sheet-grab { display: block; width: 36px; height: 4px; margin: 10px auto 10px; border-radius: 4px; background: var(--ds-line-3); }
.ds-sheet-backdrop { position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .55); }
@media (min-width: 768px) {
  .ds-sheet:not(.ds-sheet-static) { left: 50%; right: auto; width: 480px; transform: translateX(-50%); }
}

/* ---------- пустое состояние: мини-радар ---------- */
.ds-empty { display: grid; justify-items: center; gap: 14px; padding: 32px 16px; text-align: center; }
.ds-mini-scope {
  position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, var(--ds-line-3) 0 1.5px, transparent 2px), radial-gradient(circle, transparent 0 32.6%, var(--ds-line-2) 33% 33.5%, transparent 34% 65.6%, var(--ds-line-2) 66% 66.5%, transparent 67%);
  box-shadow: inset 0 0 0 1px var(--ds-line-2);
}
.ds-mini-scope::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 290deg, var(--ds-line-3) 359deg, transparent 360deg); background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--ds-text) 18%, transparent) 359deg, transparent 360deg);
  animation: ds-sweep 4s linear infinite;
}

/* ---------- светодиод состояния ---------- */
.ds-led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-text); box-shadow: 0 0 8px var(--ds-glow); flex: none; }
.ds-led-bad { background: var(--ds-bad); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .ds-sweep, .ds-g-sweep, .ds-mini-scope::after { animation: none; transform: rotate(300deg); }
  .ds-btn, .ds-g-val, .ds-input { transition: none; }
}