/* SSIP Space Ecosystem Atlas - 3D map + knowledge graph (commercial reskin) */
:root{
  --bg:#070b12; --bg2:#0a1019; --panel:#0e1622; --panel2:#121c2b; --raise:#16213250;
  --border:rgba(125,150,190,.14); --border2:rgba(125,150,190,.28);
  --text:#e7eef8; --muted:#8a98ad; --dim:#5f6c80;
  --gold:#d9b765; --gold2:#f2d488;
  --cyan:#37d6e0; --green:#36d399; --blue:#4f9bf0; --purple:#a98bf0; --amber:#f0ad3c; --slate:#7d8aa0;
  --v:#36d399; --i:#f0ad3c; --n:#e2554a;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(120% 90% at 80% -10%, #11203a55, transparent 60%),
             radial-gradient(100% 80% at 0% 0%, #14233a55, transparent 55%), var(--bg);
  color:var(--text); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1500px;margin:0 auto;padding:16px 20px 28px}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.mono{font-family:"JetBrains Mono",monospace}
.brandtext h1{font-family:var(--serif);font-weight:600;letter-spacing:0}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 2px 14px;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
/* neutral SSIP mark: gold rounded glyph, no national flag */
.mark{width:34px;height:34px;border-radius:9px;flex:none;position:relative;
  background:linear-gradient(150deg,#1c2940,#0e1622);border:1px solid rgba(217,183,101,.5);
  box-shadow:0 0 18px rgba(217,183,101,.22)}
.mark:before{content:"";position:absolute;inset:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold2),var(--gold) 60%,transparent 72%);
  box-shadow:0 0 10px rgba(217,183,101,.55)}
.brandtext h1{font-size:17px;font-weight:600;margin:0;letter-spacing:.1px;line-height:1.2}
.brandtext .sub{font-size:12px;color:var(--muted);margin-top:3px}
.brandtext .sub strong{color:var(--gold);font-weight:600}
.legend-status{display:flex;gap:14px;flex:none}
.st{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.st i{width:9px;height:9px;border-radius:50%}
.st-v i{background:var(--v);box-shadow:0 0 8px var(--v)}
.st-i i{background:var(--i)}
.st-n i{background:var(--n)}

/* KPI strip (commercial indices) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.kpi{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:12px;padding:11px 13px;position:relative;overflow:hidden}
.kpi .num{font-size:25px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.kpi .num small{font-size:12px;color:var(--muted);font-weight:500}
.kpi .lbl{font-size:10.5px;color:var(--text);opacity:.82;margin-top:5px;text-transform:uppercase;letter-spacing:.05em;line-height:1.25;font-weight:500}
.kpi .bar{height:5px;border-radius:3px;background:#1b2433;margin-top:7px;overflow:hidden}
.kpi .bar i{display:block;height:100%;border-radius:3px}
.kpi.gold .num{color:var(--gold2)}
.kpi.gold:after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 100% 0%,rgba(217,183,101,.13),transparent 70%);pointer-events:none}

/* toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.tabs{display:flex;gap:2px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px}
.tabs button{font:inherit;font-size:13px;font-weight:500;padding:7px 15px;border:0;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer}
.tabs button:hover{color:var(--text)}
.tabs button.active{background:linear-gradient(180deg,#1c2940,#162133);color:#fff;box-shadow:inset 0 0 0 1px var(--border2)}
.tabs button.active::after{content:"";display:block;height:2px;margin-top:6px;border-radius:2px;background:var(--gold)}
.tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--panel)}
.seg button{font:inherit;font-size:12px;padding:6px 11px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.active{background:#1b2740;color:#fff}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)}
.chk input{accent-color:var(--gold)}
.btn{font:inherit;font-size:12.5px;padding:7px 13px;border:1px solid var(--border2);background:var(--panel);color:var(--text);border-radius:9px;cursor:pointer}
.btn:hover{border-color:var(--gold);color:#fff}

/* main layout */
.main{display:grid;grid-template-columns:1fr;gap:14px}
.stagewrap{position:relative;min-width:0}
.stage{position:relative;width:100%;height:640px;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 4%, rgba(60,90,140,.12), transparent 62%), #060a11;
  box-shadow:var(--shadow)}
