.tabs a { padding: 0.35rem 0.8rem; }
#areas { display: block; padding: 0 1rem 2rem; }
.fresh { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1rem 0; }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 2px 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; color: var(--ink2); background: var(--card); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
.pill.live { --c: var(--s3); } .pill.recent { --c: var(--s1); } .pill.late { --c: #d9a21b; } .pill.stale { --c: var(--pole-pos); }
.pill b { color: var(--ink); font-weight: 600; }

.area-block { margin-top: 1.4rem; }
.area-block > h2 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.area-block > h2 small { color: var(--muted); font-weight: normal; margin-left: 0.5rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.8rem; }
.tile .label { color: var(--muted); font-size: 11px; }
.tile .value { font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 0.1rem 0; }
.tile .value.up { color: var(--pole-pos); } .tile .value.down { color: var(--pole-neg); }
.tile .sub { color: var(--ink2); font-size: 11px; }
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.chartbox.short { height: 12rem; }

.mtu-scroll { overflow: auto; max-height: 28rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
table.mtu { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; width: 100%; }
.mtu th, .mtu td { padding: 3px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.mtu thead th { position: sticky; background: var(--bg); color: var(--muted); font-weight: 600; font-size: 11px; z-index: 2; }
.mtu thead tr:first-child th { top: 0; text-align: center; color: var(--accent); border-bottom: 1px solid var(--axis); }
.mtu thead tr:nth-child(2) th { top: 24px; }
.mtu td:first-child, .mtu th:first-child { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; }
.mtu thead th:first-child { background: var(--bg); z-index: 3; }
.mtu tr.current td { background: rgba(217, 162, 27, 0.12); }
.mtu tr.future td { color: var(--muted); font-style: italic; }
.mtu td.up { color: var(--pole-pos); } .mtu td.down { color: var(--pole-neg); }
.mtu td.live { opacity: 0.8; font-style: italic; }
.mtu td.sep, .mtu th.sep { border-left: 1px solid var(--axis); }
.mtu tr.totals td { font-weight: 600; background: var(--bg); position: sticky; bottom: 0; border-top: 1px solid var(--axis); }
.note { color: var(--muted); font-size: 11px; margin: 0.3rem 0 0; }