/* ── Токены ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --page: #f4f3f0;
  --surface-1: #fcfcfb;
  --surface-2: #efeee9;
  --border: #e2e0da;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #8a8984;
  --grid: #ebe9e4;
  /* Единая приглушённая гамма: акцент и линии — из одной палитры, шкала напряжения — без неона.
     Все наборы проверены валидатором палитр (полоса светлоты, насыщенность, различимость при дальтонизме по всем парам). */
  --accent: #3b6ea5;
  --accent-soft: #e6edf5;
  /* Шкала «мягче ↔ жёстче»: шалфей — нейтральный (медиана окна) — охра — кирпич. CVD ΔE ≥ 9,6 по всем парам. */
  --calm: #3aa583;
  --mid: #e2dfd5;
  --warm: #c8902e;
  --hot: #b4473f;
  --calm-soft: rgba(58, 165, 131, .16);
  --hot-soft: rgba(180, 71, 63, .16);
  --calm-ink: #23785e;
  --hot-ink: #9c3a33;
  --neutral-hi: #52514e;
  /* Линии на графиках — категориальные цвета по порядку: синий, терракота, шалфей, охра, пыльная роза. */
  --s1: #3b6ea5; --s2: #b5532f; --s3: #3d8a5f; --s4: #c49332; --s5: #c483b4;
  --episode: rgba(110, 110, 100, .2);
  --band: rgba(59, 110, 165, .08);
  --band-line: rgba(59, 110, 165, .45);
  --spark: #8a8984;
  --ago: #9a9891;
  --warning: #d6a440;
  --warning-ink: #7a5a1c;
  --warning-bg: #f7efdc;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 2px 8px rgb(0 0 0 / .04);
  --scale: linear-gradient(in oklab to right, var(--calm), var(--mid) 50%, var(--warm) 75%, var(--hot));
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #121211; --surface-1: #1a1a19; --surface-2: #242422; --border: #2f2f2c;
    --ink-1: #f0efec; --ink-2: #c3c2b7; --ink-3: #8f8e86; --grid: #262624;
    --accent: #4c8fd8; --accent-soft: #1d2a3a;
    --calm: #2f9a78; --mid: #3b3a36; --warm: #b5862a; --hot: #b04a44;
    --calm-soft: rgba(47, 154, 120, .18); --hot-soft: rgba(176, 74, 68, .18);
    --calm-ink: #6cc7a6; --hot-ink: #e3928a; --neutral-hi: #d8d6cf;
    --s1: #4c8fd8; --s2: #99533b; --s3: #419363; --s4: #b68b16; --s5: #c96fa4;
    --episode: rgba(200, 200, 190, .18); --band: rgba(76, 143, 216, .12); --band-line: rgba(76, 143, 216, .55);
    --spark: #77766f; --ago: #77766f;
    --warning: #b68b16; --warning-ink: #d9b25a; --warning-bg: #33291a;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #121211; --surface-1: #1a1a19; --surface-2: #242422; --border: #2f2f2c;
  --ink-1: #f0efec; --ink-2: #c3c2b7; --ink-3: #8f8e86; --grid: #262624;
  --accent: #4c8fd8; --accent-soft: #1d2a3a;
  --calm: #2f9a78; --mid: #3b3a36; --warm: #b5862a; --hot: #b04a44;
  --calm-soft: rgba(47, 154, 120, .18); --hot-soft: rgba(176, 74, 68, .18);
  --calm-ink: #6cc7a6; --hot-ink: #e3928a; --neutral-hi: #d8d6cf;
  --s1: #4c8fd8; --s2: #99533b; --s3: #419363; --s4: #b68b16; --s5: #c96fa4;
  --episode: rgba(200, 200, 190, .18); --band: rgba(76, 143, 216, .12); --band-line: rgba(76, 143, 216, .55);
  --spark: #77766f; --ago: #77766f;
  --warning: #b68b16; --warning-ink: #d9b25a; --warning-bg: #33291a;
  --shadow: none;
}

