:root{
  --green:#0b8f4e;
  --green-2:#12b463;
  --ink:#0d1b22;
  --glass:rgba(12,24,30,.72);
  --glass-2:rgba(12,24,30,.55);
  --line:rgba(140,200,175,.22);
  --txt:#e6f1ee;
  --dim:#9fb3ae;
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05090c;font-family:var(--font);color:var(--txt)}
#app{position:fixed;inset:0}
canvas#scene{display:block;width:100%;height:100%;outline:none}

/* ---------- 标注层 ---------- */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{
  position:absolute;transform:translate(-50%,-50%);
  padding:3px 8px;border-radius:5px;white-space:nowrap;
  font-size:11px;letter-spacing:.4px;line-height:1.2;
  background:rgba(6,16,20,.66);border:1px solid rgba(150,220,190,.28);
  color:#dff3ea;backdrop-filter:blur(6px);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.lbl.k-hv550{border-color:rgba(255,196,120,.42);color:#ffe0b8}
.lbl.k-hv220{border-color:rgba(130,200,255,.42);color:#d5ecff}
.lbl.k-xfmr{border-color:rgba(255,150,150,.45);color:#ffd6d6}
.lbl.k-lv35{border-color:rgba(170,255,180,.4);color:#d8ffe0}
.lbl.k-bldg{border-color:rgba(230,225,205,.45);color:#f4f0e2}
.lbl.k-site{border-color:rgba(160,255,220,.4);color:#d3fff0;font-weight:600}
.lbl::before{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;
  background:linear-gradient(to bottom,rgba(160,255,220,.5),transparent);
}

/* ---------- 顶栏 ---------- */
#topbar{
  position:absolute;left:0;right:0;top:0;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;gap:18px;
  background:linear-gradient(to bottom,rgba(4,12,16,.88),rgba(4,12,16,0));
  pointer-events:none;
}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:38px;height:38px;flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(18,180,99,.45))}
.brand h1{margin:0;font-size:16.5px;font-weight:700;letter-spacing:1.2px}
.brand p{margin:2px 0 0;font-size:11.5px;color:var(--dim);letter-spacing:.6px}
.stats{display:flex;gap:14px;font-size:11.5px;color:var(--dim)}
.stats b{display:block;font-size:15px;color:var(--green-2);font-weight:700;letter-spacing:.5px}
.stats div{text-align:right}

/* ---------- 面板 ---------- */
#panel{
  position:absolute;left:14px;top:74px;width:246px;max-height:calc(100% - 150px);
  overflow:auto;padding:12px;border-radius:12px;
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:transform .28s ease,opacity .28s ease;
}
#panel::-webkit-scrollbar{width:6px}
#panel::-webkit-scrollbar-thumb{background:rgba(140,200,175,.28);border-radius:3px}
#panel.hide{transform:translateX(-300px);opacity:0}
.grp{margin-bottom:14px}
.grp h3{
  margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:2px;color:var(--green-2);
  text-transform:uppercase;display:flex;align-items:center;gap:7px;
}
.grp h3::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--line),transparent)}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.btns button{
  font-family:var(--font);font-size:11.5px;padding:7px 4px;cursor:pointer;
  color:#d7e8e3;background:rgba(255,255,255,.05);
  border:1px solid rgba(150,220,190,.16);border-radius:7px;
  transition:.15s;letter-spacing:.3px;
}
.btns button:hover{background:rgba(18,180,99,.18);border-color:rgba(18,180,99,.5);color:#fff}
.btns button.on{background:rgba(18,180,99,.3);border-color:var(--green-2);color:#fff;box-shadow:0 0 12px rgba(18,180,99,.25)}
.sw{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 2px;cursor:pointer;color:#cfe0db}
.sw input{appearance:none;width:32px;height:17px;border-radius:9px;background:rgba(255,255,255,.14);position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}
.sw input::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#8ea6a0;transition:.2s}
.sw input:checked{background:rgba(18,180,99,.4)}
.sw input:checked::after{left:17px;background:var(--green-2)}
.rg{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#cfe0db;padding:4px 2px}
.rg span{flex:0 0 30px;color:var(--dim)}
.rg input[type=range]{flex:1;appearance:none;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.rg input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--green-2);cursor:pointer;box-shadow:0 0 8px rgba(18,180,99,.7)}
.legend ul{list-style:none;margin:0;padding:0;font-size:11px;color:#bed1cb}
.legend li{display:flex;align-items:center;gap:7px;padding:3px 0}
.legend i{width:11px;height:11px;border-radius:2.5px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}

/* ---------- 提示 ---------- */
#hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:14px;font-size:11px;color:#93aaa4;
  padding:7px 16px;border-radius:20px;background:var(--glass-2);
  border:1px solid var(--line);backdrop-filter:blur(10px);white-space:nowrap;
}
#hint b{color:var(--green-2);font-weight:600}

#tip{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
  padding:6px 10px;border-radius:7px;font-size:11.5px;max-width:250px;
  background:rgba(6,16,20,.9);border:1px solid rgba(150,220,190,.3);color:#e2f5ee;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#tip.on{opacity:1}
#tip b{color:var(--green-2)}
#tip .d{color:#9fb3ae;font-size:10.5px;display:block;margin-top:3px;line-height:1.5}

/* ---------- Loading ---------- */
#loading{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(circle at 50% 45%,#0a1a20,#03070a 70%);z-index:50;transition:opacity .7s;
}
#loading.done{opacity:0;pointer-events:none}
#loading .ring{width:52px;height:52px;border-radius:50%;border:2px solid rgba(18,180,99,.18);border-top-color:var(--green-2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading .txt{font-size:12.5px;letter-spacing:2px;color:#8fb3aa}
#loading .bar{width:220px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#loading .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-2));transition:width .3s}

@media (max-width:820px){
  #panel{width:200px;top:68px}
  .brand h1{font-size:13px}
  .brand p{display:none}
  .stats{display:none}
  #hint span:nth-child(n+4){display:none}
}