:root{--green:#075e4d;--ink:#18343e;--muted:#6a7e87;--border:#d8e2e4}*{box-sizing:border-box}body{margin:0;background:#f3f6f7;color:var(--ink);font:16px/1.5 Arial,sans-serif}button,input,select,textarea{font:inherit}button,.filebtn{cursor:pointer;touch-action:manipulation}button{border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:9px;padding:11px 17px;font-size:14px;font-weight:600}button:hover{border-color:#8aa99c}button:disabled{opacity:.5;cursor:wait}button.primary{background:var(--green);color:white;border-color:var(--green)}input,select,textarea{width:100%;border:1px solid #cddadd;border-radius:8px;padding:11px;background:white;color:var(--ink)}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #a7d8c9;outline-offset:2px}label{display:block;font-size:14px;font-weight:600}label input,label select,label textarea{margin-top:6px}h1,h2,h3,p{margin:0}header{background:#fff;border-bottom:1px solid var(--border);padding:19px max(20px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:800;letter-spacing:1px}.logo{width:43px;height:43px;display:grid;place-items:center;background:var(--green);color:white;border-radius:11px;font-size:30px}.brand small{display:block;font-size:10px;letter-spacing:1.2px;color:var(--muted)}header>span{font-size:13px;color:var(--muted)}main{max-width:1160px;margin:auto;padding:30px 20px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:15px}.eyebrow{color:var(--muted);font-size:12px;letter-spacing:1px;margin-bottom:7px}h1{font-size:29px;line-height:1.25;letter-spacing:-.7px}h2{font-size:22px}h3{font-size:16px;line-height:1.45}.stats{display:flex;gap:28px;flex-shrink:0}.stats b{font-size:29px;display:block}.stats small{font-size:12px;color:var(--muted)}.tabs{display:flex;border-bottom:1px solid var(--border);gap:25px;margin-bottom:25px}.tabs button{border:0;border-radius:0;padding:12px 0;background:transparent;font-size:15px;color:var(--muted)}.tabs button.active{border-bottom:3px solid var(--green);color:var(--green)}.panel{background:#fff;border:1px solid var(--border);border-radius:13px;padding:27px}.search-panel{border-top:4px solid var(--green)}.muted{color:var(--muted);font-size:14px}.search-panel p{margin-top:5px}.search-form{display:grid;grid-template-columns:1fr 1fr .9fr;gap:20px;align-items:end;margin-top:24px}.unit{position:relative}.unit input{height:64px;font-size:28px;padding-right:55px;background:#f9fbfb}.unit span{position:absolute;right:16px;top:25px;color:var(--muted);font-weight:400}.search-form button{height:64px;font-size:17px}.note{margin-top:17px;font-size:13px;color:var(--muted)}.notice{font-size:14px;background:#fff5dd;color:#80622d;padding:13px 16px;border-radius:8px;margin:18px 0}.error{background:#fff0ef;color:#a13c2e;padding:14px;border-radius:8px;margin:15px 0}.success{background:#e4f4ec;color:#075e4d;padding:14px;border-radius:8px;margin:15px 0}.result-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:25px 0 20px}.result-head input{max-width:290px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.visual{height:175px;background:#fff;display:grid;place-items:center;border-bottom:1px solid #eef2f3;color:#93a9af}.visual img{width:100%;height:100%;object-fit:contain;padding:12px}.card-body{padding:20px;display:flex;flex-direction:column;flex:1}.tag{font-size:12px;color:#075e4d;background:#eaf4ee;padding:3px 8px;align-self:flex-start;border-radius:5px;margin-bottom:10px}.tag.warn{background:#fff2d4;color:#896d38}.meta{font-size:12px;color:var(--muted);margin-bottom:5px}.card h3{margin-bottom:15px;overflow-wrap:anywhere}.metrics{display:grid;grid-template-columns:1fr 1fr;padding:13px 0;margin-top:auto;border-top:1px solid #e6edef;border-bottom:1px solid #e6edef}.metrics b{font-size:21px;display:block}.metrics small{color:var(--muted);font-size:12px}.track{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:12px 0}.card button{width:100%;background:#eaf3ee;color:var(--green);border:0}.empty{text-align:center;padding:48px 20px;color:var(--muted)}.empty h2{color:#385460;font-size:21px;margin-bottom:10px}.empty p{font-size:15px}.center{text-align:center;margin:24px 0}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}.filebtn{display:inline-block;position:relative;background:var(--green);color:#fff;border-radius:8px;padding:12px 18px;font-size:14px;overflow:hidden}.filebtn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.filebtn:focus-within{outline:3px solid #8dcab8}.mapping{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.preview{max-height:250px;overflow:auto;border:1px solid var(--border);border-radius:8px}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;padding:9px 12px;border-bottom:1px solid #e4eaea;vertical-align:top}th{background:#edf3f1;position:sticky;top:0}.receipt{display:flex;gap:17px;align-items:center;padding:20px 0;border-top:1px solid var(--border)}.receipt img{width:85px;height:85px;object-fit:cover;border-radius:8px;cursor:pointer}.receipt section{flex:1;min-width:0}.receipt p{font-size:13px;color:var(--muted);overflow-wrap:anywhere;margin-top:5px}.receipt .numbers{text-align:right;min-width:110px}.numbers b{font-size:21px;display:block}.numbers span{font-size:13px;color:var(--muted)}dialog{border:1px solid var(--border);border-radius:14px;padding:24px;max-width:570px;width:calc(100% - 26px);max-height:92vh;overflow:auto;color:var(--ink)}dialog::backdrop{background:#0b2428a6}dialog h2{padding-right:35px;margin-bottom:8px}.close{position:absolute;right:14px;top:14px;padding:5px 10px}.selected{background:#eff5f2;border-radius:8px;padding:14px;margin:18px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}.total{display:flex;justify-content:space-between;margin:15px 0;font-size:14px}.total b{font-size:20px;color:var(--green)}.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:400}.check input{width:auto;margin-top:3px;flex-shrink:0}.photo-preview{height:170px;margin-top:12px;background:#f0f4f3;width:100%;object-fit:contain;border-radius:8px}.full{width:100%;margin-top:18px}.comment{margin-top:16px}.backup-tools{border-top:1px solid var(--border);margin-top:28px;padding-top:20px}.backup-tools .filebtn{background:#e3ede8;color:var(--green)}footer{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);margin-top:35px;padding-top:15px}.lightbox{max-width:900px}.lightbox img{width:100%;max-height:75vh;object-fit:contain}[hidden]{display:none!important}.import-summary{margin:16px 0}.busy{pointer-events:none;opacity:.6}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:90%;background:#153b30;color:white;padding:14px 22px;border-radius:10px;z-index:20;box-shadow:0 5px 20px #0002}
@media(max-width:800px){.cards{grid-template-columns:repeat(2,1fr)}.mapping{grid-template-columns:repeat(2,1fr)}.heading{align-items:flex-start;flex-direction:column}.stats{gap:25px}.stats>div{display:flex;align-items:baseline;gap:8px}.stats b{font-size:24px}.search-form{gap:12px}}
@media(max-width:540px){header{padding:15px}header>span{display:none}main{padding:23px 15px}h1{font-size:27px}.tabs{gap:19px}.tabs button{font-size:13px}.panel{padding:20px 16px}.search-form{grid-template-columns:1fr 1fr}.search-form button{grid-column:1/-1;height:52px}.unit input{height:58px;font-size:25px;padding-left:12px}.unit span{right:12px;top:23px;font-size:13px}.cards{grid-template-columns:1fr}.result-head{align-items:stretch;flex-direction:column}.result-head input{max-width:none}.mapping{grid-template-columns:1fr 1fr;gap:12px}.mapping label{font-size:12px}.mapping select{font-size:14px}.receipt{flex-wrap:wrap;gap:12px}.receipt img{width:65px;height:70px}.receipt section{flex-basis:calc(100% - 80px)}.receipt .numbers{width:100%;text-align:left;padding-left:77px;display:flex;align-items:baseline;gap:12px}.numbers b{font-size:18px}footer{flex-direction:column;gap:5px}dialog{padding:21px 16px}.grid2 label{font-size:12px}.toolbar{align-items:stretch}.toolbar button,.toolbar .filebtn{flex:1;text-align:center}.notice{font-size:13px}.unit input,input,select,textarea{font-size:16px}}
/* ZILART mobile blue design */
:root{--green:#086bfa;--ink:#111a27;--muted:#748092;--border:#e5ebf3;--blue-soft:#edf5ff;color-scheme:light}
body{background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
header{max-width:1000px;margin:auto;padding:27px 28px 10px;border:0;background:#fff;gap:16px}
.brand{font-size:27px;letter-spacing:4px;line-height:1.2;font-weight:800}.brand small,.brand .logo{display:none}
.today-pill{display:flex;align-items:center;gap:7px;color:#086bfa!important;background:#edf5ff!important;border:0!important;border-radius:30px!important;padding:11px 17px!important;font-size:15px!important;white-space:nowrap}
.today-pill b{font-size:15px}.today-pill.active{background:#dcecff!important}.today-pill .chevron{font-size:22px;line-height:1;margin-left:3px}
main{max-width:1000px;padding:22px 28px;margin:auto}.heading{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:15px;margin:12px 0 27px}
.page-title{border:0;background:none;border-radius:0;padding:0;font-size:43px;letter-spacing:-1.8px;line-height:1.2;color:#0e1725;font-weight:750;text-align:left}
.import-link{color:#086bfa;background:transparent;border:0;padding:10px 0;font-size:16px;white-space:nowrap;font-weight:500}.import-link.active{text-decoration:underline;text-underline-offset:6px}
.panel{border:0;border-radius:0;padding:0;background:#fff}.search-panel{border:0;padding:0}.search-panel>h2,.search-panel>p.muted{display:none}.search-form{display:flex;flex-direction:column;gap:27px;margin:0;align-items:stretch;max-width:100%}
.search-form label{font-size:16px;font-weight:400;color:#748092}.unit input{background:transparent;border:0;border-bottom:1px solid #a9b7cb;border-radius:0;padding:12px 0 15px;height:75px;font-size:37px;letter-spacing:-1px;font-weight:500;box-shadow:none;margin-top:3px}.unit input::placeholder{color:#b7c2d1}.unit span{display:none}
.search-form button{height:57px;border:0;border-radius:12px;background:#086bfa;font-size:20px;font-weight:500;margin-top:3px;letter-spacing:0}.search-form button:hover{background:#005de1}
.search-panel .note{font-size:14px;text-align:center;margin:15px 0 0;line-height:1.6;color:#748092}.notice{background:#f6f8fc;border:0;color:#748092;font-size:13px;padding:13px 15px;border-radius:9px;margin:20px 0;line-height:1.6}
#searchView>.notice{background:transparent;padding:0 0 8px;font-size:12px;margin:13px 0 22px;text-align:center;line-height:1.6}
#resultArea{background:#f1f7ff;padding:25px 22px 8px;margin:0 -22px;border-radius:18px}.result-head{margin:0 0 20px;align-items:center}.result-head h2{font-size:23px;letter-spacing:-.6px;color:#111a27}.result-head .muted{font-size:12px;margin-top:5px}.result-head input{border:1px solid #dce6f3;border-radius:9px;background:#fff;height:42px;font-size:14px;max-width:260px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:15px;align-items:start;border:0;border-radius:15px;background:#fff;padding:17px;box-shadow:none;overflow:visible}.visual{width:92px;height:105px;border:0;border-radius:10px;background:#f1f4f8;overflow:hidden;text-align:center;font-size:12px;padding:0;color:#9aa7b7}.visual img{padding:5px;background:#f6f8fb;object-fit:contain;border-radius:10px}
.card-body{padding:0;display:grid;grid-template-columns:1fr;gap:0;min-width:0}.card-body h3{font-size:16px;line-height:1.4;letter-spacing:-.2px;margin:0 0 7px;font-weight:600}.card .tag{order:6;margin:8px 0 0;font-size:11px;font-weight:400;background:none;padding:0;color:#79889d;line-height:1.3}.card .tag.warn{background:#fff4df;color:#936a29;padding:3px 6px;border-radius:4px}.card .meta{font-size:11px;margin-bottom:4px;color:#94a0b2;order:2}.metrics{display:flex;gap:12px;margin:0 0 7px;padding:0;border:0;order:1;flex-wrap:wrap}.metrics small{display:none}.metrics b{font-size:16px;font-weight:600;line-height:1.5}.metrics>div+div{position:relative}.metrics>div+div:before{content:'·';position:absolute;left:-9px;top:0;color:#8fa0b5}.track{order:3;margin:0 0 10px;font-size:11px;line-height:1.5;color:#7b899d;overflow-wrap:anywhere}.card button{order:4;background:#086bfa;color:#fff;font-size:14px;border-radius:8px;min-height:42px;padding:9px 12px;width:100%;line-height:1.4}.card button:hover{background:#005de1}.expand button,#widen{background:#fff;color:#086bfa;border:1px solid #d6e6fb;border-radius:10px;max-width:100%;white-space:normal;line-height:1.5;font-size:13px}.empty{padding:35px 15px}.empty h2{font-size:20px;color:#263b58}.empty p{font-size:14px;color:#8594a8}.center{margin:18px 0}.cards>.empty{grid-column:1/-1}
#historyView,#importView{padding-top:4px}#historyView .result-head,#importView>.panel>h2{margin-bottom:20px}#historyView label{font-size:13px}.receipt{border-color:#edf1f7;gap:15px}.receipt img{border-radius:11px}.receipt h3{font-size:15px}.receipt .numbers b{font-size:20px;color:#111a27}.receipt .numbers span{font-size:12px}.receipt p{color:#8390a1}.receipt .meta{color:#086bfa}.preview{border:1px solid #e4ebf5;border-radius:9px}th{background:#edf5ff;color:#345375}.filebtn{background:#086bfa;border-radius:9px}.backup-tools .filebtn{background:#edf5ff;color:#086bfa}.backup-tools{border-color:#e6edf6}.backup-tools h3{margin-bottom:6px}.mapping{gap:18px}.toolbar{margin:20px 0}.toolbar label{width:auto}input[type=file]{font-size:14px;color:#7b899b;padding:12px;border:1px dashed #bfd4ee;line-height:1.5}input[type=file]::file-selector-button{border:0;background:#edf5ff;border-radius:7px;color:#086bfa;padding:10px 12px;margin-right:10px;cursor:pointer}
input,select,textarea{border-color:#dce5f0;border-radius:8px}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #bbd9ff;outline-offset:3px}.page-title:focus-visible{border-radius:5px}button.primary{background:#086bfa;border-color:#086bfa}.success{background:#edf5ff;color:#175eb6}.error{background:#fff0ef;color:#ac3f35}#toast{background:#145ad2;border-radius:12px;font-size:14px}
dialog{border:0;border-radius:18px;padding:25px;color:#111a27;background:#fff;box-shadow:0 20px 70px #14325830}dialog::backdrop{background:#152d526b}dialog h2{font-size:23px;letter-spacing:-.5px}.close{border:0;background:#f0f5fb;border-radius:50%;width:32px;height:32px;padding:0;font-size:23px;font-weight:400;line-height:1}.selected{background:#f1f7ff;border-radius:10px;padding:15px}.selected h3{font-size:16px}.selected p{font-size:12px;margin-top:7px}.grid2{gap:15px}.grid2 label{font-size:13px;font-weight:500}.grid2 input{height:49px;font-size:19px}.total{font-size:13px;color:#7c899a}.total b{color:#086bfa}.photo-preview{border-radius:12px;background:#f4f8fe}.full{height:50px;font-size:16px;border-radius:10px}.comment{font-size:13px;font-weight:500}footer{font-size:11px;line-height:1.6;color:#94a1b3;border-color:#edf1f7;margin-top:32px;align-items:baseline}footer b{font-weight:500}
@media(max-width:760px){.cards{grid-template-columns:1fr}.card{grid-template-columns:100px minmax(0,1fr);padding:18px;gap:16px}.visual{width:100px;height:120px}.result-head{align-items:stretch;flex-direction:column;gap:13px}.result-head input{max-width:none}.metrics b{font-size:17px}.card-body h3{font-size:17px}.card button{max-width:230px}.page-title{font-size:40px}.stats{display:none}}
@media(max-width:540px){header{padding:24px 20px 7px}.brand{font-size:25px;letter-spacing:3.2px}.today-pill{font-size:14px!important;padding:10px 13px!important}.today-pill b{font-size:14px}main{padding:20px 20px}.heading{margin:13px 0 28px;gap:10px}.page-title{font-size:38px;letter-spacing:-1.4px}.import-link{font-size:14px;padding:8px 0}.search-form{gap:25px}.search-form label{font-size:16px}.unit input{font-size:36px!important;height:72px;padding:9px 0 14px}.search-form button{height:56px;font-size:21px;border-radius:12px}.search-panel .note{font-size:13px;line-height:1.6}.search-panel .note b{font-weight:400}#searchView>.notice{font-size:11px;line-height:1.6;margin:10px 0 21px}#resultArea{margin:0 -20px;padding:23px 15px 8px;border-radius:0}.result-head h2{font-size:23px;margin:0}.result-head .muted{font-size:12px}.cards{gap:12px}.card{grid-template-columns:80px minmax(0,1fr);padding:16px 13px;gap:13px;border-radius:14px}.visual{width:80px;height:99px;border-radius:9px}.card-body h3{font-size:16px;margin-bottom:6px}.metrics{gap:14px;margin-bottom:5px}.metrics b{font-size:16px}.track{font-size:11px;margin-bottom:9px}.card button{min-height:40px;font-size:13px;max-width:none}.card .meta{font-size:11px}.card .tag{font-size:11px;margin-top:7px}.card .visual{margin-top:1px}.receipt{gap:12px}.receipt .numbers{padding-left:77px}.receipt .numbers b{font-size:17px}.grid2 label{font-size:13px}.grid2 input{font-size:18px}.mapping{gap:14px;grid-template-columns:1fr}.mapping label{font-size:14px}.mapping select{font-size:16px}.panel{padding:0}.toolbar label{width:100%}.toolbar button{font-size:13px}.date-label{width:100%}#historyView .result-head label input{height:45px}.preview{max-height:270px}footer{gap:5px;font-size:11px}dialog{padding:24px 17px;max-height:90dvh}.photo-preview{height:180px}}
@media(max-width:360px){.page-title{font-size:34px}.brand{font-size:22px}.today-pill{padding:9px 11px!important;font-size:12px!important}.card{grid-template-columns:64px minmax(0,1fr);gap:11px}.visual{width:64px;height:85px}.metrics b{font-size:14px}.card-body h3{font-size:15px}.import-link{font-size:13px}.grid2{grid-template-columns:1fr}.total{flex-wrap:wrap;gap:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


.zone-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 10px}.zone-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:22px 18px;border-radius:16px;gap:5px;border:1px solid transparent;border-top:4px solid currentColor;min-width:0}.zone-tile.green{background:#edf9f2;color:#147342}.zone-tile.yellow{background:#fffae7;color:#916100}.zone-tile.red{background:#fff0ee;color:#b62e2e}.zone-tile span{font-size:15px;font-weight:700}.zone-tile b{font-size:40px;line-height:1.25}.zone-tile small{font-size:13px;font-weight:400}.zone-tile em{font-size:12px;font-style:normal;font-weight:500}.zone-caption{font-size:12px;color:#778396;margin-bottom:32px}#zonePanel{margin:0 0 30px;padding:20px;background:#f7f9fc;border-radius:14px}#zoneFilter{max-width:420px;margin-bottom:16px}.zone-table{max-height:440px;overflow:auto;background:white;border:1px solid #e1e7ef;border-radius:10px}.zone-table table{min-width:850px}.zone-table th{background:#edf3fc;z-index:1;white-space:nowrap}.zone-table td:first-child{min-width:230px;max-width:330px}.zone-table td{padding:12px;overflow-wrap:anywhere}.zone-table td:nth-child(n+4):nth-child(-n+7){text-align:right;white-space:nowrap}.zone-table button{display:block;white-space:nowrap;margin:3px 0;color:#086bfa;padding:7px 10px}#orderHistoryDialog{width:min(620px,95vw)}
@media(max-width:540px){.zone-tiles{gap:7px}.zone-tile{padding:14px 9px;border-radius:12px}.zone-tile span{font-size:12px}.zone-tile b{font-size:30px}.zone-tile small,.zone-tile em{font-size:10px}.zone-caption{font-size:11px;margin-bottom:28px}#zonePanel{padding:12px;margin-inline:-8px}#zoneTitle{font-size:20px}#zonePanel .result-head{align-items:flex-start;flex-direction:column}.zone-table{max-height:390px}}
.search-switches{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.search-switches button[aria-pressed="true"]{background:#086bfa;color:#fff}@media(max-width:540px){.search-switches button{width:100%}}

.zone-photo{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f1f5f9;overflow:hidden;font-size:10px;text-align:center;color:#8492a6;cursor:pointer}.zone-photo img{width:100%;height:100%;object-fit:contain}.barcode-link{display:inline-block;white-space:nowrap;padding:10px;border:1px solid #cfe0ff;border-radius:8px;color:#086bfa;text-decoration:none}.zone-table td{vertical-align:middle}

/* Responsive receiving: full-width product titles below photos. */
main,header{max-width:1400px}main{padding:24px 32px}header{padding:24px 32px 10px}
#serverPanel{margin-bottom:24px;padding:16px 20px;background:#f6f9ff;border-radius:14px}#serverPanel h2{font-size:18px}#serverStatus{font-size:13px;color:var(--muted);margin:6px 0}#serverLogin{max-width:420px}#serverLogin button{margin-top:12px}#serverLogout{margin-top:8px}
.search-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 200px;gap:28px;align-items:end}.search-form button{height:58px;margin:0}.unit input{height:70px}.heading{flex-direction:row}.zone-orders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}.zone-order{min-width:0;background:#fff;border:1px solid #e2eaf5;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px}.zone-order .zone-photo{width:100%;height:175px;border-radius:12px;background:#f7f9fc;font-size:13px;flex-shrink:0}.zone-order .zone-photo img{width:100%;height:100%;object-fit:contain;padding:10px}.zone-order-name{font-size:17px;line-height:1.5;font-weight:600;white-space:normal;word-break:normal;overflow-wrap:break-word;margin:0}.zone-details,.zone-quantities{margin:0;padding:0;display:grid;gap:12px}.zone-details{grid-template-columns:1fr 1fr}.zone-track{grid-column:1/-1}.zone-details div,.zone-quantities div{min-width:0}.zone-order dt{font-size:12px;color:#7b899c;font-weight:400}.zone-order dd{margin:3px 0 0;font-size:14px;overflow-wrap:anywhere}.zone-quantities{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 0;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7}.zone-quantities dd{font-size:22px;font-weight:650}.zone-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;align-items:center}.zone-actions button,.zone-actions a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:normal;flex:1;padding:10px;font-size:13px;text-align:center}.barcode-missing{font-size:12px;color:#8994a4;flex-basis:100%}.zone-photo:focus-visible{outline:3px solid #bbd9ff;outline-offset:3px}#zonePanel{padding:22px}#zoneFilter{max-width:100%}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.card{display:flex;flex-direction:column;padding:18px;gap:14px;min-width:0}.card .visual{width:100%;height:150px;flex-shrink:0}.card-body{width:100%;display:flex;flex-direction:column;flex:1}.card-body h3{overflow-wrap:break-word;font-size:17px;line-height:1.5}.card .metrics{margin-top:4px}.card button{max-width:none;min-height:44px;margin-top:auto}.card .tag{margin-top:10px}.card .track{font-size:12px}.card .meta{font-size:12px}
#resultArea{margin:0;padding:22px;border-radius:18px}input,select,textarea{min-width:0}button{min-height:44px}.close{min-height:32px}.grid2,.mapping{min-width:0}.preview{max-width:100%;overflow:auto}.preview table{min-width:560px}footer{flex-wrap:wrap}#zoneSummary,#baseInfo,#fileName,#serverStatus{overflow-wrap:anywhere}.receipt section h3{overflow-wrap:break-word}#zonePanel .result-head{align-items:center;flex-direction:row}
@media(max-width:1100px){.zone-orders,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.search-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 160px;gap:18px}}
@media(max-width:700px){main{padding:18px 14px}header{padding:18px 14px 8px}.brand{font-size:23px;letter-spacing:2px}.heading{margin:8px 0 22px}.page-title{font-size:32px}.import-link{font-size:14px}#serverPanel{padding:14px;margin-bottom:20px}.search-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.search-form button{grid-column:1/-1;width:100%;height:52px}.unit input{font-size:30px!important;height:65px}.search-form label{font-size:14px}.zone-orders,.cards{grid-template-columns:1fr}.zone-order{padding:16px;gap:14px}.zone-order .zone-photo{height:190px}.zone-order-name{font-size:17px}.zone-tiles{gap:7px}.zone-tile{padding:13px 8px}.zone-tile span{font-size:12px}.zone-tile b{font-size:30px}.zone-tile small,.zone-tile em{font-size:10px}.zone-caption{margin-bottom:22px}#zonePanel{padding:12px;margin-inline:0}#zonePanel .result-head{align-items:stretch;flex-direction:column;gap:10px}#zoneTitle{font-size:20px}#closeZone{align-self:flex-start}#resultArea{padding:14px;margin:0;border-radius:14px}.card{padding:16px;gap:14px}.card .visual{height:170px}.card-body h3{font-size:17px}.card button{font-size:14px}.grid2{grid-template-columns:1fr}.mapping{grid-template-columns:1fr}.toolbar{align-items:stretch}.toolbar>*{max-width:100%}.toolbar input[type=file]{width:100%}.result-head{align-items:stretch;flex-direction:column}.result-head input{max-width:none}input,select,textarea{font-size:16px}dialog{max-height:90dvh;width:calc(100% - 20px);padding:22px 16px}.receipt .numbers{padding-left:0;flex-wrap:wrap}.search-switches button{width:100%}footer{flex-direction:column}.zone-actions button,.zone-actions a{min-width:110px}.today-pill{font-size:13px!important;padding:10px 12px!important}}

.zone-received-time{font-size:12px;color:#748092;margin:0}
@media(max-width:700px){
#zonePanel{padding:12px 8px}.zone-orders{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid #e2eaf5;border-radius:12px;overflow:hidden}
.zone-order{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px 12px;padding:14px 12px;border:0;border-bottom:1px solid #e5ebf3;border-radius:0;align-items:start}.zone-order:last-child{border-bottom:0}
.zone-order .zone-photo{grid-column:1;grid-row:1;width:60px;height:60px;border-radius:8px;font-size:9px}.zone-order .zone-photo img{padding:3px}.zone-order-name{grid-column:2;grid-row:1;font-size:14px;line-height:1.4;margin:0;align-self:center;overflow-wrap:break-word}
.zone-order>.muted,.zone-details,.zone-quantities,.zone-actions,.zone-received-time{grid-column:1/-1}
.zone-details{display:flex;flex-wrap:wrap;gap:3px 12px}.zone-details>div{display:flex;gap:4px;align-items:baseline}.zone-details .zone-track{flex-basis:100%}.zone-order .zone-details dt,.zone-order .zone-details dd{font-size:11px;line-height:1.5;margin:0}.zone-details dt:after{content:':'}.zone-details dd{word-break:break-word}
.zone-quantities{padding:8px 0;gap:8px}.zone-order .zone-quantities dt{font-size:10px;line-height:1.4}.zone-order .zone-quantities dd{font-size:16px;line-height:1.3;margin:2px 0 0}
.zone-actions{margin:0;gap:6px}.zone-actions button,.zone-actions a{font-size:12px;min-height:44px;padding:8px;min-width:0;border-radius:8px}.barcode-missing{font-size:10px}.zone-received-time{font-size:11px;line-height:1.4}
}

.brand{color:inherit;text-decoration:none}.brand:focus-visible{outline:3px solid #bbd9ff;outline-offset:5px;border-radius:4px}.zone-tools{display:flex;gap:8px;flex-wrap:wrap}#clearZone{color:#b62e2e;background:#fff4f2;border-color:#f2cfca}@media(max-width:700px){.zone-tools{width:100%}.zone-tools button{flex:1;font-size:12px}}

/* Explicit image bounds avoid intrinsic grid sizing and clipping on Safari. */
.card .visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;isolation:isolate}
.card .visual img{position:absolute;inset:0;display:block;box-sizing:border-box;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;margin:0;padding:8px;object-fit:contain;object-position:center center;border-radius:inherit;background:transparent}
@media(max-width:700px){.card .visual{height:180px;margin:0}.card .visual img{padding:6px}}