:root {
  --bg-base: #07070e;
  --bg-panel: rgba(15, 15, 30, 0.78);
  --bg-panel-solid: #0e0e1c;
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff0055;
  --neon-purple: #9900ff;
  --neon-yellow: #e8d020;
  --neon-orange: #ff8800;
  --neon-red: #ff3344;
  --neon-green: #22ff88;
  --text-primary: #e2e8f0;
  --text-muted: #4e5c70;
  --border-cyber: rgba(0, 240, 255, 0.14);
  --border-cyber-active: rgba(0, 240, 255, 0.45);
  --font-cyber: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; overflow: hidden; }
body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); }

#app { display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--border-cyber);
  background: linear-gradient(180deg, rgba(0,240,255,0.04), transparent);
}
.brand-title { font-family: var(--font-cyber); font-weight: 900; font-size: 20px; letter-spacing: 3px; color: #fff; text-shadow: 0 0 12px rgba(0,240,255,.5); }
.brand-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 2px; }
.stats { display: flex; gap: 20px; }
.stat { text-align: right; }
.stat label { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
.stat span { font-family: var(--font-cyber); font-size: 17px; color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,240,255,.4); }
.stat span.warn { color: var(--neon-orange); text-shadow: 0 0 8px rgba(255,136,0,.4); }
.stat span.bad { color: var(--neon-red); text-shadow: 0 0 8px rgba(255,51,68,.5); }
.stat span.ok { color: var(--neon-green); text-shadow: 0 0 8px rgba(34,255,136,.4); }

/* ---------- viewport ---------- */
#viewport { position: relative; flex: 1; }
#scene-container { position: absolute; inset: 0; }
#scene-container canvas { display: block; }

/* ---------- site sidebar ---------- */
#sitebar {
  position: absolute; top: 14px; left: 14px; width: 250px; max-height: calc(100% - 90px);
  overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--border-cyber);
  padding: 12px; backdrop-filter: blur(6px);
}
.panel-title { font-family: var(--font-mono); font-size: 11px; color: var(--neon-cyan); letter-spacing: 2px; margin-bottom: 8px; }
.site-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px; margin-bottom: 4px; cursor: pointer;
  border: 1px solid transparent; font-family: var(--font-mono); font-size: 14px;
}
.site-row:hover { border-color: var(--border-cyber-active); background: rgba(0,240,255,.05); }
.site-row .nm { color: var(--text-primary); }
.site-row .who { display: flex; gap: 5px; align-items: center; }
.pill { font-size: 9px; padding: 1px 5px; border: 1px solid; }
.pill.up { color: var(--neon-green); border-color: rgba(34,255,136,.4); }
.pill.down { color: var(--neon-red); border-color: rgba(255,51,68,.5); animation: blink 1s infinite; }
.pill.standby { color: var(--neon-yellow); border-color: rgba(232,208,32,.4); }
.pill.degraded { color: var(--neon-orange); border-color: rgba(255,136,0,.5); }
@keyframes blink { 50% { opacity: .35; } }

#event-log { font-family: var(--font-mono); font-size: 12px; }
.ev { padding: 3px 0; border-bottom: 1px dashed rgba(78,92,112,.2); color: var(--text-muted); }
.ev b { color: var(--text-primary); font-weight: 400; }
.ev.kind-collision b { color: var(--neon-red); }
.ev.kind-construction b, .ev.kind-uplink b { color: var(--neon-orange); }
.ev.kind-landing b { color: var(--neon-cyan); }
.ev.kind-takeoff b { color: var(--neon-magenta); }

