:root {
    color-scheme: dark;
    font: 16px/1.45 system-ui, sans-serif;
    color: #ecf3fc;
    background: #101821;
}
body { margin: 0; }
main { max-width: 1280px; margin: auto; padding: 24px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
header strong { color: #101821; background: #55e4b0; padding: 4px 9px; border-radius: 6px; }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.2; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p, footer, .totals span { color: #b0c2d6; }
.panel { background: #182430; border: 1px solid #304353; border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 12px; }
.totals b { display: block; font-size: 1.6rem; color: #55e4b0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.toolbar h2, .toolbar h3 { margin: 0; }
.site-list { overflow: auto; max-height: 420px; }
a { color: #9ae6ff; }
nav a[aria-current="page"] { font-weight: 700; color: #55e4b0; }
.group-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-bottom: 16px; }
.group-sites label { overflow-wrap: anywhere; }
.group-sites input { margin-right: 5px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead { position: sticky; top: 0; background: #182430; }
th, td { text-align: right; padding: 8px; border-bottom: 1px solid #304353; }
th:first-child, td:first-child { text-align: left; }
button, input, select { font: inherit; border: 1px solid #435d71; border-radius: 6px; padding: 8px; }
button { cursor: pointer; }
.site-button { border: 0; background: transparent; padding: 0; color: #9ae6ff; }
.site-button:hover, .site-button[aria-pressed="true"] { text-decoration: underline; }
.login { max-width: 400px; margin: 8vh auto; }
.login label, .login input { display: block; box-sizing: border-box; width: 100%; margin-bottom: 12px; }
.login button { background: #55e4b0; color: #101821; }
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(27px, 1fr); gap: 3px; overflow: auto; margin-bottom: 24px; }
.bar { display: grid; justify-items: center; gap: 4px; min-width: 24px; }
.bar meter { writing-mode: vertical-lr; direction: rtl; width: 14px; height: 90px; }
.bar small { color: #b0c2d6; }
.breakdown { border-top: 1px solid #304353; padding-top: 14px; }
.breakdown div { display: flex; gap: 8px; justify-content: space-between; padding: 5px 0; }
.breakdown span { overflow-wrap: anywhere; }
.breakdown b { font-size: 1rem; }
@media (max-width: 520px) {
    main { padding: 12px; }
    th, td { padding: 5px; }
    .panel { padding: 12px; }
}