@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { height: auto; position: static; padding: 10px 12px; }
  .sidebar-brand { padding: 2px 4px 10px; }
  .nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .nav button { flex: 0 0 auto; white-space: nowrap; text-align: center; }
  .sidebar-foot { position: static; margin-top: 6px; }
  .sidebar-foot .btn { width: auto; }
  .topbar { padding: 0 14px; }
  .content { padding: 16px 14px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .nav button { white-space: normal; }
  .sidebar-brand { font-size: 15px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric { padding: 12px; }
  .metric-value { font-size: 24px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions > .btn { flex: 1; }
  .top-actions .username { display: none; }
  .modal-backdrop { padding: 8px; }
  .modal { max-height: calc(100vh - 16px); }
  .modal-head, .modal-body, .modal-foot { padding: 13px 14px; }
  .aws-lifecycle-status-grid { grid-template-columns: 1fr; }
  .aws-detail-state { padding: 0 0 8px 10px; }
  .aws-timeline-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .aws-lifecycle-retry { display: grid; grid-template-columns: 1fr; }
  .aws-lifecycle-retry .btn { width: 100%; }
}