/* magstick.pl — kreator (redesign 30.08.2026).
   WAŻNE: wszystkie selektory poniżej (ID i klasy) są odczytywane przez JS
   w index.html — zmieniamy tu WYŁĄCZNIE wartości wizualne (kolor/rozmiar/
   odstęp), nie wolno usuwać ani przemianowywać żadnego z nich. Mechanika
   kreatora (upload/uchwyty/suwaki/kadrowanie) zostaje nietknięta, zgodnie
   z BRIEF_DESIGN_MAGSTICK.md §4. */

.kreator-head{padding:1.5rem 0 .5rem;text-align:center}
.kreator-head h1{font-size:2.35rem}
.kreator-slogan{color:var(--ink-70);font-size:1.05rem;max-width:38rem;margin:.5rem auto 0}

.kr-soon-banner{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;background:var(--accent-wash);
  border:1px solid var(--rule);border-left:6px solid var(--accent);border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:1.5rem}
.kr-soon-banner .txt{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:220px}
.kr-soon-banner .txt strong{color:var(--accent-ink);font-size:1.05rem}
.kr-soon-banner .txt span{color:var(--accent-ink);font-size:.92rem}
.kr-soon-banner form{display:flex;gap:.5rem;align-items:center;margin:0}
.kr-soon-banner input[type=email]{max-width:14rem}
.kr-soon-banner button{white-space:nowrap;border:1.5px solid var(--accent);background:none;color:var(--accent-ink)}

.kreator-head,.kr-soon-banner{flex:none}
/* Siatka, nie flex+wrap: płótno + stały panel 400px. Flex wrap spychał
   aside pod płótno, gdy stage zabierał całą szerokość rzędu. */
.kr-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:1.75rem;
  align-items:start;margin-bottom:6.5rem}
.kr-stage{min-width:0;position:relative}
.kr-side{width:400px;min-width:400px;max-width:400px;
  background:var(--liner-3);border:1px solid var(--rule);
  border-radius:var(--r);padding:.85rem 1rem 1rem}

.kr-canvas{position:relative;background:var(--liner-2);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:20px 20px;background-position:center;
  border:1px solid var(--rule);border-radius:18px;min-height:600px;padding:48px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none}
/* Overlay "przetwarzamy grafikę" - tylko dla pierwszego importu pliku
   (requestPreviewMultipart), nie dla dociąganych podglądów przy
   przeciąganiu suwaków. [hidden] override z tego samego powodu co
   .kr-icon-btn/.kr-dims-row wyżej - display:flex w klasie by wygrał. */
.kr-loading[hidden]{display:none}
.kr-loading:not([hidden]){display:flex}
.kr-loading{position:absolute;inset:0;z-index:30;align-items:center;justify-content:center;
  background:rgba(243,239,231,.75)}
.kr-loading-card{background:var(--liner-3);border:1px solid var(--rule);border-radius:16px;
  padding:1.6rem 2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-family:var(--display);font-weight:700;color:var(--ink);box-shadow:0 10px 24px -12px rgba(20,22,27,.35)}
.kr-spinner{width:34px;height:34px;border-radius:50%;border:3.5px solid var(--rule);
  border-top-color:var(--accent);animation:kr-spin .8s linear infinite}
@keyframes kr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kr-spinner{animation-duration:2.4s}}

/* Wrapper dokładnie sprzężony rozmiarem z <img> (inline-block = shrink-to-fit) —
   uchwyty narożne i etykieta wymiaru wiszą na TYM elemencie, nie na całym
   .kr-canvas, więc realnie otaczają wgraną grafikę zamiast siedzieć w rogach
   całego, dużo większego płótna (błąd zgłoszony 30.08.2026 wieczorem: uchwyty
   istniały w DOM, ale wizualnie odklejone od obrazka). */
.kr-artwork{position:relative;display:inline-block;line-height:0;transform-origin:center center}
/* Rozmiar ustawiany wyłącznie w JS (applyArtworkBaseSize). Silnik zwraca
   PNG o prawie stałym budżecie pikseli niezależnie od cm — max-width/
   max-height na <img> walczyło z jawnym rozmiarem i było jedną z przyczyn
   skoku po puszczeniu uchwytu. */
