/* ═══════════════════════════════════════════════════════════════════════
   HVMBAK DRAPE — warstwa wizualna.

   Design system przeniesiony żywcem z HVMBAK EFFECTS: te same czcionki
   (Archivo Narrow + DM Sans), kliny „Cięcie" na przyciskach i czarna scena
   z fakturą płótna. Pasek i panel sterowania siedzą na „srebrnym" szarym
   z apki wideo (przepis 1:1: #8F8F8F + światło „Sztaba" + skaczące ziarno)
   i zlewają się w jedną taflę — bez linii między pasekiem a kolumną.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --blue: #A8C5DA;
  --blue-deep: #94B5CC;
  --black: #0D0D0D;
  --panel: #1A1A1A;
  --panel-lift: #242424;
  --paper: #F5F0EB;
  --paper-dim: rgba(245, 240, 235, 0.6);
  --line-dark: rgba(245, 240, 235, 0.09);
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27n%27%20filterUnits%3D%27userSpaceOnUse%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27140%27%20height%3D%27140%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.62%27%20numOctaves%3D%273%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.35%27%20intercept%3D%27-0.175%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.35%27%20intercept%3D%27-0.175%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.35%27%20intercept%3D%27-0.175%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url(%23n)%27%2F%3E%3C%2Fsvg%3E");
  --grain-size: 120px;
  --sheet: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%20%3Cfilter%20id%3D%27j%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27160%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.012%200.9%27%20numOctaves%3D%272%27%20seed%3D%277%27%20result%3D%27n%27%2F%3E%20%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20in2%3D%27n%27%20scale%3D%273.2%27%2F%3E%20%3CfeGaussianBlur%20stdDeviation%3D%270.45%27%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%27url%28%23j%29%27%20stroke%3D%27%23F5F0EB%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%20%3Cpath%20d%3D%27M0%20150%20H300%27%2F%3E%3Cpath%20d%3D%27M150%200%20V300%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");

  /* Srebro paneli — przepis z HVMBAK EFFECTS VIDEO (decyzja Kuby
     06.08.2026): neutralny szary, tusz zamiast papieru na napisach,
     stal jako akcent liczb i aktywnych stanów. */
  --silver: #8F8F8F;
  --silver-lift: #9C9C9C;
  --m-ink: #141414;
  --m-ink-soft: rgba(13, 13, 13, 0.66);
  --m-ink-dim: rgba(13, 13, 13, 0.5);
  --m-line: rgba(13, 13, 13, 0.24);
  --steel: #3E6683;
  --grain-anim: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.68%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");

  --bar-h: 60px;
  --col: 340px;

  /* Geometria klina „Cięcie" — bez tych zmiennych clip-path jest nieważny
     i przyciski wychodzą płaskimi prostokątami. */
  --pinch: 9%;
  --lean: 7%;
  --bw: 1.5px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--panel);
  color: var(--paper);
  font-family: 'Archivo Narrow', system-ui, 'DM Sans', sans-serif;
  font-stretch: extra-condensed;
  -webkit-font-smoothing: antialiased;
  height: 100svh;
  overflow: hidden;
}

.label {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.label, .control-name {
  display: inline-block;
  transform: scaleY(1.09);
  transform-origin: center;
}

/* ═══════════════════════════════ POWŁOKA ════════════════════════════════ */

.workspace {
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--bar-h) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) var(--col);
  grid-template-areas:
    "bar   bar"
    "stage dock";
}
.workspace > * { animation: rise .6s var(--ease-out) backwards; }
.bar   { animation-delay: .02s; }
.stage { animation-delay: .08s; }
.dock  { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ── pasek ─────────────────────────────────────────────────────────────── */

.bar {
  grid-area: bar;
  background: var(--silver);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px 0 14px;
  gap: 16px;
  z-index: 20;
  position: relative;
  overflow: clip;
}
.bar > * { position: relative; z-index: 1; }
.bar-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  padding: 6px 8px 6px 4px;
  border-radius: 8px;
  transition: background .3s var(--ease-out);
}
.bar-brand:hover { background: rgba(13, 13, 13, 0.08); }
.bar-logo { height: 30px; width: auto; display: block; user-select: none; -webkit-user-drag: none; }
/* Człon produktu: techniczny zapis w mono ze slashem — „/drape" czyta
   się jak ścieżka w rodzinie apek (…/video, /drape). Odręczna czcionka
   odpadła (decyzja Kuby 10.08: „nie siedzi"). To jest wzór na przedrostki
   rodziny. Dosunięty do linii pisma logo (flex-end + korekta optyczna). */
