:root{
      --bg:#071018;
      --panel:#0b1721;
      --panel2:#0f202c;
      --line:rgba(143,199,222,.14);
      --text:#eaf6fb;
      --muted:#88a7b5;
      --cyan:#58e4d5;
      --cyan2:#1bbba9;
      --blue:#4ca4ff;
      --yellow:#ffd166;
      --danger:#ff6b6b;
      --ok:#55e38a;
      --scroll-track:rgba(7,20,30,.82);
      --scroll-thumb:linear-gradient(180deg, rgba(88,228,213,.72), rgba(76,164,255,.52));
      --scroll-thumb-border:rgba(88,228,213,.16);
      --shadow:0 18px 60px rgba(0,0,0,.30);
    }
    *{box-sizing:border-box}
    *{scrollbar-width:thin;scrollbar-color:rgba(88,228,213,.62) rgba(7,20,30,.72)}
    aside, .node-list{scrollbar-gutter:stable}
    aside::-webkit-scrollbar, .node-list::-webkit-scrollbar{width:10px;height:10px}
    aside::-webkit-scrollbar-track, .node-list::-webkit-scrollbar-track{
      background:var(--scroll-track);
      border-left:1px solid rgba(255,255,255,.03);
      border-radius:999px;
      box-shadow:inset 0 0 0 1px rgba(88,228,213,.05);
    }
    aside::-webkit-scrollbar-thumb, .node-list::-webkit-scrollbar-thumb{
      background:var(--scroll-thumb);
      border-radius:999px;
      border:2px solid rgba(6,16,24,.9);
      box-shadow:0 0 0 1px var(--scroll-thumb-border), inset 0 0 8px rgba(255,255,255,.08);
    }
    aside::-webkit-scrollbar-thumb:hover, .node-list::-webkit-scrollbar-thumb:hover{
      background:linear-gradient(180deg, rgba(88,228,213,.86), rgba(76,164,255,.68));
    }
    aside::-webkit-scrollbar-corner, .node-list::-webkit-scrollbar-corner{background:transparent}
    html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;overflow:hidden}
    button,input,select{font:inherit}
    button{cursor:pointer}
    .app{
      height:100vh;
      display:grid;
      grid-template-rows:70px 1fr;
      background:
        radial-gradient(circle at 70% 10%, rgba(37,113,124,.11), transparent 26%),
        radial-gradient(circle at 12% 88%, rgba(50,88,135,.08), transparent 22%),
        var(--bg);
    }
    header{
      display:flex;align-items:center;gap:18px;padding:0 22px;
      border-bottom:1px solid var(--line);background:rgba(6,14,20,.88);backdrop-filter:blur(16px);
      position:relative;z-index:30
    }
    .brand{display:flex;align-items:center;gap:12px;min-width:280px}
    .logo{
      width:38px;height:38px;border-radius:12px;position:relative;
      background:linear-gradient(145deg,rgba(88,228,213,.25),rgba(76,164,255,.12));
      border:1px solid rgba(88,228,213,.32);box-shadow:inset 0 0 24px rgba(88,228,213,.08)
    }
    .logo:before,.logo:after{content:"";position:absolute;left:7px;right:7px;height:2px;background:var(--cyan);border-radius:2px}
    .logo:before{top:12px;transform:rotate(18deg);box-shadow:0 8px 0 rgba(88,228,213,.62)}
    .logo:after{top:20px;transform:rotate(-18deg)}
    .brand strong{font-size:16px;letter-spacing:.3px}
    .brand span{display:block;font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.5px}
    nav{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      display:flex;align-items:center;justify-content:center;gap:8px;
      z-index:2;
    }
    .navbtn{
      border:0;background:transparent;color:#8ba9b6;padding:10px 13px;border-radius:10px;
      text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;font-size:16px
    }
    .navbtn.active{background:rgba(88,228,213,.09);color:var(--cyan)}
    .header-spacer{flex:1}
    .project-pill,.status-pill{
      display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);
      border-radius:12px;color:#b9d0d9;background:rgba(255,255,255,.025);font-size:12px
    }
    .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
    .main{
      min-height:0;display:grid;grid-template-columns:285px minmax(420px,1fr) 330px;gap:0;
    }
    aside{
      background:linear-gradient(180deg,rgba(10,24,34,.96),rgba(7,18,26,.96));
      border-right:1px solid var(--line);min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(88,228,213,.62) rgba(7,20,30,.72)
    }
    aside.right{border-right:0;border-left:1px solid var(--line)}
    .section{padding:18px;border-bottom:1px solid var(--line)}
    .section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .section-title h3{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;margin:0;color:#afc6cf}
    .tag{font-size:10px;padding:4px 7px;border-radius:999px;color:var(--cyan);background:rgba(88,228,213,.08);border:1px solid rgba(88,228,213,.13)}
    .metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
    .metric{
      padding:11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018)
    }
    .metric .v{font-size:20px;font-weight:700;letter-spacing:-.5px}
    .metric .k{margin-top:4px;color:var(--muted);font-size:10px}
    .device{
      display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;
      padding:10px 0;border-bottom:1px dashed rgba(143,199,222,.11)
    }
    .device:last-child{border-bottom:0}
    .device-icon{
      width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
      background:rgba(76,164,255,.08);border:1px solid rgba(76,164,255,.13);font-size:16px
    }
    .device strong{font-size:12px}
    .device small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
    .signal{font-size:10px;color:var(--ok)}
    .viewport{position:relative;min-width:0;overflow:hidden;background:#07121a}
    #scene{width:100%;height:100%;display:block}
    .topbar{
      position:absolute;left:16px;right:16px;top:16px;display:flex;align-items:center;gap:8px;pointer-events:none
    }
    .toolgroup{
      pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px;
      background:rgba(7,18,25,.78);backdrop-filter:blur(14px);border:1px solid var(--line);
      border-radius:13px;box-shadow:var(--shadow)
    }
    .toolbtn{
      border:0;background:transparent;color:#a8c2cc;padding:8px 10px;border-radius:8px;font-size:12px
    }
    .toolbtn:hover,.toolbtn.active{background:rgba(88,228,213,.10);color:var(--cyan)}
    .topbar .spacer{flex:1}
    .scene-badge{
      pointer-events:auto;padding:9px 12px;border-radius:12px;border:1px solid var(--line);
      background:rgba(7,18,25,.78);backdrop-filter:blur(14px);color:#bad0d8;font-size:11px
    }
    .hud{
      position:absolute;left:16px;bottom:16px;display:flex;gap:8px;pointer-events:none
    }
    .hud-card{
      min-width:108px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
      background:rgba(7,18,25,.80);backdrop-filter:blur(14px);box-shadow:var(--shadow)
    }
    .hud-card .v{font-size:16px;font-weight:700}
    .hud-card .k{font-size:9px;color:var(--muted);margin-top:4px}
    .legend{
      position:absolute;right:16px;bottom:16px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
      background:rgba(7,18,25,.80);backdrop-filter:blur(14px);font-size:10px;color:var(--muted)
    }
    .legend-row{display:flex;align-items:center;gap:7px;margin:5px 0}
    .legend-dot{width:7px;height:7px;border-radius:50%}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
    .field label{display:block;font-size:10px;color:var(--muted);margin:0 0 6px 1px}
    .field input,.field select{
      width:100%;border:1px solid var(--line);background:#091720;color:#dbeef5;border-radius:10px;
      padding:9px 10px;outline:none;font-size:12px
    }
    .field input:focus,.field select:focus{border-color:rgba(88,228,213,.38);box-shadow:0 0 0 3px rgba(88,228,213,.05)}
    .btnrow{display:flex;gap:8px;margin-top:10px}
    .btn{
      flex:1;border:1px solid rgba(88,228,213,.17);background:rgba(88,228,213,.08);color:var(--cyan);
      padding:9px 10px;border-radius:10px;font-size:11px
    }
    .btn:hover{background:rgba(88,228,213,.13)}
    .btn.secondary{color:#b8ccd4;border-color:var(--line);background:rgba(255,255,255,.025)}
    .btn.danger{color:#ff9999;border-color:rgba(255,107,107,.18);background:rgba(255,107,107,.06)}
    .node-list{max-height:220px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(88,228,213,.62) rgba(7,20,30,.72)}
    .node-item{
      display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 10px;border-radius:10px;margin-bottom:6px;
      border:1px solid transparent;background:rgba(255,255,255,.018);cursor:pointer
    }
    .node-item:hover,.node-item.active{border-color:rgba(88,228,213,.17);background:rgba(88,228,213,.055)}
    .node-item strong{font-size:11px}
    .node-item small{display:block;font-size:9px;color:var(--muted);margin-top:3px}
    .node-state{font-size:9px;color:var(--ok);align-self:center}
    .health{
      height:6px;border-radius:999px;background:#0a141b;overflow:hidden;margin-top:8px;border:1px solid rgba(255,255,255,.025)
    }
    .health i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan2),var(--cyan));width:78%}
    .empty{
      padding:13px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:10px;text-align:center
    }
    .toast{
      position:absolute;left:50%;top:82px;transform:translateX(-50%) translateY(-8px);
      padding:9px 13px;border:1px solid rgba(88,228,213,.17);background:rgba(8,25,30,.92);
      color:#c9f6f1;border-radius:10px;font-size:11px;opacity:0;pointer-events:none;transition:.22s;z-index:40
    }
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .mode-tip{
      position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;
      padding:9px 12px;background:rgba(8,25,30,.9);border:1px solid rgba(88,228,213,.17);border-radius:11px;
      color:var(--cyan);font-size:11px;pointer-events:none
    }
    .mode-tip.show{display:block}
    .measure-label{
      position:absolute;display:none;transform:translate(-50%,-50%);z-index:35;pointer-events:none;
      padding:7px 10px;border-radius:9px;border:1px solid rgba(255,209,102,.34);
      background:rgba(10,24,30,.92);color:#ffe29a;font-size:11px;font-weight:700;
      box-shadow:0 8px 24px rgba(0,0,0,.24);white-space:nowrap
    }
    .measure-label.show{display:block}
    @media(max-width:1180px){
      .main{grid-template-columns:250px 1fr}
      aside.right{position:absolute;right:0;top:70px;bottom:0;width:320px;z-index:20;box-shadow:-20px 0 50px rgba(0,0,0,.25)}
      .project-pill{display:none}
    }
    @media(max-width:820px){
      .main{grid-template-columns:1fr}
      aside.left{display:none}
      aside.right{display:none}
      nav{display:none}
      .brand{min-width:auto}
    }
  .hud .hud-card:nth-child(3){display:none}

/* Header layout hardening. */
header{min-width:0}
.brand{width:280px;min-width:280px;max-width:280px;overflow:hidden}
.brand>div:last-child{min-width:0;overflow:hidden}
.brand strong,.brand span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav{min-width:0}
.navbtn{flex:0 0 auto;min-width:0}
.project-pill{min-width:0;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-pill{flex:0 0 auto}
.head-actions{flex-wrap:wrap;justify-content:flex-end}
.plan-actions{flex-wrap:wrap;justify-content:flex-end}
.toolbar-group{flex-wrap:wrap}
@media(max-width:1320px){.brand{width:235px;min-width:235px;max-width:235px}.brand span{display:none}}
@media(max-width:1120px){.status-pill{display:none}}
@media(max-width:900px){.brand{width:auto;min-width:auto;max-width:none}.brand span{display:none}.head-actions{justify-content:flex-start}}