.kr-canvas img{display:block;pointer-events:none;border-radius:10px;object-fit:contain}
/* Linia cięcia — przerywany prostokąt łączący 4 uchwyty narożne, wg
   makiety (inset:-10px, border-radius:18px, opacity:.75). Wcześniej
   istniały same uchwyty bez łączącej linii między nimi. */
.kr-cutline{position:absolute;inset:-10px;border:1.5px dashed var(--accent);
  border-radius:18px;opacity:.75;pointer-events:none}
.kr-cutline[hidden]{display:none}
/* Wizualnie 22px (jak w koncepcji), ale hitbox (klikalny obszar elementu,
   ten sam box na który JS wiesza pointerdown) 40px — zalecenie dostępności
   z sekcji "Handoff dla zespołu wdrożeniowego" pliku koncepcji. Środek
   40px-owego boksu pokrywa się ze środkiem starego 22px-owego, więc
   docelowa pozycja narożnika płótna się nie zmienia. */
.kr-handle{position:absolute;width:40px;height:40px;cursor:pointer;touch-action:none;background:none}
.kr-handle::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--accent);
  border:3px solid var(--liner-3);box-shadow:0 0 0 3px var(--rule),0 1px 4px rgba(0,0,0,.25)}
.kr-handle--tl{left:-20px;top:-20px;cursor:nwse-resize}
.kr-handle--tr{right:-20px;top:-20px;cursor:nesw-resize}
.kr-handle--bl{left:-20px;bottom:-20px;cursor:nesw-resize}
.kr-handle--br{right:-20px;bottom:-20px;cursor:nwse-resize}
.kr-size-label{position:absolute;left:50%;top:100%;margin-top:14px;transform:translateX(-50%);
  background:var(--liner-3);color:var(--ink);border:1px solid var(--rule);font-family:var(--mono);font-size:.85rem;
  padding:.35rem .7rem;border-radius:8px;pointer-events:none;white-space:nowrap}
/* 44px/border-radius:12px wg makiety (poprzednio 40px/10px). Oba
   przyciski razem w prawym górnym rogu płótna (gap 10px), nie
   rozdzielone lewo/prawo jak wcześniej. */
.kr-icon-btn{position:absolute;width:44px;height:44px;border-radius:12px;border:1px solid var(--rule);
  background:var(--liner-3);cursor:pointer;font-size:1.1rem;align-items:center;justify-content:center}
.kr-icon-btn[hidden]{display:none}
.kr-icon-btn:not([hidden]){display:flex}

.kr-toolbar[hidden]{display:none !important}
.kr-toolbar:not([hidden]){display:flex}
.kr-toolbar{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:25;
  flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border-radius:28px;
  background:var(--liner-3);border:1px solid var(--rule);
  box-shadow:0 10px 24px -12px rgba(20,22,27,.35)}
