/* Общие токены и компоненты всех страниц. Подключается до <style> страницы,
   поэтому страница может уточнить любой компонент. Шапка — в nav.js. */

/* ---------- токены ---------- */
:root{
  --bg:#F7F7F9; --surface:#FFFFFF; --surface-2:#F1F1F4; --ink:#222025; --muted:#5E5C63; --faint:#9C9B9F; --line:#DCDCDF;
  --accent:#E3182E; --accent-2:#D0172B; --accent-soft:#FFF3F3;
  --up:#1E8F57; --up-soft:#DDF2E6; --down:#E3182E; --down-soft:#FFE4E6; --flat:#8E8C93; --new:#2E6BD8; --new-soft:#E2EBFB; --warn:#D9822B; --warn-soft:#FBEEDD;
  --f-display:"Montserrat","Golos Text",system-ui,sans-serif; --f-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"Montserrat",system-ui,sans-serif;
  --r:12px; --r-sm:8px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --sh-1:0 1px 3px rgba(34,32,37,.08); --sh-2:0 8px 28px rgba(34,32,37,.16);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141216; --surface:#1C1A1F; --surface-2:#242228; --ink:#F1F0F3; --muted:#A9A7AE; --faint:#77757C; --line:#323037;
  --accent:#FF4458; --accent-2:#E3182E; --accent-soft:#3A1A1F;
  --up:#4CC38A; --up-soft:#173327; --down:#FF4458; --down-soft:#3A1A1F; --flat:#8F8D94; --new:#7FA8EA; --new-soft:#1C2A40; --warn:#E9A24F; --warn-soft:#352A16;
  --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 8px 28px rgba(0,0,0,.5);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141216; --surface:#1C1A1F; --surface-2:#242228; --ink:#F1F0F3; --muted:#A9A7AE; --faint:#77757C; --line:#323037;
  --accent:#FF4458; --accent-2:#E3182E; --accent-soft:#3A1A1F;
  --up:#4CC38A; --up-soft:#173327; --down:#FF4458; --down-soft:#3A1A1F; --flat:#8F8D94; --new:#7FA8EA; --new-soft:#1C2A40; --warn:#E9A24F; --warn-soft:#352A16;
  --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 8px 28px rgba(0,0,0,.5);
  color-scheme:dark}

/* ---------- основа ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:6px 10px;min-width:0}
:where(button,a,input,select,textarea,.chip,.btn,tr[tabindex],th[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.up{color:var(--up)} .down{color:var(--down)}
.note{font-size:12px;color:var(--faint);line-height:1.45}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- страница ---------- */
.page{max-width:1180px;margin:0 auto;padding:20px var(--gutter) 40px;display:flex;flex-direction:column;gap:var(--s4)}
.page-title{font:italic 800 20px var(--f-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.bar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ---------- карточка ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h2,.card h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card h2 small,.card h3 small{font-weight:400;color:var(--faint);font-size:12px}

/* ---------- KPI-плитки (.kpis/.kpi — прежние имена на карте) ---------- */
.stats,.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stats.auto{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat,.kpi{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
:is(.stat,.kpi) .k{font-size:11.5px;color:var(--muted);line-height:1.25}
:is(.stat,.kpi) .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
:is(.stat,.kpi) .s{font-size:11.5px;color:var(--faint)}
@media (max-width:1100px){.stats:not(.auto),.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- сегментный переключатель ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);max-width:100%}
.seg button{border:0;background:transparent;padding:6px 10px;cursor:pointer;color:var(--muted);font-size:13px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* ---------- чипы ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:3px 10px;font-size:12px;cursor:pointer;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.chip .dot{width:8px;height:8px;border-radius:50%}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:var(--r-sm);padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line);font-weight:500}
.btn.sec:hover{background:var(--surface-2)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.55;cursor:default}

/* ---------- метки ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:2px 9px;font-size:12px;font-weight:500;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.pill.up{background:var(--up-soft);color:var(--up);border-color:transparent}
.pill.down{background:var(--down-soft);color:var(--down);border-color:transparent}
.pill.new{background:var(--new-soft);color:var(--new);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* ---------- таблицы ---------- */
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{font-weight:500;color:var(--faint);text-align:right;padding:6px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px}
td{padding:6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top;font-variant-numeric:tabular-nums}
th:first-child,td:first-child,th.l,td.l{text-align:left}
.tbl{overflow-x:auto;max-width:100%}
.card .tbl{margin:0 -14px;padding:0 14px}
.tbl th{position:sticky;top:0;background:var(--surface);z-index:1}
.tbl.scroll{max-height:min(70vh,640px);overflow:auto}
.tbl.txt :is(th,td){text-align:left}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-2)}

/* ---------- пустое состояние и загрузка ---------- */
.empty{padding:20px;text-align:center;color:var(--muted)}
.skeleton{display:block;border-radius:var(--r-sm);min-height:14px;background:linear-gradient(90deg,var(--surface-2) 0%,var(--line) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}