*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#f5f5f5;color:#111;min-height:100vh}
.banner{background:#fff;border-bottom:1px solid #e5e5e5}
.banner-inner{max-width:1180px;margin:0 auto;padding:20px 28px}
#app{max-width:1180px;margin:0 auto;padding:24px 28px 60px}

/* Header */
.header{display:flex;align-items:flex-start;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:64px;width:auto;display:block}
.title-block{text-align:right}
.title-block h1{font-size:26px;font-weight:600;color:#111;letter-spacing:-0.01em}
.title-block p{font-size:13px;color:#777;margin-top:4px;max-width:560px}

/* Workspace */
.workspace{background:#f5f5f5;border-radius:14px;padding:28px 24px;margin-bottom:20px}

.upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.zone-col{display:flex;flex-direction:column;gap:10px}
.zone-title{font-size:18px;font-weight:600;color:#111;margin-bottom:2px}
.drop-zone{border:1px solid #e5e5e5;border-radius:10px;padding:24px 12px;cursor:pointer;background:#fff;text-align:center;transition:background 0.15s,border-color 0.15s}
.drop-zone:hover,.drop-zone.drag{background:#fafafa;border-color:#999}
.dz-icon{font-size:26px;color:#666;margin-bottom:6px;line-height:1}
.dz-hint{font-size:13px;color:#888}

.file-list{display:flex;flex-direction:column;gap:6px}
.file-slot{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:10px}
.fi{font-size:16px;flex-shrink:0}
.finfo{flex:1;min-width:0}
.fname{font-size:12px;font-weight:500;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsize{font-size:10px;color:#999;margin-top:1px}
.rm{background:none;border:none;cursor:pointer;color:#aaa;font-size:14px;padding:2px 4px;line-height:1;flex-shrink:0;border-radius:4px}
.rm:hover{color:#333;background:#e8e8e8}

#run-btn{width:100%;padding:14px 0;font-size:14px;font-weight:500;border:none;border-radius:8px;background:#111;color:#fff;cursor:not-allowed;opacity:0.5;transition:opacity 0.15s,background 0.15s}
#run-btn.ready{opacity:1;cursor:pointer}
#run-btn.ready:hover{background:#000}
#run-btn:disabled{cursor:not-allowed}

#progress-wrap{display:none;margin-top:14px}
#progress-wrap.active{display:block}
#progress-label{font-size:12px;font-weight:500;color:#333;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
#progress-track{height:6px;background:#e5e5e5;border-radius:3px;overflow:hidden}
#progress-bar{height:100%;background:#111;width:0%;transition:width 0.3s ease;border-radius:3px}
#progress-bar.indeterminate{width:30% !important;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{
  0%{margin-left:-30%}
  100%{margin-left:100%}
}
#progress-detail{font-size:11px;color:#777;margin-top:4px;font-family:"SF Mono",Monaco,monospace}

#error-box{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#b91c1c;display:none}

/* Results */
#results-wrap{display:none}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.results-header h2{font-size:18px;font-weight:600;color:#111}

#summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px;max-width:500px}
.stat-card{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:14px 16px}
.stat-card.danger{border-color:#fca5a5;background:#fef7f7}
.stat-num{font-size:24px;font-weight:600;color:#111}
.stat-num.red{color:#dc2626}
.stat-num.muted{color:#9ca3af}
.stat-lbl{font-size:11px;color:#666;margin-top:4px;text-transform:uppercase;letter-spacing:0.03em;font-weight:500}

/* Section blocks */
.section{margin-bottom:24px}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px 8px 0 0;border:1px solid;border-bottom:none}
.section-header.discrep{background:#fef2f2;border-color:#fecaca}
.section-header.match{background:#f0fdf4;border-color:#bbf7d0}
.section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;display:flex;align-items:center;gap:8px}
.section-header.discrep .section-title{color:#991b1b}
.section-header.match .section-title{color:#166534}
.section-count{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px}
.section-header.discrep .section-count{background:#fecaca;color:#7f1d1d}
.section-header.match .section-count{background:#bbf7d0;color:#14532d}

.sheet-wrap{overflow-x:auto;border:1px solid;border-radius:0 0 8px 8px;background:#fff}
.section .sheet-wrap.discrep{border-color:#fecaca}
.section .sheet-wrap.match{border-color:#bbf7d0}
table.sheet{width:100%;border-collapse:collapse;font-size:12px}
table.sheet th{background:#f8f8f8;color:#444;padding:9px 12px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;border-bottom:1px solid #e5e5e5}
table.sheet th.center{text-align:center}
table.sheet td{padding:9px 12px;border-bottom:1px solid #f0f0f0;vertical-align:top}
table.sheet tr:last-child td{border-bottom:none}
table.sheet tr.mismatch-row td{background:#fff}
table.sheet tr.mismatch-row:hover td{background:#fffafa}
table.sheet tr.design-row td{background:#fffbf0}
table.sheet tr.match-row:hover td{background:#fafafa}
.sku-cell{font-weight:600;font-family:"SF Mono",Monaco,monospace;font-size:12px;color:#111}
.desc-cell{color:#444;max-width:220px}
.src-cell{text-align:center;font-size:12px;color:#333}
.src-cell.na{color:#bbb;font-style:italic}
.note-cell{font-size:11px;color:#555;max-width:280px;line-height:1.5}
.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;white-space:nowrap;letter-spacing:0.02em}
.badge-sku{background:#dbeafe;color:#1e40af}
.badge-qty{background:#dcfce7;color:#166534}
.badge-price{background:#fed7aa;color:#9a3412}
.badge-dim{background:#fce7f3;color:#9d174d}
.badge-missing{background:#fecaca;color:#991b1b}
.badge-design{background:#e5e7eb;color:#374151}
.match-icon{font-size:14px;color:#16a34a}

.empty-state{padding:24px;text-align:center;font-size:13px;color:#888}

/* Sub-group headers (cabinets vs mouldings) */
.subgroup{margin-bottom:18px}
.subgroup:last-child{margin-bottom:0}
.subgroup-title{font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:0.04em;padding:8px 0 8px 4px;display:flex;align-items:center;gap:8px}
.subgroup-count{background:#e5e7eb;color:#374151;font-size:10px;font-weight:600;padding:1px 7px;border-radius:9px}

/* Collapsible matches & ignored */
.section-header.collapsible{cursor:pointer;border-radius:8px;border-bottom:1px solid}
.section-header.collapsible.open{border-radius:8px 8px 0 0;border-bottom:none}
.section-header.collapsible .chev{font-size:12px;transition:transform 0.15s;color:inherit}
.section-header.collapsible.open .chev{transform:rotate(90deg)}
.collapsible-body{display:none}
.collapsible-body.open{display:block}

/* Ignored section */
.section-header.ignored{background:#f5f5f5;border-color:#d4d4d4}
.section-header.ignored .section-title{color:#525252}
.section-header.ignored .section-count{background:#d4d4d4;color:#404040}
.section .sheet-wrap.ignored{border-color:#d4d4d4}
table.sheet tr.ignored-row td{background:#fafafa;color:#888}
table.sheet tr.ignored-row .sku-cell{color:#666}

/* Checkbox column */
.row-check{width:32px;text-align:center}
.row-check input{cursor:pointer;width:14px;height:14px;accent-color:#111}
table.sheet th.row-check{padding-left:8px;padding-right:8px}
table.sheet td.row-check{padding-left:8px;padding-right:8px}