.kr-tool{position:relative;width:56px;height:56px;border:0;background:transparent;border-radius:16px;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transform:none}
.kr-tool svg{width:28px;height:28px;stroke-width:2}
.kr-tool:hover,.kr-tool:focus-visible,.kr-tool[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent-ink);transform:none}
.kr-tool-1to1{font-family:var(--mono);font-size:.95rem;font-weight:700;letter-spacing:.02em}
.kr-tool::after{content:attr(aria-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:#FFFDF8;font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:0;
  text-transform:none;white-space:nowrap;padding:.4rem .65rem;border-radius:8px;opacity:0;pointer-events:none;
  box-shadow:0 8px 18px -10px rgba(20,22,27,.5);z-index:40}
.kr-tool:hover::after,.kr-tool:focus-visible::after{opacity:1}
.kr-toolbar .kr-popup{left:calc(100% + 10px);top:0;right:auto}
.kr-popup--stack{grid-template-columns:1fr;min-width:13.5rem}
.kr-popup--stack button{flex-direction:row;justify-content:flex-start;text-align:left;font-size:.82rem;padding:.55rem .7rem}
.kr-bg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .7rem}
.kr-bg-tools button.secondary.is-on{background:var(--accent-wash);color:var(--accent-ink);border-color:var(--accent)}
.kr-bg-tol{display:flex;align-items:center;gap:.45rem;font-size:.88rem;margin:0}
.kr-bg-tol input{width:7rem;max-width:none}
.kr-bg-wrap{position:relative;background-image:linear-gradient(45deg,#e4ded2 25%,transparent 25%),linear-gradient(-45deg,#e4ded2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4ded2 75%),linear-gradient(-45deg,transparent 75%,#e4ded2 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;background-color:#fffdf8;
  border-radius:10px;overflow:auto;max-height:58vh;touch-action:none}
.kr-bg-wrap canvas{display:block;max-width:70vw;height:auto;cursor:crosshair}
.kr-bg-wrap canvas.is-erase{cursor:none}
.kr-bg-cursor{position:fixed;pointer-events:none;border:1px solid rgba(20,22,27,.48);
  box-shadow:0 0 0 1px rgba(255,253,248,.9);border-radius:50%;z-index:110;
  transform:translate(-50%,-50%);box-sizing:border-box}
.kr-menu{position:absolute;top:72px;right:24px;background:var(--liner-3);border:1px solid var(--rule);
  border-radius:10px;box-shadow:0 10px 24px -12px rgba(20,22,27,.35);z-index:20;min-width:11rem}
.kr-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);
  padding:.65rem .9rem;border-radius:0;font-weight:400;cursor:pointer;transform:none}
.kr-menu button:hover{background:var(--liner-2)}
.kr-popup{position:absolute;top:72px;right:24px;background:var(--liner-3);border:1px solid var(--rule);
  border-radius:10px;box-shadow:0 10px 24px -12px rgba(20,22,27,.35);z-index:20;padding:.5rem;
  grid-template-columns:1fr 1fr;gap:.4rem;min-width:14rem}
.kr-popup[hidden]{display:none}
.kr-popup:not([hidden]){display:grid}
.kr-popup button{background:var(--liner);border:1px solid var(--rule);border-radius:8px;
  padding:.6rem .5rem;font-size:.85rem;cursor:pointer;color:var(--ink);font-weight:500;transform:none;
  display:flex;flex-direction:column;align-items:center;gap:.3rem}
.kr-popup button.is-active,.kr-shapebtn.is-active{background:var(--accent-wash);color:var(--accent-ink);
  border-color:var(--accent);font-weight:600}
.kr-legend{font-size:.88rem;color:var(--ink-45);margin-top:.7rem;display:flex;align-items:center}
.kr-legend .swatch{display:inline-block;width:16px;height:0;border-top:1.5px dashed var(--accent);margin-right:.4rem}
.kr-hint{font-size:.9rem;color:var(--accent-ink);margin-top:.6rem;background:var(--accent-wash);
  border:1px solid var(--rule);border-radius:10px;padding:.6rem .8rem}
.kr-min-qty-box{margin:.35rem 0 .2rem;font-size:.88rem;color:var(--ink-70);line-height:1.4}
.kr-min-qty-box[hidden]{display:none !important}

.kr-fill-intent{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.15rem 0 .1rem}
.kr-fill-opt{position:relative;background:var(--liner-3);border:1.5px solid var(--rule);border-radius:12px;
  padding:.5rem .4rem;font-family:var(--mono);font-size:.82rem;line-height:1.25;color:var(--ink);cursor:pointer}
.kr-fill-opt.is-on{background:var(--accent-wash);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.kr-fill-opt:disabled{opacity:.45;cursor:not-allowed}

.kr-side label{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);margin:.65rem 0 .22rem}
.kr-side label:first-child{margin-top:0}
/* Dropdown "Produkt/Wariant" usunięty 30.08.2026 - wybór następuje przez
   kształt cięcia i przeciąganie/wpisanie rozmiaru, nie listę gotowych
   kombinacji. Nazwa materiału zostaje jako statyczny podpis. */
.kr-material-label{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:.9rem}
.kr-price-slogan{font-size:.9rem;color:var(--ink-70);line-height:1.4;margin:0 0 .75rem}
.kr-material-switch{display:none}
.kr-magnet-row[hidden]{display:none}
.kr-magnet-switch{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:0 0 .15rem}
.kr-mat-opt{position:relative;background:var(--liner-3);border:1.5px solid var(--rule);border-radius:12px;
  padding:.5rem .3rem;font-family:var(--mono);font-size:.72rem;line-height:1.2;color:var(--ink);cursor:pointer}
