@media (max-width: 1380px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  body { padding: 14px 10px 28px; }
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 17px; }
  .actions,
  .manager-bar {
    align-items: stretch;
    gap: 10px;
  }
  .left-actions,
  .manager-left,
  .status-stack,
  .manager-right {
    width: 100%;
  }
  .status-stack {
    align-items: flex-start;
    font-size: 14px;
  }
  .manager-right { color: var(--ink-soft); }
  .control-input { width: 100%; }
}

@media (max-width: 760px) {
  body { padding: 10px 8px 22px; }
  .hero,
  .source,
  .panel {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(57, 44, 30, 0.09);
  }
  .hero { padding: 14px; margin-bottom: 10px; }
  .hero h1 {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .hero p { font-size: 16px; line-height: 1.45; }
  .source { padding: 10px; }
  .source-head { margin-bottom: 6px; }
  .source-head strong { font-size: 17px; }
  .source-head span { font-size: 12px; }
  textarea {
    min-height: 122px;
    font-size: 16px;
    padding: 10px;
  }
  button {
    font-size: 15px;
    padding: 10px 12px;
  }
  .left-actions button,
  .manager-left button {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
  #export-all-btn,
  .manager-left .control-input {
    flex: 1 1 100%;
  }
  .control-input,
  .inline-input,
  .inline-textarea {
    font-size: 16px;
  }
  .panel-head {
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .panel-head h2 { font-size: 22px; line-height: 1.15; }
  .panel-head button { width: 100%; }
  .table-wrap {
    max-height: none;
    overflow: visible;
  }
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }
  thead { display: none; }
  tbody tr {
    border-top: 1px solid #e1d4c5;
    padding: 7px 0;
  }
  tbody tr:first-child { border-top: none; }
  td {
    border-bottom: none;
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }
  td::before {
    content: attr(data-label);
    color: #5f513f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    padding-top: 2px;
  }
  td.empty {
    display: block;
    padding: 14px 10px;
  }
  td.empty::before { content: none; }
  .check-wrap,
  .row-action {
    justify-content: flex-start;
  }
  .img-picker {
    align-items: flex-start;
    gap: 6px;
  }
  .img-preview {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .left-actions button,
  .manager-left button {
    flex-basis: 100%;
  }
}