/* ============================================================
   a6proxy — личный кабинет: собственная дизайн-система.

   ЭТО НЕ ОБЩИЙ ФАЙЛ С АДМИНКОЙ. Кабинет — публичный продуктовый сайт
   (894.wtf), у него своя плотность, свои состояния и своя аудитория
   (человек, который покупает API). Админка — инженерный пульт на 16
   колонок, доступный через SSH-туннель. Раньше оба фронта делили один
   panel.css: половина правил в нём была админской (сайдбар, прогрев,
   мерчанты) и просто ехала в кабинет мёртвым весом. Развязано.

   Принципы (emil-design-eng / make-interfaces-feel-better):
   - тени вместо бордеров для elevation; бордеры — только структура
     (разделители строк, контур полей ввода, границы таблиц);
   - концентрические радиусы: outer = inner + padding;
   - tabular-nums у ВСЕХ чисел (цены, токены, латентности) — иначе
     значения дёргают ширину при обновлении раз в 30с;
   - анимируются только transform/opacity/filter, ≤250мс, ease-out;
   - никакой анимации на высокочастотных действиях (переключение
     периода/вкладки, обновление) — только статичная смена состояния;
   - hover — только под (hover:hover) and (pointer:fine): на тач-экране
     :hover залипает после тапа;
   - контраст текста ≥4.5:1 (проверено tools/contrast_check.py, а не на глаз);
   - prefers-reduced-motion уважается.
   ============================================================ */

/* ---------- токены: светлая тема ---------- */
:root {
  /* поверхности: bg чуть темнее surface, чтобы карточки читались как
     объекты. В старой панели разница была 1.07:1 — карточки сливались. */
  --bg: oklch(0.972 0.004 262);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.964 0.005 262);
  --surface-3: oklch(0.942 0.007 262);
  --surface-inset: oklch(0.975 0.004 262);

  --ink: oklch(0.22 0.016 262);
  --ink-2: oklch(0.42 0.014 262);
  /* ink-3 = подписи, оси, мета. oklch(0.52) ≈ 5.2:1 на белом —
     прежний 0.63 давал 3.5:1 и валил AA для 11-12px текста. */
  --ink-3: oklch(0.52 0.012 260);

  --accent: oklch(0.55 0.16 265);
  --accent-hover: oklch(0.50 0.16 265);
  --accent-ink: oklch(0.45 0.14 265);
  --accent-soft: oklch(0.955 0.028 265);
  --on-accent: oklch(0.99 0 0);

  --ok: oklch(0.50 0.13 152);
  --ok-soft: oklch(0.955 0.045 152);
  --warn: oklch(0.52 0.12 70);
  --warn-soft: oklch(0.965 0.05 80);
  --bad: oklch(0.53 0.19 27);
  --bad-soft: oklch(0.958 0.035 27);

  --line: oklch(0.905 0.006 262);
  --line-strong: oklch(0.86 0.008 262);

  --r-xl: 18px;
  --r-l: 14px;
  --r-m: 10px;
  --r-s: 7px;

  --shadow-card:
    0 0 0 1px oklch(0 0 0 / 0.055),
    0 1px 2px -1px oklch(0 0 0 / 0.06),
    0 3px 8px -2px oklch(0 0 0 / 0.045);
  --shadow-card-hover:
    0 0 0 1px oklch(0 0 0 / 0.075),
    0 2px 4px -2px oklch(0 0 0 / 0.08),
    0 10px 24px -8px oklch(0 0 0 / 0.09);
  --shadow-pop:
    0 0 0 1px oklch(0 0 0 / 0.07),
    0 16px 40px -12px oklch(0.25 0.03 262 / 0.22),
    0 3px 8px -2px oklch(0 0 0 / 0.06);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --topbar-bg: oklch(1 0 0 / 0.82);
  --tooltip-bg: oklch(0.22 0.02 262);
  --tooltip-ink: oklch(0.98 0.004 260);

  color-scheme: light;
}