.kr-mat-opt.is-on{background:var(--accent-wash);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.kr-material-hint{display:none}

/* Chmurki w prawym panelu: element na body (position:fixed), nie ::after —
   ::after był przycinany przez overflow panelu i malował się pod kolejnymi
   przyciskami (z-index tylko w obrębie rodzica). */
.kr-side .kr-tip[data-tip]::after{content:none}
.kr-side-tip{position:fixed;z-index:500;box-sizing:border-box;max-width:min(22rem, calc(100vw - 24px));
  background:#14161B;color:#ffffff;-webkit-text-fill-color:#ffffff;opacity:1;isolation:isolate;
  mix-blend-mode:normal;font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:0;
  line-height:1.4;text-align:left;white-space:normal;padding:.55rem .75rem;border-radius:8px;
  pointer-events:none;box-shadow:0 10px 28px -8px rgba(20,22,27,.55)}
.kr-side-tip[hidden]{display:none !important}
#kr-width-out{font-family:var(--mono);color:var(--ink)}

/* Odczyt Wysokość/Szerokość pod polem szerokości (31.08.2026) - pola
   tylko do odczytu, ten sam styl ramki co generyczny input w base.css
   (border/radius/padding), żeby wizualnie pasowały do reszty panelu
   mimo że to <span>, nie <input>. */
/* [hidden] override: sam atrybut przegrywa z klasą display:grid poniżej
   (ta sama pułapka co .kr-icon-btn wcześniej dziś) - jawne reguły. */
.kr-dims-row[hidden]{display:none}
.kr-dims-row:not([hidden]){display:grid}
.kr-dims-row{grid-template-columns:1fr 1fr;gap:.45rem;margin:.4rem 0 0}
.kr-dim-field{border:1.5px solid var(--rule);border-radius:10px;padding:.55rem .65rem;
  display:flex;flex-direction:column;gap:.2rem;background:var(--liner-3)}
.kr-dim-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.kr-dim-value{font-family:var(--mono);font-size:1.05rem;color:var(--ink);font-weight:500}
.kr-dim-value--edit{display:flex;align-items:baseline;gap:.3rem}
.kr-dim-value--edit input{font-family:var(--mono);font-size:1.05rem;color:var(--ink);font-weight:500;
  border:0;background:none;padding:0;width:3.4rem;-moz-appearance:textfield}
.kr-dim-value--edit input::-webkit-outer-spin-button,.kr-dim-value--edit input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

.kr-shapegrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.4rem 0 .2rem}
.kr-shapebtn{background:var(--liner-3);border:1.5px solid var(--rule);border-radius:12px;
  padding:.7rem .5rem .6rem;font-size:.92rem;cursor:pointer;color:var(--ink);transform:none;
  display:flex;flex-direction:column;align-items:center;gap:.35rem}

.kr-side .kr-qty-label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--ink);margin:.55rem 0 .3rem}
.kr-side .kr-qty-stepper{border-color:var(--rule)}
.kr-side .kr-qty-stepper button{color:var(--ink)}
.kr-side .kr-qty-stepper button:hover{background:var(--liner-2)}
.kr-side .kr-qty-stepper input[type=number]{color:var(--ink)}
.kr-piece-price{font-family:var(--mono);font-size:.92rem;color:var(--ink-70);margin:.35rem 0 .3rem}
.kr-add-sheet{width:100%;margin:.1rem 0 .45rem;background:var(--accent);border-radius:999px}
.kr-add-sheet:disabled{opacity:.45;cursor:not-allowed}
.kr-tray{margin-top:.25rem;padding-top:.55rem;border-top:1px solid var(--rule);min-height:0}
.kr-tray-title{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:0 0 .55rem}
.kr-tray-empty{font-size:.88rem;color:var(--ink-45);margin:0}
.kr-tray-next{font-size:.88rem;color:var(--accent-ink);margin:.7rem 0 .45rem;line-height:1.4;
  background:var(--accent-wash);border:1px solid var(--rule);border-radius:10px;padding:.6rem .8rem}
