:root{
  --bg:#f7f5ff; --card:#ffffff; --ink:#1e1b3a; --mut:#6e6a8a; --line:#e7e3f7;
  --acc:#6c5cff; --acc2:#ff6fa8; --sun:#ffc23d; --mint:#20c997;
  --ok:#12a150; --okbg:#e5f8ee; --warn:#c77700; --warnbg:#fff4dd; --bad:#e23d5a; --badbg:#ffe8ec;
  --shadow:0 10px 30px rgba(76,60,180,.10); --r:18px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141228; --card:#1e1b38; --ink:#eeeaff; --mut:#a49fc6; --line:#2f2b55;
  --acc:#8b7dff; --acc2:#ff86b8; --sun:#ffd166; --mint:#3ddbb0;
  --ok:#4ade80; --okbg:#173326; --warn:#fbbf24; --warnbg:#3a2f12; --bad:#ff6b81; --badbg:#3d1a24; --shadow:0 10px 30px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden}
code{background:rgba(108,92,255,.1);color:var(--acc);padding:1px 6px;border-radius:6px;font-size:.9em}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}
.blobs i:nth-child(1){width:420px;height:420px;background:var(--acc);top:-140px;left:-120px}
.blobs i:nth-child(2){width:360px;height:360px;background:var(--acc2);top:40px;right:-120px}
.blobs i:nth-child(3){width:320px;height:320px;background:var(--sun);bottom:-140px;left:35%}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:28px 20px 10px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.brand{display:flex;gap:14px;align-items:center}
.logo{font-size:38px;width:64px;height:64px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:20px;box-shadow:var(--shadow);transform:rotate(-6deg)}
.hero h1{margin:0;font-size:26px;letter-spacing:-.3px}
.hero p{margin:2px 0 0;color:var(--mut)}
.stepper{display:flex;gap:6px;list-style:none;margin:0;padding:6px;background:var(--card);border-radius:999px;box-shadow:var(--shadow);flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;color:var(--mut);font-size:13px;font-weight:600;transition:.25s}
.stepper li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--mut);font-size:12px;transition:.25s}
.stepper li.on{color:var(--ink)}
.stepper li.on span{background:var(--acc);color:#fff}
.stepper li.done span{background:var(--mint);color:#fff}
.stepper li.done span::before{content:"✓"}.stepper li.done span{font-size:0}.stepper li.done span::before{font-size:13px}

main{max-width:1240px;margin:0 auto;padding:14px 20px 140px}

/* drop zones */
.drops{display:grid;grid-template-columns:3fr 2fr;gap:16px}
.drop{position:relative;background:var(--card);border-radius:var(--r);padding:26px 24px;text-align:center;cursor:pointer;box-shadow:var(--shadow);border:2.5px dashed rgba(108,92,255,.35);transition:transform .15s,border-color .15s,background .15s;outline:none}
.drop.main{border-color:rgba(255,194,61,.7)}
.drop:hover,.drop:focus-visible{transform:translateY(-2px);border-color:var(--acc)}
.drop.main:hover,.drop.main:focus-visible{border-color:var(--sun)}
.drop.over{transform:scale(1.02);border-style:solid;border-color:var(--acc);background:linear-gradient(135deg,rgba(108,92,255,.08),rgba(255,111,168,.08))}
.drop.main.over{border-color:var(--sun);background:rgba(255,194,61,.1)}
.drop .emoji{font-size:44px;line-height:1;margin-bottom:6px;transition:transform .2s}
.drop:hover .emoji,.drop.over .emoji{transform:translateY(-4px) rotate(-8deg) scale(1.1)}
.drop h2{margin:4px 0 4px;font-size:19px}.drop h2 small{font-weight:500;color:var(--mut);font-size:12px;background:var(--line);padding:2px 8px;border-radius:99px;vertical-align:middle}
.drop p{margin:0;color:var(--mut);font-size:14px}
.drop u{color:var(--acc);text-decoration:none;font-weight:600}
.drop.main u{color:var(--warn)}
.count{margin-top:10px;font-weight:700;font-size:13px;min-height:20px}
.count .pill{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--okbg);color:var(--ok)}
.count .pill.y{background:var(--warnbg);color:var(--warn)}

.tips{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;margin:14px 4px 6px;color:var(--mut);font-size:13px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink);font-size:13px;user-select:none}
.switch input{display:none}
.switch i{width:36px;height:20px;border-radius:99px;background:var(--line);position:relative;transition:.2s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch input:checked+i{background:var(--acc)}
.switch input:checked+i::after{left:18px}

/* unmatched mains */
.unm{background:var(--card);border-radius:var(--r);padding:16px;margin:14px 0;box-shadow:var(--shadow);border-left:6px solid var(--sun)}
.unm h3{margin:0 0 4px;font-size:15px}.unm p{margin:0 0 10px;color:var(--mut);font-size:13px}

/* product cards */
.prod{background:var(--card);border-radius:var(--r);padding:16px;margin:14px 0;box-shadow:var(--shadow);border:2px solid transparent;transition:border-color .2s}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.prod.ready{border-color:rgba(32,201,151,.45)}
.prod.todo{border-color:rgba(255,194,61,.55)}
.phead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.phead .fname{font-size:17px;font-weight:700}
.chip{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--line);color:var(--mut)}
.fields{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fld{display:flex;align-items:center;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:0 4px 0 10px;transition:border-color .15s}
.fld:focus-within{border-color:var(--acc)}
.fld span{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.5px}
.fld input{border:0;background:transparent;color:var(--ink);font:inherit;padding:8px 8px;outline:none}
.fld.asin input{width:140px;font-family:ui-monospace,Consolas,monospace;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.fld.sku input{width:190px;font-size:13px}
.fld.ok{border-color:var(--mint)}
.iconbtn{border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:18px;border-radius:10px;padding:4px 8px}
.iconbtn:hover{background:var(--badbg);color:var(--bad)}
.stat{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0 12px;font-size:12px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px}
.b-ok{background:var(--okbg);color:var(--ok)}.b-warn{background:var(--warnbg);color:var(--warn)}.b-bad{background:var(--badbg);color:var(--bad)}
.note{color:var(--mut)}

/* tiles */
.tiles{display:flex;gap:10px;flex-wrap:wrap}
.tile{width:150px;border-radius:14px;padding:6px;background:var(--bg);position:relative;cursor:grab;border:2px solid transparent;transition:transform .12s,border-color .12s}
.tile:hover{transform:translateY(-2px)}
.tile.drag{opacity:.35}.tile.dropt{border-color:var(--acc)}
.tile img{width:100%;height:100px;object-fit:contain;background:#fff;border-radius:10px;display:block}
.tile .slot{position:absolute;top:11px;left:11px;background:var(--acc);color:#fff;font-weight:800;font-size:11px;padding:2px 8px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tile .slot.over{background:var(--warn)}
.tile.mainslot{border-color:var(--sun);background:rgba(255,194,61,.12)}
.tile.mainslot .slot{background:linear-gradient(135deg,#ffb020,#ff7a00)}
.tile .nm{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;font-weight:700;word-break:break-all;margin-top:5px}
.tile .orig{font-size:11px;color:var(--mut);word-break:break-all;line-height:1.3}
.tile .meta{font-size:11px;margin-top:2px}
.tile .acts{position:absolute;top:9px;right:9px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.tile:hover .acts,.tile:focus-within .acts{opacity:1}
.tile .acts button{border:0;width:24px;height:24px;border-radius:50%;cursor:pointer;background:rgba(30,27,58,.7);color:#fff;font-size:12px;line-height:24px;padding:0}
.tile .acts button.star{color:var(--sun)}
.tile.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:168px;border:2px dashed var(--sun);color:var(--warn);font-size:12px;cursor:default;background:rgba(255,194,61,.06)}
.tile.empty .emoji{font-size:28px}
.tile.empty.over{background:rgba(255,194,61,.2)}
.unm .tile{cursor:default}
.unm select{width:100%;font:inherit;font-size:12px;padding:5px;margin-top:5px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}

.empty{text-align:center;color:var(--mut);padding:40px 0}
.empty .big{font-size:60px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(6deg)}}

/* bottom bar */
.bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(1200px,calc(100% - 24px));background:var(--card);border-radius:22px;box-shadow:0 14px 40px rgba(40,30,120,.22);padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;z-index:20;overflow:hidden}
.ring{position:relative;width:48px;height:48px;flex:none}
.ring svg{width:48px;height:48px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.6}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--mint);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .4s}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:11px}
.sum{display:flex;flex-direction:column;line-height:1.3}
.sum span{font-size:12px;color:var(--mut)}
.grow{flex:1}
.btn{font:inherit;font-weight:700;border:0;border-radius:14px;padding:11px 18px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--bg);color:var(--ink)}
.btn.go{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 6px 18px rgba(108,92,255,.35);font-size:15px}
.btn.go:hover{box-shadow:0 8px 24px rgba(108,92,255,.5)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.bar .prog{position:absolute;left:0;right:0;bottom:0;height:4px}
.bar .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s}

#toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%,10px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:14px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

@media (max-width:760px){
  .bar{gap:8px;padding:10px 12px}.bar .switch{display:none}.sum span{display:none}.btn.go{flex:1}
  .tile{width:calc(50% - 5px)}
  .drops{grid-template-columns:1fr}
  .fields{margin-left:0;width:100%}
  .fld.asin input,.fld.sku input{width:100%}
  .fld{flex:1}
  .hero h1{font-size:21px}
  .stepper li{font-size:0;padding:4px}.stepper li span{font-size:12px}
}

/* ASIN list card */
.tpl{display:flex;gap:16px;align-items:center;background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px;border-left:6px solid var(--line);flex-wrap:wrap}
.tpl.loaded{border-left-color:var(--mint)}
.tpl-icon{font-size:36px;width:58px;height:58px;display:grid;place-items:center;background:var(--bg);border-radius:16px;flex:none}
.tpl-body{flex:1 1 320px}
.tpl h2{margin:0;font-size:17px}
.tpl p{margin:2px 0 0;color:var(--mut);font-size:13px}
.tpl-sum{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tpl-acts{display:flex;gap:8px;flex-wrap:wrap}
.btn.small{padding:8px 13px;font-size:13px;border-radius:12px}
.panel{background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);margin:-6px 0 16px}
.panel h3{margin:0 0 4px;font-size:15px}.panel p{margin:0 0 10px;color:var(--mut);font-size:13px}
.panel textarea{width:100%;min-height:120px;font-family:ui-monospace,Consolas,monospace;font-size:13px;border:2px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);color:var(--ink)}
.panel .row{display:flex;gap:10px;align-items:center;margin-top:8px}
.panel table{width:100%;border-collapse:collapse;font-size:12px}
.panel th,.panel td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--line)}
.panel .scroll{max-height:320px;overflow:auto}
.chip.k{background:rgba(108,92,255,.12);color:var(--acc);font-weight:700}
.chip.c{background:rgba(255,111,168,.14);color:var(--acc2);font-weight:700}
.chip.bad{background:var(--badbg);color:var(--bad);font-weight:700}

