:root{font-family:Arial,'Noto Sans Thai',sans-serif;color:#172237;background:#f5f6f9}*{box-sizing:border-box}body{margin:0}aside{width:216px;position:fixed;inset:0 auto 0 0;background:#192130;color:#fff;padding:25px 14px}aside h2{font-size:19px;margin:0 9px;color:#ff5a60}aside h2 span{color:white}aside small{display:block;margin:8px 9px 30px;color:#b9c9e7;font-size:11px;letter-spacing:1px}.nav{display:block;width:100%;text-align:left;border:0;border-radius:9px;background:none;color:#d9e2ef;padding:15px 13px;margin:3px 0;cursor:pointer;font-size:13px}.nav.active,.nav:hover{background:#34435a;color:white}main{margin-left:216px;padding:65px max(32px,7vw)}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:23px;margin:0 0 6px}p.sub{font-size:12px;color:#78859c;margin:0 0 18px}.demo{background:#fff1d7;color:#9c6100;border-radius:25px;padding:10px 15px;font-size:12px;font-weight:bold}.notice{padding:13px 18px;border:1px solid #f4dda7;border-radius:9px;background:#fff9ec;color:#986b23;font-size:12px;margin:0 0 24px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.stat{background:#fff;border:1px solid #e2e6ee;border-radius:14px;padding:20px;min-height:104px}.stat small{color:#7b8aa2;font-size:12px}.stat strong{display:block;font-size:30px;margin-top:15px}.stat:nth-child(2) strong{color:#e38a22}.stat:nth-child(3) strong{color:#e23f48}.stat:nth-child(4) strong{color:#15976b}.panel{background:#fff;border:1px solid #e2e6ee;border-radius:14px;overflow:hidden}.toolbar{padding:18px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.toolbar b{margin-right:auto;font-size:14px}input,select{border:1px solid #d8dee8;border-radius:7px;padding:11px;font-size:13px;background:white;max-width:100%}button{cursor:pointer}.btn{border:0;border-radius:7px;padding:12px 15px;font-size:12px;font-weight:bold}.btn.red{background:#d93643;color:white}.btn.grey{background:#edf0f5;color:#34445b}table{border-collapse:collapse;width:100%;font-size:12px}th{background:#f8f9fb;color:#8491a7;text-align:left;font-size:11px;padding:15px}td{border-top:1px solid #edf0f4;padding:16px 15px}td strong{font-size:12px}td small{display:block;color:#8794a9;margin-top:3px}.status{border-radius:30px;padding:6px 9px;font-size:11px;font-weight:bold;background:#fff1d9;color:#a96a00;white-space:nowrap}.status.done{background:#def7ed;color:#16815d}.status.dispute{background:#ffe4e6;color:#cf3343}.open{border:0;background:none;color:#d93643;font-weight:bold;cursor:pointer}.foot{color:#8190a7;font-size:11px;margin-top:15px}.empty{padding:35px;text-align:center;color:#8491a7}.overlay{position:fixed;inset:0;background:#10182888;display:none;justify-content:flex-end;z-index:5}.overlay.show{display:flex}.drawer{width:min(540px,100%);background:white;height:100%;overflow:auto;padding:26px;box-shadow:-8px 0 30px #1112}.drawer h2{margin:0 0 20px}.field{display:grid;gap:6px;margin:14px 0;font-size:12px;color:#5d6b80}.field input,.field select{width:100%}.close{float:right;background:none;border:0;font-size:24px}.actions{display:flex;gap:10px;margin-top:20px}.hint{background:#f6f8fb;padding:14px;border-radius:8px;color:#65758e;font-size:12px;line-height:1.7}@media(max-width:950px){main{padding:28px 20px}.stats{grid-template-columns:repeat(2,1fr)}.panel{overflow-x:auto}table{min-width:800px}}@media(max-width:600px){aside{position:static;width:100%;padding:12px}aside small{margin:4px 9px}.nav{display:inline-block;width:auto;padding:10px}main{margin:0;padding:22px 12px}.stats{gap:8px}.stat{padding:14px}.heading{align-items:flex-start}.toolbar{gap:6px}}
#importView{display:none}.five-files{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.five-files label{min-width:0}.five-files input{font-size:11px;padding:8px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{background:#f6f7fa;border-radius:9px;padding:15px}.metric small{display:block;color:#6d7a8c}.metric strong{display:block;font-size:24px;margin-top:8px}.import-table{max-height:560px;overflow:auto}.import-table td{vertical-align:top}.import-table td:nth-child(6){min-width:200px}@media(max-width:1100px){.five-files{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid .metric:nth-child(n){grid-column:span 1}}.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.import-card{padding:24px}.import-card h3{margin:0 0 18px;font-size:16px}.import-card label{display:block;margin:15px 0 6px;font-size:13px;font-weight:600}.import-card select,.import-card input{width:100%}.import-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}.import-note{font-size:12px;color:#718097;line-height:1.7;margin-top:15px}.import-result{margin-top:20px}.import-table{overflow:auto;max-height:400px}.import-table table{min-width:650px}.import-metrics{display:flex;gap:12px;flex-wrap:wrap;margin:15px 0}.import-metrics span{padding:12px 18px;background:#f5f6fa;border-radius:8px;font-size:13px}.import-alert{padding:14px;background:#fff7e6;border-radius:8px;font-size:12px;color:#92641c}@media(max-width:850px){.import-grid{grid-template-columns:1fr}}

/* Import V9 visual redesign */
#importView{max-width:1420px;margin:0 auto}.import-card{padding:28px 30px}.upload-panel{margin-bottom:20px}.section-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}.section-top h3,.results-header h3{font-size:18px;margin:0 0 5px;letter-spacing:-.2px}.muted{font-size:13px;color:#75839a;margin:0;line-height:1.6}.count-pill{background:#fff1f1;color:#b42331;border-radius:30px;padding:8px 13px;font-size:12px;font-weight:700;white-space:nowrap}.count-pill.light{background:#f2f5f9;color:#64748b}.drop-zone{border:2px dashed #cdd6e3;border-radius:16px;background:#fafbfe;min-height:205px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;text-align:center;cursor:pointer;padding:22px;transition:.15s}.drop-zone:hover,.drop-zone.dragging,.drop-zone:focus{border-color:#d93643;background:#fff8f8;outline:none}.upload-icon{width:48px;height:48px;border-radius:14px;background:#ffe9eb;color:#d93643;display:grid;place-items:center;font-size:30px;font-weight:bold}.drop-zone strong{font-size:17px;color:#202d40}.drop-zone span{font-size:14px;color:#53657e}.drop-zone small{font-size:12px;color:#8793a5}.file-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.file-slot{border:1px solid #e2e7ee;border-radius:11px;background:#fbfcfe;padding:12px 13px;display:flex;gap:10px;align-items:center;min-width:0}.file-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#eaf7ef;color:#218650;font-size:19px;flex-shrink:0}.file-meta{min-width:0;flex:1}.file-meta b{display:block;font-size:13px;color:#25354c}.file-meta small{display:block;font-size:11px;color:#8b97a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.file-slot.filled{background:#f7fcf9;border-color:#c9e7d3}.file-slot.conflict{background:#fff9ef;border-color:#eecb8b}.file-remove{border:0;background:none;color:#9ca9b9;font-size:19px;padding:4px 7px}.file-remove:hover{color:#d93643}.import-actions{margin-top:20px}.primary-action{padding:13px 20px;font-size:13px}.import-note{margin-top:12px;font-size:12px}.metric-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.metric-grid .metric:nth-child(-n+3){grid-column:span 2}.metric-grid .metric:nth-child(n+4){grid-column:span 3}.metric-success{background:#f0fbf5!important;border-color:#ccebd9!important}.metric-fail{background:#fff5f4!important;border-color:#f5d2d0!important}.metric{padding:18px;background:#f6f8fb;border:1px solid #edf0f5;border-radius:12px}.metric small{font-size:12px;line-height:1.5}.metric strong{font-size:27px;color:#19253a}.results-header{display:flex;justify-content:space-between;align-items:center;margin-top:26px;margin-bottom:12px;gap:12px}.filters-row{display:grid;grid-template-columns:1fr 1.35fr 1fr 1.5fr auto auto;gap:10px;margin-bottom:14px}.filters-row select,.filters-row input{width:100%;min-width:0;font-size:13px;height:42px}.filters-row .btn{white-space:nowrap}.import-table{border:1px solid #edf0f4;border-radius:10px;max-height:520px}.import-table table{min-width:900px}.import-table th{font-size:12px;color:#63738a}.import-table td{font-size:12px;line-height:1.6}.empty-state{text-align:center;padding:42px!important;color:#8895a7}.import-result .import-note{overflow-wrap:anywhere}@media(max-width:1200px){.file-list{grid-template-columns:repeat(2,minmax(0,1fr))}.filters-row{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid .metric:nth-child(n){grid-column:span 1}}@media(max-width:680px){.import-card{padding:18px}.file-list,.filters-row{grid-template-columns:1fr}.drop-zone{min-height:175px}.metric-grid{gap:8px}.metric{padding:13px}.metric strong{font-size:23px}}
.drop-zone{min-height:112px;padding:13px;gap:4px;border-radius:11px}.upload-icon{width:32px;height:32px;font-size:21px;border-radius:9px}.drop-zone strong{font-size:14px}.drop-zone span{font-size:12px}.drop-zone small{font-size:11px}.file-list{margin-top:11px}.import-table thead th{position:sticky;top:0;z-index:2;background:#f1f4f8;box-shadow:0 1px 0 #dbe2ec}.import-table{position:relative}.save-note{font-size:12px;color:#66758d;margin:8px 0 0}#saveImport:disabled{opacity:.5;cursor:not-allowed}

/* Import V17: spacious reference-inspired upload design, same parsing and matching logic */
#importView{max-width:1540px}#importView .upload-panel{padding:28px 30px 30px;border:1px solid #e3e9f1;border-radius:18px;box-shadow:0 12px 32px rgba(21,42,72,.045);background:#fff}#importView .upload-panel .section-top{align-items:center;margin-bottom:22px}#importView .upload-heading{display:flex;align-items:center;gap:20px}#importView .upload-heading h3{font-size:26px;font-weight:800;color:#101e3c;margin-bottom:6px}#importView .upload-heading .muted{font-size:14px;color:#697c9b}#importView .excel-mark{width:70px;height:70px;flex-shrink:0;border-radius:20px;background:linear-gradient(145deg,#e3f7ee,#f1faf7);display:grid;place-items:center;border:1px solid #e0f0e9}#importView .excel-mark span{display:grid;place-items:center;width:42px;height:48px;border-radius:5px;color:#fff;font-weight:900;font-size:28px;background:linear-gradient(135deg,#07854c,#0dc777);box-shadow:0 6px 12px #0b88533b}#importView .count-pill{font-size:17px;padding:11px 22px;color:#e32236;background:#fff0f1}#importView .drop-zone{min-height:170px;background:linear-gradient(180deg,#fbfcff,#fff);border:2px dashed #cbd7e8;border-radius:16px;gap:7px;padding:20px}#importView .drop-zone strong{font-size:18px;color:#111e3b}#importView .drop-zone span{font-size:14px;color:#687a98}#importView .drop-zone small{font-size:12px;color:#7789a4}#importView .upload-icon{border-radius:50%;width:52px;height:52px;background:#ffebee;color:#e52339;font-size:35px}#importView .file-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px}#importView .file-slot{min-height:75px;border:1px solid #e1e7f0;border-radius:14px;padding:12px 13px;background:#fff;box-shadow:0 2px 5px rgba(20,42,72,.025)}#importView .file-icon{height:44px;width:44px;border-radius:13px;background:#e5f8ef;color:#05a35d;font-weight:900;font-size:24px}#importView .file-icon.icon-sbcItems{background:#e3efff;color:#2587f7}#importView .file-icon.icon-Shopee{background:#ffebe5;color:#ee4d2d}#importView .file-icon.icon-Lazada{background:#f4e4ff;color:#a445e9}#importView .file-icon.icon-TikTok{background:#101116;color:#fff}#importView .file-meta b{font-size:13px;color:#101e3b}#importView .file-meta small{font-size:11px;color:#71809b}#importView .file-chevron{font-size:28px;color:#7e8eaa;line-height:1}#importView .file-slot.filled{border-color:#b7e3cb;background:#f9fffb}#importView .file-slot.filled .file-chevron{display:none}@media(max-width:1250px){#importView .file-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){#importView .file-list{grid-template-columns:repeat(2,minmax(0,1fr))}#importView .upload-heading h3{font-size:20px}#importView .excel-mark{width:54px;height:54px}#importView .upload-panel{padding:20px}}@media(max-width:550px){#importView .file-list{grid-template-columns:1fr}#importView .upload-heading{gap:10px}#importView .upload-heading .muted{font-size:12px}#importView .count-pill{font-size:12px;padding:7px 10px}}

/* V18: compact mint upload layout with user-provided Drive assets */
#fileCount{margin-left:auto}#importView .upload-panel .section-top{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}#importView .upload-heading{flex:1;min-width:0}#importView .excel-mark{width:64px;height:64px;border-radius:18px;overflow:hidden}#importView .excel-mark img{width:100%;height:100%;object-fit:contain}#importView .upload-heading h3{font-size:24px}#importView .drop-zone{position:relative;min-height:184px;padding:16px 230px 16px 20px;overflow:hidden;border-color:#78dcbc;background:radial-gradient(ellipse at 90% 75%,#ddf7ed 0%,transparent 55%),linear-gradient(125deg,#fbfffd,#effcf6);gap:5px}#importView .drop-zone:hover,#importView .drop-zone.dragging{border-color:#0eae7c;background:#effcf6}#importView .upload-icon{background:#e1f8ed;color:#09a873;font-size:32px;width:50px;height:50px}#importView .select-files-visual{display:inline-block;padding:9px 34px;border-radius:30px;background:linear-gradient(100deg,#0cb278,#07a97a);color:white;font-size:14px;font-weight:700;box-shadow:0 5px 12px #09a97722}#importView .drop-zone strong{font-size:18px}#importView .hero-art{position:absolute;right:25px;top:50%;transform:translateY(-50%);height:145px;width:205px;object-fit:contain;pointer-events:none}#importView .file-icon img{width:31px;height:31px;object-fit:contain}#importView .file-icon{background:#f3f8f6!important;color:#08a977}#importView .file-list{gap:10px}#importView .file-slot{min-height:67px;padding:10px}#importView .upload-panel{padding:24px 25px 25px}#importView .file-meta b{font-size:12px}@media(max-width:1050px){#importView .drop-zone{padding-right:170px}#importView .hero-art{right:6px;width:155px;height:125px}}@media(max-width:680px){#importView .drop-zone{padding-right:15px;padding-bottom:125px}#importView .hero-art{top:auto;bottom:0;left:50%;right:auto;transform:translateX(-50%);height:105px}#importView .upload-heading h3{font-size:18px}#importView .excel-mark{width:48px;height:48px}#importView .count-pill{font-size:11px;padding:7px}#importView .upload-heading .muted{font-size:11px}}

/* V20 reference layout corrections */
#importView .upload-panel{padding:26px 28px 28px!important;border-radius:18px!important;background:#fff!important}
#importView .upload-panel .section-top{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin:0 0 22px!important}
#importView .upload-heading{display:flex!important;align-items:center!important;gap:20px!important;flex:1!important}
#importView .excel-mark{width:76px!important;height:76px!important;border-radius:21px!important}
#importView .upload-heading h3{font-size:27px!important;line-height:1.2!important;margin-bottom:8px!important}
#importView .upload-heading .muted{font-size:14px!important}
#importView #fileCount{margin-left:auto!important;align-self:center!important;flex-shrink:0!important;padding:12px 26px!important;font-size:18px!important;background:#fff0f1!important;color:#e21f32!important}
#importView .drop-zone{position:relative!important;min-height:235px!important;padding:22px 260px 22px 22px!important;border:1.5px dashed #7cdec0!important;border-radius:17px!important;background:radial-gradient(ellipse at 84% 86%,#d8f5e8 0%,transparent 48%),linear-gradient(135deg,#f8fffc 0%,#effcf6 56%,#f3fdf8 100%)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
#importView .upload-icon{width:66px!important;height:66px!important;border-radius:50%!important;background:#e4f8ef!important;display:grid!important;place-items:center!important;margin-bottom:2px!important;overflow:hidden}
#importView .upload-icon img{width:100%!important;height:100%!important;object-fit:contain!important}
#importView .drop-zone strong{font-size:20px!important;line-height:1.35!important;color:#0e1e3e!important}
#importView .drop-zone span:not(.select-files-visual):not(.folder-symbol){font-size:14px!important;color:#667995!important}
#importView .select-files-visual{background:#0bae7b!important;color:#fff!important;min-width:188px!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;border-radius:30px!important;padding:10px 26px!important;font-size:16px!important;font-weight:700!important;line-height:1!important;box-shadow:0 5px 14px #079f7526!important}
#importView .folder-symbol{color:#fff!important;font-size:22px!important;font-weight:400!important}
#importView .drop-zone small{font-size:12px!important;color:#7386a1!important;margin-top:4px!important}
#importView .hero-art{right:25px!important;width:220px!important;height:175px!important;object-fit:contain!important}
#importView .file-list{margin-top:18px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
#importView .file-slot{min-height:74px!important}
@media(max-width:1200px){#importView .file-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:800px){#importView .file-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}#importView .drop-zone{padding-right:170px!important}#importView .hero-art{width:145px!important;right:10px!important}#importView .upload-heading h3{font-size:21px!important}}
@media(max-width:600px){#importView .upload-panel .section-top{gap:10px!important}#importView .upload-heading{gap:10px!important}#importView .excel-mark{width:48px!important;height:48px!important}#importView .upload-heading h3{font-size:18px!important}#importView .upload-heading .muted{font-size:11px!important}#importView #fileCount{font-size:12px!important;padding:8px 10px!important}#importView .drop-zone{padding:20px 12px 125px!important;min-height:295px!important}#importView .hero-art{height:110px!important;width:170px!important;top:auto!important;bottom:0!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}#importView .file-list{grid-template-columns:1fr!important}}