/* ── База ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { background: var(--page); }
body {
  margin: 0 auto; max-width: 1480px; padding: 0 16px 56px;
  background: var(--page); color: var(--ink-1);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.hot { color: var(--hot-ink); }
.calm { color: var(--calm-ink); }
.ghost { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.ghost:hover { background: var(--surface-2); }
.ghost.icon { padding: 4px 9px; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; }
.ghost.icon svg { display: block; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.card h2 { margin-bottom: 10px; }
.card-note, .note { color: var(--ink-3); font-size: 12px; margin: 6px 0 10px; }
.note { margin: 14px 0; }
.loading, .error, .empty-note { padding: 18px; color: var(--ink-2); }
.empty-note { padding: 12px 0; font-size: 12px; color: var(--ink-3); }
.error { color: var(--warning-ink); }
.warn { font-size: 12px; color: var(--warning-ink); background: var(--warning-bg); border-radius: 6px; padding: 3px 7px; }
.warn.subtle { background: none; padding: 0; color: var(--ink-3); }
code { font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
td.n, .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pill { display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 999px; padding: 2px 9px; font-size: 12px; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.warn-pill { background: var(--warning-bg); color: var(--warning-ink); }
.ok-pill { background: var(--surface-2); color: var(--ink-2); }
.accent-pill { background: var(--accent); color: #fff; }
.flag-pill { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand-home { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.x-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 10px 3px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--ink-1); font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .15s, background .15s; }
.x-link svg { display: block; }
.x-link:hover { border-color: var(--ink-3); background: var(--surface-2); }
.logo { width: 26px; height: 29px; margin: -3px -4px -3px -4px; }
.top-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Светофор в шапке ───────────────────────────────────────────────────── */