/* ASIN chips on a card */
.asins{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0 2px}
.asins .lbl{font-size:12px;font-weight:700;color:var(--mut);margin-right:2px}
.achip{display:inline-flex;gap:6px;align-items:center;font:inherit;font-size:12px;border:2px solid var(--mint);background:var(--okbg);color:var(--ink);border-radius:99px;padding:3px 10px 3px 6px;cursor:pointer}
.achip b{font-family:ui-monospace,Consolas,monospace}
.achip .sz{background:var(--card);border-radius:99px;padding:0 6px;font-weight:700;color:var(--mut)}
.achip.off{border-color:var(--line);background:transparent;opacity:.55;text-decoration:line-through}
.fix{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;padding:10px;border-radius:12px;background:var(--bg)}
.fix select,.fix input{font:inherit;font-size:13px;border:2px solid var(--line);border-radius:10px;padding:5px 8px;background:var(--card);color:var(--ink)}
.linkbtn{border:0;background:none;color:var(--acc);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:2px 4px}

.drops.one{grid-template-columns:1fr}
.drops.one .drop{padding:38px 28px}
.drops.one .drop .emoji{font-size:56px}
.drops.one .drop h2{font-size:22px}
.drops.one .drop p{max-width:760px;margin:0 auto}

.tile select.msize{width:100%;font:inherit;font-size:11px;padding:3px 4px;margin-top:4px;border-radius:8px;border:1.5px solid var(--sun);background:var(--card);color:var(--ink)}