:root{
  --bg:#07101a; --panel:rgba(11,22,35,.96); --panel2:rgba(6,14,24,.82); --line:rgba(170,205,255,.22);
  --text:#edf5ff; --muted:#aabbd3; --accent:#85bcff; --accent2:#b7f1cc; --warn:#ffcc8d; --bad:#ff9d9d;
}
*{box-sizing:border-box} html,body,#appShell{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 50% 42%,#142844,#07101a 70%)}
#appShell{display:grid;grid-template-columns:minmax(305px,360px) 1fr minmax(325px,390px)}
.panel{background:var(--panel);border-inline:1px solid var(--line);padding:15px 15px 24px;overflow:auto;box-shadow:0 0 25px rgba(0,0,0,.45);z-index:4}.left{border-left:0}.right{border-right:0}
h1{font-size:1.18rem;margin:0 0 4px}.tagline,.note,.empty{font-size:.78rem;line-height:1.36;color:var(--muted);margin:.25rem 0 .65rem}h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#cfe3ff;margin:18px 0 8px}
label{display:block;font-size:.79rem;color:#e3efff;margin:7px 0 6px}.inline{display:flex;align-items:center;gap:7px}input[type=checkbox]{accent-color:var(--accent)}
select,input[type=search],button,input[type=range]{width:100%;font:inherit}select,input[type=search]{background:#0a1726;border:1px solid rgba(157,194,242,.27);color:var(--text);border-radius:8px;padding:7px}
button{border:1px solid rgba(155,199,255,.30);background:linear-gradient(180deg,#1d426b,#12304e);color:#f3f8ff;border-radius:8px;padding:7px;cursor:pointer;transition:filter .13s ease,transform .08s ease}button:hover{filter:brightness(1.15)}button:active{transform:translateY(1px)}button.wide{margin-top:8px}.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
#viewerPane{position:relative;min-width:0;background:radial-gradient(circle at center,#192f4d,#07101a 72%)}#glCanvas,#overlayCanvas{position:absolute;inset:0;width:100%;height:100%}#overlayCanvas{z-index:2;pointer-events:none}.panel section{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:11px}.panel section:last-child{border-bottom:0}
#hudTop{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:grid;grid-template-columns:repeat(6,minmax(80px,1fr));gap:7px;pointer-events:auto}#hudBottom{position:absolute;z-index:3;bottom:12px;left:12px;right:12px;display:flex;gap:10px;align-items:end;justify-content:space-between;pointer-events:none}#scaleBar,#fpsLabel,#activePrompt{background:rgba(2,9,17,.72);border:1px solid rgba(200,225,255,.22);border-radius:8px;padding:8px 10px;font-size:.78rem;color:#eaf4ff}#activePrompt{max-width:45%;color:#ddedff}.promptGood{color:var(--accent2)}.promptWarn{color:var(--warn)}
#scaleLine{display:block;width:100px;height:3px;background:#edf5ff;margin-bottom:5px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}#toast{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(4,12,22,.86);border:1px solid rgba(200,225,255,.25);border-radius:12px;padding:12px 16px;color:#ecf7ff;display:none}.checks{display:grid;gap:2px}.checks label{margin:0;padding:5px 7px;border-radius:7px;display:flex;justify-content:space-between;gap:8px}.checks label:hover{background:rgba(255,255,255,.055)}
.tree{margin-top:8px;max-height:315px;overflow:auto;border:1px solid rgba(160,195,240,.17);border-radius:8px;background:rgba(2,8,15,.42)}.treeItem{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.055);cursor:pointer;font-size:.78rem}.treeItem:hover{background:rgba(133,188,255,.12)}.treeItem.selected{background:rgba(133,188,255,.24)}.treeItem small{color:var(--muted)}.badge{font-size:.64rem;border-radius:999px;background:rgba(255,255,255,.10);padding:2px 6px;color:#e8f4ff;white-space:nowrap}.badge.site{background:rgba(183,241,204,.12);color:#d5ffe1}.badge.warn{background:rgba(255,210,120,.16);color:#ffdf9d}
.infoCard{background:var(--panel2);border:1px solid rgba(160,195,240,.22);border-radius:10px;padding:11px}.infoCard h3{margin:0 0 5px;font-size:1rem}.infoCard dl{margin:8px 0 0}.infoCard dt{font-size:.69rem;text-transform:uppercase;letter-spacing:.07em;color:#cfe3ff;margin-top:8px}.infoCard dd{margin:2px 0 0;font-size:.80rem;line-height:1.34;color:#edf5ff}.infoCard .warn{color:var(--warn)}
.miniTable{font-size:.75rem;border:1px solid rgba(160,195,240,.17);border-radius:8px;overflow:hidden}.miniRow{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid rgba(255,255,255,.055);padding:6px 8px}.miniRow:last-child{border-bottom:0}.miniRow span:last-child{color:#eaf4ff}.miniRow span:first-child{color:var(--muted)}.validation{font-size:.74rem;line-height:1.32;color:var(--muted);padding-left:18px;margin:0}.validation li{margin-bottom:5px}
#annotationLayer{position:absolute;inset:0;z-index:3;pointer-events:none}.annotation{position:absolute;transform:translate(-50%,-115%);max-width:210px;background:rgba(3,12,22,.90);border:1px solid rgba(190,225,255,.45);border-radius:8px;padding:6px 8px;font-size:.74rem;box-shadow:0 8px 22px rgba(0,0,0,.5);pointer-events:auto}.annotation button{float:right;width:auto;padding:0 0 0 6px;border:0;background:transparent;color:#ffd6d6;font-weight:700}
@media(max-width:1120px){#appShell{grid-template-columns:300px 1fr}.right{position:absolute;right:0;top:0;bottom:0;width:360px;opacity:.96}.hudTop{grid-template-columns:repeat(3,1fr)}}