/* ============================================================================
   listings.css — блоки подстраницы «Новые листинги» (listings.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; }
.cm-tip { position: absolute; z-index: 5; display: none; pointer-events: none; min-width: 110px; 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; }
.cm-tip b { color: #fff; } .cm-tip span { color: #a9a79c; }
.cm-tip b.up { color: #4ade80; } .cm-tip b.down { color: #f87171; }
.ls-seg, .ls-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--mx-line-strong); border-radius: 999px; background: var(--mx-surface); }
.ls-seg button, .ls-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; color: var(--text-secondary); font: 600 13.5px var(--mx-f-ui); cursor: pointer; white-space: nowrap; }
.ls-seg button em, .ls-tabs button em { font-style: normal; margin-left: 4px; opacity: .7; }
.ls-seg button.on, .ls-tabs button.on { background: var(--gold, #d4af37); color: #141413; }
.ls-tabs { margin-bottom: 10px; }

/* ===== 01. СТАРТОВАЯ ПОЛОСА ===== */
.ls-run { padding: 14px 16px 12px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: linear-gradient(180deg, rgba(212,175,55,.04), transparent 40%), var(--mx-surface); }
.ls-run-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ls-run-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ls-run-stats span { display: flex; flex-direction: column; }
.ls-run-stats small { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.ls-run-stats b { font: 600 20px var(--mx-f-display); color: var(--text-color); }
.ls-run-stats b i { font: 500 13px var(--mx-f-ui); font-style: normal; color: var(--text-secondary); }
.ls-run-box { position: relative; height: 380px; }
.ls-run-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ls-run-box .cm-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 10px; background: var(--mx-surface-2); text-align: center; }
.ls-run-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.ls-run-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ls-run-leg i { width: 16px; height: 3px; border-radius: 2px; }
.ls-run-leg i.med { background: #f5d97a; height: 4px; } .ls-run-leg i.band { height: 10px; background: rgba(245,217,122,.2); }
.ls-run-leg i.up { background: rgba(74,222,128,.7); } .ls-run-leg i.down { background: rgba(248,113,113,.7); }

/* ===== 02. НОВИЧКИ ===== */
.ls-fresh { display: flex; flex-direction: column; gap: 14px; }
.ls-fresh > .cm-empty { border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.ls-grp > small { display: block; margin: 0 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.ls-grp > small i { color: var(--gold, #d4af37); margin-right: 4px; }
.ls-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ls-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--mx-line); border-top: 3px solid #b07a1f; border-radius: 12px; background: var(--mx-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.ls-card.stock { border-top-color: #4f6fa8; }
.ls-card:hover { border-color: var(--gold, #d4af37); transform: translateY(-2px); }
.ls-card-h { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ls-card-h img { width: 30px; height: 30px; border-radius: 8px; }
.ls-card-h span { display: flex; flex-direction: column; min-width: 0; }
.ls-card-h b { font: 600 14px var(--mx-f-display); color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-card-h small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-card-h em { font-style: normal; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ls-sp { width: 100%; height: 34px; display: block; }
.ls-sp path { fill: none; stroke-width: 1.5; }
.ls-sp.up path { stroke: #4ade80; } .ls-sp.down path { stroke: #f87171; }
.ls-sp-none { display: block; height: 34px; line-height: 34px; font-size: 12.5px; color: var(--text-secondary); }
.ls-card-f { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--text-secondary); }
.ls-card-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-card-f i { color: var(--gold, #d4af37); margin-right: 3px; }
.ls-more { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }

/* ===== 03. ЛУЧШИЕ И ХУДШИЕ ===== */
.ls-best { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ls-best > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.ls-bcol { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.ls-bcol-h { margin-bottom: 4px; font: 600 14px var(--mx-f-display); color: var(--text-color); }
.ls-bcol-h.up i { color: #4ade80; } .ls-bcol-h.down i { color: #f87171; }
.ls-br { display: grid; grid-template-columns: 18px 130px minmax(0, 1fr) 80px 92px; gap: 10px; align-items: center; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ls-br:hover { background: var(--mx-gold-wash); }
.ls-br > em { font-style: normal; font-size: 12.5px; color: var(--text-secondary); }
.ls-br-n { display: flex; flex-direction: column; min-width: 0; }
.ls-br-n b { font-size: 13px; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-br-n small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.ls-br-bar { height: 8px; border-radius: 4px; background: var(--mx-surface-2); overflow: hidden; }
.ls-br-bar i { display: block; height: 100%; border-radius: 4px; }
.ls-br-bar i.up { background: rgba(74,222,128,.7); } .ls-br-bar i.down { background: rgba(248,113,113,.7); }
.ls-br > b { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ls-br > small { font-size: 12px; color: var(--text-secondary); text-align: right; white-space: nowrap; }

/* ===== 04. ФЬЮЧЕРСЫ: лента-таймлайн ===== */
.ls-fut { padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.ls-fut > .cm-empty { padding: 10px 0; }
.ls-tl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.ls-tl-i { position: relative; display: grid; grid-template-columns: 82px 14px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.ls-tl-i time { font-size: 13px; font-weight: 600; color: var(--text-color); font-variant-numeric: tabular-nums; }
.ls-tl-i time small { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.ls-tl-dot { position: relative; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--gold, #d4af37); box-shadow: 0 0 0 3px var(--mx-gold-wash); }
.ls-tl-i:not(:last-child) .ls-tl-dot::after { content: ''; position: absolute; left: 4px; top: 14px; width: 2px; height: 36px; background: var(--mx-line-strong); }
.ls-tl-i > div { display: flex; flex-direction: column; min-width: 0; }
.ls-tl-i b { font: 600 13.5px var(--mx-f-display); color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tl-i small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tl-i span { font-size: 13px; color: var(--text-secondary); }

/* ===== 05. ОБЪЯВЛЕНИЯ И НОВОСТИ ===== */
.ls-ann { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 30px; }
.ls-ann > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.ls-acol { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.ls-acol > .cm-empty { padding: 10px 0; }
.ls-acol-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ls-acol-h b { font: 600 14px var(--mx-f-display); color: var(--text-color); }
.ls-acol-h b i { color: var(--gold, #d4af37); margin-right: 4px; }
.ls-acol-h small { font-size: 12.5px; color: var(--text-secondary); }
.ls-an { display: grid; grid-template-columns: 62px 92px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px dashed var(--mx-line); font-size: 13px; }
.ls-an time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ls-an-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ls-an.coin .ls-an-k { color: #e0a43a; } .ls-an.fut .ls-an-k { color: #8b6cff; } .ls-an.stock .ls-an-k { color: #5b8cff; }
.ls-an-t { color: var(--text-color); line-height: 1.4; }
.ls-nw { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-top: 1px dashed var(--mx-line); color: inherit; text-decoration: none; }
.ls-nw b { font-size: 12.5px; color: var(--gold, #d4af37); }
.ls-nw span { font-size: 13.5px; color: var(--text-color); line-height: 1.4; }
.ls-nw small { font-size: 12px; color: var(--text-secondary); }
.ls-nw:hover span { color: var(--gold, #d4af37); }
.ls-nw-none { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.ls-nw-none i { color: var(--gold, #d4af37); margin-top: 3px; }

/* ===== 06. ТАБЛИЦА ===== */
.ls-table thead th[data-sort] { cursor: pointer; user-select: none; }
.ls-table tbody tr { cursor: pointer; }
.ls-table .ls-sp { width: 110px; height: 30px; margin: 0 auto; }
.ls-dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ls-dt small { display: block; font-size: 12px; color: var(--text-secondary); }
.ls-px { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== ДАЛЬШЕ ===== */
.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 .ls-seg button.on, body.light .ls-tabs button.on { background: #a87f12; color: #fff; }
body.light .ls-sp.up path { stroke: #15803d; } body.light .ls-sp.down path { stroke: #b91c1c; }
body.light .ls-run-leg i.med { background: #a87f12; } body.light .ls-run-leg i.band { background: rgba(168,127,18,.2); }
body.light .ls-br-bar i.up { background: rgba(22,163,74,.6); } body.light .ls-br-bar i.down { background: rgba(220,38,38,.55); }
body.light .ls-bcol-h.up i { color: #15803d; } body.light .ls-bcol-h.down i { color: #b91c1c; }
body.light .ls-nw b, body.light .ls-an.coin .ls-an-k { color: #8a6a10; }

/* ===== АДАПТИВ ===== */
@media (max-width: 1400px) { .ls-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
    .ls-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-best, .ls-ann { grid-template-columns: 1fr; }
    .ls-tl { grid-template-columns: 1fr; }
    .cm-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ls-run { padding: 10px; }
    .ls-run-box { height: 300px; }
    .ls-run-stats { gap: 6px 14px; } .ls-run-stats b { font-size: 16px; }
    .ls-cards { grid-template-columns: 1fr; }
    .ls-br { grid-template-columns: 16px minmax(0, 1fr) 70px; }
    .ls-br-bar, .ls-br > small { display: none; }
    .ls-an { grid-template-columns: 54px minmax(0, 1fr); }
    .ls-an-k { display: none; }
}
@media (max-width: 600px) {
    .strip-head { flex-wrap: wrap; }
    .cm-num { font-size: 20px; }
    .cm-next { grid-template-columns: 1fr; }
}