:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
main { width: min(1180px, 100%); margin: 0 auto; padding: 1rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1 { font-size: 1.25rem; margin: 0; }
button { border: 1px solid #b7c2d5; background: white; color: #172033; padding: .45rem .8rem; border-radius: .35rem; cursor: pointer; }
button.active { background: #1849a9; color: white; border-color: #1849a9; }
.controls { margin: 1rem 0 .4rem; }
.time-picker { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; }
.time-picker label { display: grid; gap: .2rem; font-size: .8rem; color: #536176; }
input[type="date"], input[type="time"] { border: 1px solid #b7c2d5; border-radius: .35rem; padding: .42rem .5rem; color: #172033; background: white; font: inherit; }
#time-label { display: block; margin-top: .55rem; font-size: .85rem; color: #536176; }
#status, #marker-scale { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: #536176; min-height: 1.2em; }
#map { height: min(75vh, 760px); min-height: 430px; border: 1px solid #d5dce8; border-radius: .5rem; overflow: hidden; background: #e6ebf3; }
.measurement-popup dl { display: grid; grid-template-columns: auto auto; gap: .25rem .8rem; margin: .25rem 0 0; }
.measurement-popup dd { margin: 0; font-weight: 600; }
.history { margin-top: .7rem; font-size: .75rem; color: #536176; }
.history strong, .history span { display: block; }
.chart-legend { display: flex; gap: .65rem; margin-top: .2rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.chart-legend i { width: .7rem; height: .18rem; border-radius: 1rem; }
.chart-threshold-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; color: #536176; font-size: .7rem; }
.chart-threshold-legend span { display: inline-block; width: .7rem; height: .7rem; border-radius: .12rem; }
.history .chart-threshold-warning { fill: #f59e0b; background: #f59e0b; opacity: .2; }
.history .chart-threshold-critical { fill: #b91c1c; background: #b91c1c; opacity: .2; }
.history svg { display: block; width: 280px; max-width: 100%; height: 132px; margin: .25rem 0; background: #f7f9fc; border-radius: .2rem; }
.history .chart-grid { stroke: #d5dce8; stroke-width: 1; stroke-dasharray: 2 2; }
.history .chart-label { fill: #667085; font-size: 9px; font-family: system-ui, sans-serif; }
.stale { color: #a04b00; font-weight: 700; }
footer { padding: .7rem 1rem; text-align: center; font-size: .8rem; }
footer a { color: #1849a9; }
.admin-page { width: min(980px, 100%); }
.admin-page header a { color: #1849a9; }
.admin-card { margin: 1rem 0; padding: 1rem; border: 1px solid #d5dce8; border-radius: .5rem; background: white; }
.admin-card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.admin-card form { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.admin-card label { display: grid; gap: .2rem; color: #536176; font-size: .85rem; }
.admin-card input { min-width: 15rem; padding: .42rem .5rem; border: 1px solid #b7c2d5; border-radius: .35rem; font: inherit; }
.new-token { margin-top: .8rem; padding: .75rem; border: 1px solid #f59e0b; border-radius: .35rem; background: #fffbeb; }
.new-token code { display: block; margin-top: .4rem; overflow-wrap: anywhere; font-size: .8rem; }
.new-token p { margin: .45rem 0 0; font-size: .82rem; }
.table-wrap { overflow-x: auto; }
.admin-card table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-card th, .admin-card td { padding: .55rem; border-top: 1px solid #d5dce8; text-align: left; vertical-align: middle; }
.admin-card th { color: #536176; font-weight: 600; }
.admin-card td button { margin: .1rem; font-size: .8rem; }
.admin-card button.danger { color: #a61b1b; border-color: #e6a5a5; }
@media (max-width: 560px) { .time-picker { gap: .4rem; } }