/* ── Сводные индексы ────────────────────────────────────────────────────── */
.composites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.comp-card { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 10px; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.comp-card:hover { border-color: var(--ink-3); }
.comp-card header { display: flex; flex-direction: column; gap: 1px; }
.comp-card header .muted { font-size: 12px; }
.comp-main, .idx-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comp-val { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.comp-word { font-size: 17px; font-weight: 650; }
.comp-chg { font-size: 12px; color: var(--ink-2); }
.gauge.big { height: 18px; }
.gauge.big .track { top: 6px; height: 6px; border-radius: 3px; opacity: .75; }
.gauge.big .mark { height: 18px; width: 10px; margin-left: -5px; }
.gauge.inv .track { background: linear-gradient(in oklab to left, var(--calm), var(--mid) 50%, var(--warm) 75%, var(--hot)); }
canvas.comp-spark { width: 100%; height: 34px; display: block; }
.comp-stat { margin: 0; font-size: 12px; color: var(--ink-2); }
.idx-list { display: grid; gap: 12px; margin-top: 8px; }
.idx-card { position: relative; overflow: hidden; }
.idx-card header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 4px; }
.idx-card header p { margin: 2px 0 0; font-size: 13px; }
.idx-card h3 { font-size: 17px; }
.idx-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; margin-top: 12px; }
.idx-body h4 { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.idx-comps { display: grid; gap: 7px; margin-bottom: 16px; }
.idx-comp { display: grid; grid-template-columns: minmax(0, 1fr) 140px 44px; gap: 10px; align-items: center; font-size: 13px; border-radius: 6px; }
.idx-comp[data-tile] { cursor: pointer; }
.idx-comp[data-tile]:hover { background: var(--surface-2); }
.idx-comp-name small { display: block; font-size: 11px; }
.idx-comp-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.idx-comp-bar { display: block; height: 100%; border-radius: 5px; }
.idx-comp-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Строка состояния ───────────────────────────────────────────────────── */
.usage { font-size: 13px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin-top: 12px; }
.usage a { color: var(--accent); }
.usage ul { margin: 4px 0 0; padding-left: 18px; }
table.mini { border-collapse: collapse; }
table.mini td { padding: 2px 14px 2px 0; }

/* ── Вкладки ────────────────────────────────────────────────────────────── */
/* Лента вкладок прилипает к верху: на длинных страницах до разделов не нужно прокручивать назад. */
.tabs { display: flex; gap: 2px; margin: 6px 0 14px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 0; z-index: 30; background: var(--page); }
.tabs::-webkit-scrollbar { display: none; }
.tab-sep { flex: 0 0 1px; align-self: stretch; margin: 9px 6px; background: var(--border); }
.tabs button, .tabs a { background: none; text-decoration: none; border: none; padding: 9px 12px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button:hover, .tabs a:hover { color: var(--ink-1); }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { color: var(--ink-1); border-bottom-color: var(--accent); font-weight: 600; }
.tab-n { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.tab-count { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; }

/* ── Шкала положения ────────────────────────────────────────────────────── */
.gauge { position: relative; height: 14px; margin: 2px 0; }
.gauge .track { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; background: var(--scale); opacity: .6; }
.gauge.neutral .track { background: linear-gradient(in oklab to right, var(--neutral-hi), var(--mid), var(--neutral-hi)); }
.gauge.empty .track { background: var(--surface-2); opacity: 1; }
.gauge .mark { position: absolute; top: 0; width: 8px; height: 14px; margin-left: -4px; border-radius: 4px; box-shadow: 0 0 0 2px var(--surface-1); }
.gauge-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; margin: 10px 0; }
.legend-bar { width: 160px; height: 8px; border-radius: 4px; background: var(--scale); }
.legend-neutral { width: 60px; height: 8px; border-radius: 4px; background: linear-gradient(in oklab to right, var(--neutral-hi), var(--mid), var(--neutral-hi)); }
.legend-sep { width: 1px; height: 14px; background: var(--border); margin: 0 4px; }

/* ── Обзор: цепочка ─────────────────────────────────────────────────────── */
.chain { display: flex; align-items: stretch; }
.stage { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 12px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.stage:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.stage header { display: flex; align-items: center; gap: 8px; }
.stage-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-1); color: var(--surface-1); font-size: 12px; font-weight: 700; flex: none; }
.stage-n.small { width: 18px; height: 18px; font-size: 11px; }
.stage-q { margin: 0; color: var(--ink-2); font-size: 12px; min-height: 34px; }
.stage-word { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.stage-word b { font-size: 19px; font-weight: 650; }
.stage-word[data-rule] { cursor: help; text-decoration: underline dotted var(--ink-3); text-underline-offset: 5px; }
.stage-since { font-size: 11px; color: var(--ink-3); margin-top: -4px; }
.stage-word-title { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; text-decoration: none; }
.stage.two-words .stage-word { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; }
.stage.two-words .stage-word b { font-size: 16px; }
.two-levels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.levels-title { font-size: 13px; margin: 4px 0 10px; }
.flow-row.sub-row .flow-name { padding-left: 14px; color: var(--ink-2); }
.ribbon { display: grid; height: 8px; gap: 0; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.ribbon.placeholder { visibility: hidden; }
.ribbon i { display: block; }
.keys { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.keys li { display: grid; grid-template-columns: 1fr auto; column-gap: 6px; border-radius: 8px; padding: 3px 4px; margin: 0 -4px; }
.keys li:hover { background: var(--surface-2); }
.k-name { font-size: 12px; color: var(--ink-2); line-height: 1.25; }
.k-val { font-weight: 600; font-size: 13px; white-space: nowrap; }
.k-val small { font-weight: 400; color: var(--ink-3); }
.keys .gauge { grid-column: 1 / -1; }
.heatstrip { display: flex; gap: 2px; margin-top: auto; padding-top: 6px; }
.heatstrip i { flex: 1; height: 10px; border-radius: 2px; }
.heatstrip i:hover { outline: 2px solid var(--ink-1); }
.chain-arrow { flex: 0 0 20px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 16px; }

.ov-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-top: 4px; }
.changes, .flags { list-style: none; margin: 0; padding: 0; }
.changes li { display: grid; grid-template-columns: 18px 44px minmax(0, 1fr); column-gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--grid); cursor: pointer; align-items: baseline; }
.changes li:hover { background: var(--surface-2); }
.changes li:last-child { border-bottom: none; }
.ch-icon { text-align: center; }
.ch-icon.hot { color: var(--hot); }
.ch-icon.calm { color: var(--calm-ink); }
.ch-date { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ch-title { font-weight: 600; }
.ch-text { grid-column: 3; font-size: 13px; color: var(--ink-2); }
.flags li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 8px 4px; border-bottom: 1px solid var(--grid); cursor: pointer; }
.flags li:hover { background: var(--surface-2); }
.flags li:last-child { border-bottom: none; }
.flags li.active .fl-state { color: var(--accent); }
.flags li.active .fl-pair { font-weight: 650; }
.fl-meta { font-size: 12px; color: var(--ink-3); }
.flags .hb { grid-column: 2 / -1; }
.how { margin-top: 12px; }
.how ol { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 4px; }
.more-btn { margin-top: 12px; text-align: left; }

.hb { display: grid; gap: 3px; font-size: 12px; }
.hb-row { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 8px; }
.hb.compact .hb-row { grid-template-columns: 84px 1fr 36px; }
.hb-label { color: var(--ink-3); }
.hb-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.hb-bar i { display: block; height: 100%; background: var(--ink-3); border-radius: 3px; }
.hb-bar i.hot { background: var(--hot); }
.hb-val { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Обзор: «Сейчас», рынки, цепочка ───────────────────────────────────── */
.now { margin-bottom: 12px; }
.now h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 6px; }
.now ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }
.section-title { display: flex; align-items: center; gap: 10px; }
.small-btn { font-size: 12px; padding: 2px 8px; font-weight: 400; }
/* Рынки на обзоре — одной строкой; на узком экране строка прокручивается вбок. */
.mstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.mcell { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; box-shadow: var(--shadow); min-width: 0; }
.mcell:hover { border-color: var(--ink-3); }
.mc-name { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-val { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mc-chg { font-size: 11px; display: flex; gap: 4px; align-items: center; font-variant-numeric: tabular-nums; }
.mc-chg span:not(.muted) { border-radius: 4px; padding: 0 4px; }
canvas.mc-spark { width: 100%; height: 26px; display: block; margin-top: 2px; }
.chips { display: flex; align-items: stretch; gap: 0; }
.chip { flex: 1 1 0; min-width: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: var(--shadow); }
.chip:hover { border-color: var(--ink-3); }
.chip header { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.chip-words { display: flex; flex-direction: column; gap: 3px; min-height: 40px; }
.ch-word { display: flex; flex-direction: column; line-height: 1.2; }
.ch-word[data-rule] b { text-decoration: underline dotted var(--ink-3); text-underline-offset: 4px; cursor: help; }
.ch-word small { font-size: 11px; color: var(--ink-3); }
.ch-word b { font-size: 15px; }
.chip .heatstrip { margin-top: auto; padding-top: 0; }
.chip-arrow { flex: 0 0 16px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.fl-stat { grid-column: 2 / -1; font-size: 12px; }

/* ── Рынки ──────────────────────────────────────────────────────────────── */
.mkt-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--page); padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.mkt-nav a { color: var(--ink-1); text-decoration: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.mkt-nav a:hover { border-color: var(--ink-3); }
.mkt-win { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.mkt-sec { scroll-margin-top: 56px; margin-bottom: 8px; }
.mkt-sec .stories, .mkt-sec .story.wide { margin-bottom: 12px; }
.mkt-sec .table-card { margin-bottom: 12px; }
table.mkt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mkt th, table.mkt td { padding: 6px 9px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: middle; }
table.mkt thead th { font-size: 12px; color: var(--ink-2); background: var(--surface-2); font-weight: 600; }
table.mkt td.chgc { font-variant-numeric: tabular-nums; }
.table-foot { font-size: 11px; padding: 6px 10px; }
.sector-bars { display: grid; gap: 6px; margin-top: 8px; }
.sb-row { display: grid; grid-template-columns: 260px 1fr 80px; gap: 10px; align-items: center; font-size: 13px; }
.sector-bars + .table-card, .card + .table-card { margin-top: 12px; }

/* ── Страницы звеньев ───────────────────────────────────────────────────── */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.page-title { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 6px; flex-wrap: wrap; }
.page-q { font-weight: 400; color: var(--ink-2); font-size: 15px; }
.page-word { background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; margin: 0 6px 4px 0; font-size: 13px; }
.page-word:hover { border-color: var(--ink-3); }
.controls { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.summary { margin-bottom: 12px; }
.summary h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 6px; }
.summary ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.summary b { font-weight: 650; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 9px; box-shadow: var(--shadow); overflow: hidden; }
.kpi:hover { border-color: var(--ink-3); }
.kpi.stale { border-color: var(--warning); }
.kpi-title { font-size: 12px; color: var(--ink-2); line-height: 1.25; min-height: 30px; }
.kpi-val { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.kpi-val small { font-size: 12px; font-weight: 400; color: var(--ink-2); margin-left: 1px; }
.kpi-chg { font-size: 12px; }
.kpi-pct { font-size: 11px; color: var(--ink-3); }

.stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.story { min-width: 0; }
.story.wide { grid-column: 1 / -1; }
.stories-sub { grid-column: 1 / -1; margin: 10px 0 -2px; padding-top: 10px; border-top: 1px solid var(--border); }
.stories-sub h3 { font-size: 16px; }
.stories-sub p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.story h3 { font-size: 15px; }
.story-note { margin: 4px 0 8px; color: var(--ink-2); font-size: 12px; max-width: 900px; }
.story-chart { position: relative; min-height: 120px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.chart-legend b { color: var(--ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-host { position: relative; }
.key-now { color: var(--accent); }
.key-ago { color: var(--ago); margin-left: 8px; }

.section-title { font-size: 15px; margin: 18px 0 8px; }
.sub-title { font-size: 13px; color: var(--ink-2); margin: 12px 0 6px; }
table.ind { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ind th, table.ind td { padding: 7px 10px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: middle; }
table.ind thead th { font-size: 12px; color: var(--ink-2); background: var(--surface-2); font-weight: 600; }
table.ind tbody tr { cursor: pointer; }
table.ind tbody tr:hover td { background: var(--surface-2); }
table.ind td.pos { min-width: 170px; font-size: 11px; }
.ind-name { font-weight: 500; }
canvas.mini { width: 130px; height: 28px; display: block; }

.cot { display: grid; gap: 8px; max-width: 900px; }
.cot-row { display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px; align-items: center; cursor: pointer; border-radius: 8px; padding: 2px 4px; }
.cot-row:hover { background: var(--surface-2); }
.cot-name { font-size: 13px; }
.cot-track { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; }
.cot-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.cot-bar { position: absolute; top: 4px; height: 10px; border-radius: 3px; background: var(--neutral-hi); opacity: .55; }
.cot-dot { position: absolute; top: 1px; width: 6px; height: 16px; margin-left: -3px; border-radius: 3px; background: var(--ink-1); box-shadow: 0 0 0 2px var(--surface-1); }
.cot-val { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cot-axis { display: grid; grid-template-columns: 150px 1fr 1fr 1fr 150px; font-size: 11px; color: var(--ink-3); }
.cot-axis span:nth-child(1) { grid-column: 2; }
.cot-axis span:nth-child(2) { text-align: center; }
.cot-axis span:nth-child(3) { text-align: right; }

.flow { display: grid; gap: 10px; }
.flow-row { display: grid; grid-template-columns: 170px 1fr 120px; gap: 10px; align-items: center; font-size: 13px; }
.flow-row.total { border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; }
.flow-row.sub { font-weight: 600; color: var(--ink-2); }
.flow-name small { display: block; font-weight: 400; font-size: 11px; }
.flow-bar.neutral.plus { background: var(--s1); }
.flow-bar.neutral.minus { background: var(--s2); }
.flow-track { position: relative; height: 16px; background: var(--surface-2); border-radius: 4px; }
.flow-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.flow-bar { position: absolute; top: 2px; height: 12px; border-radius: 3px; }
.flow-bar.plus { background: var(--calm); }
.flow-bar.minus { background: var(--hot); }
.flow-val { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Карта ──────────────────────────────────────────────────────────────── */
.screen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.screen-q { margin: 0 0 4px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; max-width: 820px; }
.seg { display: inline-flex; }
.seg button { background: var(--surface-1); border: 1px solid var(--border); padding: 4px 11px; margin-left: -1px; font-size: 13px; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button[aria-pressed="true"] { background: var(--surface-2); font-weight: 600; }
.heat-card { padding: 10px 12px; }
.heat { position: relative; min-height: 200px; }

/* ── Расхождения ────────────────────────────────────────────────────────── */
.div-list { display: grid; gap: 12px; margin-top: 10px; }
.div-card header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.div-card header h3 { font-size: 16px; margin-right: 4px; }
.div-card.active { border-color: var(--accent); }
.cond { margin: 6px 0 10px; color: var(--ink-2); }
.div-body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.div-body h4 { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.div-inputs div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.div-inputs b { font-weight: 600; white-space: nowrap; }
.kpi-line { margin-bottom: 8px; }
.kpi-line b { font-size: 20px; }
.verdict { margin: 8px 0 0; font-size: 13px; }
.div-chart { margin-top: 12px; position: relative; }
details.eps { margin-top: 8px; }
details.eps summary { cursor: pointer; color: var(--ink-2); font-size: 12px; }
details.eps ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; columns: 2; }
.sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; vertical-align: middle; }
.sw.hot-soft { background: var(--hot-soft); outline: 1px solid var(--hot); }
.sw.episode { background: var(--episode); outline: 1px solid var(--ink-3); }

/* ── Таблицы ────────────────────────────────────────────────────────────── */
.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
.table-wrap.tall { max-height: 50vh; }
table.data, table.analog { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.data thead th { font-size: 12px; color: var(--ink-2); background: var(--surface-2); position: sticky; top: 0; }
table.data tr.bad td { background: var(--warning-bg); }
table.analog th, table.analog td { padding: 5px 8px; border-bottom: 1px solid var(--surface-1); }
table.analog thead th { background: var(--surface-2); text-align: right; vertical-align: bottom; font-size: 13px; position: sticky; top: 0; }
table.analog thead th span { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); }
table.analog thead th .sim { color: var(--ink-1); font-size: 12px; margin-top: 2px; }
table.analog tbody th { text-align: left; font-weight: 400; white-space: nowrap; padding-left: 14px; }
table.analog tr.group th { background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--ink-2); padding-top: 8px; }
table.analog td.word { text-align: right; }
table.analog td.cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; border-left: 2px solid var(--surface-1); }
table.analog td.cell small { display: block; font-size: 10px; opacity: .75; }
table.analog td.none { color: var(--ink-3); background: transparent; }

.src-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.src { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; font-size: 13px; }
.src.bad { border-color: var(--warning); }
.row-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }

/* ── Подробный график ───────────────────────────────────────────────────── */
dialog#detail { width: min(1080px, 96vw); max-height: 94vh; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-1); color: var(--ink-1); padding: 16px 18px; }
dialog::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-head h2 { font-size: 18px; }
.detail-controls { display: flex; gap: 6px; align-items: center; }
.explain { margin: 8px 0 12px; color: var(--ink-2); max-width: 860px; }
.d-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 8px; }
.d-kpis > div { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.d-kpis b { font-size: 20px; font-weight: 650; }
.d-kpis b small { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.d-gauge .gauge .mark { box-shadow: 0 0 0 2px var(--surface-2); }
.chart-label { font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.chart-label .muted { font-weight: 400; }

.tooltip { position: absolute; pointer-events: none; background: var(--surface-1); color: var(--ink-1); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 12px; white-space: nowrap; z-index: 20; box-shadow: 0 4px 14px rgb(0 0 0 / .14); }
.tooltip .tt-date { color: var(--ink-3); margin-bottom: 2px; }
.tooltip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.u-legend { display: none; }
.uplot { font-family: inherit; }

/* ── Узкие экраны ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .composites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { flex-wrap: wrap; gap: 10px; }
  .chain-arrow { display: none; }
  .stage { flex: 1 1 calc(33.333% - 10px); }
  .ov-grid { grid-template-columns: 1fr; }
  .idx-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .stories { grid-template-columns: 1fr; }
  .chips { flex-wrap: wrap; gap: 8px; }
  .chip { flex: 1 1 calc(33% - 8px); }
  .chip-arrow { display: none; }
  .sb-row { grid-template-columns: 150px 1fr 70px; }
  .composites { grid-template-columns: 1fr; }
  .two-levels { grid-template-columns: 1fr; }
  .cot-row, .cot-axis { grid-template-columns: 110px 1fr 110px; }
  .flow-row { grid-template-columns: 120px 1fr 100px; }
}
@media (max-width: 760px) {
  .stage { flex: 1 1 100%; }
  .stage.no-word .stage-word, .stage.no-word .stage-since, .stage.no-word .ribbon { display: none; }
  .stage-q { min-height: 0; }
  .div-body { grid-template-columns: 1fr; }
  details.eps ul { columns: 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { flex: 1 1 calc(50% - 8px); }
  table.mkt th:nth-child(4), table.mkt td:nth-child(4), table.mkt th:nth-child(5), table.mkt td:nth-child(5), table.mkt th:nth-child(9), table.mkt td:nth-child(9) { display: none; }
  table.ind th:nth-child(5), table.ind td:nth-child(5), table.ind th:nth-child(6), table.ind td:nth-child(6) { display: none; }
}
/* Лента вкладок: затухание у края, за которым есть ещё вкладки (класс ставит app.js). */
.tabs.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tabs.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* Телефон: шапка в одну строку, X и статус — значками, вкладки от края до края экрана. */
@media (max-width: 600px) {
  .top { flex-wrap: nowrap; gap: 8px; padding: 10px 0 4px; }
  .brand { gap: 8px; font-size: 16px; min-width: 0; }
  .brand-home { gap: 8px; }
  .x-link { padding: 0; width: 30px; height: 30px; justify-content: center; margin-left: 0; }
  .x-link span, .pill-txt { display: none; }
  .top-right { gap: 6px; flex-wrap: nowrap; }
  .top-right .pill { height: 30px; min-width: 30px; justify-content: center; padding: 0 8px; font-size: 13px; }
  .ghost.icon { width: 30px; height: 30px; padding: 0; border-radius: 999px; }
  .tabs { margin: 4px -16px 12px; padding: 0 6px; scroll-padding-inline: 32px; }
  .tabs a, .tabs button { padding: 11px 10px; font-size: 14px; }
  .tab-sep { margin: 11px 2px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Деньги: водопад и масштаб ──────────────────────────────────────────── */
.wf { display: grid; gap: 8px; }
.wf-row { display: grid; grid-template-columns: minmax(150px, 260px) 1fr 112px; gap: 12px; align-items: center; font-size: 13px; }
.wf-row.total { font-weight: 600; }
.wf-row.total + .wf-row { border-top: 1px dashed var(--border); padding-top: 8px; }
.wf-name small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.wf-track { position: relative; height: 20px; background: var(--surface-2); border-radius: 4px; }
.wf-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.wf-link { position: absolute; top: -9px; height: 9px; border-left: 1px dashed var(--ink-3); }
.wf-bar { position: absolute; top: 3px; height: 14px; border-radius: 3px; }
.wf-bar.plus { background: var(--calm); }
.wf-bar.minus { background: var(--hot); }
.wf-bar.sum { background: var(--ink-2); top: 2px; height: 16px; }
.wf-val { text-align: right; font-variant-numeric: tabular-nums; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sc { display: flex; flex-direction: column; gap: 2px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.sc-name { font-size: 12px; color: var(--ink-2); }
.sc-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-val small { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 1px; }
.sc-chg { font-size: 12px; font-variant-numeric: tabular-nums; }
.sc-sub { font-size: 11px; color: var(--ink-2); }
.sc-date { font-size: 11px; color: var(--ink-3); margin-top: auto; padding-top: 2px; }
.money-ov { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; margin-bottom: 12px; }
.sc-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.sc-grid.compact .sc { padding: 8px 10px; }
.sc-grid.compact .sc-val { font-size: 18px; }
.flow-row.sub-row .flow-val small { margin-left: 4px; }
@media (max-width: 900px) {
  .money-ov { grid-template-columns: 1fr; }
  .wf-row { grid-template-columns: 120px 1fr 92px; gap: 8px; }
  .wf-name small { display: none; }
}
table.mini.plan, table.mini.global { width: 100%; font-size: 13px; }
table.mini.plan th, table.mini.global th { font-weight: 500; color: var(--ink-2); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); }
table.mini.plan th.n, table.mini.global th.n { text-align: right; }
table.mini.plan td, table.mini.global td { padding: 5px 6px; border-bottom: 1px solid var(--grid); }
table.mini.plan tr.now td { background: var(--accent-soft); }
table.mini.global tr.total td { font-weight: 600; border-top: 1px solid var(--border); }
.plan-gap { margin: 10px 0 0; font-size: 13px; }
.plan-gap.hot { color: var(--hot-ink, var(--hot)); }
.plan-gap.calm { color: var(--calm-ink); }
.global-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .global-grid { grid-template-columns: 1fr; } }
/* ── Ликвидность на обзоре ─────────────────────────────────────────────── */
.liq-ov { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 22px; align-items: start; margin-bottom: 12px; }
.liq-verdict { font-size: 15px; margin: 0 0 10px; line-height: 1.45; }
table.mini.liq { width: 100%; font-size: 13px; border-collapse: collapse; }
table.mini.liq th { font-weight: 500; color: var(--ink-2); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); }
table.mini.liq th.n { text-align: right; }
table.mini.liq td { padding: 6px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.mini.liq td small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 1px; }
table.mini.liq td.n { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.mini.liq td.calm { color: var(--calm-ink); }
table.mini.liq td.hot { color: var(--hot-ink); }
table.mini.liq tr.ahead td { background: var(--surface-2); }
table.mini.liq .pill { cursor: pointer; font-size: 11px; padding: 0 6px; margin-left: 4px; background: var(--surface-2); border-radius: 999px; }
.liq-notes { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.liq-notes li { margin: 3px 0; }
.sc-grid.strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) { .sc-grid.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .liq-ov { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sc-grid.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── Полукруглая шкала индекса ликвидности ─────────────────────────────── */
.semi-gauge { display: block; overflow: visible; }
.semi-gauge .sg-num { fill: var(--ink-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.semi-gauge .sg-word { fill: var(--ink-2); }
.semi-gauge .sg-end { fill: var(--ink-3); }
.sg-wrap { display: flex; justify-content: center; margin: 4px 0 2px; }
.comp-chg.center { text-align: center; display: block; }
/* ── Ликвидность → рынки ──────────────────────────────────────────────── */
.lead-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.lead-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lead-card h3 { font-size: 16px; }
.rel { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.rel-strong { background: var(--calm-soft); color: var(--calm-ink); }
.rel-medium { background: var(--calm-soft); color: var(--calm-ink); opacity: .85; }
.rel-none { background: var(--surface-2); color: var(--ink-3); }
.lead-stat { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.5; }
.tb { display: grid; gap: 8px; }
.tb-row { display: grid; grid-template-columns: 112px 1fr 128px; gap: 10px; align-items: center; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.tb-row.now { background: var(--accent-soft); }
.tb-track { position: relative; height: 16px; }
.tb-zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink-3); }
.tb-iqr { position: absolute; top: 4px; height: 8px; border-radius: 4px; background: var(--ink-3); opacity: .35; }
.tb-med { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface-1); }
.tb-med.plus { background: var(--calm); }
.tb-med.minus { background: var(--hot); }
.tb-val { text-align: right; font-variant-numeric: tabular-nums; }
.tb-val small { display: block; font-size: 11px; }
.tb-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-left: 122px; margin-right: 138px; }
.lead-proj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lag-chart .lc-ax { fill: var(--ink-2); font-size: 11px; }
@media (max-width: 1100px) { .lead-cards, .lead-proj { grid-template-columns: 1fr; } }
.fan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.fan-card { margin-bottom: 12px; }
/* Карточки-ссылки — блоки с ролью кнопки: текст в них можно выделять и копировать. */
[role="button"] { cursor: pointer; }
[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-word { display: inline-block; }

/* ── Окно правила ──────────────────────────────────────────────────────── */
.rule-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rule-word { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
table.mini.rule-inputs { width: 100%; font-size: 13px; }
table.mini.rule-inputs td { padding: 5px 6px; border-bottom: 1px solid var(--grid); }

/* ── Подвал ────────────────────────────────────────────────────────────── */
.site-foot { margin: 28px 0 18px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.site-foot p { margin: 0 0 4px; max-width: 980px; }
.site-foot a { color: var(--ink-2); }

/* Заголовок страницы для поисковиков и читалок экрана: виден в коде, не на экране. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Серверный текст страницы (виден до загрузки скриптов и поисковикам); скрипт заменяет его экраном. */
.ssr { max-width: 860px; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; line-height: 1.55; }
.ssr-lead { margin: 0 0 12px; }
.ssr h2 { font-size: 14px; margin: 14px 0 6px; }
.ssr ul { margin: 0 0 12px; padding-left: 20px; }
.ssr li { margin: 2px 0; }