/* Мини-аппа. Один файл: подключать сборщик ради двадцати килобайт стилей —
   значит завести на проекте вторую экосистему с её версиями и кэшами ради
   экономии, которой не видно. Порядок держим разделами. */

/* ---------- токены ---------- */

:root {
  --bg: #0B0D12;
  --bg-soft: #0F131B;
  --surface: #141821;
  --surface-2: #1B202B;
  --surface-3: #222836;
  --line: #232936;
  --line-soft: #1B202B;
  --text: #EAEDF2;
  --dim: #8A94A6;
  --dim-2: #5D6577;

  --accent: #5B8DEF;
  --accent-soft: rgba(91, 141, 239, .16);
  --good: #2BC48A;
  --good-soft: rgba(43, 196, 138, .14);
  --bad: #F4586C;
  --bad-soft: rgba(244, 88, 108, .14);
  --warn: #F2B04A;
  --warn-soft: rgba(242, 176, 74, .14);

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;

  --pad: 14px;
  --tab-h: 58px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset,
            0 8px 24px -12px rgba(0, 0, 0, .8);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- сброс ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Roboto, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }

button, input, select {
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }

::-webkit-scrollbar { width: 0; height: 0; }

/* Числа не должны прыгать по ширине при обновлении — иначе список
   «дышит» на каждом свопе и глаз цепляется за движение вместо цифры. */
.card-val, .stat-v, .kpi-num, .mchip b, .listhead-sum { font-variant-numeric: tabular-nums; }

/* ---------- заставка ---------- */

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--bg);
  z-index: 100;
  transition: opacity .28s ease;
}
.boot.out { opacity: 0; pointer-events: none; }

.boot-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: conic-gradient(from 0deg, var(--accent), #8B5CF6, var(--good), var(--accent));
  animation: spin 1.1s cubic-bezier(.5, 0, .5, 1) infinite;
  filter: blur(.2px);
}
.boot-mark::after {
  content: "";
  display: block;
  margin: 6px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--bg);
}
.boot-text { color: var(--dim); font-size: 13px; letter-spacing: .01em; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- каркас ---------- */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.hdr {
  position: relative;
  z-index: 20;
  padding: calc(var(--safe-t) + 10px) var(--pad) 10px;
  background: rgba(11, 13, 18, .78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}

.hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.hdr-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* состояние парка в шапке */
.fleet {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--dim);
  white-space: nowrap;
}
.fleet-live { color: var(--good); font-weight: 650; }
.fleet-sep { color: var(--dim-2); margin: 0 1px; }
.fleet-risk {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-style: normal;
  font-weight: 650;
  font-size: 11.5px;
}

/* ---------- сегмент периодов ---------- */

.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.seg button {
  position: relative;
  z-index: 2;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: 550;
  color: var(--dim);
  border-radius: 9px;
  transition: color .18s ease;
}
.seg button.on { color: var(--text); }
.seg button:active { transform: scale(.97); }

.seg-pill {
  position: absolute;
  z-index: 1;
  top: 3px;
  bottom: 3px;
  border-radius: 9px;
  background: var(--surface-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), width .26s cubic-bezier(.32, .72, 0, 1);
  will-change: transform, width;
}

/* Внутри листа бегунка нет — переключатель там перерисовывается сервером
   целиком, и анимировать нечего. Активную кнопку красим фоном. */
.seg-sm button { padding: 6px 4px; font-size: 12.5px; }
.seg-sm button.on { background: var(--surface-3); }

/* ---------- прокручиваемая область ---------- */

.main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 20px);
}

.view { padding: 0 var(--pad); }

/* ---------- KPI ---------- */

.kpi-slot { padding-top: 12px; }

