:root{
  --bg:#071018;--panel:#0b1721;--panel2:#0f202c;--panel3:#0a1a24;
  --line:rgba(143,199,222,.14);--line2:rgba(88,228,213,.18);
  --text:#eaf6fb;--muted:#88a7b5;--cyan:#58e4d5;--cyan2:#1bbba9;
  --blue:#4ca4ff;--yellow:#ffd166;--danger:#ff6b6b;--ok:#55e38a;
  --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)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(7,20,30,.82);border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(88,228,213,.72),rgba(76,164,255,.52));border:2px solid rgba(6,16,24,.9);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(88,228,213,.9),rgba(76,164,255,.7))}
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}
body{overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}
.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;transition:.18s}
.navbtn:hover{color:#cfe8ef;background:rgba(255,255,255,.035)}.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)}
.workspace{min-height:0;overflow:auto;padding:0 22px 28px;scrollbar-gutter:stable}

/* Top plan view: visually blends into the dark workspace rather than feeling like a separate white card. */
.plan-section{position:relative;height:clamp(480px,56vh,640px);margin:0 -22px 22px;overflow:hidden;border-bottom:1px solid rgba(88,228,213,.12);background:radial-gradient(circle at 50% 48%,rgba(18,77,86,.20),transparent 44%),linear-gradient(180deg,rgba(6,16,24,.28),rgba(7,16,24,.82))}
.plan-section:after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg))}
#planCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plan-overlay{position:absolute;left:28px;right:28px;top:22px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;pointer-events:none}
.plan-title{padding:11px 14px;border:1px solid rgba(88,228,213,.10);background:rgba(6,18,26,.52);backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.plan-title strong{display:block;font-size:14px}.plan-title span{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.plan-stats{display:flex;gap:8px}.plan-stat{padding:9px 11px;border:1px solid rgba(143,199,222,.12);background:rgba(6,18,26,.52);backdrop-filter:blur(12px);border-radius:11px;min-width:96px}.plan-stat b{display:block;font-size:15px}.plan-stat small{color:var(--muted);font-size:9px}
.plan-hint{position:absolute;right:28px;bottom:44px;z-index:3;color:#8ba9b6;font-size:10px;background:rgba(6,18,26,.58);border:1px solid rgba(143,199,222,.10);border-radius:999px;padding:7px 10px;pointer-events:none}
.plan-scale{position:absolute;left:28px;bottom:44px;z-index:3;color:#9ec0cb;font-size:10px;background:rgba(6,18,26,.58);border:1px solid rgba(143,199,222,.10);border-radius:999px;padding:7px 10px;pointer-events:none;backdrop-filter:blur(10px)}

.monitor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 12px}.monitor-head h1{font-size:21px;margin:0 0 5px}.monitor-head p{font-size:11px;color:var(--muted);margin:0}.monitor-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-size:10px;padding:5px 8px;border-radius:999px;color:var(--cyan);background:rgba(88,228,213,.08);border:1px solid rgba(88,228,213,.13)}.tag.muted{color:#9bb2bc;background:rgba(255,255,255,.025);border-color:var(--line)}
.plan-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;pointer-events:none}
.plan-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}
.btn{border:1px solid rgba(88,228,213,.17);background:rgba(8,27,35,.72);backdrop-filter:blur(12px);color:var(--cyan);padding:8px 11px;border-radius:10px;font-size:10px;box-shadow:0 8px 24px rgba(0,0,0,.16);transition:.16s}.btn:hover{background:rgba(88,228,213,.13);border-color:rgba(88,228,213,.30)}.btn.secondary{color:#b8ccd4;border-color:rgba(143,199,222,.14);background:rgba(8,22,31,.72)}

.wave-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}.wave-grid.count-1{grid-template-columns:minmax(0,1fr)}
.wave-card{min-width:0;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,rgba(11,28,39,.88),rgba(7,20,29,.90));box-shadow:0 16px 44px rgba(0,0,0,.18);overflow:hidden;transition:.2s}.wave-card-head{height:48px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(143,199,222,.10)}.wave-id{display:flex;align-items:center;gap:9px}.wave-id .live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px rgba(85,227,138,.6)}.wave-id strong{font-size:12px}.wave-id small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.wave-stats{display:flex;align-items:center;gap:11px;color:#9bb5bf;font-size:9px}.wave-stats b{color:#cbe2e8;font-weight:600}.wave-canvas-wrap{position:relative;height:226px}.count-1 .wave-canvas-wrap{height:390px}.count-2 .wave-canvas-wrap{height:330px}.count-3 .wave-canvas-wrap,.count-4 .wave-canvas-wrap{height:285px}.count-5 .wave-canvas-wrap,.count-6 .wave-canvas-wrap,.count-7 .wave-canvas-wrap,.count-8 .wave-canvas-wrap{height:226px}.wave-canvas{width:100%;height:100%;display:block}.wave-legend{position:absolute;left:11px;top:9px;display:flex;gap:10px;font-size:9px;color:#8faab5;pointer-events:none}.wave-legend span{display:inline-flex;align-items:center;gap:5px}.wave-legend i{width:8px;height:2px;border-radius:2px;display:inline-block}.wave-legend .x i{background:var(--cyan)}.wave-legend .y i{background:var(--blue)}.wave-legend .z i{background:var(--yellow)}
.wave-card.disconnected .live-dot{background:var(--danger);box-shadow:none}.wave-card.disconnected .wave-canvas-wrap{display:grid;place-items:center}.card-no-link{color:#6f8b97;font-size:13px;text-align:center}.card-no-link b{display:block;color:#9cb4be;font-size:15px;margin-bottom:5px}
.empty-state{min-height:330px;border:1px dashed rgba(143,199,222,.15);border-radius:15px;background:rgba(255,255,255,.012);display:grid;place-items:center;text-align:center;color:#738f9b}.empty-state b{display:block;font-size:20px;color:#a8bec7;margin-bottom:7px}.empty-state span{font-size:11px}.empty-icon{width:58px;height:58px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;border:1px solid rgba(143,199,222,.12);background:rgba(255,255,255,.018);font-size:23px}
.toast{position:fixed;left:50%;top:84px;transform:translateX(-50%) translateY(-8px);padding:9px 13px;border:1px solid rgba(88,228,213,.17);background:rgba(8,25,30,.94);color:#c9f6f1;border-radius:10px;font-size:11px;opacity:0;pointer-events:none;transition:.22s;z-index:60}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1180px){.project-pill{display:none}.brand{min-width:220px}.plan-stats .plan-stat:nth-child(1){display:none}.plan-section{height:clamp(440px,54vh,580px)}}
@media(max-width:900px){nav{display:none}.brand{min-width:auto}.wave-grid{grid-template-columns:1fr}.plan-section{height:380px}.plan-overlay{left:16px;right:16px;top:14px}.plan-stats{display:none}.plan-hint{right:16px;bottom:34px}.plan-scale{left:16px;bottom:34px}.plan-side{gap:7px}.plan-actions{justify-content:flex-end}.wave-canvas-wrap,.count-2 .wave-canvas-wrap,.count-3 .wave-canvas-wrap,.count-4 .wave-canvas-wrap{height:270px}}

.monitor-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 13px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-label{font-size:9px;color:var(--muted);margin-right:2px}.channel-btn{border:1px solid var(--line);background:rgba(255,255,255,.02);color:#829eaa;border-radius:8px;padding:6px 8px;font-size:9px}.channel-btn.active{color:var(--cyan);border-color:rgba(88,228,213,.22);background:rgba(88,228,213,.07)}.monitor-toolbar select{border:1px solid var(--line);background:#091720;color:#dbeef5;border-radius:8px;padding:6px 8px;font-size:9px}.toolbar-spacer{flex:1}.detail-btn{border:1px solid rgba(76,164,255,.18);background:rgba(76,164,255,.06);color:#a9d0ff;border-radius:8px;padding:6px 8px;font-size:9px}.detail-btn:hover{background:rgba(76,164,255,.12)}
.analysis-mask{position:fixed;inset:70px 0 0;background:rgba(1,8,12,.46);opacity:0;pointer-events:none;transition:.2s;z-index:45}.analysis-mask.show{opacity:1;pointer-events:auto}.analysis-drawer{position:fixed;right:0;top:70px;bottom:0;width:min(460px,94vw);background:linear-gradient(180deg,#0b1b25,#07151e);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.35);transform:translateX(101%);transition:.24s;z-index:46;overflow:auto}.analysis-drawer.show{transform:translateX(0)}.analysis-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line)}.analysis-head h2{margin:0;font-size:17px}.analysis-head small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.analysis-close{border:1px solid var(--line);background:rgba(255,255,255,.02);color:#9ab3be;border-radius:9px;width:32px;height:32px}.analysis-body{padding:15px 18px 24px}.analysis-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.analysis-metric{padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.016)}.analysis-metric b{font-size:13px}.analysis-metric span{display:block;color:var(--muted);font-size:8px;margin-top:4px}.analysis-table{width:100%;border-collapse:collapse;margin:10px 0}.analysis-table th,.analysis-table td{border-bottom:1px solid rgba(143,199,222,.08);padding:8px 6px;font-size:9px;text-align:right}.analysis-table th:first-child,.analysis-table td:first-child{text-align:left;color:var(--muted)}.spectrum-wrap{height:190px;border:1px solid var(--line);border-radius:11px;background:#06131b;overflow:hidden}.spectrum-wrap canvas{width:100%;height:100%;display:block}.detail-note{margin-top:10px;color:#7895a1;font-size:8px;line-height:1.5}

/* 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}}