html,body{margin:0;height:100%;background:#0b1220;font-family:system-ui,"Segoe UI",Arial,sans-serif;color:#e8eef7;overflow:hidden}
#cesiumContainer{position:absolute;inset:0}
.cesium-viewer-bottom{direction:ltr;opacity:.75}
.cesium-widget-credits{font-size:11px}

.glass{position:absolute;background:rgba(10,16,28,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35)}

#brand{top:14px;right:14px;padding:10px 14px;font-size:13px;line-height:1.5}
#brand .t b{letter-spacing:.5px}#brand .t b span{color:#ff8a3d}
#brand .s{opacity:.8;font-size:12px}

#controls{top:14px;left:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:190px;direction:rtl}
#controls button{background:#1b2536;color:#e8eef7;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer}
#controls button:hover{background:#243147}
#controls button.primary{background:#ff8a3d;color:#1a0d00;border-color:transparent;font-weight:600}
#controls button.live{background:#22c55e;color:#04150a;border-color:transparent}
#controls .row{display:flex;align-items:center;gap:8px;font-size:12px}
#controls input[type=range]{flex:1;accent-color:#ff8a3d}
.legend{font-size:11px;opacity:.85;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:3px}

#list{top:90px;right:14px;width:250px;max-height:calc(100% - 200px);display:flex;flex-direction:column;padding:10px}
#list .h{font-weight:600;font-size:13px;margin-bottom:6px}#list .h span{opacity:.6;font-weight:400}
#list input{background:#0f1726;border:1px solid rgba(255,255,255,.1);color:#e8eef7;border-radius:8px;padding:6px 8px;font-size:12px;margin-bottom:6px}
#listItems{overflow:auto;font-size:12px}
#listItems .it{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;cursor:pointer}
#listItems .it:hover,#listItems .it.sel{background:rgba(255,255,255,.08)}
#listItems .it i{width:8px;height:8px;border-radius:50%;flex:none}
#listItems .it .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#listItems .it .o{opacity:.6;font-size:11px}

#card{bottom:24px;right:14px;width:300px;padding:14px;display:none}
#card.on{display:block}
#card .x{position:absolute;left:10px;top:8px;background:none;border:0;color:#9fb0c7;font-size:14px;cursor:pointer}
#card .t{font-size:17px;font-weight:700}
#card .s{font-size:12px;opacity:.75;margin-bottom:8px}
#card .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 10px;font-size:12px}
#card .grid div b{display:block;font-size:15px;color:#ff8a3d}
#card .tenants{margin-top:8px;font-size:12px;line-height:1.5}
#card .foot{margin-top:8px;font-size:11px;opacity:.6}
#card .bar{height:6px;border-radius:4px;background:#243147;margin:6px 0;overflow:hidden}
#card .bar i{display:block;height:100%;background:#22c55e}

#hud{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:none;gap:18px;padding:10px 16px;
  background:rgba(10,16,28,.7);border-radius:12px;font-size:13px;direction:rtl;align-items:center}
#hud.on{display:flex}
#hud .k b{color:#ff8a3d;font-size:16px}
#hud .hint{font-size:11px;opacity:.7}

#toast{position:absolute;left:50%;top:70px;transform:translateX(-50%);background:rgba(10,16,28,.85);padding:8px 14px;
  border-radius:10px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none}
#toast.on{opacity:1}

#load{position:absolute;inset:0;background:#0b1220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:9;transition:opacity .6s}
#load.hidden{opacity:0;pointer-events:none}
#load .logo{font-size:22px;font-weight:700;letter-spacing:1px}
#loadText{font-size:13px;opacity:.7}

@media (max-width:900px){#list{display:none}#card{width:calc(100% - 28px)}}
