:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20242a; background: #f4f6f8; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 22px; background:#fff; border-bottom:1px solid #dfe3e8; }
h1,h2 { margin:0; }
h1 { font-size:1.45rem; }
h2 { font-size:1rem; }
#status,.subtle,.brush-title { color:#68717d; font-size:.86rem; }
.header-actions,.date-inputs,.panel-heading { display:flex; align-items:center; gap:12px; }
.header-actions { flex-wrap: wrap; }
.mode-switch { display:flex; align-items:center; gap:8px; }
select,input,button { font:inherit; }
select,input[type=date] { border:1px solid #c8ced6; border-radius:6px; padding:7px 9px; background:#fff; }
button { border:1px solid #b9c1ca; border-radius:6px; padding:7px 11px; background:#fff; cursor:pointer; }
button:hover { background:#f0f3f6; }
.link-button { border:0; padding:4px; color:#315f9c; }
main { padding:16px; display:grid; gap:16px; }
.panel { background:#fff; border:1px solid #dde2e8; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.04); overflow:hidden; }
.top-grid { display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:16px; min-height:410px; }
.map-panel { position:relative; }
#map { height:100%; min-height:410px; }
.sensor-panel { padding:14px; overflow:auto; max-height:410px; }
.panel-heading { justify-content:space-between; margin-bottom:10px; }
.sensor-row { display:grid; grid-template-columns:18px 14px 1fr; align-items:center; gap:8px; padding:7px 4px; border-radius:6px; cursor:pointer; user-select:none; }
.sensor-row:hover { background:#f3f5f7; }
.sensor-row.muted { opacity:.42; }
.sensor-swatch { width:12px; height:12px; border-radius:50%; }
.chart-panel { padding:14px; }
.chart-heading { margin-bottom:0; }
.chart { width:100%; height:420px; }
.brush-chart { width:100%; height:105px; }
.chart-empty { height:100%; display:grid; place-items:center; color:#68717d; font-size:.92rem; }
.brush-title { margin:2px 0 0 52px; }
.axis text { fill:#5e6874; font-size:11px; }
.axis path,.axis line { stroke:#cbd1d8; }
.grid line { stroke:#e7eaee; }
.sensor-line { fill:none; stroke-width:1.6; opacity:.62; cursor:pointer; }
.sensor-line.selected { stroke-width:3; opacity:1; }
.sensor-line.dimmed { opacity:.08; }
.hit-line { fill:none; stroke:transparent; stroke-width:12; cursor:pointer; }
.temperature-legend { position:absolute; left:12px; bottom:12px; z-index:500; background:rgba(255,255,255,.94); border-radius:7px; padding:8px 10px; box-shadow:0 1px 5px rgba(0,0,0,.22); font-size:12px; }
.gradient-bar { width:180px; height:10px; border-radius:5px; margin:5px 0 3px; background:linear-gradient(90deg,#313695,#4575b4,#74add1,#abd9e9,#e0f3f8,#ffffbf,#fee090,#fdae61,#f46d43,#d73027,#a50026); }
.gradient-labels { display:flex; justify-content:space-between; }
.sensor-marker { width:28px; height:28px; border:2px solid #222; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.sensor-marker.selected { border-width:4px; transform:scale(1.12); }
.sensor-marker.no-data { background:#a9afb7 !important; }
.tooltip { position:fixed; z-index:2000; pointer-events:none; background:rgba(30,34,40,.94); color:#fff; border-radius:6px; padding:7px 9px; font-size:12px; max-width:260px; }
@media (max-width:850px) { .top-grid { grid-template-columns:1fr; } .sensor-panel { max-height:260px; } header { align-items:flex-start; flex-direction:column; } .chart-heading { align-items:flex-start; flex-direction:column; } }