@media (max-width: 650px) {
  header { padding: 4px 7px; }
  .brand { gap: 5px; }
  .brand img { width: 27px; border-radius: 7px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 8px; }
  .ghost { padding: 5px 7px; font-size: 10px; }
  .tabs { top: 35px; }
  .tabs button { padding: 7px 2px; font-size: 11px; }
  main { padding: 4px; }
  .summary { padding: 4px 7px; border-radius: 7px; font-size: 10px; }
  .summary b { margin-left: 4px; font-size: 14px; }
  .summary b:first-child { margin-left: 0; }
  .filters { grid-template-columns: 1fr 1fr; gap: 3px; margin: 4px 0; }
  .filters input { grid-column: 1 / -1; }
  .filters input,
  .filters select { height: 31px; border-radius: 6px; padding: 0 6px; font-size: 11px; }
  .project-box { grid-template-columns: 1fr; gap: 7px; }
  .inspection-summary { grid-template-columns: 1fr 1fr; }
  .list,
  .checks { gap: 2px; }
  .sop-row {
    min-height: 0;
    padding: 4px;
    border-radius: 6px;
    grid-template-columns: 21px minmax(0, 1fr) auto;
    gap: 3px;
    align-items: start;
  }
  .sop-row .num { padding-top: 1px; font-size: 9px; }
  .sop-row b {
    margin-bottom: 1px;
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
  }
  .sop-row p {
    font-size: 10.5px;
    line-height: 1.18;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  .sop-row .badge {
    grid-column: auto;
    align-self: center;
    padding: 2px 3px;
    font-size: 8px;
    white-space: nowrap;
  }
  .check-row { grid-template-columns: 30px 1fr; }
  .check-row .badge { grid-column: 2; }
  .dialog-body { padding: 14px; }
}