:root{color-scheme:light;font-family:Inter,Segoe UI,Tahoma,Arial,sans-serif;background:#f6f3ee;color:#261f1b}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}.app-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:22px 0 42px}.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:26px;border-radius:8px;background:linear-gradient(135deg,#fffaf2,#ead7bd);border:1px solid #e2ccb0}.eyebrow{margin:0 0 8px;color:#8c6336;font-size:.82rem;font-weight:800;letter-spacing:0}h1,h2,h3,p{margin-top:0}h1{margin-bottom:8px;font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;color:#2f241c}h2{margin-bottom:4px;font-size:1.2rem}h3{margin-bottom:0;font-size:1.18rem}.subtitle{max-width:680px;margin-bottom:0;color:#5d4d41;line-height:1.7}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#fffa;color:#6f471e;font-weight:800;white-space:nowrap}.status-strip{margin:16px 0;padding:13px 16px;border-radius:8px;background:#2f241c;color:#fff9f0;font-weight:700}.pulse{animation:pulse 1s infinite alternate}@keyframes pulse{0%{opacity:.55}to{opacity:1}}.upload-grid,.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.upload-card{display:grid;gap:9px;min-height:160px;padding:18px;border:1px solid #e2d4c2;border-radius:8px;background:#fffaf4;cursor:pointer}.upload-card input{display:none}.upload-card small{color:#746257;line-height:1.5}.upload-card em{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:auto;padding:8px 11px;border-radius:999px;background:#8c5a2b;color:#fff;font-style:normal;font-weight:800}.upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:#f0dfca;color:#7a4f26}.metrics-grid{grid-template-columns:repeat(7,minmax(0,1fr));margin:14px 0}.metric{padding:14px;border-radius:8px;background:#fff;border:1px solid #eadfD0}.metric span{display:block;color:#7d6a5c;font-size:.78rem}.metric strong{display:block;margin-top:4px;font-size:1.65rem}.content-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;align-items:start}.manual-panel,.reconciliation-panel{margin-bottom:14px}.recon-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.recon-list{display:grid;gap:10px}.recon-card{padding:14px;border:1px solid #ecdfce;border-radius:8px;background:#fffdf9}.recon-card.matched{border-color:#b9dfc4;background:#fbfffc}.recon-card.review,.recon-card.mismatch{border-color:#f1c983;background:#fffaf0}.recon-card.voided{border-color:#e4b6ad;background:#fff7f5}.recon-card.external{border-color:#b7cbe6;background:#f7fbff}.recon-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}.sequence-box{display:grid;place-items:center;min-width:74px;padding:9px;border-radius:8px;background:#f1e2cf;color:#5d3d1e}.sequence-box span{font-size:.68rem;font-weight:800}.sequence-box strong{font-size:1.35rem}.recon-title p{margin:5px 0 0;color:#78675a}.recon-status{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border-radius:999px;font-size:.74rem;font-weight:900;white-space:nowrap}.recon-status.matched{background:#dff3e5;color:#236337}.recon-status.review,.recon-status.mismatch{background:#ffe8c7;color:#83511f}.recon-status.voided{background:#ffe0dc;color:#8a3528}.recon-status.external{background:#dceafb;color:#295984}.recon-fields{grid-template-columns:repeat(6,minmax(0,1fr))}.recon-actions{margin-top:10px}.manual-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.manual-form label{display:grid;gap:6px;color:#7d6a5c;font-size:.8rem;font-weight:800}.manual-form input,.manual-form select{width:100%;min-height:42px;border:1px solid #dccbb5;border-radius:8px;background:#fffdf9;color:#2f241c;padding:9px 10px}.wide-field{grid-column:span 2}.panel{border-radius:8px;background:#fff;border:1px solid #eadfd0;padding:16px}.panel-header{margin-bottom:14px}.panel-header p{margin:4px 0 0;color:#76675b;line-height:1.5}.with-action{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.batch-list,.records-list{display:grid;gap:10px}.batch-item{display:flex;justify-content:space-between;gap:10px;padding:12px;border-radius:8px;background:#f8f2ea}.batch-item span{display:block;margin-top:5px;color:#76675b;font-size:.82rem}.record-card{padding:14px;border:1px solid #ecdfce;border-radius:8px;background:#fffdf9}.record-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.source-pill,.status,.flags span{display:inline-flex;align-items:center;border-radius:999px;font-weight:800;font-size:.72rem}.source-pill{margin-bottom:6px;padding:5px 8px;background:#f1e2cf;color:#765027}.status{padding:6px 9px;color:#49382a;background:#efe7dd;white-space:nowrap}.status.approved{background:#dff3e5;color:#236337}.record-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.record-fields span{display:block;margin-bottom:3px;color:#8b7a6b;font-size:.72rem}.record-fields strong{display:block;overflow-wrap:anywhere;font-size:.9rem}.flags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.flags span{padding:5px 8px;background:#ffe8c7;color:#83511f}.message-preview{padding:10px;border-radius:8px;background:#f8f2ea;color:#5d4e43;line-height:1.6}.shopify-action{display:grid;gap:4px;margin-bottom:10px;padding:10px;border-radius:8px;background:#edf7ee;color:#234e2b;line-height:1.5}.shopify-action span{color:#35623c}.shopify-action small{color:#446d49;font-weight:700}.record-actions{display:flex;flex-wrap:wrap;gap:8px}.primary-button,.secondary-button,.ghost-button{min-height:40px;border:0;border-radius:8px;padding:9px 12px;cursor:pointer;font-weight:800}.primary-button,.secondary-button{display:inline-flex;align-items:center;gap:6px}.primary-button{background:#2f241c;color:#fff}.secondary-button,.ghost-button{background:#f0e4d5;color:#4b3525}.ghost-button:disabled{cursor:not-allowed;opacity:.45}.empty-state{display:grid;min-height:140px;place-items:center;border:1px dashed #d9c6ad;border-radius:8px;color:#7d6a5c;text-align:center}.image-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#261f1b94}.image-modal-body{width:min(760px,100%);max-height:88vh;overflow:auto;border-radius:8px;background:#fff;padding:14px}.image-modal img{display:block;width:100%;height:auto;border-radius:8px}@media(max-width:840px){.hero,.with-action,.record-head,.recon-top{flex-direction:column}.upload-grid,.metrics-grid,.recon-summary,.content-grid,.manual-form,.record-fields,.recon-fields{grid-template-columns:1fr}.app-shell{width:min(100% - 20px,1180px);padding-top:12px}.hero{padding:20px}.upload-card{min-height:136px}.imports-panel{order:2}.wide-field{grid-column:auto}.recon-top{display:flex}.sequence-box{width:100%;min-width:0;grid-template-columns:1fr auto;justify-items:start}.recon-status{width:100%;white-space:normal;text-align:center}.record-actions button{width:100%;justify-content:center}}