:root{
  --bg:#0d1015; --panel:#151a22; --panel-2:#1b212b; --line:#232b37;
  --ink:#e7ebf2; --ink-2:#98a2b3; --ink-3:#606a7b;
  --up:#3fd18b; --down:#f2696b; --accent:#6aa9ff; --warm:#f0b429;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;

  /* Шкала отступов с шагом 4 — все зазоры только отсюда.
     Уровни близости: L1 элемент↔его деталь = 8 · L2 соседи группы = 12
     L3 группы секции = 20 · L4 секции экрана = 32 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --tap:44px;              /* минимальная тач-цель */
  --r:10px; --r-s:6px;
  --railw:440px;           /* ширина закреплённой колонки новостей на десктопе */
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

.page{max-width:1560px;margin:0 auto;padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}

/* ═════════ ярус 1 — состояние рынка и что вышло рядом ═════════ */
.verdict{
  display:flex;align-items:flex-start;gap:var(--s5);
  padding-bottom:var(--s5);border-bottom:1px solid var(--line);
}
.v-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}

/* ── индикатор «насколько сегодня штормит» ──
   Числа не показываем: это самодельный индекс, а не биржевой стандарт, и «82 из 100»
   создавало бы ложную точность. Значение несёт цвет и положение метки, а рядом —
   то, из чего он сложился, открытым текстом, без раскрытия по тапу. */
.storm{display:flex;align-items:center;column-gap:var(--s3);row-gap:var(--s2);flex-wrap:wrap;width:100%}
.storm-word{font:600 16px/1.2 system-ui,sans-serif;white-space:nowrap}
.storm-scale{position:relative;width:132px;height:6px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(90deg,#3fd18b 0%,#c9d443 34%,#f0b429 62%,#f2696b 100%)}
.storm-mark{position:absolute;top:-4px;width:3px;height:14px;border-radius:2px;
  background:var(--ink);box-shadow:0 0 0 2px var(--bg);transform:translateX(-50%)}
.storm-why{font-size:12px;line-height:1.45;color:var(--ink-3);flex:1 1 260px;min-width:0}

.v-fact:empty{display:none}
.v-closed{font:500 13px/1.3 system-ui,sans-serif;color:var(--warm);
  border:1px solid rgba(240,180,41,.32);border-radius:999px;padding:var(--s1) var(--s2)}
.v-link{text-align:left;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:88ch;padding:0}
.v-link:hover{color:var(--ink)}
.v-link .v-name{color:var(--ink);font-weight:600}
.v-none{font-size:16px;line-height:1.45;color:var(--ink-2)}
.v-none .v-name{color:var(--ink);font-weight:600}

.v-side{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--s2);align-items:flex-end}
.v-upd{font-size:12px;color:var(--ink-3);white-space:nowrap}
/* снимок перестал обновляться — это не поломка сайта, а замерший источник */
.v-upd.frozen{color:var(--warm)}
.health{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:var(--s1) var(--s3);min-height:28px;
  white-space:nowrap}
.health i{width:7px;height:7px;border-radius:50%;background:var(--up);flex:0 0 auto}
.health.bad i{background:var(--down)}
.health.wait i{background:var(--warm)}
.health-list{display:none;flex-direction:column;gap:var(--s2);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s3);
  max-width:320px}
.health-list.open{display:flex}
.health-list div{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:var(--s2)}
.health-list i{width:6px;height:6px;border-radius:50%;background:var(--up);flex:0 0 auto}
.health-list div.bad i{background:var(--down)}