.kpi-scroll {
  display: flex;
  gap: 8px;
  padding: 0 var(--pad) 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.kpi-scroll::-webkit-scrollbar { display: none; }

.kpi {
  flex: 0 0 auto;
  min-width: 104px;
  padding: 10px 12px 11px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  scroll-snap-align: start;
}
.kpi-hero {
  min-width: 132px;
  background: linear-gradient(160deg, rgba(91, 141, 239, .14), var(--surface) 62%);
  border-color: rgba(91, 141, 239, .28);
}

.kpi-label {
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: .01em;
  margin-bottom: 3px;
  white-space: nowrap;
}
.kpi-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.kpi-hero .kpi-num { font-size: 24px; }
.kpi-num .cur { font-size: .68em; color: var(--dim); margin-right: 1px; }

.kpi-delta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.kpi-delta.good { color: var(--good); }
.kpi-delta.bad { color: var(--bad); }
.kpi-delta.flat { color: var(--dim-2); font-weight: 500; }

.arr { width: 9px; height: 9px; fill: currentColor; }
.arr.down { transform: rotate(180deg); }
.kpi-delta.flat .arr { display: none; }

.kpi-note {
  padding: 8px var(--pad) 2px;
  font-size: 11.5px;
  color: var(--dim-2);
}

/* ---------- фильтры ---------- */

.filters { padding: 12px 0 6px; }

.search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}
.search-ic {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--dim-2);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.search input::placeholder { color: var(--dim-2); }
.search input:focus {
  border-color: rgba(91, 141, 239, .5);
  background: var(--surface-2);
}

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
  white-space: nowrap;
  transition: all .16s ease;
}
.chip input:checked + span {
  background: var(--accent-soft);
  border-color: rgba(91, 141, 239, .45);
  color: #A9C4F8;
  font-weight: 550;
}
.chip:active > span { transform: scale(.96); }

.chip-mine input:checked + span {
  background: var(--good-soft);
  border-color: rgba(43, 196, 138, .4);
  color: #6FE0B4;
}

.chip-sel {
  position: relative;
  flex: 0 0 auto;
}
.chip-sel select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 26px 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
  outline: none;
}
.chip-sel select:disabled { opacity: .45; }
.caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--dim-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}

/* сброс фильтра по кабинету */
.scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 2px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(91, 141, 239, .28);
  font-size: 12.5px;
  color: #A9C4F8;
}
.scope b { color: var(--text); font-weight: 600; }
.scope-x { color: var(--accent); font-size: 12.5px; font-weight: 600; }

/* ---------- шапка списка ---------- */

.listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 2px 8px;
  font-size: 12.5px;
  color: var(--dim);
}
.listhead-sum { font-size: 14px; font-weight: 650; color: var(--text); }

/* ---------- карточки ---------- */

.list { display: flex; flex-direction: column; gap: 8px; }
.list.tight { gap: 6px; }