/* ---------- токены: тёмная тема ---------- */
:root[data-theme="dark"] {
  --bg: oklch(0.165 0.012 264);
  --surface: oklch(0.208 0.012 262);
  --surface-2: oklch(0.238 0.013 262);
  --surface-3: oklch(0.272 0.014 262);
  --surface-inset: oklch(0.19 0.012 262);

  --ink: oklch(0.945 0.005 260);
  --ink-2: oklch(0.78 0.01 260);
  --ink-3: oklch(0.685 0.012 260);

  --accent: oklch(0.68 0.15 266);
  --accent-hover: oklch(0.73 0.15 266);
  --accent-ink: oklch(0.82 0.1 266);
  --accent-soft: oklch(0.30 0.06 266);
  --on-accent: oklch(0.16 0.02 266);

  --ok: oklch(0.74 0.14 152);
  --ok-soft: oklch(0.29 0.055 152);
  --warn: oklch(0.79 0.12 78);
  --warn-soft: oklch(0.31 0.05 75);
  --bad: oklch(0.73 0.16 27);
  --bad-soft: oklch(0.32 0.06 27);

  --line: oklch(0.30 0.012 262);
  --line-strong: oklch(0.36 0.014 262);

  --shadow-card: 0 0 0 1px oklch(1 0 0 / 0.065), 0 2px 6px -2px oklch(0 0 0 / 0.5);
  --shadow-card-hover: 0 0 0 1px oklch(1 0 0 / 0.1), 0 10px 24px -8px oklch(0 0 0 / 0.6);
  --shadow-pop: 0 0 0 1px oklch(1 0 0 / 0.08), 0 16px 40px -12px oklch(0 0 0 / 0.7);

  --topbar-bg: oklch(0.165 0.012 264 / 0.8);
  --tooltip-bg: oklch(0.9 0.006 260);
  --tooltip-ink: oklch(0.19 0.015 262);

  color-scheme: dark;
}

/* ---------- база ---------- */
* { box-sizing: border-box; }
html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* серый блик по тапу = «это сайт» */
  overscroll-behavior-y: none;                /* pull-to-refresh не должен драться со скроллом */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 100dvh;                          /* 100vh на мобиле = высота БЕЗ адресной строки */
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.012em; }
p, li { text-wrap: pretty; }
button, input, select { font: inherit; color: inherit; }
button, a, [role="button"] { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
/* размер иконок задаётся здесь, а не атрибутами в разметке: один набор
   (stroke 2 под полужирный текст), масштабируется вместе с контекстом.
   Без этого правила SVG без width/height раздувается до 300×150. */
svg.ic { width: 16px; height: 16px; flex: none; }
svg.ic-lg { width: 18px; height: 18px; flex: none; }
.btn svg, .chip svg, .badge svg, .model-foot svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* только для скринридеров: сводка по графику и прочие текстовые эквиваленты */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 0 0 var(--line);
  /* safe-area: в standalone/PWA шапка не должна лезть под Dynamic Island */
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar-in {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, oklch(0.66 0.17 262), oklch(0.5 0.17 274));
  box-shadow: 0 1px 2px oklch(0.3 0.1 265 / 0.35);
}
.brand-text { min-width: 0; }
.brand-name { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.brand-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }

/* баланс в шапке кабинета: виден с любой вкладки, без скролла */
.balance-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.balance-chip .lbl { font-size: 11px; font-weight: 500; color: var(--ink-3); }

/* ============================================================
   КНОПКИ / ПЕРЕКЛЮЧАТЕЛИ
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: none; border-radius: var(--r-m);
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 550; white-space: nowrap;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition-property: box-shadow, background-color, transform, color;
  transition-duration: 140ms; transition-timing-function: var(--ease-out);
}
.btn:active { transform: scale(0.96); }          /* тактильный отклик на нажатие */
.btn.primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px oklch(0.4 0.15 265 / 0.3), 0 0 0 1px oklch(0.45 0.15 265 / 0.5);
}
.btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.cta-short { display: none; }
@media (max-width: 640px) { .cta-long { display: none; } .cta-short { display: inline; } }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-s); }
.btn.icon { width: 36px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: var(--shadow-card-hover); background: var(--surface-2); }
  .btn.primary:hover { background: var(--accent-hover); }
  .btn.ghost:hover { background: var(--surface-2); box-shadow: none; }
}

