html { min-width: 320px; background: var(--core-bg); }
body { overflow-x: hidden; background: var(--core-bg); color: var(--core-text); }
.app-shell { min-height: 100dvh; }
.app-header { height: var(--core-topbar); padding: 0 clamp(14px, 2.2vw, 32px); background: color-mix(in srgb, var(--core-surface) 94%, transparent); }
.app-body { min-height: calc(100dvh - var(--core-topbar)); }
.app-sidebar { width: var(--core-sidebar); flex-basis: var(--core-sidebar); padding: 20px 14px max(20px, env(safe-area-inset-bottom)); }
.app-main > .layout { width: 100%; max-width: 1480px; padding: clamp(20px, 2.6vw, 38px); }
.mobile-nav-backdrop { display: none; position: fixed; inset: var(--core-topbar) 0 0; z-index: 38; border: 0; background: rgba(5, 12, 24, .55); }
.shell-context { display: flex; align-items: center; gap: 8px; min-width: 0; }
.context-form { margin: 0; }
.context-control { min-width: 150px; max-width: 240px; height: 42px; margin: 0; padding: 7px 30px 7px 11px; background: var(--core-surface-muted); border-color: var(--core-border); font-size: 12px; font-weight: 700; }
.header-actions { min-width: 0; }
.sidebar-context { display: none; }

@media (max-width: 1279px) {
  .shell-system-state { display: none; }
}

@media (max-width: 1100px) {
  .app-header { gap: 12px; }
  .header-start, .header-actions { gap: 8px; }
  .header-actions .env-badge { display: none; }
}

@media (max-width: 1023px) {
  .mobile-only { display: inline-grid; }
  .app-sidebar { position: fixed; z-index: 40; top: var(--core-topbar); bottom: 0; left: 0; overflow-y: auto; transform: translateX(-105%); box-shadow: var(--core-shadow); transition: transform .2s ease; }
  .app-sidebar.open { transform: translateX(0); }
  .mobile-nav-backdrop.open { display: block; }
  body.nav-open { overflow: hidden; }
  .app-main { width: 100%; }
  .user-copy, .org-switcher { display: none; }
  .shell-context .organization-context { display: none; }
  .sidebar-context { display: grid; gap: 10px; margin-bottom: 16px; padding: 12px; border-bottom: 1px solid var(--core-border); }
  .sidebar-context form { margin: 0; }
  .sidebar-context label { margin: 0 0 5px; color: var(--core-text-muted); font-size: 10px; }
  .sidebar-context select { width: 100%; }
  .sidebar-preferences { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

@media (max-width: 860px) {
  :root { --core-topbar: 64px; }
  .app-header { gap: 8px; }
  .app-brand { min-width: 0; }
  .app-brand > span:last-child { display: none; }
  .header-actions .env-badge, .header-actions .user-menu { display: none; }
}

@media (max-width: 767px) {
  .shell-context { flex: 1; justify-content: flex-end; }
  .context-control { min-width: 112px; max-width: 42vw; }
  .app-main > .layout { padding: 20px 14px calc(24px + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .page-heading h1 { font-size: clamp(27px, 9vw, 34px); }
}

@media (max-width: 430px) {
  .app-header .header-actions .preference-form { display: none; }
  .shell-context { display: none; }
  .context-control { max-width: 52vw; }
}