.camera-pin{position:relative;width:25px;height:18px;border:2px solid #dffbff;border-radius:4px;background:#10a9bf;box-shadow:0 0 0 4px #20c8d733,0 0 15px #20c8d7}.camera-pin:after{content:'';position:absolute;right:-7px;top:3px;width:7px;height:8px;background:#dffbff;clip-path:polygon(0 20%,100% 0,100% 100%,0 80%)}.camera-pin i{position:absolute;left:7px;top:3px;width:8px;height:8px;border:2px solid #05202d;border-radius:50%}
.leaflet-popup-content button{margin-top:7px;padding:5px 8px;border:1px solid #42bad1;border-radius:4px;background:#123a52;color:#dff8ff;cursor:pointer}.camera-dot{background:#dffbff;box-shadow:0 0 7px #20c8d7}
.camera-stage{position:absolute;z-index:510;left:12px;top:68px;width:268px;border:1px solid #3b8aa7;border-radius:7px;background:#06131e;box-shadow:0 10px 35px #000b;overflow:hidden}.camera-screen{position:relative;aspect-ratio:16/9;background:radial-gradient(circle,#163e51,#02070b);overflow:hidden}.camera-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#03121d80 0,#03121d00 35%,#03121d05 47%,#03121de8 100%)}.camera-screen video{display:block;width:100%;height:100%;object-fit:cover;background:#02070b}.camera-tags{position:absolute;z-index:3;top:7px;left:7px;display:flex;gap:4px}.camera-tags span{padding:3px 6px;border:1px solid #8ed8e866;border-radius:3px;background:#082234d9;color:#d8f7ff;font-size:7px;font-weight:800;line-height:1}.camera-tags .camera-live-badge{background:#e7f7ffde;color:#163747;border-color:#fff}.camera-live-badge i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#3cbd68;box-shadow:0 0 7px #52db72}.camera-expand{position:absolute;z-index:4;top:5px;right:5px;width:23px;height:23px;border:0;border-radius:3px;background:#071421b5;color:#dff9ff;font-size:14px;cursor:pointer}.camera-caption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:28px 9px 7px;color:#f5fdff;text-shadow:0 1px 3px #000}.camera-caption b,.camera-caption small{display:block}.camera-caption b{font-size:10px}.camera-caption small{margin-top:3px;color:#c4dae3;font-size:7px}.camera-caption-foot{display:flex;align-items:center;justify-content:space-between;margin-top:5px;color:#91b3c0;font-size:6px}.camera-overlay{position:absolute;z-index:5;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:#03101ad9;color:#d9f6ff}.camera-overlay.hidden{display:none}.camera-overlay b{font-size:11px;letter-spacing:1px;color:#20c8d7}.camera-overlay span{font-size:8px;color:#90adba}.camera-stage:fullscreen{left:0;top:0;width:100%;height:100%;border:0;border-radius:0}.camera-stage:fullscreen .camera-screen{height:100%;aspect-ratio:auto}.camera-stage:fullscreen .camera-caption{padding:80px 28px 24px}.camera-stage:fullscreen .camera-caption b{font-size:22px}.camera-stage:fullscreen .camera-caption small{font-size:13px}.camera-dot-button{width:7px;height:7px;margin-right:5px;padding:0;border:0;border-radius:50%;background:#58788a;cursor:pointer}.camera-dot-button.active{background:#20d5e4;box-shadow:0 0 6px #20c8d7}
.camera-panel{height:230px;flex:none}.camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px}.camera-card{position:relative;min-width:0;height:78px;padding:0;border:1px solid #1d5873;border-radius:5px;background:#061621;color:#fff;overflow:hidden;cursor:pointer;text-align:left}.camera-card.active{border-color:#20c8d7;box-shadow:0 0 0 1px #20c8d755}.camera-card video,.camera-card .live-placeholder{width:100%;height:46px;display:block;object-fit:cover;background:linear-gradient(145deg,#15394d,#07131e)}.camera-card .live-placeholder{position:relative;background:radial-gradient(circle at 50% 80%,#206077,#07131e 65%)}.camera-card .live-placeholder:before{content:'◉';position:absolute;inset:0;display:grid;place-items:center;color:#5ae5f0;font-size:21px}.camera-card b,.camera-card small{display:block;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-card b{margin-top:3px;font-size:8px}.camera-card small{margin-top:1px;color:#78a2b4;font-size:7px}.camera-card .state{position:absolute;z-index:2;top:4px;left:4px;padding:2px 4px;border-radius:3px;background:#0a1c29da;color:#65d377;font-size:6px;font-weight:800}.camera-card.demo .state{color:#ffcd69}
.iot-panel{height:105px;flex:none}.iot-device{height:65px;padding:8px 10px;display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center}.iot-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid #2c7189;border-radius:7px;background:#123a50;color:#56dbeb;font-size:22px}.iot-device b,.iot-device small{display:block}.iot-device b{font-size:9px}.iot-device small{margin-top:3px;color:#79a6b8;font-size:7px}.iot-device strong{padding:5px 7px;border-radius:5px;background:#173d48;color:#65d377;font-size:9px}.iot-device.tilt strong{background:#5c2228;color:#ff7c84;box-shadow:0 0 10px #ff667155}.iot-device.tilt .iot-icon{border-color:#ff6671;color:#ff7c84}.weather-panel{height:145px;flex:none;position:relative}.weather-now{height:35px;padding:5px 10px;display:flex;align-items:center;gap:8px;color:#b9d7e4;font-size:8px}.weather-now strong{color:#fff;font-size:20px}.weather-now b,.weather-now span{display:block}.weather-now b{font-size:10px}.weather-now span{color:#78a7b9}.weather-forecast{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 7px}.forecast-day{min-width:0;padding:4px 1px;border:1px solid #19455b;border-radius:4px;background:#0a2133;text-align:center}.forecast-day b,.forecast-day span,.forecast-day small{display:block}.forecast-day b{font-size:6px;color:#8eb3c2}.forecast-day span{font-size:11px}.forecast-day small{font-size:6px;color:#c3dce5}.weather-credit{position:absolute;right:7px;bottom:3px;color:#50778a;font-size:5px}.right-column .trend-panel{height:110px}.right-column .status-panel{height:90px}.right-column .trend-svg{height:70px}.right-column .status-row{padding:2px 10px}
@media(max-width:1100px){.camera-stage{width:238px}}@media(max-width:720px){.camera-stage{left:10px;top:62px;width:220px}}