/* ============================================================================
   Нанодент · «Финансовый editorial» — единая дизайн-система портала.
   Единственный источник токенов, типографики и базовых компонентов.
   Подключается всеми шаблонами: <link rel="stylesheet" href="/assets/theme.css">
   Спека: docs/superpowers/specs/2026-06-15-frontend-redesign-financial-editorial-design.md
   ========================================================================== */

/* --- Шрифты (self-hosted woff2, кириллица+латиница) ----------------------- */
/* Golos Text 400 cyrillic */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/golostext-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Golos Text 400 latin */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/golostext-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Golos Text 500 cyrillic */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/golostext-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Golos Text 500 latin */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/golostext-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Golos Text 600 cyrillic */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/golostext-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Golos Text 600 latin */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/golostext-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Golos Text 700 cyrillic */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/golostext-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Golos Text 700 latin */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/golostext-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Lora 500 cyrillic */
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/lora-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Lora 500 latin */
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/lora-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Lora 600 cyrillic */
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/lora-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Lora 600 latin */
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/lora-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Lora 700 cyrillic */
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lora-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Lora 700 latin */
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lora-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Токены: светлая тема (по умолчанию) --------------------------------- */
:root{
  --bg:#f6f4f1; --panel:#ffffff; --panel-2:#f1eee9; --chip:#f1eee9;
  --ink:#15191e; --mut:#6c7682; --line:#e6e2dc;
  --brand:#c5303a; --accent:#b32531; --accent-soft:#f6e7e8;
  --good:#157a47; --bad:#b23b42; --warn:#b6701a;
  --font-display:'Lora',Georgia,'Times New Roman',serif;
  --font-sans:'Golos Text',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,25,30,.05);
  --sh-2:0 1px 2px rgba(20,25,30,.05),0 12px 32px rgba(20,25,30,.07);
  --sh-3:0 16px 44px rgba(20,25,30,.18);
  --dur:.18s; --ease:cubic-bezier(.2,.7,.2,1);
  --dot:rgba(20,25,30,.05);
}
[data-theme="dark"]{
  --bg:#101418; --panel:#191f25; --panel-2:#222a31; --chip:#222a31;
  --ink:#eceef1; --mut:#9aa6b2; --line:#2a323b;
  --brand:#ff5d66; --accent:#ff6b73; --accent-soft:#2a1518;
  --good:#3fc46f; --bad:#ff7b83; --warn:#f0a93b;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.42);
  --sh-3:0 18px 48px rgba(0,0,0,.55);
  --dot:rgba(255,255,255,.04);
}

/* --- База ----------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{max-width:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--font-sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);
  background-size:22px 22px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:28px} h2{font-size:18px} h3{font-size:15px}
.mut,.muted{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--good);font-weight:700;font-variant-numeric:tabular-nums}
.dn{color:var(--bad);font-weight:700;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* микро-подпись (метки KPI, шапки таблиц) */
.kicker,.lbl-caps{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:700}

.wrap{max-width:1180px;margin:0 auto;padding:var(--s-7) var(--s-6)}

/* --- Иконки (инлайн-SVG спрайт, currentColor) ---------------------------- */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:0 0 auto;
  stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* --- Шапка ---------------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:var(--s-3);height:58px;padding:0 var(--s-6);
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.logo,.brand-tile{width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;box-shadow:var(--sh-1);object-fit:cover}
.spacer{flex:1}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.iconbtn:hover{border-color:var(--accent);text-decoration:none}
.avatar{width:34px;height:34px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:13px}
/* переключатель темы: луна в светлой, солнце в тёмной */
.theme-sun{display:none}
[data-theme="dark"] .theme-moon{display:none}
[data-theme="dark"] .theme-sun{display:inline-block}

/* --- Карточки разделов (хаб) --------------------------------------------- */
.cards{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(264px,1fr));margin-top:var(--s-6)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);
  box-shadow:var(--sh-2);display:block;color:inherit;position:relative;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card.live{cursor:pointer}
.card.live:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--sh-3);text-decoration:none}
.card.dev{cursor:pointer}
.card.dev:hover{transform:translateY(-3px);border-color:var(--warn);box-shadow:var(--sh-3);text-decoration:none}
.card.soon{opacity:.6}
/* подзаголовок ряда-группы на хабе (Рабочие / В разработке / Скоро) */
.cards-group{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--mut);
  text-transform:uppercase;letter-spacing:.06em;margin:var(--s-6) 0 0}
.cards-group + .cards{margin-top:var(--s-3)}
.card .ic-tile{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:var(--s-3)}
.card .ic-tile .ic{width:24px;height:24px}
.card h3{font-family:var(--font-display);font-size:17px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.card p{margin:0;color:var(--mut);font-size:13px;line-height:1.45}
.badge{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);text-transform:lowercase}
.card.soon .badge{background:var(--panel-2);color:var(--mut)}
.card.dev .badge{background:var(--panel-2);color:var(--warn)}

/* --- KPI-карточка --------------------------------------------------------- */
.kpi{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-5) var(--s-4);box-shadow:var(--sh-2);overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.kpi .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:700}
.kpi .val{font-family:var(--font-display);font-size:clamp(28px,4vw,34px);font-weight:600;
  letter-spacing:-.02em;line-height:1.05;margin:10px 0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .cur{font-size:.62em;color:var(--mut);font-weight:600}
.kpi .sub{color:var(--mut);font-size:13px}
.kpi .row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}

/* пилюля дельты */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:3px 10px;
  border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.pill.up{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.pill.dn{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* --- Таблицы (единый стиль данных, липкие шапки) ------------------------- */
.tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r);max-height:72vh;-webkit-overflow-scrolling:touch}
.tw.tall{max-height:84vh}
table.data{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
table.data th,table.data td{padding:11px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line);background:var(--panel)}
table.data th{position:sticky;top:0;z-index:3;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);font-weight:700;background:var(--panel-2)}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data td.num{font-variant-numeric:tabular-nums;font-weight:600}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:var(--chip)}

/* --- Вкладки -------------------------------------------------------------- */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
.tab{padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--mut);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}

/* --- Чипы / кнопки -------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:2px 10px;font-size:12px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;background:var(--accent);color:#fff;
  font:inherit;font-weight:650;font-size:13.5px;padding:9px 15px;border-radius:var(--r-sm);text-decoration:none;
  transition:filter var(--dur) var(--ease)}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);filter:none}

/* --- Движение: оркестрированный reveal при загрузке ---------------------- */
@keyframes revealUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:revealUp .5s var(--ease) forwards}
.reveal:nth-child(1){animation-delay:.02s} .reveal:nth-child(2){animation-delay:.08s}
.reveal:nth-child(3){animation-delay:.14s} .reveal:nth-child(4){animation-delay:.20s}
.reveal:nth-child(5){animation-delay:.26s} .reveal:nth-child(6){animation-delay:.32s}
.reveal:nth-child(7){animation-delay:.38s} .reveal:nth-child(8){animation-delay:.44s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;animation:none}
  *{scroll-behavior:auto!important}
}