* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  color-scheme: dark;
  --muted: #9aafbe;
  --border: #23323d;
  --panel: #10171e;
  --mono: "Cascadia Mono", Consolas, monospace;
}
body { margin: 0; background: #0b1218; color: #dbe8ef; font: 14px system-ui, sans-serif; }
.app-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--panel); }
main { padding: 0 16px 16px; }
#status:empty { display: none; }
#event-view, #feed-view { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.panel-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
h1, h2 { margin: 0; color: #eff6fb; font-size: 18px; }
.panel-heading span, .paging, dialog p { color: var(--muted); }
button, input, select { min-height: 30px; background: #111c24; color: inherit; border: 1px solid #30414e; padding: 5px 8px; border-radius: 5px; }
select { max-width: min(42vw, 300px); }
button { cursor: pointer; }
button:hover:enabled, button[aria-pressed="true"] { background: #143743; border-color: #2d6474; color: #f0faff; }
button:disabled { opacity: .5; cursor: default; }
form, .paging, nav { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
#login { margin-top: 16px; }
label { display: grid; gap: 4px; font-size: 12px; }
.paging { align-items: center; margin: 10px 0; font-size: 12px; }
.table-scroll { overflow: auto; height: max(260px, calc(100vh - 220px)); scrollbar-gutter: stable; border: 1px solid var(--border); border-radius: 6px; }
table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font: 12px var(--mono); }
th, td { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; padding: 6px 8px; border-bottom: 1px solid #1e2b34; }
th:nth-child(-n+7), td:nth-child(-n+7) { text-align: left; }
th { position: sticky; top: 0; z-index: 1; background: #0c151c; color: #edf5fb; }
tbody tr:nth-child(even) { background: #0d151c; }
tbody tr:hover { background: #172832; }
td button, .card-actions button { min-height: 24px; padding: 3px 7px; font-size: 11px; }
.badge { display: inline-block; padding: 2px 5px; border: 1px solid currentColor; border-radius: 5px; color: var(--muted); font: 11px var(--mono); }
.badge[data-status="complete"], .positive { color: #30d89c; }
.badge[data-status="pending"], .badge[data-status="partial"] { color: #e5ab2d; }
.badge[data-status^="no_"], .negative { color: #f27777; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin-bottom: 12px; }
.summary .metric { padding: 9px; border: 1px solid var(--border); border-radius: 6px; }
.summary .metric strong { font-size: 17px; }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 12px; }
.tick-live-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #0b1218; }
.tick-live-card[data-status="complete"] { border-color: #255044; }
.tick-live-card[data-status="pending"] { border-color: #594a2b; }
.tick-live-card[data-status^="no_"] { border-color: #593639; }
.card-head, .card-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-actions { align-items: center; flex-shrink: 0; }
.card-title { display: grid; min-width: 0; gap: 2px; }
.card-title strong { font-size: 15px; }
.card-title span, .card-actions time, .chart-note { color: var(--muted); font-size: 11px; }
.card-actions time { font-family: var(--mono); }
.card-chart { display: grid; place-items: center; aspect-ratio: 19 / 7.5; background: #f4f7f8; color: #334956; font-size: 12px; }
canvas { display: block; width: 100%; height: auto; background: #f4f7f8; }
.card-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.metric { display: grid; align-content: start; gap: 3px; min-width: 0; }
.card-meta .metric { padding-top: 6px; border-top: 1px solid var(--border); }
.metric > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric span:not(.badge), .metric small { color: var(--muted); font-size: 11px; }
.metric strong { font: 600 12px var(--mono); }
dialog { width: min(960px, 95vw); padding: 16px; background: #10171e; color: inherit; border: 1px solid #30414e; border-radius: 8px; }
dialog::backdrop { background: #000a; }
dialog form { justify-content: flex-end; }
dialog h2 { margin-bottom: 10px; }
@media (max-width: 460px) { .card-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }