:root{
  --bg:#0a1116;
  --panel:rgba(12,20,26,.82);
  --panel-solid:#0e171d;
  --line:rgba(255,255,255,.10);
  --ink:#e8eef2;
  --ink-dim:#93a5b1;
  --accent:#f0a13c;
  --accent-2:#4fb3c9;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden}
#app{position:fixed;inset:0}
canvas#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;padding:14px 18px 26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,15,.86),rgba(6,11,15,.35) 60%,transparent)}
.brand .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.brand h1{margin:4px 0 2px;font-size:19px;font-weight:600;letter-spacing:.01em}
.brand .sub{font-size:11.5px;color:var(--ink-dim)}
.sitecoord{text-align:right;pointer-events:auto;font-size:11px;color:var(--ink-dim);line-height:1.7}
.sitecoord .cl{font-variant-numeric:tabular-nums;color:#cfdae1}
.sitecoord a{color:var(--accent-2);text-decoration:none;border-bottom:1px dotted rgba(79,179,201,.5)}
.sitecoord a:hover{color:#8ed6e6}

/* ---------- side panels ---------- */
aside{position:absolute;top:96px;width:214px;padding:12px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.42);
  max-height:calc(100vh - 150px);overflow:auto;scrollbar-width:thin}
#left{left:18px}
#right{right:18px;width:270px}
aside section+section{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
aside h2{margin:0 0 8px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}

button{font-family:inherit;font-size:12px;color:var(--ink);background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:8px 9px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .08s;text-align:left;line-height:1.2}
button:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18)}
button:active{transform:translateY(1px)}
button.on{background:rgba(240,161,60,.16);border-color:rgba(240,161,60,.55);color:#ffd9a8}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.zonelist{display:flex;flex-direction:column;gap:6px}
.zonelist button{display:flex;align-items:center;gap:8px}
.zonelist .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex:0 0 auto;opacity:.8}
.zonelist button.on .dot{background:var(--accent)}
.toggles{display:flex;flex-direction:column;gap:6px}
.tg{display:flex;justify-content:space-between;align-items:center}
.tg::after{content:"off";font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6d7f8b}
.tg.on::after{content:"on";color:var(--accent)}

/* ---------- basis of the model ---------- */
details.basis{margin-top:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:10px}
details.basis summary{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.basis summary::-webkit-details-marker{display:none}
details.basis summary::after{content:"+";color:var(--accent);font-size:12px}
details.basis[open] summary::after{content:"\2212"}
details.basis p{margin:8px 0 0;font-size:10.5px;line-height:1.55;color:#9fb0bb}
details.basis p b{color:#cfdae1;font-weight:600}
details.basis p.warn{color:#d8ab6a}

/* ---------- info panel ---------- */
#info .empty{font-size:12px;color:var(--ink-dim);line-height:1.6}
#info .empty strong{display:block;color:#cfdae1;font-size:12.5px;margin-bottom:5px;font-weight:600}
#info .kicker{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
#info h3{margin:0 0 4px;font-size:15px;font-weight:600}
#info .use{font-size:12px;line-height:1.6;color:#c3d1da;margin:8px 0 0}
#info dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:10px 0 0;font-size:11.5px}
#info dt{color:var(--ink-dim)}
#info dd{margin:0;color:#dfe8ee;font-variant-numeric:tabular-nums}
#info .ref{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px;color:#7f929e;letter-spacing:.03em}
#info .clr{position:absolute;top:8px;right:8px;background:none;border:none;color:#7f929e;font-size:16px;
  padding:2px 6px;line-height:1}
#info{position:relative}

/* ---------- 3D labels ---------- */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#eef6fa;background:rgba(8,15,20,.72);
  border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 7px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);transition:opacity .2s}
.lbl.zone{color:#ffd9a8;border-color:rgba(240,161,60,.42);background:rgba(28,18,8,.78);font-weight:600}
.lbl.dim{font-variant-numeric:tabular-nums;color:#cfe6ee;border-color:rgba(79,179,201,.35)}
.lbl::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);transform:translateX(-.5px)}
.lbl.zone::after{background:linear-gradient(180deg,rgba(240,161,60,.8),transparent)}

/* ---------- footer / compass ---------- */
#foot{position:absolute;left:18px;right:18px;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 0 12px;pointer-events:none;font-size:10.5px;color:#7e919d;letter-spacing:.04em}
.scalebar{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.scalebar i{display:block;height:6px;border-left:1px solid #93a5b1;border-right:1px solid #93a5b1;
  border-bottom:1px solid #93a5b1;width:80px}
.scalebar em{font-style:normal;font-size:9.5px;letter-spacing:.08em}
#compass{position:absolute;right:26px;bottom:38px;width:44px;height:44px;pointer-events:none;
  border-radius:50%;background:rgba(8,15,20,.6);border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center}
#compass .rose{position:relative;width:100%;height:100%;display:grid;place-items:center}
#compass .rose i{position:absolute;top:6px;left:50%;width:0;height:0;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:9px solid var(--accent)}
#compass .rose b{position:absolute;bottom:4px;font-size:8.5px;font-weight:600;color:#93a5b1;letter-spacing:.08em}

/* ---------- inspection legend ---------- */
#legend{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;gap:14px;
  background:rgba(8,15,20,.82);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:7px 13px;font-size:10.5px;letter-spacing:.04em;color:#cfdae1;pointer-events:none;backdrop-filter:blur(10px)}
#legend[hidden]{display:none}
#legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}
#legend i{width:9px;height:9px;border-radius:2px;display:block}

/* ---------- toast ---------- */
#toast{position:absolute;left:50%;bottom:64px;transform:translate(-50%,12px);opacity:0;
  background:rgba(8,15,20,.9);border:1px solid rgba(240,161,60,.45);color:#ffd9a8;
  padding:7px 14px;border-radius:20px;font-size:12px;letter-spacing:.03em;pointer-events:none;
  transition:opacity .25s,transform .25s;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- loader ---------- */
#loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:#0a1116;color:#93a5b1;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  z-index:50;transition:opacity .5s}
#loader.hide{opacity:0;pointer-events:none}
.spinner{width:30px;height:30px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  #right{width:236px}
  aside{top:88px;width:198px}
}
@media (max-width:880px){
  #legend{bottom:150px;flex-wrap:wrap;gap:8px;max-width:92vw;justify-content:center}
  #topbar{padding:8px 10px 16px;gap:8px}
  .brand h1{font-size:14px;margin:2px 0 0}
  .brand .eyebrow{font-size:8px;letter-spacing:.1em;line-height:1.3}
  .brand .sub{display:none}
  .sitecoord{flex:0 0 auto}
  .sitecoord .cl{display:none}
  .sitecoord a{font-size:9.5px}

  #left{left:0;right:0;bottom:0;top:auto;width:auto;max-height:none;padding:8px 10px 10px;
    display:flex;flex-direction:column;gap:6px;border-radius:14px 14px 0 0}
  #left section{margin:0;padding:0;border:none}
  #left h2{font-size:8.5px;margin:0 0 4px}
  .grid2{display:flex;gap:4px}
  .grid2 button{flex:1 1 0;text-align:center;padding:7px 4px;font-size:10.5px}
  .zonelist{display:flex;flex-direction:row;gap:4px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .zonelist::-webkit-scrollbar{display:none}
  .zonelist button{flex:0 0 auto;white-space:nowrap;padding:6px 9px;font-size:10.5px;border-radius:20px}
  .toggles{display:flex;flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none}
  .toggles::-webkit-scrollbar{display:none}
  .toggles button{flex:0 0 auto;white-space:nowrap;padding:6px 9px;font-size:10.5px;border-radius:20px}
  .tg::after{display:none}

  #right{left:0;right:0;bottom:0;top:auto;width:auto;max-height:60vh;border-radius:14px 14px 0 0;
    transform:translateY(101%);transition:transform .28s ease;padding:14px 14px 18px}
  #right.open{transform:translateY(0);box-shadow:0 -16px 40px rgba(0,0,0,.55)}
  #info h3{font-size:14px}
  #info .use{font-size:11.5px}

  #foot{display:none}
  #compass{right:10px;bottom:calc(150px);width:38px;height:38px}
  #toast{bottom:180px;font-size:11px}
  .lbl{font-size:9px;padding:2px 5px}
}