/* app-only additions on top of base.css */
.app { padding: var(--s8) 0 var(--s16); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s8); }
.narrow-panel { max-width: 560px; margin: var(--s10) auto; }
.fine { font-size: var(--text-xs); color: var(--muted); }
.board-head { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: var(--s6); }
.board-head h1 { font-size: var(--text-4xl); margin: var(--s2) 0; }
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; gap: var(--s2); grid-template-columns: 1fr; counter-reset: c; }
@media (min-width: 900px) { .checklist { grid-template-columns: repeat(5, 1fr); } }
.checklist li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); display: grid; gap: 2px; position: relative; padding-left: 44px; }
.checklist li::before { counter-increment: c; content: counter(c); position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font: 700 11px/22px var(--font-mono); text-align: center; }
.checklist li.done::before { content: "✓"; background: var(--ok-bg); color: var(--ok-text); }
.checklist li b { font-size: var(--text-sm); }
.checklist li span { font-size: var(--text-xs); color: var(--muted); }
.checklist li.done { opacity: .75; }
.tiles-row { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); margin: var(--s4) 0; }
@media (min-width: 700px) { .tiles-row { grid-template-columns: repeat(4, 1fr); } }
.tiles-row .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s4); }
.tiles-row .k { font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tiles-row .v { font: 800 var(--text-3xl)/1.05 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tiles-row .v.crit { color: var(--crit); }
.crow { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--s3); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.crow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.crow .dot.ok { background: var(--ok); } .crow .dot.warning { background: var(--warn); } .crow .dot.critical { background: var(--crit); box-shadow: 0 0 0 4px var(--crit-bg); }
.crow .n { font-weight: 700; }
.crow .meta { font: 500 var(--text-xs) var(--font-mono); color: var(--muted); }
.crow .bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 6px; max-width: 420px; }
.crow .bar i { display: block; height: 100%; background: var(--ok); }
.crow .bar i.warn { background: var(--warn); } .crow .bar i.crit { background: var(--crit); }
.crow .amt { font: 600 var(--text-sm) var(--font-mono); text-align: right; white-space: nowrap; }
.crow .amt.crit { color: var(--crit); }
.crow .ops { grid-column: 1 / -1; display: flex; gap: var(--s2); flex-wrap: wrap; }
.crow .ops .btn { min-height: 36px; padding: 0 var(--s3); font-size: var(--text-xs); }
.crow .ops .btn.danger { border-color: var(--crit-line); color: var(--crit); }
.crow.killed { border-color: var(--crit-line); }
.crow .facts { grid-column: 1 / -1; font: 500 var(--text-xs) var(--font-mono); color: var(--muted); word-break: break-word; }
.inc-list { display: grid; gap: var(--s2); }
.inc { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--r-lg); padding: var(--s3) var(--s4); font-size: var(--text-sm); }
.inc.critical { border-left-color: var(--crit); }
.inc b { display: block; }
.inc .act { color: var(--muted); }
.audit { font: 500 var(--text-xs)/1.6 var(--font-mono); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); max-height: 320px; overflow: auto; }
.empty { color: var(--muted); }
.drawer { position: fixed; inset: 0; background: rgba(5, 7, 12, .55); z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 700px) { .drawer { align-items: center; padding: var(--s6); } }
.drawer-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2xl) var(--r-2xl) 0 0; width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; padding: var(--s5); }
@media (min-width: 700px) { .drawer-card { border-radius: var(--r-2xl); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.drawer-head h2 { margin: 0; font-size: var(--text-2xl); }
.help { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); font-size: var(--text-sm); color: var(--text-2); }
.help a { font-weight: 600; }
.help .tier { margin-left: 6px; }
#vendor-fields { display: grid; gap: var(--s3); }
.steps-list { padding-left: 20px; }
.kill-blast { background: var(--crit-bg); border: 1px solid var(--crit-line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.countdown { font: 700 var(--text-sm) var(--font-mono); color: var(--muted); }