.card {
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card.muted { opacity: .55; }

.tappable {
  cursor: pointer;
  transition: transform .12s ease, background .16s ease;
}
.tappable:active {
  transform: scale(.985);
  background: var(--surface-2);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-id {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
.card-names { min-width: 0; }

.nm {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Подпись под названием несёт три факта: статус, баланс и партию. В одну
   строку рядом со спарклайном они не влезают, и обрезалось всегда третье —
   дата залива, то есть ровно то, чего нет больше нигде на экране. Даём две
   строки: карточка подрастает только там, где фактов действительно три. */
.sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Разделитель — не отдельный элемент между фактами, а хвост факта. Разница
   видна только при переносе: точка уезжает в конец первой строки вместе с
   тем, к чему относится, а вторая строка начинается со слова. Отдельным
   элементом она бы встала в начало строки — так подписи не набирают. */
.sub .f:not(:last-child)::after {
  content: "·";
  margin-left: 5px;
  color: var(--dim-2);
}
.sep { margin: 0 5px; color: var(--dim-2); }

.card-val {
  flex: 0 0 auto;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.v-spend .cur { font-size: .72em; color: var(--dim); margin-right: 1px; }
.v-zero { color: var(--dim-2); font-weight: 500; }

.spark-wrap {
  margin-top: 4px;
  color: var(--accent);
  opacity: .85;
}
.spark { display: block; margin-left: auto; }

/* точка состояния */
.dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--dim-2);
}
.dot.live { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.dead { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.dot.idle { background: var(--dim-2); }
.dot.big { width: 11px; height: 11px; margin-top: 7px; }

/* ---------- метрики строкой ---------- */

/* Четыре метрики в ряд на 375px не помещаются, а перенос по остатку даёт
   рваную вторую строку. Фиксированные две колонки выглядят как таблица:
   подписи выстраиваются друг под другом и читаются вертикально. */
.mrow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-top: 10px;
}

.mchip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 11.5px;
  line-height: 1.2;
  min-width: 0;
}
.mchip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* В ленте событий чипы стоят вперемешку и по ширине контента */
.fd-det .mchip, .meta-strip .mchip { display: inline-flex; justify-content: flex-start; }
.mchip i { font-style: normal; color: var(--dim-2); }
.mchip b { font-weight: 600; color: var(--text); }
.mchip.bad { background: var(--bad-soft); }
.mchip.bad b { color: var(--bad); }
.mchip.good { background: var(--good-soft); }
.mchip.good b { color: var(--good); }

/* ---------- риск и причины ---------- */

.riskbar {
  position: relative;
  margin-top: 9px;
  height: 22px;
  border-radius: 7px;
  background: var(--surface-2);
  overflow: hidden;
}
.riskbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(242, 176, 74, .3), rgba(242, 176, 74, .5));
}
.riskbar.warm .riskbar-fill {
  background: linear-gradient(90deg, rgba(242, 176, 74, .35), rgba(244, 122, 88, .55));
}
.riskbar.hot .riskbar-fill {
  background: linear-gradient(90deg, rgba(244, 88, 108, .35), rgba(244, 88, 108, .62));
}
.riskbar-txt {
  position: relative;
  display: block;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.riskring {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--warn);
}
.riskring.hot { color: var(--bad); }
.riskring .ring { grid-area: 1 / 1; }
.riskring b {
  grid-area: 1 / 1;
  font-size: 12px;
  font-weight: 700;
  color: currentColor;
}

.reason {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--bad-soft);
  border-left: 2px solid var(--bad);
  font-size: 12px;
  color: #FFAAB4;
}

/* ---------- блоки и заголовки ---------- */

.block { margin-top: 18px; }
.block:first-child { margin-top: 12px; }

.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* Заголовок не ломаем по словам: «Динамика по дням» в две строки рядом с
   легендой выглядит как сбой вёрстки. Пусть лучше вся легенда уедет на
   свою строку целиком — она к этому готова, ширина у неё полная. */
.block-head h3 { white-space: nowrap; }
.block h3 { font-size: 15px; font-weight: 650; }

.dim { color: var(--dim); }
.sm { font-size: 12px; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

.note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim);
}
.note b { color: var(--text); font-weight: 600; }

.foot {
  margin: 22px 0 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim-2);
  text-align: center;
}

.bullets {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
}
.bullets li { margin-bottom: 3px; }

/* ---------- графики ---------- */

.chart-box {
  position: relative;
  height: 160px;
  padding: 10px 8px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.chart-box.tall { height: 214px; }
.chart-box.short { height: 130px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }

.legend {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
}
.lg {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: -1px;
}
.lg-spend { background: var(--accent); }
.lg-leads { background: var(--good); }
.lg-cpl { background: var(--warn); }

/* ---------- воронка ---------- */

.funnel { display: flex; flex-direction: column; gap: 2px; }

.fn-step { padding: 2px 0; }
.fn-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
}
.fn-nm { font-size: 13px; color: var(--dim); }
.fn-v { font-size: 14px; font-weight: 650; }

.fn-track {
  height: 10px;
  border-radius: 5px;
  background: var(--surface-2);
  overflow: hidden;
}
.fn-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), #8B5CF6);
  transition: width .5s cubic-bezier(.32, .72, 0, 1);
}

.fn-conv {
  margin: 5px 0 3px 2px;
  font-size: 11px;
  color: var(--dim-2);
}

/* ---------- гео ---------- */

.geo-card .flag { font-size: 22px; line-height: 1; margin-top: 1px; }

