:root { --pico-font-size: 95%; }
.topnav { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
.topnav .brand { text-decoration: none; }
.inline { display: inline; margin: 0; }
button.small, .small { padding: .25rem .6rem; font-size: .85rem; margin: 0; width: auto; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; color: #fff; background: #6c757d; vertical-align: middle; }
.badge.green { background: #2e7d32; }
.badge.amber { background: #ed6c02; }
.badge.red { background: #c62828; }
.badge.unknown { background: #6c757d; }
.flash { padding: .6rem 1rem; margin-bottom: 1rem; }
.flash.error { border-left: 4px solid #c62828; }
.flash.ok { border-left: 4px solid #2e7d32; }
.grid-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cam-card { padding: .75rem; margin: 0; }
.cam-card img, .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #222; border-radius: 4px; }
.cam-card .nothumb { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: #333; color: #bbb; border-radius: 4px; font-size: .85rem; }
.cam-card h4 { margin: .5rem 0 .25rem; font-size: 1rem; }
.meta { font-size: .8rem; color: var(--pico-muted-color); margin: 0; }
.muted { color: var(--pico-muted-color); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; word-break: break-all; }
table.compact td, table.compact th { padding: .35rem .5rem; font-size: .85rem; }
.timeline img { width: 160px; border-radius: 3px; }
.status-ok { color: #2e7d32; font-weight: 600; }
.status-bad { color: #c62828; font-weight: 600; }
.status-warn { color: #ed6c02; font-weight: 600; }
details summary { cursor: pointer; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
fieldset.cond[hidden] { display: none; }
.token { font-family: ui-monospace, monospace; background: #f3f3f3; padding: .5rem; border-radius: 4px; word-break: break-all; }

/* View comparison (advanced plan) */
.baseline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .baseline-grid { grid-template-columns: 1fr; } }
.baseline-card { margin: 0; padding: .75rem; }
.baseline-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #222; border-radius: 4px; }
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.compare-pair figure { margin: 0; }
.compare-pair img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #222; border-radius: 4px; }
.small-select { display: inline-block; width: auto; padding: .1rem 1.6rem .1rem .4rem; margin: 0; font-size: .8rem; }