.bar-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(13, 13, 13, 0.8);
  align-self: flex-end;
  margin-bottom: 7px;
}
.bar-hint {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  white-space: nowrap;
}

/* ═══════════════════════════════ SCENA ══════════════════════════════════ */

.stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--sheet) repeat, var(--black);
  overflow: hidden;
}
#gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#gl.is-dragging { cursor: grabbing; }

/* Strefa upuszczania: obrys w klinowym języku, widoczny nad canvasem. */
.stage.is-drop::after {
  content: 'UPUŚĆ PLAKAT TUTAJ';
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--blue);
  background: rgba(13, 13, 13, 0.55);
  color: var(--blue);
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  pointer-events: none;
  z-index: 10;
}

/* Drobna podpowiedź pod kontrolkami. */
.hint {
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: rgba(13, 13, 13, 0.55);
}

/* ═══════════════════════════ PRAWA KOLUMNA ══════════════════════════════ */

.dock {
  grid-area: dock;
  min-height: 0;
  overflow: clip;
  background: var(--silver);
  color: var(--m-ink);
  position: relative;
}
.dock-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 20px 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 13, 13, 0.35) transparent;
  position: relative;
  z-index: 1;
}

/* Światło „Sztaba" (przepis 1:1 z apki wideo): dwie ukośne belki jak
   światło z okna — szeroka dryfuje ku lewemu górnemu rogowi, mniejsza
   siedzi przy prawym. Pod treścią, pod ziarnem.
   WAŻNE: obie warstwy mają WYMIAR EKRANU i są zakotwiczone do rogu
   viewportu (pasek: lewy górny; panel: prawy górny minus wysokość paska)
   — gradient liczony per-element dawał na 60-pikselowym pasku inny odcień
   niż na kolumnie i szew kłuł w oczy. Teraz to jedno pole światła,
   przycięte przez overflow obu elementów. */
.bar::before, .dock::before {
  content: '';
  position: absolute;
  width: 140vw;
  height: 140svh;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(64deg,
      transparent 34%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.30) 47%,
      rgba(255,255,255,.10) 52%, transparent 60%),
    linear-gradient(52deg,
      transparent 70%, rgba(255,255,255,.07) 78%, rgba(255,255,255,.17) 82%,
      rgba(255,255,255,.07) 86%, transparent 93%);
  filter: blur(24px);
  animation: sztabaDryf 38s ease-in-out infinite alternate;
}
.bar::before { left: -20vw; top: -20svh; }
.dock::before { right: -20vw; top: calc(-20svh - var(--bar-h)); }
@keyframes sztabaDryf {
  0%   { transform: translate3d(9%, 7%, 0); }
  100% { transform: translate3d(-9%, -7%, 0); }
}

/* Ziarno: warstwa ponad treścią, przezroczysta dla wskaźnika. Skoki co
   klatkę zamiast płynnego ruchu — tak pracuje ziarno filmowe. */
.bar::after, .dock::after {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: 7;
  pointer-events: none;
  background: var(--grain-anim) repeat, var(--grain-anim) repeat;
  background-size: 240px 240px, 460px 460px;
  opacity: 0.24;
  mix-blend-mode: overlay;
  will-change: transform;
  animation: ziarnoPracuje .45s steps(1) infinite;
}
@media (hover: none) {
  .bar::after, .dock::after {
    inset: -30%;
    mix-blend-mode: normal;
    opacity: 0.13;
    backface-visibility: hidden;
  }
}
@keyframes ziarnoPracuje {
  0%    { transform: translate3d(0, 0, 0); }
  12.5% { transform: translate3d(-8%, 5%, 0); }
  25%   { transform: translate3d(5%, -9%, 0); }
  37.5% { transform: translate3d(-4%, -6%, 0); }
  50%   { transform: translate3d(9%, 4%, 0); }
  62.5% { transform: translate3d(-9%, -2%, 0); }
  75%   { transform: translate3d(3%, 8%, 0); }
  87.5% { transform: translate3d(7%, -5%, 0); }
  100%  { transform: translate3d(0, 0, 0); }
}

