:root{
  --navy:#1B3A5C; --navy2:#142c47; --green:#7AB648; --ink:#0d141c;
  --panel:#13202e; --panel2:#1a2c3e; --line:#2a4258; --txt:#e8eef4; --mut:#9bb0c2;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--txt)}
canvas#gl{position:fixed;inset:0;display:block}

/* ---------------- Password gate ---------------- */
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 800px at 50% 30%, #1c3450 0%, var(--ink) 70%)}
.gatecard{width:min(420px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:28px 26px;box-shadow:0 24px 60px rgba(0,0,0,.5);text-align:center}
.gatecard img{height:46px;width:auto;object-fit:contain;margin-bottom:14px}
.gatecard h1{font-size:17px;font-weight:700;color:#fff;letter-spacing:.2px}
.gatecard .sub{font-size:12.5px;color:var(--mut);margin:6px 0 18px}
.gatecard input{width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--line);
  background:#0f1a26;color:#fff;font-size:15px;outline:none}
.gatecard input:focus{border-color:var(--green)}
.gatecard button{width:100%;margin-top:12px;padding:12px;border:0;border-radius:9px;
  background:var(--green);color:#10250c;font-weight:800;font-size:14px;cursor:pointer;letter-spacing:.3px}
.gatecard button:hover{filter:brightness(1.06)}
.gateerr{min-height:18px;color:#ff8a8a;font-size:12.5px;margin-top:10px}
.gatenote{font-size:10.5px;color:#6f8499;margin-top:16px;line-height:1.5}

/* ---------------- Header ---------------- */
#hdr{position:fixed;top:0;left:0;right:0;height:54px;z-index:20;display:flex;align-items:center;
  gap:14px;padding:0 14px;background:linear-gradient(180deg,rgba(20,44,71,.96),rgba(20,44,71,.86));
  border-bottom:2px solid var(--green);backdrop-filter:blur(6px)}
#hdr img{height:30px;width:auto}
#hdr .htxt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
#hdr .h1{font-size:13.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hdr .h2{font-size:11px;color:#bcd0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hdr .spacer{flex:1}
#hdr .eng{font-size:11px;color:#cfe0ee;text-align:right;white-space:nowrap}
#hdr .eng b{color:var(--green)}

/* ---------------- View / tier controls (top toolbar under header) --------- */
#toolbar{position:fixed;top:62px;left:12px;z-index:18;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tbtn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  font-size:11.5px;font-weight:600;padding:7px 11px;border-radius:7px;cursor:pointer}
.tbtn:hover{border-color:var(--green)}
.tbtn.active{background:var(--green);color:#10250c;border-color:var(--green)}
.tbgroup{display:flex;gap:4px;background:rgba(19,32,46,.7);padding:4px;border-radius:9px;border:1px solid var(--line)}
.tbgroup .lab{font-size:10px;color:var(--mut);align-self:center;padding:0 6px;text-transform:uppercase;letter-spacing:.5px}

/* tier switches (HVAC + Plumbing + Electrical packages) */
.tierwrap{display:flex;flex-direction:column;gap:4px;background:rgba(19,32,46,.7);padding:5px 6px;border-radius:9px;border:1px solid var(--line)}
.tierpkglab{font-size:9.5px;color:#7fa8c8;text-transform:uppercase;letter-spacing:.6px;font-weight:800;padding:0 2px}
#tierbox,#plumbtierbox,#electierbox{display:flex;gap:4px;align-items:center}
.tierbtn,.ptierbtn,.etierbtn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:7px;cursor:pointer}
.tierbtn.active{background:#E8923A;color:#231003;border-color:#E8923A}        /* HVAC = orange */
.ptierbtn.active{background:#18C0B0;color:#04231f;border-color:#18C0B0}       /* Plumbing = teal */
.etierbtn.active{background:#E23B3B;color:#2a0606;border-color:#E23B3B}       /* Electrical = red */
#tierLabel{font-size:11px;color:#ffcf9a;padding:0 6px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#plumbTierLabel{font-size:11px;color:#9beee4;padding:0 6px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#elecTierLabel{font-size:11px;color:#ffb3b3;padding:0 6px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* section slider */
#sectionbox{display:flex;gap:8px;align-items:center;background:rgba(19,32,46,.7);padding:6px 10px;border-radius:9px;border:1px solid var(--line)}
#sectionbox label{font-size:11px;color:var(--mut);display:flex;gap:6px;align-items:center;cursor:pointer}
#sectionbox input[type=range]{width:120px;accent-color:var(--green)}

/* ---------------- Layer panel (system browser, right) ---------------- */
#layers{position:fixed;top:62px;right:12px;z-index:18;width:230px;background:rgba(19,32,46,.93);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;backdrop-filter:blur(6px)}
#layers .lhdr{padding:9px 12px;font-size:11px;font-weight:800;letter-spacing:.6px;color:#cfe0ee;
  text-transform:uppercase;background:var(--navy);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
#layers .lhdr .mini{font-size:10px;color:var(--mut);cursor:pointer;font-weight:600;text-transform:none}
.lrow{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid rgba(42,66,88,.5);cursor:pointer;user-select:none}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:rgba(122,182,72,.07)}
.lrow input{accent-color:var(--green);width:15px;height:15px;cursor:pointer}
.swatch{width:13px;height:13px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.lrow .lname{font-size:12.5px;color:var(--txt)}
.lrow.off .lname{color:#647688}

/* ---------------- Properties panel (bottom-left) ---------------- */
#props{position:fixed;left:12px;bottom:12px;z-index:18;width:300px;max-height:46vh;overflow:auto;
  background:rgba(19,32,46,.95);border:1px solid var(--line);border-radius:11px;
  transform:translateY(14px);opacity:0;pointer-events:none;transition:.18s;backdrop-filter:blur(6px)}
#props.open{transform:none;opacity:1;pointer-events:auto}
#props .phdr{padding:9px 12px;font-size:11px;font-weight:800;letter-spacing:.6px;color:#cfe0ee;
  text-transform:uppercase;background:var(--navy);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
#props .phdr .x{cursor:pointer;color:var(--mut);font-size:15px}
#propsBody{padding:6px 0}
.prow{display:flex;gap:10px;padding:6px 12px;border-bottom:1px solid rgba(42,66,88,.4);font-size:12px}
.prow:last-child{border-bottom:0}
.prow .pk{flex:none;width:78px;color:var(--green);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.prow .pv{color:var(--txt);line-height:1.4}

/* ---------------- Help / legend (bottom-right toggle) ---------------- */
#helpbtn{position:fixed;right:12px;bottom:12px;z-index:18;width:34px;height:34px;border-radius:50%;
  background:var(--green);color:#10250c;border:0;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
#help{position:fixed;right:12px;bottom:56px;z-index:19;width:290px;background:rgba(19,32,46,.97);
  border:1px solid var(--line);border-radius:11px;padding:14px 15px;display:none;backdrop-filter:blur(6px)}
#help.open{display:block}
#help h3{font-size:12.5px;color:#fff;margin-bottom:8px}
#help p{font-size:11.5px;color:var(--mut);line-height:1.55;margin-bottom:8px}
#help .legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin:8px 0}
#help .lg{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--txt)}
#help .lgdot{width:11px;height:11px;border-radius:3px;flex:none}
#help .disc{font-size:10px;color:#6f8499;line-height:1.5;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}

#loading{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:var(--ink);color:var(--mut);font-size:13px}

@media (max-width:640px){
  #layers{width:190px;top:auto;bottom:56px;right:8px;max-height:42vh;overflow:auto}
  #props{width:calc(100vw - 24px)}
  #toolbar{top:60px;left:8px;right:8px}
  #hdr .eng{display:none}
}