/* ═════════ ярус 2 — карточки инструментов ═════════ */
.cards{display:flex;gap:var(--s3);flex-wrap:wrap}
.card{
  flex:0 0 200px;width:200px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .16s ease,background .16s ease;
}
.card:hover{border-color:#2f3a4a}
.card.on{border-color:var(--accent);background:var(--panel-2)}
.card.stale{opacity:.62}
.c-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.c-name{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* фиксированная ширина бейджа: проценты разной длины иначе дают «почти рейл» —
   левые кромки соседних карточек расходятся на 2-6px, что глаз читает как небрежность */
.c-badge{font:600 12px/1 var(--mono);white-space:nowrap;min-width:56px;text-align:right}
.c-badge.up{color:var(--up)} .c-badge.down{color:var(--down)} .c-badge.flat{color:var(--ink-3)}
.c-price{font:600 22px/1.1 var(--mono);letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.c-spark{display:block;width:100%;height:24px}
.c-stale{font-size:11px;color:var(--warm)}
@keyframes f-up{from{background:rgba(63,209,139,.16)}to{background:transparent}}
@keyframes f-down{from{background:rgba(242,105,107,.16)}to{background:transparent}}
.card.f-up{animation:f-up .7s ease-out}
.card.f-down{animation:f-down .7s ease-out}

/* ═════════ ярус 3 — режим ═════════ */
.modebar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
/* padding:0 у трека — чтобы левая кромка первой кнопки села на общий рейл страницы,
   а не на «почти тот же» рейл в 3-4px правее */
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:0}
/* шаг 96 = ширина чипа влияния (88) + зазор (8): переключатель ленты идёт в том же
   ритме, что и чипы под ним, и их вертикали совпадают, а не расходятся на 4px */
.seg button{padding:0 var(--s4);min-width:96px;min-height:34px;border-radius:5px;
  font-size:13px;color:var(--ink-2);white-space:nowrap}
.seg button.on{background:var(--panel-2);color:var(--ink)}
.mode-note{font-size:12px;color:var(--ink-3)}

/* ═════════ контент: график + правая колонка ═════════ */
/* по умолчанию одна колонка: лента идёт потоком под графиком (телефон и планшет —
   на 816px две колонки оставили бы графику 340px). Закреплённая колонка — от 1001px. */
.content{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);align-items:start}

.chartcol{display:flex;flex-direction:column;gap:var(--s3)}
.ranges{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.rng{display:inline-flex;gap:var(--s1)}
.rng button{padding:0 var(--s3);min-height:32px;border-radius:var(--r-s);font-size:13px;color:var(--ink-2)}
.rng button:hover{background:var(--panel)}
.rng button.on{background:var(--panel-2);color:var(--ink)}
.rng-meta{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.canvas-wrap{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3)}
#chart{display:block;width:100%;height:360px}
/* видимостью управляет атрибут hidden из draw(): базовый display:none победил бы его
   по специфичности, и сообщение «данных нет» не показалось бы никогда */
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink-3);pointer-events:none;text-align:center;padding:var(--s5)}
.chart-empty[hidden]{display:none}
.tip{position:absolute;pointer-events:none;background:#0b0e13;border:1px solid var(--line);
  border-radius:var(--r-s);padding:var(--s2);font-size:12px;max-width:280px;color:var(--ink-2);
  box-shadow:0 6px 22px rgba(0,0,0,.5);z-index:3}
.tip .t-price{color:var(--ink);font:600 13px/1.2 var(--mono)}
.tip .t-time{color:var(--ink-3);font-size:11px;margin-top:var(--s1)}
.tip b{display:block;color:var(--ink);font-weight:600;margin-bottom:var(--s1)}
.fcbar{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--ink-3);flex-wrap:wrap}
/* фиксированная ширина плашки: пояснение справа от неё начинается на одной вертикали
   независимо от того, какое слово внутри — «высокая», «средняя» или «низкая» */
.conf{border:1px solid var(--line);border-radius:999px;padding:2px var(--s2);color:var(--ink-2);
  min-width:140px;text-align:center}
.conf.low,.conf.none{color:var(--warm);border-color:rgba(240,180,41,.3)}
.fc-stale{color:var(--warm)}

/* ═════════ правая колонка ═════════ */
.rail{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.rail-head{display:flex;flex-direction:column;gap:var(--s2)}
.rail-note{font-size:12px;line-height:1.45;color:var(--ink-3)}
.h-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

.feed{display:flex;flex-direction:column}
/* Вся карточка — тач-цель, открывает источник: на телефоне ссылка-заголовок в 17px
   недостижима пальцем. Рамка воздуха у всех строк группы одинакова, поэтому
   padding-top у первой карточки НЕ обнуляем — убираем только линию.
   Базовый зазор внутри — L2 (12); «почему» прижато к чипам, а оригинал к мете (L1, 4). */
.item{padding:var(--s4) 0;border-top:1px solid var(--line);display:flex;flex-direction:column;
  gap:var(--s3);text-decoration:none;color:inherit}
.item:first-child{border-top:0}
.item:hover{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 60%)}
.item.mute{opacity:.5}
.item.hit{background:linear-gradient(90deg,rgba(106,169,255,.12),transparent 70%)}
.imp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
/* фиксированная ширина: имена инструментов встают на один рейл сверху вниз по ленте.
   Иначе второй чип каждой строки стоит там, куда его толкнула длина первого. */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-width:88px;font:600 12px/1 var(--mono);
  border-radius:var(--r-s);padding:var(--s1) var(--s2);border:1px solid transparent;white-space:nowrap}
.chip.up{color:var(--up);background:rgba(63,209,139,.1);border-color:rgba(63,209,139,.26)}
.chip.down{color:var(--down);background:rgba(242,105,107,.1);border-color:rgba(242,105,107,.26)}
.chip.flat{color:var(--ink-2);background:var(--panel);border-color:var(--line)}
/* «почему» отдельной строкой, а не хвостом за чипами: инлайном его левая кромка
   зависит от ширины чипов и не садится ни на один рейл, а при переносе рвётся клочьями */
.why{font-size:13px;line-height:1.45;color:var(--ink-3);margin-top:calc(-1 * var(--s2))}
.plain{font-size:15px;line-height:1.5;color:var(--ink)}
.item.mute .plain{color:var(--ink-2)}
.meta{display:flex;gap:var(--s2);font-size:12px;color:var(--ink-3);flex-wrap:wrap;align-items:center}
.near{color:var(--accent)}
/* Обрезаем строками, а не nowrap: nowrap задирает min-content всей колонки до ширины
   заголовка и роняет страницу в горизонтальный скролл. */
