.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);background:var(--vg-bg)}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;background:rgba(250,253,255,.96);border-right:1px solid var(--vg-border);display:flex;flex-direction:column;z-index:30;backdrop-filter:blur(18px)}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 24px}
.sidebar-brand img{width:128px;height:auto;display:block}
.sidebar-product{font-size:9px;letter-spacing:.19em;color:var(--vg-muted);font-weight:850;margin-top:3px}
.sidebar-section{font-size:10px;font-weight:780;text-transform:uppercase;letter-spacing:.12em;color:#9baab7;padding:5px 10px 8px}
#main-nav{display:grid;gap:5px}
.nav-item{position:relative;width:100%;display:flex;align-items:center;gap:11px;border:1px solid transparent;background:transparent;color:#637589;border-radius:12px;padding:11px 12px;text-align:left;font-weight:680;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.nav-item:hover:not(:disabled){background:#f0f6fb;color:var(--vg-navy)}
.nav-item.active{color:var(--vg-blue);background:#eaf5ff;border-color:#d5ebfc;box-shadow:inset 3px 0 0 var(--vg-blue)}
.nav-icon{width:21px;text-align:center;font-size:16px;line-height:1}
.sidebar-foot{margin-top:auto;padding:12px 8px 4px;color:var(--vg-muted);font-size:11px;line-height:1.5}
.workspace{min-width:0;min-height:100vh;display:grid;grid-template-rows:var(--topbar-h) minmax(0,1fr)}
.topbar{position:sticky;top:0;z-index:25;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 24px;background:rgba(244,248,251,.88);border-bottom:1px solid rgba(217,229,238,.9);backdrop-filter:blur(18px)}
.topbar h1{font-size:18px;line-height:1.1;margin:0;color:var(--vg-navy);font-weight:820}.topbar p{font-size:11px;margin:4px 0 0;color:var(--vg-muted)}
.topbar-status{display:flex;align-items:center;gap:10px}
.connection-pill{display:inline-flex;align-items:center;gap:7px;color:var(--vg-muted);font-size:11px}
.connection-pill[data-state="connected"] .status-dot{background:var(--vg-success);box-shadow:0 0 0 4px rgba(52,199,89,.11)}
.connection-pill[data-state="reconnecting"] .status-dot{background:var(--vg-warning);box-shadow:0 0 0 4px rgba(255,149,0,.11)}
#content{min-width:0;width:100%;max-width:var(--content-max);margin:0 auto;padding:20px 22px 28px}
.view{min-width:0}