.block { display: flex; flex-direction: column; gap: 12px; }
.block .label { color: var(--m-ink-dim); }
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.block + .block { padding-top: 20px; border-top: 1px solid var(--m-line); }

.row { display: flex; gap: 8px; }
.row .tp { flex: 1; }

.dock-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--m-line);
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 9px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(13, 13, 13, 0.45);
}

/* ═══════════ PRZYCISKI — system „Cięcie" (żywcem z EFFECTS) ═════════════ */

.tp {
  position: relative; isolation: isolate;
  border: 0; background: transparent;
  min-height: 36px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--paper); -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .3s var(--ease-out), color .25s;
}
.tp-label { display: inline-block; transform: scaleY(1.09); transform-origin: center; pointer-events: none; }
.tp-ico { width: 15px; height: 15px; flex: none; pointer-events: none; }
.tp:active { transform: translateY(1px); }
.tp:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.tp::before, .tp::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: var(--shape);
  transition: background .25s var(--ease-out);
}
.tp::after { clip-path: var(--shape-in, var(--shape)); }

.tp--single {
  --shape: polygon(0 var(--lean), 100% 0, 100% 100%, 0 calc(100% - var(--lean)));
  --shape-in: polygon(var(--bw) calc(var(--lean) + var(--bw)), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--lean) - var(--bw)));
}
.tp--single-r {
  --shape: polygon(0 0, 100% var(--lean), 100% calc(100% - var(--lean)), 0 100%);
  --shape-in: polygon(var(--bw) var(--bw), calc(100% - var(--bw)) calc(var(--lean) + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--lean) - var(--bw)), var(--bw) calc(100% - var(--bw)));
}
.tp--seg-l {
  --shape: polygon(0 0, 100% var(--pinch), 100% calc(100% - var(--pinch)), 0 100%);
  --shape-in: polygon(var(--bw) var(--bw), calc(100% - var(--bw)) calc(var(--pinch) + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--pinch) - var(--bw)), var(--bw) calc(100% - var(--bw)));
}
.tp--seg-m {
  --shape: polygon(0 var(--pinch), 100% var(--pinch), 100% calc(100% - var(--pinch)), 0 calc(100% - var(--pinch)));
  --shape-in: polygon(var(--bw) calc(var(--pinch) + var(--bw)), calc(100% - var(--bw)) calc(var(--pinch) + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--pinch) - var(--bw)), var(--bw) calc(100% - var(--pinch) - var(--bw)));
}
.tp--seg-r {
  --shape: polygon(0 var(--pinch), 100% 0, 100% 100%, 0 calc(100% - var(--pinch)));
  --shape-in: polygon(var(--bw) calc(var(--pinch) + var(--bw)), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--pinch) - var(--bw)));
}

/* Kliny na srebrze (przepis z apki wideo): obrys z tuszu, wypełnienie
   panelem; „solid" w kierunku „stary Windows" — delikatny rozbłysk od góry. */
.cut-ghost::before { background: rgba(13, 13, 13, 0.55); }
.cut-ghost::after { background: var(--silver); }
.stage .cut-ghost::after { background: var(--black); }
.cut-ghost { color: rgba(13, 13, 13, 0.85); }
.cut-ghost:hover::before { background: var(--m-ink); }
.cut-ghost:hover { color: var(--m-ink); }
.cut-solid::before { background: rgba(245, 240, 235, 0.45); }
.cut-solid::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 55%),
    var(--silver);
}
.cut-solid { color: var(--m-ink); }
.cut-solid:hover::before { background: rgba(245, 240, 235, 0.65); }
.cut-solid:hover::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 55%),
    var(--silver-lift);
}
.cut-solid:hover { color: var(--m-ink); }
.cut-seg::before, .cut-seg::after { background: transparent; }
.cut-seg { color: var(--m-ink-dim); }
.cut-seg:hover { color: var(--m-ink); }
.cut-seg.is-on::before, .cut-seg.is-on::after { background: var(--m-ink); }
.cut-seg.is-on { color: var(--paper); }

