/* Slice 6b SPA — design tokens + component classes ported from mockup-app.html */
:root{--bg:#121211;--glass:rgba(255,255,255,.045);--glass2:rgba(255,255,255,.08);--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);--tx:#f3f2ee;--tx2:#a9a8a3;--tx3:#6f6f6e;--g1:#16c7ad;--g2:#00a490;--gd:#00977d;--glow:rgba(0,164,144,.40);--red:#e2655c;--amber:#e0a84e;--cmpbg:#000;--r:14px;--rb:11px}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--tx);font-family:Montserrat,system-ui,sans-serif;background:radial-gradient(1200px 640px at 80% -10%,rgba(0,164,144,.12),transparent 60%),var(--bg);background-attachment:fixed}
a{color:var(--g1)}
.app{width:100%;max-width:1500px;margin:0 auto;padding:clamp(12px,2vw,24px)}
.top{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);border-radius:var(--r);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:clamp(17px,1.8vw,21px);letter-spacing:3px;line-height:1}
.brand .sub{display:flex;flex-direction:column;justify-content:center;font-weight:600;font-size:.42em;line-height:1.22;color:var(--tx2);letter-spacing:.4px}
.crumb{color:var(--tx2);font-size:13px}.crumb b{color:var(--tx);font-weight:500}.spacer{flex:1}
.who{font-size:12px;color:var(--tx2)}.who b{color:var(--tx)}
.body{display:flex;gap:clamp(10px,1.4vw,16px);margin-top:14px}
.rail{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.ic{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--tx2);border:1px solid transparent;cursor:pointer;transition:.18s;background:transparent;font-size:18px}
.ic:hover{background:var(--glass2);color:var(--tx)}.ic.on{color:var(--g1);border-color:var(--line2);background:var(--glass)}
.ic svg{width:20px;height:20px}
.main{flex:1;min-width:0}
.btn{font-family:inherit;cursor:pointer;border-radius:var(--rb);transition:.18s;font-size:13px;font-weight:500}
.grn{background:linear-gradient(135deg,var(--g1),var(--g2));color:#04241f;border:0;font-weight:600;padding:10px 18px;box-shadow:0 6px 22px -8px var(--glow)}
.grn:hover{transform:translateY(-1px);box-shadow:0 12px 32px -8px var(--glow)}.grn:active{transform:scale(.99)}
.grn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.ghost{background:transparent;color:var(--tx);border:1px solid var(--line2);padding:9px 15px}.ghost:hover{background:var(--glass2)}.ghost[disabled]{opacity:.4;cursor:not-allowed}
.dang{background:transparent;color:var(--red);border:1px solid var(--red);border-radius:var(--rb);padding:9px 15px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}.dang:hover{background:rgba(226,101,92,.12)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;font-size:12px}
.seg button{background:transparent;color:var(--tx2);border:0;padding:7px 14px;cursor:pointer;font-family:inherit}.seg button.on{background:var(--glass2);color:var(--tx)}
.seg button[disabled]{opacity:.45;cursor:not-allowed}
.panel{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);border-radius:var(--r);padding:16px;min-width:0}
.vh{font-weight:600;font-size:16px;margin:0 0 4px;letter-spacing:.3px}.vsub{color:var(--tx2);font-size:13px;margin:0 0 16px}
.sect{margin:0 0 8px;font-size:13px;font-weight:600}.sectn{color:var(--tx3);font-weight:400;font-size:12px;margin-left:6px}
.ph-h{font-size:11px;font-weight:600;letter-spacing:1px;color:var(--tx2);margin:18px 0 8px}.ph-h:first-child{margin-top:0}
.stwrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,25vw,372px);gap:16px}
@media(max-width:900px){.stwrap{grid-template-columns:1fr}}
.canvas{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--cmpbg)}.canvas>img{width:100%;display:block}
.canvas .ov{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;top:12px;backdrop-filter:blur(8px);background:rgba(8,9,9,.55);border:1px solid var(--line2);color:var(--tx);font-size:12px;padding:6px 11px;border-radius:999px}.chip.r{right:12px}.chip.l{left:12px}.chip b{color:var(--g1)}
.cbar{position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:6px;justify-content:center;z-index:3}
.ctool{backdrop-filter:blur(8px);background:rgba(8,9,9,.6);border:1px solid var(--line2);color:var(--tx);font-size:12px;padding:7px 12px;border-radius:999px;cursor:pointer;transition:.16s;font-family:inherit}.ctool:hover{background:rgba(0,164,144,.35);border-color:var(--g2)}.ctool.on{background:var(--g2);color:#04241f}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.bge{font-size:11px;color:var(--tx2);border:1px solid var(--line);border-radius:8px;padding:4px 9px}.bge b{color:var(--tx);font-weight:500}
.swgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-height:280px;overflow:auto}
.sw{background:transparent;border:0;padding:0;cursor:pointer;text-align:center}
.sw img,.sw .ph0{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line);transition:.18s;display:block;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 6px,transparent 6px,transparent 12px)}
.sw span{display:block;font-size:10px;color:var(--tx2);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw:hover img{transform:translateY(-2px)}.sw.active img,.sw.active .ph0{border:2px solid var(--g2);box-shadow:0 0 0 3px var(--glow)}.sw.active span{color:var(--g1)}
.ctl{margin-top:14px}.ctl .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tx2);margin-bottom:7px}.ctl .row b{color:var(--tx);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--g2),var(--g1) var(--p,50%),rgba(255,255,255,.12) var(--p,50%));outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#eafdf8;border:2px solid var(--g2);cursor:pointer;box-shadow:0 0 10px var(--glow)}
.switch{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;margin-top:8px}.switch small{color:var(--tx3);font-size:10.5px;display:block}
.tg{width:38px;height:22px;border-radius:999px;background:var(--g2);position:relative;cursor:pointer;flex:0 0 auto}.tg::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;right:3px;transition:.18s}.tg.off{background:rgba(255,255,255,.15)}.tg.off::after{right:19px}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.tool{display:flex;align-items:center;gap:8px;justify-content:center;padding:10px;border:1px solid var(--line2);border-radius:10px;background:transparent;color:var(--tx);font-size:12px;cursor:pointer;font-family:inherit;transition:.16s}.tool:hover{background:var(--glass2);border-color:#2bbfa977}.tool.on{background:var(--g2);color:#04241f}.tfull{grid-column:1/-1}
.vers{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}.vrs{width:64px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line);cursor:pointer;flex:0 0 auto;position:relative;background:#000}.vrs.on{border:2px solid var(--g2)}.vrs img{width:100%;height:100%;object-fit:cover}.vrs em{position:absolute;bottom:0;left:0;right:0;font-style:normal;font-size:8px;background:rgba(0,0,0,.6);color:var(--tx2);text-align:center}
.stbtns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.cost{text-align:center;font-size:11.5px;color:var(--tx3);margin-top:9px}
.field{margin-top:12px}.field label{display:block;font-size:12px;color:var(--tx2);margin-bottom:6px}
.txt{background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:8px;color:var(--tx);padding:8px 10px;font-family:inherit;font-size:13px;width:100%}
textarea.txt{min-height:64px;resize:vertical}
.up{min-height:104px;display:flex;align-items:center;justify-content:center;color:var(--tx2);font-size:13px;border:1px dashed var(--line2);border-radius:11px;cursor:pointer;text-align:center;padding:10px}.up.drag{border-color:var(--g2);background:rgba(0,164,144,.08)}
.hrow{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--glass)}
.hrow .th{width:54px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#000}
.hrow .nm{font-weight:500}.hrow small{color:var(--tx3);font-size:11px}
.pill{font-size:11px;padding:3px 10px;border-radius:999px;white-space:nowrap}.pill.done{background:rgba(0,164,144,.18);color:var(--g1)}.pill.run{background:rgba(255,255,255,.1);color:var(--tx2)}.pill.fail{background:rgba(226,101,92,.18);color:var(--red)}.pill.rej{background:#555;color:#ccc}.pill.warn{background:rgba(224,168,78,.18);color:var(--amber)}
.tl{position:relative;padding-left:22px}.tl::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line2)}
.tl .node{position:relative;margin-bottom:14px}.tl .node::before{content:'';position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--g2);border:2px solid var(--bg)}
.kvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.kv{background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:10px}.kv small{display:block;color:var(--tx3);font-size:10.5px;margin-bottom:3px}.kv b{font-size:15px;font-weight:600}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
table.tbl th{text-align:left;color:var(--tx2);font-weight:500;font-size:11px;padding:7px 10px;border-bottom:1px solid var(--line)}
table.tbl td{padding:8px 10px;border-bottom:1px solid var(--line)}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:60;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}
.sheet{width:min(580px,96vw);max-height:92vh;overflow:auto;background:#151514;border:1px solid var(--line2);border-radius:16px;box-shadow:0 20px 60px -20px rgba(0,0,0,.7)}
.sh-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}.sh-top b{font-size:15px}.x{cursor:pointer;color:var(--tx2);font-size:18px;background:none;border:0}.x:hover{color:var(--tx)}
.sh-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.sh-foot{display:flex;gap:10px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.note{font-size:12px;color:var(--tx2);border-left:2px solid var(--g2);padding-left:10px;line-height:1.5}
.note.warn{border-color:var(--amber)}
.login{max-width:380px;margin:12vh auto 0;text-align:center}.login .panel{padding:26px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#0c0d0c;border:1px solid var(--g2);color:var(--tx);padding:11px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:80;box-shadow:0 10px 30px -10px var(--glow);max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#toast.err{border-color:var(--red);box-shadow:0 10px 30px -10px rgba(226,101,92,.5)}
.muted{color:var(--tx3)}.mt{margin-top:14px}.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--g1);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.cmp{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--cmpbg)}.cmp img{display:block;width:100%}
.cmp .after{position:absolute;inset:0;overflow:hidden}.cmp .after img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.cmp .handle{position:absolute;top:0;bottom:0;width:2px;background:var(--g1);cursor:ew-resize;z-index:4}.cmp .handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--g2);box-shadow:0 0 0 3px var(--glow)}
/* B8 — panel sędziego: wiersz kryterium (etykieta + 3 kropki 0–2 + 👍/👎), reużywa .pill/.note/.seg/.muted */
.verdict{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.crit{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-top:9px}
/* E5.1/E5.4 — odstępy pionowe w prawym railu Studia (klient: „wszędzie większe odstępy w pionie") + kanwa „sticky".
   Sednem jest odstęp MIĘDZY sekcjami railu: :not(:empty) pomija puste boxy (#planbox/#genbox/#verdictbox/#decbox/#versbox
   bywają puste), a >:first-child zeruje górny margines pierwszego elementu sekcji, żeby nie dublować odstępu sekcji. */
#col-act>div:not(:empty){margin-top:22px}
#col-act>#loop{margin-top:0}
#col-act>div>:first-child{margin-top:0}
#col-act .row{margin:13px 0}
#col-act .note,#col-act .field{margin-top:16px}
#col-act .ctl{margin-top:18px}
#col-act .verdict{margin-top:14px}
#col-act .crit{margin-top:12px}
#col-act .stbtns{margin-top:20px}
#decbox .stbtns{margin-top:18px}
#col-act .vers{margin-top:14px}
@media(min-width:901px){#col-prev{position:sticky;top:12px;align-self:start}}
/* E7-backlog#2 — cap wysokości kanwy w Studiu (desktop): wynik 3:2 nie może urosnąć ponad ekran, bo wtedy sticky
   #col-prev (kanwa + pasek wariantów) jest wyższy niż okno → pasek wariantów i panel decyzji „✓ Zaakceptuj"
   lądują poniżej zagięcia i klient ich nie widzi (zgłoszenie z 4-wariantu na 4K). Cap robimy przez MAX-WIDTH
   (a nie max-height): obraz nadal wypełnia element width:100% BEZ letterboxu, więc overlay bbox/pędzla pozostaje
   1:1 z obrazem (bbox.js zakłada brak letterboxu). Dla 3:2: szerokość = wys.×1,5, więc cap szerokości = cap wys. */
@media(min-width:901px){#col-prev .canvas{max-width:calc((100vh - 230px) * 1.5)}}
/* FEEDBACK 2026-07-29 — „zmieść w oknie": szerokość kanwy ograniczona ASPEKTEM obrazu (--ar z JS), więc
   wysokość ≤ okno także dla pionów 2:3 (stary cap wyżej zakładał poziome 3:2). img/compare dalej width:100%. */
#col-prev .canvas.fitwin{max-width:min(100%, calc((100vh - 190px) * var(--ar, 1.5)));margin-left:auto;margin-right:auto}
.canvas .fitbtn{transition:background .15s}.canvas .fitbtn:hover{background:rgba(8,9,9,.85)}
.crit-l{flex:1;color:var(--tx2)}
.crit-d{display:inline-flex;gap:4px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid var(--line2)}.dot.on{background:var(--g1);border-color:var(--g2);box-shadow:0 0 6px -1px var(--glow)}
.crit-tf{display:inline-flex;gap:3px}
.tf{background:transparent;border:1px solid var(--line2);border-radius:7px;padding:2px 6px;cursor:pointer;font-size:12px;line-height:1;opacity:.5;transition:.15s;font-family:inherit}.tf:hover{opacity:.9;background:var(--glass2)}
.tf.up{opacity:1;border-color:var(--g2);background:rgba(0,164,144,.16)}.tf.down{opacity:1;border-color:var(--red);background:rgba(226,101,92,.16)}
/* AUTO wyszarzony fail-safe: używamy data-blocked/aria-disabled (nie native [disabled]), więc dokładamy regułę greyingu (§5.4/§8) */
.seg button[data-blocked]{opacity:.45;cursor:not-allowed}
/* C2 — biblioteka mediów: zakładki reużywają .seg; szersza siatka, pasek postępu uploadu, zaznaczenie kafla */
.swgrid.lib{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));max-height:none}
.upitem{padding:7px 0;border-bottom:1px solid var(--line)}
.uprow{display:flex;gap:10px;font-size:11.5px;color:var(--tx2)}
.uprow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow .st{flex:0 0 auto}
.pbar{height:5px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:5px}
.pbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g2),var(--g1));transition:width .12s}
.pbar.ok>i{background:var(--g1)}
.pbar.err>i{width:100%!important;background:var(--red)}
.sw.sel{position:relative}
.sw.sel img,.sw.sel .ph0{border:2px solid var(--g2);box-shadow:0 0 0 3px var(--glow)}
.sw.sel::after{content:'✓';position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--g2);color:#04241f;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* przycisk usuwania na kafelku biblioteki (lewy-górny róg; ✓ zaznaczenia jest w prawym) */
.sw{position:relative}
.sw .del{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;line-height:20px;text-align:center;cursor:pointer;opacity:.5;transition:.15s;z-index:2}
.sw:hover .del{opacity:1}
.sw .del:hover{background:var(--red,#e5484d);transform:scale(1.1)}
.sw .tostudio{position:absolute;top:6px;left:32px;height:20px;padding:0 7px;border-radius:10px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;line-height:20px;cursor:pointer;opacity:.55;transition:.15s;z-index:2;white-space:nowrap}
.sw:hover .tostudio{opacity:1}
.sw .tostudio:hover{background:var(--g2);color:#04241f}
.sw .dl{position:absolute;bottom:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:20px;text-align:center;cursor:pointer;opacity:.5;transition:.15s;z-index:2}
.sw:hover .dl{opacity:1}
.sw .dl:hover{background:var(--g2);color:#04241f;transform:scale(1.1)}
/* P1a — matryca batcha zdjęcie×wzór */
.bmx-wrap{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--glass)}
.bmx{border-collapse:separate;border-spacing:7px}
.bmx .corner{position:sticky;left:0;top:0;z-index:4;background:var(--bg)}
.bmx thead th{position:sticky;top:0;z-index:3;background:var(--bg)}
.bmx tbody th{position:sticky;left:0;z-index:2;background:var(--bg)}
.bmx .axh>div{display:flex;flex-direction:column;align-items:center;gap:3px;width:76px}
.bmx .axh img,.bmx .axh .ph0{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.bmx .axh span{font-size:9px;color:var(--tx2);max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcell{width:64px;height:64px;border-radius:8px;border:1px solid var(--line);background:var(--glass);position:relative;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.15s}
.bcell:hover{border-color:var(--g2);transform:translateY(-1px)}
.bcell img{width:100%;height:100%;object-fit:cover;display:block}
.bcell .bcl{font-size:8.5px;color:var(--tx3);text-align:center;padding:2px;line-height:1.15}
.bcell .bdg{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#04241f}
.bcell .b-ok{background:var(--g2)}
.bcell .b-done{background:var(--amber)}
.bcell .b-rej{background:var(--tx3);color:var(--tx)}
.bcell .b-fail{background:var(--red);color:#fff}
.bcell.c-run{border-style:dashed;opacity:.7}
.bcell.c-fail{border-color:var(--red)}
.bcell.dim{opacity:.13;pointer-events:none}
/* P2 — bulk-select komórek do eksportu ZIP */
.bcell .chk{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line2);background:rgba(4,10,12,.55);z-index:3;cursor:pointer}
.bcell .chk:hover{border-color:var(--g2)}
.bcell.selcell{outline:2px solid var(--g2);outline-offset:-2px}
.bcell.selcell .chk{background:var(--g2);border-color:var(--g2)}
.bcell.selcell .chk::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#04241f}
.selbar{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 11px;border:1px solid var(--line2);border-radius:10px;background:var(--glass)}
/* Faza A — pełnostronicowy kreator „Nowy batch" (#v-new 1:1 z mockupem) */
.pickgrid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.pick{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:#000;padding:0;width:150px;transition:.16s}
.pick.sm{width:96px}
.pick img{width:100%;display:block;height:104px;object-fit:cover}
.pick.sm img,.pick.sm .ph0{height:96px}
.pick .ph0{display:block;width:100%;height:104px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 6px,transparent 6px,transparent 12px)}
.pick:hover{transform:translateY(-2px)}
.pick.on{border:2px solid var(--g2);box-shadow:0 0 0 3px var(--glow)}
.pick .cb{position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:5px;border:2px solid #fff8;background:rgba(0,0,0,.4)}
.pick.on .cb{background:var(--g2);border-color:var(--g2)}
.pick.on .cb::after{content:'✓';position:absolute;inset:-2px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#04241f}
.pick em{position:absolute;bottom:0;left:0;right:0;font-style:normal;font-size:10.5px;background:rgba(0,0,0,.6);color:var(--tx2);padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .test{position:absolute;top:6px;right:6px;font-size:10px;background:rgba(8,9,9,.72);border:1px solid var(--line2);color:var(--tx);border-radius:999px;padding:2px 8px;cursor:pointer;opacity:0;transition:.16s;z-index:2}
.pick:hover .test{opacity:1}.pick .test:hover{background:var(--g2);color:#04241f;border-color:var(--g2)}
.pickgrid .up{width:150px;height:104px;min-height:0}
.pickgrid .up.sm{width:96px;height:96px;font-size:12px}
.lnk{color:var(--g1);cursor:pointer;font-weight:400}.lnk:hover{text-decoration:underline}
.info{font-size:11px;color:var(--tx3);border:1px solid var(--line);border-radius:8px;padding:3px 9px}
.row2{display:flex;gap:22px;flex-wrap:wrap;margin:4px 0;font-size:13px;color:var(--tx2);align-items:center}
.sum{display:flex;align-items:center;gap:18px;margin-top:14px;padding:16px 18px;border:1px solid var(--line2);background:rgba(13,28,25,.92);border-radius:var(--r);flex-wrap:wrap;position:sticky;bottom:12px;backdrop-filter:blur(14px);z-index:5;box-shadow:0 10px 30px -16px #000}
.sum .big{font-size:15px;font-weight:600}.sum small{color:var(--tx2);font-size:12px;display:block;margin-top:2px}
.top .grn.topnew{padding:8px 14px}
/* Faza B — chrome batcha: pasek statusu (B1/B2) + sekcja info w modalu Ustawień (B3) */
.status{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.status .pbar{flex:1;min-width:160px;height:8px;margin-top:0;background:rgba(255,255,255,.1)}
.status .pbar>i{background:linear-gradient(90deg,var(--gd),var(--g1));transition:width .4s}
.schip{font-size:12px;color:var(--tx2)}.schip b{color:var(--tx);font-weight:600}.schip .live{color:var(--g1)}
.sh-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fld{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.fld .lab b{font-size:13px;font-weight:500}.fld .lab small{display:block;color:var(--tx3);font-size:10.5px}.fld>div:last-child{color:var(--tx2)}
/* C-UI — Studio 1:1 z mockupem: nagłówek widoku (span obu kolumn), separacja inputów od sterowania w railu,
   link po prawej w .ph-h, „← matryca" na kanwie, pasek wariantów .vstrip/.vth pod kanwą */
.stwrap>.sthead{grid-column:1/-1;margin-bottom:2px}
.stact{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ph-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stback{position:absolute;top:12px;left:12px;z-index:6}
.vstrip{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}
.vth{width:clamp(64px,7vw,86px);border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;cursor:pointer;padding:0;transition:.18s;position:relative;flex:0 0 auto}
.vth img{width:100%;display:block}.vth:hover{transform:translateY(-2px)}
.vth.sel{border:2px solid var(--g2);box-shadow:0 0 0 3px var(--glow)}
.vth em{position:absolute;bottom:0;left:0;right:0;font-style:normal;font-size:9px;background:rgba(0,0,0,.62);color:var(--tx2);text-align:center;padding:1px 0}

/* E7 — nawigator zestawu N×M w railu Studia (stół testowy). Kafel = zdjęcie (tło) + packshot wzoru (wstawka)
   + kropka statusu: do zrobienia (szara) / wygenerowane (--amber) / ✓ zapisane (--g2). Siatka auto-fit dopasowuje
   się do wąskiego #col-in i przewija się przy większych zestawach. Reużywa tokeny --glass/--line/--g2/--amber. */
.cmbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px;max-height:42vh;overflow:auto;margin-top:8px}
.cmb{position:relative;aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--glass);overflow:hidden;cursor:pointer;transition:.15s;padding:0}
.cmb:hover{border-color:var(--g2);transform:translateY(-1px)}
.cmb.static{cursor:default}.cmb.static:hover{transform:none;border-color:var(--line)}   /* nagłówek pojedynczej pary — niein­teraktywny */
.cmb-a{width:100%;height:100%;object-fit:cover;display:block}
.cmb-p{position:absolute;left:3px;bottom:3px;width:42%;height:42%;object-fit:cover;border-radius:5px;border:1px solid var(--line2);background:#000}
.cmb.sel{outline:2px solid var(--g2);outline-offset:-2px}
.cmb .st{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;border:1px solid var(--bg);background:var(--line2)}
.cmb.s-gen .st{background:var(--amber)}
.cmb.s-acc .st{background:var(--g2)}
.cmb.s-acc .st::after{content:'✓';position:absolute;inset:-1px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#04241f}

/* T1 (feedback klienta 2026-07-10) — rail Studia w KARTY-ETAPY (1·Generacja / 2·Ocena i decyzja / 3·Korekta
   accordion) + sticky STOPKA PROCESU (CTA „→ Uruchom batch (N/K · ~$X)") + pasek postępu akceptacji zestawu. */
.stage{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;background:rgba(255,255,255,.02)}
.stage:first-child{margin-top:0}
.stage .ph-h:first-child,.stage .seg#loop{margin-top:0}
.stage-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--tx2);margin-bottom:10px}
.stnum{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--glass2);border:1px solid var(--line2);color:var(--g1);font-size:11px;font-weight:700;flex:0 0 auto}
#stage-corr details>summary,#stage-gen details>summary{cursor:pointer;list-style:none;margin-bottom:0;user-select:none}
#stage-corr details>summary::-webkit-details-marker,#stage-gen details>summary::-webkit-details-marker{display:none}
#stage-corr details>summary::after,#stage-gen details>summary::after{content:'▸';margin-left:auto;color:var(--tx3);transition:transform .15s}
#stage-corr details[open]>summary::after,#stage-gen details[open]>summary::after{transform:rotate(90deg)}
#stage-corr details[open]>summary,#stage-gen details[open]>summary{margin-bottom:10px}
#railfoot{position:sticky;bottom:0;z-index:8;margin:14px -16px -16px;padding:12px 16px;background:linear-gradient(180deg,transparent,var(--bg) 32%);backdrop-filter:blur(6px)}
#railfoot:empty{display:none;margin:0;padding:0}
#railfoot .btn{width:100%;box-shadow:0 -6px 18px -8px #000}
.setprog{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--tx2);margin:2px 0 4px}
.setprog .pbar{margin-top:0}
/* T3.2 — kreator: lista par (kontrakt reużycia + wyjątki jakości per para) */
.prlist{margin-top:4px}
.prow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12px}
.prow:first-of-type{border-top:0}
.pr-a{width:34px;height:34px;object-fit:cover;border-radius:7px;border:1px solid var(--line2);flex:0 0 auto}
.pr-nm{min-width:110px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.pr-nm small{display:block;color:var(--tx3);font-size:10px}
.pr-st{flex:1;min-width:0;line-height:1.45}
.pr-res{flex:0 0 auto;font-size:10.5px}
.pr-res button{padding:5px 9px}
/* KONTRAKT OBSZARU (2026-07-30) — chipsy inwentarza tekstyliów w Studiu (Podmieniam/Chronię) */
.txchip{display:inline-block;margin:2px 3px 2px 0;padding:3px 9px;border-radius:999px;font-size:10.5px;font-family:inherit;cursor:pointer;border:1px solid var(--line2);background:var(--glass);color:var(--tx2);transition:background .12s,color .12s}
.txchip.rep{border-color:rgba(22,199,173,.45);color:var(--g1);background:rgba(0,164,144,.10)}
.txchip.pro{border-color:var(--line2)}
.txchip:hover:not([disabled]){background:var(--glass2);color:var(--tx)}
.txchip[disabled]{cursor:default;opacity:.8}