.kr-next-art{width:100%;margin:0 0 .4rem;background:none;border:1.5px solid var(--accent);
  color:var(--accent-ink);border-radius:999px}
.kr-tray-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.kr-tray-list:empty + .kr-tray-empty, .kr-tray-empty[hidden]{display:none}
.kr-tray-row{display:grid;grid-template-columns:48px 1fr auto;gap:.55rem;align-items:center;
  border:1px solid var(--rule);border-radius:12px;padding:.45rem}
.kr-tray-row img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:var(--liner-2)}
.kr-tray-meta{min-width:0}
.kr-tray-name{font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kr-tray-mm{font-family:var(--mono);font-size:.75rem;color:var(--ink-45)}
.kr-tray-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.kr-tray-qty{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.kr-tray-qty button{background:none;border:0;color:var(--ink);padding:.15rem .45rem;cursor:pointer;transform:none;border-radius:0}
.kr-tray-qty span{font-family:var(--mono);font-size:.82rem;min-width:1.4rem;text-align:center}
.kr-tray-remove{background:none;border:0;color:var(--ink-45);font-size:.75rem;cursor:pointer;padding:0;transform:none}

.kr-shape-icon{display:block;width:34px;height:24px;border:1.5px dashed var(--ink-45);box-sizing:border-box}
.kr-shape-icon--contour{border-radius:14px 6px 18px 8px}
.kr-shape-icon--rectangle{border-radius:0}
.kr-shape-icon--rounded{border-radius:6px}
.kr-shape-icon--circle{width:24px;height:24px;border-radius:999px}
.kr-shapebtn.is-active .kr-shape-icon,
.kr-popup button.is-active .kr-shape-icon{border-color:var(--accent)}

input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--liner-2);padding:0;max-width:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:999px;
  background:var(--accent);border:3px solid var(--liner-3);box-shadow:0 0 0 1px var(--rule);cursor:pointer;margin-top:-8px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:999px;background:var(--accent);
  border:3px solid var(--liner-3);box-shadow:0 0 0 1px var(--rule);cursor:pointer}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--liner-2)}
