/* Dump-Bounce mission-control dashboard */
:root {
  --bg: #0b0f14; --bg2: #10161d; --panel: #141c25; --panel2: #1a2430; --line: #243040; --fg: #e8eef5; --muted: #8696a7; --dim: #5d6b7a;
  --accent: #3fb6d8; --accent2: #7c5cff; --good: #2ee6a6; --bad: #ff5c6c; --warn: #ffb84d; --glow: 0 0 0 1px rgba(63,182,216,.25), 0 8px 30px rgba(0,0,0,.35);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="light"] { --bg: #f3f6f9; --bg2: #e9eef3; --panel: #ffffff; --panel2: #f4f7fa; --line: #d8e0e8; --fg: #14202b; --muted: #5d6b7a; --dim: #94a3b3; --accent: #1f7fa0; --accent2: #5b3ee6; --good: #138f66; --bad: #d33e4e; --warn: #b7791f; --glow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(20,32,43,.08); }
* { box-sizing: border-box } html, body { margin: 0; height: 100% }
body { background: radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,.10), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(63,182,216,.10), transparent 55%), var(--bg); color: var(--fg); font: 14px/1.45 var(--sans); }
a { color: var(--accent) } button, input, select, textarea { font: inherit; color: inherit }
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh } @media (max-width: 900px) { .app { grid-template-columns: 1fr } .side { position: sticky; top: 0; z-index: 20; flex-direction: row; overflow-x: auto; padding: 8px 10px } .side .brand { display: none } .side nav { flex-direction: row; gap: 4px } .side .foot { display: none } }
.side { background: var(--bg2); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px }
.brand { font-weight: 700; letter-spacing: .04em; font-size: 15px } .brand small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase }
nav { display: flex; flex-direction: column; gap: 2px } nav button { background: none; border: 0; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; white-space: nowrap }
nav button.active, nav button:hover { background: var(--panel); color: var(--fg) } nav button .badge { float: right; font-family: var(--mono); font-size: 11px; color: var(--accent) }
.foot { margin-top: auto; font-size: 11px; color: var(--dim); display: grid; gap: 4px } .foot b { color: var(--muted); font-weight: 500 }
main { padding: 18px 22px 40px; min-width: 0 } @media (max-width: 600px) { main { padding: 12px } }
.topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600 } .topbar .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted) }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim) } .pill.live::before { background: var(--good); box-shadow: 0 0 8px var(--good) } .pill.warn::before { background: var(--warn) } .pill.bad::before { background: var(--bad) } .pill.scan::before { background: var(--accent); animation: pulse 1s infinite }
@keyframes pulse { 50% { opacity: .3 } }
.btn { background: var(--panel2); border: 1px solid var(--line); padding: 7px 12px; border-radius: 8px; cursor: pointer; color: var(--fg) } .btn:hover { border-color: var(--accent) } .btn.primary { background: var(--accent); color: #04121a; border-color: transparent; font-weight: 600 } .btn.danger { background: var(--bad); color: #fff; border-color: transparent } .btn.sm { padding: 4px 9px; font-size: 12px } .btn:disabled { opacity: .5; cursor: default }
.grid { display: grid; gap: 14px } .g2 { grid-template-columns: 1fr 1fr } .g3 { grid-template-columns: repeat(3, 1fr) } .g4 { grid-template-columns: repeat(4, 1fr) } @media (max-width: 1000px) { .g3, .g4 { grid-template-columns: 1fr 1fr } } @media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--glow); min-width: 0 }
.panel h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px }
.book { border-top: 3px solid var(--accent) } .book.conf { border-top-color: var(--good) } .book h3 { margin: 0; font-size: 16px } .book .desc { color: var(--muted); font-size: 12px; margin: 2px 0 10px }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px } .stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted) } .stat .v { font-family: var(--mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap } .stat .s { font-size: 11px; color: var(--muted) }
.pos { color: var(--good) } .neg { color: var(--bad) } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.tbl { overflow-x: auto } table { border-collapse: collapse; width: 100%; font-size: 13px } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap } th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel) } td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums } tr:hover td { background: rgba(127,127,127,.06) }
.tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-family: var(--mono); font-size: 11px; background: rgba(63,182,216,.15); color: var(--accent) } .tag.conf { background: rgba(46,230,166,.15); color: var(--good) } .tag.warn { background: rgba(255,184,77,.18); color: var(--warn) } .tag.bad { background: rgba(255,92,108,.15); color: var(--bad) } .tag.dim { background: rgba(127,127,127,.15); color: var(--muted) }
.empty { color: var(--muted); padding: 14px 4px; font-size: 13px }
.chartbox { position: relative; height: 260px } .chartbox canvas { width: 100% !important; height: 100% !important }
.form { display: grid; gap: 10px } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } @media (max-width: 640px) { .row { grid-template-columns: 1fr } }
label.f { display: grid; gap: 4px; font-size: 12px; color: var(--muted) } label.f input, label.f select, label.f textarea { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--fg); width: 100% } label.f textarea { min-height: 90px; font-family: var(--mono); font-size: 12px }
label.f input:focus, label.f textarea:focus, label.f select:focus { outline: 2px solid var(--accent); outline-offset: 1px }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer } .switch input { width: 40px; height: 22px; appearance: none; background: var(--line); border-radius: 999px; position: relative; transition: .2s } .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s } .switch input:checked { background: var(--good) } .switch input:checked::after { left: 21px }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow: auto } .events li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line) } .events time { font-family: var(--mono); color: var(--muted) } .events pre { margin: 0; white-space: pre-wrap; font: inherit }
.toast { position: fixed; right: 16px; bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 10px; box-shadow: var(--glow); z-index: 50; max-width: 360px; font-size: 13px } .toast.bad { border-left-color: var(--bad) } .toast.good { border-left-color: var(--good) }
.login { max-width: 360px; margin: 12vh auto; display: grid; gap: 12px } .login h1 { margin: 0 }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px } .kv b { color: var(--muted); font-weight: 500 }
.hint { font-size: 12px; color: var(--muted) } code { font-family: var(--mono); font-size: 12px; background: var(--bg2); padding: 1px 5px; border-radius: 4px }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px } .filters input, .filters select { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--fg) }
.sparkrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline }