.app-shell {
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 58px 1fr 34px;
  grid-template-areas:
    "menu menu"
    "canvas panel"
    "status status";
}

.menu-bar {
  grid-area: menu;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem .9rem;
  background: #15181e;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .02em;
}

.brand-mark { color: var(--accent); }

.menu-groups {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.menu-group {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding-inline-end: .75rem;
  border-right: 1px solid var(--line);
}

.menu-group:last-child { border-right: 0; }

.menu-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.right-panel {
  grid-area: panel;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow: auto;
  padding: 1rem;
}

.canvas-workspace {
  grid-area: canvas;
  min-width: 0;
  min-height: 0;
  background: radial-gradient(circle at center, #30343c 0, #20242b 55%, #16191f 100%);
  padding: 24px;
}

.status-bar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 .85rem;
  background: #15181e;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "menu"
      "canvas"
      "status";
  }

  .right-panel {
    position: absolute;
    right: 0;
    top: 58px;
    bottom: 34px;
    width: 280px;
    box-shadow: -10px 0 30px #0006;
  }

  .menu-bar { align-items: flex-start; }
  .menu-groups { gap: .35rem; }
  .menu-group { padding-inline-end: .35rem; }
  .menu-group button { padding: .45rem .55rem; }
  .status-bar { gap: .5rem; overflow: auto; }
}