/* Shell */
.shell{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:16px;
  position:sticky;top:0;z-index:30;backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(to bottom, rgba(5,6,10,.85), rgba(5,6,10,.4));
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-mark{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(160deg,#ff9a4a,#d95a00);
  box-shadow:0 0 0 1px rgba(255,180,120,.25),0 8px 24px -6px rgba(255,100,20,.6),inset 0 1px 0 rgba(255,255,255,.25);
  display:grid;place-items:center;position:relative}
.brand-mark svg{width:18px;height:18px;color:#fff}
.brand-mark::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 18px 2px rgba(255,140,40,.6);opacity:.6}
.brand-name{font-weight:700;font-size:18px;letter-spacing:-0.01em}
.brand-name em{font-style:normal;color:var(--ember)}

.top-nav{display:flex;gap:4px}
.nav-btn{padding:8px 14px;border-radius:8px;font-size:13px;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:8px;transition:.15s;cursor:pointer}
.nav-btn:hover{background:rgba(255,255,255,.03);color:var(--text)}
.nav-btn.active{background:rgba(255,120,30,.12);color:var(--ember);box-shadow:inset 0 0 0 1px var(--line-strong)}

.net-pill{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim)}
.net-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);position:relative}
.net-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--ok);opacity:.6;animation:pulse 2s ease-out infinite}
.net-dot.degraded{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.net-dot.degraded::after{border-color:var(--warn)}
@keyframes pulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2);opacity:0}}

main{flex:1;position:relative;padding:22px 24px 80px;max-width:1320px;margin:0 auto;width:100%}

.view{display:none}
.view.active{display:block;animation:viewin .3s ease}
@keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}