:root {
  --bg: #0d1117; --panel: #161b22; --panel2: #1c2230; --line: #2a3140; --fg: #d7dde5; --dim: #8b949e;
  --pending: #d29922; --resuming: #58a6ff; --running: #3fb950; --suspending: #bc8cff;
  --suspended: #7d8fa8; --failed: #f85149; --terminating: #db6d28;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Inter", sans-serif; }
body { display: flex; flex-direction: column; overflow: hidden; }
code, time, pre, .mono { font-family: var(--mono); font-size: 12px; }
.dim { color: var(--dim); }
button { font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
h2, h3, h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; }
h4 { margin: 10px 0 4px; }

/* header */
.top { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand b { font-size: 15px; letter-spacing: .02em; }
.ctx { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.fake { background: #5a1e1e; color: #ffb4ab; border: 1px solid #a33; border-radius: 4px; padding: 1px 7px; font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.conn { font-size: 11px; color: var(--failed); }
.conn::before { content: "●"; margin-right: 4px; }
.conn.on { color: var(--running); }
nav { display: flex; gap: 4px; margin-left: 12px; }
nav button { color: var(--dim); }
nav button.on { color: var(--fg); border-color: var(--line); background: var(--panel2); }
.q { margin-left: auto; width: 280px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font: inherit; }

/* KPIs + sources strip */
.kpis { display: flex; gap: 6px; padding: 8px 14px 4px; flex-wrap: wrap; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; min-width: 92px; }
.kpi span { display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kpi.k-running b { color: var(--running); }
.kpi.k-stale b { color: var(--pending); } .kpi.k-resuming b { color: var(--resuming); } .kpi.k-suspending b { color: var(--suspending); }
.kpi.k-suspended b { color: var(--suspended); } .kpi.k-pending b { color: var(--pending); } .kpi.k-failed b { color: var(--failed); }
.srcchips { display: flex; gap: 6px; padding: 2px 14px 8px; flex-wrap: wrap; }
.sb { font-size: 11px; border-radius: 10px; padding: 1px 8px; border: 1px solid var(--line); white-space: nowrap; color: var(--dim); }
.sb.live { border-color: #23633a; color: #7ee2a0; }
.sb.live::before { content: "●"; margin-right: 4px; animation: blink 2s infinite; }
.sb.poll { border-color: #6b5517; color: #e3c46f; }
.sb.poll::before { content: "↻"; margin-right: 4px; }
.sb.bad { border-color: #8a2a2a; color: #ff9b94; }
.sb.bad::before { content: "✕"; margin-right: 4px; }
@keyframes blink { 50% { opacity: .35; } }

/* layout */
main { flex: 1; min-height: 0; padding: 0 14px 12px; }
.view { height: 100%; }
.v-board { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; }
@media (max-width: 1280px) { .v-board { grid-template-columns: minmax(0, 1fr) 270px; gap: 8px; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 0; }
.panel > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.panel > header .sb { margin-left: auto; }

/* board */
.board { min-width: 0; overflow-x: auto; }
.board.with-done { grid-template-columns: repeat(7, minmax(95px, 1fr)); }
.board.with-stale { grid-template-columns: repeat(7, minmax(95px, 1fr)); }
.board.with-done.with-stale { grid-template-columns: repeat(8, minmax(90px, 1fr)); }
.board-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; font-size: 11px; font-family: var(--mono); }
.col-done > header { color: var(--suspended); }
.card.inf { border-left-color: #ffd23f; }
.card.inf .nm { white-space: normal; overflow-wrap: break-word; line-height: 1.25; font-size: 12px; }
.board { display: grid; grid-template-columns: 1fr .8fr 1.25fr .8fr 1.1fr .9fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; height: 100%; }
.col { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.col > header { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; min-width: 0; }
.col > header > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.col[data-empty="1"] > header { padding: 7px 6px; font-size: 11px; letter-spacing: .02em; gap: 4px; }
.col > header b { font-variant-numeric: tabular-nums; flex: none; }
.col-pending > header { color: var(--pending); } .col-resuming > header { color: var(--resuming); } .col-running > header { color: var(--running); }
.col-suspending > header { color: var(--suspending); } .col-suspended > header { color: var(--suspended); } .col-ended > header { color: var(--failed); }
.col-stale > header { color: var(--pending); }
.cards { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.empty { color: var(--line); text-align: center; padding: 10px; }
.card { --c: var(--dim); background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.card:hover { border-color: var(--c); }
.card.sel { outline: 2px solid var(--c); }
.card.miss, .evs .miss { display: none; }
.card .r1 { display: flex; align-items: center; gap: 6px; }
.card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .age { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 11px; }
.card .r2, .card .r3 { display: flex; gap: 6px; align-items: center; font-size: 11px; margin-top: 3px; flex-wrap: wrap; }
.card .r2 > span:not(.dim):not(.why) { font-family: var(--mono); color: #9fb3c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.card .r3:empty { display: none; }
.card .r4 { margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.why { color: var(--pending); }
.tag { font-size: 10px; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; color: var(--dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.snap { font-family: var(--mono); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.snap.ok { background: #1d3b2a; color: #7ee2a0; } .snap.pend { background: #3d3214; color: #e3c46f; }
.spark { flex: none; } .spark polyline { fill: none; stroke: var(--c, var(--running)); stroke-width: 1.5; }
.ph-pending { --c: var(--pending); } .ph-resuming { --c: var(--resuming); } .ph-running { --c: var(--running); }
.ph-suspending { --c: var(--suspending); } .ph-suspended { --c: var(--suspended); } .ph-failed { --c: var(--failed); }
.ph-terminating { --c: var(--terminating); } .ph-unknown { --c: var(--dim); } .ph-stale { --c: var(--pending); }
.card.stale { border-style: dashed; border-color: #6b5517; background: #1b1710; }
.card.stale .dot { background: var(--pending); animation: none; }
.stale-b { font: 600 9px/14px var(--mono); letter-spacing: .08em; color: var(--pending); border: 1px solid #6b5517; border-radius: 3px; padding: 0 4px; }
.stale-age { color: var(--pending); font-family: var(--mono); font-size: 10px; margin-left: auto; }
.wl-stale { color: var(--pending); }
.wl-collapsed td { opacity: .55; }
.wl-collapsed td:first-child { opacity: 1; }
.wl-old { font: 600 9px/14px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pending); border: 1px solid #6b5517; border-radius: 3px; padding: 0 4px; }
.card.ph-resuming .dot, .card.ph-suspending .dot, .card.ph-terminating .dot { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .5; } }
.card.fresh { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--c), 0 0 18px var(--c); } to { box-shadow: none; } }

/* events */
.rail { display: flex; flex-direction: column; min-height: 0; }
.rail-exp { margin-left: auto; padding: 1px 8px; font-size: 11px; color: var(--dim); border-color: var(--line); }
.rail-exp:hover { color: var(--fg); }
.v-board.wide-rail { grid-template-columns: minmax(0, 1fr) minmax(560px, 48vw); }
.evs { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.ev { display: grid; grid-template-columns: 84px 78px 58px minmax(0, 1fr); gap: 2px 6px; padding: 3px 2px; border-bottom: 1px solid #1f2532; font-size: 12px; align-items: baseline; }
.ev time { color: var(--dim); font-size: 11px; }
.ev .src { font-size: 10px; border-radius: 3px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .src.live { color: #7ee2a0; background: #13281c; } .ev .src.poll { color: #e3c46f; background: #2a2412; }
.ev .kd { color: var(--dim); font-size: 11px; }
.ev .act { grid-column: 4; color: #9fc8ff; cursor: pointer; font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .msg { grid-column: 2 / 5; }
.ev .act + .msg { grid-column: 2 / 5; }
.ev.lv-warn .msg { color: #e3c46f; } .ev.lv-error .msg { color: #ff9b94; }
.evs.wide .ev { grid-template-columns: 96px 100px 70px 260px minmax(0, 1fr); }
.evs.wide .ev .msg, .evs.wide .ev .act + .msg { grid-column: auto; }
.evs.wide .ev .act { grid-column: 4; }
.evs.wide .ev:not(:has(.act)) .msg { grid-column: 4 / 6; }
.rail .evs { flex: 1; }
.rail .ev .msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.filters { display: flex; gap: 6px 10px; color: var(--dim); flex-wrap: wrap; font-size: 11px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.filters label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.rail.no-state .k-state, .rail.no-crash .k-crash, .rail.no-timing .k-timing, .rail.no-snapshot .k-snapshot,
.rail.no-sched .k-sched, .rail.no-task .k-task, .rail.no-k8s .k-k8s, .rail.no-source .k-source { display: none; }
.srcchips { cursor: pointer; }

/* workers */
.workers { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; }
.workers > * { flex: none; }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.wk, .node { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.wk .r1, .node .r1 { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; }
.wk .r2 { font-size: 11px; font-family: var(--mono); }
.wk.st-unavailable { border-color: var(--failed); } .wk.st-draining { border-color: var(--pending); }
.pill { font-size: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; font-weight: 600; letter-spacing: .04em; }
.wk.st-active .pill, .pill.ok { color: var(--running); border-color: #23633a; }
.wk.st-unavailable .pill, .pill.bad { color: var(--failed); border-color: #8a2a2a; }
.bar { position: relative; height: 16px; background: #0f141b; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: #23633a; }
.bar.mid i { background: #6b5517; } .bar.hi i { background: #8a2a2a; }
.bar span { position: relative; font-size: 10px; padding-left: 6px; line-height: 14px; font-family: var(--mono); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: 11px; font-family: var(--mono); border: 1px solid var(--c, var(--dim)); color: var(--c, var(--dim)); border-radius: 4px; padding: 0 5px; cursor: pointer; }
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.t { width: 100%; border-collapse: collapse; font-size: 12px; }
.t th { text-align: left; color: var(--dim); font-weight: 500; border-bottom: 1px solid var(--line); padding: 3px 6px; }
.t td { padding: 3px 6px; border-bottom: 1px solid #1f2532; }
.t tr.bad td { color: #ff9b94; }
.t td.ok { color: var(--running); } .t td.pend { color: var(--pending); }
#sources { overflow-y: auto; }

/* detail drawer */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 10; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1040px, 92vw); background: var(--bg); border-left: 1px solid var(--line); z-index: 11; transform: translateX(100%); transition: transform .18s ease-out; overflow-y: auto; padding: 12px 14px; }
.drawer.open { transform: none; }
.dh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dh h2 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--fg); }
.dh .age { font-family: var(--mono); color: var(--dim); }
.dh .x { margin-left: auto; font-size: 16px; color: var(--dim); }
.pill[class*="ph-"] { color: var(--c); border-color: var(--c); font-size: 12px; padding: 1px 9px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 12px; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.conds { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cond { font-size: 11px; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line); }
.cond.ok { color: var(--running); border-color: #23633a; } .cond.no { color: var(--pending); border-color: #6b5517; }
.usage { display: flex; flex-direction: column; gap: 6px; }
.usage > div { display: grid; grid-template-columns: 100px 260px auto; align-items: center; gap: 8px; }
.usage .spark polyline { stroke: var(--resuming); }
.timing { border-top: 1px solid var(--line); padding: 5px 0; font-size: 11px; }
.timing.bad .r1 { color: #ff9b94; }
.timing .r1 time { color: var(--dim); margin-left: 6px; }
.seg { display: grid; grid-template-columns: 120px 1fr 54px; gap: 6px; align-items: center; margin-top: 2px; font-family: var(--mono); font-size: 10px; }
.seg .bar { height: 8px; } .seg b { text-align: right; font-weight: 400; }
.logs { margin-top: 10px; }
.logs pre { margin: 0; max-height: 300px; overflow-y: auto; white-space: pre-wrap; background: #0a0d12; border-radius: 6px; padding: 8px; }
.logs time { color: var(--dim); } .logs i { color: #9fb3c8; font-style: normal; }
.logs .lv-warn { color: #e3c46f; } .logs .lv-error { color: #ff9b94; } .logs .lv-life { color: var(--suspending); }
.bad { color: #ff9b94; }

@media (max-width: 1050px) {
  .v-board, .v-board.wide-rail { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 240px; }
  .dgrid { grid-template-columns: 1fr; }
}

.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.metric { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; }
.metric b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* previews & unified output */
.v-output { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.out-bar { display: flex; align-items: center; gap: 6px; flex: none; }
.out-bar button { padding: 3px 10px; font-size: 12px; color: var(--dim); border-color: var(--line); background: var(--panel); }
.out-bar button.on { color: var(--fg); background: var(--panel2); border-color: #4b5568; }
.out-bar .dim { margin-left: auto; font-size: 11px; }
.out-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.out-body .previews { height: auto; overflow-y: visible; }
.v-output.out-all .wall-idle .pv-grid, .v-output.out-all .cars-empty, .v-output.out-all #previews.all-parts { display: none; }
.v-output.out-all .wall-idle > header { margin-bottom: 0; }
.previews { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; --w: 360px; --s: .28125; }
.previews > * { flex: none; }
.previews.pv-s { --w: 270px; --s: .2109375; }
.previews.pv-l { --w: 480px; --s: .375; }
.pv-size { margin-left: 8px; display: inline-flex; gap: 2px; }
.pv-size button { padding: 1px 9px; color: var(--dim); border-color: var(--line); }
.pv-size button.on { color: var(--fg); background: var(--panel2); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--w)); gap: 12px; align-items: start; }
.pv-tile { width: var(--w); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; }
.pv-tile.miss { display: none; }
.pv-tile:hover { border-color: #4b5568; }
.pv-frame { position: relative; width: var(--w); height: calc(var(--w) * .625); overflow: hidden; background: #fff; }
.pv-frame iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--s)); background: #fff; }
.pv-shield { position: absolute; inset: 0; }
.pv-ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #1a2030 0 10px, #161b26 10px 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dim); font-family: var(--mono); font-size: 12px; text-align: center; padding: 12px; }
.pv-ph.bad { background: #2a1416; color: #ff9b94; }
.spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--resuming); border-radius: 50%; animation: rot 1s linear infinite; }
.st-queued .spin { animation: none; border-top-color: var(--line); }
@keyframes rot { to { transform: rotate(360deg); } }
.pv-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; }
.pv-st { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; color: var(--dim); }
.pv-st.st-running, .pill.st-running { color: var(--running); border-color: #23633a; }
.pv-st.st-starting, .pv-st.st-harvesting, .pill.st-starting, .pill.st-harvesting { color: var(--resuming); border-color: #25497a; }
.pv-st.st-done, .pill.st-done { color: var(--running); border-color: #23633a; }
.pv-st.st-failed, .pill.st-failed { color: var(--failed); border-color: #8a2a2a; }
.pv-st.st-queued, .pill.st-queued { color: var(--pending); border-color: #6b5517; }
.pv-head .dim { margin-left: auto; font-size: 11px; }
.pv-brief { padding: 2px 10px 0; font-size: 12px; color: #aab4c3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-stats { display: flex; gap: 10px; padding: 4px 10px 8px; font-family: var(--mono); font-size: 11px; color: var(--dim); flex-wrap: wrap; }
.pv-tile:not(:has(.pv-stats)) .pv-brief { padding-bottom: 8px; }
.sb.idle { border-color: var(--line); color: var(--dim); }
.sb.idle::before { content: "…"; margin-right: 4px; }
.pv-big { margin-top: 10px; height: 520px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.pv-big iframe { width: 100%; height: 100%; border: 0; }
.pv-job { grid-column: 1 / -1; }

/* agent activity */
.pv-note { color: var(--pending); font-size: 11px; }
.pv-now { padding: 2px 10px 0; font-family: var(--mono); font-size: 11px; color: #9fc8ff; display: flex; gap: 8px; min-width: 0; }
.pv-now-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv-quiet { color: var(--pending); white-space: nowrap; margin-left: auto; }
.pv-quiet:empty { display: none; }
.activity { grid-column: 1 / -1; margin-top: 10px; }
.ac-state.st-running { color: var(--running); border-color: #23633a; }
.ac-state.st-ended { color: var(--dim); }
.ac-state.st-error { color: var(--failed); border-color: #8a2a2a; }
.ac-head { display: flex; gap: 18px; font-size: 12px; color: var(--dim); margin-bottom: 8px; flex-wrap: wrap; }
.ac-head b { color: var(--fg); font-variant-numeric: tabular-nums; }
.ac-think { background: #14111f; border: 1px solid #3a2f5e; border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; }
.ac-think div { margin-top: 3px; font-style: italic; color: #cbb8ff; white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; background: #0a0d12; border-radius: 6px; }
.ac { display: grid; grid-template-columns: 70px 28px 54px minmax(0, 1fr) 64px 56px; gap: 8px; padding: 4px 10px; border-bottom: 1px solid #141a24; font-size: 12px; align-items: baseline; }
.ac time { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.ac-turn { color: var(--dim); text-align: right; font-family: var(--mono); }
.ac-kind { color: #8b949e; font-family: var(--mono); font-size: 11px; text-transform: lowercase; }
.ac-kind.tool { color: #7ee2a0; }
.ac-what { overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.ac-what code { font-size: 11px; color: #d7dde5; }
.ac-out { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: #8b949e; white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-out.bad, .ac-ms.bad { color: #ff9b94; }
.ac-ms { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.ac-ms.run { color: var(--resuming); }
.ac-cost { text-align: right; font-family: var(--mono); font-size: 11px; color: #e3c46f; }
.ac.k-thinking { background: #0f0c18; }
.ac.k-say .ac-what { color: #cfe3ff; }
.ac.k-turn { background: #10151e; }
.ac.k-end { background: #11201a; }
.ac.k-tool.err { background: #1d1112; }
.ac.k-tool.running .ac-kind { color: var(--resuming); }
.ac-what code { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.ac-out { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-sum .metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* live wall */
.lw-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0f17; }
.lw-live { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.lw-shell { position: absolute; inset: 0; }
.lw-shell iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--s)); background: #fff; }
.lw-code { position: absolute; left: 0; right: 0; bottom: 0; max-height: 52%; margin: 0; padding: 18px 8px 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; white-space: pre; font: 9px/1.35 var(--mono); color: #b7f0c4; background: linear-gradient(to bottom, #0b0f1700, #0b0f17e6 38%); pointer-events: none; }
.lw-meta { display: flex; align-items: center; gap: 6px; padding: 3px 10px 0; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
.lw-b { border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.lw-b.draft { color: var(--pending); border-color: #6b5517; }
.lw-b.saved, .lw-b.ok { color: var(--running); border-color: #23633a; }
.lw-b.bad { color: var(--failed); border-color: #8a2a2a; }
.lw-age { margin-left: auto; }
.lw-tile:not(:has(.pv-now)) .lw-meta, .lw-tile:not(:has(.pv-now)) .pv-brief { padding-bottom: 0; }
.lw-tile { padding-bottom: 8px; }
.wall .pv-tile { cursor: pointer; }

/* focus panel: live view next to the activity timeline */
.drawer:has(.focus-grid) { width: min(1560px, 97vw); }
.focus-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.focus-main, .focus-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.focus-side .activity { margin-top: 0; }
.focus-side .ac-list { max-height: calc(100vh - 230px); }
.lw-view-panel .lw-big { position: relative; height: min(58vh, 620px); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #0b0f17; }
.lw-view-panel .lw-big .lw-live { border-radius: 0; }
.lw-view-panel .lw-shell iframe { width: 100%; height: 100%; transform: none; }
.lw-back { z-index: 0; }
.lw-shell { z-index: 1; }
.lw-view-panel .lw-code { position: static; max-height: 150px; margin-top: 8px; border-radius: 6px; background: #0a0d12; font-size: 11px; padding: 6px 8px; }
.lw-still img { object-fit: contain; }
.lw-load { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 16px; background: #1f6feb; color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
.lw-hold { margin-left: auto; padding: 1px 10px; color: var(--dim); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 11px; background: none; }
.lw-hold:hover { color: var(--fg); }
@media (max-width: 1100px) { .focus-grid { grid-template-columns: 1fr; } }

/* telemetry v2: richer agent timeline */
.ac-live { display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin: 4px 0; font-family: var(--mono); font-size: 12px; color: #9fc8ff; background: #101828; border-radius: 6px; }
.ac.k-file .ac-kind { color: #7ee2a0; }
.ac.k-check .ac-kind { color: #d2a8ff; }
.ac.k-check.ck-bad { background: #2a1416; }
.ac.k-check.ck-ok { background: #0f2018; }
.ck-f { display: inline-block; margin-right: 10px; font-family: var(--mono); font-size: 11.5px; color: #c9d3e0; }
.ck-f i { font-style: normal; color: var(--dim); }
.ok { color: var(--running); }
.bad { color: var(--failed); }
.ac-head b.bad { color: var(--failed); }

/* run log */
.runlog .chart { width: 100%; height: auto; display: block; }
.chart text { fill: #8b949e; font: 11px var(--mono); }
.chart .grid { stroke: #2a3140; stroke-width: 1; }
.chart.hist { max-width: 720px; height: auto; }
.legend .lg:first-child { margin-left: 0; }
.lg { display: inline-block; width: 14px; height: 3px; background: var(--c); margin: 0 5px 2px 10px; vertical-align: middle; }
.lg.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.lg.dot { width: 9px; height: 9px; border-radius: 50%; }
table.gov { width: 100%; border-collapse: collapse; margin-top: 8px; font-family: var(--mono); font-size: 12px; }
table.gov th { text-align: left; color: var(--dim); font-weight: 600; padding: 2px 8px; }
table.gov td { padding: 3px 8px; border-top: 1px solid var(--line); }
.rs { border: 1px solid var(--c); color: var(--c); border-radius: 10px; padding: 0 8px; font-size: 11px; }

/* cars */
.car-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.car > header h2 { font-size: 15px; text-transform: capitalize; color: var(--fg); }
.carbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #232a38; margin-bottom: 8px; }
.carbar i { display: block; height: 100%; }
.cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cp { display: flex; gap: 8px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 6px; padding: 4px; cursor: pointer; min-width: 0; }
.cp:hover { border-color: #4b5568; border-left-color: var(--c); }
.cp-img { flex: none; width: 72px; height: 45px; border-radius: 4px; object-fit: cover; background: #0b0f17; display: flex; align-items: center; justify-content: center; }
.cp-t { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.cp-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-t .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-family: var(--mono); }
.cp-s { font-size: 11px; font-family: var(--mono); line-height: 1.25; }
.cp.st-queued { opacity: .65; }
@media (max-width: 1300px) { .car-cols { grid-template-columns: 1fr; } }
.ac.k-file .ac-what code, .ac.k-check .ac-what code { display: inline; }

/* runtime chips and head to head */
.rn { display: inline-block; border: 1px solid var(--c, #3a4252); color: var(--c, var(--dim)); border-radius: 10px; padding: 0 7px; font: 600 10px/16px var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.rn-pi { --c: #58a6ff; }
.rn-inf { --c: #ffd23f; }
.rn-inf2 { --c: #f778ba; }
.rn-inf3 { --c: #79c0ff; }
.runner-h { font-size: 14px; color: var(--fg); margin: 6px 0 -2px; text-transform: none; letter-spacing: 0; }
table.vs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.vs th, table.vs td { padding: 5px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.vs thead th { color: var(--dim); font-weight: 600; border-top: 0; }
table.vs thead th.vs-pi, .vs-pi { color: #58a6ff; }
table.vs thead th.vs-inf, .vs-inf { color: #ffd23f; }
table.vs thead th.vs-inf2, .vs-inf2 { color: #f778ba; }
table.vs thead th.vs-inf3, .vs-inf3 { color: #79c0ff; }
.vs-dl { margin-left: 8px; font: 600 11px var(--mono); }
.vs-good { color: #3fb950; } .vs-bad { color: #f85149; }
table.vs tbody th { font-weight: 400; color: var(--fg); white-space: nowrap; }
table.vs tbody th .dim { margin-left: 8px; font-size: 11px; }
.vs-v { font: 600 15px var(--mono); }
.vs-win { font-weight: 800; text-shadow: 0 0 14px currentColor; }
.vs-d { font-size: 12px; font-family: var(--mono); }
table.vs-parts td { font: 12px var(--mono); color: #c9d3e0; position: relative; }
table.vs-parts td.vs-pi, table.vs-parts td.vs-inf, table.vs-parts td.vs-inf2, table.vs-parts td.vs-inf3 { color: #c9d3e0; }
.vb { height: 5px; border-radius: 2px; margin-bottom: 3px; }
td.vs-pi .vb { background: #58a6ff; }
td.vs-inf .vb { background: #ffd23f; }
td.vs-inf2 .vb { background: #f778ba; }
td.vs-inf3 .vb { background: #79c0ff; }
td.vs-win { color: var(--fg); font-weight: 700; }
tr.vs-car th { background: #121722; color: var(--fg); text-transform: capitalize; font-weight: 600; font-size: 13px; padding: 7px 10px; }
tr.vs-car th .dim { margin-left: 14px; text-transform: none; font-weight: 400; }
tr.vs-car th b { font-weight: 600; }
table.t tr.wl-cur td { background: #121a26; }
.versus table.vs-parts tbody th { font-family: var(--mono); font-size: 12px; }
.vs-v.vs-win::after { content: " ✓"; font-size: 12px; }
nav button { white-space: nowrap; }
.brand b { white-space: nowrap; }
.ctx { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top { gap: 12px; }
.fake { white-space: nowrap; }
.conn { white-space: nowrap; }