/* Podgląd wydruku w kroku „Wgraj pliki” (js/podglad.js): papier, folia, arkusz, broszura, składanie.
   Ten sam zestaw reguł co w usłudze uploadu, scena w ciemnej wersji jak przy wizytówkach. */
.sim-tryby{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sim-tryb,.sim-btn{font:inherit;font-size:13px;border:1px solid #d9d3d7;background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;min-height:34px;cursor:pointer}
.sim-tryb[aria-pressed=true],.sim-seg .sim-btn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sim-tryb:hover,.sim-btn:hover{border-color:var(--pink)}
.sim-btn:disabled{opacity:.4;cursor:default}
.sim-tryb:focus-visible,.sim-btn:focus-visible,.sim-stage:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.sim-scena{border-radius:16px;background:radial-gradient(120% 90% at 50% 10%,#3a3438,#141214 75%);min-height:440px;display:grid;overflow:hidden;color:#cfc9cd}
.sim-scena .sim-ladowanie{color:#bdb6bb}
.sim-ladowanie{margin:auto;font-size:13px;color:var(--muted);padding:20px;text-align:center}
.sim-stage{position:relative;display:grid;place-items:center;padding:30px 14px;min-height:440px;touch-action:none;user-select:none;-webkit-user-select:none}
.sim-ster{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.sim-seg{display:flex;gap:4px}
.sim-licznik{font-size:13px;color:var(--muted);min-width:120px;text-align:center}
.sim-suwak{flex:1 1 160px;accent-color:var(--pink);min-width:120px}
.sim-check{font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer}
.sim-legenda{flex-basis:100%;margin:0;font-size:12px;color:var(--muted)}
.sim-legenda .lg{display:inline-block;width:14px;height:8px;margin:0 4px 0 10px;vertical-align:middle;border-radius:1px}
.sim-legenda .lg:first-child{margin-left:0}
.lg.spad{background:rgba(241,73,166,.25)}.lg.ciecie{border:1.5px solid #f149a6}.lg.bezpieczna{border:1.5px dashed #3a8bff}
.sim-uwagi{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.sim-uwaga{font-size:13px;line-height:1.45;padding:7px 10px 7px 28px;border-radius:8px;position:relative;background:#f6f5f6}
.sim-uwaga::before{position:absolute;left:10px;top:7px;font-weight:700}
.sim-uwaga.ok{background:#eef8f1}.sim-uwaga.ok::before{content:'✓';color:#17803d}
.sim-uwaga.warn{background:#fff6e5}.sim-uwaga.warn::before{content:'!';color:#a35c00}
.sim-uwaga.err{background:#fdecef}.sim-uwaga.err::before{content:'×';color:#b3123a}
.sim-uwaga.info::before{content:'i';color:#6b686d;font-style:italic}
.sim-info{margin:8px 0 0;font-size:12px;color:var(--muted)}

/* arkusz */
.sim-stage:has(.sim-sheet){perspective:1100px}
.sim-sheet{position:relative;box-shadow:0 1px 2px rgba(0,0,0,.3),0 30px 50px -18px rgba(0,0,0,.75);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.sim-stage:not(:hover) .sim-sheet{transform:rotateX(4deg) rotateY(-6deg)}
.sim-linie{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sim-linie .spad{fill:rgba(241,73,166,.22)}
.sim-linie .ciecie{fill:none;stroke:#f149a6;stroke-width:.35;vector-effect:non-scaling-stroke}
.sim-linie .bezpieczna{fill:none;stroke:#3a8bff;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}

/* powierzchnia: papier + farba + faktura + folia */
.sim-face{position:absolute;inset:0;overflow:hidden;background:var(--stock,#fbfaf8);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sim-ink{position:absolute;inset:0;overflow:hidden}
.sim-art{position:absolute;max-width:none;mix-blend-mode:multiply;pointer-events:none}
.sim-face[data-powl="0"] .sim-art{filter:saturate(.82) contrast(.9) brightness(1.02)}
.sim-grain,.sim-sheen{position:absolute;inset:0;pointer-events:none}
.sim-grain{opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.sim-face[data-powl="1"] .sim-grain{opacity:.07}
.sim-face[data-faktura=rough] .sim-grain{opacity:.6;background-size:180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .06' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2.2'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.sim-face[data-faktura=felt] .sim-grain{opacity:.45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .25' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.2'%3E%3CfeDistantLight azimuth='235' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.sim-face[data-faktura=linen] .sim-grain{opacity:.5;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px)}
.sim-face[data-faktura=flecks] .sim-grain{opacity:.9;background-image:radial-gradient(rgba(80,60,35,.45) .7px,transparent 1.1px),radial-gradient(rgba(255,255,255,.55) .7px,transparent 1.1px),radial-gradient(rgba(60,45,25,.3) .5px,transparent .9px);background-size:9px 11px,13px 7px,17px 19px;background-position:0 0,4px 3px,7px 9px}
.sim-face[data-faktura=pearl] .sim-sheen,.sim-face[data-faktura=metal] .sim-sheen{mix-blend-mode:soft-light;background:radial-gradient(70% 60% at var(--lx,35%) var(--ly,25%),rgba(255,255,255,.9),transparent 70%),linear-gradient(120deg,rgba(255,240,250,.35),rgba(210,225,255,.35) 50%,rgba(255,250,230,.35))}
.sim-face[data-faktura=metal] .sim-sheen{mix-blend-mode:overlay}
/* faktura ze zdjęcia próbki (assets/papiery/<id>.webp, szary kafel): zastępuje faktury z filtrów SVG; folia ją wygładza */
.sim-face[data-tekstura] .sim-grain{opacity:.22;mix-blend-mode:hard-light;background-image:var(--tekstura);background-size:220px;background-repeat:repeat}
.sim-face[data-tekstura=smooth] .sim-grain,.sim-face[data-tekstura=splendorgel] .sim-grain{opacity:.1;background-size:160px}
/* perłowe: drobne ziarno + świecące drobinki (assets/papiery/drobinki.webp z makrozdjęcia Polar Dawn), najjaśniejsze przy odblasku światła */
.sim-face[data-faktura=pearl] .sim-grain,.sim-face[data-faktura=metal] .sim-grain{opacity:.26;background-size:120px}
.sim-face[data-faktura=pearl] .sim-ink::after,.sim-face[data-faktura=metal] .sim-ink::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:1;
  background:url(/assets/papiery/drobinki.webp) 0 0/150px repeat;filter:brightness(1.6) contrast(1.4);
  -webkit-mask-image:radial-gradient(60% 55% at var(--lx,35%) var(--ly,25%),#000,rgba(0,0,0,.3) 65%,rgba(0,0,0,.12));mask-image:radial-gradient(60% 55% at var(--lx,35%) var(--ly,25%),#000,rgba(0,0,0,.3) 65%,rgba(0,0,0,.12))}
.sim-face[data-tekstura][data-folia]:not([data-folia=""]) .sim-grain{opacity:.1}
.sim-face[data-faktura=pearl][data-folia]:not([data-folia=""]) .sim-ink::after{opacity:.25}
/* Curious Metallics (render bez próbki, na podstawie zdjęć sklepów): biel, kolor tylko w odblasku światła */
.sim-face[data-tekstura=icegold] .sim-sheen{mix-blend-mode:multiply;background:radial-gradient(95% 85% at var(--lx,35%) var(--ly,25%),rgba(246,222,168,.5),rgba(244,228,190,.25) 50%,rgba(250,244,230,.08) 85%)}
.sim-face[data-tekstura=icegold] .sim-ink::after{filter:sepia(1) saturate(3) hue-rotate(-5deg) brightness(1.9)}
/* folie */
.sim-face[data-folia=gloss] .sim-art{filter:saturate(1.14) contrast(1.06)}
.sim-face[data-folia=gloss] .sim-sheen{mix-blend-mode:screen;background:radial-gradient(28% 34% at var(--lx,32%) var(--ly,22%),rgba(255,255,255,.75),rgba(255,255,255,.12) 55%,transparent 75%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 58%)}
.sim-face[data-folia=mat] .sim-art{filter:saturate(.95) contrast(.96)}
.sim-face[data-folia=mat] .sim-sheen{mix-blend-mode:screen;background:radial-gradient(70% 80% at var(--lx,32%) var(--ly,22%),rgba(255,255,255,.24),rgba(255,255,255,.05) 60%,transparent 85%)}
.sim-face[data-folia=soft] .sim-art{filter:saturate(.9) contrast(.96) brightness(.97)}
.sim-face[data-folia=soft] .sim-sheen{mix-blend-mode:soft-light;background:radial-gradient(90% 95% at var(--lx,32%) var(--ly,22%),rgba(255,255,255,.35),transparent 80%),linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04))}
.sim-face[data-folia=holo] .sim-sheen{mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(calc(var(--lxn,0) * 1deg + 115deg),#ff4fd8,#4ffcff 25%,#fff04f 50%,#7d4fff 75%,#ff4fd8);background-size:220% 220%;background-position:var(--lx,30%) var(--ly,30%)}
.sim-face[data-folia=sparkle] .sim-sheen{mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,255,255,.95) .6px,transparent 1.4px) 0 0/11px 13px,radial-gradient(circle,rgba(255,240,200,.9) .5px,transparent 1.2px) 5px 6px/17px 15px,radial-gradient(60% 60% at var(--lx,40%) var(--ly,30%),rgba(255,255,255,.3),transparent 70%)}
.sim-face[data-folia=frost] .sim-sheen{background:rgba(255,255,255,.22);mix-blend-mode:screen}
.sim-face[data-folia=brushed] .sim-sheen{mix-blend-mode:screen;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(90deg,transparent,rgba(255,255,255,.3) var(--lx,40%),transparent)}
.sim-face[data-folia]:not([data-folia=""]) .sim-grain{opacity:.05}

/* broszura */
.sim-book-stage{padding:30px 10px 34px}
.sim-book{position:relative;perspective:2200px;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.sim-book::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:50%;box-shadow:0 22px 34px -18px rgba(0,0,0,.45)}
.sim-book:not(.zamknieta)::after{content:'';position:absolute;left:0;top:0;bottom:0;width:100%;box-shadow:0 22px 34px -18px rgba(0,0,0,.45);z-index:-1}
.sim-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.35,.6,.2,1);cursor:pointer}
.sim-leaf .tyl{transform:rotateY(180deg)}
.sim-leaf .przod::after,.sim-leaf .tyl::after{content:'';position:absolute;inset:0;pointer-events:none}
.sim-leaf .przod::after{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 5%,transparent 12%)}
.sim-leaf .tyl::after{background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 5%,transparent 12%)}
.sim-pusta{background:#fbfaf8}
.sim-numer{position:absolute;bottom:4px;font-size:10px;color:rgba(0,0,0,.35);background:rgba(255,255,255,.7);padding:0 4px;border-radius:3px}
.przod .sim-numer{right:4px}.tyl .sim-numer{left:4px}

/* składanie */
.sim-fold-stage{cursor:grab;padding:30px 10px}
.sim-fold-stage:active{cursor:grabbing}
.sim-kamera{position:relative;width:100%;height:100%;min-height:360px;perspective:1600px}
.sim-model{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform-origin:0 50%;translate:0 -50%}
.sim-panel3d{position:absolute;top:0;transform-style:preserve-3d;transform-origin:0 50%}
.sim-panel3d>.sim-face.zew{transform:rotateY(180deg)}
.sim-panel3d>.sim-face.wew.cien-lewy::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 6%);pointer-events:none}
@media(prefers-reduced-motion:reduce){.sim-leaf,.sim-book,.sim-sheet{transition:none}}
@media(max-width:639px){.sim-scena,.sim-stage{min-height:300px}.sim-licznik{min-width:0;flex:1}}