:root{
  --bg1:#050812;
  --bg2:#070a14;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.56);
  --blue:rgba(120,180,255,1);
  --green:rgba(80,220,170,1);
  --amber:rgba(255,206,120,1);
  --bad:rgba(255,140,140,1);
  --shadow:0 18px 70px rgba(0,0,0,.55);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 12% 20%, rgba(120,180,255,.10), transparent 60%),
    radial-gradient(800px 520px at 70% 55%, rgba(255,206,120,.06), transparent 55%),
    radial-gradient(700px 520px at 82% 78%, rgba(80,220,170,.06), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.shell{max-width:1180px;margin:0 auto;padding:18px 16px 26px}

.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}

.brand{display:flex;align-items:center;gap:10px}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(120,180,255,.95);
  box-shadow:0 0 16px rgba(120,180,255,.65);
}
.b1{font-weight:800;letter-spacing:.2px}
.b2{font-size:12px;color:var(--muted2);margin-top:2px}

.pills{display:flex;gap:10px;align-items:center}
.pill{
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  color:var(--muted);
  background:rgba(0,0,0,.20);
}
.pill-strong{
  color:rgba(255,255,255,.95);
  background:rgba(120,180,255,.10);
  border-color:rgba(120,180,255,.35);
}
.pill-green{
  color:rgba(230,255,245,.95);
  background:rgba(80,220,170,.10);
  border-color:rgba(80,220,170,.30);
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.card{
  position:relative;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.h1{font-size:18px;font-weight:900;letter-spacing:.2px}
.h2{font-size:14px;font-weight:850;margin-top:10px}
.muted{color:var(--muted)}
.submuted{color:var(--muted2);font-size:12px}
.mt{margin-top:12px}
.mt2{margin-top:10px}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form{max-width:360px}
.lbl{font-size:12px;color:var(--muted2);margin-top:10px}

input,select{
  width:100%;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
  padding:0 12px;
  outline:none;
}
select{cursor:pointer}

.btn{
  height:38px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(120,180,255,.10);
  color:rgba(255,255,255,.92);
  font-weight:750;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn.subtle{background:rgba(255,255,255,.06)}

.tbtn{
  height:30px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  font-weight:800;
  cursor:pointer;
}
.tbtn-on{
  background:rgba(120,180,255,.12);
  border-color:rgba(120,180,255,.35);
  box-shadow:0 0 14px rgba(120,180,255,.20);
}

.statusline{
  display:inline-block;
  margin-top:14px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
}
.statusline.good{border-color:rgba(80,220,170,.35); background:rgba(80,220,170,.08); color:rgba(230,255,245,.95)}
.statusline.bad{border-color:rgba(255,140,140,.35); background:rgba(255,140,140,.06); color:rgba(255,220,220,.95)}
.statusline.warn{border-color:rgba(255,206,120,.35); background:rgba(255,206,120,.06); color:rgba(255,244,220,.95)}

.mapWrap{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 400px at 30% 25%, rgba(120,180,255,.08), transparent 55%),
    radial-gradient(420px 340px at 72% 70%, rgba(80,220,170,.05), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.22));
  overflow:hidden;
}
.map-card{min-height:420px}
#mapCanvas{display:block;width:100%;height:340px}
.ktext{margin-top:10px}
.kcap{font-size:12px;font-weight:900;letter-spacing:.2px}
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  font-size:11px;
}

.scoreTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mini-pill{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.92);
}

.mini-pill-low{
  background: rgba(80, 220, 170, 0.15);
  border-color: rgba(80, 220, 170, 0.4);
  color: rgba(80, 220, 170, 0.95);
}

.mini-pill-guarded{
  background: rgba(255, 206, 120, 0.15);
  border-color: rgba(255, 206, 120, 0.4);
  color: rgba(255, 206, 120, 0.95);
}

.mini-pill-elevated{
  background: rgba(255, 180, 120, 0.15);
  border-color: rgba(255, 180, 120, 0.4);
  color: rgba(255, 180, 120, 0.95);
}

.mini-pill-high{
  background: rgba(255, 140, 140, 0.15);
  border-color: rgba(255, 140, 140, 0.4);
  color: rgba(255, 140, 140, 0.95);
}

.mini-pill-critical{
  background: rgba(255, 100, 100, 0.15);
  border-color: rgba(255, 100, 100, 0.4);
  color: rgba(255, 100, 100, 0.95);
}

.scoreWrap{display:flex;gap:16px;align-items:flex-start;margin-top:12px}
.gaugeWrap{flex:1;min-width:220px}
.kpis{width:260px;display:flex;flex-direction:column;gap:10px}

.g-base{fill:none;stroke:rgba(255,255,255,.10);stroke-width:14;stroke-linecap:round}
.g-fill{fill:none;stroke:rgba(120,180,255,.92);stroke-width:14;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .6s ease}
.g-num{fill:rgba(255,255,255,.92);font-size:40px;font-weight:950;letter-spacing:.5px}

.kpi{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
}
.sig-l{font-size:12px;color:rgba(255,255,255,.80);font-weight:900}
.sig-v{font-size:22px;font-weight:950;margin-top:2px}
.sig-h{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}

.piiBox{
  border:1px solid rgba(80,220,170,.22);
  background:rgba(80,220,170,.06);
  border-radius:16px;
  padding:10px 12px;
}
.piiTitle{font-size:12px;font-weight:950}
.piiText{font-size:12px;line-height:1.45;color:rgba(230,255,245,.92);margin-top:6px}

.surfaceTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.surfaceGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.surfaceItem{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
}
.surfaceItem.span2{grid-column:1 / span 2}
.st{font-size:12px;color:rgba(255,255,255,.72);font-weight:900}
.sv{font-size:14px;font-weight:850;margin-top:4px}

.feed{margin-top:12px;display:flex;flex-direction:column;gap:10px;max-height:360px;overflow:auto;padding-right:4px}
.feedItem{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(0,0,0,.18);
}
.feedTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.feedTitle{font-weight:950}
.feedMeta{font-size:11px;color:rgba(255,255,255,.60)}
.feedPlain{font-size:12px;color:rgba(255,255,255,.78);margin-top:6px;line-height:1.45}
.feedLine{font-size:12px;color:rgba(255,255,255,.74);margin-top:6px}
b{font-weight:950}

.proofList{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.proofList div{font-size:13px;color:rgba(255,255,255,.82);line-height:1.45}

/* Speech bubbles - solid, readable, one at a time */
.bubble{
  position:absolute;
  right:16px;
  top:16px;
  width:300px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,16,28,.94);
  box-shadow:0 16px 55px rgba(0,0,0,.55);
  padding:12px 12px;
  opacity:0;
  transform: translateY(-6px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.bubble.show{opacity:1;transform: translateY(0)}
.btitle{font-weight:950;font-size:12px;letter-spacing:.2px}
.bbody{color:rgba(255,255,255,.86);font-size:12px;line-height:1.45;margin-top:6px}

.bubble.info{border-color:rgba(120,180,255,.40); background:rgba(16,22,40,.96)}
.bubble.warn{border-color:rgba(255,206,120,.42); background:rgba(34,26,16,.96)}
.bubble.good{border-color:rgba(80,220,170,.38); background:rgba(12,30,24,.96)}

@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  #mapCanvas{height:320px}
  .scoreWrap{flex-direction:column;align-items:stretch}
  .kpis{width:auto}
  .surfaceGrid{grid-template-columns:1fr}
  .surfaceItem.span2{grid-column:auto}
}