.geo-track {
  margin-top: 9px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.geo-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(91, 141, 239, .45));
}

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: 82px 1fr 74px;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}
.bar-nm { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.bar-v { text-align: right; font-weight: 600; }

/* ---------- лента событий ---------- */

.feed { display: flex; flex-direction: column; gap: 6px; }

.fd {
  position: relative;
  display: flex;
  gap: 11px;
  padding: 11px 13px 11px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fd-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--dim-2);
}
.fd-critical .fd-rail { background: var(--bad); }
.fd-warning .fd-rail { background: var(--warn); }
.fd-info .fd-rail { background: var(--accent); }

.fd-body { flex: 1; min-width: 0; }
.fd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}
.fd-tag {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.fd-critical .fd-tag { color: var(--bad); }
.fd-warning .fd-tag { color: var(--warn); }
/* Счётчик повторов прижат к типу события, а не к времени: он отвечает на
   вопрос «сколько раз это уже случалось», а не «когда». Время остаётся
   справа и всегда показывает самый свежий раз. */
.fd-rep {
  margin-right: auto;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
}
.fd-at { font-size: 11px; color: var(--dim-2); white-space: nowrap; }

.fd-title { font-size: 13.5px; font-weight: 550; line-height: 1.35; }
.fd-acc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-det { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

/* ---------- нижний лист ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
}
.sheet[hidden] { display: none; }

.sheet-bd {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .26s ease;
}
.sheet.on .sheet-bd { opacity: 1; }

.sheet-card {
  position: relative;
  width: 100%;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
.sheet.on .sheet-card { transform: translateY(0); }

.sheet-grip {
  flex: 0 0 auto;
  padding: 9px 0 5px;
  cursor: grab;
}
.sheet-grip::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--surface-3);
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px var(--pad) calc(var(--safe-b) + 24px);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.sheet-head-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.sheet-head h2 {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.sheet-periods { margin-bottom: 14px; }

.ghost {
  padding: 6px 11px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
  transition: transform .12s ease, background .16s ease;
}
.ghost:active { transform: scale(.95); background: var(--surface-3); }
.ghost.sm { padding: 4px 9px; font-size: 11.5px; }
.ghost.danger { color: var(--bad); border-color: rgba(244, 88, 108, .3); }

.primary {
  padding: 9px 16px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: transform .12s ease, filter .16s ease;
}
.primary:active { transform: scale(.96); filter: brightness(.92); }

.linkish {
  color: var(--dim);
  border-bottom: 1px dashed var(--dim-2);
  font-size: inherit;
}
.linkish:active { color: var(--accent); }

/* ---------- сетка показателей ---------- */

.statgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* Четыре показателя в три колонки дают 3+1 и дырку справа. Там, где их
   ровно четыре, сетка должна быть 2×2 — это квадрат, а не обрубок. */
.statgrid.four { grid-template-columns: repeat(2, 1fr); }
.stat {
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.stat.hero {
  grid-column: span 3;
  background: linear-gradient(160deg, rgba(91, 141, 239, .16), var(--surface) 60%);
  border-color: rgba(91, 141, 239, .3);
  padding: 12px 14px;
}
.stat-l {
  display: block;
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 2px;
}
.stat-v {
  display: block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.stat.hero .stat-v { font-size: 27px; font-weight: 750; }
.stat-v .cur { font-size: .6em; color: var(--dim); margin-right: 2px; }

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.meta-strip span {
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--dim);
}
.meta-strip b { color: var(--text); font-weight: 600; }

/* ---------- мини-список ---------- */

.minilist { display: flex; flex-direction: column; gap: 1px; }
.mini {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  align-items: baseline;
}
.mini:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.mini:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); }
.mini:only-child { border-radius: var(--r-md); }

.mini-nm {
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-v { font-size: 13.5px; font-weight: 650; text-align: right; }
.mini-sub { grid-column: 1 / -1; font-size: 11px; color: var(--dim-2); }

/* ---------- история ---------- */

.events {
  position: relative;
  padding-left: 4px;
}
.ev {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 14px 14px;
}
.ev::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: -2px;
  width: 1px;
  background: var(--line);
}
.ev:last-child { padding-bottom: 0; }
.ev:last-child::before { display: none; }

.ev-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim-2);
}
.ev-critical .ev-dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.ev-warning .ev-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.ev-info .ev-dot { background: var(--accent); }

