.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: calc(var(--av-space-9) * 3) 1fr;
  grid-template-rows: auto 1fr;
  background: var(--av-bg-canvas);
  color: var(--av-fg-primary);
  font-family: var(--av-font-ui);
}

.app-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--av-space-4);
  padding: var(--av-space-4) var(--av-space-5);
  border-bottom: 1px solid var(--av-line-soft);
  background: linear-gradient(90deg, var(--av-bg-surface-1), rgba(23,30,39,0.9) 50%, var(--av-bg-surface-1));
  box-shadow: 0 1px 0 var(--av-line-soft), 0 4px 16px rgba(0,0,0,0.18);
}

.app-brand {
  font-family: var(--av-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-accent-cyan);
}

#app-breadcrumb {
  color: var(--av-fg-tertiary);
  font-size: var(--av-space-3);
}

.app-user {
  margin-inline-start: auto;
  color: var(--av-fg-secondary);
  font-size: var(--av-space-3);
}

.app-rail {
  border-right: 1px solid var(--av-line-soft);
  background: var(--av-bg-surface-1);
  padding: var(--av-space-3);
}

#app-nav {
  display: grid;
  gap: var(--av-space-1);
}

#app-nav a {
  color: var(--av-fg-secondary);
  text-decoration: none;
  padding: var(--av-space-2) var(--av-space-3);
  border-radius: var(--av-radius-sm);
  transition:
    color       var(--av-duration-control, 150ms) var(--av-easing-out, cubic-bezier(0.16, 1, 0.3, 1)),
    background  var(--av-duration-control, 150ms) var(--av-easing-out, cubic-bezier(0.16, 1, 0.3, 1));
}

#app-nav a:hover {
  color: var(--av-fg-primary);
  background: var(--av-bg-surface-2);
}
#app-nav a[aria-current="page"] {
  color: var(--av-accent-cyan);
  background: linear-gradient(135deg, rgba(24,210,255,0.12), rgba(24,210,255,0.04));
  border-left: 2px solid var(--av-accent-cyan);
  padding-left: calc(var(--av-space-3) - 2px);
  font-weight: 500;
}

#route-outlet {
  padding: var(--av-space-5);
}

/* ── Studio full-bleed mode ───────────────────────────────────── */
.app-shell.studio-mode {
  height: 100vh;
  overflow: hidden;
}
.app-shell.studio-mode #route-outlet {
  padding: 0;
  overflow: hidden;
}
.app-shell.studio-mode .studio-body {
  height: 100%;
  min-height: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }
#shell-boot-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 0.75rem;
  color: var(--av-fg-tertiary, #888);
  font-size: 0.875rem;
}
#shell-boot-loader svg { animation: spin 1s linear infinite; }

/* ── Tablet (≤768px): stack rail above content ─────────────────── */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  .app-header { grid-column: 1; }
  .app-rail {
    border-right: none;
    border-bottom: 1px solid var(--av-line-soft);
    padding: var(--av-space-2) var(--av-space-3);
  }
  #app-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: var(--av-space-1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #app-nav::-webkit-scrollbar { display: none; }
  #app-nav a {
    white-space: nowrap;
    padding: var(--av-space-1) var(--av-space-2);
    font-size: 0.8rem;
  }
  #app-nav a[aria-current="page"] {
    border-left: none;
    border-bottom: 2px solid var(--av-accent-cyan);
    border-radius: 0;
    padding-left: var(--av-space-2);
    padding-bottom: calc(var(--av-space-1) - 2px);
  }
  #route-outlet { padding: var(--av-space-3); }
  .app-shell.studio-mode #route-outlet { padding: 0; }
}

/* ── Phone (≤480px): tighter chrome ───────────────────────────── */
@media (max-width: 480px) {
  .app-header {
    padding: var(--av-space-3);
    gap: var(--av-space-2);
  }
  .app-brand { font-size: 0.78rem; }
  #app-breadcrumb { display: none; }
  #route-outlet { padding: var(--av-space-2); }
  .app-shell.studio-mode #route-outlet { padding: 0; }
}