/* layout.css - header, main, sidebar, map, ticker, ad-strip */
#header { height:50px; background:var(--surface); border-bottom:1px solid var(--border2); display:flex; align-items:center; flex-shrink:0; z-index:1100; transition:background .3s,border-color .3s; }
#logo-wrap { display:flex; align-items:center; gap:9px; padding:0 16px; border-right:1px solid var(--border); height:100%; text-decoration:none; flex-shrink:0; }
#logo-img { width:26px; height:26px; border-radius:5px; object-fit:cover; background:var(--surface2); }
#logo-name { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--accent); letter-spacing:.5px; }
#logo-tag { font-size:9px; color:var(--text3); letter-spacing:1.5px; text-transform:uppercase; line-height:1; }
#live-pill { display:flex; align-items:center; gap:5px; padding:0 14px; border-right:1px solid var(--border); height:100%; font-family:var(--font-mono); font-size:10px; color:var(--green); letter-spacing:1px; flex-shrink:0; }
.live-ring { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); animation:liveRing 1.8s ease infinite; }
@keyframes liveRing { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.65);opacity:.35} }
#header-nav { display:flex; align-items:center; gap:2px; padding:0 8px; flex-shrink:0; }
.nav-btn { font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--text3); padding:5px 10px; cursor:pointer; transition:all .2s; text-transform:uppercase; border-radius:4px; border:1px solid transparent; background:none; }
.nav-btn:hover { color:var(--text2); }
.nav-btn.active { color:var(--accent); border-color:rgba(240,180,41,.2); background:rgba(240,180,41,.06); }
#header-gap { flex:1; }
#header-right { display:flex; align-items:center; height:100%; }
.hdr-stat { display:flex; align-items:center; gap:4px; padding:0 12px; border-left:1px solid var(--border); height:100%; font-family:var(--font-mono); font-size:10px; color:var(--text3); white-space:nowrap; flex-shrink:0; }
.hdr-stat strong { color:var(--text2); }
#theme-toggle { display:flex; align-items:center; justify-content:center; width:42px; height:100%; border-left:1px solid var(--border); cursor:pointer; font-size:15px; transition:background .2s; flex-shrink:0; background:none; border-top:none; border-right:none; border-bottom:none; }
#theme-toggle:hover { background:rgba(240,180,41,.06); }
#wire-toggle-btn { display:none; align-items:center; justify-content:center; width:42px; height:100%; border-left:1px solid var(--border); cursor:pointer; font-size:14px; background:none; border-top:none; border-right:none; border-bottom:none; color:var(--text2); transition:all .2s; flex-shrink:0; }
#wire-toggle-btn:hover { color:var(--accent); background:rgba(240,180,41,.06); }
#refresh-btn { display:flex; align-items:center; gap:4px; height:100%; padding:0 13px; border-left:1px solid var(--border); background:none; border-top:none; border-right:none; border-bottom:none; color:var(--text3); font-family:var(--font-mono); font-size:10px; letter-spacing:1px; cursor:pointer; transition:all .2s; flex-shrink:0; }
#refresh-btn:hover { color:var(--accent); background:rgba(240,180,41,.05); }
#refresh-btn.spin svg { animation:iconSpin .8s linear infinite; }
@keyframes iconSpin { to { transform:rotate(360deg); } }
#clock { padding:0 12px; border-left:1px solid var(--border); height:100%; display:flex; align-items:center; font-family:var(--font-mono); font-size:10px; color:var(--text3); white-space:nowrap; min-width:142px; flex-shrink:0; }
#main { display:flex; flex:1; overflow:hidden; min-height:0; position:relative; }
#sidebar { width:200px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; z-index:500; overflow-y:auto; transition:background .3s,border-color .3s; }
#sidebar::-webkit-scrollbar { width:3px; }
#sidebar::-webkit-scrollbar-thumb { background:var(--border2); }
.sb-sec { border-bottom:1px solid var(--border); padding:8px 0; }
.sb-label { padding:7px 14px 3px; font-family:var(--font-mono); font-size:9px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; }
.sb-item { display:flex; align-items:center; gap:8px; padding:8px 14px; font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--text3); cursor:pointer; transition:all .15s; text-transform:uppercase; user-select:none; }
.sb-item:hover { color:var(--text); background:rgba(128,128,128,.06); }
.sb-item.active { color:var(--accent); }
.sb-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sb-count { margin-left:auto; font-size:9px; color:var(--text3); }
#feed-status-box { padding:10px 14px; border-bottom:1px solid var(--border); }
.fs-label { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; margin-bottom:5px; }
.fs-row { display:flex; align-items:center; justify-content:space-between; }
.fs-text { font-family:var(--font-mono); font-size:9px; color:var(--text3); }
.fs-dot { width:6px; height:6px; border-radius:50%; background:var(--text3); }
.fs-bar { display:flex; gap:3px; margin-top:5px; }
.fs-seg { flex:1; height:3px; border-radius:2px; background:var(--surface3); transition:background .3s; }
#legend { padding:10px 14px; margin-top:auto; border-top:1px solid var(--border); }
.leg-label { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; margin-bottom:7px; }
.leg-row { display:flex; align-items:center; gap:6px; margin:4px 0; font-size:11px; color:var(--text2); }
.leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#map-wrap { flex:1; position:relative; min-width:0; overflow:hidden; }
#map { width:100%; height:100%; background:var(--bg); }
.leaflet-control-zoom { border:1px solid var(--border2) !important; border-radius:6px !important; overflow:hidden; box-shadow:none !important; }
.leaflet-control-zoom a { background:var(--surface) !important; color:var(--text2) !important; border-bottom:1px solid var(--border) !important; width:28px !important; height:28px !important; line-height:28px !important; }
.leaflet-control-zoom a:hover { background:var(--surface2) !important; color:var(--accent) !important; }
.leaflet-control-attribution { background:var(--overlay) !important; color:var(--text3) !important; font-size:9px !important; padding:2px 6px !important; }
.leaflet-control-attribution a { color:var(--text3) !important; }
#map-chips { position:absolute; top:10px; left:48px; z-index:800; display:flex; flex-direction:column; gap:6px; pointer-events:none; align-items:flex-end; }
.m-chip { background:var(--overlay); border:1px solid var(--border2); border-radius:5px; padding:4px 9px; font-family:var(--font-mono); font-size:9px; color:var(--text2); backdrop-filter:blur(8px); letter-spacing:.5px; transition:background .3s; }
#coord-chip { position:absolute; top:38px; left:48px; z-index:800; pointer-events:none; }
#ticker { height:28px; background:var(--surface); border-top:1px solid var(--border); display:flex; align-items:center; overflow:hidden; flex-shrink:0; z-index:1000; transition:background .3s,border-color .3s; }
#ticker-badge { display:flex; align-items:center; gap:5px; padding:0 11px; border-right:1px solid var(--border); height:100%; font-family:var(--font-mono); font-size:9px; color:var(--accent); letter-spacing:2px; flex-shrink:0; white-space:nowrap; }
#ticker-wrap { flex:1; overflow:hidden; height:100%; position:relative; }
#ticker-track { display:flex; align-items:center; white-space:nowrap; height:100%; position:absolute; animation:tickerMove 90s linear infinite; }
#ticker-track:hover { animation-play-state:paused; cursor:pointer; }
@keyframes tickerMove { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tk-item { display:inline-flex; align-items:center; gap:6px; padding:0 18px; font-size:11px; color:var(--text2); border-right:1px solid var(--border); height:100%; transition:color .2s; }
.tk-item:hover { color:var(--text); }
.tk-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
#ad-strip { position:relative; background:var(--surface); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; min-height:0; transition:background .3s,border-color .3s; }
#ad-strip:empty { min-height:0; border-top:none; }
#ad-strip.ad-hidden { display:none !important; }
#ad-strip .ad-strip-unit { width:320px; height:50px; }
@media (min-width:500px) { #ad-strip .ad-strip-unit { width:468px; height:60px; } }
@media (min-width:800px) { #ad-strip .ad-strip-unit { width:728px; height:90px; } }
#ad-strip-close { position:absolute; top:4px; right:6px; background:rgba(0,0,0,0.5); border:none; color:#fff; font-size:14px; width:24px; height:24px; border-radius:50%; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .15s; line-height:1; padding:0; }
#ad-strip-close:hover { background:rgba(200,40,40,0.8); transform:scale(1.1); }
.ad-collapsed { display:none !important; }
ins.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }