@media (max-width: 1120px) {
  .lab { grid-template-columns: minmax(0, 1fr); }
  .topbar, .app-shell { grid-template-columns: 210px minmax(0, 1fr) auto; }
  .sidebar { width: 210px; }
  .component-dialog { grid-template-columns: minmax(340px, 42%) 1fr; }
  .component-dialog .detail-body { padding: 30px 28px 42px; }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 16px; }
  .top-search { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 8px 0; }
  .topbar { height: 112px; align-content: center; }
  .app-shell { padding-top: 112px; grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: 112px; z-index: 20; width: 100%; height: auto;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--hair);
  }
  .side-kicker, .side-label, .sidebar-foot { display: none; }
  .side-group-label { display: none; }
  .side-nav { flex-direction: row; overflow-x: auto; }
  .side-nav button { grid-template-columns: auto; width: auto; white-space: nowrap; padding: 0 12px; }
  .side-nav svg, .nav-count { display: none; }
  .main { grid-column: 1; }
  .page-head { padding: 28px 20px 22px; }
  .head-row { align-items: flex-start; flex-direction: column; }
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0; border-bottom: 1px solid var(--hair); }
  .principle:last-child { border-bottom: 0; }
  .lab { grid-template-columns: 1fr; }
  .wall { border-right: 0; padding: 22px 18px 48px; }
  .canvas-head { align-items: flex-start; flex-direction: column; }
  .canvas-filters { justify-content: flex-start; }
  .component-dialog {
    position: fixed; inset: 0; width: 100%; max-height: 100%; border: 0; border-radius: 0;
    grid-template-columns: 1fr; transform: translateY(18px); overflow-y: auto;
  }
  .component-dialog.is-open { transform: none; }
  .component-dialog .detail-preview {
    position: relative; top: auto; height: 320px; min-height: 320px;
    border-right: 0; border-bottom: 1px solid var(--hair);
  }
  .component-dialog .detail-preview::after { left: 16px; top: 15px; }
  .preview-close { display: grid; place-items: center; }
  .preview-artboard {
    width: min(350px, calc(100% - 32px)); min-height: 250px; padding: 24px;
    border-radius: 18px;
  }
  .preview-artboard[data-preview="compact"] > * { transform: scale(2); }
  .preview-artboard[data-preview="scene"] > * { transform: scale(1.65); }
  .preview-artboard[data-preview="wide"] > * { width: 94%; }
  .preview-artboard[data-preview="component"] > .ui-demo { min-height: 190px; padding: 20px; }
  .detail-preview.is-mobile .preview-artboard {
    width: 184px; min-height: 278px; padding: 22px 12px 12px; border-width: 4px; border-radius: 24px;
  }
  .detail-preview.is-tablet .preview-artboard {
    width: 260px; min-height: 286px; border-width: 3px; border-radius: 18px;
  }
  .detail-preview.is-mobile .preview-artboard[data-preview="compact"] > * { transform: scale(1.35); }
  .detail-preview.is-mobile .preview-artboard[data-preview="scene"] > * { transform: scale(.98); }
  .detail-preview.is-mobile .preview-artboard[data-preview="component"] > .ui-demo {
    min-height: 224px; padding: 12px;
  }
  .component-dialog .detail-body { max-height: none; padding: 22px 18px 28px; overflow: visible; }
  .component-dialog .detail-top h2 { font-size: 22px; }
  .component-dialog .prompt { max-height: 360px; }
}
@media (max-width: 520px) {
  .brand-version { display: none; }
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .spec { width: 100%; height: auto; aspect-ratio: 1; }
  .spec__caption { flex-basis: 44px; }
  .head-stat { display: none; }
  .device-switch button { padding: 0 7px; }
  .device-switch button, .side-nav button, .icon-btn { min-height: 44px; }
  .ui-pagination button, .ui-tabs button, .ui-mobile-nav button { min-height: 44px; }
  .pal { width: 44px; height: 44px; }
  .pal::before { inset: 14px; }
  .ui-btn, .ui-input, .ui-select, .ui-choice { min-height: 44px; }
  .enterprise-button-system { max-height: 360px; padding: 12px; }
  .button-system-head, .action-family-head { align-items: flex-start; }
  .button-family { padding: 10px; }
  .button-family .ui-row, .action-family-buttons {
    flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x proximity;
  }
  .button-family .ui-btn, .action-family-buttons .ui-btn {
    min-height: 44px; flex: 0 0 auto; scroll-snap-align: start;
  }
  .batch-selection { align-items: flex-start; flex-direction: column; }
  .ui-switch { position: relative; min-height: 22px; }
  .ui-switch::before { content: ""; position: absolute; inset: -10px -3px; }
  .portal[data-kind="modal"] .portal-panel, .portal[data-kind="confirm"] .portal-panel,
  .portal[data-kind="action-confirm"] .portal-panel {
    top: auto; bottom: 0; left: 0; width: 100%; border-radius: 18px 18px 0 0;
    transform: translateY(100%); padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .portal.is-open[data-kind="modal"] .portal-panel, .portal.is-open[data-kind="confirm"] .portal-panel,
  .portal.is-open[data-kind="action-confirm"] .portal-panel { transform: none; }
  .toast-region { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .spec { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ld-wander b, .ld-sweep b { transform: translateX(80%); }
  .ld-ripple i { opacity: .35; transform: scale(.7); }
  .ld-scan b { top: 50%; }
  .ld-swallow.is-run b { width: 100%; }
  .ld-dissolve.is-shown .real { display: block; }
}