/* ---- Base ---- */
html, body { margin:0; height:100%; background:#0b0f1a; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:#cfe3ff;}
a { color:#9bd0ff; text-decoration: none; }

/* Sidebar + nav */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 180px; background:#0e1422; border-right:1px solid rgba(255,255,255,.08); padding: 16px 10px; box-sizing: border-box; }
.sidebar { padding-bottom: 88px; }
.logo-box { position:absolute; left:10px; right:10px; bottom:12px; background:#ffffff; border-radius:10px; padding:10px; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 10px rgba(0,0,0,.25); border:1px solid rgba(0,0,0,.08); }
.logo-box img { max-width:100%; max-height:48px; object-fit:contain; display:block; }
.brand { display:flex; align-items:center; gap:10px; margin-bottom: 16px; color:#cfe3ff; font-weight:600; letter-spacing:.2px; }
.brand svg { width:22px; height:22px; }
.nav { display:flex; flex-direction:column; gap:10px; }
.nav a, .nav button { display:flex; align-items:center; gap:12px; width:80%; padding:14px 14px; background:#11192a; color:#cfe3ff; border:1px solid #2b3b5f; border-radius:12px; text-align:left; font-size:15px; line-height:1.25; min-height:56px; }
.nav a[aria-current="page"] { background:#16223a; border-color:#3a5285; box-shadow: 0 0 0 1px rgba(155,208,255,0.08) inset; }
.nav svg { width:22px; height:22px; opacity:.95; }

/* Content area */
.content { position: fixed; top:0; left:180px; right:0; bottom:0; overflow:auto; }
.hud {
  position: fixed; top: 12px; left: 192px; background: rgba(16,22,35,.6);
  padding: 10px 12px; border:1px solid rgba(255,255,255,.08); border-radius: 10px; backdrop-filter: blur(6px);
  font-size: 12px; line-height: 1.4;
}
.panel {
  position: fixed; top: 12px; right: 12px; background: rgba(16,22,35,.6);
  padding: 12px; border:1px solid rgba(255,255,255,.08); border-radius: 10px; backdrop-filter: blur(6px);
  width: 260px; font-size: 12px;
}
.panel h3 { margin:0 0 8px 0; font-size: 13px; letter-spacing:.3px; color:#a8c6ff }
.row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.row label { width: 80px; color:#9fb6df; }
.row input[type="range"] { flex:1; }
.row input[type="text"], .row input[type="number"] { width: 100%; background:#0e1422; color:#cfe3ff; border:1px solid #23314f; border-radius:6px; padding:4px 6px;}
.btn { display:inline-block; padding:6px 10px; border:1px solid #2b3b5f; border-radius:8px; background:#11192a; color:#cfe3ff; cursor:pointer; }

/* Legend chip */
.legend {
  position: fixed; bottom: 12px; left: 192px; display:flex; gap:10px; align-items:center;
  background: rgba(16,22,35,.6); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px;
}
.grad { width:140px; height:10px; border-radius: 6px; background: linear-gradient(to right, #ff3b3b, #ffc23b, #2bff88); }
.grad-labels { display:flex; justify-content:space-between; font-size:10px; color:#9fb6df; margin-top:2px; }

/* ---- Overview ---- */
.dash-wrap { padding:24px; color:#cfe3ff; }
.kpis { display:grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:#11192a; border:1px solid #2b3b5f; border-radius:12px; padding:12px; }
.kpi .label { font-size:12px; color:#9fb6df; letter-spacing:.2px; margin-bottom:6px; }
.kpi .value { font-size:22px; font-weight:600; letter-spacing:.3px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.card { background:#11192a; border:1px solid #2b3b5f; border-radius:12px; padding:12px; min-height:240px; }
.card h3 { margin:0 0 10px 0; font-size:14px; color:#a8c6ff; letter-spacing:.2px; }
.table { width:100%; border-collapse: collapse; font-size:12px; }
.table th, .table td { padding:8px; border-bottom:1px solid #223051; text-align:left; }
.table th { color:#9fb6df; font-weight:600; }
.table tbody tr:hover { background:#0e1422; }
.table th.sortable { cursor:pointer; position:relative; }
.table th.sortable::after { content:""; position:absolute; right:8px; top:50%; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #9fb6df; transform: translateY(-2px); opacity:.6; }
.table th.sortable.asc::after { border-top:none; border-bottom:6px solid #9fb6df; transform: translateY(-4px); }
.filter-row input { width:100%; background:#0e1422; color:#cfe3ff; border:1px solid #23314f; border-radius:6px; padding:4px 6px; font-size:11px; }
.bar-row { display:flex; align-items:center; gap:8px; }
.bar-rail { flex:1; height:8px; background:#0e1422; border-radius:999px; border:1px solid #23314f; overflow:hidden; }
.bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#4fa3ff,#6bffe0); }
.muted { color:#9fb6df; opacity:.9; }
.badge { display:inline-block; padding:2px 6px; border-radius:999px; border:1px solid #2b3b5f; background:#0e1422; font-size:11px; }

/* ---- Live (left terminal + top KPIs + canvas) ---- */
#app { position:absolute; inset:0; }
#live-page.has-terminal #app { left: 380px; }
.term {
  position: fixed; top: 12px; left: 192px; bottom: 12px; width: 360px; z-index: 2;
  background: rgba(10,16,28,.78); border:1px solid rgba(155,208,255,.12); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); backdrop-filter: blur(6px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:#a5ffbf; overflow: hidden;
}
.term-header { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.06); color:#9bd0ff; font-size:12px; }
.term-body { position:absolute; inset:38px 0 0 0; overflow:auto; padding:8px 10px; }
.term-body::-webkit-scrollbar { width:8px; }
.term-body::-webkit-scrollbar-thumb { background:#23314f; border-radius:8px; }
.term-line { white-space: nowrap; font-size:12px; line-height:1.35; letter-spacing:.2px; padding:2px 0; opacity:.95; animation: slideIn .18s ease-out; }
.term-dim { opacity:.7; color:#7bd19b; }
.term-warn { color:#ffd27a; }
.term-err { color:#ff9b9b; }
.term-time { color:#7fb6ff; margin-right:6px; }
.term-kv { color:#c6ffdd; }
.term-scan { pointer-events:none; position:absolute; inset:0; mix-blend-mode:overlay; opacity:.08; background: repeating-linear-gradient(180deg, #fff 0, #fff 1px, transparent 2px, transparent 4px); }
@keyframes slideIn { from { transform: translateX(-10px); opacity: .0; } to { transform: translateX(0); opacity: 1; } }

.live-kpis { position: fixed; top:12px; left: 564px; right: 284px; z-index: 2; display:grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap:12px; }
.live-kpi { background:#11192a; border:1px solid #2b3b5f; border-radius:12px; padding:10px 12px; min-height:56px; display:flex; flex-direction:column; justify-content:center; }
.live-kpi .lbl { font-size:12px; color:#9fb6df; letter-spacing:.2px; margin-bottom:4px; }
.live-kpi .val { font-size:22px; font-weight:600; letter-spacing:.3px; color:#cfe3ff; }
@media (max-width: 1200px){ .live-kpis{ display:none; } }

/* ---- Watch ---- */
.watch-wrap { padding:24px; color:#cfe3ff; display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.watch-col { background:#11192a; border:1px solid #2b3b5f; border-radius:12px; padding:16px; }
.watch-title { display:flex; align-items:center; gap:10px; margin:0 0 12px 0; color:#a8c6ff; letter-spacing:.2px; }
.watch-title svg { width:22px; height:22px; }
.watch-controls { display:grid; grid-template-columns: 1fr 180px auto auto; gap:8px; margin-bottom:12px; }
.watch-controls input, .watch-controls select { background:#0e1422; color:#cfe3ff; border:1px solid #23314f; border-radius:8px; padding:6px 8px; font-size:12px; }
.watch-controls button { padding:6px 10px; border:1px solid #2b3b5f; border-radius:8px; background:#0f1728; color:#cfe3ff; cursor:pointer; }
.watch-table { width:100%; border-collapse: collapse; font-size:12px; }
.watch-table th, .watch-table td { padding:8px; border-bottom:1px solid #223051; text-align:left; }
.empty-hint { color:#9fb6df; opacity:.8; padding:12px 0; }

/* gradient cells (Watch) */
.gcell { display:flex; align-items:center; gap:8px; }
.gbar { flex:1; height:8px; background:#0e1422; border-radius:999px; border:1px solid #23314f; overflow:hidden; }
.gfill { height:100%; width:0%; background:linear-gradient(90deg,#ff3b3b,#ffc23b,#2bff88); }
.gval { min-width:64px; text-align:right; color:#cfe3ff; opacity:.95; }

/* ---- UAV Under Dev ---- */
.underdev-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:28px; }
.underdev-card { width:min(880px, 92vw); background:linear-gradient(135deg, rgba(18,26,43,.85), rgba(13,19,34,.85)); border:1px solid rgba(155,208,255,.12); border-radius:18px; box-shadow: 0 12px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25); padding:24px; position:relative; overflow:hidden; }
.underdev-card:before { content:""; position:absolute; inset:-2px; background: radial-gradient(600px 200px at 0% 0%, rgba(79,163,255,.18), transparent 45%), radial-gradient(600px 200px at 100% 100%, rgba(107,255,224,.12), transparent 45%); pointer-events:none; }
.underdev-head { display:flex; gap:16px; align-items:center; margin-bottom:12px; }
.underdev-icon { width:60px; height:60px; border-radius:14px; border:1px solid rgba(155,208,255,.14); background:linear-gradient(180deg,#0f1730,#0b1226); display:grid; place-items:center; box-shadow: inset 0 0 24px rgba(79,163,255,.15); }
.underdev-icon svg { width:34px; height:34px; opacity:.95; }
.underdev-title { display:flex; align-items:baseline; gap:10px; }
.underdev-title h2 { margin:0; font-size:22px; letter-spacing:.3px; color:#a8c6ff; }
.pill-wip { display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid #3a5285; background:#0f1728; color:#9bd0ff; }
.underdev-sub { margin:6px 0 14px 0; color:#cfe3ff; opacity:.9; }
.underdev-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; }
@media (max-width: 860px){ .underdev-grid{ grid-template-columns: 1fr; } }
.underdev-left, .underdev-right { background:#11192a; border:1px solid #2b3b5f; border-radius:12px; padding:14px; }
.feat-list { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:6px; }
@media (max-width: 680px){ .feat-list{ grid-template-columns: 1fr; } }
.feat { background:#0e1422; border:1px solid #23314f; border-radius:10px; padding:10px; display:flex; gap:10px; align-items:flex-start; }
.feat svg { width:20px; height:20px; opacity:.95; }
.skeleton { position:relative; overflow:hidden; background:#0e1422; border:1px solid #23314f; border-radius:10px; height:140px; }
.skeleton .bar { height:10px; width:60%; margin:14px; background:#15213a; border-radius:999px; }
.skeleton .bar.small { width:40%; }
.shimmer { position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(155,208,255,.08), transparent); transform: translateX(-100%); animation: shimmer 2.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.coming-note { font-size:12px; color:#9fb6df; margin-top:10px; }