/* сегментированный переключатель: период графика, метрика, вкладки */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-m);
}
.seg button {
  border: none; background: transparent; color: var(--ink-2);
  height: 28px; padding: 0 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 550; cursor: pointer;
  transition-property: background-color, color, box-shadow;
  transition-duration: 130ms; transition-timing-function: var(--ease-out);
}
.seg button[aria-selected="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.08), 0 0 0 1px oklch(0 0 0 / 0.04);
}
.seg button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .seg button:hover:not([aria-selected="true"]) { color: var(--ink); }
}

/* ============================================================
   КАРКАС СТРАНИЦЫ
   ============================================================ */
.wrap { max-width: 1120px; margin: 0 auto; padding: 26px 24px 96px; }

/* ---------- витрина (до входа) ---------- */
.hero { padding: 40px 0 8px; }
.hero h1 {
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.1; letter-spacing: -0.025em; font-weight: 700;
  max-width: 20ch;
}
.hero .lead {
  margin: 14px 0 0; max-width: 56ch;
  font-size: 15.5px; color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* три честные цифры вместо обещаний */
.facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 26px; }
.fact { min-width: 0; }
.fact .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact .k { font-size: 12px; color: var(--ink-3); }

.section { margin-top: 44px; }
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h2 { font-size: 18px; font-weight: 650; }
.section-head .hint { font-size: 12.5px; color: var(--ink-3); }

/* панель вкладок липнет под шапкой: на телефоне после скролла к таблице
   до неё иначе не добраться, а на десктопе она остаётся в контексте */
.tabbar {
  position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20;
  background: var(--bg);
  padding: 14px 0 12px;
  margin: 0 auto;
  max-width: 1120px;
}
.tabbar .seg { background: var(--surface-2); }
@media (max-width: 900px) { .tabbar { top: calc(56px + env(safe-area-inset-top, 0px)); padding: 10px 0; } }

/* ============================================================
   КАРТОЧКИ / KPI
   ============================================================ */
.card {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 20px 22px; }
.card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.card-head h3 { font-size: 14px; font-weight: 650; }
.card-head .spacer { flex: 1; }
.card-head .hint { font-size: 12px; color: var(--ink-3); }

