@media (max-width: 1180px) {
  #app-shell.shell { grid-template-columns: 230px minmax(0, 1fr); }
  #app-shell .kanban-column { flex-basis: 340px; width: 340px; min-width: 340px; }
}

@media (max-width: 990px) {
  #app-shell.shell { display: block; }
  #app-shell .mobile-app-header {
    height: 56px;
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    border-bottom-color: var(--border);
    backdrop-filter: blur(14px);
  }
  #app-shell .mobile-app-header__toggle { color: var(--fg); }
  #app-shell .rail { width: min(294px, 88vw); box-shadow: var(--shadow-lg); }
  #app-shell .rail-overlay { background: oklch(0.18 0.035 286 / 0.58); backdrop-filter: blur(3px); }
  #app-shell .board { padding-top: 72px; }
  #app-shell .generation-radar { top: 68px; right: 16px; }
}

@media (max-width: 767px) {
  #app-shell.shell { padding-bottom: 64px; }
  #app-shell .board { padding: 68px 12px 84px; }
  #app-shell .workflow-rail { padding: 16px; }
  #app-shell .workflow-rail__heading { align-items: flex-start; }
  #app-shell .workflow-rail__heading h1 { font-size: 19px; }
  #app-shell .workflow-rail ol { gap: 0; padding-bottom: 4px; }
  #app-shell .workflow-rail ol::before { right: 18px; }
  #app-shell .workflow-rail li { flex-basis: 138px; }
  #app-shell .search-collapsible-content { padding: 14px; }
  #app-shell .search-panel__grid { display: grid !important; grid-template-columns: 1fr; }
  #app-shell .search-panel__grid > .field,
  #app-shell .search-panel__side { min-width: 0 !important; }
  #app-shell .search-panel__side .actions { justify-content: stretch !important; }
  #app-shell .search-panel__side .actions > * { flex: 1; }
  #app-shell .metrics { grid-template-columns: 1fr 1fr; }
  #app-shell .metric { min-height: 72px; padding: 13px 15px; }
  #app-shell .metric:nth-child(3) { border-left: 0; border-top-color: var(--border-light); }
  #app-shell .metric:nth-child(4) { border-top-color: var(--border-light); }
  #app-shell .tickets { padding: 13px; }
  #app-shell .tickets__header { gap: 12px; }
  #app-shell .tickets__header > div:last-child { display: grid !important; grid-template-columns: 1fr; }
  #app-shell #local-search { width: 100% !important; }
  #app-shell .bento-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  #app-shell .filter-pill { flex: 0 0 auto; }
  #app-shell #date-filters-container > div { width: 100%; margin-left: 0 !important; padding: 4px 0 0 !important; }
  #app-shell .mobile-kanban-tabs { background: var(--input-bg); border-color: var(--border-light); }
  #app-shell .mobile-kanban-tab-btn { color: var(--fg-secondary); }
  #app-shell .mobile-kanban-tab-btn.active { color: var(--accent); background: var(--surface); }
  #app-shell .kanban-column { width: 100%; min-width: 100%; padding: 12px; }
  #app-shell .ticket__action-group.primary-actions { grid-template-columns: 1fr; }
  #app-shell .generation-radar {
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  #app-shell .generation-radar__list { max-height: min(38vh, 330px); }
  #app-shell .mobile-tab-bar { height: 64px; border-top-color: var(--border); }
  #app-shell .mobile-tab-btn { min-height: 58px; }
  #app-shell .batch-action-bar { bottom: 64px; }
  #app-shell .batch-action-bar__actions .button { min-height: 38px; }
  #app-shell :is(#manual-lead-form, #settings-credentials-form),
  #app-shell #view-subscription > div { max-width: none !important; padding: 20px !important; }
  #app-shell #view-subscription > div > div:nth-child(2) { grid-template-columns: 1fr !important; }
  #app-shell .admin-grid { grid-template-columns: 1fr !important; }
  #app-shell .admin-grid > div { padding: 18px !important; }
  #app-shell .tutorial-header { margin-bottom: 18px; }
  .shell ~ dialog { width: min(94vw, 560px); padding: 22px 18px; }
}

@media (max-width: 480px) {
  #app-shell .workflow-rail__heading { flex-direction: column; gap: 12px; }
  #app-shell .workflow-rail__heading .button { width: 100%; }
  #app-shell .metrics { border-radius: 9px; }
  #app-shell .metric__value { font-size: 22px; }
  #app-shell .tickets__title { font-size: 19px; }
  #app-shell .empty-state { min-height: 240px; padding: 22px !important; }
  #app-shell .empty-state__actions { width: 100%; }
  #app-shell .empty-state__actions .button { width: 100%; }
  #app-shell .batch-action-bar__actions { padding-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  #app-shell .workflow-rail li.is-current > span,
  #app-shell .card--generating,
  #app-shell .quota-widget__bar { box-shadow: none; }
  #app-shell .generation-radar__signal,
  #app-shell .generation-radar__spinner { animation: none; }
  #app-shell .generation-radar__progress span { transition: none; }
  .shell ~ dialog[open] { animation: none; }
}