#canvas{display:block;width:100%;height:100%}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lab{position:absolute;font-size:11px;line-height:1;white-space:nowrap;padding:2px 6px;border-radius:6px;background:rgba(10,16,26,.82);color:#dfe8f4;border:1px solid var(--border);transform:translate(-50%,-165%);backdrop-filter:blur(3px);pointer-events:auto;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.lab:hover{border-color:var(--gold);color:#fff;background:rgba(16,24,38,.95)}
.lab.ext{background:rgba(40,33,16,.85);color:var(--gold2);font-weight:500;border-color:rgba(217,183,101,.3)}
.lab.assoc{border-color:rgba(240,173,60,.45)}
.legend{position:absolute;top:12px;left:12px;background:rgba(10,16,26,.78);border:1px solid var(--border);border-radius:11px;padding:9px 11px;font-size:11.5px;display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(5px);max-width:230px}
.legend .row{display:flex;align-items:center;gap:8px;color:var(--muted)}
.legend .dot{width:9px;height:9px;border-radius:50%;flex:none}
.legend .lk{display:inline-block;width:16px;height:0;flex:none;border-top:2px solid #5f86b8}
.legend .lk-dash{border-top:2px dashed #8a93a6}
.legend .ttl{font-weight:600;color:var(--text);margin-bottom:2px}
.riskbar{height:9px;border-radius:5px;margin:3px 0;background:linear-gradient(90deg,#36d399,#f0ad3c,#e2554a)}
.gradbar{height:9px;border-radius:5px;margin:3px 0;background:linear-gradient(90deg,#2b3a55,#4f9bf0,#d9b765)}
.hint{position:absolute;bottom:12px;right:13px;font-size:11px;color:var(--muted);background:rgba(10,16,26,.7);padding:4px 9px;border-radius:7px;border:1px solid var(--border)}
#tooltip{position:absolute;pointer-events:none;z-index:6;background:rgba(13,20,32,.97);color:var(--text);border:1px solid var(--border2);border-radius:9px;padding:8px 11px;font-size:12px;max-width:260px;display:none;box-shadow:var(--shadow)}
#tooltip .tname{font-weight:600}
#tooltip .tmeta{color:var(--muted);font-size:11px;margin-top:3px}

/* view panel (knowledge graph) overlays the stage area */
.viewpanel{position:absolute;inset:0;background:linear-gradient(180deg,#0b1320,#080d16);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
#view-graph{padding:0}
#view-graph #graph-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#view-graph #graph-legend{top:auto;bottom:14px;left:14px}
.graph-head{position:absolute;left:16px;top:13px;font-size:13px;color:#cfd8e6;letter-spacing:.03em;pointer-events:none;max-width:62%}
.graph-head .gh-sub{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:400;letter-spacing:0}
#graph-tip{position:absolute;display:none;pointer-events:none;background:rgba(8,13,22,.96);border:1px solid var(--border);border-radius:7px;padding:6px 9px;font-size:11.5px;z-index:6;max-width:230px;box-shadow:var(--shadow)}
#graph-tip .tname{font-weight:600;color:#eaf0f7}
#graph-tip .tmeta{color:var(--muted);font-size:10.5px;margin-top:2px}

.foot{font-size:11px;color:var(--dim);line-height:1.6;margin-top:14px;border-top:1px solid var(--border);padding-top:12px;max-width:1100px}
.err{padding:30px;color:var(--muted)}

@media(max-width:760px){
  #app{padding:10px 11px 22px}
  .topbar{flex-direction:column;align-items:flex-start;gap:6px}
  .legend-status{display:none}
  .kpis{grid-template-columns:repeat(2,1fr);gap:7px}
  .stage{height:66vh;min-height:380px}
  .legend{display:none}
}