/* Сетка KPI. Раньше было 5 равновесных карточек + 3 вложенных — восемь
   блоков без иерархии. Теперь одно главное число (баланс) и статполоса. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi {
  background: var(--surface); border-radius: var(--r-l);
  padding: 13px 15px; box-shadow: var(--shadow-card);
}
.kpi .k { font-size: 11.5px; font-weight: 550; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* герой-баланс: единственное крупное число на экране */
.balance-hero {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 28px;
  padding: 22px 24px;
}
.balance-hero .amount {
  font-size: clamp(34px, 6vw, 46px); font-weight: 720; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.balance-hero .amount .cur { font-size: 0.55em; font-weight: 600; color: var(--ink-3); margin-right: 2px; }
.balance-hero .forecast { font-size: 13px; color: var(--ink-2); padding-bottom: 4px; }
.balance-hero .forecast b { color: var(--ink); font-weight: 650; }
.balance-hero .spacer { flex: 1; }

/* ============================================================
   СТАТУСЫ (доступность моделей, состояние сервиса)
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 23px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.mute { background: var(--surface-2); color: var(--ink-3); }
.badge.bad .dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--bad-soft); }
  50% { box-shadow: 0 0 0 5px var(--bad-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .badge.bad .dot { animation: none; }
}

/* строка состояния сервиса под балансом: одна фраза, не панель алертов */
.statusline {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
}
.statusline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.statusline.warn .dot { background: var(--warn); }
.statusline.bad .dot { background: var(--bad); }

/* ============================================================
   МОДЕЛИ (общий компонент витрины и кабинета)
   ============================================================ */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.model {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition-property: box-shadow, transform;
  transition-duration: 160ms; transition-timing-function: var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .model:hover { box-shadow: var(--shadow-card-hover); }
}
.model-top { display: flex; align-items: flex-start; gap: 10px; }
.model-name { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.model-vendor { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.model-top .badge { margin-left: auto; }
.model-desc { margin: 0; font-size: 12.8px; color: var(--ink-2); line-height: 1.5; }
.model-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px; margin: 0; padding-top: 2px;
}
.model-specs > div { min-width: 0; }
.model-specs dt { font-size: 11px; color: var(--ink-3); }
.model-specs dd {
  margin: 1px 0 0; font-size: 13px; font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.model-specs dd .sep { color: var(--ink-3); font-weight: 400; padding: 0 2px; }
.model-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line);      /* структурная граница, не декор */
  font-size: 11.5px; color: var(--ink-3);
}
.model-foot .spacer { flex: 1; }
.model-foot a { font-weight: 550; }
/* свои цифры по модели — только в кабинете */
.model-mine {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 12px; color: var(--ink-2);
  background: var(--surface-inset); border-radius: var(--r-m);
  padding: 8px 10px;
}
.model-mine b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

/* цена в карточке — двумя строками: «вход …» / «выход …». Одной строкой
   полосы переносились посреди числа («out $0.030–» на новой строке). */
.price-lines { display: flex; flex-direction: column; gap: 1px; }
.price-lines .pl { display: flex; gap: 6px; align-items: baseline; }
.price-lines .pl span:first-child { color: var(--ink-3); font-weight: 400; }

/* ============================================================
   ГРАФИК (свой SVG, без библиотек)
   ============================================================ */
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; overflow: visible; }
.chart-box .grid-line { stroke: var(--line); stroke-width: 1; }
.chart-box .axis-label { fill: var(--ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart-box .area { fill: url(#areaFill); }
.chart-box .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-box .cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.chart-box .pt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; opacity: 0; }
.chart-box .cross.on, .chart-box .pt.on { opacity: 1; }
.chart-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--tooltip-bg); color: var(--tooltip-ink);
  border-radius: 9px; padding: 7px 10px;
  font-size: 12px; line-height: 1.5; white-space: nowrap;
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, -100%);
  opacity: 0; transition: opacity 90ms linear;
}
.chart-tip.on { opacity: 1; }
.chart-tip .t { color: var(--tooltip-ink); opacity: 0.75; font-size: 11px; }
.chart-tip .v { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- список запросов для узких экранов ----------
   Таблица из 7 колонок на телефоне превращается в горизонтальный скролл,
   где половина значений не видна и нет никакого признака, что там что-то
   есть. Ниже 640px рисуем строки-карточки (см. recentList в user.js). */
.reqlist { display: flex; flex-direction: column; }
.reqrow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 11px 16px; border-top: 1px solid var(--line);
}
.reqrow:first-child { border-top: none; }
.reqrow .r1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.reqrow .mname { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reqrow .when { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.reqrow .amt { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.reqrow .amt.plus { color: var(--ok); }
.reqrow .r2 { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; grid-column: 1 / -1; }
.reqrow .r2 b { color: var(--ink-2); font-weight: 600; }

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td {
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
td.r, th.r { text-align: right; }
tbody tr { transition: background-color 100ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  tbody tr:hover { background: var(--surface-2); }
}
/* первая колонка — якорь строки при горизонтальном скролле на телефоне */
.tbl-sticky th:first-child, .tbl-sticky td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 0 var(--line);
}
td.muted { color: var(--ink-3); }
td .note { color: var(--ink-3); font-size: 12px; }
.kind { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.kind.topup { color: var(--ok); }

/* ============================================================
   ПОДКЛЮЧЕНИЕ (base url, ключ, curl, лимиты)
   ============================================================ */
.field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-row + .field-row { margin-top: 10px; }
.field-row .lbl { font-size: 12px; color: var(--ink-3); min-width: 84px; }
.code-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-inset); border-radius: var(--r-m);
  padding: 5px 10px; max-width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; overflow-wrap: anywhere;
}
.snippet {
  margin: 14px 0 0; padding: 13px 15px;
  background: var(--surface-inset); border-radius: var(--r-m);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.65; color: var(--ink-2);
  white-space: pre; overflow-x: auto; overscroll-behavior-x: contain;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 550; white-space: nowrap;
}
.limits { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.limits b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

/* ============================================================
   ВХОД
   ============================================================ */
.login-card { max-width: 460px; }
.login-card .card-pad { padding: 26px 28px; }
.login-card h2 { font-size: 19px; font-weight: 680; }
.login-card .sub { margin: 6px 0 20px; font-size: 13px; color: var(--ink-2); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input {
  width: 100%; height: 42px; padding: 0 13px;
  /* 16px минимум: iOS Safari зумит страницу на инпутах с меньшим шрифтом
     и не возвращает масштаб назад */
  font-size: 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  transition-property: border-color, box-shadow;
  transition-duration: 140ms; transition-timing-function: var(--ease-out);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.55 0.16 265 / 0.16); }
.field.invalid input { border-color: var(--bad); }
.field .err { display: none; margin-top: 6px; font-size: 12px; color: var(--bad); }
.field.invalid .err { display: block; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin: 2px 0 18px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.login-note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ============================================================
   ПУСТЫЕ СОСТОЯНИЯ / АЛЕРТЫ / СКЕЛЕТОНЫ
   ============================================================ */
.empty { padding: 26px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.empty .t { color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: var(--r-m);
  background: var(--bad-soft); color: var(--bad);
  font-size: 12.8px; font-weight: 550; line-height: 1.45;
}
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert svg { flex: none; margin-top: 1px; }

.skel {
  border-radius: var(--r-m); background: var(--surface-2);
  position: relative; overflow: hidden;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.55), transparent);
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}
:root[data-theme="dark"] .skel::after {
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.05), transparent);
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ============================================================
   ТОСТЫ
   ============================================================ */
#toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  /* safe-area: на iPhone тост не должен уезжать под home-indicator */
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  z-index: 100; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--tooltip-bg); color: var(--tooltip-ink);
  border-radius: var(--r-m); padding: 10px 15px;
  font-size: 13px; font-weight: 550;
  box-shadow: var(--shadow-pop); pointer-events: auto;
  max-width: min(420px, calc(100vw - 32px));
  opacity: 1; transform: translateY(0);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(10px); } }
