:root{font-family:Segoe UI,Arial,sans-serif;color:#213248;background:#f2f5f8;font-size:14px}*{box-sizing:border-box}body{margin:0;display:flex}aside{width:245px;background:#102638;color:#b6c8d7;min-height:100vh;padding:30px 20px;position:fixed;inset:0 auto 0 0}.brand{font-size:18px;color:#fff;letter-spacing:1px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin:10px 0 42px 25px}nav button{display:block;width:100%;text-align:left;background:none;color:#aabecd;border:0;padding:15px 12px;margin:6px 0}nav button.active,nav button:hover{background:#234354;color:white}footer{position:absolute;bottom:28px;line-height:1.9;font-size:12px}main{margin-left:245px;padding:32px 38px;width:calc(100% - 245px);max-width:1800px}header{display:flex;justify-content:space-between;align-items:center}small{font-size:10px;letter-spacing:1.4px;color:#7890a0}h1{font-size:29px;margin:8px 0 24px;font-weight:600}h2{font-size:18px;font-weight:600}.badge{font-size:10px;color:#977139;border:1px solid #e3cc9c;border-radius:4px;padding:8px}.notice{background:#e8eff5;border-left:3px solid #4c809c;padding:12px 16px;color:#526c80;font-size:12px;margin-bottom:25px}.toolbar{display:flex;gap:12px;margin-bottom:24px;align-items:center}input,select,button{font:inherit;border-radius:5px;border:1px solid #d5dfe6;padding:10px;background:white;color:#263f50}button{cursor:pointer}button:hover{border-color:#2b8d87}form button,#refresh{background:#187d78;color:white;border:0}input{max-width:100%}.toolbar input{flex:1}.toolbar span{font-size:10px;color:#82929e}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card,.panel{background:white;border:1px solid #e0e7ec;border-radius:8px;padding:22px;margin-bottom:20px}.card span{font-size:11px;color:#718798;text-transform:uppercase;letter-spacing:1px}.card strong{display:block;font-size:32px;margin-top:12px;font-weight:600}.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:#7d8e9a;font-weight:500;background:#f7f9fb}td,th{padding:13px 10px;border-bottom:1px solid #edf1f4}td small{display:block;letter-spacing:0;margin-top:5px}.pill{font-size:10px;padding:5px 8px;border-radius:4px;display:inline-block;background:#eef3f7;color:#637785}.ONLINE{color:#187d65;background:#e5f4ef}.OFFLINE,.OPEN{color:#a06529;background:#fff3df}.muted{color:#8395a3;font-size:12px}.empty{padding:32px;text-align:center;color:#8193a0}form{display:flex;gap:15px;flex-wrap:wrap;align-items:end}label{display:flex;flex-direction:column;gap:7px;font-size:12px}#login{max-width:650px;background:white;padding:32px;border-radius:10px}#message{color:#9c532c}.schematic{width:100%;height:260px;background:#f3f7f7;border:1px dashed #cad8db}.stationrow{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid #edf1f4}video{width:100%;max-width:400px;border-radius:8px}img.photo{max-width:260px;max-height:240px}.actions{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:900px){aside{position:relative;width:180px}main{margin-left:0;padding:20px;width:calc(100% - 180px)}.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}}@media print{aside,.toolbar,.notice,button,#login{display:none}main{margin:0;width:100%}.panel{break-inside:avoid}}

.live-map{height:340px;background:#e9f2f5;border-radius:5px}.playback{padding:15px;background:#f3f7fa;display:flex;gap:20px;align-items:center}.playback input{width:100%}.playback label{flex:1}.leaflet-container{font-family:Segoe UI,Arial,sans-serif}
.export-link{margin:0 12px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px Segoe UI,sans-serif;line-height:1.8;background:#f5f8fa;padding:15px;border-radius:6px}
.live-map{height:480px}.map-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.map-tools button{padding:9px 12px}.map-expanded{height:78vh;min-height:480px}.grid:has(.live-map){grid-template-columns:minmax(0,2fr) minmax(220px,1fr)}.leaflet-control-layers{color:#173646}.leaflet-control-attribution{font-size:11px}@media(max-width:900px){.grid:has(.live-map){grid-template-columns:1fr}.live-map{height:420px}}