/* Screen-only layout refinements. Document/PDF print styles remain untouched. */
@media screen {
  .shell { grid-template-columns: 260px minmax(0, 1fr); }
  .grid > *, .row > *, .card, .card-b, .auth > *, .co-grid > * { min-width: 0; }
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .auth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
  .top { flex-wrap: wrap; }
  .top h1 { min-width: 0; flex: 1 1 10ch; overflow-wrap: anywhere; }
  .top > .sp { display: none; }
  .content { margin-inline: auto; }
  .btn { max-width: 100%; }
  .in { min-width: 0; }
  .card-b, .alert, .msg, .stat .k, .stat .s, .pcard .bd,
  .side-foot, .dlg-h h2, .dlg-b p, .nc-main h3, .pp-row {
    overflow-wrap: anywhere;
  }
  .tw { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
  .tw table:not(.resp) { min-width: 460px; }
  .tw td .row > div { min-width: 0; overflow-wrap: anywhere; }
  .kv { grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); }
  .tot > div { gap: 12px; }
  .tot > div > :last-child { flex-shrink: 0; }
  .dlg-h h2 { min-width: 0; }
  .dlg-b { min-height: 0; overscroll-behavior: contain; }
  .thread, .tabs, .side, .nc-body { overscroll-behavior: contain; }
  .co-top {
    flex-wrap: wrap;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .co-top .brand { min-width: 0; max-width: 100%; }
  .cl { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .cl > div { min-width: 0; overflow-wrap: anywhere; }
  .nc-tabs, .nc-pager { flex-wrap: wrap; }
  .nc-top > div, .pp-cta > div { min-width: 0; }
  .nc-panel { max-height: 100dvh; }
  .nc-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #toasts { bottom: max(16px, env(safe-area-inset-bottom)); }
  .toast { max-width: min(340px, calc(100vw - 32px)); overflow-wrap: anywhere; }
}

@media screen and (max-width: 1100px) and (min-width: 901px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content, .top { padding-inline: 20px; }
}

@media screen and (max-width: 900px) {
  .shell, .co-grid { grid-template-columns: minmax(0, 1fr); }
  .side {
    width: min(270px, calc(100vw - 48px));
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum { position: static; }
  .content { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}

@media screen and (max-width: 800px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 700px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  table.resp td { min-width: 0; overflow-wrap: anywhere; }
  table.resp td::before { flex: 0 0 34%; }
  table.resp td > * { min-width: 0; }
  .itemrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar .in { max-width: none; flex: 1 1 180px; }
}

@media screen and (max-width: 600px) {
  .top, .content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .top { gap: 10px; }
  .top .burger { order: 0; }
  .top h1 { order: 1; flex-basis: calc(100% - 108px); }
  .top > .rel { order: 2; }
  .top > .btn:not(.burger) { order: 3; flex: 1 1 auto; }
  .btn, .btn.sm, .iconbtn, .nav a, .nc-chip, .nc-tabs button {
    min-height: 44px;
  }
  .iconbtn { width: 44px; flex-shrink: 0; }
  .in, select.in, textarea.in { font-size: 16px; min-height: 44px; }
  .tabs button { min-height: 44px; }
  .auth-art { padding: 24px 20px; gap: 24px; }
  .auth-form { padding: 28px 20px max(32px, env(safe-area-inset-bottom)); }
  .card-h, .card-b, .toolbar { padding-inline: 16px; }
  .co-wrap { padding-top: 20px; padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  .co-top { gap: 12px; }
  .co-top .brand { flex: 1 1 100%; }
  .co-top > .sp { display: none; }
  .co-top > .btn { flex: 1 1 auto; }
  .cl { grid-template-columns: 46px minmax(0, 1fr); }
  .cl > .qty { grid-column: 2; justify-self: start; }
  .qty button { min-width: 44px; min-height: 44px; }
  .qty span { min-width: 40px; line-height: 44px; }
  .dlg-h, .dlg-b, .dlg-f { padding-inline: 16px; }
  .dlg-h button[data-close] { min-width: 44px; flex-shrink: 0; }
  .dlg-f { gap: 8px; }
  .dlg-f > .btn { flex: 1 1 110px; }
  .nc-hero { padding: 20px; }
  .nc-pager { gap: 8px; }
}

@media screen and (max-width: 480px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .kv dt { font-weight: 600; }
  .kv dd { margin-bottom: 10px; }
  .dlg-h { gap: 8px; }
  .dlg-h h2 { font-size: 20px; }
  .pp-bal { font-size: clamp(26px, 8vw, 36px); }
  .msg { max-width: 94%; }
  .pop { position: fixed; top: 76px; right: 16px; width: calc(100vw - 32px); }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
  .auth-art { min-height: 0; padding-block: 20px; gap: 16px; }
  .auth-form { padding-block: 20px; }
  .content { padding-top: 16px; }
  .dlg-h, .dlg-f { padding-block: 10px; }
}