/* ============================================================================
   watchlist.css — блоки подстраницы «Избранное» (watchlist.html).
   Каркас — ui-base.css, дизайн-слой и токены (--mx-*) — kyrs.css, фон — kyrs-scene.css.
   --gc — цвет группы пользователя, задаёт watchlist-page.js.
   ============================================================================ */

/* ===== общее (как на других подстраницах раздела) ===== */
.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; }

/* ===== ПАНЕЛЬ ===== */
.wl-bar { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; margin: 0 0 28px; padding: 12px 16px; border: 1px solid var(--mx-gold-line); border-radius: var(--mx-r); background: var(--mx-gold-wash); }
.wl-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--mx-line-strong); border-radius: 12px; background: var(--mx-surface); }
.wl-search:focus-within { border-color: var(--gold, #d4af37); }
.wl-search > i { color: var(--gold, #d4af37); font-size: 13px; }
.wl-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: var(--text-color); font: 500 13px var(--mx-f-ui); outline: none; }
.wl-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--mx-line-strong); border-radius: 12px; background: var(--bg-color, #121211); box-shadow: 0 18px 40px rgba(0,0,0,.45); max-height: 340px; overflow-y: auto; }
.wl-sug[hidden] { display: none; }
.wl-sug button { display: grid; grid-template-columns: 22px 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wl-sug button:hover, .wl-sug button.hl { background: var(--mx-gold-wash); }
.wl-sug img { width: 22px; height: 22px; border-radius: 50%; }
.wl-sug b { font-size: 13.5px; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sug span { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sug em { font-style: normal; font-size: 12px; color: var(--text-secondary); }
.wl-sug-none { padding: 10px; font-size: 13px; color: var(--text-secondary); }
.wl-groups { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.wl-groups button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--mx-line-strong); border-radius: 999px; background: transparent; color: var(--text-secondary); font: 600 13px var(--mx-f-ui); cursor: pointer; }
.wl-groups button i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }
.wl-groups button em { font-style: normal; opacity: .7; }
.wl-groups button.on { border-color: var(--gold, #d4af37); color: var(--text-color); background: var(--mx-surface); }
.wl-groups .wl-g-add { border-style: dashed; }
.wl-groups .wl-g-del { padding: 6px 10px; }
.wl-groups .wl-g-del:hover { color: #f87171; border-color: #f87171; }
.wl-io { display: flex; gap: 6px; }
.wl-io button, .wl-imp { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--mx-line-strong); border-radius: 999px; background: none; color: var(--text-secondary); font: 600 13px var(--mx-f-ui); cursor: pointer; white-space: nowrap; }
.wl-io button:hover, .wl-imp:hover { border-color: var(--gold, #d4af37); color: var(--text-color); }
.wl-msg { grid-column: 1 / -1; font-size: 13px; color: var(--text-secondary); }
.wl-msg:empty { display: none; }
.wl-msg.bad { color: #f87171; }

/* ===== ПУСТО ===== */
.wl-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; border: 1px dashed var(--mx-gold-line); border-radius: var(--mx-r); text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.wl-empty > i { font-size: 34px; color: var(--gold, #d4af37); }
.wl-empty > b { font: 600 18px var(--mx-f-display); color: var(--text-color); }
.wl-empty > span { max-width: 560px; }
.wl-ex { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.wl-ex button { padding: 6px 12px; border: 1px solid var(--mx-line-strong); border-radius: 999px; background: var(--mx-surface); color: var(--text-color); font: 600 13px var(--mx-f-ui); cursor: pointer; }
.wl-ex button:hover { border-color: var(--gold, #d4af37); }
.wl-ex button.all { border-color: var(--mx-gold-line); background: var(--mx-gold-wash); }

/* ===== 01. СВОДКА ===== */
.wl-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.wl-sum > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.wl-s { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border: 1px solid var(--mx-line); border-top: 3px solid var(--mx-gold-line); border-radius: 12px; background: var(--mx-surface); color: inherit; font: inherit; text-align: left; }
button.wl-s { cursor: pointer; } button.wl-s:hover { border-color: var(--gold, #d4af37); }
.wl-s small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.wl-s > b { font: 600 26px/1.15 var(--mx-f-display); color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-s > b i, .wl-s > b em { font: 600 15px var(--mx-f-ui); font-style: normal; }
.wl-s > b i { color: var(--text-secondary); font-weight: 500; }
.wl-s > span { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-s-bar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(248,113,113,.4); overflow: hidden; }
.wl-s-bar i { display: block; height: 100%; background: #4ade80; }

/* ===== 02. СОЗВЕЗДИЕ ===== */
.wl-sky { border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: radial-gradient(70% 90% at 50% 40%, rgba(91,74,143,.25), transparent 70%), linear-gradient(180deg, #0d0d14, #121218); overflow: hidden; }
.wl-sky > .cm-empty { color: #a9a79c; }
.wl-sky-in { position: relative; height: 400px; }
.wl-sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wl-sky-svg .ax { stroke: rgba(255,255,255,.12); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.wl-sky-svg .cl { fill: none; stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.wl-star { position: absolute; width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2); padding: 0; border: 0; background: none; cursor: pointer; transition: transform .7s cubic-bezier(.2,1.4,.4,1), opacity .5s; transition-delay: var(--d); z-index: 1; }
.wl-star svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 6px currentColor); }
.wl-star polygon { fill: currentColor; stroke: var(--gc, transparent); stroke-width: 1.4; }
.wl-star.up { color: #6fe39b; } .wl-star.down { color: #ff8c8c; }
.wl-star:hover { transform: scale(1.35); z-index: 3; transition-delay: 0s; }
.wl-star em { position: absolute; left: 100%; top: 50%; transform: translate(4px, -50%); font: 600 13px var(--mx-f-display); font-style: normal; color: #f0eee6; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.wl-star em.l { left: auto; right: 100%; transform: translate(-4px, -50%); }
.wl-sky-in.wait .wl-star { transform: scale(0); opacity: 0; }
.wl-q { position: absolute; display: flex; flex-direction: column; font-size: 12px; color: rgba(240,238,230,.45); pointer-events: none; }
.wl-q small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.wl-q.tl { left: 14px; top: 10px; } .wl-q.tr { right: 14px; top: 10px; text-align: right; } .wl-q.bl { left: 14px; bottom: 10px; } .wl-q.br { right: 14px; bottom: 10px; text-align: right; align-items: flex-end; }
.wl-ax.x { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 11.5px; color: rgba(240,238,230,.4); white-space: nowrap; }

/* ===== 03. КАРТОЧКИ ===== */
.wl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.wl-cards > .cm-empty { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.wl-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--mx-line); border-top: 3px solid var(--gc); border-radius: 12px; background: var(--mx-surface); overflow: hidden; transition: border-color .15s; }
.wl-card:hover { border-color: var(--mx-gold-line); }
.wl-card-m { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wl-card-h { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.wl-card-h img { width: 30px; height: 30px; border-radius: 8px; }
.wl-card-h > span { display: flex; flex-direction: column; min-width: 0; }
.wl-card-h b { font: 600 14px var(--mx-f-display); color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-card-h small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-card-h em { font-style: normal; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-sp { width: 100%; height: 40px; display: block; }
.wl-sp path { fill: none; stroke-width: 1.6; }
.wl-sp.up path { stroke: #4ade80; } .wl-sp.down path { stroke: #f87171; }
.wl-sp-none { display: block; height: 40px; line-height: 40px; font-size: 12.5px; color: var(--text-secondary); }
.wl-card-p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wl-card-p b { font: 600 16px var(--mx-f-display); color: var(--text-color); font-variant-numeric: tabular-nums; }
.wl-card-p span { font-size: 12.5px; color: var(--text-secondary); }
.wl-card-f { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px dashed var(--mx-line); }
.wl-card-f select { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--mx-line); border-radius: 7px; background: var(--mx-surface-2); color: var(--text-secondary); font: 500 13px var(--mx-f-ui); }
.wl-card-f a, .wl-card-f button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--mx-line); border-radius: 7px; background: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; text-decoration: none; }
.wl-card-f a:hover { color: var(--gold, #d4af37); border-color: var(--gold, #d4af37); }
.wl-card-f button:hover { color: #f87171; border-color: #f87171; }

/* ===== 04. ПОКА ВАС НЕ БЫЛО ===== */
.wl-away { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.wl-away > .cm-empty { padding: 6px 0; }
.wl-away-h { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.wl-aw { display: grid; grid-template-columns: 110px 220px minmax(0, 1fr) 80px; gap: 14px; align-items: center; padding: 5px 4px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wl-aw:hover { background: var(--mx-gold-wash); }
.wl-aw b { font: 600 13px var(--mx-f-display); color: var(--text-color); }
.wl-aw-p { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-aw-bar { position: relative; height: 10px; border-radius: 4px; background: var(--mx-surface-2); }
.wl-aw-bar i.z { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--mx-line-strong); }
.wl-aw-bar i.b { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.wl-aw-bar i.b.up { background: rgba(74,222,128,.7); } .wl-aw-bar i.b.down { background: rgba(248,113,113,.7); }
.wl-aw em { font-style: normal; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.wl-away-first { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.wl-away-first i { margin-top: 3px; font-size: 18px; color: var(--gold, #d4af37); }
.wl-away-first b { display: block; font-size: 13.5px; color: var(--text-color); }
.wl-away-new { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }

/* ===== 05. НОВОСТИ ===== */
.wl-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wl-news > .cm-empty, .wl-nw-none { grid-column: 1 / -1; border: 1px solid var(--mx-line); border-radius: var(--mx-r); background: var(--mx-surface); }
.wl-nw { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--mx-line); border-radius: 12px; background: var(--mx-surface); color: inherit; text-decoration: none; transition: border-color .15s; }
.wl-nw:hover { border-color: var(--mx-gold-line); }
.wl-nw-t { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wl-nw-t b { padding: 1px 7px; border-radius: 5px; background: var(--mx-gold-wash); font-size: 12.5px; color: var(--gold, #d4af37); }
.wl-nw-t time { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); }
.wl-nw-h { font-size: 13px; line-height: 1.45; color: var(--text-color); }
.wl-nw small { font-size: 12.5px; color: var(--text-secondary); }
.wl-nw-none { display: flex; gap: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.wl-nw-none i { color: var(--gold, #d4af37); margin-top: 3px; }

/* ===== ДАЛЬШЕ ===== */
.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 .wl-sug { background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.15); }
body.light .wl-sp.up path { stroke: #15803d; } body.light .wl-sp.down path { stroke: #b91c1c; }
body.light .wl-aw-bar i.b.up { background: rgba(22,163,74,.6); } body.light .wl-aw-bar i.b.down { background: rgba(220,38,38,.55); }
body.light .wl-nw-t b { color: #8a6a10; }
/* небо созвездия остаётся ночным в обеих темах — это «окно» */

/* ===== АДАПТИВ ===== */
@media (max-width: 1300px) {
    .wl-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .wl-groups { grid-column: 1 / -1; grid-row: 2; }
    .wl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .wl-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-news { grid-template-columns: 1fr; }
    .wl-aw { grid-template-columns: 90px 180px minmax(0, 1fr) 70px; }
    .cm-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .wl-bar { grid-template-columns: 1fr; padding: 10px; }
    .wl-groups { grid-row: auto; }
    .wl-io { flex-wrap: wrap; }
    .wl-sum, .wl-cards { grid-template-columns: 1fr; }
    .wl-sky-in { height: 320px; }
    .wl-star em { font-size: 11.5px; }
    .wl-q { display: none; }
    .wl-aw { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
    .wl-aw-p { grid-row: 2; } .wl-aw-bar { grid-column: 1 / -1; }
    .wl-aw em { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
    .strip-head { flex-wrap: wrap; }
    .cm-num { font-size: 20px; }
    .cm-next { grid-template-columns: 1fr; }
}