/* ── Layout shell ── */
.app-shell { display: flex; min-height: 100vh; }
.main-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-width); }
.page-host  { flex: 1; padding: var(--page-padding); overflow-y: auto; }
.page { display: none; animation: pageIn var(--dur-med) var(--ease-out); }
.page.active { display: block; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page header ── */
.pg-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-xl); flex-wrap: wrap; gap: var(--space-md);
}
.pg-title {
  font-family: var(--font-display);
  font-size: 1.875rem; font-weight: 800;
  letter-spacing: -0.025em; margin: 0 0 var(--space-xs);
  color: var(--text-primary);
}
.pg-subtitle {
  font-family: var(--font-body);
  font-size: 0.9rem; color: var(--text-secondary); margin: 0;
  line-height: 1.5;
}
.pg-header-actions { display: flex; align-items: center; gap: var(--space-md); }

/* ── Noise overlay ── */
#noise-overlay {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.025;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 9999;
}