/* The app's own pages. Same palette as the engine's recordings page, so the
   two read as one product. */
:root {
  --bg:#0d0d0d; --panel:#141413; --tile:#1a1a19; --grid:#2c2c2a; --ink:#fff; --soft:#b9b7b0;
  --muted:#898781; --good:#2fbf4a; --warn:#fab219; --bad:#e66767; --accent:#3987e5; --sel:#24406a;
}
* { box-sizing:border-box; }
/* The hidden attribute has to win over any display set below it. */
[hidden] { display:none !important; }
html, body { margin:0; background:var(--bg); color:var(--ink);
             font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; }
a { color:var(--accent); }
h1, h2, h3 { margin:0; }
h2 { font-size:15px; font-weight:650; }
button, .btn { background:var(--tile); color:var(--ink); border:1px solid var(--grid); border-radius:6px;
               padding:6px 12px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { border-color:var(--muted); }
button.primary { background:var(--accent); border-color:var(--accent); }
button.danger { color:var(--bad); }
button.small { padding:3px 8px; font-size:12px; }
button:disabled { opacity:.45; cursor:default; }
input, select, textarea { background:#0b0b0b; color:var(--ink); border:1px solid var(--grid); border-radius:6px;
                          padding:7px 9px; font:inherit; min-width:0; }
textarea { width:100%; resize:vertical; }
label.f { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
.main { padding:14px; max-width:1500px; margin:0 auto; }
.panel { background:var(--panel); border:1px solid var(--grid); border-radius:10px; padding:14px; }
.panel + .panel { margin-top:12px; }
.head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.sp { flex:1; }
.t { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12.5px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:99px;
        font-size:12px; background:#222; color:var(--soft); white-space:nowrap; }
.pill.live { background:#123d1c; color:#8ff0a4; }
.pill.warn { background:#3a2a08; color:#ffd98a; }
.pill.bad { background:#3a1414; color:#ffb3b3; }
.pill.rec { background:#4a1010; color:#ff9d9d; }
.dot { width:8px; height:8px; border-radius:50%; background:#555; display:inline-block; }
.pill.live .dot { background:#2fbf4a; box-shadow:0 0 6px #2fbf4a; }
.pill.rec .dot { background:#ff4040; animation:blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) { .pill.rec .dot { animation:none; } }
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:12px; }
.kv { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 10px; align-items:center; }
.kv .k { color:var(--muted); font-size:12px; }
.kv .v { overflow-wrap:anywhere; }
table.list { width:100%; border-collapse:collapse; }
table.list th { text-align:left; font-size:11px; color:var(--muted); font-weight:600; padding:6px 8px;
                border-bottom:1px solid var(--grid); }
table.list td { padding:7px 8px; border-bottom:1px solid #1d1d1c; vertical-align:middle; }
.empty { color:var(--muted); padding:18px; text-align:center; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.card { border:1px solid var(--grid); border-radius:8px; padding:10px 12px; cursor:pointer; background:var(--tile); }
.card:hover { border-color:var(--muted); }
.card.on { border-color:var(--accent); background:#1a2433; }
.card b { display:block; margin-bottom:3px; }
.card span { color:var(--muted); font-size:12px; }
.md h1, .md h2, .md h3 { margin:14px 0 6px; }
.md h1 { font-size:20px; } .md h2 { font-size:17px; } .md h3 { font-size:15px; }
.md p { margin:8px 0; }
.md table { border-collapse:collapse; margin:8px 0; }
.md td, .md th { border:1px solid var(--grid); padding:4px 8px; }
.md code { background:#222; padding:1px 4px; border-radius:4px; }
.md blockquote { border-left:3px solid var(--grid); margin:8px 0; padding:2px 12px; color:var(--soft); }
.seg { display:inline-flex; border:1px solid var(--grid); border-radius:6px; overflow:hidden; }
.seg button { border:0; border-radius:0; border-right:1px solid var(--grid); }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--sel); }
@media (max-width: 1000px) { .grid2 { grid-template-columns:1fr; } }
@media (max-width: 600px) { .main { padding:10px; } .panel { padding:11px; } }