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

/* ===== общее (как на других подстраницах раздела) ===== */
.cm-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; }
.cm-verdict { display: block; margin: 10px 0 30px; padding: 0 4px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.cm-verdict:empty { margin: 0 0 30px; }
.cm-verdict > i { color: var(--gold, #d4af37); margin-right: 4px; }
.cm-verdict b { color: var(--text-color); }
.cm-verdict b.up { color: var(--green, #4ade80); } .cm-verdict b.down { color: var(--red, #f87171); }
.cm-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; }

/* ===== ПАНЕЛЬ: период, направление, порог ===== */
.gn-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; margin: 0 0 26px; padding: 12px 16px; border: 1px solid var(--mx-gold-line); border-radius: var(--mx-r); background: var(--mx-gold-wash); }
.gn-ctl { display: flex; flex-direction: column; gap: 5px; }
.gn-ctl > small { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.gn-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--mx-line-strong); border-radius: 999px; background: var(--mx-surface); }
.gn-seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 13px; color: var(--text-secondary); font: 600 13.5px var(--mx-f-ui); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.gn-seg button:hover { color: var(--text-color); }
.gn-seg button.on { background: var(--gold, #d4af37); color: #141413; }
.gn-sift { flex: 1 1 260px; min-width: 0; padding-bottom: 6px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.gn-sift b { font: 600 15px var(--mx-f-display); color: var(--text-color); }
.gn-sift span[title] { border-bottom: 1px dotted var(--mx-line-strong); cursor: help; }
.gn-sift i { color: var(--gold, #d4af37); margin-right: 4px; }

/* ===== 01. ТАБЛО ===== */
/* табло — физический предмет: тёмное в обеих темах */
.gn-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gn-boards.one { grid-template-columns: minmax(0, 760px); justify-content: center; }
.gn-boards > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-board { --ink: #ffcf3a; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 14px; border-radius: 14px; background: linear-gradient(180deg, #1b1c1f, #121315); border: 1px solid #2c2d31; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -18px rgba(0,0,0,.8); color: #e9e7df; }
.gn-board.down { --ink: #ffcf3a; }
.gn-board-h { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; border-bottom: 1px solid #2c2d31; margin-bottom: 6px; }
.gn-board-h i { font-size: 16px; }
.gn-board.up .gn-board-h i { color: #4ade80; } .gn-board.down .gn-board-h i { color: #f87171; }
.gn-board-h b { font: 600 16px var(--mx-f-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.gn-board-h span { font-size: 13px; color: #a9a79c; }
.gn-board-h .gn-clock { margin-left: auto; font: 700 15px ui-monospace, Consolas, 'Courier New', monospace; font-style: normal; color: var(--ink); letter-spacing: .08em; }
.gn-board-cols { display: flex; gap: 8px; padding: 0 6px 2px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8b897f; }
.gn-board-cols span.r { text-align: right; }
.gn-brow { display: flex; gap: 8px; align-items: center; padding: 3px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; transition: background .15s; }
.gn-brow:hover { background: rgba(255,207,58,.08); }
.gn-fc { display: inline-flex; gap: 2px; flex-shrink: 0; }
.gn-fc i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 24px; border-radius: 3px; background: linear-gradient(180deg, #26272b calc(50% - .5px), rgba(0,0,0,.7) calc(50% - .5px) calc(50% + .5px), #1e1f22 calc(50% + .5px)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.6);
    font: 700 14px/1 ui-monospace, Consolas, 'Courier New', monospace; font-style: normal; color: var(--ink); }
.gn-fc i.flip { animation: gnFlip .09s linear infinite; }
@keyframes gnFlip { 50% { transform: scaleY(.55); filter: brightness(.7); } }
.gn-board.up .gn-fc.chg i { color: #4ade80; } .gn-board.down .gn-fc.chg i { color: #f87171; }
.gn-fc.px i, .gn-fc.rk i { color: #d8d5c8; }
.gn-board-cols .gn-w2 { width: 32px; } .gn-board-cols .gn-w6 { width: 100px; } .gn-board-cols .gn-w7 { width: 117px; } .gn-board-cols .gn-w8 { width: 134px; } .gn-board-cols .gn-w5 { width: 83px; }
.gn-bname { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 600; color: #d8d5c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.gn-bname small { font-size: 12px; font-weight: 500; color: #8b897f; }
.gn-board-cols .gn-bname { font-size: 11px; color: #8b897f; }
.gn-board-empty { padding: 20px 6px; font-size: 13px; color: #a9a79c; }

/* ===== 02. УСТОЙЧИВЫЕ ЛИДЕРЫ ===== */
.gn-steady { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gn-steady.one { grid-template-columns: minmax(0, 760px); }
.gn-steady > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-st { --c: 74,222,128; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-st.down { --c: 248,113,113; }
.gn-st-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gn-st-h b { font: 600 14px var(--mx-f-display); color: var(--text-color); }
.gn-st-h small { font-size: 12.5px; color: var(--text-secondary); }
.gn-st-g { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.gn-st-ph { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.gn-st-r { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.gn-st-r:hover .gn-st-c b { color: var(--gold, #d4af37); }
.gn-st-c { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; padding: 5px 0; }
.gn-st-c img { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; }
.gn-st-c b { font-size: 13px; color: var(--text-color); }
.gn-st-c small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-st-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; border-radius: 7px; background: var(--mx-surface-2); }
.gn-st-cell.in { background: rgba(var(--c), calc(var(--a) * .35)); box-shadow: inset 0 0 0 1px rgba(var(--c), calc(var(--a) * .6)); }
.gn-st-cell b { font-size: 13px; font-variant-numeric: tabular-nums; }
.gn-st-cell small { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.gn-st > .cm-empty { padding: 14px 0; }

/* ===== 03. РАЗВОРОТЫ ===== */
.gn-turns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gn-turns > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-tcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-tcol-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.gn-tcol-h i { font-size: 13px; } .gn-tcol-h.up i { color: #4ade80; } .gn-tcol-h.down i { color: #f87171; }
.gn-tcol-h b { font: 600 14px var(--mx-f-display); color: var(--text-color); }
.gn-tcol-h small { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); }
.gn-tcol > .cm-empty { padding: 14px 0; }
.gn-tc { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px; gap: 12px; align-items: center; padding: 7px 8px; border: 0; border-radius: 8px; background: var(--mx-surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.gn-tc:hover { background: var(--mx-gold-wash); }
.gn-tc-n { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
.gn-tc-n img { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; }
.gn-tc-n b { font-size: 13px; color: var(--text-color); }
.gn-tc-n small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-tc canvas { width: 120px; height: 34px; display: block; }
.gn-tc-v { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12.5px; color: var(--text-secondary); }
.gn-tc-v b { font-size: 13px; font-variant-numeric: tabular-nums; }

/* ===== 04. ВЕСЬ РЫНОК ===== */
.gn-dist { padding: 16px 18px 12px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-hist { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; align-items: end; }
.gn-hb { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.gn-hb-n { display: flex; flex-direction: column; align-items: center; font: 600 15px var(--mx-f-display); color: var(--text-color); line-height: 1.1; }
.gn-hb-n small { font: 500 12px var(--mx-f-ui); color: var(--text-secondary); }
.gn-hb-bar { position: relative; height: 170px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--mx-line-strong); }
.gn-hb-bar > i { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 0 0; transition: height .9s cubic-bezier(.2,.8,.2,1); }
.gn-hb.up .gn-hb-bar > i { background: linear-gradient(180deg, rgba(74,222,128,.85), rgba(74,222,128,.35)); }
.gn-hb.down .gn-hb-bar > i { background: linear-gradient(180deg, rgba(248,113,113,.85), rgba(248,113,113,.35)); }
.gn-dist.wait .gn-hb-bar > i { height: 0; }
.gn-hb-btc { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #f7931a; color: #fff; font: 700 14px/1 Arial, sans-serif; font-style: normal; box-shadow: 0 0 0 2px rgba(16,16,15,.6); z-index: 1; }
.gn-hb-med { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); padding: 1px 6px; border-radius: 5px; background: var(--gold, #d4af37); color: #141413; font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; z-index: 1; }
.gn-hb-l { font-size: 12px; color: var(--text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 05. ДРУГИЕ РЫНКИ ===== */
.gn-other { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gn-other > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-om { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.gn-om-h { display: flex; align-items: baseline; gap: 8px; }
.gn-om-h i { color: var(--gold, #d4af37); font-size: 13px; }
.gn-om-h b { font: 600 13.5px var(--mx-f-display); color: var(--text-color); }
.gn-om-h small { margin-left: auto; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.gn-om-l { display: flex; flex-direction: column; gap: 2px; }
.gn-om-l > small { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.gn-om-l.up > small { color: #4ade80; } .gn-om-l.down > small { color: #f87171; }
.gn-om-r { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.gn-om-r:hover { background: var(--mx-gold-wash); }
.gn-om-r b { font-size: 13.5px; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-om-r em { font-style: normal; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gn-om-none { font-size: 13px; color: var(--text-secondary); padding: 2px 6px; }
.gn-om > .cm-empty { padding: 10px 0; }

/* ===== 06. ТАБЛИЦА ===== */
.gn-table tbody tr { cursor: pointer; }
.gn-table td.gn-n { color: var(--text-secondary); font-size: 13px; }
.gn-table td.gn-cur { font-weight: 700; background: var(--mx-gold-wash); }
.gn-tspark { width: 96px; height: 32px; display: block; }
.gn-px { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gn-table thead th:nth-child(2) { min-width: 0; }
.gn-table tbody td:nth-child(2) { text-align: left; }
.gn-more { display: flex; justify-content: center; margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); }
.gn-more button { padding: 8px 18px; border: 1px solid var(--mx-gold-line); border-radius: 999px; background: var(--mx-gold-wash); color: var(--text-color); font: 600 13.5px var(--mx-f-ui); cursor: pointer; }
.gn-more button:hover { border-color: var(--gold, #d4af37); }

/* ===== ДАЛЬШЕ ===== */
.cm-next { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 34px 0 10px; }
.cm-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; }
.cm-next a:hover { border-color: var(--mx-gold-line); background: var(--mx-gold-wash); }
.cm-next i { grid-row: span 2; font-size: 16px; color: var(--gold, #d4af37); }
.cm-next b { font-size: 13px; color: var(--text-color); }
.cm-next span { font-size: 13px; color: var(--text-secondary); }

/* ===== СВЕТЛАЯ ТЕМА ===== */
body.light .page-content .up, body.light .cm-verdict b.up { color: #15803d; }
body.light .page-content .down, body.light .cm-verdict b.down { color: #b91c1c; }
body.light .cm-num { -webkit-text-stroke-color: rgba(138,106,16,.55); }
body.light .gn-seg button.on { background: #a87f12; color: #fff; }
body.light .gn-board { box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); }
body.light .gn-st { --c: 22,163,74; } body.light .gn-st.down { --c: 220,38,38; }
body.light .gn-tcol-h.up i, body.light .gn-om-l.up > small { color: #15803d; } body.light .gn-tcol-h.down i, body.light .gn-om-l.down > small { color: #b91c1c; }
body.light .gn-hb.up .gn-hb-bar > i { background: linear-gradient(180deg, rgba(22,163,74,.8), rgba(22,163,74,.3)); }
body.light .gn-hb.down .gn-hb-bar > i { background: linear-gradient(180deg, rgba(220,38,38,.75), rgba(220,38,38,.28)); }
body.light .gn-hb-btc { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
body.light .gn-hb-med { background: #a87f12; color: #fff; }

/* ===== АДАПТИВ ===== */
@media (min-width: 1101px) and (max-width: 1700px) { .gn-boards:not(.one) .gn-bname { display: none; } }
@media (max-width: 1500px) {
    .gn-fc i { width: 13px; height: 22px; font-size: 13.5px; }
    .gn-board-cols .gn-w2 { width: 28px; } .gn-board-cols .gn-w6 { width: 88px; } .gn-board-cols .gn-w7 { width: 103px; } .gn-board-cols .gn-w8 { width: 118px; } .gn-board-cols .gn-w5 { width: 73px; }
}
@media (max-width: 1300px) {
    .gn-other { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gn-boards .hide-s, .gn-board-cols .hide-s { display: none; }
    .gn-tc { grid-template-columns: minmax(0, 1fr) 90px 130px; }
    .gn-tc canvas { width: 90px; }
}
@media (max-width: 1100px) {
    .gn-boards, .gn-steady, .gn-turns { grid-template-columns: 1fr; }
    .gn-boards.one, .gn-steady.one { grid-template-columns: 1fr; }
    .gn-boards .hide-s, .gn-board-cols .hide-s { display: inline-flex; }
    .cm-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .gn-bar { padding: 10px 12px; gap: 10px; }
    .gn-seg button { padding: 5px 10px; font-size: 13px; }
    .gn-boards .hide-s, .gn-board-cols .hide-s, .gn-bname { display: none; }
    .gn-board { padding: 10px 8px; }
    .gn-brow, .gn-board-cols { gap: 5px; padding: 3px 2px; }
    .gn-fc { gap: 1px; }
    .gn-fc i { width: 10.5px; height: 19px; font-size: 12.5px; border-radius: 2px; }
    .gn-board-cols .gn-w2 { width: 22px; } .gn-board-cols .gn-w6 { width: 68px; } .gn-board-cols .gn-w7 { width: 79px; } .gn-board-cols .gn-w8 { width: 90px; }
    .gn-board-h b { font-size: 14px; }
    .gn-st { padding: 10px; }
    .gn-st-g { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 3px; }
    .gn-st-c small { display: none; }
    .gn-st-cell b { font-size: 12.5px; }
    .gn-tc { grid-template-columns: minmax(0, 1fr) auto; }
    .gn-tc canvas { display: none; }
    .gn-hist { gap: 3px; }
    .gn-hb-n { font-size: 13px; } .gn-hb-n small { display: none; }
    .gn-hb-bar { height: 130px; }
    .gn-hb-l { white-space: normal; font-size: 10.5px; line-height: 1.2; }
    .gn-hb-btc { width: 18px; height: 18px; font-size: 12.5px; }
    .gn-hb-med { font-size: 8px; padding: 1px 3px; top: 24px; }
    .gn-dist { padding: 12px 8px 8px; }
    .gn-other { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .strip-head { flex-wrap: wrap; }
    .cm-num { font-size: 20px; }
    .cm-next { grid-template-columns: 1fr; }
}