/* tm2027 · Очередь, карточка, правила. Макеты деки — DOM, без канваса:
   рельс, стекло, подвал и то, что каждый вариант кладёт поверх. */

:root {
  --canvas: #0b0f14;
  --panel: #10151c;
  --bar: #11161d;
  --control: #1b2230;
  --control-hover: #252d3a;
  --selection: #1d365d;
  --selection-border: #5b7cfa;
  --border: #252d38;
  --border-strong: #303947;
  --ink: #f4f7fb;
  --body: #e8edf2;
  --muted: #9aa6b5;
  --live: #62d6a7;
  --live-text: #83d9b2;
  --amber: #d5a64a;
  --blocked: #f19aa7;
  --mono: "Cascadia Mono", "Hack", Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--canvas); }
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--body); padding-bottom: 84px; }

.masthead { border-bottom: 1px solid var(--border); background: var(--panel); }
.mast-inner { max-width: 1060px; margin: 0 auto; padding: 40px 24px 32px; }
.mast-brand { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); text-transform: lowercase; }
.mast-dot { color: var(--selection-border); }
h1 { font-size: 34px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; margin: 10px 0 12px; }
.lede { max-width: 78ch; color: var(--body); margin-bottom: 22px; }
.lede strong { color: var(--ink); }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; } }
.rule { background: var(--canvas); padding: 12px 14px; font-size: 12.5px; color: var(--muted); }
.rule-name { display: block; color: var(--body); font-weight: 600; }
.rule em { color: var(--body); font-style: italic; }