.tp--sm { min-height: 28px; padding: 0 12px; font-size: 9px; letter-spacing: 0.04em; }
.tp--wide { width: 100%; }
.tp:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* Muszka trójdzielna (mocowanie, jakość) — środkowy segment prostokątny,
   skrajne pochylają się jak w dwudzielnym switchu EFFECTS. */
.seg3 { position: relative; isolation: isolate; display: flex; gap: 2px; }
.seg3::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  clip-path: polygon(0 0, 50% var(--pinch), 100% 0, 100% 100%, 50% calc(100% - var(--pinch)), 0 100%);
  background: rgba(13, 13, 13, 0.10);
}
.seg3 .tp { flex: 1; min-height: 28px; padding: 0 8px; font-size: 9px; }

/* Muszka trybu bierze całą szerokość kolumny. */
.tp-switch { position: relative; isolation: isolate; display: inline-flex; gap: 2px; }
.tp-switch::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  clip-path: polygon(0 0, 50% var(--pinch), 100% 0, 100% 100%, 50% calc(100% - var(--pinch)), 0 100%);
  background: rgba(13, 13, 13, 0.10);
}
.tp-switch--pelny { display: flex; }
.tp-switch--pelny .tp { flex: 1; }

/* Rząd presetów materiału: małe kliny na zmianę, jak stos warstw. */
.preset-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.preset-row .tp { min-height: 30px; padding: 0 6px; font-size: 9px; }
.preset-row .tp:nth-child(odd)  { --shape: polygon(0 0, 100% var(--lean), 100% calc(100% - var(--lean)), 0 100%); --shape-in: polygon(var(--bw) var(--bw), calc(100% - var(--bw)) calc(var(--lean) + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--lean) - var(--bw)), var(--bw) calc(100% - var(--bw))); }
/* Aktywny preset = baby blue jak w EFFECTS, ale PODŚWIETLONY jak
   cut-solid (zachwyt Kuby 10.08 nad „Wyprostuj plakat"): biała
   obramóweczka + rozbłysk od góry na błękicie — koniec z płaskim kaflem. */
.preset-row .tp.is-on { color: var(--m-ink); }
.preset-row .tp.is-on::before { background: rgba(245, 240, 235, 0.8); }
.preset-row .tp.is-on::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    var(--blue);
}

/* ── suwaki (kliny, jak w EFFECTS) ─────────────────────────────────────── */

.controls { display: flex; flex-direction: column; gap: 15px; }
.control { display: flex; flex-direction: column; gap: 7px; }
.control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.025em;
}
.control-name { color: var(--m-ink-soft); font-weight: 600; }
.control-value { color: var(--steel); font-variant-numeric: tabular-nums; }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.slider::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgba(13, 13, 13, 0.3); }
.slider::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(13, 13, 13, 0.3); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px; height: 17px;
  margin-top: -7.5px;
  border: 0; border-radius: 0;
  background: var(--steel);
  clip-path: polygon(0 0, 100% 0, 73% 100%, 27% 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform .3s var(--ease-spring), background .25s;
}
.slider::-moz-range-thumb {
  width: 6px; height: 17px; border: 0; border-radius: 0;
  background: var(--steel);
  clip-path: polygon(0 0, 100% 0, 73% 100%, 27% 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
@media (hover: hover) {
  .slider:hover::-webkit-slider-thumb { transform: scaleY(1.12); background: var(--m-ink); }
  .slider:hover::-moz-range-thumb { background: var(--m-ink); }
}
.slider:active::-webkit-slider-thumb { background: var(--m-ink); transform: scaleY(1.2); }
.slider:active::-moz-range-thumb { background: var(--m-ink); }

/* Próbnik koloru: pasek w tym samym rytmie co suwaki. */
.control-color input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  border: 1px solid rgba(13, 13, 13, 0.4);
  border-radius: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.control-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.control-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }

/* ── komunikat ─────────────────────────────────────────────────────────── */

/* Toast w klinie „Cięcie" jak przyciski (dwuwarstwowy clip-path: ::before
   = obrys, ::after = czarne wypełnienie) — nie pastylka. Cienia nie ma,
   bo clip-path by go uciął; ramkę robi obrys. */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 24px);
  isolation: isolate;
  color: var(--paper);
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  padding: 13px 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-spring);
}
.toast { --tlean: 8px; } /* stały skos w px — procent ginie przy szerokim pasku */
.toast::before, .toast::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 var(--tlean), 100% 0, 100% 100%, 0 calc(100% - var(--tlean)));
}
.toast::before { background: rgba(245, 240, 235, 0.55); }
.toast::after {
  clip-path: polygon(var(--bw) calc(var(--tlean) + var(--bw)), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--tlean) - var(--bw)));
  background: var(--black);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error::before { background: var(--blue); }

