:root {
    --c-bg: #0a0f0a;
    --c-panel: rgba(10,15,10,.92);
    --c-primary: #00ff41;
    --c-secondary: #00d4ff;
    --c-danger: #ff3344;
    --c-warning: #ffaa00;
    --c-fire: #ff4400;
    --c-police: #4488ff;
    --c-ambulance: #ffcc00;
    --c-text: rgba(0,255,65,.85);
    --c-text-dim: rgba(0,255,65,.4);
    --c-border: rgba(0,255,65,.15);
    --font-display: 'Orbitron', monospace;
    --font-mono: 'Share Tech Mono', monospace;
}
/* ── Light theme overrides ─────────────────────────── */
[data-theme="light"]{
    --c-bg: #f0f2f5;
    --c-panel: rgba(255,255,255,.94);
    --c-primary: #1a73e8;
    --c-secondary: #0d47a1;
    --c-danger: #d32f2f;
    --c-warning: #f57c00;
    --c-fire: #e65100;
    --c-police: #1565c0;
    --c-ambulance: #f9a825;
    --c-text: rgba(30,30,30,.9);
    --c-text-dim: rgba(80,80,80,.5);
    --c-border: rgba(0,0,0,.12);
}
[data-theme="light"] .logo{text-shadow:none}
[data-theme="light"] .clock{color:var(--c-secondary)}
[data-theme="light"] .leaflet-popup-content-wrapper{background:#fff;color:#222}
[data-theme="light"] .leaflet-popup-tip{background:#fff}
[data-theme="light"] .layer-item:hover{background:rgba(0,0,0,.04)}
/* Light: search bar */
[data-theme="light"] #search-wrap{background:rgba(255,255,255,.95)}
[data-theme="light"] #search-input{background:rgba(255,255,255,.92);color:#222;border-color:rgba(0,0,0,.15)}
[data-theme="light"] #search-input:focus{border-color:var(--c-primary);box-shadow:0 0 8px rgba(26,115,232,.25)}
[data-theme="light"] #search-results{background:rgba(255,255,255,.97);border-color:rgba(0,0,0,.12)}
[data-theme="light"] .search-item{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .search-item:hover,[data-theme="light"] .search-item.active{background:rgba(26,115,232,.08)}
/* Light: loading bar */
[data-theme="light"] #loading-bar{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.1)}
[data-theme="light"] .radar-spinner{border-color:rgba(26,115,232,.3)}
[data-theme="light"] .radar-spinner::after{background:conic-gradient(from 0deg,transparent 0deg,rgba(26,115,232,.15) 30deg,transparent 60deg)}
/* Light: P2000 + news tickers */
[data-theme="light"] #p2000-bar{background:rgba(255,255,255,.9);border-top-color:rgba(211,47,47,.15)}
[data-theme="light"] .p2000-label{color:rgba(211,47,47,.7);border-right-color:rgba(211,47,47,.15)}
[data-theme="light"] #p2000-ticker-content{color:#1a1a1a}
[data-theme="light"] .ticker-item{color:#333!important}
[data-theme="light"] .ticker-disc{opacity:.85!important}
[data-theme="light"] .ticker-region{opacity:.5!important}
[data-theme="light"] .ticker-title{color:#1a73e8!important}
[data-theme="light"] #news-bar{background:rgba(255,255,255,.9);border-top-color:rgba(13,71,161,.15)}
[data-theme="light"] .news-label{color:rgba(13,71,161,.7);border-right-color:rgba(13,71,161,.15)}
[data-theme="light"] #news-ticker-content{color:#1a1a1a}
/* Light: status bar */
[data-theme="light"] #statusbar{background:rgba(255,255,255,.94);border-top-color:rgba(0,0,0,.1)}
/* Light: detail panel */
[data-theme="light"] #detail-panel{background:rgba(255,255,255,.96);color:#222;border-color:rgba(0,0,0,.12)}
[data-theme="light"] .detail-row{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .detail-locate{background:rgba(26,115,232,.08);border-color:rgba(26,115,232,.25);color:var(--c-primary)}
[data-theme="light"] .detail-follow{background:rgba(0,150,200,.08);border-color:rgba(0,150,200,.25);color:#0096c8}
[data-theme="light"] #loc-layer-item.active{background:rgba(0,150,200,.06)}
/* Light: info modal + map modal */
[data-theme="light"] .info-box{background:rgba(255,255,255,.97)}
[data-theme="light"] .info-box p,[data-theme="light"] .info-box li{color:rgba(30,30,30,.65)!important}
[data-theme="light"] .info-box h2{color:#1a73e8;text-shadow:none}
[data-theme="light"] .info-box .info-close{color:#1a73e8;border-color:rgba(26,115,232,.3)}
[data-theme="light"] .info-box .info-close:hover{background:rgba(26,115,232,.08)}
[data-theme="light"] .info-box .copy-line{color:#666}
[data-theme="light"] .map-modal-box{background:rgba(255,255,255,.97)}
[data-theme="light"] .map-option-label{background:rgba(240,242,245,.85);color:#333}
/* Light: marifoon radio */
[data-theme="light"] #marifoon-radio{background:linear-gradient(180deg,#f4f6f8 0%,#e8eaed 40%,#dde0e3 100%);border-color:rgba(0,0,0,.15);box-shadow:0 6px 24px rgba(0,0,0,.12)}
[data-theme="light"] .radio-header{background:linear-gradient(180deg,#eaecef,#e0e2e5);border-bottom-color:rgba(0,0,0,.1)}
[data-theme="light"] .radio-title{color:var(--c-primary);text-shadow:none}
[data-theme="light"] .radio-btns button{color:#888}
[data-theme="light"] .radio-btns button:hover{color:var(--c-primary);background:rgba(26,115,232,.1)}
[data-theme="light"] .radio-lcd{background:linear-gradient(160deg,#f8faf8,#eef0ee);border-color:rgba(0,0,0,.1);box-shadow:inset 0 1px 4px rgba(0,0,0,.06)}
[data-theme="light"] .radio-lcd::before{background:none}
[data-theme="light"] .radio-lcd .lcd-ch{color:var(--c-primary);text-shadow:none}
[data-theme="light"] .radio-lcd .lcd-desc{color:rgba(30,30,30,.5)}
[data-theme="light"] .radio-scanner-switch{background:#e8eaed;border-color:rgba(0,0,0,.08)}
[data-theme="light"] .scanner-btn{color:#888}
[data-theme="light"] .scanner-btn.active{background:rgba(26,115,232,.12);color:var(--c-primary);box-shadow:none;text-shadow:none}
[data-theme="light"] .radio-ch-btn{background:linear-gradient(180deg,#f0f2f5,#e8eaed);border-color:rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.06)}
[data-theme="light"] .radio-ch-btn .ch-n{color:var(--c-primary)}
[data-theme="light"] .radio-ch-btn .ch-d{color:#888}
[data-theme="light"] .radio-play{background:linear-gradient(180deg,#f0f2f5,#e8eaed);border-color:var(--c-primary);box-shadow:0 1px 4px rgba(0,0,0,.1)}
[data-theme="light"] .radio-vol input[type=range]{background:#ccc}
[data-theme="light"] .radio-src{color:#999;border-top-color:rgba(0,0,0,.08)}
[data-theme="light"] .radio-src a{color:#999}
/* Light: energie dashboard */
[data-theme="light"] #energie-device{background:linear-gradient(180deg,#f8f5f0 0%,#f0ebe3 40%,#e8e3db 100%);border-color:rgba(0,0,0,.12);box-shadow:0 6px 24px rgba(0,0,0,.1)}
[data-theme="light"] .ener-header{background:linear-gradient(180deg,#ede8e0,#e3ddd5);border-bottom-color:rgba(0,0,0,.08)}
[data-theme="light"] .ener-btns button{color:#888}
[data-theme="light"] .ener-btns button:hover{color:#f57c00;background:rgba(245,124,0,.1)}
[data-theme="light"] .ener-lcd{background:linear-gradient(160deg,#fdf8f0,#f5f0e8);border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px 4px rgba(0,0,0,.04)}
[data-theme="light"] .ener-lcd::before{background:none}
[data-theme="light"] .ener-bar-label{color:rgba(30,30,30,.6)}
[data-theme="light"] .ener-bar-wrap{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.06)}
[data-theme="light"] .ener-bar-mw{color:rgba(30,30,30,.7)}
[data-theme="light"] .ener-src{color:#999;border-top-color:rgba(0,0,0,.08)}
/* Light: NS board */
[data-theme="light"] #ns-board{background:linear-gradient(180deg,#f8f6f0 0%,#f0ece3 40%,#e8e4db 100%);border-color:rgba(0,0,0,.12);box-shadow:0 6px 24px rgba(0,0,0,.1)}
[data-theme="light"] .nsb-header{background:linear-gradient(180deg,#edeae0,#e3dfd5);border-bottom-color:rgba(0,0,0,.08)}
[data-theme="light"] .nsb-btns button{color:#888}
[data-theme="light"] .nsb-btns button:hover{color:#1a73e8;background:rgba(26,115,232,.1)}
[data-theme="light"] .nsb-lcd{background:linear-gradient(160deg,#fdfaf0,#f5f2e8);border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px 4px rgba(0,0,0,.04)}
[data-theme="light"] .nsb-lcd::before{background:none}
[data-theme="light"] .nsb-title{color:#1a73e8;text-shadow:none}
[data-theme="light"] .nsb-hdr-count{color:#1a73e8}
[data-theme="light"] .nsb-lcd .lcd-total{color:#1a73e8;text-shadow:none}
[data-theme="light"] .nsb-lcd .lcd-total .lcd-unit{color:rgba(26,115,232,.5)}
[data-theme="light"] .nsb-lcd .lcd-sub{color:rgba(26,115,232,.5)}
[data-theme="light"] .nsb-lcd .lcd-cats span{color:rgba(26,115,232,.4)}
[data-theme="light"] .nsb-lcd .lcd-cats .cat-melding .cat-val{color:#1a73e8}
[data-theme="light"] .nsb-item{background:rgba(26,115,232,.04);border-color:rgba(26,115,232,.12)}
[data-theme="light"] .nsb-item.type-melding{border-left-color:#1a73e8}
[data-theme="light"] .nsb-item-title{color:#1a73e8}
[data-theme="light"] .nsb-item-desc{color:rgba(30,30,30,.55)}
[data-theme="light"] .nsb-item-phase{color:rgba(26,115,232,.4)}
[data-theme="light"] .nsb-empty{color:rgba(26,115,232,.5)}
[data-theme="light"] .nsb-src{color:#999;border-top-color:rgba(0,0,0,.08)}
[data-theme="light"] .nsb-src a:hover{color:#1a73e8}
/* Light: weather/bodem legends */
[data-theme="light"] #weather-legend{background:rgba(255,255,255,.95)}
[data-theme="light"] #bodem-legend{background:rgba(255,255,255,.95)}
[data-theme="light"] .bl-swatch{border-color:rgba(0,0,0,.15)}
/* Light: layer count badges */
[data-theme="light"] .layer-count{background:rgba(26,115,232,.08)}
/* Light: layer sub-items + borders */
[data-theme="light"] .layer-item{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .layer-sub{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .layer-sub:hover{background:rgba(26,115,232,.04)}
[data-theme="light"] .marifoon-layer-item{border-top-color:rgba(0,0,0,.08)}
[data-theme="light"] .marifoon-layer-item:hover{background:rgba(26,115,232,.04)}
/* Light: radar sweep (blue in light) */
[data-theme="light"] #radar-sweep .sweep-arm::before{background:linear-gradient(90deg,rgba(26,115,232,.2),transparent)}
[data-theme="light"] #radar-sweep .sweep-trail::before{background:conic-gradient(from -15deg,transparent,rgba(26,115,232,.06) 5deg,rgba(26,115,232,.03) 10deg,transparent 15deg)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--c-bg);color:var(--c-text);font-family:var(--font-mono)}

/* ── Scanlines ─────────────────────────────────────── */
#scanlines{position:fixed;inset:0;z-index:9999;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0px,rgba(0,0,0,.04) 1px,transparent 1px,transparent 3px)}
[data-theme="light"] #scanlines{display:none}

/* ── Theme toggle ─────────────────────────────────── */
#theme-toggle{background:none;border:1px solid var(--c-border);border-radius:6px;color:var(--c-text);cursor:pointer;
    font-size:16px;padding:4px 8px;line-height:1;transition:background .2s,color .2s}
#theme-toggle:hover{background:var(--c-border)}

/* ── Top bar ───────────────────────────────────────── */
#topbar{position:fixed;top:0;left:0;right:0;height:48px;z-index:1001;
    background:var(--c-panel);border-bottom:1px solid var(--c-border);
    display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.logo{font-family:var(--font-display);font-size:16px;font-weight:900;color:var(--c-primary);letter-spacing:4px;
    text-shadow:0 0 12px rgba(0,255,65,.4);display:flex;align-items:center;gap:8px}
.logo img{width:28px;height:28px;border-radius:6px}
.clock{font-family:var(--font-display);font-size:14px;color:var(--c-secondary);letter-spacing:2px;
    position:absolute;left:50%;transform:translateX(-50%)}
.status{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--c-text-dim)}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}
.status-dot.online{background:var(--c-primary);box-shadow:0 0 6px var(--c-primary)}
.status-dot.loading{background:var(--c-warning);box-shadow:0 0 6px var(--c-warning);animation:pulse 1s infinite}

/* ── Rain overlay sharpening ───────────────────── */
.rain-overlay{image-rendering:auto;filter:contrast(1.3) saturate(1.2)}

/* ── Loading indicator (below search bar) ───────── */
#loading-bar{position:absolute;top:100%;left:0;right:0;z-index:1001;
    display:none;align-items:center;justify-content:center;gap:6px;
    padding:3px 10px;font-family:var(--font-mono);font-size:10px;color:var(--c-primary);letter-spacing:1px;opacity:.9;
    background:rgba(10,15,10,.85);border:1px solid var(--c-border);border-top:none;border-radius:0 0 6px 6px;backdrop-filter:blur(10px)}
#loading-bar.active{display:flex}
.radar-spinner{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,255,65,.25);position:relative;overflow:hidden}
.radar-spinner::before{content:'';position:absolute;top:50%;left:50%;width:50%;height:1.5px;background:var(--c-primary);transform-origin:0 0;animation:radarSpin 1.2s linear infinite;box-shadow:0 0 4px var(--c-primary)}
.radar-spinner::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(0,255,65,.15) 30deg,transparent 60deg);animation:radarSpin 1.2s linear infinite}
@keyframes radarSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#loading-label{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ── Map ───────────────────────────────────────────── */
#map{position:fixed;top:48px;left:0;right:0;bottom:98px}

/* ── Layer Panel ───────────────────────────────────── */
#layer-panel{position:fixed;top:58px;left:10px;width:260px;z-index:1001;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:8px;
    backdrop-filter:blur(14px);overflow:hidden;
    max-height:calc(100vh - 164px);display:flex;flex-direction:column}
.panel-header{padding:10px 14px;border-bottom:1px solid var(--c-border);
    font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:3px;color:var(--c-secondary);text-transform:uppercase;
    background:rgba(0,0,0,.15)}
[data-theme="light"] .panel-header{background:rgba(0,0,0,.04)}
.layer-item{display:flex;align-items:center;padding:8px 14px;border-bottom:1px solid rgba(0,255,65,.06);cursor:pointer;transition:background .15s}
.layer-item:hover{background:rgba(0,255,65,.04)}
.layer-item:last-child{border-bottom:none}
.layer-info{display:flex;align-items:center;gap:10px;flex:1}
.layer-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.layer-name{font-size:12px;color:var(--c-text)}
.layer-count{font-size:9px;color:var(--c-text-dim);background:rgba(0,255,65,.07);padding:2px 5px;border-radius:3px;margin-right:8px;min-width:18px;text-align:center;display:none}
.layer-count.visible{display:inline-block}
.layer-sub-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.layer-sub{display:flex;align-items:center;justify-content:flex-end;padding:2px 14px 4px 44px;border-bottom:1px solid rgba(0,255,65,.06);cursor:pointer;transition:background .15s;gap:8px}
.layer-sub:hover{background:rgba(0,255,65,.04)}
.layer-sub-label{font-size:9px;color:var(--c-text-dim);letter-spacing:.5px}
.layer-drop-arrow{font-size:7px;color:var(--c-text-dim);transition:transform .3s ease;margin-left:auto;margin-right:2px}
.layer-drop-arrow.open{transform:rotate(90deg)}
.toggle{position:relative;width:32px;height:16px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{position:absolute;inset:0;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);transition:all .25s}
.toggle .slider::before{content:'';position:absolute;width:10px;height:10px;left:2px;bottom:2px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .25s}
.toggle input:checked+.slider{background:rgba(0,255,65,.15);border-color:var(--c-primary)}
.toggle input:checked+.slider::before{transform:translateX(16px);background:var(--c-primary);box-shadow:0 0 4px var(--c-primary)}
[data-theme="light"] .toggle .slider{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.2)}
[data-theme="light"] .toggle .slider::before{background:rgba(0,0,0,.3)}
[data-theme="light"] .toggle input:checked+.slider{background:rgba(26,115,232,.15);border-color:var(--c-primary)}
[data-theme="light"] .toggle input:checked+.slider::before{background:var(--c-primary)}

/* ── Detail Panel ──────────────────────────────────── */
#detail-panel{position:fixed;top:58px;right:10px;width:320px;z-index:1001;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:8px;
    backdrop-filter:blur(14px);max-height:calc(100vh - 100px);overflow-y:auto;display:none}
#detail-panel.visible{display:block}
.detail-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--c-border);font-family:var(--font-display);font-size:11px;letter-spacing:2px}
.detail-header-btns{display:flex;align-items:center;gap:8px}
.detail-locate{cursor:pointer;color:var(--c-primary);font-size:10px;background:rgba(0,255,65,.08);border:1px solid rgba(0,255,65,.2);border-radius:4px;
    font-family:var(--font-display);letter-spacing:1px;padding:3px 8px;transition:all .2s;display:none}
.detail-locate:hover{background:rgba(0,255,65,.18);border-color:var(--c-primary)}
.detail-locate.visible{display:inline-block}
.detail-follow{cursor:pointer;color:#00d4ff;font-size:10px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:4px;
    font-family:var(--font-display);letter-spacing:1px;padding:3px 8px;transition:all .2s;display:none;white-space:nowrap}
.detail-follow:hover{background:rgba(0,212,255,.18);border-color:#00d4ff}
.detail-follow.visible{display:inline-block}
.detail-follow.active{background:rgba(0,212,255,.25);border-color:#00d4ff;color:#fff}
.detail-footer{padding:8px 14px;border-top:1px solid var(--c-border);display:none;flex-direction:row;align-items:center;gap:6px}
.detail-footer:has(.detail-locate.visible,.detail-follow.visible){display:flex}
.detail-close{cursor:pointer;color:var(--c-danger);font-size:16px;background:none;border:none;font-family:inherit}
#loc-layer-item.active{background:rgba(0,212,255,.08)}
#loc-layer-item.active span:first-of-type{color:#00d4ff}
.user-loc-dot{width:14px;height:14px;border-radius:50%;background:#4285f4;border:2.5px solid #fff;
    box-shadow:0 0 8px rgba(66,133,244,.6),0 0 20px rgba(66,133,244,.3);animation:userLocPulse 2s infinite}
@keyframes userLocPulse{0%,100%{box-shadow:0 0 8px rgba(66,133,244,.6),0 0 20px rgba(66,133,244,.3)}50%{box-shadow:0 0 14px rgba(66,133,244,.8),0 0 30px rgba(66,133,244,.5)}}
@keyframes locatePulse{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.locate-pulse{position:absolute;width:80px;height:80px;border-radius:50%;border:2px solid var(--c-primary);pointer-events:none;z-index:9999}
@keyframes followPulse{0%{transform:scale(.7);opacity:.8}50%{transform:scale(1.15);opacity:.25}100%{transform:scale(.7);opacity:.8}}
.follow-ring{position:relative;width:44px;height:44px}
.follow-ring-inner{position:absolute;inset:0;border-radius:50%;border:2.5px solid #00d4ff;opacity:.7;animation:followPulse 1.6s ease-in-out infinite}
.follow-ring-outer{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #00d4ff;opacity:.35;animation:followPulse 1.6s .4s ease-in-out infinite}
/* ── Time Slider / Replay ──────────────────────────── */
#time-slider-bar{position:fixed;bottom:148px;left:50%;transform:translateX(-50%);z-index:1002;
    display:none;align-items:center;gap:8px;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:8px;padding:6px 14px;
    font-family:var(--font-mono);font-size:10px;color:var(--c-text);backdrop-filter:blur(6px);white-space:nowrap}
#time-slider-bar.visible{display:flex}
#time-slider-bar .ts-btn{background:transparent;border:1px solid var(--c-border);border-radius:4px;
    color:var(--c-primary);font-family:var(--font-mono);font-size:10px;font-weight:700;
    cursor:pointer;padding:3px 8px;transition:background .15s}
#time-slider-bar .ts-btn:hover{background:rgba(0,255,65,.1)}
#time-slider-bar .ts-btn.active{background:rgba(0,255,65,.15);border-color:var(--c-primary)}
.ts-live-btn{border-color:#ff3344!important;color:#ff3344!important;font-weight:700!important;animation:liveDotPulse 1.2s infinite}
.ts-live-btn:hover{background:rgba(255,51,68,.12)!important}
#time-range{width:220px;height:18px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
#time-range::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--c-border) 0%,var(--c-primary) 100%);border-radius:2px}
#time-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--c-primary);
    border-radius:50%;box-shadow:0 0 8px var(--c-primary);margin-top:-5.5px}
#time-range::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--c-border),var(--c-primary));border-radius:2px;border:none}
#time-range::-moz-range-thumb{width:14px;height:14px;background:var(--c-primary);border-radius:50%;box-shadow:0 0 8px var(--c-primary);border:none}
#time-label{min-width:62px;text-align:center;color:var(--c-secondary);font-weight:700;font-size:11px}
#time-live-dot{width:8px;height:8px;border-radius:50%;background:#ff3344;box-shadow:0 0 6px #ff3344;animation:liveDotPulse 1.2s infinite;display:inline-block;vertical-align:middle;margin-right:2px}
@keyframes liveDotPulse{0%,100%{opacity:1}50%{opacity:.3}}
.detail-body{padding:10px 14px}
.detail-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(0,255,65,.05);font-size:11px}
.detail-label{color:var(--c-text-dim)}
.detail-value{color:var(--c-secondary);font-weight:bold}
.detail-photo{width:100%;border-radius:4px;border:1px solid var(--c-border);display:block;margin-top:8px;cursor:zoom-in}
.popup-photo{width:100%;max-width:230px;border-radius:4px;border:1px solid var(--c-border);cursor:zoom-in}
#photo-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;cursor:zoom-out;backdrop-filter:blur(6px)}
#photo-lightbox.visible{display:flex}
#photo-lightbox img{max-width:92vw;max-height:90vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);object-fit:contain}
#photo-lightbox .lb-close{position:absolute;top:16px;right:20px;font-size:28px;color:#fff;cursor:pointer;opacity:.7;transition:opacity .2s;line-height:1}
#photo-lightbox .lb-close:hover{opacity:1}

/* ── P2000 ticker bar ───────────────────────────────── */
#p2000-bar{position:fixed;left:0;right:0;bottom:32px;height:34px;z-index:1002;
    background:rgba(10,15,10,.85);border-top:1px solid rgba(255,51,68,.12);
    display:flex;align-items:center;overflow:hidden}
.p2000-label{font-family:var(--font-display);font-size:10px;letter-spacing:1px;color:rgba(255,51,68,.5);padding:0 12px;
    border-right:1px solid rgba(255,51,68,.1);white-space:nowrap}
.p2000-scroll{flex:1;overflow:hidden;white-space:nowrap;
    -webkit-mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
#p2000-ticker-content{display:inline-block;padding-left:100%;font-size:15px;color:rgba(255,255,255,.55);
    animation:p2kScroll var(--p2k-dur,120s) linear infinite}
@keyframes p2kScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ── News ticker bar ────────────────────────────────── */
#news-bar{position:fixed;left:0;right:0;bottom:66px;height:32px;z-index:1002;
    background:rgba(10,15,10,.85);border-top:1px solid rgba(0,212,255,.12);
    display:flex;align-items:center;overflow:hidden}
.news-label{font-family:var(--font-display);font-size:10px;letter-spacing:1px;color:rgba(0,212,255,.5);padding:0 12px;
    border-right:1px solid rgba(0,212,255,.1);white-space:nowrap}
.news-scroll{flex:1;overflow:hidden;white-space:nowrap;
    -webkit-mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
#news-ticker-content{display:inline-block;padding-left:100%;font-size:15px;color:rgba(255,255,255,.55);
    animation:newsScroll var(--news-dur,90s) linear infinite}
@keyframes newsScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ── Status Bar (bottom) ───────────────────────────── */
#statusbar{position:fixed;bottom:0;left:0;right:0;height:32px;z-index:1001;
    background:var(--c-panel);border-top:1px solid var(--c-border);
    display:flex;align-items:center;padding:0 14px;gap:14px;font-size:10px}
.stats-bar{display:flex;gap:14px;flex-shrink:0;color:var(--c-text-dim);margin-left:auto}
.stats-bar span span{color:var(--c-secondary)}

/* ── Bodem Legend ──────────────────────────────────── */
#bodem-legend{position:fixed;top:58px;left:280px;z-index:1001;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:8px;padding:10px 12px;
    font-size:9px;display:none;width:170px;backdrop-filter:blur(14px)}
#bodem-legend.visible{display:block}
.bl-title{font-family:var(--font-display);font-size:8px;letter-spacing:2px;color:var(--c-text-dim);margin-bottom:8px;text-transform:uppercase}
.bl-row{display:flex;align-items:center;gap:8px;margin:3px 0}
.bl-swatch{width:14px;height:10px;border-radius:2px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.bl-label{color:var(--c-text);font-size:9px}
.bl-src{font-size:7px;color:var(--c-text-dim);margin-top:6px;padding-top:4px;border-top:1px solid var(--c-border)}

/* ── Weather Legend ────────────────────────────────── */
#weather-legend{position:fixed;bottom:108px;right:10px;z-index:1001;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:6px;padding:8px 10px;
    font-size:9px;display:none;width:160px}
#weather-legend.visible{display:block}

/* ── Compass ───────────────────────────────────────── */
#compass{position:fixed;bottom:108px;right:10px;z-index:1001;width:70px;height:70px;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:50%;padding:6px;
    display:flex;align-items:center;justify-content:center;transition:bottom .3s ease}
.wl-title{font-family:var(--font-display);font-size:8px;letter-spacing:2px;color:var(--c-text-dim);margin-bottom:6px;text-transform:uppercase}
.wl-bar{height:10px;border-radius:3px;background:linear-gradient(90deg,#4488ff,#00bbff,#00ff88,#ffcc00,#ff4400);margin-bottom:4px}
.wl-labels{display:flex;justify-content:space-between;color:var(--c-text-dim);font-size:8px}

/* ── Corner decorations ────────────────────────────── */
.corner{position:fixed;width:30px;height:30px;z-index:1002;pointer-events:none}
.corner-tl{top:48px;left:0;border-top:1px solid var(--c-primary);border-left:1px solid var(--c-primary);opacity:.2}
.corner-tr{top:48px;right:0;border-top:1px solid var(--c-primary);border-right:1px solid var(--c-primary);opacity:.2}
.corner-bl{bottom:98px;left:0;border-bottom:1px solid var(--c-primary);border-left:1px solid var(--c-primary);opacity:.2}
.corner-br{bottom:98px;right:0;border-bottom:1px solid var(--c-primary);border-right:1px solid var(--c-primary);opacity:.2}

/* ── Zoom Slider ───────────────────────────────────── */
#zoom-slider{position:fixed;bottom:108px;left:50%;transform:translateX(-50%);z-index:1001;
    display:flex;flex-direction:row;align-items:center;gap:4px;
    background:var(--c-panel);border:1px solid var(--c-border);border-radius:6px;padding:5px 8px}
.zoom-btn{width:26px;height:26px;background:transparent;border:1px solid var(--c-border);border-radius:4px;
    color:var(--c-primary);font-family:var(--font-mono);font-size:16px;font-weight:700;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .15s;line-height:1}
.zoom-btn:hover{background:rgba(0,255,65,.08)}
#zoom-range{width:140px;height:20px;
    -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
#zoom-range::-webkit-slider-runnable-track{height:3px;background:var(--c-border);border-radius:2px}
#zoom-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--c-primary);
    border-radius:50%;box-shadow:0 0 6px var(--c-primary);margin-top:-4.5px}
#zoom-range::-moz-range-track{height:3px;background:var(--c-border);border-radius:2px;border:none}
#zoom-range::-moz-range-thumb{width:12px;height:12px;background:var(--c-primary);
    border-radius:50%;box-shadow:0 0 6px var(--c-primary);border:none}

/* ── Temperature labels ─────────────────────────────── */
.temp-label{font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;text-align:center;pointer-events:none;white-space:nowrap}
@media(max-width:768px){.temp-label{font-size:10px}}
@media(max-width:480px){.temp-label{font-size:9px}}

/* ── Layer Panel Collapse ───────────────────────────── */
#layer-body{overflow-y:auto;transition:max-height .45s ease;position:relative;flex:1}
#layer-sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .15s}
#layer-sweep.active{opacity:1}
#layer-sweep-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c-primary),transparent);box-shadow:0 0 8px var(--c-primary)}
@keyframes sweepDown{0%{top:0}100%{top:100%}}
@keyframes sweepUp{0%{top:100%}100%{top:0}}
.collapse-arrow{display:inline-block;transition:transform .3s ease;font-size:8px}
.collapse-arrow.collapsed{transform:rotate(-90deg)}

/* ── Meer Lagen sub-section ─────────────────────────── */
.meer-header{display:flex;align-items:center;gap:8px;padding:8px 14px;
    border-bottom:1px solid rgba(0,255,65,.06);cursor:pointer;
    font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--c-secondary);
    text-transform:uppercase;transition:background .15s;background:rgba(0,0,0,.1)}
.meer-header:hover{background:rgba(0,0,0,.18)}
[data-theme="light"] .meer-header{background:rgba(0,0,0,.03);border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .meer-header:hover{background:rgba(0,0,0,.06)}
.meer-header .meer-arrow{display:inline-block;transition:transform .3s ease;font-size:8px}
.meer-header .meer-arrow.open{transform:rotate(90deg)}
#meer-body{max-height:0;overflow:hidden;transition:max-height .4s ease}

/* ── Kaarten dropdown in layer panel ────────────────── */
#kaarten-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.kaarten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px}
.kaarten-opt{cursor:pointer;border:2px solid var(--c-border);border-radius:4px;overflow:hidden;transition:all .2s;position:relative}
.kaarten-opt:hover{border-color:var(--c-primary);transform:scale(1.03)}
.kaarten-opt.active{border-color:var(--c-primary);box-shadow:0 0 8px rgba(0,255,65,.3)}
.kaarten-opt img{width:100%;height:48px;object-fit:cover;display:block}
.kaarten-opt-label{font-family:var(--font-mono);font-size:7px;color:var(--c-text);text-align:center;padding:3px 2px;background:rgba(0,0,0,.5);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:768px){.kaarten-grid{grid-template-columns:repeat(3,1fr);gap:4px;padding:6px 8px}
.kaarten-opt img{height:40px}.kaarten-opt-label{font-size:6px}}

/* ── Leaflet overrides ─────────────────────────────── */
.leaflet-control-attribution{display:none!important}
.leaflet-popup-content-wrapper{background:var(--c-panel)!important;color:var(--c-text)!important;border:1px solid var(--c-border)!important;
    border-radius:6px!important;box-shadow:0 0 14px rgba(0,0,0,.4)!important;font-family:var(--font-mono)!important;font-size:11px!important}
.leaflet-popup-tip{background:var(--c-panel)!important;border:1px solid var(--c-border)!important}
.leaflet-popup-content{margin:8px 12px!important}
.popup-title{font-family:var(--font-display);font-size:11px;letter-spacing:1px;margin-bottom:6px;color:var(--c-primary)}
.popup-row{display:flex;justify-content:space-between;padding:2px 0;font-size:10px}
.popup-val{color:var(--c-secondary)}

/* ── Radar Sweep Overlay ────────────────────────────── */
#radar-sweep{position:fixed;pointer-events:none;z-index:800;border-radius:50%}
#radar-sweep .sweep-arm{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:0 50%;animation:radarSweep 6s linear infinite}
#radar-sweep .sweep-arm::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(0,255,65,.2),transparent);border-radius:0 2px 2px 0}
#radar-sweep .sweep-trail{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:0 50%;animation:radarSweep 6s linear infinite}
#radar-sweep .sweep-trail::before{content:'';position:absolute;inset:0;width:100%;height:100%;background:conic-gradient(from -15deg,transparent,rgba(0,255,65,.06) 5deg,rgba(0,255,65,.03) 10deg,transparent 15deg);width:100%;height:600px;top:-300px;border-radius:0}
@keyframes radarSweep{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ── Aircraft sweep flash ──────────────────────────── */
.leaflet-marker-icon svg{transition:filter .6s ease-out}
.ac-sweep-flash svg{filter:drop-shadow(0 0 10px #00ff41) brightness(2)!important;transition:filter .15s ease-in!important}
.ship-sweep-flash svg{filter:drop-shadow(0 0 6px #00ff41) brightness(1.5)!important;transition:filter .12s ease-in!important}

/* ── Map Selector Modal ─────────────────────────────── */
#map-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
#map-modal.hidden{display:none}
.map-modal-box{background:var(--c-panel);border:1px solid var(--c-border);border-radius:10px;max-width:560px;width:92%;max-height:80vh;overflow-y:auto;padding:20px 22px;position:relative}
.map-modal-box h2{font-family:var(--font-display);font-size:13px;color:var(--c-primary);letter-spacing:3px;margin-bottom:14px;text-shadow:0 0 10px rgba(0,255,65,.3)}
.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.map-option{cursor:pointer;border:2px solid var(--c-border);border-radius:6px;overflow:hidden;transition:all .2s;position:relative}
.map-option:hover{border-color:var(--c-primary);transform:scale(1.03)}
.map-option.active{border-color:var(--c-primary);box-shadow:0 0 12px rgba(0,255,65,.3)}
.map-option img{width:100%;height:80px;object-fit:cover;display:block}
.map-option-label{font-family:var(--font-mono);font-size:9px;color:var(--c-text);text-align:center;padding:5px 4px;background:rgba(0,0,0,.5);letter-spacing:.5px}
.map-modal-close{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--c-border);border-radius:4px;color:var(--c-primary);font-family:var(--font-mono);font-size:12px;padding:4px 12px;cursor:pointer;letter-spacing:1px}
.map-modal-close:hover{background:rgba(0,255,65,.08)}
@media(max-width:768px){.map-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Info Modal ─────────────────────────────────────── */
#info-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
#info-modal.hidden{display:none}
.info-box{background:var(--c-panel);border:1px solid var(--c-border);border-radius:10px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto;padding:24px 28px;position:relative}
.info-box h2{font-family:var(--font-display);font-size:16px;color:var(--c-primary);letter-spacing:3px;margin-bottom:12px;text-shadow:0 0 10px rgba(0,255,65,.3)}
.info-box p,.info-box li{font-size:12px;line-height:1.7;color:rgba(255,255,255,.65);margin-bottom:8px}
.info-box ul{padding-left:16px;margin-bottom:10px}
.info-box .info-close{position:absolute;top:12px;right:14px;background:none;border:1px solid var(--c-border);border-radius:4px;color:var(--c-primary);font-family:var(--font-mono);font-size:12px;padding:4px 12px;cursor:pointer;letter-spacing:1px}
.info-box .info-close:hover{background:rgba(0,255,65,.08)}
.info-box .copy-line{font-size:10px;color:var(--c-text-dim);margin-top:14px;text-align:center;border-top:1px solid var(--c-border);padding-top:10px}

/* ── Ticker Detail Popup ────────────────────────────── */
#ticker-popup{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
#ticker-popup.hidden{display:none}
.ticker-popup-box{background:var(--c-panel);border:1px solid var(--c-border);border-radius:8px;max-width:440px;width:90%;padding:18px 22px;position:relative}
.ticker-popup-box .popup-title{margin-bottom:10px}
.ticker-popup-box .popup-row{padding:4px 0}
.ticker-popup-close{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--c-border);border-radius:4px;color:var(--c-primary);font-family:var(--font-mono);font-size:11px;padding:3px 10px;cursor:pointer}
.ticker-popup-close:hover{background:rgba(0,255,65,.08)}

/* ── Ticker item hover ─────────────────────────────── */
.ticker-item{cursor:pointer;transition:color .15s}
.ticker-item:hover{color:rgba(255,255,255,.8)!important}

/* ── Animations ────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes radarPulse{0%{transform:scale(.5);opacity:.5}100%{transform:scale(2.5);opacity:0}}

/* ── Webcam Modal ──────────────────────────────────── */
#webcam-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}
#webcam-modal.hidden{display:none}
.webcam-box{background:var(--c-panel);border:1px solid var(--c-border);border-radius:10px;max-width:640px;width:94%;max-height:85vh;overflow-y:auto;padding:16px 18px;position:relative}
.webcam-box .webcam-close{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--c-border);border-radius:4px;color:var(--c-primary);font-family:var(--font-mono);font-size:12px;padding:4px 12px;cursor:pointer;letter-spacing:1px;z-index:1}
.webcam-box .webcam-close:hover{background:rgba(0,255,65,.08)}
.webcam-box .webcam-fullscreen{position:absolute;top:10px;right:100px;background:none;border:1px solid var(--c-border);border-radius:4px;color:var(--c-primary);font-family:var(--font-mono);font-size:12px;padding:4px 8px;cursor:pointer;letter-spacing:1px;z-index:1;display:flex;align-items:center;gap:4px}
.webcam-box .webcam-fullscreen:hover{background:rgba(0,255,65,.08)}
.webcam-box .webcam-title{font-family:var(--font-display);font-size:13px;color:var(--c-primary);letter-spacing:2px;margin-bottom:10px;text-shadow:0 0 10px rgba(0,255,65,.3);padding-right:70px}
.webcam-box img{width:100%;border-radius:6px;margin-bottom:8px;background:#111}
.webcam-box iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:6px;margin-bottom:8px;background:#111}
.webcam-box .webcam-src{font-size:9px;color:var(--c-text-dim);text-align:right;opacity:.5}
.webcam-box .webcam-src a{color:var(--c-text-dim);text-decoration:none}
.webcam-box .webcam-live-badge{display:inline-block;background:#e53935;color:#fff;font-size:8px;font-family:var(--font-mono);padding:2px 6px;border-radius:3px;letter-spacing:1px;margin-left:8px;vertical-align:middle;animation:pulse 2s infinite}

/* ── Marifoon Radio Widget ──────────────────────────── */
#marifoon-radio{position:fixed;z-index:9999;top:80px;right:20px;width:300px;background:linear-gradient(180deg,#252525 0%,#1a1a1a 40%,#141414 100%);border:2px solid #3a3a3a;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset;font-family:var(--font-mono);overflow:visible}
#marifoon-radio.hidden{display:none}
#marifoon-radio.minimized .radio-body{display:none}
#marifoon-radio.minimized{width:220px}

.radio-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(180deg,#2e2e2e,#222);cursor:grab;border-bottom:1px solid #3a3a3a;user-select:none}
#marifoon-radio:not(.minimized) .radio-header{border-radius:12px 12px 0 0}
#marifoon-radio.minimized .radio-header{border-radius:12px}
.radio-header:active{cursor:grabbing}
.radio-title{font-family:var(--font-display);font-size:11px;color:var(--c-primary);letter-spacing:2px;text-shadow:0 0 8px rgba(0,255,65,.4)}
.radio-hdr-ch{font-family:var(--font-mono);font-size:10px;color:var(--c-primary);opacity:.7;margin-left:8px;display:none}
#marifoon-radio.minimized .radio-hdr-ch{display:inline}
.radio-btns{display:flex;gap:2px}
.radio-btns button{background:none;border:none;color:#666;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1}
.radio-btns button:hover{color:var(--c-primary);background:rgba(0,255,65,.1)}
.radio-body{padding:14px}
.radio-scanner-switch{display:flex;gap:4px;margin-bottom:12px;background:#111;border-radius:6px;padding:3px;border:1px solid #2a2a2a}
.scanner-btn{flex:1;background:none;border:none;color:#555;font-family:var(--font-display);font-size:9px;letter-spacing:1.5px;padding:6px 4px;cursor:pointer;border-radius:4px;transition:all .2s}
.scanner-btn:hover{color:#888}
.scanner-btn.active{background:rgba(0,255,65,.1);color:var(--c-primary);box-shadow:0 0 8px rgba(0,255,65,.15);text-shadow:0 0 6px rgba(0,255,65,.3)}
.radio-lcd{background:linear-gradient(160deg,#0a1f0a,#081808);border:2px solid #1a1a1a;border-radius:8px;padding:16px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.03)}
.radio-lcd::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,65,.03) 0px,rgba(0,255,65,.03) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:1}
.radio-lcd .lcd-ch{font-family:var(--font-display);font-size:32px;color:var(--c-primary);letter-spacing:4px;text-shadow:0 0 15px rgba(0,255,65,.5),0 0 30px rgba(0,255,65,.2);text-align:center;line-height:1}
.radio-lcd .lcd-desc{font-size:9px;color:rgba(0,255,65,.5);text-align:center;margin-top:6px;letter-spacing:2px}
.radio-lcd .lcd-signal{display:flex;justify-content:center;gap:2px;margin-top:10px;height:20px;align-items:flex-end}
.radio-lcd .lcd-signal .bar{width:4px;height:3px;background:rgba(0,255,65,.15);border-radius:1px;transition:height .4s ease,background .4s ease}
.radio-lcd.scanning .lcd-ch{animation:scanFlicker .3s infinite}
@keyframes scanFlicker{0%,100%{opacity:1;text-shadow:0 0 15px rgba(0,255,65,.5)}50%{opacity:.2;text-shadow:none}}
.radio-ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:14px}
.radio-ch-btn{background:linear-gradient(180deg,#1a1a1a,#111);border:1px solid #333;border-radius:6px;padding:7px 4px;text-align:center;cursor:default;transition:all .2s;box-shadow:0 2px 4px rgba(0,0,0,.3);pointer-events:none}
.radio-ch-btn .ch-n{font-family:var(--font-display);font-size:12px;color:var(--c-primary);letter-spacing:1px}
.radio-ch-btn .ch-d{font-size:7px;color:#555;margin-top:2px;line-height:1.2}
.radio-ctrl{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.radio-play{background:linear-gradient(180deg,#1c1c1c,#111);border:2px solid var(--c-primary);border-radius:50%;width:42px;height:42px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(0,255,65,.1)}
.radio-play:hover{background:rgba(0,255,65,.08);box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 12px rgba(0,255,65,.2)}
.radio-play:active{transform:scale(.95)}
.radio-play.playing{background:rgba(0,255,65,.12);box-shadow:0 0 16px rgba(0,255,65,.3),0 0 0 1px rgba(0,255,65,.2);animation:playGlow 2s ease-in-out infinite}
@keyframes playGlow{0%,100%{box-shadow:0 0 12px rgba(0,255,65,.2),0 0 0 1px rgba(0,255,65,.2)}50%{box-shadow:0 0 20px rgba(0,255,65,.35),0 0 0 1px rgba(0,255,65,.3)}}
.radio-play svg{width:16px;height:16px;fill:var(--c-primary)}
.radio-vol{flex:1;display:flex;align-items:center;gap:6px}
.radio-vol-icon{width:14px;height:14px;color:#555;flex-shrink:0}
.radio-vol input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#2a2a2a;border-radius:2px;outline:none}
.radio-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--c-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 6px rgba(0,255,65,.4)}
.radio-vol input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--c-primary);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 6px rgba(0,255,65,.4)}
.radio-src{font-size:7px;color:#444;text-align:center;letter-spacing:1px;padding-top:4px;border-top:1px solid #222}
.radio-src a{color:#444;text-decoration:none}
.radio-src a:hover{color:var(--c-primary)}
.marifoon-layer-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid rgba(0,255,65,.08);cursor:pointer;transition:background .2s}
.marifoon-layer-item:hover{background:rgba(0,255,65,.04)}
.marifoon-layer-item svg{color:var(--c-primary);flex-shrink:0}
.marifoon-layer-item span{font-family:var(--font-mono);font-size:10px;color:var(--c-text);letter-spacing:1px}
.marifoon-layer-item .mf-layer-status{margin-left:auto;font-size:9px;color:var(--c-text-dim)}
@media(max-width:768px){ #marifoon-radio{width:280px;right:10px;top:70px} #marifoon-radio.minimized{width:200px}}

/* ── Source Status Modal ───────────────────────────── */
#source-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
#source-modal.hidden{display:none}
.source-box{background:var(--c-panel);border:1px solid var(--c-border);border-radius:10px;max-width:480px;width:92%;max-height:80vh;overflow-y:auto;padding:20px 22px;position:relative}
.source-box h2{font-family:var(--font-display);font-size:13px;color:var(--c-primary);letter-spacing:3px;margin-bottom:14px;text-shadow:0 0 10px rgba(0,255,65,.3)}
.source-close{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--c-border);border-radius:4px;color:var(--c-primary);font-family:var(--font-mono);font-size:12px;padding:4px 12px;cursor:pointer;letter-spacing:1px}
.source-close:hover{background:rgba(0,255,65,.08)}
.source-row{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,255,65,.06);font-size:11px;gap:8px}
.source-row:last-child{border-bottom:none}
.source-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.source-dot.ok{background:var(--c-primary);box-shadow:0 0 6px var(--c-primary)}
.source-dot.err{background:var(--c-danger);box-shadow:0 0 6px var(--c-danger)}
.source-dot.wait{background:var(--c-warning);box-shadow:0 0 6px var(--c-warning);animation:pulse 1s infinite}
.source-dot.off{background:#555;box-shadow:none}
.source-name{flex:1;color:var(--c-text);font-weight:bold}
.source-detail{font-size:10px;color:var(--c-text-dim);text-align:right;max-width:220px}
.source-error{font-size:9px;color:var(--c-danger);margin-top:2px;word-break:break-word;padding-left:16px}
.source-sub{font-size:9px;color:var(--c-text-dim);padding-left:16px;margin-top:1px}

/* ── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:2px}

/* ── Search Bar ────────────────────────────────────── */
#search-wrap{position:fixed;top:56px;left:50%;transform:translateX(-50%);width:300px;z-index:1001}
#search-input{width:100%;background:rgba(10,15,10,.88);border:1px solid var(--c-border);border-radius:6px;
    padding:8px 12px 8px 32px;font-family:var(--font-mono);font-size:12px;color:var(--c-text);
    outline:none;letter-spacing:.5px;backdrop-filter:blur(10px)}
#search-input::placeholder{color:var(--c-text-dim);opacity:.6}
#search-input:focus{border-color:var(--c-primary);box-shadow:0 0 10px rgba(0,255,65,.2)}
#search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--c-text-dim);font-size:13px;pointer-events:none}
#search-results{position:absolute;top:100%;left:0;right:0;background:rgba(10,15,10,.95);border:1px solid var(--c-border);border-top:none;
    border-radius:0 0 6px 6px;max-height:240px;overflow-y:auto;display:none;z-index:2000;backdrop-filter:blur(10px)}
#search-results.visible{display:block}
#search-results.visible~#loading-bar.active{border-top:none}
#search-wrap:has(#loading-bar.active) #search-results.visible{border-radius:0;border-bottom:none}
.search-item{padding:7px 12px;font-size:11px;cursor:pointer;border-bottom:1px solid rgba(0,255,65,.05);display:flex;align-items:center;gap:8px}
.search-item:hover,.search-item.active{background:rgba(0,255,65,.08)}
.search-item-icon{flex-shrink:0;font-size:12px}
.search-item-name{color:var(--c-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-item-sub{color:var(--c-text-dim);font-size:9px;flex-shrink:0}

/* ── Bliksem flash ─────────────────────────────────── */
@keyframes bliksemFlash{0%{opacity:1;box-shadow:0 0 8px 4px rgba(255,255,100,.9)}50%{opacity:.6;box-shadow:0 0 12px 6px rgba(255,255,100,.4)}100%{opacity:0;box-shadow:none}}
.bliksem-flash{animation:bliksemFlash 3s ease-out forwards}

/* ── Search highlight flash ────────────────────────── */
@keyframes searchFlash{0%{transform:scale(1)}20%{transform:scale(3)}60%{transform:scale(2.5)}100%{transform:scale(1)}}
.search-flash{animation:searchFlash .8s ease-out;z-index:9000!important}

/* ── MarkerCluster (dark theme) ─────────────────────── */
.marker-cluster{background:rgba(0,0,0,.6)!important;border:2px solid rgba(0,255,65,.4)!important;border-radius:50%!important}
.marker-cluster div{background:rgba(0,255,65,.15)!important;color:#00ff41!important;font-family:var(--font-mono)!important;font-size:11px!important;font-weight:700!important;border-radius:50%!important;text-align:center!important;line-height:30px!important}
.marker-cluster-small{background:rgba(0,0,0,.55)!important;border-color:rgba(0,255,65,.3)!important}
.marker-cluster-small div{background:rgba(0,255,65,.12)!important}
.marker-cluster-medium{background:rgba(0,0,0,.6)!important;border-color:rgba(0,212,255,.4)!important}
.marker-cluster-medium div{background:rgba(0,212,255,.15)!important;color:#00d4ff!important}
.marker-cluster-large{background:rgba(0,0,0,.65)!important;border-color:rgba(231,76,60,.4)!important}
.marker-cluster-large div{background:rgba(231,76,60,.15)!important;color:#e74c3c!important}

/* ── Mobile ────────────────────────────────────────── */
@media(max-width:768px){
    .logo{font-size:13px;letter-spacing:2px}
    #topbar{padding:0 10px}
    .clock{position:static;transform:none;font-size:12px}
    .status{gap:6px;font-size:10px}
    .status span{font-size:0}
    .status .status-dot{font-size:initial;margin-right:0}
    /* Search bar: full width below topbar */
    #search-wrap{position:fixed;top:50px;left:0;right:0;width:100%;transform:none;padding:4px 6px;z-index:1002;background:rgba(10,15,10,.95);
        border-bottom:1px solid var(--c-border);backdrop-filter:blur(10px)}
    #search-input{width:100%;font-size:12px;padding:8px 12px 8px 32px;border-radius:6px}
    #search-icon{left:16px}
    #loading-bar{border-radius:0;border-left:none;border-right:none;position:fixed;top:88px;left:0;right:0;z-index:1001}
    #search-results{left:6px;right:6px}
    /* Layer panel: below search bar, full width */
    #layer-panel{position:fixed;top:88px;left:0;right:0;width:100%;border-radius:0;border-left:none;border-right:none;
        max-height:calc(100vh - 220px);transition:top .15s}
    #loading-bar.active~*,
    #search-wrap:has(#loading-bar.active)~#layer-panel{top:112px}
    /* Map adjusted for search bar */
    #map{top:88px}
    /* Detail panel full width */
    #detail-panel{width:100%;right:0;left:0;top:88px;border-radius:0}
    /* Compass: smaller, bottom-right */
    #compass{width:46px;height:46px;bottom:108px;right:6px;padding:3px}
    #compass svg{width:36px;height:36px}
    /* Zoom slider: bottom-left, compact */
    #zoom-slider{left:6px;transform:none;bottom:108px}
    #zoom-range{width:80px}

    /* Temperature legend: compact on mobile */
    #weather-legend{bottom:108px;right:6px;width:130px;font-size:8px;padding:6px 8px}
    /* Bodem legend: below header on mobile */
    #bodem-legend{left:auto;right:10px;top:96px;width:150px;font-size:8px;padding:6px 8px}
    /* Tickers + statusbar */
    .p2000-label,.news-label{font-size:9px;padding:0 8px}
    .stats-bar{gap:8px;font-size:9px}
    #statusbar{padding:0 8px}
    /* Time slider: compact on mobile */
    #time-slider-bar{width:calc(100% - 16px);left:8px;transform:none;bottom:148px;padding:5px 8px;gap:5px}
    #time-range{width:120px;flex:1}
    #time-label{font-size:9px;min-width:50px}
}

/* ── Cyber Threat animated attack lines ─────────────── */
@keyframes cyberDash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
@keyframes cyberPulse{0%,100%{r:4;opacity:.8}50%{r:8;opacity:1}}
@keyframes cyberGlow{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes cyberImpact{0%{r:3;opacity:1}100%{r:30;opacity:0}}
.cyber-attack-line{stroke:#ff3344;stroke-width:2;fill:none;stroke-dasharray:12 6;animation:cyberDash 1.5s linear infinite;filter:drop-shadow(0 0 4px #ff3344)}
.cyber-attack-line-glow{stroke:rgba(255,51,68,.3);stroke-width:6;fill:none;stroke-dasharray:12 6;animation:cyberDash 1.5s linear infinite}
.cyber-source-dot{fill:#ff3344;animation:cyberPulse 2s ease-in-out infinite}
.cyber-target-dot{fill:#00ff41;animation:cyberPulse 2s ease-in-out infinite .5s}
.cyber-impact-ring{fill:none;stroke:#ff3344;stroke-width:1.5;animation:cyberImpact 2s ease-out infinite}
.cyber-svg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:650}
.cyber-threat-badge{position:absolute;top:70px;right:12px;padding:6px 14px;border-radius:4px;font-family:var(--font-display);font-size:11px;letter-spacing:2px;z-index:700;pointer-events:none;text-transform:uppercase;border:1px solid}
.cyber-threat-badge.green{background:rgba(0,255,65,.1);color:#00ff41;border-color:rgba(0,255,65,.3)}
.cyber-threat-badge.yellow{background:rgba(255,224,102,.15);color:#ffe066;border-color:rgba(255,224,102,.3)}
.cyber-threat-badge.orange{background:rgba(255,152,0,.15);color:#ff9800;border-color:rgba(255,152,0,.3)}
.cyber-threat-badge.red{background:rgba(255,51,68,.15);color:#ff3344;border-color:rgba(255,51,68,.3)}

/* ── Energie Monitor Device ──────────────────────────── */
#energie-device{position:fixed;z-index:9998;top:80px;right:20px;width:320px;background:linear-gradient(180deg,#1e2318 0%,#161a12 40%,#111410 100%);border:2px solid #3a4030;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 0 1px rgba(200,255,60,.03) inset,0 0 40px rgba(100,180,0,.05);font-family:var(--font-mono);overflow:visible;display:none}
#energie-device.visible{display:block}
#energie-device.minimized .ener-body{display:none}
#energie-device.minimized{width:230px}

.ener-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(180deg,#282e20,#1e2318);cursor:grab;border-bottom:1px solid #3a4030;user-select:none}
#energie-device:not(.minimized) .ener-header{border-radius:12px 12px 0 0}
#energie-device.minimized .ener-header{border-radius:12px}
.ener-header:active{cursor:grabbing}
.ener-title{font-family:var(--font-display);font-size:11px;color:#ff9800;letter-spacing:2px;text-shadow:0 0 8px rgba(255,152,0,.4)}
.ener-hdr-mw{font-family:var(--font-mono);font-size:10px;color:#ff9800;opacity:.7;margin-left:8px;display:none}
#energie-device.minimized .ener-hdr-mw{display:inline}
.ener-btns{display:flex;gap:2px}
.ener-btns button{background:none;border:none;color:#666;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1}
.ener-btns button:hover{color:#ff9800;background:rgba(255,152,0,.1)}
.ener-body{padding:14px}
.ener-lcd{background:linear-gradient(160deg,#1a1408,#120e05);border:2px solid #2a2010;border-radius:8px;padding:14px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.03)}
.ener-lcd::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,152,0,.03) 0px,rgba(255,152,0,.03) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:1}
.ener-lcd .lcd-power{font-family:var(--font-display);font-size:28px;color:#ff9800;letter-spacing:3px;text-shadow:0 0 15px rgba(255,152,0,.5),0 0 30px rgba(255,152,0,.2);text-align:center;line-height:1}
.ener-lcd .lcd-power .lcd-unit{font-size:12px;color:rgba(255,152,0,.5);letter-spacing:1px;margin-left:4px}
.ener-lcd .lcd-period{font-size:9px;color:rgba(255,152,0,.5);text-align:center;margin-top:6px;letter-spacing:2px}
.ener-lcd .lcd-io{display:flex;justify-content:space-around;margin-top:10px;font-size:9px}
.ener-lcd .lcd-io span{color:rgba(255,152,0,.4)}
.ener-lcd .lcd-io .io-val{color:#ff9800;font-weight:bold}
.ener-lcd .lcd-io .io-imp .io-val{color:#66bb6a}
.ener-lcd .lcd-io .io-exp .io-val{color:#ff5252}
.ener-bars{margin-bottom:10px}
.ener-bar-row{display:flex;align-items:center;margin:5px 0;font-size:10px;gap:6px}
.ener-bar-label{width:70px;color:rgba(255,255,255,.5);text-align:right;flex-shrink:0;font-size:9px}
.ener-bar-wrap{flex:1;height:12px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.06)}
.ener-bar-fill{height:100%;border-radius:1px;transition:width .8s ease;box-shadow:0 0 6px currentColor}
.ener-bar-mw{width:54px;color:rgba(255,255,255,.6);font-weight:bold;text-align:right;flex-shrink:0;font-size:9px}
.ener-bar-pct{width:34px;color:#ff9800;font-weight:bold;text-align:right;flex-shrink:0;font-size:9px}
.ener-led-row{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.ener-led{width:6px;height:6px;border-radius:50%;box-shadow:0 0 4px currentColor;animation:enerLedPulse 2s ease-in-out infinite}
@keyframes enerLedPulse{0%,100%{opacity:1}50%{opacity:.4}}
.ener-src{font-size:7px;color:#444;text-align:center;letter-spacing:1px;padding-top:4px;border-top:1px solid rgba(255,152,0,.1)}
.ener-src a{color:#555;text-decoration:none}.ener-src a:hover{color:#ff9800}
@media(max-width:768px){ #energie-device{width:290px;right:10px;top:70px} #energie-device.minimized{width:210px}}

/* ── NS Disruptions Board ─────────────────────────────── */
#ns-board{position:fixed;z-index:9997;top:80px;right:20px;width:340px;background:linear-gradient(180deg,#1a1a10 0%,#12120c 40%,#0e0e08 100%);border:2px solid #3a3520;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 0 1px rgba(255,214,0,.03) inset,0 0 40px rgba(255,214,0,.04);font-family:var(--font-mono);overflow:visible;display:none}
#ns-board.visible{display:block}
#ns-board.minimized .nsb-body{display:none}
#ns-board.minimized{width:240px}
.nsb-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(180deg,#262210,#1a1a10);cursor:grab;border-bottom:1px solid #3a3520;user-select:none}
#ns-board:not(.minimized) .nsb-header{border-radius:12px 12px 0 0}
#ns-board.minimized .nsb-header{border-radius:12px}
.nsb-header:active{cursor:grabbing}
.nsb-title{font-family:var(--font-display);font-size:11px;color:#ffd600;letter-spacing:2px;text-shadow:0 0 8px rgba(255,214,0,.4)}
.nsb-hdr-count{font-family:var(--font-mono);font-size:10px;color:#ffd600;opacity:.7;margin-left:8px;display:none}
#ns-board.minimized .nsb-hdr-count{display:inline}
.nsb-btns{display:flex;gap:2px}
.nsb-btns button{background:none;border:none;color:#666;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1}
.nsb-btns button:hover{color:#ffd600;background:rgba(255,214,0,.1)}
.nsb-body{padding:14px;max-height:420px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3520 transparent}
.nsb-body::-webkit-scrollbar{width:4px}.nsb-body::-webkit-scrollbar-track{background:transparent}.nsb-body::-webkit-scrollbar-thumb{background:#3a3520;border-radius:2px}
.nsb-lcd{background:linear-gradient(160deg,#141008,#0e0a04);border:2px solid #2a2210;border-radius:8px;padding:12px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.03)}
.nsb-lcd::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,214,0,.03) 0px,rgba(255,214,0,.03) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:1}
.nsb-lcd .lcd-total{font-family:var(--font-display);font-size:26px;color:#ffd600;letter-spacing:3px;text-shadow:0 0 15px rgba(255,214,0,.5),0 0 30px rgba(255,214,0,.2);text-align:center;line-height:1}
.nsb-lcd .lcd-total .lcd-unit{font-size:11px;color:rgba(255,214,0,.5);letter-spacing:1px;margin-left:4px}
.nsb-lcd .lcd-sub{font-size:9px;color:rgba(255,214,0,.5);text-align:center;margin-top:6px;letter-spacing:2px}
.nsb-lcd .lcd-cats{display:flex;justify-content:space-around;margin-top:10px;font-size:9px}
.nsb-lcd .lcd-cats span{color:rgba(255,214,0,.4)}
.nsb-lcd .lcd-cats .cat-val{font-weight:bold}
.nsb-lcd .lcd-cats .cat-stor .cat-val{color:#ff5252}
.nsb-lcd .lcd-cats .cat-werk .cat-val{color:#ff9800}
.nsb-lcd .lcd-cats .cat-melding .cat-val{color:#ffd600}
.nsb-items{display:flex;flex-direction:column;gap:6px}
.nsb-item{background:rgba(255,214,0,.03);border:1px solid rgba(255,214,0,.08);border-radius:6px;padding:8px 10px}
.nsb-item.type-storing{border-left:3px solid #ff5252}
.nsb-item.type-werkzaamheid{border-left:3px solid #ff9800}
.nsb-item.type-melding{border-left:3px solid #ffd600}
.nsb-item-title{font-size:10px;color:#ffd600;font-weight:bold;letter-spacing:.5px;margin-bottom:3px;line-height:1.3}
.nsb-item-desc{font-size:9px;color:rgba(255,255,255,.45);line-height:1.4}
.nsb-item-phase{font-size:8px;color:rgba(255,214,0,.4);margin-top:3px;letter-spacing:1px}
.nsb-empty{font-size:10px;color:rgba(255,214,0,.5);text-align:center;padding:20px 0;letter-spacing:1px}
.nsb-src{font-size:7px;color:#444;text-align:center;letter-spacing:1px;padding-top:8px;border-top:1px solid rgba(255,214,0,.1);margin-top:10px}
.nsb-src a{color:#555;text-decoration:none}.nsb-src a:hover{color:#ffd600}
@keyframes nsbPulse{0%,100%{opacity:1}50%{opacity:.5}}
.nsb-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff5252;box-shadow:0 0 6px #ff5252;margin-right:6px;animation:nsbPulse 2s ease-in-out infinite;vertical-align:middle}
@media(max-width:768px){ #ns-board{width:300px;right:10px;top:70px} #ns-board.minimized{width:220px} }
html.tab-hidden *{animation-play-state:paused!important}