.app-shell {
  min-height:100vh;
  width:100vw;
  max-width:100vw;
  display:grid;
  grid-template-columns:250px minmax(0, 1fr) 0;
  position:relative;
  z-index:1;
}

body.activity-open .app-shell {
  grid-template-columns:250px minmax(0, 1fr) 380px;
}

.side-nav {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:22px 18px 18px;
  border-right:1px solid rgba(248,189,36,.22);
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.12)),
    image-set(url("/dashboard/phantompass-ghost.webp") type("image/webp"), url("/dashboard/phantompass-ghost.png") type("image/png")) center bottom 84px / 276px auto no-repeat,
    radial-gradient(circle at 50% 76%, rgba(248,189,36,.22), transparent 25%),
    linear-gradient(180deg, #070706, #0b0a08 48%, #050505);
  overflow:hidden;
}

.side-nav:after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:430px;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.08) 28%, rgba(0,0,0,.9) 76%);
}

.side-nav > * {
  position:relative;
  z-index:1;
}

.brand-block {
  justify-content:center;
  margin:0 0 22px;
  min-height:76px;
  overflow:visible;
}

.brand-block img {
  width:212px;
  height:auto;
  max-height:120px;
  object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(248,189,36,.3));
}

.nav-list {
  display:grid;
  gap:7px;
  position:relative;
  z-index:2;
}

.nav-item,
.help-button,
.collapse-button,
.plan-card button,
.ghost-button,
.outline-button,
.gold-button,
.icon-button,
.mini-button,
.user-menu,
.chip-button,
.row-button {
  min-height:38px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  color:var(--ink);
}

.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 14px;
  text-align:left;
  color:#d8d2c8;
  background:rgba(255,255,255,.025);
}

.nav-item span {
  width:24px;
  display:inline-grid;
  place-items:center;
  color:#d6d0c5;
}

.nav-item:hover {
  border-color:rgba(248,189,36,.38);
  color:#f1e8d7;
  background:linear-gradient(90deg, rgba(248,189,36,.12), rgba(248,189,36,.03));
  box-shadow:0 0 16px rgba(248,189,36,.08) inset;
}

.nav-item.active {
  border-color:rgba(248,189,36,.72);
  color:var(--gold-2);
  background:linear-gradient(90deg, rgba(248,189,36,.28), rgba(248,189,36,.05));
  box-shadow:0 0 22px rgba(248,189,36,.14) inset, 0 0 18px rgba(248,189,36,.14);
}

.plan-card {
  display:grid;
  gap:9px;
  margin-top:auto;
  padding:16px;
  border:1px solid rgba(248,189,36,.42);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(248,189,36,.2), rgba(248,189,36,.06));
  position:relative;
  z-index:2;
}

.plan-card strong { color:var(--gold-2); }
.meter {
  height:7px;
  border-radius:999px;
  background:#2a2925;
  overflow:hidden;
}
.meter span {
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
}

.help-button,
.collapse-button {
  width:100%;
  margin-top:12px;
  position:relative;
  z-index:2;
}

.collapse-button { margin-top:20px; }

.workspace {
  min-width:0;
  padding:28px 30px 34px;
  overflow:auto;
  max-height:100vh;
  background:
    radial-gradient(circle at 88% 9%, rgba(248,189,36,.12), transparent 30%),
    radial-gradient(circle at 18% 96%, rgba(248,189,36,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.01), transparent 34%);
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
}

.title-block h1 {
  margin:0;
  font-size:32px;
  line-height:1.1;
  font-weight:850;
}

.title-block p {
  margin:7px 0 0;
  color:var(--muted);
}

.topbar-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.search-box {
  width:min(330px, 26vw);
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(8,8,8,.86);
  padding:0 10px;
}

.search-box input {
  border:0;
  background:transparent;
  box-shadow:none;
  padding:11px 0;
}

.workspace-select {
  width:230px;
  min-height:42px;
  text-overflow:ellipsis;
}

.user-menu {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:7px 12px;
}

.user-menu span:last-child {
  display:grid;
  text-align:left;
}

.avatar {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold-2);
  background:#12100b;
  font-weight:900;
}

.icon-button {
  min-width:40px;
  padding:0 10px;
}

.badge {
  position:relative;
  min-width:42px;
  min-height:42px;
  font-size:18px;
  color:var(--gold);
}

.badge span {
  position:absolute;
  top:-9px;
  right:-3px;
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--gold);
  color:#1a1202;
  font-size:12px;
  font-weight:900;
}

.badge:not(.has-unread) span {
  display:none;
}

.status-strip {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  min-height:38px;
  margin-bottom:18px;
}

.status-pill,
.tag,
.role-pill,
.health-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#d8d2c8;
  white-space:nowrap;
}

.status-pill.ok,
.health-pill.ok { color:var(--green); border-color:rgba(40,211,104,.28); background:rgba(40,211,104,.1); }
.status-pill.warn,
.health-pill.warn { color:var(--gold-2); border-color:rgba(248,189,36,.35); background:rgba(248,189,36,.1); }
.status-pill.bad,
.health-pill.bad { color:var(--red); border-color:rgba(255,78,66,.32); background:rgba(255,78,66,.1); }
.status-pill.blue { color:var(--blue); border-color:rgba(46,145,255,.3); background:rgba(46,145,255,.1); }

.screen-host {
  display:grid;
  gap:16px;
}