:root {
  --bg: #f5f5f7; --panel: #ffffff; --ink: #1d1d1f; --muted: #6e6e73;
  --line: #e2e2e6; --accent: #0a84ff; --accent-ink: #fff;
  --t1: #34c759; --t2: #8bd450; --t3: #ffcc00; --t4: #ff9f0a; --t5: #ff453a;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1c1e; --panel:#2c2c2e; --ink:#f5f5f7; --muted:#98989d;
          --line:#3a3a3c; --shadow:0 1px 3px rgba(0,0,0,.3); }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); padding-bottom: 24px;
}

/* topbar */
.topbar { display:flex; justify-content:space-between; align-items:center;
  padding: 14px 22px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; }
.brand { display:flex; gap:12px; align-items:center; }
.logo { font-size: 26px; color: var(--accent); }
.title { font-weight: 700; font-size: 17px; }
.sub { color: var(--muted); font-size: 12px; }
.head-right { display:flex; gap:12px; align-items:center; }
.snap { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.badge { font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; }
.badge-muted { background: var(--line); color: var(--muted); }
.badge-on { background: rgba(52,199,89,.16); color: #248a3d; }
@media (prefers-color-scheme: dark){ .badge-on{ color:#30d158; } }

/* toolbar */
.toolbar { display:flex; gap:10px; align-items:center; padding: 16px 22px 6px; flex-wrap: wrap; }
.btn { border:1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight:600;
  cursor:pointer; box-shadow: var(--shadow); transition: transform .05s, filter .15s; }
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.progress { display:flex; gap:10px; align-items:center; flex:1; min-width:220px; }
.progress-bar { flex:1; height:8px; background: var(--line); border-radius:6px; overflow:hidden; }
.progress-fill { height:100%; width:0; background: var(--accent); transition: width .3s; }
.progress-text { font-size:12px; color: var(--muted); white-space:nowrap;
  font-variant-numeric: tabular-nums; }

/* cards */
/* Карточки вдвое ниже: цифра, подпись и процент в одну строку — эта сводка
   справочная, вертикаль нужна таблице. */
.cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; padding: 8px 22px; }
.card { background: var(--panel); border-radius:10px; padding:7px 14px; box-shadow: var(--shadow);
  display:flex; align-items:baseline; gap:8px; }
.card .n { font-size: 19px; font-weight:700; font-variant-numeric: tabular-nums; line-height:1.1; }
.card .l { color: var(--muted); font-size:12px; }
.card .p { font-size:11px; color: var(--muted); margin-left:auto; }
.card.clickable { cursor:pointer; }
.card.active { outline: 2px solid var(--accent); }

/* tier bar */
.tiers { padding: 0 22px; }
/* --- строка разбора произвольного токена --- */
.probe { margin: 0 20px 14px; padding:14px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow); }
.probe-head { font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.probe-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.probe-input { flex:1; min-width:280px; padding:10px 14px; font-size:14px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); }
.probe-input:focus { outline:none; border-color:var(--accent); }
.probe-deep { white-space:nowrap; }

/* --- панель изменений между снапшотами --- */
.diff { margin: 0 20px 14px; padding:12px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow); }
.diff-head { font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.diff-line { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px; }
.diff-k { font-size:12px; color:var(--muted); min-width:150px; }
.move { font-size:12px; padding:2px 8px; border-radius:6px; background:var(--bg);
  border:1px solid var(--line); }
.move.up { color:#166534; border-color:#bbf7d0; background:#f0fdf4; }
.move.down { color:#991b1b; border-color:#fecaca; background:#fef2f2; }

.tierbar { display:flex; gap:6px; height:38px; }
.tierseg { flex:1; display:flex; align-items:center; justify-content:center; color:#111;
  font-size:13px; font-weight:700; cursor:pointer; border-radius:9px; box-shadow: var(--shadow); }
.tierseg.tierseg-off { opacity:.4; }
.tierseg span { padding:0 6px; white-space:nowrap; }

/* filters */
.filters { display:flex; gap:14px; align-items:center; padding: 16px 22px 8px; flex-wrap:wrap; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--panel); color:var(--muted);
  padding:5px 11px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; }
.chip.on { background: var(--accent); color:#fff; border-color:transparent; }
.filters-right { margin-left:auto; display:flex; gap:14px; align-items:center; }
.toggle { font-size:12px; color: var(--muted); display:flex; gap:6px; align-items:center; cursor:pointer; }
.search { border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:7px 12px; border-radius:9px; font-size:13px; width:220px; }

/* table */
/* Таблица — главный экран: жёстко 2/3 высоты окна, прокрутка внутри, шапка липнет
   к верху этого окна (position:sticky на thead ниже). Панель изменений живёт под
   таблицей и места сверху не отнимает. */
.table-wrap { height: 66vh; min-height: 340px; padding: 6px 22px 14px; overflow: auto; }
.grid { width:100%; border-collapse: separate; border-spacing:0; background:var(--panel);
  border-radius:14px; box-shadow: var(--shadow); }
/* скруглённые углы карточки без overflow:hidden — иначе thead ловит лишний scroll-контейнер */
.grid thead tr th:first-child { border-top-left-radius:14px; }
.grid thead tr th:last-child { border-top-right-radius:14px; }
.grid tbody tr:last-child td:first-child { border-bottom-left-radius:14px; }
.grid tbody tr:last-child td:last-child { border-bottom-right-radius:14px; }
.grid thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  color: var(--muted); padding:11px 10px; border-bottom:2px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 3; }
.grid td { padding:9px 10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
.grid tbody tr { cursor:pointer; }
.grid tbody tr:hover { background: rgba(10,132,255,.05); }
.grid .c { text-align:center; }
.grid .r { text-align:right; font-variant-numeric: tabular-nums; }
.tier-pill { display:inline-block; min-width:26px; text-align:center; padding:2px 7px;
  border-radius:6px; font-weight:700; font-size:12px; color:#111; }
.tp-T1{background:var(--t1)} .tp-T2{background:var(--t2)} .tp-T3{background:var(--t3)}
.tp-T4{background:var(--t4)} .tp-T5{background:var(--t5)} .tp-none{background:var(--line);color:var(--muted)}
.ver { font-size:11px; font-weight:600; color:var(--muted); vertical-align:super;
  font-variant-numeric: tabular-nums; }
.sym { font-weight:700; }
.rank { color: var(--muted); font-weight:500; font-size:11px; font-variant-numeric: tabular-nums; }

/* Потолок эмиссии и баланс давления */
.inf { font-size:16px; font-weight:700; color:#b45309; line-height:1; }
.pr { display:inline-block; padding:2px 7px; border-radius:6px; font-size:11px;
  font-weight:700; white-space:nowrap; }
.pr-good { background:#dcfce7; color:#166534; }
.pr-bad  { background:#fee2e2; color:#991b1b; }
.pr-none { background:var(--chip); color:var(--muted); font-weight:500; }
.pr-mid  { background:#fef3c7; color:#92400e; }
.th-mid  { background:#fef3c7; color:#92400e; }
.th-hi   { background:#fee2e2; color:#991b1b; }
.muted   { color: var(--muted); }
.model { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:12px;
  white-space: nowrap; }
.axis { font-size:14px; }
.flags { display:flex; gap:4px; flex-wrap:wrap; }
.fl { font-size:10px; padding:2px 6px; border-radius:5px; background:var(--line); color:var(--muted); font-weight:600; }
.fl.warn { background: rgba(255,159,10,.18); color:#c86a00; }
.fl.disagree { background: rgba(10,132,255,.15); color: var(--accent); }
.mech { color: var(--muted); max-width: 340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty { text-align:center; color:var(--muted); padding:50px; }

/* modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex;
  align-items:center; justify-content:center; z-index:40; padding:20px; }
.modal-card { background:var(--panel); border-radius:16px; max-width:640px; width:100%;
  max-height:82vh; overflow:auto; padding:24px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.3); position:relative; }
.modal-close { position:absolute; top:14px; right:16px; border:none; background:none;
  font-size:18px; color:var(--muted); cursor:pointer; }
.modal h2 { margin:0 0 14px; font-size:20px; }
.mrow { display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.mrow span { color:var(--muted); }
.mrow b { text-align:right; font-variant-numeric: tabular-nums; }
.mnote { margin-top:12px; padding:10px 12px; background:var(--bg); border-radius:9px;
  font-size:12px; line-height:1.55; color:var(--fg); }
.mnote b { color:var(--muted); }
.modal .kv { display:grid; grid-template-columns: 130px 1fr; gap:6px 14px; margin-top:14px; font-size:13px; }
.modal .kv .k { color:var(--muted); }
.modal .box { margin-top:14px; background:var(--bg); border-radius:10px; padding:12px 14px; font-size:12px; }
.modal .box .lbl { color:var(--muted); font-size:11px; text-transform:uppercase; margin-bottom:5px; }
/* Базовая справка: числа в две колонки, разряды выровнены по табличным цифрам. */
.modal .kv.basics { grid-template-columns: 150px 1fr; gap:4px 14px; }
.modal .kv.basics div:nth-child(even) { font-variant-numeric: tabular-nums; }
#links-body a { margin-right:2px; white-space:nowrap; }
.modal a { color: var(--accent); }

.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:10px;
  font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:60; }
.hidden { display:none !important; }

@media (max-width: 720px){ .cards{ grid-template-columns: repeat(2,1fr);} .mech{max-width:160px;} }

/* Справка о проекте в карточке */
.blurb { margin:12px 0 4px; padding:12px 14px; background:var(--bg);
  border-left:3px solid var(--accent); border-radius:8px; line-height:1.5;
  font-size:14px; color:var(--ink); }
.blurb-load { color:var(--muted); font-style:italic; }
.blurb-tag { color:var(--muted); font-size:11px; }

/* Единый поиск: подсказка под полем объясняет, что программа делает сейчас —
   смотрит таблицу или ушла считать онлайн (это десятки секунд). */
.find-hint { font-size:12px; color:var(--muted); margin-top:7px; min-height:15px; }

/* --- сортировка по клику на заголовок --- */
.grid thead th.sortable { cursor:pointer; user-select:none; }
.grid thead th.sortable:hover { color: var(--ink); }
.grid thead th[data-dir="asc"]::after  { content:" ▲"; font-size:9px; }
.grid thead th[data-dir="desc"]::after { content:" ▼"; font-size:9px; }

/* --- числовые фильтры --- */
.filters.numeric { padding: 4px 22px 8px; gap:12px; font-size:12px; }
.filters.numeric .num { width:64px; margin:0 4px; padding:4px 6px; font-size:12px;
  border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); }
.filters.numeric .btn { padding:5px 12px; font-size:12px; }

/* --- выбор строк для сравнения --- */
.sel-cell { width:28px; }
.grid tbody tr.row-err { background: rgba(255,69,58,.06); }
.grid tbody tr.row-err:hover { background: rgba(255,69,58,.12); }

/* --- обоснование: две строки вместо одной обрезанной ---
   Раньше был однострочный обрыв с многоточием — самое ценное (почему такой тир)
   прочитать было нельзя. Полный перенос раздувал строку таблицы на пол-экрана,
   поэтому ограничиваем двумя строками; целиком текст виден в подсказке и в карточке. */
.mech { color: var(--muted); max-width: 380px; white-space: normal;
  line-height:1.3; font-size:12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.mech-h { min-width: 240px; }

/* --- сравнение --- */
table.cmp { width:100%; border-collapse:collapse; margin-top:6px; font-size:13px; }
table.cmp th, table.cmp td { border-bottom:1px solid var(--line); padding:7px 9px;
  text-align:left; vertical-align:top; }
table.cmp thead th { font-weight:700; }
table.cmp .cmp-k { color:var(--muted); font-weight:600; width:150px; }
.cmp-sub { font-weight:400; font-size:11px; color:var(--muted); }

/* --- история --- */
table.hist { width:100%; border-collapse:collapse; font-size:12px; }
table.hist th { color:var(--muted); font-weight:600; text-align:left; padding:4px 8px; }
table.hist td { padding:4px 8px; border-top:1px solid var(--line); }
table.hist .r { text-align:right; font-variant-numeric: tabular-nums; }

/* --- причина смены тира в панели изменений --- */
.move .why { display:block; font-size:10px; opacity:.75; margin-top:1px; }

/* --- адреса контрактов: главное в шапке карточки --- */
#addr-box .addr-list { display:flex; flex-direction:column; gap:3px;
  max-height:150px; overflow:auto; }
.addr-row { display:flex; align-items:baseline; gap:10px; cursor:pointer;
  padding:3px 6px; border-radius:6px; transition:background .12s; }
.addr-row:hover { background: rgba(10,132,255,.08); }
.addr-row.copied { background: rgba(52,199,89,.18); }
.addr-chain { color:var(--muted); font-size:11px; min-width:120px;
  text-transform:capitalize; flex-shrink:0; }
.addr-val { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size:11px;
  word-break:break-all; color:var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────────
   Веб-специфика: экран ключа и панель ключей источников. Десктопной версии
   этого не нужно — там нет ни лицензий, ни чужих ключей.
   ───────────────────────────────────────────────────────────────────────── */

.btn-small { padding: 4px 10px; font-size: 12px; }

.as-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.as-gate.hidden { display: none; }
.as-gate-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 34px 32px; width: 100%; max-width: 420px; text-align: center;
  box-shadow: var(--shadow); position: relative;
}
.as-gate-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.as-gate-sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.as-gate-err { color: var(--t5); font-size: 13px; min-height: 18px; margin-bottom: 8px; }
.as-gate-input {
  width: 100%; padding: 11px 13px; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); font-size: 15px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.as-gate-input:focus { outline: none; border-color: var(--accent); }
.as-gate-btn {
  width: 100%; padding: 11px; border: none; border-radius: 9px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 600;
}
.as-gate-btn:hover { opacity: .9; }
.as-gate-btn-alt { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.as-gate-or {
  font-size: 12px; color: var(--muted); margin: 20px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.as-gate-or::before, .as-gate-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.as-gate-note { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.as-gate-note a { color: var(--accent); }

/* Панель ключей источников */
.as-keys-card { max-width: 480px; text-align: left; }
.as-keys-close {
  position: absolute; top: 12px; right: 12px; border: none; background: none;
  color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1;
}
.as-key-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.as-key-row:last-child { border-bottom: none; }
.as-key-name { font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.as-req, .as-opt {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  padding: 2px 6px; border-radius: 9px; vertical-align: middle;
}
.as-req { background: var(--t5); color: #fff; }
.as-opt { background: var(--line); color: var(--muted); }
.as-key-state { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--muted); }
.as-key-input {
  flex: 1; padding: 7px 10px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.as-key-input:focus { outline: none; border-color: var(--accent); }
.as-key-save, .as-key-del {
  border: none; border-radius: 7px; padding: 7px 12px; font-size: 12px;
  cursor: pointer; background: var(--accent); color: var(--accent-ink);
}
.as-key-del { background: transparent; color: var(--t5); border: 1px solid var(--line); }