@media (max-width: 760px) {
  .brand span:last-child { display: none; }
  .nav-item { font-size: 0; }
  .nav-item .icon { font-size: 18px; }
  main { overflow: hidden; }
  .avatar { display: none; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { min-width: 0; padding: 10px; gap: 8px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric strong { font-size: 18px; }
  .toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field, .field.search { min-width: 0; }
}

@media (max-width: 480px) {
  .metrics { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
  .metric { min-height: 70px; }
}

.qty-input {
  width: 88px;
  height: 32px;
  border: 1px solid #b8c8dd;
  border-radius: 4px;
  padding: 0 8px;
  color: #172033;
  font-weight: 700;
}
.qty-input:focus { outline: 2px solid #bcd8ff; border-color: #1668dc; }
.history-cell { min-width: 148px; }
.history-cell b { display: block; }
.history-cell small { display: block; color: #6c778b; margin-top: 3px; }
.season-profile-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 18px; }
.season-profile-list div { display: flex; justify-content: space-between; border: 1px solid #e5e9f0; padding: 9px; }
.season-profile-list span { color: #6c778b; }
.trend-chart { border: 1px solid #e5e9f0; background: #fff; padding: 10px; margin-bottom: 14px; }
.trend-chart svg { display: block; width: 100%; height: 170px; }
.trend-legend { display: flex; gap: 16px; color: #6c778b; font-size: 11px; margin-bottom: 8px; }
.trend-legend i { display: inline-block; width: 18px; height: 3px; margin-right: 5px; vertical-align: middle; }
.approval-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.approval-check input { width: 17px; height: 17px; accent-color: #0d9b66; }
.approval-check.done { color: #0d9b66; font-weight: 700; }
.ding-btn { min-width: 82px; }
.ding-btn:disabled { background: #eef1f5; border-color: #e0e5ec; color: #9aa4b2; cursor: not-allowed; }
.source-note { max-width: 180px; white-space: normal; line-height: 1.45; }
.source-note small { display: block; color: #1668dc; margin-top: 3px; }
.table-wrap table { width: max-content; min-width: 100%; }
.shipment-cell { min-width: 145px; white-space: normal; line-height: 1.5; }
.shipment-cell b { display: block; }
.shipment-cell small { color: #6c778b; }
.note-input { width: 180px; min-height: 54px; resize: vertical; border: 1px solid #d9dfe8; border-radius: 4px; padding: 7px 8px; font: inherit; line-height: 1.4; }
.note-input:focus { outline: 2px solid #bcd8ff; border-color: #1668dc; }
.season-tab-tools { display: flex; align-items: center; gap: 7px; }
.season-pills { display: flex; gap: 5px; align-items: center; }
.season-pill[draggable="true"] { cursor: grab; }
.season-pill[draggable="true"]:active { cursor: grabbing; }
.season-pill.dragging { opacity: .38; }
.season-pill.drag-over { border-left: 3px solid #1668dc; }
.add-season-tab { flex: none; border-radius: 4px; color: #1668dc; background: #eef5ff; }
.shipped-input { width: 90px; height: 32px; border: 1px solid #b8c8dd; border-radius: 4px; padding: 0 8px; font-weight: 700; }
.shipped-input:focus { outline: 2px solid #bcd8ff; border-color: #1668dc; }
.pending-qty { color: #dc3545; font-size: 16px; font-weight: 700; }
.pending-qty.zero { color: #0d9b66; }
.channel-select { min-width: 92px; height: 32px; border: 1px solid #b8c8dd; border-radius: 4px; padding: 0 8px; background: #fff; }
.channel-select:focus { outline: 2px solid #bcd8ff; border-color: #1668dc; }
.panel-tabs { display: flex; align-items: stretch; height: 100%; }
.panel-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 0 15px; color: #6c778b; cursor: pointer; font: inherit; }
.panel-tab.active { color: #1668dc; border-bottom-color: #1668dc; font-weight: 700; }
.panel-tab span { display: inline-block; min-width: 19px; margin-left: 4px; padding: 2px 5px; border-radius: 9px; background: #eef3f8; font-size: 11px; }
.archive-time b { display: block; }
.archive-time small { display: block; margin-top: 3px; color: #6c778b; }