/* ============================================================================
   hidden.css — блоки подстраницы «Скрытые движения» (hidden.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; }
.hd-none { display: flex; align-items: center; gap: 10px; padding: 14px 6px; font-size: 13.5px; color: var(--text-secondary); }
.hd-none i { color: var(--gold, #d4af37); }

/* ===== 01. СИГНАЛЫ + ЭКВАЛАЙЗЕР ===== */
.hd-sig { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.hd-sig > .cm-empty { padding: 22px 0; }
.hd-sr-head, .hd-sr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 100px 100px 150px; gap: 14px; align-items: center; }
.hd-sr-head { padding: 0 8px 6px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--mx-line); }
.hd-sr-head span:nth-child(n+3) { text-align: right; }
.hd-sr { padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.hd-sr:hover { background: var(--mx-gold-wash); }
.hd-sr.weak { opacity: .55; }
.hd-sr-n { display: flex; flex-direction: column; min-width: 0; }
.hd-sr-n b { font: 600 15px var(--mx-f-display); color: var(--text-color); }
.hd-sr-n b small { font: 500 12.5px var(--mx-f-ui); color: var(--text-secondary); }
.hd-sr-n > small { font-size: 12.5px; color: var(--text-secondary); }
.hd-eq { position: relative; height: 62px; min-width: 0; }
.hd-eq canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hd-sr-x, .hd-sr-p, .hd-sr-s { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hd-sr-x b { font: 600 20px var(--mx-f-display); color: var(--gold, #d4af37); }
.hd-sr-p b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hd-sr-x small, .hd-sr-p small, .hd-sr-s small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.hd-sr-s { position: relative; }
.hd-sr-s i { width: 100%; height: 6px; border-radius: 3px; margin-bottom: 4px; background: linear-gradient(90deg, #4ade80 var(--b), #f87171 var(--b)); opacity: .8; }
.hd-sr-s b { font-size: 14px; color: var(--text-color); }
.hd-sr-s.buy b { color: #4ade80; } .hd-sr-s.sell b { color: #f87171; }
.hd-sep { margin: 8px 8px 0; padding-top: 8px; border-top: 1px dashed var(--mx-line); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.hd-eq-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; padding: 8px 8px 0; border-top: 1px solid var(--mx-line); font-size: 12.5px; color: var(--text-secondary); }
.hd-eq-leg span { display: inline-flex; align-items: center; gap: 6px; }
.hd-eq-leg i { width: 10px; height: 10px; border-radius: 2px; }
.hd-eq-leg i.buy { background: #4ade80; } .hd-eq-leg i.sell { background: #f87171; } .hd-eq-leg i.neu { background: rgba(233,231,223,.4); }
.hd-eq-leg i.line { width: 16px; height: 2px; background: #f5d97a; }
.hd-eq-leg i.mark { height: 1px; width: 16px; background: var(--mx-line-strong); }

/* ===== 02. КАРТА ТИШИНЫ ===== */
.hd-map { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.hd-map-box { position: relative; height: 440px; min-width: 0; }
.hd-map-box > .cm-empty { padding: 22px 0; }
.hd-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hd-map-svg .z-q { fill: rgba(212,175,55,.1); stroke: rgba(212,175,55,.45); stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.hd-map-svg .z-h { fill: rgba(248,113,113,.05); }
.hd-map-svg .g { stroke: var(--mx-line); vector-effect: non-scaling-stroke; }
.hd-map-svg .g.one { stroke: var(--mx-line-strong); stroke-dasharray: 3 3; }
.hd-ax { position: absolute; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.hd-ax.x { bottom: 12px; transform: translateX(-50%); }
.hd-ax.y { left: 2px; transform: translateY(-50%); }
.hd-axt { position: absolute; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); opacity: .8; }
.hd-axt.x { bottom: -3px; right: 14px; }
.hd-axt.y { top: 14px; left: 52px; }
.hd-zl { position: absolute; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.hd-zl.q { color: var(--gold, #d4af37); }
.hd-dot { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding: 0; border: 1px solid rgba(0,0,0,.35); border-radius: 50%; cursor: pointer; transition: transform .15s, opacity .5s, scale .5s; z-index: 1; }
.hd-dot.buy { background: rgba(74,222,128,.75); } .hd-dot.sell { background: rgba(248,113,113,.75); } .hd-dot.neu { background: rgba(200,198,190,.55); }
.hd-dot.q { box-shadow: 0 0 0 3px rgba(212,175,55,.55), 0 0 14px rgba(212,175,55,.5); z-index: 2; }
.hd-dot:hover { transform: scale(1.5); z-index: 3; }
.hd-dot em { position: absolute; left: 100%; top: 50%; transform: translate(4px, -50%); font: 600 12px var(--mx-f-ui); font-style: normal; color: var(--text-color); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hd-dot em.l { left: auto; right: 100%; transform: translate(-4px, -50%); }
.hd-map-box.wait .hd-dot { opacity: 0; scale: .2; }
.hd-map-box.play .hd-dot { transition-delay: var(--d); }
.hd-map-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--mx-line); }
.hd-ms { display: flex; flex-direction: column; gap: 2px; }
.hd-ms small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.hd-ms > b { font: 600 30px/1.1 var(--mx-f-display); color: var(--gold, #d4af37); }
.hd-ms > b i { font: 500 13px var(--mx-f-ui); font-style: normal; color: var(--text-secondary); }
.hd-ms span { font-size: 12.5px; color: var(--text-secondary); }
.hd-ms-l { display: flex; flex-direction: column; gap: 3px; }
.hd-ms-l button { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 0; border-radius: 7px; background: var(--mx-surface-2); color: inherit; font: inherit; cursor: pointer; }
.hd-ms-l button:hover { background: var(--mx-gold-wash); }
.hd-ms-l b { font-size: 13.5px; color: var(--text-color); }
.hd-ms-l span { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.hd-ms-none { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.hd-ms-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; font-size: 12.5px; color: var(--text-secondary); }
.hd-ms-leg span { display: inline-flex; align-items: center; gap: 6px; }
.hd-ms-leg i { width: 9px; height: 9px; border-radius: 50%; }
.hd-ms-leg i.buy { background: #4ade80; } .hd-ms-leg i.sell { background: #f87171; } .hd-ms-leg i.neu { background: rgba(200,198,190,.6); }
.hd-ms-leg i.sz { width: 14px; height: 14px; border: 1px solid var(--text-secondary); background: none; }

/* ===== 03. ВСПЛЕСКИ ЧАСА ===== */
.hd-hour { padding: 10px 14px 12px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.hd-hour > .cm-empty { padding: 14px 0; }
.hd-hc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hd-hi { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--mx-line); border-left: 3px solid var(--mx-line-strong); border-radius: 10px; background: var(--mx-surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hd-hi.buy { border-left-color: #4ade80; } .hd-hi.sell { border-left-color: #f87171; }
.hd-hi.weak { opacity: .55; }
.hd-hi:hover { border-color: var(--gold, #d4af37); }
.hd-hi-n { display: flex; flex-direction: column; min-width: 0; }
.hd-hi-n b { font: 600 14px var(--mx-f-display); color: var(--text-color); }
.hd-hi-n small, .hd-hi-x small, .hd-hi-m small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.hd-hi-x { display: flex; flex-direction: column; align-items: flex-end; font: 600 18px var(--mx-f-display); color: var(--gold, #d4af37); }
.hd-hi-x small { font-family: var(--mx-f-ui); font-weight: 500; }
.hd-hi-m { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.hd-hi-m b { font-size: 13px; }

/* ===== 04. OI ===== */
.hd-oi { padding: 10px 14px 12px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.hd-oi > .cm-empty { padding: 14px 0; }
.hd-oc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hd-oi-c { display: grid; grid-template-columns: minmax(0, 1fr) 90px; grid-template-rows: auto auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--mx-line); border-radius: 10px; background: var(--mx-surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hd-oi-c:hover { border-color: var(--gold, #d4af37); }
.hd-oi-c.weak { opacity: .55; }
.hd-oi-n { display: flex; flex-direction: column; min-width: 0; }
.hd-oi-n b { font: 600 14px var(--mx-f-display); color: var(--text-color); }
.hd-oi-n small { font-size: 12px; color: var(--text-secondary); }
.hd-oisp { width: 90px; height: 30px; display: block; }
.hd-oisp path { fill: none; stroke: var(--gold, #d4af37); stroke-width: 1.6; }
.hd-oi-v { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); }
.hd-oi-v b { font-size: 13px; }

/* ===== 05. ЧТО БЫЛО ПОСЛЕ ===== */
.hd-bt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.hd-bt > .cm-empty { grid-column: 1 / -1; padding: 14px 0; }
.hd-bt-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hd-bc { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--mx-line); border-top: 3px solid var(--mx-gold-line); border-radius: 12px; background: var(--mx-surface-2); }
.hd-bc small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.hd-bc > b { font: 600 30px/1.1 var(--mx-f-display); color: var(--text-color); }
.hd-bc span { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.hd-bc em { font-style: normal; font-weight: 700; color: var(--text-color); }
.hd-bc em.up { color: var(--gold, #d4af37); } .hd-bc em.down { color: #6fa8ff; }
.hd-bt-hist { min-width: 0; }
.hd-bt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-secondary); }
.hd-bt-h b { font-size: 13px; color: var(--text-color); margin-right: auto; }
.hd-bt-h span { display: inline-flex; align-items: center; gap: 6px; }
.hd-bt-h i { width: 10px; height: 10px; border-radius: 2px; }
.hd-bt-h i.a { background: var(--gold, #d4af37); } .hd-bt-h i.b { background: var(--mx-line-strong); }
.hd-bt-bars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; }
.hd-bb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-bb-c { position: relative; height: 130px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--mx-line-strong); }
.hd-bb-c i { width: 42%; border-radius: 3px 3px 0 0; }
.hd-bb-c i.a { background: var(--gold, #d4af37); } .hd-bb-c i.b { background: var(--mx-line-strong); }
.hd-bb-n { font-size: 12.5px; font-weight: 700; color: var(--text-color); text-align: center; }
.hd-bb-l { font-size: 11.5px; color: var(--text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-why { padding: 12px 14px; border: 1px dashed var(--mx-line-strong); border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.hd-why > b { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-color); }
.hd-why > b i { color: var(--gold, #d4af37); margin-right: 4px; }
.hd-why ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }

/* ===== ДАЛЬШЕ ===== */
.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 .hd-sr-x b, body.light .hd-hi-x, body.light .hd-ms > b, body.light .hd-zl.q { color: #8a6a10; }
body.light .hd-sr-s.buy b { color: #15803d; } body.light .hd-sr-s.sell b { color: #b91c1c; }
body.light .hd-sr-s i { background: linear-gradient(90deg, #16a34a var(--b), #dc2626 var(--b)); }
body.light .hd-eq-leg i.buy, body.light .hd-ms-leg i.buy { background: #16a34a; } body.light .hd-eq-leg i.sell, body.light .hd-ms-leg i.sell { background: #dc2626; }
body.light .hd-eq-leg i.neu { background: rgba(20,20,20,.35); } body.light .hd-eq-leg i.line { background: #a87f12; }
body.light .hd-dot.buy { background: rgba(22,163,74,.7); } body.light .hd-dot.sell { background: rgba(220,38,38,.7); } body.light .hd-dot.neu { background: rgba(80,80,80,.4); }
body.light .hd-dot em { text-shadow: 0 1px 2px rgba(255,255,255,.9); }
body.light .hd-hi.buy { border-left-color: #16a34a; } body.light .hd-hi.sell { border-left-color: #dc2626; }
body.light .hd-oisp path { stroke: #a87f12; }
body.light .hd-bb-c i.a, body.light .hd-bt-h i.a { background: #a87f12; }
body.light .hd-bc em.up { color: #8a6a10; } body.light .hd-bc em.down { color: #2f62c9; }

/* ===== АДАПТИВ ===== */
@media (max-width: 1300px) {
    .hd-hc, .hd-oc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-bt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .hd-sr-head, .hd-sr { grid-template-columns: 120px minmax(0, 1fr) 80px 80px 110px; gap: 10px; }
    .hd-map { grid-template-columns: 1fr; }
    .hd-map-side { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--mx-line); }
    .hd-bt { grid-template-columns: 1fr; }
    .cm-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .hd-sig { padding: 10px; }
    .hd-sr-head { display: none; }
    .hd-sr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto; gap: 6px 12px; }
    .hd-sr-n { grid-column: 1; grid-row: 1; }
    .hd-sr-x { grid-column: 2; grid-row: 1; } .hd-sr-p { grid-column: 3; grid-row: 1; }
    .hd-eq { grid-column: 1 / -1; grid-row: 2; height: 54px; }
    .hd-sr-s { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; gap: 8px; }
    .hd-sr-s i { flex: 1; margin: 0; }
    .hd-map { padding: 10px; }
    .hd-map-box { height: 320px; }
    .hd-dot em { display: none; }
    .hd-dot.q em { display: block; }
    .hd-zl { font-size: 11px; }
    .hd-axt.y { left: 40px; }
    .hd-hc, .hd-oc, .hd-bt-cards { grid-template-columns: 1fr; }
    .hd-bt { padding: 10px; }
    .hd-bt-bars { gap: 2px; }
    .hd-bb-l { white-space: normal; font-size: 10px; line-height: 1.2; }
}
@media (max-width: 600px) {
    .strip-head { flex-wrap: wrap; }
    .cm-num { font-size: 20px; }
    .cm-next { grid-template-columns: 1fr; }
}

/* сила сигнала: 3 деления (слабый / средний / сильный) */
.hd-pw { display: inline-flex; gap: 2px; margin-right: 5px; vertical-align: 1px; }
.hd-pw u { width: 9px; height: 5px; border-radius: 2px; background: var(--mx-line-strong); }
.hd-pw[data-k="1"] u:nth-child(-n+1), .hd-pw[data-k="2"] u:nth-child(-n+2), .hd-pw[data-k="3"] u { background: var(--gold, #d4af37); }