:root { color-scheme: dark; --chrome:#050A12; --panel:rgba(8,15,25,.94); --line:#293849; --text:#edf3f7; --muted:#93a4b3; --accent:#62d7ff; }
* { box-sizing:border-box; } html,body { height:100%; margin:0; overflow:hidden; background:var(--chrome); font:13px/1.35 Inter,ui-sans-serif,system-ui,sans-serif; color:var(--text); }
button,select,input { font:inherit; } button,select { color:var(--text); background:#111e2b; border:1px solid #395064; border-radius:5px; } button { cursor:pointer; } button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.app-shell,.map-wrap,#map { height:100%; } .topbar { height:52px; background:var(--chrome); border-bottom:1px solid #1d2b38; display:flex; align-items:center; justify-content:space-between; padding:0 18px; position:relative; z-index:5; }
.brand { display:flex; gap:10px; align-items:center; letter-spacing:.08em; } .brand-mark { color:var(--accent); font-size:25px; } .brand strong,.brand small { display:block; } .brand strong { font-size:13px; } .brand small { color:var(--muted); font-size:9px; letter-spacing:.16em; margin-top:2px; } .header-status { color:var(--muted); font-size:11px; display:flex; gap:7px; align-items:center; }.status-dot { width:7px;height:7px;border-radius:50%;background:#e0a83a; }.status-dot.online { background:#48d597; }
.map-wrap { position:relative; } #map { background:#555; } .map-message { position:absolute; left:50%; top:18px; transform:translateX(-50%); background:rgba(5,10,18,.88); border:1px solid #435363; border-radius:4px; padding:7px 12px; color:#dbe7ee; z-index:2; }.map-message.hidden { display:none; }
.control-panel { position:absolute; left:16px; top:16px; width:285px; max-height:calc(100% - 120px); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:7px; box-shadow:0 8px 30px #0008; z-index:3; }.panel-head,.layer-heading { display:flex; justify-content:space-between; align-items:center; letter-spacing:.11em; font-size:10px; color:#b7c6d0; font-weight:700; }.panel-head { padding:11px 12px; border-bottom:1px solid var(--line); }.panel-body { padding:12px; }.panel-body label { display:flex; justify-content:space-between; color:#c3d0d8; font-size:11px; margin:11px 0 5px; }.panel-body select { width:100%; padding:8px; }.muted { color:var(--muted);font-size:10px;margin:5px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.segmented { display:flex; gap:5px; margin:8px 0; }.segmented button { flex:1; padding:8px 4px; font-size:11px; }.segmented button.selected { color:#04111a; background:var(--accent); border-color:var(--accent); font-weight:700; }.panel-body input[type=range] { width:100%; accent-color:var(--accent); }.icon-button,.text-button { border:0;background:transparent;color:var(--accent);padding:2px 5px; }.layer-heading { margin-top:18px;border-top:1px solid var(--line);padding-top:12px; }.layer-list { display:grid; gap:6px; margin-top:8px; }.layer-item { display:flex; align-items:center; gap:7px; color:#c8d4db; font-size:11px; }.layer-item input { accent-color:var(--accent); }.layer-item.disabled { color:#687a87; }.coming { margin-left:auto;color:#718694;font-size:9px; }
.bottom-controls { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:8px 10px; width:min(660px,calc(100% - 32px)); box-shadow:0 8px 30px #0008; }.transport,.latest { width:34px;height:32px; }.transport.play { color:#04111a;background:var(--accent);border-color:var(--accent); }.timeline { flex:1; min-width:0; }.timeline input { width:100%;accent-color:var(--accent); }.time-row { display:flex;justify-content:space-between;color:var(--muted);font-size:10px; }.latest { width:48px;color:var(--accent);font-size:10px;font-weight:700; }.status-strip { position:absolute;right:16px;bottom:16px;z-index:3;background:rgba(5,10,18,.84);border:1px solid #293849;border-radius:4px;padding:5px 8px;color:#9eb1bf;font-size:10px; }.status-strip span+span { margin-left:14px;color:#d9e4ea; }.legend { position:absolute;right:16px;top:16px;z-index:2;background:var(--panel);border:1px solid var(--line);padding:8px 10px;border-radius:5px;font-size:10px; }.legend-bar { width:180px;height:8px;margin:5px 0;background:linear-gradient(90deg,#00e5ff,#00a4ff,#0055ff,#22c55e,#a3e635,#facc15,#f97316,#ef4444,#d946ef,#fff); }.site-hint { position:absolute;right:16px;top:64px;z-index:2;color:#bdcad2;background:#050a12aa;padding:4px 7px;border-radius:3px;font-size:10px; }
.radar-marker { width:12px;height:12px;border:2px solid #d7f5ff;border-radius:50%;background:#1b718d;box-shadow:0 0 0 2px #06121dcc;cursor:pointer; }.radar-marker.active { width:17px;height:17px;background:#ffbd43;border-color:#fff; }.maplibregl-ctrl-attrib { background:#050a12cc!important; }
@media (max-width:700px) { .topbar { height:48px;padding:0 12px; }.header-status { font-size:10px; }.control-panel { left:10px;top:10px;width:calc(100% - 20px);max-height:none; }.control-panel.collapsed { width:150px; }.control-panel.collapsed .panel-body { display:none; }.site-hint { display:none; }.bottom-controls { bottom:12px; width:calc(100% - 20px);padding:7px; }.status-strip { left:10px;right:10px;bottom:69px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.status-strip span+span { display:none; }.legend { right:10px;top:auto;bottom:116px; }.panel-body { padding:10px; } }