:root { --bg:#0e1116; --panel:#161b22; --tile:#0b0e13; --line:#2b333d; --fg:#e6edf3; --muted:#8b949e; --accent:#00c2ff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif; }
header { padding:12px 18px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:14px; }
header h1 { font-size:18px; margin:0; }
header .sub { color:var(--muted); font-size:12px; }
header .doclinks { margin-left:auto; display:flex; gap:16px; }
header .doclinks a { color:var(--fg); text-decoration:underline; font-size:13px; }
header .doclinks a:hover { color:#ffffff; }
main { display:flex; gap:16px; padding:16px; align-items:flex-start; }
#panel { flex:0 0 360px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; position:sticky; top:16px; }
#viz { flex:1 1 auto; min-width:0; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:16px 0 8px; }
h2:first-child { margin-top:0; }
h3 { font-size:12px; margin:0 0 6px; color:var(--muted); font-weight:600; }
.row { display:flex; gap:8px; margin-bottom:8px; }
.row input[type=text] { flex:1; }
input, select, button { font:inherit; color:var(--fg); background:var(--tile); border:1px solid var(--line); border-radius:6px; padding:7px 9px; }
button { background:#1f6feb; border-color:#1f6feb; cursor:pointer; }
button:hover { background:#2a7bff; }
button:disabled { background:#30363d; border-color:#30363d; color:var(--muted); cursor:not-allowed; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.grid label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
.grid label.chk { flex-direction:row; align-items:center; gap:6px; grid-column:1 / -1; color:var(--fg); }
#runBtn { width:100%; margin-top:10px; padding:10px; }
#status { margin-top:8px; min-height:18px; font-size:12px; color:var(--muted); }
#status.err { color:#ff7b72; }
#results { list-style:none; margin:6px 0; padding:0; max-height:220px; overflow:auto; }
#results li { padding:7px 9px; border:1px solid var(--line); border-radius:6px; margin-bottom:5px; cursor:pointer; }
#results li:hover { border-color:var(--accent); }
#results li .nm { font-weight:600; }
#results li .mt { color:var(--muted); font-size:11px; }
#selected { margin-top:8px; padding:9px; border:1px solid var(--accent); border-radius:6px; }
#selected.hidden { display:none; }
#objName { font-weight:700; }
.meta { color:var(--muted); font-size:12px; }
.cards { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; min-width:130px; }
.card .k { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.card .v { font-size:19px; font-weight:700; margin-top:3px; }
.card.good .v { color:#3fb950; }
.card.warn .v { color:#d29922; }
.vizrow { display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.viztile { flex:1 1 300px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; min-width:0; }
.viztile.wide { flex:1 1 420px; }
#globe { width:100%; height:380px; border-radius:8px; overflow:hidden; }
#groundtrack, #chartAlt, #chartDensity, #chartAlong { width:100%; height:300px; }
.viztile.hidden { display:none; }