#kr-margin-out{font-family:var(--mono);color:var(--ink)}
.kr-border-row{display:flex;align-items:center;gap:.7rem}
.kr-border-row input[type=range]{flex:1;min-width:0}
.kr-side .kr-border-color{display:flex;align-items:center;gap:.45rem;margin:0;flex:none;
  font-size:.72rem;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.kr-border-swatch{display:block;width:2.25rem;height:2.25rem;border-radius:999px;overflow:hidden;
  border:2px solid var(--ink);box-sizing:border-box;line-height:0;flex:none;
  background:repeating-conic-gradient(#c8c4bc 0 25%, #fff 0 50%) 0 0 / 8px 8px}
.kr-border-swatch input[type=color]{display:block;width:100%;height:100%;padding:0;border:0;
  -webkit-appearance:none;appearance:none;background:none;cursor:pointer}
.kr-border-swatch input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.kr-border-swatch input[type=color]::-webkit-color-swatch{border:none;border-radius:0}
.kr-border-swatch input[type=color]::-moz-color-swatch{border:none;border-radius:0}
.kr-border-color-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}

/* Pasek wyraźnie wyższy i czytelniejszy (31.08.2026, zgłoszenie
   Macieja: "Rozmiar/Kształt/Ilość" nieczytelne przy dotychczasowej
   wysokości) - podniesiony padding, większa miniatura (56->76px),
   wszystkie teksty o wyraźny krok w górę, nie kosmetyczny +1px. */
.kr-bottombar{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:#FFFDF8;
  border-top:1px solid #34373E;padding:1.3rem 1.8rem;display:flex;gap:1.6rem;align-items:center;
  flex-wrap:wrap;z-index:50;box-shadow:0 -8px 24px -12px rgba(0,0,0,.35)}
.kr-bottombar img{width:76px;height:76px;object-fit:contain;border-radius:13px;background:var(--liner-2);border:1px solid #34373E}
.kr-info-meta{display:flex;flex-direction:column;justify-content:center;gap:.12rem;min-width:0;line-height:1.25}
.kr-bottombar .muted{color:#C9C4BA;font-family:var(--mono);font-size:1.05rem}
.kr-bottombar .kr-spacer{flex:1}
.kr-bottombar .kr-qty-label{margin:0 2.2rem 0 0;color:#FFFDF8;font-weight:600;letter-spacing:.02em}
.kr-price-block{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;line-height:1.25}
.kr-price-unit{font-family:var(--mono);font-size:.92rem;color:#C9C4BA}
.kr-discount-badge{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--accent);
  background:rgba(255,255,255,.08);border-radius:999px;padding:.15rem .55rem;align-self:flex-end;margin:.15rem 0}
.kr-bottombar .kr-price{font-family:var(--mono);font-weight:500;font-size:1.65rem}
.kr-bottombar label{color:#C9C4BA;font-family:var(--mono);font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.kr-bottombar input[type=number]{background:transparent;border:1px solid #34373E;color:#FFFDF8;max-width:4.2rem}
.kr-bottombar button{background:var(--accent);border-radius:999px}
.kr-bottombar .kr-checkout-btn{background:transparent;border:1.5px solid #FFFDF8;color:#FFFDF8}

.kr-qty-stepper{display:inline-flex;align-items:center;border:1px solid #34373E;border-radius:999px;overflow:hidden}
.kr-qty-stepper button{background:none;border:0;color:#FFFDF8;padding:.55rem .95rem;font-family:var(--mono);
  font-size:1.2rem;cursor:pointer;transform:none;border-radius:0}
.kr-qty-stepper button:hover{background:rgba(255,255,255,.1)}
.kr-qty-stepper input[type=number]{background:none;border:0;color:#FFFDF8;width:2.8rem;max-width:2.8rem;
  text-align:center;padding:.55rem 0;font-family:var(--mono);font-size:1.15rem;-moz-appearance:textfield}
.kr-qty-stepper input[type=number]::-webkit-inner-spin-button,
.kr-qty-stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Krótkie podświetlenie po zaokrągleniu ilości do wielokrotności minimum
   z arkusza (30.08.2026) — klient ma widzieć, że wartość się dostosowała,
   nie cichą, niewytłumaczoną zmianę liczby. */
.kr-qty-stepper input[type=number].kr-qty-adjusted{background:var(--accent);color:var(--ink);border-radius:6px}

.kr-modal{position:fixed;inset:0;background:rgba(243,239,231,.88);align-items:center;justify-content:center;z-index:100}
.kr-modal[hidden]{display:none}
.kr-modal:not([hidden]){display:flex}
.kr-modal-box{background:var(--liner-3);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.4rem;max-width:90vw;box-shadow:0 20px 44px -20px rgba(20,22,27,.35)}
.kr-modal-box--text{max-width:min(28rem,90vw)}
.kr-crop-wrap{position:relative;display:inline-block;touch-action:none;user-select:none;border-radius:10px;overflow:hidden}
.kr-crop-wrap img{max-width:70vw;max-height:60vh;display:block}
.kr-crop-rect{position:absolute;border:2px dashed var(--signal);background:rgba(244,80,43,.12)}

/* Modal wyboru kształtu tuż po imporcie — dodatek zatwierdzony przez
   Macieja 31.08.2026 (wzorem prettygoodstickers.com), NIE zastępuje
   kafli w panelu bocznym, tylko wymusza świadomy wybór od razu po
   wgraniu pliku. Przesłania płótno (nie cały viewport jak kr-modal),
   tło półprzezroczyste w tonie papieru, nie czarne jak kr-modal. */
.kr-import-modal{position:absolute;inset:0;background:rgba(243,239,231,.92);
  display:flex;align-items:center;justify-content:center;z-index:40;border-radius:18px}
.kr-import-modal[hidden]{display:none}
.kr-import-modal-box{background:var(--liner-3);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.6rem;box-shadow:0 20px 44px -20px rgba(20,22,27,.35);max-width:90%}
.kr-import-modal-title{font-family:var(--display);font-weight:700;font-size:1.15rem;
  color:var(--ink);margin:0 0 1rem;text-align:center}
.kr-import-shapegrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.kr-import-shapebtn{padding:1.1rem .8rem;min-width:9rem}
.kr-import-shapebtn .kr-shape-icon{width:44px;height:32px}
.kr-import-shapebtn .kr-shape-icon--circle{width:32px;height:32px}

/* stan przed wgraniem pliku — duży dropzone wypełniający płótno */
.kr-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  width:100%;height:100%;padding:2.5rem 1.5rem;text-align:center;cursor:pointer}
.kr-dropzone-icon{color:var(--accent)}
.kr-dropzone-title{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ink);margin-top:.2rem}
.kr-dropzone-or{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.kr-dropzone-btn{background:var(--accent);cursor:pointer}
.kr-dropzone-caption{font-family:var(--mono);font-size:.78rem;color:var(--ink-45);margin-top:.2rem}
.kr-need-art{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;margin-top:1.1rem;
  max-width:22rem;padding:.85rem 1rem;background:var(--liner-3);border:1.5px solid var(--rule);
  border-radius:14px;text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;
  box-shadow:0 10px 24px -18px rgba(20,22,27,.45)}
.kr-need-art:hover{border-color:var(--accent);transform:none}
.kr-need-art-title{font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.25}
.kr-need-art-sub{color:var(--ink-70);font-size:.88rem;line-height:1.35;font-weight:400}
.kr-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kr-canvas.kr-dragover{border-color:var(--accent);background:var(--accent-wash)}

/* Pełnoekranowy, nieprzewijany kreator na desktopie/tablecie (30.08.2026,
   na wyraźne życzenie Macieja — wzorem prettygoodstickers.com i ducha
   "Magstick Koncepcja Finalna.dc.html": edytor ma zajmować całe okno, bez
   przewijania i bez stopki wjeżdżającej w widok narzędzia w trakcie
   pracy). Klucz włączający: body[data-line] — ten sam atrybut, który już
   różnicuje pełny/skrócony nagłówek w base.html, nie trzeba nic dodawać.
   Na mobile (<=760px) zostaje poprzednie, przewijalne zachowanie —
   upakowanie płótna i całego panelu bocznego bez przewijania na małym
   ekranie to osobna decyzja projektowa, nierozstrzygnięta tutaj. */
@media (min-width:761px){
  body[data-line]{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  body[data-line] .site-header{flex:none}
  body[data-line] .kreator-head{display:none}
  body[data-line] main{flex:1;min-height:0;width:100%;max-width:none;padding:0;
    display:flex;flex-direction:column;overflow:hidden}
  body[data-line] #kreator-form{flex:1;min-height:0;display:flex;flex-direction:column}
  .kr-wrap{flex:1;min-height:0;margin-bottom:0;align-items:stretch;padding-bottom:0;gap:0;
    grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr)}
  .kr-stage{display:flex;flex-direction:column;min-width:0;min-height:0;padding-bottom:6.5rem}
  .kr-canvas{flex:1;min-height:0;min-width:0;border-radius:0;border-left:none;border-top:none;border-bottom:none;padding:28px}
  .kr-side{overflow:hidden;align-self:stretch;border-radius:0;border-top:none;border-bottom:none;border-right:none;
    display:flex;flex-direction:column}
  .kr-side > :not(.kr-tray){flex:none}
  .kr-tray{flex:1;overflow-y:auto}
  .kr-bottombar{left:0;right:400px}
}

@media (max-width:760px){
  .kr-wrap{margin-bottom:8.5rem;grid-template-columns:1fr}
  .kr-side{min-width:0;width:auto;max-width:none}
  .kr-canvas{min-height:380px;padding:24px}
  .kr-toolbar{position:static;left:auto;top:auto;bottom:auto;transform:none;flex-direction:row;
    padding:8px 10px;width:100%;box-sizing:border-box;margin-top:8px;justify-content:center}
  .kr-toolbar .kr-popup{left:0;right:auto;top:auto;bottom:calc(100% + 8px)}
  .kr-tool::after{left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
  .kr-checkout-btn{display:none}
  .kr-bottombar{padding:.7rem 1rem;gap:.8rem}
  .kr-bottombar .muted{display:none}
}