.mobile-date-range,.ordering-guide-mobile-tip,.mobile-filter-toggle{display:none}

@media(max-width:700px),(max-width:950px) and (max-height:500px){
  body[data-role=customer]{font-size:16px;line-height:1.5}
  body[data-role=customer] #content,
  body[data-role=customer] #content.sheet-page{padding:18px 12px 24px}
  body[data-role=customer] h2{font-size:22px;line-height:1.35}
  body[data-role=customer] h3{font-size:18px}
  body[data-role=customer] .card,
  body[data-role=customer].customer-orders-wide #content>.card{padding:14px 12px;margin-bottom:14px}
  body[data-role=customer] button,
  body[data-role=customer] a.button{min-height:44px;font-size:15px;line-height:1.4;touch-action:manipulation}
  body[data-role=customer] :is(input,select,textarea){font-size:16px;line-height:1.4;min-height:44px;min-width:0}
  body[data-role=customer] input[type=checkbox]{min-height:22px;width:22px;height:22px;flex-shrink:0}
  body[data-role=customer] :is(.check,.as-sku-check){min-height:44px}
  body[data-role=customer] label{font-size:14px;min-width:0}
  body[data-role=customer] :is(.muted,.sheet-heading p,.paste-panel p,.paste-address-reminder,#paste-result,.row-result){font-size:14px;line-height:1.6}
  body[data-role=customer]>header{padding:14px 12px;align-items:flex-start;flex-wrap:wrap}
  body[data-role=customer]>header>div{min-width:0}
  body[data-role=customer]>header small{display:none}
  body[data-role=customer]>header>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 100%}
  body[data-role=customer] #identity{font-size:14px;overflow-wrap:anywhere}
  body[data-role=customer] .login{display:block;min-height:100dvh}
  body[data-role=customer] .login-aside{padding:20px 16px}
  body[data-role=customer] .login-aside h1{font-size:24px;margin:6px 0}
  body[data-role=customer] .login-aside .eyebrow{display:none}
  body[data-role=customer] .login-main{padding:24px 16px}
  body[data-role=customer] .login-box{width:100%;max-width:420px}
  body[data-role=customer] .login-box h2{font-size:24px}
  body[data-role=customer] .release-label{display:none}
  body[data-role=customer] #logout{padding:8px 14px;flex-shrink:0}
  body[data-role=customer]>nav{position:sticky;top:0;z-index:30;flex-wrap:nowrap;overflow-x:auto;padding:6px 8px;gap:4px;overscroll-behavior-x:contain}
  body[data-role=customer]>nav button{flex-shrink:0;white-space:nowrap;padding:10px 12px}
  body[data-role=customer] .toolbar{gap:12px 8px}
  body[data-role=customer] .toolbar>label{flex:1 1 100%;width:100%}
  body[data-role=customer] .toolbar :is(input,select){width:100%;max-width:none}
  body[data-role=customer] .toolbar>button{flex:1 1 auto}
  body[data-role=customer] .mobile-filter-toggle{display:block;width:100%;margin-bottom:14px;text-align:left}
  body[data-role=customer] .customer-filter-form[data-mobile-open=false]{display:none}
  body[data-role=customer] .pager{flex-wrap:wrap;gap:10px;font-size:14px;justify-content:space-between}
  body[data-role=customer] .pager>span{order:3;flex-basis:100%;text-align:center}
  body[data-role=customer] .admin-column-note{display:none}

  /* A phone shows one order card at a time, using the original table controls. */
  body[data-role=customer] table.customer-card-table{display:block;width:100%!important;min-width:0;white-space:normal;table-layout:auto}
  body[data-role=customer] .customer-card-table>colgroup{display:none}
  body[data-role=customer] .customer-card-table>thead{display:none}
  body[data-role=customer] .customer-card-table>tbody{display:block}
  body[data-role=customer] .customer-card-table>tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 12px;margin:12px 0;border:1px solid #d6e3de;border-radius:10px;background:#fff}
  body[data-role=customer] table.customer-card-table td{display:block;width:auto;min-width:0;max-width:none;white-space:normal;overflow-wrap:anywhere;padding:0;border:0;font-size:15px;line-height:1.5;text-align:left}
  body[data-role=customer] .customer-card-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:13px;font-weight:400;color:#617970}
  body[data-role=customer] .customer-card-table td:first-child{grid-column:1/-1;font-weight:600;padding-bottom:10px;border-bottom:1px solid #e4ece8}
  body[data-role=customer] .customer-card-table td:is([data-label="SKU"],[data-label="SKU-数量*单价"],[data-label="收件人地址1"],[data-label="地址2"],[data-label="快递单号（点击单号复制）"],[data-label="快递单号"],[data-label="售后问题"],[data-label="退回原因"],[data-label="操作"],[colspan]){grid-column:1/-1}
  body[data-role=customer] .customer-card-table td[data-label="操作"]::before,
  body[data-role=customer] .customer-card-table td[colspan]::before{display:none}
  body[data-role=customer] .customer-card-table td[colspan]{border:0;text-align:center;padding:12px 0}
  body[data-role=customer] .customer-card-table .pending-sku span{display:inline-block;max-width:100%;font-size:15px}
  body[data-role=customer] .customer-card-table .pending-order-actions{display:flex;gap:10px;min-width:0}
  body[data-role=customer] .customer-card-table .pending-order-actions button{flex:1}
  body[data-role=customer] .customer-card-table button{padding:10px 12px;max-width:100%}
  body[data-role=customer] .customer-card-table .tracking-copy{padding:6px 0;white-space:normal;overflow-wrap:anywhere;text-align:left}
  body[data-role=customer] .customer-card-table .as-brief{max-width:none;font-size:14px;display:block}
  body[data-role=customer] .customer-card-table .badge{font-size:13px}
  body[data-role=customer] .order-date-group{padding:0 8px}
  body[data-role=customer] .order-date-group>summary{margin:0 -8px;padding:14px 12px;font-size:15px}

  /* The order editor becomes a vertical form without changing submission data. */
  body[data-role=customer] .sheet-heading{flex-direction:column;gap:12px;margin-bottom:14px}
  body[data-role=customer] .sheet-heading .actions{width:100%;margin:0}
  body[data-role=customer] #add-order{width:100%}
  body[data-role=customer] .paste-panel{padding:14px 12px}
  body[data-role=customer] .paste-input-heading{gap:10px}
  body[data-role=customer] .paste-input-heading>label{flex-basis:100%}
  body[data-role=customer] .paste-address-reminder{order:0}
  body[data-role=customer] #paste-input{font-size:16px;min-height:140px;line-height:1.6}
  body[data-role=customer] .paste-panel .toolbar{display:block}
  body[data-role=customer] #paste-fill{width:100%;margin-bottom:10px}
  body[data-role=customer] #paste-result{display:block}
  body[data-role=customer] .paste-table-preview{max-height:220px}
  body[data-role=customer] .order-grid-wrap{overflow:visible;max-height:none;border:0;background:transparent}
  body[data-role=customer] table.order-grid{display:block;width:100%!important;min-width:0}
  body[data-role=customer] .order-grid>colgroup{display:none}
  body[data-role=customer] .order-grid>thead{display:none}
  body[data-role=customer] .order-grid>tbody{display:block;background:white;border:1px solid #cbded6;border-radius:10px;padding:14px 12px;margin-bottom:16px}
  body[data-role=customer] .order-grid .order-record{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  body[data-role=customer] .order-grid .order-record>td{display:block;position:static;box-shadow:none;padding:0;border:0;min-width:0;width:auto;font-size:16px;grid-column:1/-1}
  body[data-role=customer] .order-grid .order-record>td::before{content:attr(data-label);display:block;font-weight:500;font-size:14px;color:#526e63;margin-bottom:6px}
  body[data-role=customer] .order-grid .order-record>td:nth-child(1){order:1;grid-column:auto}
  body[data-role=customer] .order-grid .order-record>td:nth-child(3){order:2;grid-column:auto;text-align:left;font-size:20px}
  body[data-role=customer] .order-grid .order-record>td:nth-child(2){order:3}
  body[data-role=customer] .order-grid .order-record>td:nth-child(n+4){order:4}
  body[data-role=customer] .order-grid .order-record>td:nth-child(11){order:6;display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid #e2ebe6;padding-top:12px}
  body[data-role=customer] .order-grid .order-record>td:nth-child(11)::before{display:none}
  body[data-role=customer] .order-grid .order-record>td:nth-child(11)>button{flex:1}
  body[data-role=customer] .order-grid .row-result{flex-basis:100%;font-size:14px}
  body[data-role=customer] .order-grid .order-record :is(input[data-field],select){height:46px;padding:10px;font-size:16px;background:#fff;border:1px solid #c4d8cf;border-radius:6px}
  body[data-role=customer] .order-grid input::placeholder{font-size:14px}
  body[data-role=customer] .order-grid .warehouse-choice-note{font-size:13px;line-height:1.5}
  body[data-role=customer] .order-grid .sku-summary{padding:8px;font-size:16px;line-height:1.5;background:#f0f6f3;margin:2px}
  body[data-role=customer] .order-grid .sku-entry:not(:last-child):not(.editing)::after{content:''}
  body[data-role=customer] .order-grid .sku-entry.editing{width:100%;display:grid;grid-template-columns:minmax(80px,1fr) 10px 64px 44px;gap:8px 6px;padding:10px;margin:4px 0}
  body[data-role=customer] .order-grid .sku-entry.editing :is(.sku-code,.sku-quantity){height:44px;padding:8px;font-size:16px;line-height:1.4}
  body[data-role=customer] .order-grid .sku-entry.editing .remove-sku{grid-column:4;grid-row:1;width:44px;height:44px;font-size:24px;line-height:1}
  body[data-role=customer] .order-grid .sku-entry.editing .sku-stock{grid-column:1/-1;grid-row:2;font-size:13px;line-height:1.5}
  body[data-role=customer] .order-grid .sku-entry.editing .sku-done{grid-column:1/-1;grid-row:3;height:44px;font-size:15px;line-height:1.4;padding:8px;margin:0}
  body[data-role=customer] .order-grid :is(.add-sku,.submit-row,.remove-row){font-size:15px;line-height:1.4;padding:10px 12px;margin:6px 0 0}
  body[data-role=customer] .order-grid .order-extra{display:block}
  body[data-role=customer] .order-grid .order-extra>td{display:block;border:0;padding:10px 0 0}
  body[data-role=customer] .order-grid .row-extras{display:block;max-width:none}
  body[data-role=customer] .order-grid tbody:not(.source-order) .row-extras{display:none}
  body[data-role=customer] .order-grid tbody:not(.source-order) .order-extra:not(:has(.paste-review:not([hidden]))){display:none}
  body[data-role=customer] .order-grid .shortage-only>.order-record,
  body[data-role=customer] .order-grid .shortage-only>.order-extra{display:none}
  body[data-role=customer] .order-grid .shortage-message{display:block}
  body[data-role=customer] .order-grid :is(.buyer-separator,.origin-draft-bar){display:block}
  body[data-role=customer] .order-grid :is(.buyer-separator,.origin-draft-bar,.shortage-message)>td{display:block;width:100%;border:0;white-space:normal;overflow-wrap:anywhere}
  body[data-role=customer] .order-grid :is(.buyer-separator-content,.shortage-message span,.origin-draft-actions){position:static;width:auto;max-width:100%;font-size:14px}
  body[data-role=customer] .order-grid :is(.remove-shortage,.save-shortage){position:static;margin:8px 0 0}
  body[data-role=customer] .order-grid .paste-review{padding:10px;font-size:14px}
  body[data-role=customer] .sheet-footer{display:flex;flex-direction:column;gap:12px;padding:8px 0;font-size:14px}
  body[data-role=customer] .batch-submit-bar{display:grid;grid-template-columns:1fr;width:100%;gap:10px;font-size:15px}
  body[data-role=customer] .submit-all{width:100%}

  /* Use the phone's date picker; keep the existing desktop calendar. */
  body[data-role=customer] .date-range{width:100%;min-width:0;display:block}
  body[data-role=customer] .date-range>.date-caption,
  body[data-role=customer] .date-range>.range-trigger,
  body[data-role=customer] .date-range>.range-popup{display:none}
  body[data-role=customer] .mobile-date-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-role=customer] .mobile-date-range input{width:100%;min-width:0;max-width:100%;padding:8px}
  body[data-role=customer] .mobile-date-clear{grid-column:1/-1;justify-self:end}

  /* Dialogs scroll inside the visible screen, with reachable close buttons. */
  body[data-role=customer]:has(dialog[open]){overflow:hidden}
  body[data-role=customer] dialog{position:fixed;inset:auto!important;top:calc(var(--customer-visual-top,0px) + 12px)!important;left:12px!important;right:12px!important;margin:0 auto!important;width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:calc(var(--customer-visual-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;font-size:16px;line-height:1.5}
  body[data-role=customer] :is(.return-order-dialog,.ordering-guide-dialog){padding:16px}
  body[data-role=customer] .return-order-dialog{top:calc(var(--customer-visual-top,0px) + var(--customer-visual-height,100dvh)/2)!important;transform:translateY(-50%)}
  body[data-role=customer] dialog h3{font-size:18px;line-height:1.5}
  body[data-role=customer] :is(.as-dialog-header,.ordering-guide-dialog-heading){position:sticky;top:0;z-index:3;background:white;gap:12px}
  body[data-role=customer] .as-dialog-header{padding:12px}
  body[data-role=customer] .as-dialog-body{padding:14px 12px}
  body[data-role=customer] dialog :is(p,small,.muted,.as-feedback){font-size:14px;line-height:1.6;overflow-wrap:anywhere}
  body[data-role=customer] dialog .actions{flex-wrap:wrap;gap:10px}
  body[data-role=customer] dialog .actions button{flex:1;min-width:0}
  body[data-role=customer] .intercept-confirm-dialog .dialog-close{width:44px;height:44px;right:8px;top:8px}
  body[data-role=customer] .statement-totals{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-role=customer] .statement-totals>div{padding:12px 10px;min-width:0;font-size:13px}
  body[data-role=customer] .statement-totals strong{font-size:20px;overflow-wrap:anywhere}
  body[data-role=customer] .statement-accounts>div{width:100%;min-width:0}
  body[data-role=customer] .statement-account-amounts{display:grid;grid-template-columns:1fr;gap:8px;font-size:15px}
  body[data-role=customer] .statement-dialog .statement-sku{font-size:14px;padding:5px 8px}
  body[data-role=customer] .as-sku-row{flex-wrap:wrap;gap:12px}
  body[data-role=customer] .as-dialog-body .as-sku-quantity input{min-height:44px;font-size:16px}
  body[data-role=customer] .as-drop .button{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
  body[data-role=customer] .as-desktop-upload-tip{display:none}
  body[data-role=customer] .as-mobile-upload-tip{display:inline}
  body[data-role=customer] .ordering-guide-cards :is(p,.ordering-guide-important),
  body[data-role=customer] .ordering-guide-intro{font-size:14px;line-height:1.6}
  body[data-role=customer] .ordering-guide-desktop-tip{display:none}
  body[data-role=customer] .ordering-guide-mobile-tip{display:block}
  body[data-role=customer] .ordering-guide-zoom{max-height:none}
  body[data-role=customer] .ordering-guide-dialog-heading{top:-16px;margin:-16px -16px 0;padding:12px 16px}
}