/* карта панели */
.panel-map { margin-top: 22px; border: 1px solid var(--border); background: var(--canvas); }
.panel-map summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; color: var(--body); font-weight: 600; list-style: none; }
.panel-map summary::before { content: "▸ "; color: var(--selection-border); }
.panel-map[open] summary::before { content: "▾ "; }
.panel-map table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.panel-map th, .panel-map td { text-align: left; padding: 6px 14px; border-top: 1px solid var(--border); vertical-align: top; }
.panel-map th { color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.panel-map td.n { font-family: var(--mono); white-space: nowrap; }
.panel-map .hi td { color: var(--ink); }
.panel-map .herd td.n { color: var(--amber); }
.panel-map .note { padding: 10px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.panel-map .note b { color: var(--body); font-weight: 600; }

main { max-width: 1060px; margin: 0 auto; padding: 12px 24px; }

.part-head { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border-strong); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.part-no { font-family: var(--mono); font-size: 20px; letter-spacing: 0; color: var(--selection-border); }
.part-head .tally { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: none; }
.tally b { color: var(--live-text); font-weight: 600; }
.tally i { color: var(--amber); font-style: normal; }

.campaign { padding: 34px 0 8px; border-bottom: 1px solid var(--border); }
.campaign:last-of-type { border-bottom: 0; }
.camp-head { display: flex; gap: 16px; align-items: baseline; margin-bottom: 20px; }
.camp-no { font-family: var(--mono); font-size: 26px; color: var(--selection-border); min-width: 40px; text-align: right; }
.camp-head h2 { font-size: 21px; font-weight: 650; color: var(--ink); }
.camp-head p { max-width: 80ch; color: var(--muted); margin-top: 4px; font-size: 13.5px; }
.camp-head em, .variant em { color: var(--body); font-style: italic; }
.camp-head .have { display: block; margin-top: 8px; font-size: 12.5px; color: var(--body); border-left: 2px solid var(--live); padding-left: 10px; max-width: 80ch; }
.camp-head .have b { color: var(--live-text); font-weight: 600; }
.camp-head .falsi { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--amber); padding-left: 10px; max-width: 80ch; }
.camp-head .falsi b { color: var(--amber); font-weight: 600; }

code { font-family: var(--mono); font-size: .92em; color: var(--live-text); background: #0e1a19; border: 1px solid #1d3330; border-radius: 3px; padding: 0 4px; }
kbd { font-family: var(--mono); font-size: .88em; color: var(--body); background: var(--control); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; }

.variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; padding-bottom: 28px; }
.variant { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 14px; cursor: pointer; transition: border-color 80ms linear, background-color 80ms linear; }
.variant:hover { background: #131a23; border-color: var(--border-strong); }
.variant.picked { background: #12203a; border-color: var(--selection-border); box-shadow: inset 0 0 0 1px var(--selection-border); }
.v-tag { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--border-strong); padding: 1px 7px; border-radius: 3px; background: var(--canvas); z-index: 4; }
.variant.picked .v-tag { color: var(--ink); background: var(--selection); border-color: var(--selection-border); }
.variant h3 { font-size: 15px; font-weight: 650; color: var(--ink); margin: 12px 0 6px; }
.variant > p { font-size: 12.5px; color: var(--muted); }
.variant .cost { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.variant .cost b { color: var(--body); font-weight: 600; }
.variant .cost .pr { color: var(--selection-border); }

.stage { background: var(--canvas); border: 1px solid var(--border); border-radius: 4px; height: 190px; padding: 0; overflow: hidden; position: relative; }

/* ---------- макет деки ---------- */

.mock { position: absolute; inset: 0; display: grid; grid-template-rows: 18px 1fr 16px; font-family: var(--mono); font-size: 9.5px; line-height: 13px; color: var(--body); background: #0b0f14; }
.m-top { display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #12171e; border-bottom: 1px solid #1c232d; color: var(--muted); font-size: 8.5px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.m-top .brand { color: var(--ink); font-weight: 600; letter-spacing: 0; }
.m-top .srv { color: var(--live-text); border: 1px solid #244a3f; padding: 0 4px; border-radius: 2px; }
.m-top .right { margin-left: auto; display: flex; gap: 6px; }
.m-top .verb { border: 1px solid #2a3340; padding: 0 4px; border-radius: 2px; }
.m-top .verb.on { background: var(--control); color: var(--body); }
.m-top .verb.quiet { color: var(--amber); border-color: #55462a; }

.m-mid { display: grid; grid-template-columns: 112px 1fr; min-height: 0; position: relative; }
.m-mid.wide-rail { grid-template-columns: 150px 1fr; }
.m-rail { background: #0e1319; border-right: 1px solid #1c232d; display: flex; flex-direction: column; min-height: 0; }
.m-lens { display: flex; gap: 0; border-bottom: 1px solid #1c232d; font-size: 7.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; }
.m-lens span { padding: 2px 5px; color: var(--muted); }
.m-lens span.on { background: var(--selection); color: var(--ink); }
.m-lens span.new { color: var(--amber); }
.m-lens span.new::before { content: "●"; font-size: 6px; margin-right: 3px; vertical-align: 1px; }
.m-rows { flex: 1; min-height: 0; overflow: hidden; padding-top: 2px; }
.m-row { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; height: 13px; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; }
.m-row.space { color: var(--muted); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.m-row.pane { padding-left: 12px; }
.m-row.sel { background: var(--selection); color: var(--ink); }
.m-row.wait { border-left-color: var(--amber); }
.m-row.work { border-left-color: var(--live); }
.m-row.done { border-left-color: var(--selection-border); }
.m-row.fail { border-left-color: var(--blocked); }
.m-row .mark { width: 8px; color: var(--muted); font-size: 8px; text-align: center; flex: none; }
.m-row.wait .mark { color: var(--amber); }
.m-row.work .mark { color: var(--live); }
.m-row.fail .mark { color: var(--blocked); }
.m-row .age { margin-left: auto; color: var(--muted); font-size: 8px; }
.m-row.wait .age { color: var(--amber); }
.m-row .q { color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; }
.m-row.chk::before { content: "☐"; color: var(--muted); font-size: 8px; }
.m-row.chk.on::before { content: "☑"; color: var(--live-text); }
.m-shelf { border-top: 1px solid #1c232d; background: #0b0f14; padding: 3px 4px; font-size: 8px; }
.m-shelf .t { color: var(--amber); letter-spacing: .06em; font-size: 7.5px; }
.m-shelf .card { display: flex; gap: 4px; align-items: baseline; padding: 1px 3px; border: 1px solid #2a3340; border-radius: 2px; margin-top: 2px; background: #10151c; white-space: nowrap; overflow: hidden; }
.m-shelf .card.sel { border-color: var(--selection-border); background: var(--selection); }
.m-shelf .card .who { color: var(--ink); flex: none; }
.m-shelf .card .q { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.m-shelf .card .age { margin-left: auto; color: var(--amber); flex: none; }
.m-cat { margin-top: auto; height: 14px; display: flex; align-items: center; padding: 0 6px; gap: 6px; font-size: 8px; color: var(--muted); border-top: 1px solid #1c232d; flex: none; white-space: nowrap; overflow: hidden; }
.m-cat .paw { color: var(--live-text); }

.m-glass { position: relative; padding: 4px 8px; overflow: hidden; min-height: 0; }
.m-glass .ln { white-space: pre; height: 13px; overflow: hidden; }
.dim { color: var(--muted); }
.acc { color: #8fc7ff; }
.ok { color: var(--live-text); }
.warn { color: var(--amber); }
.bad { color: var(--blocked); }
.cur { background: var(--body); color: #0b0f14; }
.u { text-decoration: underline; }
.hl { background: #1d365d; }
.selx { background: #2a3d63; color: var(--ink); }

.m-bar { display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #12171e; border-top: 1px solid #1c232d; color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; }
.m-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-bar .chip { flex: none; border: 1px solid #2a3340; padding: 0 4px; border-radius: 2px; color: var(--body); }
.m-bar .chip.amber { color: var(--amber); border-color: #55462a; }
.m-bar .chip.live { color: var(--live-text); border-color: #244a3f; }
.m-bar .chip.bad { color: var(--blocked); border-color: #5a2f36; }
.m-bar .right { margin-left: auto; display: flex; gap: 6px; }
.m-bar .cap { background: var(--control); color: var(--ink); padding: 0 5px; border-radius: 6px; border: 1px solid var(--border-strong); }

/* поверх стекла */
.m-over { position: absolute; z-index: 3; font-family: var(--mono); font-size: 8.5px; line-height: 12px; }
.m-toast { right: 8px; top: 8px; width: 156px; background: #141b25; border: 1px solid var(--border-strong); border-left: 3px solid var(--amber); border-radius: 3px; padding: 5px 7px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.m-toast.done { border-left-color: var(--selection-border); }
.m-toast .h { color: var(--ink); font-weight: 600; display: flex; gap: 6px; }
.m-toast .h .age { margin-left: auto; color: var(--amber); font-weight: 400; }
.m-toast .q { color: var(--body); margin-top: 2px; white-space: pre-wrap; }
.m-toast .meta { color: var(--muted); margin-top: 3px; font-size: 8px; white-space: pre-wrap; }
.m-toast .meta b { color: var(--live-text); font-weight: 400; }
.m-toast .caps { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.cap2 { background: var(--control); color: var(--ink); padding: 0 6px; border-radius: 7px; border: 1px solid var(--border-strong); font-size: 8px; }
.cap2.go { color: var(--live-text); border-color: #244a3f; }
.cap2.dim { color: var(--muted); }
.cap2.warn { color: var(--amber); border-color: #55462a; }
.m-toast .input { margin-top: 4px; border: 1px solid var(--border-strong); background: #0b0f14; padding: 1px 4px; color: var(--body); }
.m-toast .tail { margin-top: 3px; border-top: 1px solid #1c232d; padding-top: 2px; color: var(--muted); white-space: pre; font-size: 8px; line-height: 11px; }
.m-toast .tail .acc { color: #8fc7ff; }

.m-plate { left: 8px; right: 8px; top: 6px; background: rgba(20,27,37,.96); border: 1px solid var(--border-strong); border-radius: 3px; padding: 4px 7px; color: var(--body); }
.m-plate .h { color: var(--muted); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; }
.m-plate .h span:last-child { margin-left: auto; }
.m-plate .row { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.m-plate .k { color: var(--muted); }
.m-plate .v { color: var(--ink); }
.m-plate .v.ok { color: var(--live-text); }
.m-plate .v.warn { color: var(--amber); }
.m-plate .hint { color: var(--muted); font-size: 7.5px; margin-top: 2px; }

.m-pal { left: 50%; top: 14px; transform: translateX(-50%); width: 236px; background: #141b25; border: 1px solid var(--selection-border); border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.55); overflow: hidden; }
.m-pal .ph { padding: 3px 7px; background: #0e131a; border-bottom: 1px solid var(--border-strong); color: var(--muted); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; }
.m-pal .ph span:last-child { margin-left: auto; color: var(--live-text); }
.m-pal .pr { display: flex; gap: 6px; padding: 1px 7px; white-space: nowrap; overflow: hidden; }
.m-pal .pr.sel { background: var(--selection); color: var(--ink); }
.m-pal .pr .n { color: var(--selection-border); width: 8px; flex: none; }
.m-pal .pr .who { color: var(--ink); width: 58px; overflow: hidden; flex: none; }
.m-pal .pr .q { color: var(--muted); overflow: hidden; text-overflow: ellipsis; flex: 1; }
.m-pal .pr .age { color: var(--amber); flex: none; }
.m-pal .pv { border-top: 1px solid var(--border-strong); padding: 3px 7px; white-space: pre; color: var(--muted); font-size: 8px; line-height: 11px; overflow: hidden; }
.m-pal .pv .acc { color: #8fc7ff; }
.m-pal .pv .ink { color: var(--ink); }
.m-pal .pf { padding: 2px 7px; border-top: 1px solid var(--border-strong); color: var(--muted); font-size: 7.5px; display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.m-pal .pf b { color: var(--body); font-weight: 400; }
.m-pal .input { margin: 3px 7px; border: 1px solid var(--border-strong); background: #0b0f14; padding: 1px 4px; color: var(--body); }

.m-side { right: 0; top: 0; bottom: 0; width: 154px; background: #0e1319; border-left: 1px solid var(--border-strong); padding: 5px 7px; color: var(--body); display: flex; flex-direction: column; gap: 1px; }
.m-side .h { color: var(--muted); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; }
.m-side .h span:last-child { margin-left: auto; color: var(--live-text); }
.m-side .row { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; font-size: 8px; }
.m-side .k { color: var(--muted); width: 34px; flex: none; }
.m-side .v { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.m-side .v.ok { color: var(--live-text); }
.m-side .v.warn { color: var(--amber); }
.m-side .tail { margin-top: 2px; border-top: 1px solid #1c232d; padding-top: 2px; color: var(--muted); white-space: pre; font-size: 7.5px; line-height: 10px; overflow: hidden; }
.m-side .btn { margin-top: auto; align-self: flex-start; }
.m-side .md { margin-top: 2px; background: #0b0f14; border: 1px solid #1c232d; padding: 2px 4px; color: var(--muted); white-space: pre; font-size: 7.5px; line-height: 10px; overflow: hidden; }
.m-side .md .ink { color: var(--body); }

.m-menu { background: #141b25; border: 1px solid var(--border-strong); border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.45); padding: 2px 0; width: 128px; }
.m-menu div { padding: 0 8px; color: var(--body); white-space: nowrap; }
.m-menu div.sel { background: var(--selection); color: var(--ink); }
.m-menu div.dim { color: var(--muted); }
.m-menu div.sep { height: 1px; background: var(--border-strong); margin: 2px 0; padding: 0; }

.m-timeline { left: 0; right: 0; bottom: 0; height: 66px; background: #0e1319; border-top: 1px solid var(--border-strong); padding: 3px 8px; font-size: 8px; line-height: 12px; }
.m-timeline .h { color: var(--muted); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; }
.m-timeline .h span:last-child { margin-left: auto; }
.m-timeline .ev { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
.m-timeline .ev .t { color: var(--muted); width: 30px; flex: none; }
.m-timeline .ev .who { color: var(--ink); width: 58px; flex: none; }
.m-timeline .ev .w { color: var(--body); }
.m-timeline .ev .w.warn { color: var(--amber); }
.m-timeline .ev .w.ok { color: var(--live-text); }
.m-timeline .ev .w.bad { color: var(--blocked); }
.m-timeline .ev .w.acc { color: #8fc7ff; }

.m-sheet { left: 0; right: 0; bottom: 0; background: #141b25; border-top: 1px solid var(--selection-border); padding: 4px 8px; font-size: 8.5px; }
.m-sheet .h { color: var(--muted); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; display: flex; }
.m-sheet .h span:last-child { margin-left: auto; color: var(--amber); }
.m-sheet .row { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.m-sheet .who { color: var(--ink); width: 74px; flex: none; }
.m-sheet .cmd { color: var(--live-text); overflow: hidden; text-overflow: ellipsis; }
.m-sheet .cmd .sub { color: var(--amber); }
.m-sheet .foot { display: flex; gap: 6px; margin-top: 3px; }

.m-skip { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: center; padding: 20px; background: repeating-linear-gradient(135deg, #0b0f14 0 8px, #0d1218 8px 16px); }
.m-skip b { color: var(--body); font-weight: 600; font-size: 12px; }
.m-skip small { font-size: 9.5px; line-height: 13px; }

.m-order { position: absolute; inset: 0; padding: 12px 14px; font-family: var(--mono); font-size: 10px; line-height: 15px; color: var(--body); }
.m-order .st { display: flex; gap: 8px; align-items: baseline; }
.m-order .n { color: var(--selection-border); width: 26px; flex: none; }
.m-order .w { flex: 1; }
.m-order .pr { color: var(--muted); font-size: 9px; white-space: nowrap; }
.m-order .gate { margin: 4px 0 4px 34px; color: var(--amber); font-size: 9px; border-left: 2px solid #55462a; padding-left: 6px; }
.m-order .sum { margin-top: 6px; color: var(--muted); font-size: 9px; border-top: 1px solid var(--border); padding-top: 4px; }

/* ---------- таблица фальсификаторов ---------- */
.ftable-wrap { overflow-x: auto; margin-bottom: 30px; }
.ftable { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.ftable th, .ftable td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.ftable th { color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.ftable td.f { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ftable td.kill { color: var(--amber); }
.ftable td.win { color: var(--live-text); }
.ftable td.term { font-family: var(--mono); white-space: nowrap; color: var(--muted); }

/* ---------- pickbar ---------- */
.pickbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bar); border-top: 1px solid var(--border-strong); z-index: 10; }
.pick-inner { max-width: 1060px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.pick-count { font-size: 12.5px; color: var(--muted); flex: none; }
.pick-codes { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--live-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#copy-btn { font-family: inherit; font-size: 12.5px; color: var(--body); background: var(--control); border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 14px; cursor: pointer; }
#copy-btn:hover { background: var(--control-hover); }
#copy-btn.done { color: var(--live-text); border-color: #2c5347; }

/* ---------- wish-vote additions ---------- */
.m-th { display: flex; gap: 6px; align-items: center; height: 13px; margin: -4px -8px 2px; padding: 0 8px; background: #10161e; border-bottom: 1px solid #1c232d; font-size: 8px; white-space: nowrap; overflow: hidden; }
.m-th .name { color: var(--ink); font-weight: 600; flex: none; }
.m-th .cap { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.m-th .cap.live { color: var(--live-text); }
.m-th .cap.note { color: var(--amber); font-style: italic; }
.m-th .ai { flex: none; font-size: 7px; border: 1px solid #2a3340; padding: 0 3px; border-radius: 2px; color: var(--muted); letter-spacing: .04em; }
.m-th .age { margin-left: auto; flex: none; color: var(--amber); }
.m-th .age.dim { color: var(--muted); }
.hk { background: #f5c451; color: #0b0f14; font-weight: 700; padding: 0 2px; border-radius: 2px; margin-right: 2px; }
.hk.dg { background: #8fc7ff; }
.m-sticky { right: 10px; top: 20px; width: 98px; background: #3b3418; border: 1px solid #6a5a22; color: #f1dc8a; padding: 3px 5px; font-size: 8px; line-height: 11px; transform: rotate(-2deg); box-shadow: 0 4px 10px rgba(0,0,0,.4); white-space: pre-wrap; }
.m-row .echo { margin-left: auto; font-size: 7px; border: 1px solid #244a3f; color: var(--live-text); padding: 0 3px; border-radius: 2px; flex: none; }
.m-row .note { color: var(--amber); font-size: 8px; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.m-lens .chip { margin-left: auto; color: var(--live-text); border-left: 1px solid #1c232d; }
.m-toast.live { border-left-color: var(--live); }
.m-toast .mic { color: #ff6b6b; }
.m-plate .row .rx { color: #8fc7ff; font-family: var(--mono); width: 92px; flex: none; overflow: hidden; }
.m-plate .row .act { color: var(--body); }
.m-plate .row .act .r { color: var(--blocked); }
.m-plate .row .act .a { color: var(--amber); }
.m-plate .row .act .n { color: var(--live-text); }
.m-sheet .input { margin: 2px 0; border: 1px solid var(--border-strong); background: #0b0f14; padding: 1px 4px; color: var(--body); }
.m-sheet .row .q { color: var(--muted); overflow: hidden; text-overflow: ellipsis; flex: 1; }
.m-sheet .row .age { color: var(--muted); flex: none; }
.m-sheet .row .cap2 { flex: none; }
.m-pal .pr .k { color: var(--muted); width: 34px; flex: none; font-size: 7.5px; letter-spacing: .04em; }
.m-pal .pr .chk { color: var(--live-text); width: 10px; flex: none; }
.m-pal .pr .chk.off { color: var(--muted); }
.m-glass .ln .code { color: #c9d4e3; }
.m-glass .ln .kw { color: #c792ea; }
