:root{--nav:#071b35;--blue:#002050;--bg:#f3f6fa;--line:#dce4ed;--muted:#6d7b8e;--green:#1f9d62;--amber:#d99b25;--red:#c94d4d}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#142033;background:var(--bg)}
.hidden{display:none!important}
button,input,select{font:inherit}
.login{min-height:100vh;display:grid;place-items:center;background:var(--blue)}
.login form{width:390px;max-width:calc(100% - 30px);background:#fff;padding:32px;border-radius:15px}
.login h1{margin:0}.login p{color:var(--muted)}
.login input{display:block;width:100%;padding:11px;margin:10px 0;border:1px solid var(--line);border-radius:8px}
.login button,.primary{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:10px 14px}
.login button{width:100%}
#loginErr{color:var(--red);margin-top:10px;font-size:13px}
#app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{background:var(--nav);color:#fff;padding:20px 14px}
.brand {
    padding: 4px 10px 22px;
}

.brand-logo {
    display: block;
    width: 165px;
    max-width: 100%;
    height: auto;
}

.login-logo-wrap {
    margin-bottom: 22px;
}

.login-logo {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
	margin: 0 auto;
}
.login form > p {
    text-align: center;
}
nav button{display:block;width:100%;border:0;background:transparent;color:#cbd6e4;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;margin:2px 0}
nav button:hover,nav button.on{background:#ffffff13;color:#fff}
.sep{font-size:9px;color:#7188a3;font-weight:800;padding:20px 12px 7px;letter-spacing:.1em}
.shell{min-width:0}
.shell header{min-height:65px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:8px 24px;gap:15px}
.shell header small{display:block;color:var(--muted);font-size:10px}
.header-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.shell header button,.ghost{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px}
.station-picker{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted)}
.station-picker select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;min-width:190px}
main{padding:22px;max-width:1550px}
.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px;gap:15px}
.hero h1{margin:0}.hero p{margin:4px 0;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card,.panel{background:#fff;border:1px solid var(--line);border-radius:12px}
.card{padding:16px}.card small{color:var(--muted)}.card strong{display:block;font-size:27px;margin-top:5px}
.grid{display:grid;grid-template-columns:1.4fr .8fr;gap:13px;margin-top:13px}
.panel h2{font-size:16px;margin:0}
.ph{padding:15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.list .row{padding:13px 15px;border-bottom:1px solid #edf1f5;cursor:pointer}.list .row:hover{background:#f7f9fc}
.row small{display:block;color:var(--muted);margin-top:3px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.online{background:var(--green)}.delayed{background:var(--amber)}.offline{background:var(--red)}
#map{height:460px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:1px;background:var(--line)}
.metric{background:#fff;padding:16px}.metric b{display:block;font-size:24px}.metric small{color:var(--muted)}
.warn{padding:10px 12px;border-radius:8px;background:#fff5df;color:#7a5612;margin-bottom:10px}.critical{background:#ffeded;color:#8d2f2f}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar select,.toolbar button,.toolbar input{padding:8px;border:1px solid var(--line);border-radius:7px;background:#fff}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap}.table th{position:sticky;top:0;background:#f8fafc;z-index:1}
.placeholder{padding:35px;color:var(--muted);text-align:center}
.archive-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.archive-summary{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px}
@media(max-width:900px){#app{grid-template-columns:1fr}aside{display:none}.cards{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}main{padding:12px}.station-picker span{display:none}.station-picker select{min-width:150px}}

/* Sensor configuration empty state */
.sensor-empty{padding:16px 18px}
.sensor-empty p{margin:0}

.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line,#d8e1ec)}
.dashboard-card{position:relative;min-height:120px;background:#fff;padding:16px}.dashboard-card.wide{grid-column:span 2}
.dashboard-grid.is-editing .dashboard-card{outline:1px dashed #8fa6c2;cursor:grab;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.dashboard-grid.is-editing .dashboard-card:hover{box-shadow:0 5px 18px rgba(0,32,80,.10);z-index:2}
.dashboard-grid.drag-active .dashboard-card{transition:transform .08s ease}
.dashboard-card.dragging{opacity:.28;box-shadow:0 10px 28px rgba(0,32,80,.18);cursor:grabbing}
.dash-handle{position:absolute;right:9px;top:8px;color:#8090a5;font-weight:800}.dash-size{position:absolute;right:8px;bottom:8px;padding:4px 7px;font-size:11px}
.dashboard-chooser{padding:14px;border-bottom:1px solid var(--line,#d8e1ec);background:#f8fafc}.dashboard-chooser-head{display:flex;gap:10px;align-items:baseline;margin-bottom:10px}.dashboard-chooser-head span{font-size:12px;color:var(--muted)}
.dashboard-param-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:260px;overflow:auto}.dashboard-choice{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line,#d8e1ec);border-radius:8px;padding:8px;font-size:12px}.wind-choice{border-color:#9fb6d0}
.wind-dashboard-card{display:block!important;padding:14px 16px!important;min-height:330px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.wind-card-head{display:flex;justify-content:space-between;align-items:flex-start;padding:1px 2px 8px;border-bottom:1px solid var(--line,#d8e1ec)}
.wind-card-head div{display:flex;flex-direction:column;gap:2px}.wind-card-head small{font-size:10px;letter-spacing:.09em;font-weight:800;color:#6f818b}.wind-card-head b{font-size:13px;color:#173746}.wind-card-head>span{font-size:10px;color:#6f818b}
.wind-card-body{display:grid;grid-template-columns:minmax(250px,1fr) minmax(190px,.72fr);gap:14px;align-items:center;padding-top:7px}
.wind-svg-wrap{display:flex;justify-content:center;align-items:center}.wind-dashboard-compass{width:min(100%,285px);height:auto;aspect-ratio:1/1}
.wind-ring{fill:none;stroke:#d7e1e7;stroke-width:1.2}.wind-ring.inner{stroke:#e3e9ed}.wind-ticks line{stroke:#9caab2;stroke-width:1}
.wind-degree-labels text{text-anchor:middle;dominant-baseline:middle;fill:#8797a2;font-family:Arial,sans-serif;font-size:5.4px;font-weight:600}
.wind-led{fill:#c4cdd2;stroke:#8d9aa1;stroke-width:.7}.wind-led.active{fill:#e74343;stroke:#b92e2e;stroke-width:1.4}
.wind-dir-label,.wind-dir-small{text-anchor:middle;dominant-baseline:middle;fill:#173746;font-family:Arial,sans-serif;font-weight:800}.wind-dir-label{font-size:16px}.wind-dir-small{font-size:10px;fill:#6f818b}
.wind-arrow-edge{fill:#6f1414}.wind-arrow-light{fill:#ff6b6b}.wind-arrow-main{fill:#e53935}
.wind-center-box{fill:#f7fafc;stroke:#d7e1e7;stroke-width:1}.wind-center-dir{text-anchor:middle;fill:#173746;font-size:25px;font-weight:800;font-family:Arial,sans-serif}.wind-center-deg{text-anchor:middle;fill:#e74343;font-size:15px;font-weight:800;font-family:Arial,sans-serif}
.wind-card-values{display:grid;gap:12px}.wind-value-box{padding:14px 14px 12px;border-radius:11px;border:1px solid #d7e1e7;background:#f7fafc;text-align:center}.wind-value-box span{display:block;font-size:9px;letter-spacing:.06em;font-weight:800;color:#6f818b}.wind-value-box b{display:block;margin-top:6px;font-size:22px;color:#1582c7}.wind-value-box.gust b{color:#173746}.wind-value-box small{display:block;margin-top:3px;color:#6f818b;font-size:11px}

.archive-param-bar{padding:12px 15px;border-bottom:1px solid var(--line,#d8e1ec);display:flex;align-items:center;justify-content:space-between}.archive-param-bar small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.archive-param-chooser{padding:12px 15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;border-bottom:1px solid var(--line,#d8e1ec);background:#f8fafc}.archive-param-chooser label{display:flex;gap:7px;align-items:center;font-size:12px;background:#fff;border:1px solid var(--line,#d8e1ec);padding:7px;border-radius:7px}
@media(max-width:1100px){.dashboard-grid{grid-template-columns:repeat(3,1fr)}.dashboard-param-list,.archive-param-chooser{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-card.wide{grid-column:1/-1}.dashboard-param-list,.archive-param-chooser{grid-template-columns:1fr}}

@media(max-width:900px){.wind-card-body{grid-template-columns:1fr}.wind-card-values{grid-template-columns:1fr 1fr}.wind-dashboard-card{min-height:auto}}
@media(max-width:520px){.wind-card-values{grid-template-columns:1fr}}

/* Dashboard reorder v2: fixed-position swap targets, no live reshuffling */
.dashboard-grid.is-editing .dashboard-card.drop-target{
  outline:3px solid rgba(0,32,80,.32);
  outline-offset:-3px;
  box-shadow:inset 0 0 0 2px rgba(0,32,80,.08),0 7px 20px rgba(0,32,80,.10);
}
.dashboard-grid.is-editing .dashboard-card.dragging{
  opacity:.38;
  transform:scale(.985);
}

/* Map measurement layer */
.map-layer-toolbar{display:flex;align-items:flex-end}
.map-layer-toolbar label{font-size:11px;font-weight:700;color:var(--muted);display:grid;gap:5px}
.map-layer-toolbar select{min-width:230px;background:#fff;border:1px solid var(--line,#d8e1ec);border-radius:8px;padding:9px 34px 9px 10px;color:#172033}
.map-value-divicon{background:none!important;border:0!important;width:auto!important;height:auto!important}
.map-value-label{transform:translate(-50%,-100%);white-space:nowrap;background:#fff;border:1px solid #cfd9e5;border-radius:9px;padding:6px 9px;box-shadow:0 3px 12px rgba(0,32,80,.16);display:flex;align-items:baseline;gap:7px;position:relative}
.map-value-label:after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid #cfd9e5;border-bottom:1px solid #cfd9e5;transform:translateX(-50%) rotate(45deg)}
.map-value-label span{font-size:10px;color:#68788b}.map-value-label b{font-size:15px;color:#002050}.map-value-label small{font-size:9px;color:#7b8798}