.ev-t { font-size: 13px; line-height: 1.35; }
.ev-s { margin-top: 2px; font-size: 11px; color: var(--dim-2); }

/* ---------- команда ---------- */

.addform {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.addform input[name="tg_id"] {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px;
  outline: none;
}
.addform input:focus { border-color: rgba(91, 141, 239, .5); }

.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), #8B5CF6);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.avatar.off { background: var(--surface-3); color: var(--dim-2); }
.avatar.big { width: 46px; height: 46px; font-size: 19px; }

.tag-me {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: #A9C4F8;
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: 1px;
}

.user-ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.user-card .card-id { align-items: center; }
.own-card .card-top { align-items: center; }

/* ---------- экран «Ещё» ---------- */

.me {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 2px 6px;
}
.me-nm { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.me-sub { margin-top: 3px; font-size: 12.5px; color: var(--dim); }

.menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 10px;
}
.mi {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 2px 11px;
  width: 100%;
  padding: 12px 13px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  transition: background .16s ease;
}
.mi:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.mi:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); }
.mi:only-child { border-radius: var(--r-md); }
.mi:active { background: var(--surface-2); }

.mi-ic { grid-row: span 2; font-size: 21px; text-align: center; }
.mi-nm { font-size: 14.5px; font-weight: 550; }
.mi-sub { grid-column: 2; font-size: 11.5px; color: var(--dim-2); }
.mi-go { grid-row: span 2; color: var(--dim-2); font-size: 20px; }

.warnbox {
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--warn-soft);
  border: 1px solid rgba(242, 176, 74, .28);
}
.warnbox-top { font-size: 13px; margin-bottom: 10px; }
.warnbox-top b { font-size: 17px; font-weight: 700; color: var(--warn); }
.warnbox .minilist .mini { background: rgba(0, 0, 0, .18); border-color: rgba(242, 176, 74, .18); }
.warnbox .minilist .mini:last-child { border-color: rgba(242, 176, 74, .18); }

.synclist { display: flex; flex-direction: column; gap: 6px; }
.sync {
  position: relative;
  display: flex;
  gap: 11px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.sync-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px var(--good-soft);
}
.sync.bad .sync-dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.sync-nm { font-size: 13.5px; font-weight: 550; }
.sync-sub { margin-top: 2px; font-size: 11.5px; color: var(--dim); }
.sync-err {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--bad);
  overflow-wrap: anywhere;
}

/* ---------- таббар ---------- */

.tabbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding-bottom: var(--safe-b);
  background: rgba(11, 13, 18, .86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line-soft);
}
.tabbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: var(--tab-h);
  padding-top: 9px;
  color: var(--dim-2);
  transition: color .18s ease;
}
.tabbar button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabbar button span { font-size: 10px; letter-spacing: .01em; }
.tabbar button.on { color: var(--accent); }
.tabbar button:active svg { transform: scale(.9); }

#tab-dot {
  position: absolute;
  top: 7px;
  left: calc(50% + 7px);
  width: 7px;
  height: 7px;
  margin: 0;
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--bg);
}
#tab-dot[hidden] { display: none; }

/* ---------- пустые состояния и экраны ---------- */

.empty {
  padding: 42px 24px;
  text-align: center;
}
.empty-icon { font-size: 34px; margin-bottom: 10px; opacity: .85; }
.empty-title { font-size: 15px; font-weight: 650; margin-bottom: 5px; }
.empty-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 280px;
  margin: 0 auto;
}

.screen {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100vh;
  padding: 30px 28px;
  text-align: center;
  gap: 12px;
}
.screen-icon { font-size: 46px; }
.screen h2 { font-size: 19px; }
.screen p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
  max-width: 320px;
}
.screen p.dim { color: var(--dim-2); font-size: 12.5px; }

.id-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.id-chip span { font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.id-chip small { font-size: 11px; color: var(--dim-2); }
.id-chip:active { transform: scale(.97); }

/* ---------- скелет загрузки ---------- */

.sk-list { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.sk-row {
  height: 92px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .045) 40%, transparent 60%)
    var(--surface);
  background-size: 240% 100%;
  animation: shimmer 1.25s linear infinite;
}
@keyframes shimmer {
  from { background-position: 140% 0; }
  to { background-position: -60% 0; }
}