.orig{font-size:13px;color:var(--ink-3);overflow:hidden;margin-top:calc(-1 * var(--s2));
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.pending{font-size:12px;color:var(--warm)}

/* состав прогноза */
.src{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--line)}
.src:first-child{border-top:0}
.src-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.src-name{font-size:14px;color:var(--ink)}
.src-w{font:600 13px/1 var(--mono);color:var(--accent)}
.wbar{height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden}
.wbar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.src-why{font-size:12px;color:var(--ink-3);line-height:1.5}
.empty{font-size:13px;color:var(--ink-3);line-height:1.6;padding:var(--s4) 0}
.empty b{color:var(--ink-2);font-weight:600}

/* сбываемость */
.sc-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-top:var(--s5);margin-bottom:var(--s2)}
.sc-t{width:100%;border-collapse:collapse;font-size:12px}
.sc-t th{text-align:left;color:var(--ink-3);font-weight:500;padding:var(--s2) var(--s2) var(--s2) 0;
  border-bottom:1px solid var(--line)}
.sc-t td{padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.sc-t .num{text-align:right;font-family:var(--mono);padding-right:0}
.sc-good{color:var(--up)} .sc-bad{color:var(--down)}
.sc-empty,.sc-foot{font-size:12px;line-height:1.6;color:var(--ink-3);padding:var(--s4) 0}
.sc-pend{font-size:12px;line-height:1.7;color:var(--ink-2)}

/* ═════════ подвал ═════════ */
.legal{border-top:1px solid var(--line);padding-top:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
  font-size:12px;line-height:1.5;color:var(--ink-3);max-width:88ch}
.legal p{margin:0}
.legal b{color:var(--ink-2)}
/* Строчные ссылки на источники — единственное исключение из правила 44px: сделать
   их тач-целью в полный рост можно только разорвав абзац. Растим область нажатия
   паддингом, высота строки при этом не меняется. */
.legal a{color:var(--ink-2);padding:var(--s2) 0}

/* ═════════ десктоп: лента — самостоятельная колонка во всю высоту ═════════
   В потоке она начиналась под карточками и оставляла справа пустое поле в пол-экрана. */
@media (min-width:1001px){
  .page{max-width:none;padding-right:calc(var(--railw) + var(--s6))}
  .rail{
    position:fixed;top:0;right:0;bottom:0;width:var(--railw);
    background:var(--panel);border-left:1px solid var(--line);
    padding:var(--s6);gap:var(--s4);overflow:hidden;z-index:5;
  }
  .rail-head{flex:0 0 auto}
  /* скроллится только список: переключатель и дисклеймер остаются на виду */
  #railBody{flex:1 1 auto;min-height:0;overflow-y:auto}
  .rail .plain{font-size:16px}
}

/* ═════════ телефон ═════════ */
@media (max-width:560px){
  .page{padding:var(--s4);gap:var(--s4)}

  .verdict{flex-direction:column;gap:var(--s3);padding-bottom:var(--s4)}
  .v-link,.v-none{font-size:15px}
  .v-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    min-height:var(--tap)}
  .v-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap}
  .health{min-height:var(--tap);padding:var(--s1) var(--s4)}
  .health-list{width:100%;max-width:none}

  .orig{-webkit-line-clamp:2}

  /* Пять равных строк в неизменном порядке — как в вотчлистах Yahoo и Apple Stocks.
     Выбранная НЕ уезжает наверх героем: тогда остальные съезжают, и от одного тапа
     перекладывается половина экрана. Выбор виден рамкой, а не перестановкой.
     Колонки фиксированной ширины: при auto ширина имени сдвигала числа на 2px. */
  .cards{display:flex;flex-direction:column;gap:var(--s2)}
  .card{flex:none;width:auto;padding:var(--s3);
    display:grid;grid-template-columns:84px 76px minmax(0,1fr) auto;
    grid-template-areas:"name price spark badge";
    align-items:center;column-gap:var(--s2);row-gap:var(--s2)}
  .card .c-top{display:contents}
  .card .c-name{grid-area:name}
  .card .c-price{grid-area:price;font-size:17px}
  .card .c-spark{grid-area:spark;height:20px}
  .card .c-badge{grid-area:badge}
  /* «биржа молчит» свешивается второй строкой: рамка воздуха у всех строк одна,
     подстрока растит только контент */
  .card .c-stale{grid-column:1/-1}

  .modebar{gap:var(--s3)}
  .seg{width:100%}
  .seg button{flex:1 1 0;min-height:var(--tap);padding:0 var(--s2);min-width:0}
  .mode-note{display:none}

  /* порядок: состояние → карточки → режим → лента → диапазоны → график */
  .content{display:flex;flex-direction:column;gap:var(--s5)}
  .rail{order:1}
  .chartcol{order:2}

  .rng{width:100%}
  .rng button{flex:1 1 0;min-height:var(--tap);padding:0 var(--s1)}
  .rng-meta{display:none}
  #chart{height:180px}

  .sc-t th:nth-child(4),.sc-t td:nth-child(4){display:none}
}