/* ── nakładka awaryjna WebGL ───────────────────────────────────────────── */

.gl-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  background: rgba(13, 13, 13, 0.92);
}
.gl-overlay-msg {
  max-width: 360px;
  font-family: 'Archivo Narrow', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--paper);
}

/* ═══════════════════════════════ TELEFON ════════════════════════════════ */

@media (max-width: 720px) {
  body, .workspace { height: auto; overflow: visible; }
  .workspace {
    min-height: 100svh;
    grid-template-columns: 1fr;
    grid-template-rows: var(--bar-h) auto auto;
    grid-template-areas: "bar" "stage" "dock";
  }
  /* Pasek odjeżdża z przewijaniem (jak w apce wideo), a PODGLĄD jest
     przypięty u góry — suwaki w panelu przewijasz POD żywym plakatem
     i cały czas widzisz, co robisz (uwaga Kuby 10.08). */
  .bar { position: static; }
  .bar-hint { display: none; }
  .stage {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 52svh;
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.26);
  }
  .dock { overflow: clip; }
  .dock-scroll { height: auto; overflow: visible; padding: 18px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════ HUMBAK STUDIO — promo rodziny (dodane 18.08.2026) ═══════════
   Kafelek i belka to jedyne animowane elementy interfejsu: kolory zostają
   w rodzinie (błękit landingu), wyróżnia je ruch pikseli, nie kolor. */
.hub-btn { text-decoration: none; justify-self: end; }

.studio-tile {
  position: relative; z-index: 1;              /* nad światłem Sztaby na srebrze */
  display: block; overflow: hidden;
  border-radius: 10px; text-decoration: none;
  background: linear-gradient(160deg, #EFF9FF, #8CC7EE);
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.28);
}
.studio-px {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated;
}
.studio-tile-in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 15px 16px 14px;
  color: #0D0D0D;
}
.studio-tile-brand {
  font-family: 'Archivo Black', 'Archivo Narrow', sans-serif;
  font-size: 12.5px; letter-spacing: -0.01em;
}
.studio-tile-line {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; line-height: 1.5;
  color: rgba(13, 13, 13, 0.72);
}
.studio-tile-cta {
  margin-top: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.studio-tile:hover .studio-tile-cta { text-decoration: underline; }

.studio-belka { display: none; }

@media (max-width: 720px) {
  .hub-btn { display: none; }
  .studio-belka {
    position: relative; z-index: 1;
    overflow: hidden;
    display: flex; align-items: center;
    margin: 10px 12px 0;
    padding: 13px 14px;
    border-radius: 10px;
    text-decoration: none;
    background: linear-gradient(160deg, #EFF9FF, #8CC7EE);
  }
  .studio-belka-in {
    position: relative; z-index: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px; color: rgba(13, 13, 13, 0.8);
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  }
  .studio-belka-in strong {
    font-family: 'Archivo Black', 'Archivo Narrow', sans-serif;
    font-weight: 400; font-size: 11.5px; color: #0D0D0D;
  }
  .studio-belka-arrow { margin-left: 2px; }
}