/* ============================================================================
   stocks.css — блоки подстраницы «Акции и индексы» (stocks.html).
   Каркас — ui-base.css, дизайн-слой и токены (--mx-*) — kyrs.css, фон — kyrs-scene.css.
   ============================================================================ */

/* ===== общее ===== */
.st-empty { padding: 22px 16px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.page-content .up { color: var(--green, #4ade80); } .page-content .down { color: var(--red, #f87171); }
.live-dot.off { background: var(--text-secondary); animation: none; opacity: .6; }
.st-verdict { display: block; margin: 10px 0 30px; padding: 0 4px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.st-verdict:empty { display: none; }
.st-verdict > i { color: var(--gold, #d4af37); margin-right: 4px; }
.st-verdict b { color: var(--text-color); }
.st-verdict b.up { color: var(--green, #4ade80); } .st-verdict b.down { color: var(--red, #f87171); }
.strip-head .st-seg { margin-left: auto; }
.strip-head .st-seg + .strip-legend { margin-left: 8px; }
.st-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--mx-line); border-radius: 999px; }
.st-seg button { border: 0; background: transparent; border-radius: 999px; padding: 4px 14px; color: var(--text-secondary); font: 600 12.5px var(--mx-f-ui); cursor: pointer; transition: color .15s, background .15s; }
.st-seg button:hover { color: var(--text-color); }
.st-seg button.on { background: var(--mx-gold-wash); color: var(--gold, #d4af37); box-shadow: inset 0 0 0 1px var(--mx-gold-line); }
/* всплывающая подсказка у графиков */
.st-tip { position: absolute; z-index: 5; display: none; pointer-events: none; min-width: 120px; padding: 8px 11px; border: 1px solid var(--mx-line-strong); border-radius: 10px; background: rgba(16,16,15,.94); box-shadow: 0 10px 28px rgba(0,0,0,.4); font-size: 13px; line-height: 1.55; color: #e9e7df; white-space: nowrap; }
.st-tip b { color: #fff; } .st-tip span { color: #a9a79c; }
.st-tip b.up, .st-tip .up { color: #4ade80; } .st-tip b.down, .st-tip .down { color: #f87171; }
.st-tip div { display: flex; align-items: center; gap: 6px; }
.st-tip div b { margin-left: auto; padding-left: 12px; }
.st-tip i { width: 10px; height: 3px; border-radius: 2px; background: var(--c); }

/* ===== ЖИВОЙ СТАТУС БИРЖ ===== */
.st-mkt { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 10px 14px; border: 1px solid var(--mx-gold-line); border-radius: 12px; background: var(--mx-gold-wash); font-size: 13px; color: var(--text-secondary); }
.st-mkt[hidden] { display: none; }
.st-mkt.live { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.st-mkt-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--mx-surface-2); color: var(--gold, #d4af37); font-size: 13px; }
.st-mkt-ico.on i { width: 9px; height: 9px; border-radius: 50%; background: var(--green, #4ade80); animation: livePulse 2s ease-out infinite; }
.st-mkt-t { flex: 1; min-width: 0; line-height: 1.45; }
.st-mkt-t b { color: var(--text-color); }
.st-mkt-n { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.st-mkt-n b { padding: 4px 10px; border-radius: 8px; background: var(--mx-surface-2); color: var(--text-color); font: 700 14px var(--mx-f-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ===== НОМЕРА РАЗДЕЛОВ (журнальные «01 … 07») ===== */
.st-num { margin-right: 4px; font: 600 26px/1 var(--mx-f-display); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--mx-gold-line); opacity: .9; }

/* ===== 01. КАРТА ТОРГОВОГО ДНЯ ===== */
.st-world { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: center; margin-bottom: 30px; padding: 18px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.06), transparent 60%), var(--mx-surface); }
.st-world-map { min-width: 0; }
.st-world-in { position: relative; aspect-ratio: 300 / 122; }
/* сводка мира справа от карты */
.st-world-side { display: flex; flex-direction: column; align-self: stretch; justify-content: center; gap: 14px; padding-left: 22px; border-left: 1px solid var(--mx-line); }
#worldSide { display: flex; flex-direction: column; }
.st-ws { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--mx-line); }
.st-ws small, .st-ws-row small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.st-ws > b { font: 600 30px/1.15 var(--mx-f-display); color: var(--text-color); }
.st-ws > b i { font: 500 14px var(--mx-f-ui); font-style: normal; color: var(--text-secondary); }
.st-ws > span { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.st-ws em { font-style: normal; font-weight: 700; }
.st-ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "n v" "s v"; align-items: center; column-gap: 10px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--mx-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-ws-row:last-child { border-bottom: 0; }
.st-ws-row:hover b { color: var(--gold, #d4af37); }
.st-ws-row small { grid-area: k; }
.st-ws-row b { grid-area: n; font-size: 14px; color: var(--text-color); transition: color .15s; }
.st-ws-row em { grid-area: s; font-style: normal; font-size: 12.5px; color: var(--text-secondary); }
.st-ws-row > span { grid-area: v; font: 600 18px var(--mx-f-display); }
.st-world-in canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-world-pins { position: absolute; inset: 0; }
.st-pin { position: absolute; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform: translate(-6px, -50%); z-index: 2; }
.st-pin i { position: relative; width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: #6b6f78; box-shadow: 0 0 0 3px rgba(20,20,19,.75); }
.st-pin.open i { background: var(--green, #4ade80); }
.st-pin.open i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--green, #4ade80); animation: stPing 1.8s ease-out infinite; }
.st-pin.done i { background: var(--gold, #d4af37); }
@keyframes stPing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.st-pin span { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; border: 1px solid var(--mx-line-strong); border-radius: 8px; background: rgba(16,16,15,.82); backdrop-filter: blur(4px); white-space: nowrap; transition: border-color .15s; }
.st-pin:hover span { border-color: var(--gold, #d4af37); }
.st-pin b { font-size: 13px; font-weight: 600; color: #ecebe4; }
.st-pin em { font-style: normal; font-size: 13px; font-weight: 700; }
.st-pin.off span { opacity: .75; }
/* сторона подписи: справа (по умолчанию), слева, сверху, снизу */
.st-pin.side-l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.st-pin.side-t { flex-direction: column-reverse; gap: 4px; transform: translate(-50%, calc(-100% + 6px)); }
.st-pin.side-b { flex-direction: column; gap: 4px; transform: translate(-50%, -6px); }
.st-sun { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle, #fff6cf 0 30%, #f5c542 55%, rgba(245,197,66,0) 72%); box-shadow: 0 0 22px 8px rgba(245,197,66,.35); z-index: 1; pointer-events: none; animation: stSun 4s ease-in-out infinite; }
@keyframes stSun { 50% { box-shadow: 0 0 30px 12px rgba(245,197,66,.45); } }
.st-world-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-secondary); }
.st-world-leg span { display: inline-flex; align-items: center; gap: 6px; }
.st-world-leg i { width: 9px; height: 9px; border-radius: 50%; background: #6b6f78; }
.st-world-leg i.open { background: var(--green, #4ade80); } .st-world-leg i.done { background: var(--gold, #d4af37); }
.st-world-leg i.sun { background: #f5c542; box-shadow: 0 0 8px 2px rgba(245,197,66,.5); }

/* ===== ТЕРМОМЕТР РЫНКА — в левой колонке section-rail (.mx-side), только широкие экраны ===== */
@media (min-width: 1600px) {
    .st-thermo { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; margin-left: -9px; padding: 10px 0;
        border: 1px solid var(--mx-line-strong); border-radius: 999px; background: rgba(16,16,15,.72); backdrop-filter: blur(6px); color: inherit; font: inherit; cursor: pointer; }
    .st-thermo[hidden] { display: none; }
    .st-thermo:hover { border-color: var(--mx-gold-line); }
    .st-thermo small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
    .st-thermo b { font: 600 17px/1.1 var(--mx-f-display); }
    .st-thermo b.st-thermo-md { font: 700 12.5px var(--mx-f-ui); }
    .st-thermo-tube { position: relative; width: 10px; height: 96px; margin: 6px 0; border-radius: 6px; background: var(--mx-surface-2); overflow: hidden; }
    .st-thermo-tube i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: linear-gradient(0deg, #f87171, #d4af37 50%, #4ade80); background-size: 100% 96px; background-position: bottom; transition: height .6s; }
    .st-thermo-tube em { position: absolute; left: -3px; right: -3px; top: 50%; height: 1px; background: var(--text-color); opacity: .5; }
}

/* 1600–1899: отступ страницы 40 px — компактная колонка, чтобы не наезжать на контент */
@media (min-width: 1600px) and (max-width: 1899px) {
    .st-thermo { width: 26px; margin-left: -1px; padding: 8px 0; gap: 2px; }
    .st-thermo small { display: none; }
    .st-thermo b { font-size: 12.5px; }
    .st-thermo b.st-thermo-md { font-size: 10px; }
    .st-thermo-tube { width: 8px; }
}

/* ===== 1. ЭСТАФЕТА ===== */
.st-relay { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); align-items: stretch; }
.st-reg { border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); overflow: hidden; min-width: 0; }
.st-reg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--mx-line); border-top: 3px solid var(--rc); }
.st-reg-asia { --rc: #b8333b; } .st-reg-europe { --rc: #2a4fa8; } .st-reg-america { --rc: #1f7a52; }
.st-reg-n { display: flex; flex-direction: column; }
.st-reg-n b { font-family: var(--mx-f-display); font-size: 15px; font-weight: 600; color: var(--text-color); }
.st-reg-n em { font-style: normal; font-size: 12.5px; color: var(--text-secondary); }
.st-reg-n em.on { color: var(--green, #4ade80); }
.st-reg-v { font-family: var(--mx-f-display); font-size: 18px; font-weight: 600; }
.st-reg-arrow { pointer-events: none; display: flex; align-items: center; justify-content: center; color: var(--gold, #d4af37); opacity: .6; font-size: 13px; }
.st-idx { display: grid; grid-template-columns: 8px minmax(0, 1fr) 46px 74px; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--mx-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.st-idx:last-child { border-bottom: 0; }
.st-idx:hover { background: var(--mx-gold-wash); }
.st-idx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); opacity: .45; }
.st-idx-dot.open { background: var(--green, #4ade80); opacity: 1; box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
.st-idx-dot.done { background: var(--gold, #d4af37); opacity: .9; }
.st-idx-n { display: flex; flex-direction: column; min-width: 0; }
.st-idx-n b { font-size: 13px; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-idx-n small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-idx-bar { height: 5px; border-radius: 3px; background: var(--mx-surface-2); overflow: hidden; }
.st-idx-bar i { display: block; height: 100%; border-radius: 3px; }
.st-idx-bar i.up { background: var(--green, #4ade80); } .st-idx-bar i.down { background: var(--red, #f87171); }
.st-idx-v { display: flex; flex-direction: column; align-items: flex-end; }
.st-idx-v b { font-size: 13px; font-weight: 700; }
.st-idx-v small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.st-relay > .st-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); }

/* ===== 1б. ТЕПЛОВАЯ КАРТА ===== */
.st-map { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.st-map > .st-empty { width: 100%; }
.st-map-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-map-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-map-h b { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-map-h:hover b { color: var(--gold, #d4af37); }
.st-map-h span { font-size: 12.5px; font-weight: 700; }
.st-map-tiles { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 3px; }
.st-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; padding: 6px 4px; border: 0; border-radius: 8px; font: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.st-tile:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--gold, #d4af37); }
.st-tile b { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.st-tile small { font-size: 13px; font-weight: 600; opacity: .92; }
.st-map-foot { display: flex; align-items: baseline; gap: 18px; margin: 10px 0 30px; }
.st-map-foot .st-verdict { margin: 0; flex: 1; }
.st-map-scale { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; color: var(--text-secondary); }
.st-map-scale:empty { display: none; }
.st-map-scale i { width: 120px; height: 8px; border-radius: 4px; }
.st-link { border: 0; border-bottom: 1px dashed var(--mx-gold-line); padding: 0; background: none; color: var(--gold, #d4af37); font: inherit; font-weight: 700; cursor: pointer; }

/* ===== 2. РОТАЦИЯ СЕКТОРОВ ===== */
.st-rot { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.st-rot-chart, .st-rot-list { position: relative; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); min-width: 0; }
.st-rot-list:empty { display: none; }
.st-rot-svg { display: block; width: 100%; height: auto; }
.st-rot-svg .qb { stroke: none; }
.st-rot-svg .qb.lead { fill: rgba(74,222,128,.05); } .st-rot-svg .qb.weak { fill: rgba(212,175,55,.05); }
.st-rot-svg .qb.lag { fill: rgba(248,113,113,.05); } .st-rot-svg .qb.impr { fill: rgba(96,165,250,.05); }
.st-rot-svg .ax { stroke: var(--mx-line-strong); stroke-width: 1; }
.st-rot-svg .ql { fill: var(--text-secondary); font: 600 12px var(--mx-f-ui); letter-spacing: .12em; opacity: .7; }
.st-rot-svg .axl { fill: var(--text-secondary); font: 500 12px var(--mx-f-ui); opacity: .75; }
.st-rot-svg .tail { fill: none; stroke-width: 1.6; stroke-opacity: .45; stroke-linejoin: round; }
.st-rot-svg .td { stroke: none; fill-opacity: .55; }
.st-rot-svg .dot { stroke: #141413; stroke-width: 2; }
.st-rot-svg .hit { fill: transparent; }
.st-rot-svg .pt { cursor: pointer; }
.st-rot-svg .pt:hover .dot { stroke: var(--gold, #d4af37); }
.st-rot-svg .lbl { pointer-events: none; fill: var(--text-color); font: 700 13px var(--mx-f-ui); paint-order: stroke; stroke: #141413; stroke-width: 3px; stroke-opacity: .7; }
/* цвет квадранта: лидеры, выдыхаются, отстают, набирают */
.q-lead { --q: #4ade80; } .q-weak { --q: #d4af37; } .q-lag { --q: #f87171; } .q-impr { --q: #60a5fa; }
.st-rot-svg .q-lead, .st-rot-svg .q-weak, .st-rot-svg .q-lag, .st-rot-svg .q-impr { stroke: var(--q); }
.st-rot-svg .dot, .st-rot-svg .td { fill: var(--q); }
.st-rot-svg .dot { stroke: #141413; }
.st-rot-lh { display: flex; justify-content: space-between; padding: 10px 14px 6px; font-size: 12px; color: var(--text-secondary); opacity: .8; }
.st-rot-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 62px; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.st-rot-row:hover { background: var(--mx-gold-wash); }
.st-q { width: 10px; height: 10px; border-radius: 50%; background: var(--q); }
.st-rot-n { display: flex; flex-direction: column; min-width: 0; }
.st-rot-n b { font-size: 13px; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-rot-n small { font-size: 12px; color: var(--text-secondary); }
.st-rot-v { font-size: 13px; font-weight: 700; text-align: right; }

/* ===== 3. КТО ТЯНЕТ РЫНОК ===== */
.st-tug { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.st-tug > .st-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); }
.st-tug-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); min-width: 0; }
.st-tug-t { display: flex; flex-direction: column; gap: 2px; }
.st-tug-t b { font-size: 13px; line-height: 1.3; color: var(--text-color); }
.st-tug-t small { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--gold, #d4af37); }
.st-tug-vs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.st-tug-vs span { flex: 1; min-width: 0; line-height: 1.3; }
.st-tug-vs span:last-child { text-align: right; }
.st-tug-vs span.win { color: var(--text-color); font-weight: 600; }
.st-tug-vs i { font-style: normal; font-size: 11.5px; opacity: .6; }
.st-tug-ch { position: relative; height: 92px; cursor: crosshair; }
.st-tug-ch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-tug-ch .base { stroke: var(--mx-line-strong); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.st-tug-ch .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.st-tug-ch .ln.up { stroke: var(--green, #4ade80); } .st-tug-ch .ln.down { stroke: var(--red, #f87171); }
.st-tug-ch .cx { stroke: var(--text-secondary); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.st-tug-st { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.st-tug-st span { display: flex; flex-direction: column; }
.st-tug-st b { font-size: 13.5px; }
.st-tug-v { padding-top: 8px; border-top: 1px solid var(--mx-line); font-size: 13px; line-height: 1.45; color: var(--text-color); }

/* ===== 4. ГОНКА С НАЧАЛА ГОДА ===== */
/* категориальная палитра (проверенная, 8 слотов): цвет закреплён за индексом в наборе, не за местом */
.st-race { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #2f9a2f; --s7: #9085e9; --s8: #e66767;
    margin-bottom: 30px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); overflow: hidden; }
.st-race .s1 { --c: var(--s1); } .st-race .s2 { --c: var(--s2); } .st-race .s3 { --c: var(--s3); } .st-race .s4 { --c: var(--s4); }
.st-race .s5 { --c: var(--s5); } .st-race .s6 { --c: var(--s6); } .st-race .s7 { --c: var(--s7); } .st-race .s8 { --c: var(--s8); }
.st-race-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 12px 14px 4px; }
.st-race-legend button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--mx-line); border-radius: 999px; background: none; color: var(--text-secondary); font: 500 13px var(--mx-f-ui); cursor: pointer; }
.st-race-legend button:hover { border-color: var(--mx-gold-line); color: var(--text-color); }
.st-race-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.st-race-legend b { font-weight: 700; }
.st-race-plot { position: relative; }
.st-race-svg { display: block; }
.st-race-svg .gr { stroke: var(--mx-line); }
.st-race-svg .g0 { stroke: var(--mx-line-strong); stroke-dasharray: 4 4; }
.st-race-svg .yl, .st-race-svg .xl { fill: var(--text-secondary); font: 500 12px var(--mx-f-ui); opacity: .8; }
.st-race-svg .rl { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.st-race-svg .rd { fill: var(--c); stroke: #141413; stroke-width: 2; }
.st-race-svg .el { fill: var(--text-color); font: 600 13px var(--mx-f-ui); }
.st-race-svg .el .sw { fill: var(--c); }
.st-race-svg .el .up { fill: var(--green, #4ade80); } .st-race-svg .el .down { fill: var(--red, #f87171); }
.st-race-svg .cx { stroke: var(--text-secondary); stroke-width: 1; opacity: 0; }

/* ===== 5. ТАБЛИЦА ===== */
.st-table tbody tr { cursor: pointer; }
.st-spark { width: 96px; height: 34px; display: block; }
.st-table thead th[data-sort] { cursor: pointer; user-select: none; }
.st-table thead th.sorted .sort-ico::after { content: '▼'; }
.st-table thead th.sorted.asc .sort-ico::after { content: '▲'; }
.st-dd { font-weight: 600; white-space: nowrap; }
.st-ath { font-size: 13px; font-weight: 700; color: var(--gold, #d4af37); }
.st-rv { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-color); background: var(--mx-surface-2); }
.st-rv.hot { color: var(--gold, #d4af37); background: var(--mx-gold-wash); box-shadow: inset 0 0 0 1px var(--mx-gold-line); }
.st-rv.low { color: var(--text-secondary); }

/* ===== ДАЛЬШЕ ===== */
.st-next { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 34px 0 10px; }
.st-next a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px; border: 1px dashed var(--mx-line-strong); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.st-next a:hover { border-color: var(--mx-gold-line); background: var(--mx-gold-wash); }
.st-next i { grid-row: span 2; font-size: 16px; color: var(--gold, #d4af37); }
.st-next b { font-size: 13px; color: var(--text-color); }
.st-next span { font-size: 13px; color: var(--text-secondary); }

/* ===== СВЕТЛАЯ ТЕМА ===== */
body.light .page-content .up, body.light .st-verdict b.up, body.light .st-reg-n em.on { color: #15803d; }
body.light .page-content .down, body.light .st-verdict b.down { color: #b91c1c; }
body.light .st-idx-bar i.up { background: #22a052; } body.light .st-idx-bar i.down { background: #dc3c3c; }
body.light .st-world { background: radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.1), transparent 60%), var(--mx-surface); }
body.light .st-pin span { background: rgba(255,255,255,.9); }
body.light .st-pin b { color: #141414; }
body.light .st-pin i { box-shadow: 0 0 0 3px rgba(255,255,255,.85); background: #9ca3af; }
body.light .st-pin.open i, body.light .st-world-leg i.open { background: #22a052; } body.light .st-pin.open i::after { border-color: #22a052; }
body.light .st-num { -webkit-text-stroke-color: rgba(138,106,16,.55); }
body.light .st-thermo { background: rgba(255,255,255,.9); color: #141414; }
body.light .st-mkt.live { border-color: rgba(34,160,82,.35); background: rgba(34,160,82,.07); }
body.light .st-mkt-ico.on i { background: #22a052; }
body.light .st-mkt-ico { color: #8a6a10; }
body.light .st-idx-dot.open { background: #22a052; box-shadow: 0 0 0 3px rgba(34,160,82,.18); }
body.light .st-seg button.on, body.light .st-link, body.light .st-ath, body.light .st-tug-t small, body.light .st-rv.hot { color: #8a6a10; }
body.light .st-idx-n b, body.light .st-rot-n b, body.light .st-tug-t b, body.light .st-reg-n b { color: #141414; }
body.light .q-lead { --q: #16a34a; } body.light .q-weak { --q: #b8860b; } body.light .q-lag { --q: #dc2626; } body.light .q-impr { --q: #2563eb; }
body.light .st-rot-svg .dot, body.light .st-race-svg .rd { stroke: #fff; }
body.light .st-rot-svg .lbl { stroke: #fff; stroke-opacity: .9; }
body.light .st-tug-ch .ln.up { stroke: #16a34a; } body.light .st-tug-ch .ln.down { stroke: #dc2626; }
body.light .st-race { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948; }
body.light .st-race-svg .el .up { fill: #15803d; } body.light .st-race-svg .el .down { fill: #b91c1c; }

/* ===== АДАПТИВ ===== */
@media (max-width: 1300px) {
    .st-tug { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    .st-world { grid-template-columns: 1fr; }
    .st-world-side { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--mx-line); }
    #worldSide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
    #worldSide .st-ws-row { grid-column: span 1; }
}
@media (max-width: 1100px) {
    .st-relay { grid-template-columns: 1fr; gap: 0; }
    .st-reg-arrow { height: 22px; }
    .st-reg-arrow i { transform: rotate(90deg); }
    .st-rot { grid-template-columns: 1fr; }
    .st-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .st-tug { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .st-idx { grid-template-columns: 8px minmax(0, 1fr) 34px 70px; gap: 8px; padding: 8px 12px; }
    .st-next { grid-template-columns: 1fr; }
    .strip-head { flex-wrap: wrap; }
    .st-map-sec { flex-basis: 100% !important; max-width: none !important; }
    .st-map-tiles { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
    .st-tile { min-height: 54px; }
    .st-map-foot { flex-direction: column; gap: 8px; }
    .st-mkt { flex-wrap: wrap; }
    .st-world { padding: 10px; }
    .st-pin span { display: none; }
    .st-pin i { width: 10px; height: 10px; }
    .st-world-side { grid-template-columns: 1fr; }
    #worldSide { grid-template-columns: 1fr 1fr; }
    #worldSide .st-ws-row { grid-column: 1 / -1; }
    .st-ws > b { font-size: 24px; }
    .st-num { font-size: 20px; }
    .st-mkt-t { flex-basis: calc(100% - 40px); }
    .st-mkt-n { width: 100%; justify-content: space-between; white-space: normal; }
}