/* Плавное появление свопнутого фрагмента: без этого HTMX меняет содержимое
   рывком, и на глаз это читается как подвисание, а не как обновление. */
.view > *, .sheet-body > * { animation: rise .26s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.htmx-request .view { opacity: .55; transition: opacity .15s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Узкие экраны: 3 колонки показателей на 320px превращаются в кашу */
/* ---------- свои метки ---------- */

/* Разрез метки читается цветом. Названий на карточке и так хватает: если
   «Гамма» и «KZ» выглядят одинаково, глазу приходится вчитываться в каждую,
   чтобы понять, что перед ним оффер, а что гео. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.tg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .12s ease, background .16s ease;
}
.tg-offer { background: var(--accent-soft); color: #A9C4F8; border-color: rgba(91, 141, 239, .3); }
.tg-geo   { background: var(--good-soft);   color: #6FE0B4; border-color: rgba(43, 196, 138, .28); }
.tg-creo  { background: var(--warn-soft);   color: #F0C784; border-color: rgba(242, 176, 74, .28); }
.tg-other { background: var(--surface-2);   color: var(--dim); border-color: var(--line); }

/* Кнопка «поставить метку» не должна выглядеть как метка: пока её не нажали,
   она ничего не утверждает о кампании. */
.tg-add {
  background: transparent;
  color: var(--dim-2);
  border: 1px dashed var(--line);
}
.tg-add:active { transform: scale(.94); background: var(--surface-2); }

/* В листе разметки те же чипы — но там они переключатели, и выключенное
   состояние должно быть явно выключенным, а не просто бледным. */
.tagpick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tagpick .tg {
  padding: 7px 13px;
  font-size: 13px;
  background: var(--surface);
  color: var(--dim);
  border-color: var(--line);
  cursor: pointer;
}
.tagpick .tg:active { transform: scale(.95); }
.tagpick .tg.on.tg-offer { background: var(--accent-soft); color: #A9C4F8; border-color: rgba(91, 141, 239, .45); }
.tagpick .tg.on.tg-geo   { background: var(--good-soft);   color: #6FE0B4; border-color: rgba(43, 196, 138, .42); }
.tagpick .tg.on.tg-creo  { background: var(--warn-soft);   color: #F0C784; border-color: rgba(242, 176, 74, .42); }
.tagpick .tg.on.tg-other { background: var(--surface-3);   color: var(--text); border-color: var(--line); }
.tg-auto { font-style: normal; opacity: .6; font-size: 15px; line-height: 0; }

.tagedit { margin-top: 10px; }
.tagedit summary {
  font-size: 12px;
  color: var(--dim-2);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.tagedit summary::-webkit-details-marker { display: none; }
.tagedit summary::before { content: "⚙ "; }
.tagedit[open] summary { color: var(--dim); }
.tagedit form { display: flex; gap: 6px; margin-top: 6px; }
.tagedit input[name="rule"] { flex: 1; min-width: 0; }

.tagnew { display: flex; flex-direction: column; gap: 8px; }
.tagnew-row { display: flex; gap: 8px; }
.tagnew-row input { flex: 1; min-width: 0; }
.tagnew .primary { align-self: flex-start; }

.tagedit input, .tagnew input {
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.tagedit input:focus, .tagnew input:focus { border-color: rgba(91, 141, 239, .5); }
.tagedit input::placeholder, .tagnew input::placeholder { color: var(--dim-2); }

/* Выбранная метка в фильтре — единственный фильтр, который не виден по
   тексту кнопки целиком, поэтому подсвечиваем сам селект. */
.chip-sel.on select {
  background: var(--accent-soft);
  border-color: rgba(91, 141, 239, .45);
  color: #A9C4F8;
}

@media (max-width: 340px) {
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .stat.hero { grid-column: span 2; }
  .bar-row { grid-template-columns: 66px 1fr 62px; }
}