/* ---------- detail panel ---------- */
#detail-panel {
  position: absolute; top: 14px; right: 14px; width: 430px; max-height: calc(100% - 90px);
  background: var(--bg-panel); border: 1px solid var(--border-cyber-active);
  backdrop-filter: blur(8px); display: flex; flex-direction: column;
  box-shadow: 0 0 24px rgba(0,240,255,.12);
}
#detail-panel.hidden, #tooltip.hidden { display: none; }
.detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border-cyber);
  font-family: var(--font-cyber); font-size: 13px; letter-spacing: 2px; color: var(--neon-cyan);
}
#detail-close { background: none; border: none; color: var(--neon-magenta); font-family: var(--font-mono); cursor: pointer; font-size: 12px; }
#detail-body { padding: 10px 12px; overflow-y: auto; font-family: var(--font-mono); font-size: 13px; }
#detail-body table { width: 100%; border-collapse: collapse; }
#detail-body th { text-align: left; color: var(--text-muted); font-weight: 400; font-size: 9px; letter-spacing: 1px; padding: 3px 4px; border-bottom: 1px solid var(--border-cyber); }
#detail-body td { padding: 3px 4px; border-bottom: 1px dashed rgba(78,92,112,.15); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
#detail-body .kv { display: grid; grid-template-columns: 110px 1fr; gap: 2px 8px; margin-bottom: 10px; }
#detail-body .kv label { color: var(--text-muted); font-size: 10px; }
#detail-body .kv span { color: var(--text-primary); }
#detail-body .sec { margin: 10px 0 6px; color: var(--neon-cyan); font-size: 10px; letter-spacing: 2px; }
.lane-health { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 8px; }
.lh { border: 1px solid var(--border-cyber); padding: 4px 6px; text-align: center; }
.lh label { display: block; font-size: 8px; color: var(--text-muted); }
.lh span { font-size: 12px; color: var(--neon-cyan); }
.status-up { color: var(--neon-green); } .status-down { color: var(--neon-red); }
.status-standby { color: var(--neon-yellow); } .status-degraded { color: var(--neon-orange); }

/* ---------- tooltip / legend ---------- */
#tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--bg-panel-solid); border: 1px solid var(--border-cyber-active);
  font-family: var(--font-mono); font-size: 11px; padding: 6px 9px; color: var(--text-primary);
  box-shadow: 0 0 14px rgba(0,240,255,.2);
}
#legend {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  color: var(--text-muted); background: var(--bg-panel); border: 1px solid var(--border-cyber);
  padding: 6px 14px;
}

/* ---------- outage toasts ---------- */
#toasts {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 40; pointer-events: none;
}
.toast {
  font-family: var(--font-cyber); font-size: 16px; letter-spacing: 2px;
  padding: 12px 26px; border: 1px solid; background: rgba(10,10,20,.92);
  animation: toastIn .3s ease-out; text-align: center; min-width: 320px;
}
.toast.out { animation: toastOut .5s forwards; }
.toast.sev-down { color: var(--neon-red); border-color: var(--neon-red); box-shadow: 0 0 24px rgba(255,51,68,.5); }
.toast.sev-warn { color: var(--neon-orange); border-color: var(--neon-orange); box-shadow: 0 0 20px rgba(255,136,0,.4); }
.toast.sev-ok { color: var(--neon-green); border-color: var(--neon-green); box-shadow: 0 0 20px rgba(34,255,136,.4); }
@keyframes toastIn { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px); } }

/* ---------- view controls ---------- */
#view-controls {
  position: absolute; bottom: 12px; right: 14px; display: flex; gap: 8px; z-index: 15;
}
#view-controls button {
  background: var(--bg-panel); border: 1px solid var(--border-cyber-active);
  color: var(--neon-cyan); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1px; padding: 7px 12px; cursor: pointer;
  text-shadow: 0 0 8px rgba(0,240,255,.35); backdrop-filter: blur(6px);
}
#view-controls button:hover {
  background: rgba(0,240,255,.1); box-shadow: 0 0 14px rgba(0,240,255,.25);
}
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.dot-cyan { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
.dot-orange { background: var(--neon-orange); box-shadow: 0 0 6px var(--neon-orange); }
.dot-red { background: var(--neon-red); box-shadow: 0 0 6px var(--neon-red); }
.dot-mag { background: var(--neon-magenta); box-shadow: 0 0 6px var(--neon-magenta); }
.dot-green { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(0,240,255,.25); }

/* ---------- world label layer (screen-space, collision-managed) ---------- */
#label-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.w-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--font-cyber); font-weight: 700; letter-spacing: .08em;
  text-shadow: 0 0 8px currentColor, 0 1px 3px rgba(2,4,10,.95);
}

/* ---------- live log stream (equipment drill-down) ---------- */
#infra-logs {
  margin-top: 6px; max-height: 240px; overflow-y: auto;
  background: rgba(4,8,14,.75); border: 1px solid var(--border-cyber);
  padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
}
#infra-logs .ll { border-bottom: 1px dashed rgba(78,92,112,.15); padding: 2px 0; }
#infra-logs .ll .lt { color: var(--neon-cyan); margin-right: 8px; }
#infra-logs .ll .lx { color: var(--text-primary); }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--neon-red); margin-right:6px; animation: blink 1s infinite; }