.toast.hide { opacity: 0; transform: translateY(6px); }
.toast.error { background: var(--bad); color: #fff; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 900px) {
  .wrap { padding: 18px 16px 88px; }
  .topbar-in { padding: 0 16px; height: 56px; }
  .hero { padding: 26px 0 4px; }
  .section { margin-top: 32px; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  /* KPI в две колонки: одна колонка растягивала страницу до 2300px */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 19px; }
  .models { grid-template-columns: 1fr; }
  .model-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balance-hero { padding: 18px 18px; }
  .card-pad { padding: 16px 16px; }
  /* в шапке кабинета остаются только иконки (у них есть aria-label);
     CTA витрины сохраняет короткую подпись — это главное действие */
  .btn-label { display: none; }
  .cta-long { display: none; }
  .brand-sub { display: none; }
  .field-row .lbl { min-width: 0; }
  .tbl-wrap table { min-width: 560px; }
  .section-head h2 { font-size: 16.5px; }
  /* на узком экране название бренда не влезает рядом с балансом —
     остаётся только марка, как в мобильных приложениях */
  .brand-text { display: none; }
  .topbar-in { gap: 6px; }
  .balance-chip .lbl { display: none; }
  /* curl в одну строку на 390px — это скрытый горизонтальный скролл;
     переносим, чтобы команда читалась целиком */
  .snippet { white-space: pre-wrap; word-break: break-word; }
  /* «показать ещё» — на всю ширину внизу карточки, а не справа в заголовке */
  .card-head .more-btn { order: 10; width: 100%; justify-content: center; margin-top: 4px; }
}

/* уважение к prefers-reduced-motion: убираем движение, оставляем смену цвета */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skel::after { animation: none; }
}