.mobile-sort { display: none; }
.btn.config-toggle { display: none; }
.scan-options { display: grid; gap: 4px; }
.top { height: auto; min-height: 224px; }
.connections { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 5px 0; }
.connections .sub:empty { display: none; }
.connections .sub { min-width: 0; overflow-wrap: anywhere; }
.connect-modal { color: var(--ink); max-width: calc(100vw - 24px); }
.connect-modal::backdrop { background: #05061Acc; }
.connect-modal label { display: block; margin: 12px 0 5px; font-weight: 600; }
.connect-modal input[readonly] { color: var(--muted); }
.connect-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
#affiliateCheckStatus { margin-top: 10px; color: var(--muted); overflow-wrap: anywhere; }
#affiliateDisconnect[hidden] { display: none; }

@media (max-width: 979px) {
  html, body { height: auto; min-height: 100%; }
  html { overflow-x: hidden; overflow-y: auto; }
  body { display: block; min-width: 0; overflow: visible; background-attachment: scroll; }
  .main, .pane { min-width: 0; }
  .hd { height: auto; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px 12px; padding: 14px 12px 10px; }
  .logo { width: 42px; height: 42px; font-size: 20px; }
  .hd h1 { font-size: 19px; line-height: 1.15; }
  .hd p { line-height: 1.4; }
  .tabs { grid-column: 1 / -1; width: 100%; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab { min-height: 44px; height: auto; padding: 7px 4px; }
  .main { padding: 12px 12px max(18px, env(safe-area-inset-bottom)); }
  .top { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .top .card { gap: 8px; padding: 12px; }
  .ch { flex-wrap: wrap; gap: 3px 8px; margin-bottom: 0; }
  textarea { min-height: 116px; flex: none; font-size: 16px; }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
  .row select, input[type=text], input[type=password], input.mini { height: 44px !important; min-width: 0; font-size: 16px !important; }
  .connections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .btn, .btn.sm, .chk, .chk.sm { min-height: 44px; height: auto; padding: 6px 8px; white-space: normal; justify-content: center; text-align: center; }
  .bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bar > select, .bar > input.mini { width: 100%; min-height: 44px; }
  #run, .bar .spin { grid-column: 1 / -1; }
  .bar .spin { width: 100%; }
  .mobile-sort { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
  .mobile-sort select { width: auto; max-width: 74%; min-height: 44px; }
  .stats.stats5 { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 8px; }
  .st { padding: 8px 11px; }
  .st div { font-size: 20px; }
  .st .rb { position: static; transform: none; margin-top: 5px; min-height: 36px; }
  .grid { background: transparent; border: 0; overflow: visible; min-height: 0; }
  .grid table, .grid tbody { display: block; width: 100%; }
  .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grid tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; margin-bottom: 8px; gap: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
  .grid td { display: block; height: auto; max-width: none; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .grid td:empty { display: none; }
  .grid td[data-label]::before { display: block; content: attr(data-label); margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
  .grid td[data-field="Product"], .grid td[data-field="Input"], .grid td[data-field="Details"] { grid-column: 1 / -1; }
  .grid td[data-field="Product"] { order: -3; font-size: 15px; font-weight: 700; }
  .grid td[data-field="Status"], .grid td[data-field="Est. commission (VND)"] { order: -2; }
  .grid td[data-field="live"] { order: 2; }
  .grid td[data-field="Product"]::before, .grid td[data-field="Status"]::before, .grid td[data-field="live"]::before { content: none; }
  .grid .live { min-height: 44px; }
  .empty { position: static; min-height: 84px; border: 1px solid var(--line); border-radius: 12px; }
  .ft { height: auto; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .ft #status { white-space: normal; overflow-wrap: anywhere; }
  .shop { display: grid; width: 100%; gap: 6px; }
  .shop input { width: 100%; }
  .modal { max-height: 88vh; max-height: 88dvh; overflow-y: auto; padding: 14px; overscroll-behavior-y: contain; }
  .connect-modal[open] {
    position: fixed;
    inset: auto 0;
    top: calc(var(--viewport-top, 0px) + var(--viewport-height, 100dvh) / 2);
    transform: translateY(-50%);
    max-height: calc(var(--viewport-height, 100dvh) - 24px);
    touch-action: pan-y pinch-zoom;
    scroll-padding-block: 12px;
  }
  .modal .acts { flex-wrap: wrap; }
  .connect-modal .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal .list div { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-wrap: anywhere; }
  .modal .list .h { display: none; }
  .toast { width: max-content; max-width: calc(100vw - 20px); text-align: center; }
}

@media (min-width: 980px) {
  html { overflow-y: auto; }
  body { height: auto; min-height: 100%; overflow: visible; }
  .grid { flex-basis: 300px; min-height: 300px; }
}

@media (max-width: 600px) {
  body { background: radial-gradient(440px 280px at 105% -5%, #3a326b, transparent 80%), #101126; }
  .hd { padding: 13px max(14px, calc((100% - 530px) / 2)); background: #14152de8; border-color: #31324a; }
  .hd p { display: none; }
  .logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: none; background: #7149c3; }
  .tabs { gap: 4px; background: #0e1022; border-color: #302b4c; padding: 4px; }
  .tab.on { background: #36305a; box-shadow: none; }
  .main { max-width: 558px; margin: 0 auto; padding: 12px 14px max(22px, env(safe-area-inset-bottom)); }
  .pane, .top { gap: 10px; }
  .card, .st, .grid tr { background: #191b34; border-color: #353650; box-shadow: none; backdrop-filter: none; }
  .top .card { padding: 12px; }
  .ch { flex-direction: column; gap: 3px; }
  .ch b { font-size: 15px; }
  textarea { min-height: 108px; background: #101226; border-color: #393956; }
  .top .scan-config { padding: 8px; gap: 0; }
  .desktop-config-heading { display: none; }
  .config-access { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
  .config-access .connections { margin: 0; }
  #phonePcConnect, .btn.config-toggle { min-height: 40px; background: #232541; border-color: #3b3c5a; }
  .btn.config-toggle { display: inline-flex; padding-inline: 12px; }
  .config-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
  .scan-options { display: none; }
  .scan-options.open { display: grid; gap: 8px; padding: 10px 3px 2px; }
  .scan-options .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .btn, .chk, select, input.mini { border-color: #3b3c5a; background: #232541; }
  .btn.p { background: #8d5ce8; box-shadow: none; color: #100b23; }
  .btn.p:hover:not(:disabled) { background: #a27bf1; }
  .btn.p:disabled { color: #8c8bae; background: #242641; }
  .btn:disabled { opacity: .55; }
  .scan-actions { gap: 6px 8px; }
  #run { grid-column: 1; min-height: 48px; grid-row: 1; }
  #import { grid-column: 2; min-height: 48px; grid-row: 1; }
  #stop:disabled, #retry:disabled, #export:disabled, #clear:disabled, #filter:disabled { display: none; }
  .stats.stats5 { gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats .st { grid-column: span 3; }
  #paneScan .stats .st:nth-child(1), #paneScan .stats .st:nth-child(2), #paneScan .stats .st:nth-child(5) { grid-column: span 2; grid-row: 1; }
  .st { padding: 8px 9px; border-radius: 10px; }
  .st::before { width: 2px; box-shadow: none; }
  .st small { display: block; font-size: 11px; line-height: 1.25; }
  .st div { font-size: 18px; }
  .st .rb:disabled { display: none; }
  .mobile-sort { padding: 4px 0 0; color: var(--ink); font-size: 13px; font-weight: 650; }
  .mobile-sort select { max-width: 55%; min-height: 40px; font-weight: 500; }
  .grid tr { gap: 8px 10px; padding: 12px; margin-bottom: 8px; }
  .grid td[data-field="Product"] { line-height: 1.35; }
  .grid td[data-field="Input"] { color: #a9acd0; font-size: 11px; }
  .grid td[data-field="Est. commission (VND)"] { font-size: 18px; }
  .connect-modal { background: #191b34; border-color: #454660; border-radius: 16px; }
  .connect-modal .acts { margin-top: 12px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .spin::after { animation: none; width: 100%; }
}