/* ---------- MAJOR outage splash ---------- */
.toast.major {
  font-size: 26px; padding: 22px 48px; min-width: 560px; border-width: 2px;
  letter-spacing: 3px; animation: toastIn .25s ease-out, shake .5s ease-in-out .25s 2;
  box-shadow: 0 0 60px rgba(255,51,68,.8), inset 0 0 30px rgba(255,51,68,.15);
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* ---------- Entra splash page (SAX login style) ---------- */
#splash { position: fixed; inset: 0; z-index: 100; background: #06080d; color: #e6edf3;
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; overflow: hidden; }
#splash .sp-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
#splash .sp-vignette { position: absolute; left: 50%; top: 50%; width: 820px; height: 820px; max-width: 120vw; max-height: 120vh; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(6,8,13,.92) 26%, rgba(6,8,13,.55) 48%, transparent 72%); z-index: 1; pointer-events: none; }
#splash .sp-grid { position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(to right, rgba(120,160,180,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,160,180,.045) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .6;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 35%, transparent 80%); }
#splash .sp-topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; z-index: 5; }
#splash .sp-brand { display: flex; align-items: center; gap: 10px; }
#splash .sp-emb { width: 34px; height: 34px; }
#splash .sp-bt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
#splash .sp-bn { font-weight: 600; font-size: 15px; color: #e6edf3; letter-spacing: -.01em; }
#splash .sp-bs { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8b97a7; font-weight: 500; }
#splash .sp-help { font-size: 12px; color: #8b97a7; }
#splash .sp-help a { color: #e6edf3; font-weight: 500; text-decoration: none; }
#splash .sp-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; max-width: 430px; width: 90%; text-align: center; display: flex; flex-direction: column; align-items: center; }
#splash .sp-hero { position: relative; width: 280px; height: 280px; margin: 0 auto 2px; }
#splash .sp-glow { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(52,230,196,.26); filter: blur(64px); animation: spGlow 5s ease-in-out infinite; }
#splash .sp-ped { position: absolute; left: 50%; bottom: 28px; width: 180px; height: 24px; transform: translateX(-50%); border-radius: 100%; background: rgba(52,230,196,.3); filter: blur(20px); }
#splash .sp-bob { position: absolute; inset: 0; animation: spBob 6s ease-in-out infinite; }
#splash .sp-art { width: 100%; height: 100%; display: block; overflow: visible; }
#splash .sp-title { font-family: 'Space Grotesk','Sora',sans-serif; color: #eef3f7; font-size: 33px; font-weight: 600; letter-spacing: -.01em; margin: 6px 0 0; }
#splash .sp-sub { font-family: 'Space Grotesk','Sora',sans-serif; font-size: 17px; font-weight: 500; color: #9fb0be; margin-top: 6px; }
#splash .sp-desc { color: #8b97a7; font-size: 13px; line-height: 1.5; margin: 12px auto 0; max-width: 340px; }
#splash .sp-btnwrap { position: relative; margin-top: 24px; display: flex; justify-content: center; width: 100%; }
#splash .sp-btnwrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 116%; height: 215%; transform: translate(-50%,-50%);
  background: radial-gradient(55% 60% at 50% 50%, rgba(52,230,196,.5), rgba(52,230,196,.12) 45%, transparent 72%); filter: blur(20px); opacity: .78; pointer-events: none; z-index: 0; }
#splash .sp-btn { position: relative; z-index: 1; overflow: hidden; width: 300px; max-width: 100%; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 46px -14px rgba(52,230,196,.6); }
#splash .sp-btn svg { width: 19px; height: 19px; }
#splash .sp-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-180%) skewX(-20deg); animation: spShine 5.5s ease-in-out infinite; animation-delay: 1.1s; pointer-events: none; }
#splash .sp-note { color: rgba(139,151,167,.7); font-size: 11px; margin-top: 10px; }
#splash .sp-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 18px; font-size: 11px; color: #8b97a7; }
#splash .sp-ti { display: inline-flex; align-items: center; gap: 6px; }
#splash .sp-ti svg { width: 13px; height: 13px; fill: none; stroke: rgba(52,230,196,.85); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#splash .sp-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding: 14px 28px; font-size: 11px; color: rgba(139,151,167,.7); z-index: 5; }
#splash .sp-foot a { color: rgba(139,151,167,.8); text-decoration: none; }
@keyframes spBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes spGlow { 0%,100%{opacity:.5} 50%{opacity:.8} }
@keyframes spShine { 0%{transform:translateX(-180%) skewX(-20deg);opacity:0} 12%{opacity:.55} 42%{opacity:.55} 60%,100%{transform:translateX(280%) skewX(-20deg);opacity:0} }