/* QRcode Studio 2 — надбудова над studio.css.
   Тут лише те, чого немає в першій студії: панель «магії», варіанти
   компонування листка, перетягування з напрямними. Базове оформлення,
   кнопки й сітка беруться з studio.css без змін. */

/* ── Кнопка «Випадковий дизайн» ─────────────────────────────────────── */
.studio-btn.is-dice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 242, 0, 0.35) inset, 0 8px 22px rgba(46, 49, 146, 0.45);
}

.studio-btn.is-dice:hover {
  color: var(--yellow);
  filter: brightness(1.1);
}

.studio-btn.is-dice:active {
  transform: translateY(1px);
}

.studio-dice {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.studio-dice i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.studio-dice i:nth-child(1) { top: 2.5px; left: 2.5px; }
.studio-dice i:nth-child(2) { top: 2.5px; right: 2.5px; }
.studio-dice i:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.studio-dice i:nth-child(4) { bottom: 2.5px; left: 2.5px; }
.studio-dice i:nth-child(5) { bottom: 2.5px; right: 2.5px; }

.studio-btn.is-dice.is-rolling .studio-dice {
  animation: studio2-roll 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

@keyframes studio2-roll {
  0% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(180deg) scale(1.22); }
  100% { transform: rotate(360deg) scale(1); }
}

.studio-undo-pair {
  display: inline-flex;
  gap: 0;
}

.studio-btn.is-icon {
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1;
  min-width: 40px;
}

.studio-undo-pair .studio-btn.is-icon + .studio-btn.is-icon {
  border-left: 0;
}

.studio-btn.is-icon:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* ── Панель стану: випадковий дизайн + замки, свій дизайн + скановність ─ */
.studio-magic-bar {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.studio-magic-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}

.studio-stage-meta[hidden] {
  display: none !important;
}

.studio-stage-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
  flex: 1 1 auto;
}

.studio-stage-copy {
  min-width: 0;
  flex: 0 1 auto;
}

.studio-stage-copy .studio-lead {
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36ch;
}

.studio-stage-meta .studio-format {
  position: relative;
  z-index: 60;
  flex: 0 0 auto;
}

.studio-change-plate {
  margin: 0;
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-rail.is-collapsed {
  display: none;
}

@media (min-width: 1024px) {
  .studio-shell:not(.is-picking-plate) {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  }
}

.studio-shell.is-picking-plate .studio-controls {
  opacity: 0.45;
  pointer-events: none;
}

.studio-recipe,
.studio-scan {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6e6e6;
  white-space: nowrap;
}

.studio-recipe-dot {
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 242, 0, 0.7);
}

.studio-recipe.is-pulse {
  animation: studio2-pulse 0.5s ease 1;
}

@keyframes studio2-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); color: var(--yellow); }
}

.studio-locks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.studio-locks-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.studio-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfcfcf;
  cursor: pointer;
  user-select: none;
}

.studio-lock input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--yellow);
  cursor: pointer;
}

.studio-lock:hover {
  border-color: #fff;
  color: #fff;
}

.studio-lock:has(input:checked) {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(255, 242, 0, 0.08);
}

.studio-scan-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mute);
}

.studio-scan.is-ok .studio-scan-led { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.studio-scan.is-warn .studio-scan-led { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }
.studio-scan.is-bad .studio-scan-led { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.7); }
.studio-scan.is-warn { color: #fbbf24; }
.studio-scan.is-bad { color: #f87171; }

/* ── Перетягування ─────────────────────────────────────────────────── */
/* Дозволяємо виносити шари за білий листок — на чорний press-sheet,
   але лише в межах робочої області редактора. */
.plate.is-studio2 { overflow: visible; }
.plate.is-studio2.is-exporting { overflow: hidden; }

/* Акцент і декор тла — оформлення листка, а не обʼєкти. Вони лежать у власній
   обгортці з overflow:hidden, тож жодна форма (арка, коса смуга, заливка з
   негативним inset) не може вилізти за край листка. Сам листок лишається
   overflow:visible, щоб текст і QR можна було перетягувати на чорне тло. */
.plate.is-studio2 > .plate-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.studio-deco-grid .studio-deco-view .plate-deco {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.plate.is-studio2 .plate-layer {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

/* У Studio 2 картинка не має штучної межі 140px: вона може займати всю
   ширину або висоту листка — обмеження задає сам повзунок масштабу. */
.plate.is-studio2 .plate-emblem {
  max-width: 100%;
}

.plate.is-studio2.is-picking .plate-layer {
  pointer-events: none;
}

.plate.is-studio2 .plate-layer:hover {
  outline: 1px dashed rgba(46, 49, 146, 0.55);
  outline-offset: 5px;
}

.plate.is-studio2 .plate-layer.is-selected {
  outline: 1px solid rgba(46, 49, 146, 0.85);
  outline-offset: 5px;
}

.plate.is-studio2 .plate-layer.is-dragging {
  cursor: grabbing;
  outline: 1px solid var(--blue);
  outline-offset: 5px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.plate.is-studio2.is-dragging-any .plate-layer:not(.is-dragging) {
  opacity: 0.72;
}

.plate-guides {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.plate-guides i {
  position: absolute;
  display: none;
  background: #ff2e88;
}

.plate-guides i[data-guide="v"] {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
}

.plate-guides i[data-guide="h"] {
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-0.5px);
}

.plate.is-exporting .plate-guides,
.plate.is-exporting .studio-point-overlay { display: none !important; }
.plate.is-exporting .plate-layer { outline: none !important; }

/* ── Вирівнювання тексту ───────────────────────────────────────────── */
.plate.is-studio2.is-align-center .plate-copy { text-align: center; justify-items: center; }
.plate.is-studio2.is-align-right .plate-copy { text-align: right; justify-items: end; }
.plate.is-studio2.is-align-justify .plate-copy {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: auto;
  justify-items: stretch;
}
/* Ширина текстової колонки — з макета (--copy-w), типово 90% листка. */
.plate.is-studio2 .plate-copy,
.plate.is-studio2.is-free .plate-copy {
  width: var(--copy-w, 90%) !important;
  max-width: var(--copy-w, 90%) !important;
}
.plate.is-studio2 .plate-eyebrow,
.plate.is-studio2 .plate-name,
.plate.is-studio2 .plate-sub,
.plate.is-studio2 .plate-meta {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}
.plate.is-studio2 .plate-sub,
.plate.is-studio2 .plate-meta {
  max-width: none;
}
/* Кожен текстовий блок у студії — самостійний шар зі своїм кольором, тож
   має бути рівно того кольору, який обрано. Базова тема робить підписи
   напівпрозорими (.plate-sub, .plate-meta → opacity: .78), через що чорний
   виглядав тьмяним темно-сірим, а заголовок — насиченим чорним. */
.plate.is-studio2 .plate-layer.is-tb > .plate-sub,
.plate.is-studio2 .plate-layer.is-tb > .plate-meta {
  opacity: 1;
}
.plate.is-studio2.is-align-justify .plate-eyebrow,
.plate.is-studio2.is-align-justify .plate-name,
.plate.is-studio2.is-align-justify .plate-sub,
.plate.is-studio2.is-align-justify .plate-meta {
  width: 100%;
  max-width: none;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
.plate.is-studio2 .plate-qr-wrap {
  max-width: 62%;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* ── Типографічні настрої ──────────────────────────────────────────── */
.plate.is-type-poster .plate-name {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.plate.is-type-editorial .plate-name {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.plate.is-type-editorial .plate-eyebrow {
  letter-spacing: 0.32em;
  font-weight: 500;
}

.plate.is-type-editorial .plate-sub {
  font-size: calc(13px * var(--text-scale, 1) * var(--part-scale, 1));
  line-height: 1.45;
}

.plate.is-type-mono .plate-name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.plate.is-type-mono .plate-eyebrow {
  letter-spacing: 0.22em;
}

.plate.is-type-mono .plate-sub,
.plate.is-type-mono .plate-meta {
  letter-spacing: 0.02em;
}

.plate.is-type-soft .plate-name {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
}

.plate.is-type-soft .plate-eyebrow {
  text-transform: none;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.plate.is-type-soft .plate-sub {
  opacity: 0.9;
}

.plate.is-studio2 .plate-name {
  font-family: var(--display-font, "Syne", sans-serif);
}

.plate.is-studio2 .plate-eyebrow,
.plate.is-studio2 .plate-sub,
.plate.is-studio2 .plate-meta {
  font-family: var(--body-font, "Manrope", "IBM Plex Sans", sans-serif);
}

.plate.is-type-condensed .plate-name {
  text-transform: uppercase;
  letter-spacing: -0.05em;
  font-weight: 800;
  line-height: 0.92;
}

.plate.is-type-condensed .plate-eyebrow {
  letter-spacing: 0.28em;
}

.plate.is-type-display .plate-name {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.88;
  font-size: calc(30px * var(--text-scale, 1) * var(--part-scale, 1));
}

.plate.is-type-display .plate-eyebrow {
  letter-spacing: 0.42em;
  font-weight: 800;
}

.plate.is-type-serif .plate-name {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-style: normal;
}

.plate.is-type-serif .plate-eyebrow {
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: none;
  font-weight: 500;
}

.plate.is-type-serif .plate-sub,
.plate.is-type-serif .plate-meta {
  font-style: italic;
  line-height: 1.5;
}

.plate.is-type-italic .plate-name {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.plate.is-type-italic .plate-eyebrow {
  font-style: italic;
  letter-spacing: 0.2em;
}

.plate.is-type-italic .plate-sub {
  font-style: italic;
}

.plate.is-type-outline .plate-name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.15px var(--ink, #0a0a0a);
  paint-order: stroke fill;
}

.plate.is-type-outline .plate-eyebrow {
  letter-spacing: 0.36em;
}

.plate.is-type-news .plate-name {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: none;
}

.plate.is-type-news .plate-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.plate.is-type-news .plate-sub,
.plate.is-type-news .plate-meta {
  line-height: 1.55;
  font-size: calc(13px * var(--text-scale, 1) * var(--part-scale, 1));
}

.plate.is-type-banner .plate-name {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.1;
}

.plate.is-type-banner .plate-eyebrow {
  letter-spacing: 0.46em;
}

.plate.is-type-stacked .plate-copy {
  gap: calc(2px * var(--text-scale, 1) * var(--part-scale, 1));
}

.plate.is-type-stacked .plate-name {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.82;
  font-size: calc(28px * var(--text-scale, 1) * var(--part-scale, 1));
}

.plate.is-type-stacked .plate-eyebrow {
  letter-spacing: 0.08em;
  font-size: calc(9px * var(--text-scale, 1) * var(--part-scale, 1));
}

.plate.is-type-stacked .plate-sub {
  font-size: calc(11px * var(--text-scale, 1) * var(--part-scale, 1));
  letter-spacing: 0.04em;
}

.plate.is-type-chaos .plate-copy {
  text-align: initial;
  justify-items: stretch;
}

.plate.is-type-chaos .plate-eyebrow,
.plate.is-type-chaos .plate-name,
.plate.is-type-chaos .plate-sub,
.plate.is-type-chaos .plate-meta {
  display: flex;
  flex-direction: column;
  width: 100%;
  white-space: normal;
}

.plate.is-type-chaos .plate-eyebrow {
  transform: rotate(-1.4deg);
}

.plate.is-type-chaos .plate-name {
  transform: rotate(0.9deg);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plate.is-type-chaos .plate-sub {
  transform: rotate(-0.8deg);
}

.plate.is-type-chaos .plate-meta {
  transform: rotate(1.1deg);
}

.plate.is-type-chaos .plate-line {
  display: block;
  width: 100%;
}

.plate.is-type-chaos .plate-line.is-left { text-align: left; padding-right: 12%; }
.plate.is-type-chaos .plate-line.is-center { text-align: center; padding-left: 6%; padding-right: 6%; }
.plate.is-type-chaos .plate-line.is-right { text-align: right; padding-left: 12%; }

.plate.is-type-chaos .plate-eyebrow .plate-line:nth-child(3n + 1),
.plate.is-type-chaos .plate-name .plate-line:nth-child(3n + 2),
.plate.is-type-chaos .plate-sub .plate-line:nth-child(3n) {
  transform: translateX(4%);
}

.plate.is-type-chaos .plate-eyebrow .plate-line:nth-child(3n + 2),
.plate.is-type-chaos .plate-name .plate-line:nth-child(3n),
.plate.is-type-chaos .plate-sub .plate-line:nth-child(3n + 1) {
  transform: translateX(-3%);
}

.plate.is-studio2.is-bar-right .plate-bar {
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: 8px;
  height: auto;
}

.plate.is-studio2.is-bar-thick .plate-bar {
  height: 18px;
}

.plate.is-wash-vee .plate-wash {
  background: linear-gradient(180deg, var(--accent, #fff200) 0 18%, transparent 18% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 42%, 0 0);
  opacity: 0.28;
}

.plate.is-wash-mesh .plate-wash {
  background-image:
    linear-gradient(var(--accent, #fff200) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent, #fff200) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.18;
}

.plate.is-wash-sun .plate-wash {
  background: radial-gradient(circle at 12% 88%, var(--accent, #fff200) 0 18%, transparent 42%);
  opacity: 0.28;
}

.plate.is-wash-grid .plate-wash {
  background-image:
    repeating-linear-gradient(-12deg, transparent 0 10px, var(--accent, #fff200) 10px 11px);
  opacity: 0.16;
}

.plate.is-wash-wave .plate-wash {
  background: radial-gradient(ellipse 120% 40% at 50% 100%, var(--accent, #fff200) 0 70%, transparent 71%);
  opacity: 0.22;
}

.plate.is-wash-dual .plate-wash {
  background:
    radial-gradient(circle at 18% 18%, var(--accent, #fff200) 0 16%, transparent 16%),
    radial-gradient(circle at 88% 82%, var(--accent, #fff200) 0 18%, transparent 18%);
  opacity: 0.22;
}

.plate.is-studio2.is-card-stamp .plate-qr-wrap {
  background: #fff;
  border: 3px solid var(--ink, #0a0a0a);
  box-shadow: 4px 4px 0 var(--accent, #fff200);
}

.plate.is-studio2.is-card-round .plate-qr-wrap {
  background: #fff;
  border: 0;
  border-radius: 50%;
  padding: 0;
  width: var(--qr-size, 22%);
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.14);
}
.plate.is-studio2.is-card-round .plate-qr-wrap canvas {
  width: 70% !important;
  height: 70% !important;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.plate.is-studio2.is-card-inset .plate-qr-wrap {
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* ── Акцентна смуга ────────────────────────────────────────────────── */
.plate.is-studio2.is-bar-none .plate-bar { display: none; }

.plate.is-studio2.is-bar-bottom .plate-bar {
  top: auto;
  bottom: 0;
}

.plate.is-studio2.is-bar-left .plate-bar {
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 8px;
  height: auto;
}

.plate.is-studio2.is-bar-frame .plate-bar {
  inset: 5%;
  height: auto;
  background: transparent;
  border: 3px solid var(--accent, var(--yellow));
}

/* ── Декор тла ─────────────────────────────────────────────────────── */
.plate-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.plate.is-wash-none .plate-wash { display: none; }

.plate.is-wash-corner .plate-wash {
  background:
    linear-gradient(135deg, var(--accent, #fff200) 0 34%, transparent 34%);
  opacity: 0.22;
}

.plate.is-wash-split .plate-wash {
  background: linear-gradient(160deg, transparent 0 52%, var(--accent, #fff200) 52% 100%);
  opacity: 0.16;
}

.plate.is-wash-band .plate-wash {
  background: linear-gradient(
    180deg,
    transparent 0 38%,
    var(--accent, #fff200) 38% 62%,
    transparent 62% 100%
  );
  opacity: 0.14;
}

.plate.is-wash-ring .plate-wash {
  background: none;
  opacity: 1;
}
.plate.is-wash-ring .plate-wash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(58%, 340px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  border: 11px solid var(--accent, #fff200);
  opacity: 0.38;
}

.plate.is-wash-dots .plate-wash {
  background-image: radial-gradient(var(--accent, #fff200) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  opacity: 0.22;
}

.plate.is-wash-stripe .plate-wash {
  background: linear-gradient(90deg, var(--accent, #fff200) 0 22%, transparent 22% 100%);
  opacity: 0.18;
}

.plate.is-wash-arch .plate-wash {
  background: radial-gradient(
    ellipse 62% 46% at 50% 12%,
    var(--accent, #fff200) 0 100%,
    transparent 100%
  );
  opacity: 0.2;
}

/* ── Підложка QR ───────────────────────────────────────────────────── */
.plate.is-studio2.is-card-soft .plate-qr-wrap {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.plate.is-studio2.is-card-accent .plate-qr-wrap {
  background: var(--accent, #fff200);
  border-color: rgba(0, 0, 0, 0.18);
}

.plate.is-studio2.is-card-outline .plate-qr-wrap {
  background: transparent;
  border: 2px solid var(--ink, #0a0a0a);
  padding: 8px;
}

.plate.is-studio2.is-card-none .plate-qr-wrap {
  background: transparent;
  border: 0;
  padding: 0;
}

.plate.is-studio2.is-card-ticket .plate-qr-wrap {
  background: #fff;
  border: 2px dashed var(--ink, #0a0a0a);
  border-radius: 4px;
}

.plate.is-studio2.is-card-glass .plate-qr-wrap {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 10px;
}

.plate.is-studio2.is-card-halo .plate-qr-wrap {
  background: #fff;
  border: 0;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 0 0 7px var(--accent, #fff200), 0 16px 32px rgba(0, 0, 0, 0.16);
}

.plate.is-studio2.is-card-lift .plate-qr-wrap {
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.plate.is-studio2.is-card-pill .plate-qr-wrap {
  background: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.plate.is-wash-glow .plate-wash {
  background: radial-gradient(circle at 70% 28%, var(--accent, #fff200) 0 18%, transparent 52%);
  opacity: 0.32;
  filter: blur(0);
}

.plate.is-wash-slash .plate-wash {
  background: linear-gradient(118deg, transparent 0 58%, var(--accent, #fff200) 58% 64%, transparent 64% 100%);
  opacity: 0.28;
}

.plate.is-wash-horizon .plate-wash {
  background: linear-gradient(180deg, transparent 0 62%, var(--accent, #fff200) 100%);
  opacity: 0.22;
}

.plate.is-wash-orbit .plate-wash {
  background: none;
  opacity: 1;
}
.plate.is-wash-orbit .plate-wash::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 12%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  border: 9px solid var(--accent, #fff200);
  opacity: 0.3;
}

.plate.is-wash-panel .plate-wash {
  background: linear-gradient(90deg, var(--accent, #fff200) 0 32%, transparent 32% 100%);
  opacity: 0.16;
}

/* ── Ще 40 декорів тла: чиста геометрія, без зайвих деталей ──────────
   Кожен малюнок — один-два примітиви (градієнт, conic, clip-path) на
   тому самому --accent, тож вони працюють і на світлому, і на темному
   папері. Піксельні кроки множимо на --zoom, щоб декор не «злипався»
   при зміні масштабу листка. */
.plate.is-wash-quarter .plate-wash {
  background: radial-gradient(circle at 100% 100%, var(--accent, #fff200) 0 40%, transparent 40.4%);
  opacity: 0.24;
}

.plate.is-wash-halfmoon .plate-wash {
  background: radial-gradient(ellipse 72% 72% at 50% 100%, var(--accent, #fff200) 0 100%, transparent 100.6%);
  opacity: 0.2;
}

.plate.is-wash-triw .plate-wash {
  background: var(--accent, #fff200);
  clip-path: polygon(0 100%, 0 52%, 48% 100%);
  opacity: 0.22;
}

.plate.is-wash-thirds .plate-wash {
  background: linear-gradient(90deg, transparent 0 32.6%, var(--accent, #fff200) 32.6% 33.4%, transparent 33.4% 100%);
  opacity: 0.3;
}

.plate.is-wash-bars3 .plate-wash {
  background: repeating-linear-gradient(90deg, var(--accent, #fff200) 0 4%, transparent 4% 16%);
  opacity: 0.15;
}

.plate.is-wash-rules3 .plate-wash {
  background: repeating-linear-gradient(
    180deg,
    var(--accent, #fff200) 0 calc(1.6px * var(--zoom, 1)),
    transparent calc(1.6px * var(--zoom, 1)) calc(13px * var(--zoom, 1))
  );
  background-size: 100% calc(46px * var(--zoom, 1));
  background-repeat: no-repeat;
  opacity: 0.32;
}

.plate.is-wash-framein .plate-wash {
  background: none;
  inset: 7%;
  border: calc(2px * var(--zoom, 1)) solid var(--accent, #fff200);
  opacity: 0.34;
}

.plate.is-wash-offset2 .plate-wash {
  background-image:
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)),
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200));
  background-size: 24% 24%;
  background-position: 14% 20%, 58% 56%;
  background-repeat: no-repeat;
  opacity: 0.14;
}

.plate.is-wash-iso .plate-wash {
  background-image:
    repeating-linear-gradient(60deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(16px * var(--zoom, 1))),
    repeating-linear-gradient(-60deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(16px * var(--zoom, 1)));
  opacity: 0.18;
}

.plate.is-wash-pinstripes .plate-wash {
  background: repeating-linear-gradient(90deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(8px * var(--zoom, 1)));
  opacity: 0.2;
}

.plate.is-wash-ruled .plate-wash {
  background: repeating-linear-gradient(180deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(15px * var(--zoom, 1)));
  opacity: 0.16;
}

.plate.is-wash-topo .plate-wash {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(13px * var(--zoom, 1)), var(--accent, #fff200) calc(13px * var(--zoom, 1)) calc(14px * var(--zoom, 1)));
  opacity: 0.22;
}

.plate.is-wash-targetoff .plate-wash {
  background: repeating-radial-gradient(circle at 84% 14%, transparent 0 calc(11px * var(--zoom, 1)), var(--accent, #fff200) calc(11px * var(--zoom, 1)) calc(12px * var(--zoom, 1)));
  opacity: 0.2;
}

.plate.is-wash-brickband .plate-wash {
  background-image: repeating-linear-gradient(90deg, var(--accent, #fff200) 0 12%, transparent 12% 24%);
  background-size: 100% 9%;
  background-position: 0 34%, 6% 62%;
  background-repeat: repeat;
  opacity: 0.16;
}

.plate.is-wash-stair .plate-wash {
  background: var(--accent, #fff200);
  clip-path: polygon(
    0 100%, 0 80%, 25% 80%, 25% 64%, 50% 64%,
    50% 48%, 75% 48%, 75% 32%, 100% 32%, 100% 100%
  );
  opacity: 0.18;
}

.plate.is-wash-chev .plate-wash {
  background-image:
    repeating-linear-gradient(135deg, var(--accent, #fff200) 0 calc(2px * var(--zoom, 1)), transparent calc(2px * var(--zoom, 1)) calc(14px * var(--zoom, 1))),
    repeating-linear-gradient(45deg, var(--accent, #fff200) 0 calc(2px * var(--zoom, 1)), transparent calc(2px * var(--zoom, 1)) calc(14px * var(--zoom, 1)));
  background-size: 100% 13%;
  background-position: 0 40%;
  background-repeat: no-repeat;
  opacity: 0.3;
}

.plate.is-wash-plus .plate-wash {
  background-image:
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)),
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200));
  background-size: 30% 5%, 5% 30%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.22;
}

.plate.is-wash-arcoff .plate-wash {
  background: radial-gradient(circle at 0% 0%, transparent 0 30%, var(--accent, #fff200) 30% 32.5%, transparent 32.9%);
  opacity: 0.28;
}

.plate.is-wash-wedge2 .plate-wash {
  background: linear-gradient(200deg, var(--accent, #fff200) 0 22%, transparent 22% 100%);
  opacity: 0.2;
}

.plate.is-wash-peak .plate-wash {
  background: var(--accent, #fff200);
  clip-path: polygon(0 100%, 50% 56%, 100% 100%);
  opacity: 0.2;
}

.plate.is-wash-cone .plate-wash {
  background: conic-gradient(from 200deg at 50% 50%, var(--accent, #fff200) 0 53.2deg, transparent 54.8deg 359.2deg, var(--accent, #fff200) 360deg);
  opacity: 0.18;
}

.plate.is-wash-trimesh .plate-wash {
  background-image:
    repeating-linear-gradient(60deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(20px * var(--zoom, 1))),
    repeating-linear-gradient(-60deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(20px * var(--zoom, 1))),
    repeating-linear-gradient(0deg, var(--accent, #fff200) 0 calc(1px * var(--zoom, 1)), transparent calc(1px * var(--zoom, 1)) calc(17px * var(--zoom, 1)));
  opacity: 0.15;
}

.plate.is-wash-bowl .plate-wash {
  background: radial-gradient(circle at 16% 100%, var(--accent, #fff200) 0 26%, transparent 26.4%);
  opacity: 0.26;
}

.plate.is-wash-column3 .plate-wash {
  background-image: linear-gradient(var(--accent, #fff200), var(--accent, #fff200));
  background-size: calc(2px * var(--zoom, 1)) 100%;
  background-position: 74% 0, 84% 0, 94% 0;
  background-repeat: no-repeat;
  opacity: 0.34;
}

.plate.is-wash-crosshair .plate-wash {
  background-image:
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)),
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200));
  background-size: 100% calc(1.5px * var(--zoom, 1)), calc(1.5px * var(--zoom, 1)) 100%;
  background-position: 0 50%, 50% 0;
  background-repeat: no-repeat;
  opacity: 0.3;
}

.plate.is-wash-blockq .plate-wash {
  background: none;
  inset: 14% 12% 46% 10%;
  border: calc(2px * var(--zoom, 1)) solid var(--accent, #fff200);
  opacity: 0.3;
}

.plate.is-wash-lcorner .plate-wash {
  background: none;
  inset: 8%;
  border-top: calc(2px * var(--zoom, 1)) solid var(--accent, #fff200);
  border-left: calc(2px * var(--zoom, 1)) solid var(--accent, #fff200);
  opacity: 0.34;
}

.plate.is-wash-rcorner .plate-wash {
  background: none;
  inset: 8%;
  border-bottom: calc(2px * var(--zoom, 1)) solid var(--accent, #fff200);
  border-right: calc(2px * var(--zoom, 1)) solid var(--accent, #fff200);
  opacity: 0.34;
}

.plate.is-wash-sash .plate-wash {
  background: linear-gradient(45deg, transparent 0 43%, var(--accent, #fff200) 43% 57%, transparent 57% 100%);
  opacity: 0.18;
}

.plate.is-wash-sparsedots .plate-wash {
  background-image: radial-gradient(circle, var(--accent, #fff200) 0 calc(3px * var(--zoom, 1)), transparent calc(3.6px * var(--zoom, 1)));
  background-size: 33.4% 33.4%;
  opacity: 0.24;
}

.plate.is-wash-band2 .plate-wash {
  background: linear-gradient(
    180deg,
    transparent 0 30%,
    var(--accent, #fff200) 30% 30.8%,
    transparent 30.8% 66%,
    var(--accent, #fff200) 66% 66.8%,
    transparent 66.8% 100%
  );
  opacity: 0.36;
}

.plate.is-wash-ellipseframe .plate-wash {
  background: radial-gradient(ellipse 74% 52% at 50% 50%, transparent 0 97%, var(--accent, #fff200) 97% 100%, transparent 100%);
  opacity: 0.3;
}

.plate.is-wash-ribbonx .plate-wash {
  background-image:
    linear-gradient(45deg, transparent 0 48.6%, var(--accent, #fff200) 48.6% 51.4%, transparent 51.4% 100%),
    linear-gradient(-45deg, transparent 0 48.6%, var(--accent, #fff200) 48.6% 51.4%, transparent 51.4% 100%);
  opacity: 0.22;
}

.plate.is-wash-fanbl .plate-wash {
  background: repeating-conic-gradient(from 0deg at 0% 100%, var(--accent, #fff200) 0 3.2deg, transparent 4.8deg 13deg);
  opacity: 0.16;
}

.plate.is-wash-wheelthin .plate-wash {
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--accent, #fff200) 0 1.7deg, transparent 3.3deg 15deg);
  opacity: 0.12;
}

.plate.is-wash-tickrule .plate-wash {
  background: repeating-linear-gradient(
    180deg,
    var(--accent, #fff200) 0 calc(1.5px * var(--zoom, 1)),
    transparent calc(1.5px * var(--zoom, 1)) calc(12px * var(--zoom, 1))
  );
  background-size: 9% 100%;
  background-repeat: no-repeat;
  opacity: 0.34;
}

.plate.is-wash-thirdrules .plate-wash {
  background-image: linear-gradient(var(--accent, #fff200), var(--accent, #fff200));
  background-size: calc(1.5px * var(--zoom, 1)) 100%;
  background-position: 33.3% 0, 66.6% 0;
  background-repeat: no-repeat;
  opacity: 0.32;
}

.plate.is-wash-slope .plate-wash {
  background: linear-gradient(155deg, transparent 0 58%, var(--accent, #fff200) 58% 100%);
  opacity: 0.18;
}

.plate.is-wash-cornerhatch .plate-wash {
  background: repeating-linear-gradient(135deg, var(--accent, #fff200) 0 calc(2px * var(--zoom, 1)), transparent calc(2px * var(--zoom, 1)) calc(18px * var(--zoom, 1)));
  background-size: 44% 44%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  opacity: 0.3;
}

.plate.is-wash-baseline .plate-wash {
  background: linear-gradient(
    180deg,
    transparent 0 83%,
    var(--accent, #fff200) 83% 83.5%,
    transparent 83.5% 90%,
    var(--accent, #fff200) 90% 90.5%,
    transparent 90.5% 100%
  );
  opacity: 0.4;
}

/* ── Мобільні та планшети ──────────────────────────────────────────── */
/* На вузькому екрані студія складається в одну колонку, і список з 22 шаблонів
   відсовував листок з «Випадковим дизайном» далеко вниз. Ставимо сцену першою,
   а вибір шаблону робимо горизонтальною смугою. */
@media (max-width: 1023px) {
  /* minmax(0, 1fr): інакше горизонтальна смуга шаблонів розтягує колонку
     сітки на всю свою довжину і зсуває сцену за екран. */
  .studio-shell { grid-template-columns: minmax(0, 1fr); }
  .studio-shell > * { min-width: 0; }
  .studio-stage { order: 1; }
  .studio-rail { order: 2; }
  .studio-controls { order: 3; }
}

@media (max-width: 760px) {
  .studio-plates {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .studio-plates > * {
    flex: 0 0 auto;
    min-width: 132px;
    scroll-snap-align: start;
  }
}

@media (max-width: 900px) {
  .studio-magic-bar {
    gap: 6px 10px;
    padding: 8px;
  }

  .studio-recipe,
  .studio-scan {
    white-space: normal;
    text-align: center;
  }

  .studio-locks {
    justify-content: center;
    width: 100%;
  }

  .studio-stage-actions {
    width: 100%;
  }

  .studio-btn.is-dice {
    flex: 1 1 100%;
    justify-content: center;
  }

}

/* ── Плаваюче вікно стилю QR ─────────────────────────────────────────── */
.studio-float {
  position: fixed;
  top: 88px;
  right: 28px;
  z-index: 1300;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.studio-float.hidden,
.studio-float[hidden] {
  display: none !important;
}

.studio-float-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: move;
  user-select: none;
}

.studio-float-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.studio-float-body {
  overflow: auto;
  padding: 10px 12px 14px;
  min-height: 0;
}

.studio-float .style-studio {
  margin-top: 0;
}

.studio-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 8, 18, 0.72);
}

.studio-modal.hidden,
.studio-modal[hidden] {
  display: none !important;
}

.studio-modal-card {
  position: relative;
  width: min(440px, 100%);
  background: #12141f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 36px 20px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.studio-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.studio-modal-card p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.studio-modal-actions {
  display: grid;
  gap: 8px;
}

body.studio-modal-open {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   STUDIO 3 — покращення: шари, контекстний тулбар, палітри
   Стилістика сайту: темне тло, жовтий #fff200 + синій #2e3192,
   гострі кути, тонкі бордери, моно-шрифт.
   ══════════════════════════════════════════════════════════════════ */

/* ── Панель шарів — вертикальний блок зліва ───────────────────────── */
.studio-press-body {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.studio-layers-panel {
  flex: 0 0 216px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(46, 49, 146, 0.22), transparent 45%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
}

.studio-layers-kicker {
  flex: 0 0 auto;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-layers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.studio-layer {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}

.studio-layer:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.studio-layer.is-on {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 242, 0, 0.35) inset, 0 0 14px rgba(255, 242, 0, 0.16);
}

.studio-layer.is-grabbed {
  border-color: var(--blue);
  background: rgba(46, 49, 146, 0.28);
  box-shadow: 0 0 0 1px rgba(46, 49, 146, 0.6) inset;
}

.studio-layer.is-dragging-row {
  opacity: 0.45;
}

.studio-layer.is-drop-above::before,
.studio-layer.is-drop-below::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--yellow);
}

.studio-layer.is-drop-above::before { top: -4px; }
.studio-layer.is-drop-below::after { bottom: -4px; }

.studio-layer-pick {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #d8d8d8;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 8px;
  cursor: grab;
  text-align: left;
}

.studio-layer-pick span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-layer.is-on .studio-layer-pick {
  color: #fff;
}

/* Іконка шару — та сама, що в розділі панелі (текст / QR / зображення). */
.studio-layer-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--yellow);
}

.studio-layer-ico svg {
  width: 14px;
  height: 14px;
  display: block;
}

.studio-layer-ico.is-img img {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 2px;
  mix-blend-mode: screen;
}

.studio-layer.is-on .studio-layer-ico {
  color: #fff;
}

/* Номер шару (1 — найнижчий, найбільший — найвищий) */
.studio-layer-num {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #9a9a9a;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.studio-layer.is-on .studio-layer-num {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.12);
  color: var(--yellow);
}

/* Замок на рядку, шар якого зафіксовано */
.studio-layer-lock {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  filter: grayscale(1) brightness(1.6);
}

/* Синя кнопка «Відпустити» поруч зі схопленим шаром */
.studio-layer-release {
  flex: 0 0 auto;
  align-self: stretch;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 8px;
  cursor: pointer;
}

.studio-layer-release:hover {
  background: #3d41c4;
  color: var(--yellow);
}

.studio-layer-tools {
  flex: 0 0 auto;
  display: inline-flex;
  border-left: 1px solid var(--line);
}

.studio-layer-btn {
  width: 24px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: #cfcfcf;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.studio-layer-btn:first-child {
  border-left: 0;
}

.studio-layer-btn:hover:not(:disabled) {
  background: var(--blue);
  color: var(--yellow);
}

.studio-layer-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Схоплений шар піднято над іншими на полотні */
.plate.is-studio2 .plate-layer.is-grabbed {
  outline: 1px solid var(--yellow);
  outline-offset: 5px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

/* Поки шар схоплено (вибір з панелі шарів), інші шари на листку не
   перебирають виділення на себе — тому й курсор у них звичайний. */
.plate.is-studio2.is-layer-locked .plate-layer:not(.is-grabbed) {
  cursor: default;
}

.plate.is-studio2.is-layer-locked .plate-layer:not(.is-grabbed):hover {
  outline-color: transparent;
}

/* ── Контекстний тулбар над виділеним шаром ───────────────────────── */
.plate-toolbar {
  position: absolute;
  z-index: 40;
  display: flex;
  align-items: center;
  /* Панель обіймає вміст щільно — без порожніх полів по боках. */
  width: max-content;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 7px;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  background: linear-gradient(180deg, #16171f, #0d0d12);
  border: 1px solid rgba(255, 242, 0, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6) inset;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: studio-toolbar-in 0.16s ease both;
  /* Панель можна перетягнути за будь-яке вільне місце. */
  cursor: grab;
  user-select: none;
}

/* ── Компактні мітки та повзунок усередині панелі ────────────────── */
.plate-toolbar .plate-scale {
  padding: 2px 6px;
  gap: 1px;
}

.plate-toolbar .plate-scale-label {
  font-size: 9px;
  letter-spacing: 0.1em;
}

.plate-toolbar .plate-scale-row {
  gap: 3px;
}

.plate-toolbar .plate-tool-range {
  width: 106px;
}

.plate-toolbar .plate-tool-btn {
  padding: 3px 6px;
}

/* Хрестик висить на кінчику правого верхнього кута — за межами панелі. */
.plate-toolbar-close {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 242, 0, 0.75);
  background: #0d0d12;
  color: #fff;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  transition: background 0.12s ease, border-color 0.12s ease;
}

/* Наведення на хрестик більше не червоне: він закриває панель, а не
   видаляє — тож колір спокійний, як у решти кнопок закриття. */
.plate-toolbar-close:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0a0a0a;
}

.plate-toolbar.is-dragging {
  cursor: grabbing;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 242, 0, 0.35) inset;
}

.plate-toolbar button,
.plate-toolbar input,
.plate-toolbar select { cursor: pointer; }

.plate-toolbar-grip {
  flex: 0 0 auto;
  width: 10px;
  height: 22px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1.5px);
  background-size: 5px 5px;
  touch-action: none;
}

.plate-toolbar[hidden] {
  display: none !important;
}

@keyframes studio-toolbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.plate-toolbar-tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 700;
  padding-right: 2px;
}

.plate-toolbar-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.4);
}

.plate-tool-btn {
  min-width: 26px;
  padding: 4px 7px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: #e6e6e6;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.plate-tool-btn:first-child { border-left: 0; }

.plate-tool-btn:hover:not(:disabled) {
  background: var(--blue);
  color: var(--yellow);
}

.plate-tool-btn.is-on {
  background: var(--yellow);
  color: #0a0a0a;
  font-weight: 700;
}

.plate-tool-btn.is-danger:hover {
  background: #d81e5b;
  color: #fff;
}

.plate-tool-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.plate-tool-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.plate-toolbar-colors {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}

/* Колір тексту в плаваючій панелі — один прямокутник замість кружечків.
   Клік по ньому відкриває ту саму стандартну палітру, що й у панелі. */
.plate-toolbar .plate-toolbar-chip {
  width: 26px;
  height: 20px;
  padding: 0;
}

.plate-toolbar .plate-toolbar-chip > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--chip, #0a0a0a);
}

.plate-swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--sw, #fff);
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.14s, box-shadow 0.14s;
}

.plate-swatch:hover {
  transform: scale(1.15);
}

.plate-swatch.is-on {
  box-shadow: 0 0 0 2px var(--yellow), 0 0 8px rgba(255, 242, 0, 0.6);
  transform: scale(1.12);
}

/* Виділений текстовий фрагмент */
.plate.is-studio2 [data-part].is-part-selected {
  outline: 1px dashed rgba(255, 242, 0, 0.85);
  outline-offset: 3px;
}

/* ── Палітри у розділі дизайну ────────────────────────────────────── */
.studio-fold-lead {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-palettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.studio-palette {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--p1, #000) 0 8px, transparent 8px),
    rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}

.studio-palette::before {
  content: "";
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, var(--p2, #fff200) 0 50%, var(--p1, #000) 50% 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.studio-palette:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.studio-palette.is-on {
  border-color: var(--yellow);
  background:
    linear-gradient(90deg, var(--p1, #000) 0 8px, transparent 8px),
    rgba(255, 242, 0, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 242, 0, 0.3) inset;
}

.studio-palette-name {
  min-width: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cfcfcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-palette.is-on .studio-palette-name {
  color: #fff;
}

@media (max-width: 760px) {
  .studio-palettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-press-body { flex-direction: column; }
  .studio-layers-panel { flex: 0 0 auto; max-height: 34%; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   STUDIO 3 — друга хвиля: колесо, акценти, ефекти, соцмережі
   ══════════════════════════════════════════════════════════════════ */

.studio-press-sheet {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Веселкове коло ───────────────────────────────────────────────── */
.plate-swatch.is-wheel,
.studio-palette.is-wheel::before {
  background: conic-gradient(
    #ff2e2e, #ff9f0a, #fff200, #37d67a, #00b3ff, #2e3192, #b02eff, #ff2e9f, #ff2e2e);
}

.plate-swatch.is-wheel {
  border-color: rgba(255, 255, 255, 0.6);
}

.studio-palette.is-wheel {
  background: rgba(255, 255, 255, 0.02);
}

.studio-palette.is-wheel:hover {
  border-color: var(--yellow);
}

/* ── Тулбар: вирівнювання як у Word, «Відпустити» ─────────────────── */
.plate-tool-btn.is-align svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Колір іконки: той самий квадрат, що й у тексту — колір ставиться з палітри. */
.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip {
  width: 26px;
  height: 22px;
}

.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip > i {
  background: var(--chip, #0a0a0a);
}

.plate-toolbar-group .plate-tool-btn.is-align {
  display: inline-flex;
  align-items: center;
  padding: 4px 5px;
}

/* Коли ввімкнено «по ширині», кнопки позиції (пунктирні) задають, куди
   ставити неповні рядки. Це та сама група, не окреме керування. */
.plate-tool-btn.is-align.is-short {
  border-style: dashed;
}

.plate-tool-btn.is-align.is-short.is-on {
  border-style: solid;
}

.plate-tool-btn.is-align.is-justify {
  margin-left: 4px;
}

.plate-tool-btn.is-release {
  padding: 4px 10px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plate-tool-btn.is-release:hover {
  background: #3d41c4;
  color: var(--yellow);
}

/* Повзунок як у розділах: нативний, без жовтої рамки й «двострілки». */
.plate-tool-range {
  width: 108px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--yellow);
  cursor: pointer;
}

.plate-tool-range:focus,
.plate-tool-range:focus-visible {
  outline: none;
}

/* Масштаб: слово над повзунком, −/+ з боків */
.plate-scale {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.4);
}

.plate-scale-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1;
}

.plate-scale-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plate-scale-row .plate-tool-btn {
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

/* Плавний повзунок без ривків */
.plate-tool-range {
  transition: none;
  will-change: auto;
}

/* ── Ефекти: тінь / контур / колір тексту ─────────────────────────── */
.plate.is-studio2.has-textcolor .plate-eyebrow,
.plate.is-studio2.has-textcolor .plate-name,
.plate.is-studio2.has-textcolor .plate-sub {
  color: var(--text-color);
}

.plate.is-studio2.has-shadow .plate-qr-wrap canvas {
  filter: drop-shadow(0 0 var(--fx-shadow-blur, 18px) var(--fx-shadow, #000));
}

.plate.is-studio2.has-shadow .plate-name,
.plate.is-studio2.has-shadow .plate-eyebrow,
.plate.is-studio2.has-shadow .plate-sub {
  text-shadow: 0 0 var(--fx-shadow-blur, 18px) var(--fx-shadow, #000);
}

.plate.is-studio2.has-outline .plate-name,
.plate.is-studio2.has-outline .plate-eyebrow,
.plate.is-studio2.has-outline .plate-sub {
  -webkit-text-stroke: var(--fx-outline-w, 2px) var(--fx-outline, #000);
  paint-order: stroke fill;
}

.plate.is-studio2.has-outline .plate-qr-wrap canvas {
  filter: drop-shadow(var(--fx-outline-w, 2px) 0 0 var(--fx-outline, #000))
    drop-shadow(calc(-1 * var(--fx-outline-w, 2px)) 0 0 var(--fx-outline, #000))
    drop-shadow(0 var(--fx-outline-w, 2px) 0 var(--fx-outline, #000))
    drop-shadow(0 calc(-1 * var(--fx-outline-w, 2px)) 0 var(--fx-outline, #000));
}

/* Колір підложки QR */
.plate.is-studio2.has-card-color:not(.is-card-none) .plate-qr-wrap {
  background-color: var(--card-bg, transparent);
}

/* ── Контроли ефектів у панелі ────────────────────────────────────── */
.studio-effects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.studio-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #e2e2e2;
  cursor: pointer;
  user-select: none;
}

.studio-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--yellow);
  cursor: pointer;
}

/* ── Список зображень ─────────────────────────────────────────────── */
.studio-emblem-count {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-emblem-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.studio-emblem-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
}

.studio-emblem-item.is-on {
  border-color: var(--yellow);
  box-shadow: 0 0 0 1px rgba(255, 242, 0, 0.3) inset;
}

/* Мініатюра + кнопка видалення — один рядок, повзунок під ними. */
.studio-emblem-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.studio-emblem-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.studio-emblem-item .studio-range {
  margin: 0;
}

.studio-emblem-del {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.studio-emblem-del:hover {
  background: #d81e5b;
  border-color: #d81e5b;
}

/* ── Поділитися: одна кнопка + спадний список ─────────────────────── */
.studio-body .studio-stage-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.studio-stage-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.studio-share {
  position: relative;
  display: inline-flex;
}

.studio-share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-share-toggle svg {
  width: 15px;
  height: 15px;
  display: block;
}

.studio-share-toggle.is-open {
  border-color: var(--yellow);
  color: var(--yellow);
}

.studio-share-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  width: min(344px, calc(100vw - 28px));
  margin: 0;
  padding: 6px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #16171f, #0d0d12);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.62);
}

.studio-share-menu[hidden] {
  display: none !important;
}

.studio-share-menu li {
  min-width: 0;
}

.studio-share-menu button {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: #e6e6e6;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 9px 6px 8px;
  cursor: pointer;
  text-align: center;
}

.studio-share-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: block;
}

.studio-share-menu button span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #cfcfcf;
  text-transform: none;
}

.studio-share-menu button:hover,
.studio-share-menu button:focus-visible {
  border-color: var(--yellow);
  background: rgba(46, 49, 146, 0.32);
  color: var(--yellow);
  outline: none;
}

.studio-share-menu button:hover span,
.studio-share-menu button:focus-visible span {
  color: var(--yellow);
}

/* Підказка про картинку в буфері */
.studio-share-hint {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 1400;
  transform: translate(-50%, 12px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--yellow);
  background: rgba(10, 10, 14, 0.96);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.studio-share-hint.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Стильна кнопка «Випадковий дизайн» ───────────────────────────── */
.studio-btn.is-dice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-left: 32px;
  padding-right: 18px;
  border: 1px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(#0f0f14, #0f0f14) padding-box,
    linear-gradient(118deg, #fff200, #2e3192 55%, #fff200) border-box;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Нестандартна геометрія: два зрізані кути — знизу зліва й зверху справа. */
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(46, 49, 146, 0.45));
}

.studio-btn.is-dice::before,
.studio-btn.is-dice::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Геометричний знак: ромб, складений із жовтої та синьої половин. */
.studio-btn.is-dice::before {
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--yellow) 0 50%, #3d3fd0 50% 100%);
  animation: studio2-dice-breathe 5.5s ease-in-out infinite;
}

@keyframes studio2-dice-breathe {
  0%, 100% { transform: translateY(-50%) rotate(45deg) scale(1); opacity: 0.88; }
  50% { transform: translateY(-50%) rotate(45deg) scale(1.14); opacity: 1; }
}

/* Замість решітки — розсіяний відблиск, що зрідка проходить по кнопці. */
.studio-btn.is-dice::after {
  top: -70%;
  left: -40%;
  width: 38%;
  height: 240%;
  transform: translateX(-160%) rotate(12deg);
  background: linear-gradient(96deg, transparent 0 24%, rgba(255, 255, 255, 0.13) 48%, rgba(255, 242, 0, 0.2) 58%, transparent 78%);
  opacity: 0;
  animation: studio2-dice-sheen 9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes studio2-dice-sheen {
  0%, 44% { transform: translateX(-160%) rotate(12deg); opacity: 0; }
  50% { opacity: 1; }
  78% { transform: translateX(340%) rotate(12deg); opacity: 1; }
  88%, 100% { transform: translateX(340%) rotate(12deg); opacity: 0; }
}

.studio-btn.is-dice:hover {
  color: #fff;
  filter: brightness(1.08) drop-shadow(0 6px 18px rgba(46, 49, 146, 0.6));
}

.studio-btn.is-dice:active {
  transform: translateY(1px);
}

.studio-btn.is-dice.is-rolling .studio-random-label {
  animation: studio2-dice-roll 0.5s ease-out 1;
}

@keyframes studio2-dice-roll {
  0% { opacity: 0.3; letter-spacing: 0.16em; }
  100% { opacity: 1; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-btn.is-dice::before,
  .studio-btn.is-dice::after,
  .studio-btn.is-dice.is-rolling .studio-random-label { animation: none; }
  .studio-btn.is-dice::after { opacity: 0; }
}

.studio-btn.is-dice .studio-random-label {
  position: relative;
  z-index: 1;
}

/* ── Розділи Studio 2: тільки іконка + назва, без «+»/«–» ─────────── */
.studio-body .studio-fold > .studio-fold-sum::before,
.studio-body .studio-fold[open] > .studio-fold-sum::before,
.studio-body .studio-fold-sum::before {
  content: none !important;
  display: none !important;
}

.studio-body .studio-fold-sum {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
}

.studio-body .studio-fold-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--yellow);
}

.studio-body .studio-fold-ico svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Іконка-картинка (QR-розділ): чорне тло PNG гасимо через screen-бленд. */
.studio-body .studio-fold-ico.is-img img {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 2px;
  mix-blend-mode: screen;
}

/* Назва та підпис — у другій колонці, поруч з іконкою. */
.studio-body .studio-fold-sum > span:not(.studio-fold-ico) {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.studio-body .studio-fold-sum > em {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

/* Іконка показується лише коли розділ закритий; у відкритому її немає. */
.studio-body .studio-fold[open] .studio-fold-ico {
  display: none;
}

.studio-body .studio-fold[open] > .studio-fold-sum {
  grid-template-columns: minmax(0, 1fr);
}

.studio-body .studio-fold[open] .studio-fold-sum > span:not(.studio-fold-ico),
.studio-body .studio-fold[open] .studio-fold-sum > em {
  grid-column: 1;
}

/* ── Підпис «Масштаб» над повзунком ─────────────────────────────── */
.plate-scale-label {
  color: var(--yellow);
}

/* ── Новий повзунок (той самий, що в тулбарі) у розділах панелі ──── */
.studio-body .studio-range {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 2px;
  padding: 5px 8px 6px;
  gap: 4px;
}

.studio-body .studio-range .plate-scale-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Значення (100%, 18px) — тим самим рядком, але приглушеним. */
.studio-body .studio-range .plate-scale-label em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9a9a9a;
}

.studio-body .studio-range .plate-scale-row {
  width: 100%;
  gap: 6px;
}

.studio-body .studio-range .plate-tool-range {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.studio-body .studio-range .plate-tool-btn {
  min-width: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.studio-body .studio-range .plate-tool-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* ══════════════════════════════════════════════════════════════════
   Власний розмір листка: пункт у списку форматів + модальне вікно
   ══════════════════════════════════════════════════════════════════ */

/* Пункт «Власний розмір» — останній у списку, відділений лінією. */
.studio-format-menu button.is-custom {
  grid-template-columns: 1fr;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 9px;
}

/* ── Модальне вікно ───────────────────────────────────────────────── */
.studio-modal-card.is-size {
  width: min(420px, 100%);
  padding: 26px 20px 20px;
}

.studio-size-title {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-size-lead {
  margin: 0 0 16px !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62) !important;
}

.studio-size-units {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  padding: 4px;
  background: rgba(0, 0, 0, 0.35);
}

.studio-size-unit {
  appearance: none;
  border: 0;
  background: transparent;
  color: #b9b9c3;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 4px;
  cursor: pointer;
}

.studio-size-unit:hover {
  color: #fff;
}

.studio-size-unit.is-on {
  background: var(--yellow);
  color: #101018;
  font-weight: 700;
}

.studio-size-fields {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}

.studio-size-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-size-field span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.studio-size-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-size: 15px;
  padding: 9px 10px;
  text-align: center;
}

.studio-size-field input:focus {
  outline: none;
  border-color: var(--yellow);
}

.studio-size-cross {
  padding-bottom: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
}

.studio-size-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.studio-size-presets[hidden] {
  display: none;
}

.studio-size-preset {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: #cfcfd8;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  cursor: pointer;
}

.studio-size-preset:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.studio-size-preview {
  margin: 14px 0 18px !important;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255, 242, 0, 0.82) !important;
  min-height: 14px;
}

/* ── Логотип шапки Studio обертається як на сайті (розмір лишається) ── */
.studio-brand-mark {
  will-change: transform;
  transform: translateZ(0);
  animation: brand-logo-spin 4.2s linear infinite;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .studio-brand-mark { animation: none; }
}

/* ── Обертання шарів ───────────────────────────────────────────────── */
/* Кут тримає --rot на самому шарі; кнопка-стрілка сидить у лівому куті. */
.plate.is-studio2 .plate-layer {
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}

.plate.is-studio2 .plate-emblem-wrap {
  width: var(--emblem-size, 16%);
  max-width: min(100%, calc(100% - 28px));
  line-height: 0;
}

.plate.is-studio2 .plate-emblem-wrap .plate-emblem {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.plate.is-studio2 .plate-layer.is-rotating {
  outline: 1px solid var(--yellow);
  outline-offset: 5px;
}

.plate-rot {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  display: none;
  place-items: center;
  border: 1px solid var(--yellow);
  border-radius: 50%;
  background: #0f0f14;
  color: var(--yellow);
  cursor: grab;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--rot, 0deg)));
  z-index: 9;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.plate.is-studio2 .plate-layer.is-selected .plate-rot,
.plate.is-studio2 .plate-layer:hover .plate-rot {
  display: grid;
}

.plate-rot:hover {
  background: var(--yellow);
  color: #0f0f14;
}

.plate-rot:active,
.plate-rot.is-rotating {
  cursor: grabbing;
}

.plate-rot svg {
  width: 15px;
  height: 15px;
  display: block;
  pointer-events: none;
}

.plate.is-exporting .plate-rot,
.plate.is-picking .plate-rot {
  display: none !important;
}

/* ── База акцентів у «Вставити зображення» ─────────────────────────── */
.studio-accent-base {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}

.studio-accent-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.studio-accent-cell:hover {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.14);
}

.studio-accent-cell.is-more {
  color: var(--yellow);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-style: dashed;
}

/* Іконки в стилі сайту: лінійна графіка замість емодзі-гліфа. */
.studio-accent-cell.is-icon svg,
.studio-icon-cell.is-icon svg {
  width: 74%;
  height: 74%;
  display: block;
}

/* Текстові іконки (штампи «SALE», «24/7») — теж SVG: рамка рахується від
   довжини напису, тож він завжди влазить у плитку й не рве сітку. */
.studio-icon-cell.is-word,
.studio-accent-cell.is-word {
  padding: 0 1px;
  overflow: hidden;
}

.studio-icon-cell.is-word svg,
.studio-accent-cell.is-word svg {
  width: 88%;
  height: 88%;
  display: block;
  pointer-events: none;
}

/* ── Іконки: сітка значків ─────────────────────────────────────────── */
.studio-icons {
  margin-bottom: 10px;
}

/* ── Модальне вікно великої бази іконок ────────────────────────────── */
.studio-modal-card.is-icons {
  width: min(940px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.studio-icon-search {
  width: 100%;
  margin: 4px 0 12px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.studio-icon-search:focus {
  outline: none;
  border-color: var(--yellow);
}

.studio-icon-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px;
  min-height: 0;
}

.studio-icon-group + .studio-icon-group {
  margin-top: 14px;
}

.studio-icon-grid .studio-icon-group-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-icon-grid .studio-icon-empty {
  margin: 0;
}

.studio-icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.studio-icon-cell {
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 25px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.studio-icon-cell:hover {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.14);
  transform: translateY(-1px);
}

.studio-icon-empty {
  padding: 24px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

@media (max-width: 640px) {
  .studio-accent-base { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .studio-icon-row { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
  .studio-icon-cell { font-size: 21px; }
}

/* ── Текстові блоки: заголовок/текст = окремий блок у панелі ───────── */
.studio-tb {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.studio-tb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.studio-tb-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

/* Три літери Q — жирна, курсивна, підкреслена. Без підписів: самі літери
   показують і зміст, і стан. Живуть у вільному місці праворуч від назви
   блоку, разом із кнопкою «Прибрати». */
.studio-tb-marks {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Ті самі три літери стоять і в плаваючому тулбарі — одразу після кольорів. */
.plate-toolbar-marks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.studio-tb-marks .studio-tb-mark,
.plate-toolbar-marks .studio-tb-mark {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: #dedede;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.studio-tb-mark.is-b { font-weight: 800; }
.studio-tb-mark.is-i { font-style: italic; }
.studio-tb-mark.is-u { text-decoration: underline; }

.studio-tb-marks .studio-tb-mark:hover,
.plate-toolbar-marks .studio-tb-mark:hover {
  border-color: var(--yellow);
  color: #fff;
}

.studio-tb-marks .studio-tb-mark.is-on,
.plate-toolbar-marks .studio-tb-mark.is-on {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0a0a0a;
}

/* Хрестик у шапці текстової частини — завжди видалення блоку. */
.studio-tb-del {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
  color: #ef7b7b;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.studio-tb-del:hover {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.14);
  color: #ffb3b3;
}

.studio-form .studio-tb label,
.studio-form .studio-tb .studio-tb-font {
  gap: 4px;
}

.studio-form .studio-tb-font {
  display: flex;
  align-items: center;
  gap: 8px;
}

.studio-form .studio-tb-font > span,
.studio-tb-cap {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.studio-form .studio-tb-font select {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  background: #0a0a0a;
  color: #fff;
  font: inherit;
  font-size: 12px;
  padding: 7px 9px;
}

.studio-form .studio-tb-font select:focus {
  outline: 1px solid var(--yellow);
  border-color: var(--yellow);
}

.studio-form .studio-tb-text {
  min-height: 46px;
  font-size: 13px;
}

/* Прямокутник кольору біля назви текстової частини. Палітру відкриває
   сам прямокутник — та сама панель, що й у «Стилі QR». Селектор із двома
   класами, бо .studio-fx-chip стоїть нижче у файлі й перебив би розмір. */
.studio-form .studio-tb-chip,
.studio-modal-card .studio-tb-chip {
  flex: 0 0 auto;
  width: 26px;
  height: 18px;
}

.studio-tb-scale {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
}

/* ── Вирівнювання тексту в блоці ──────────────────────────────────── */
.studio-tb-aligns {
  display: grid;
  gap: 6px;
}

.studio-tb-align-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.studio-tb-align-row .studio-tb-cap {
  flex: 1 1 100%;
  margin-bottom: 1px;
}

.studio-tb-align {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.studio-tb-align svg {
  width: 17px;
  height: 17px;
}

.studio-tb-align:hover {
  border-color: var(--yellow);
  color: #fff;
}

.studio-tb-align.is-on {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.14);
  color: var(--yellow);
}

/* Коли ввімкнено «по ширині», кнопки позиції теж пунктирні — щоб було
   видно, що вони керують лише неповними рядками. */
.studio-tb-align.is-short {
  border-style: dashed;
}

.studio-tb-align.is-short.is-on {
  border-style: solid;
}

.studio-tb-align.is-justify {
  margin-left: 3px;
}

.studio-btn.studio-tb-add {
  width: 100%;
  margin-top: 2px;
}

/* ── Масштаб листка ────────────────────────────────────────────────── */
/* Аркуш масштабується реальним розміром (не transform), тому коли він
   стає більший за робочу область — з'являються повзунки прокрутки по
   ширині та висоті, і вся плоскість доступна для огляду. На експорт
   масштаб не впливає взагалі. */
.studio-press-sheet {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 242, 0, 0.5) #101014;
  /* Місце під повзунки зарезервоване завжди й з обох боків: коли при
     масштабуванні повзунок зʼявляється, ширина вмісту не змінюється —
     аркуш не смикається вбік на 98 → 101 %. */
  scrollbar-gutter: stable both-edges;
}

.studio-press-sheet::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.studio-press-sheet::-webkit-scrollbar-track {
  background: #101014;
}

.studio-press-sheet::-webkit-scrollbar-thumb {
  background: rgba(255, 242, 0, 0.45);
  border: 2px solid #101014;
}

.studio-press-sheet::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
}

.studio-press-sheet::-webkit-scrollbar-corner {
  background: #101014;
}

.studio-press-sheet.is-zoomed {
  overflow: auto;
  /* Центруємо і в збільшеному стані: інакше на 98 % аркуш по центру, а
     на 101 % стрибає до лівого краю. Відʼємного виносу не буде, бо
     аркуш ніколи не більший за власний 96-піксельний запас (він
     входить у scrollWidth), тож лівий і верхній краї лишаються
     досяжними повзунками. */
  place-items: center;
  overflow-anchor: none;
  overscroll-behavior: contain;
  cursor: grab;
  scroll-behavior: auto;
}

/* Чорний запас навколо аркуша — це те саме робоче тло редактора: шари
   (заголовки, текст, QR, зображення) можна виносити на нього за край
   листка. Тому запас фіксований з усіх боків і дорівнює тому, що
   очікує computeBounds() у studio-app.js: при масштабі аркуш разом із цим
   запасом прокручується, тож до запасу можна доскролити й перетягнути
   туди обʼєкт. */
.studio-press-sheet.is-zoomed #studio-board {
  margin: 96px;
  max-width: none;
  max-height: none;
}

.studio-press-sheet.is-panning {
  cursor: grabbing;
}

/* Жовті кутики-мітки листка. Поки аркуш уміщається в робочу область, вони
   стоять на місці (статичні). Але щойно починається масштабування і область
   стає прокручуваною, кутики «їдуть» разом із вмістом і тільки збивають з
   пантелику — тому в збільшеному стані їх ховаємо зовсім. */
.studio-press-sheet.is-zoomed > .studio-crop {
  display: none;
}

#studio-board {
  width: calc(min(100cqw, calc(100cqh * var(--pw) / var(--ph))) * var(--zoom, 1));
  max-width: none;
  max-height: none;
  height: auto;
  /* auto-margin тримає аркуш по центру, а коли він більший за область —
     притискає до початку, щоб прокрутка діставала до обох країв. */
  margin: auto;
}

/* Щоб масштаб був справжнім масштабом, а не просто більшим білим аркушем,
   піксельні розміри вмісту теж множимо на --zoom. */
.plate.is-studio2 .plate-bar {
  height: calc(8px * var(--zoom, 1));
}

.plate.is-studio2 .plate-eyebrow {
  font-size: calc(10px * var(--text-scale, 1) * var(--part-scale, 1) * var(--zoom, 1));
}

.plate.is-studio2 .plate-name {
  font-size: calc(22px * var(--text-scale, 1) * var(--part-scale, 1) * var(--zoom, 1));
}

.plate.is-studio2 .plate-sub,
.plate.is-studio2 .plate-meta {
  font-size: calc(12px * var(--text-scale, 1) * var(--part-scale, 1) * var(--zoom, 1));
}

.plate.is-studio2 .plate-copy {
  gap: calc(8px * var(--text-scale, 1) * var(--part-scale, 1) * var(--zoom, 1));
}

.studio-zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(4px);
}

.studio-zoom .plate-scale-label {
  color: var(--yellow);
}

.studio-zoom .plate-scale-row {
  gap: 5px;
}

.studio-zoom .plate-tool-range {
  width: 92px;
}

/* ── Формати файлу для кнопки «Завантажити» ────────────────────────── */
.studio-export {
  position: relative;
  display: grid;
  gap: 6px;
}

.studio-export-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  vertical-align: 1px;
  transition: transform 0.16s ease;
}

#studio-download[aria-expanded="true"] .studio-export-caret {
  transform: rotate(180deg);
}

.studio-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: min(248px, calc(100vw - 28px));
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #16171f, #0d0d12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62);
}

.studio-export-menu[hidden] {
  display: none;
}

.studio-export-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mute);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.studio-export-item-name {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.studio-export-item-hint {
  flex: 1 1 auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-align: right;
}

.studio-export-item:hover {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.08);
}

.studio-export-item.is-on {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.14);
}

.studio-export-item.is-on .studio-export-item-name,
.studio-export-item:hover .studio-export-item-name {
  color: var(--yellow);
}

/* ── Іконка шару: справжня піктограма замість рамки ────────────────── */
.studio-layer-ico.is-icon svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .studio-zoom {
    right: 6px;
    bottom: 6px;
  }

  .studio-zoom .plate-tool-range {
    width: 70px;
  }
}

/* ── Пропорції листка не залежать від масштабу аркуша ────────────────
   Аркуш більшає реальним розміром (--zoom), а кеглі, відступи, рамки й
   тіні всередині листка задані в пікселях. Якщо множити на --zoom лише
   частину з них, композиція залежить від масштабу: макет, зібраний на
   220%, на 40% виглядає зламаним — блоки наїжджають одне на одного,
   а відступи й рамки «пливуть». Тому множимо ВСІ піксельні метрики
   листка. На 100% значення лишаються точно такими, як були. */

/* Акцентна смуга */
.plate.is-studio2.is-bar-thick .plate-bar {
  height: calc(18px * var(--zoom, 1));
}

.plate.is-studio2.is-bar-left .plate-bar,
.plate.is-studio2.is-bar-right .plate-bar {
  width: calc(8px * var(--zoom, 1));
}

.plate.is-studio2.is-bar-frame .plate-bar {
  border-width: calc(3px * var(--zoom, 1));
}

/* Підложка QR: відступи, рамки, радіуси, тіні */
.plate.is-studio2.is-card-stamp .plate-qr-wrap {
  border-width: calc(3px * var(--zoom, 1));
  box-shadow: calc(4px * var(--zoom, 1)) calc(4px * var(--zoom, 1)) 0 var(--accent, #fff200);
}

.plate.is-studio2.is-card-round .plate-qr-wrap {
  box-shadow:
    0 0 0 calc(1px * var(--zoom, 1)) rgba(0, 0, 0, 0.06),
    0 calc(12px * var(--zoom, 1)) calc(28px * var(--zoom, 1)) rgba(0, 0, 0, 0.14);
}

.plate.is-studio2.is-card-soft .plate-qr-wrap {
  box-shadow: 0 calc(6px * var(--zoom, 1)) calc(18px * var(--zoom, 1)) rgba(0, 0, 0, 0.14);
}

.plate.is-studio2.is-card-outline .plate-qr-wrap {
  border-width: calc(2px * var(--zoom, 1));
  padding: calc(8px * var(--zoom, 1));
}

.plate.is-studio2.is-card-inset .plate-qr-wrap {
  box-shadow: inset 0 0 0 calc(1px * var(--zoom, 1)) rgba(0, 0, 0, 0.18);
}

.plate.is-studio2.is-card-ticket .plate-qr-wrap {
  border-width: calc(2px * var(--zoom, 1));
  border-radius: calc(4px * var(--zoom, 1));
}

.plate.is-studio2.is-card-glass .plate-qr-wrap {
  border-width: calc(1px * var(--zoom, 1));
  border-radius: calc(18px * var(--zoom, 1));
  padding: calc(10px * var(--zoom, 1));
  box-shadow: 0 calc(10px * var(--zoom, 1)) calc(30px * var(--zoom, 1)) rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(calc(8px * var(--zoom, 1)));
}

.plate.is-studio2.is-card-halo .plate-qr-wrap {
  border-radius: calc(22px * var(--zoom, 1));
  padding: calc(10px * var(--zoom, 1));
  box-shadow:
    0 0 0 calc(6px * var(--zoom, 1)) rgba(255, 255, 255, 0.18),
    0 0 0 calc(7px * var(--zoom, 1)) var(--accent, #fff200),
    0 calc(16px * var(--zoom, 1)) calc(32px * var(--zoom, 1)) rgba(0, 0, 0, 0.16);
}

.plate.is-studio2.is-card-lift .plate-qr-wrap {
  border-radius: calc(16px * var(--zoom, 1));
  padding: calc(10px * var(--zoom, 1));
  box-shadow: 0 calc(18px * var(--zoom, 1)) calc(40px * var(--zoom, 1)) rgba(0, 0, 0, 0.22);
}

.plate.is-studio2.is-card-pill .plate-qr-wrap {
  padding: calc(12px * var(--zoom, 1)) calc(16px * var(--zoom, 1));
  box-shadow: 0 calc(10px * var(--zoom, 1)) calc(24px * var(--zoom, 1)) rgba(0, 0, 0, 0.14);
}

/* Декор тла з піксельним кроком */
.plate.is-wash-mesh .plate-wash {
  background-size: calc(22px * var(--zoom, 1)) calc(22px * var(--zoom, 1));
}

.plate.is-wash-grid .plate-wash {
  background-image: repeating-linear-gradient(
    -12deg,
    transparent 0 calc(10px * var(--zoom, 1)),
    var(--accent, #fff200) calc(10px * var(--zoom, 1)) calc(11px * var(--zoom, 1))
  );
}

/* Ефекти: розмір тіні, контуру й підсвітки теж у пікселях */
.plate.is-studio2.has-shadow .plate-qr-wrap canvas {
  filter: drop-shadow(0 0 calc(var(--fx-shadow-blur, 18px) * var(--zoom, 1)) var(--fx-shadow, #000));
}

.plate.is-studio2.has-shadow .plate-name,
.plate.is-studio2.has-shadow .plate-eyebrow,
.plate.is-studio2.has-shadow .plate-sub {
  text-shadow: 0 0 calc(var(--fx-shadow-blur, 18px) * var(--zoom, 1)) var(--fx-shadow, #000);
}

.plate.is-studio2.has-outline .plate-name,
.plate.is-studio2.has-outline .plate-eyebrow,
.plate.is-studio2.has-outline .plate-sub {
  -webkit-text-stroke: calc(var(--fx-outline-w, 2px) * var(--zoom, 1)) var(--fx-outline, #000);
}

.plate.is-studio2.has-outline .plate-qr-wrap canvas {
  filter:
    drop-shadow(calc(var(--fx-outline-w, 2px) * var(--zoom, 1)) 0 0 var(--fx-outline, #000))
    drop-shadow(calc(-1 * var(--fx-outline-w, 2px) * var(--zoom, 1)) 0 0 var(--fx-outline, #000))
    drop-shadow(0 calc(var(--fx-outline-w, 2px) * var(--zoom, 1)) 0 var(--fx-outline, #000))
    drop-shadow(0 calc(-1 * var(--fx-outline-w, 2px) * var(--zoom, 1)) 0 var(--fx-outline, #000));
}

/* Порожнистий заголовок типографічного настрою */
.plate.is-type-outline .plate-name {
  -webkit-text-stroke: calc(1.15px * var(--zoom, 1)) var(--ink, #0a0a0a);
}

/* Поля шарів у пікселях. Ширина шару — майже вся ширина листка: інакше
   велике слово чи літера не можуть зайняти весь аркуш. */
.plate.is-studio2 .plate-layer {
  max-width: min(100%, calc(100% - 28px * var(--zoom, 1)));
}

/* ══════════════════════════════════════════════════════════════════
   ЕФЕКТИ v2 — тінь зі зсувом, контур, великий набір підкладок
   Усі піксельні метрики множаться на --zoom, щоб лист на 40% і на
   220% виглядав однаково, а експорт збігався з тим, що на екрані.
   ══════════════════════════════════════════════════════════════════ */

/* ── Тінь: зсув + розмиття ────────────────────────────────────────── */
.plate.is-studio2.has-shadow .plate-qr-wrap canvas {
  filter: drop-shadow(
    calc(var(--fx-shadow-x, 6px) * var(--zoom, 1))
    calc(var(--fx-shadow-y, 6px) * var(--zoom, 1))
    calc(var(--fx-shadow-blur, 18px) * var(--zoom, 1))
    var(--fx-shadow, #000)
  );
}

.plate.is-studio2.has-shadow .plate-name,
.plate.is-studio2.has-shadow .plate-eyebrow,
.plate.is-studio2.has-shadow .plate-sub {
  text-shadow:
    calc(var(--fx-shadow-x, 6px) * var(--zoom, 1))
    calc(var(--fx-shadow-y, 6px) * var(--zoom, 1))
    calc(var(--fx-shadow-blur, 18px) * var(--zoom, 1))
    var(--fx-shadow, #000);
}

/* ── Підкладки. Тло задається background-color, тож вибраний колір
      (--card-bg) перекриває його, а малюнок-декор лишається. ───────── */
.plate.is-studio2.is-card-card .plate-qr-wrap {
  background-color: #fff;
  border: calc(1px * var(--zoom, 1)) solid rgba(0, 0, 0, 0.06);
  border-radius: calc(6px * var(--zoom, 1));
  padding: calc(10px * var(--zoom, 1));
  box-shadow: 0 calc(8px * var(--zoom, 1)) calc(22px * var(--zoom, 1)) rgba(0, 0, 0, 0.16);
}

.plate.is-studio2.is-card-soft .plate-qr-wrap {
  background-color: rgba(255, 255, 255, 0.82);
  border: 0;
  border-radius: calc(26px * var(--zoom, 1));
  padding: calc(12px * var(--zoom, 1));
  box-shadow: 0 calc(10px * var(--zoom, 1)) calc(30px * var(--zoom, 1)) rgba(0, 0, 0, 0.18);
}

.plate.is-studio2.is-card-lift .plate-qr-wrap {
  background-color: #fff;
  border: 0;
  border-radius: calc(8px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow:
    0 calc(6px * var(--zoom, 1)) 0 rgba(0, 0, 0, 0.08),
    0 calc(24px * var(--zoom, 1)) calc(44px * var(--zoom, 1)) rgba(0, 0, 0, 0.28);
}

.plate.is-studio2.is-card-halo .plate-qr-wrap {
  background-color: #fff;
  border: 0;
  border-radius: calc(20px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow:
    0 0 0 calc(5px * var(--zoom, 1)) rgba(255, 255, 255, 0.55),
    0 0 0 calc(7px * var(--zoom, 1)) var(--accent, #fff200),
    0 0 calc(30px * var(--zoom, 1)) calc(6px * var(--zoom, 1)) rgba(255, 242, 0, 0.35);
}

.plate.is-studio2.is-card-glass .plate-qr-wrap {
  background-color: rgba(255, 255, 255, 0.4);
  border: calc(1px * var(--zoom, 1)) solid rgba(255, 255, 255, 0.6);
  border-radius: calc(16px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  backdrop-filter: blur(calc(7px * var(--zoom, 1)));
  box-shadow: 0 calc(12px * var(--zoom, 1)) calc(32px * var(--zoom, 1)) rgba(0, 0, 0, 0.14);
}

.plate.is-studio2.is-card-accent .plate-qr-wrap {
  background-color: var(--accent, #fff200);
  border: 0;
  border-radius: calc(4px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow: calc(6px * var(--zoom, 1)) calc(6px * var(--zoom, 1)) 0 rgba(10, 10, 10, 0.9);
}

/* Дуо: діагональ у два кольори */
.plate.is-studio2.is-card-duo .plate-qr-wrap {
  background-color: #fff200;
  background-image: linear-gradient(
    135deg,
    transparent 0 48%,
    rgba(46, 49, 146, 0.92) 48% 100%
  );
  border: 0;
  border-radius: calc(4px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow: 0 calc(10px * var(--zoom, 1)) calc(26px * var(--zoom, 1)) rgba(0, 0, 0, 0.22);
}

/* Неон: темна плита зі світною рамкою */
.plate.is-studio2.is-card-neon .plate-qr-wrap {
  background-color: #0a0a0a;
  border: calc(1.5px * var(--zoom, 1)) solid var(--accent, #fff200);
  border-radius: calc(10px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow:
    0 0 calc(12px * var(--zoom, 1)) calc(2px * var(--zoom, 1)) rgba(255, 242, 0, 0.55),
    0 0 calc(34px * var(--zoom, 1)) calc(6px * var(--zoom, 1)) rgba(255, 242, 0, 0.22);
}

/* Сітка */
.plate.is-studio2.is-card-grid .plate-qr-wrap {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(10, 10, 10, 0.12) 0 calc(1px * var(--zoom, 1)),
      transparent calc(1px * var(--zoom, 1)) calc(9px * var(--zoom, 1))
    ),
    repeating-linear-gradient(
      90deg,
      rgba(10, 10, 10, 0.12) 0 calc(1px * var(--zoom, 1)),
      transparent calc(1px * var(--zoom, 1)) calc(9px * var(--zoom, 1))
    );
  border: calc(1px * var(--zoom, 1)) solid rgba(0, 0, 0, 0.18);
  border-radius: calc(3px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
}

/* Точки */
.plate.is-studio2.is-card-dots .plate-qr-wrap {
  background-color: #fff;
  background-image: radial-gradient(
    rgba(10, 10, 10, 0.22) calc(1.1px * var(--zoom, 1)),
    transparent calc(1.4px * var(--zoom, 1))
  );
  background-size: calc(7px * var(--zoom, 1)) calc(7px * var(--zoom, 1));
  border: 0;
  border-radius: calc(4px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
}

/* Кутики: чотири кутові дужки замість рамки */
.plate.is-studio2.is-card-corners .plate-qr-wrap {
  background-color: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 0;
  padding: calc(13px * var(--zoom, 1));
  background-image:
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a)),
    linear-gradient(var(--ink, #0a0a0a), var(--ink, #0a0a0a));
  background-size:
    calc(14px * var(--zoom, 1)) calc(3px * var(--zoom, 1)),
    calc(3px * var(--zoom, 1)) calc(14px * var(--zoom, 1)),
    calc(14px * var(--zoom, 1)) calc(3px * var(--zoom, 1)),
    calc(3px * var(--zoom, 1)) calc(14px * var(--zoom, 1)),
    calc(14px * var(--zoom, 1)) calc(3px * var(--zoom, 1)),
    calc(3px * var(--zoom, 1)) calc(14px * var(--zoom, 1)),
    calc(14px * var(--zoom, 1)) calc(3px * var(--zoom, 1)),
    calc(3px * var(--zoom, 1)) calc(14px * var(--zoom, 1));
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
}

/* Довга тінь: кілька твердих відступів у глибину */
.plate.is-studio2.is-card-long .plate-qr-wrap {
  background-color: #fff;
  border: 0;
  border-radius: calc(3px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow:
    calc(5px * var(--zoom, 1)) calc(5px * var(--zoom, 1)) 0 var(--ink, #0a0a0a),
    calc(10px * var(--zoom, 1)) calc(10px * var(--zoom, 1)) 0 var(--accent, #fff200),
    calc(15px * var(--zoom, 1)) calc(15px * var(--zoom, 1)) 0 rgba(10, 10, 10, 0.35);
}

/* Стрічка: кольорова смуга навскіс під кодом */
.plate.is-studio2.is-card-band .plate-qr-wrap {
  background-color: #fff;
  border: 0;
  border-radius: calc(3px * var(--zoom, 1));
  padding: calc(12px * var(--zoom, 1));
}
.plate.is-studio2.is-card-band .plate-qr-wrap::before {
  content: "";
  position: absolute;
  left: calc(-16px * var(--zoom, 1));
  right: calc(-16px * var(--zoom, 1));
  top: 34%;
  height: 32%;
  transform: rotate(-8deg);
  background: var(--accent, #fff200);
  opacity: 0.92;
  z-index: -1;
}

/* Штамп: пунктирна рамка з відступом */
.plate.is-studio2.is-card-stamp .plate-qr-wrap {
  background-color: rgba(255, 255, 255, 0.86);
  border: calc(2.5px * var(--zoom, 1)) dashed var(--ink, #0a0a0a);
  border-radius: calc(4px * var(--zoom, 1));
  padding: calc(10px * var(--zoom, 1));
  box-shadow: calc(4px * var(--zoom, 1)) calc(4px * var(--zoom, 1)) 0 var(--accent, #fff200);
}

/* Квиток: вирізи з боків */
.plate.is-studio2.is-card-ticket .plate-qr-wrap {
  background-color: #fff;
  border: calc(1.5px * var(--zoom, 1)) dashed rgba(10, 10, 10, 0.55);
  border-radius: calc(4px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow:
    calc(-5px * var(--zoom, 1)) 0 0 calc(-1px * var(--zoom, 1)) var(--accent, #fff200),
    calc(5px * var(--zoom, 1)) 0 0 calc(-1px * var(--zoom, 1)) var(--accent, #fff200);
}

/* Контур */
.plate.is-studio2.is-card-outline .plate-qr-wrap {
  background-color: transparent;
  border: calc(2px * var(--zoom, 1)) solid var(--ink, #0a0a0a);
  border-radius: calc(2px * var(--zoom, 1));
  padding: calc(10px * var(--zoom, 1));
  box-shadow: none;
}

/* Врізка */
.plate.is-studio2.is-card-inset .plate-qr-wrap {
  background-color: rgba(10, 10, 10, 0.05);
  border: 0;
  border-radius: calc(4px * var(--zoom, 1));
  padding: calc(11px * var(--zoom, 1));
  box-shadow: inset 0 0 0 calc(1.5px * var(--zoom, 1)) rgba(10, 10, 10, 0.22);
}

/* Капсула */
.plate.is-studio2.is-card-pill .plate-qr-wrap {
  background-color: #fff;
  border: 0;
  border-radius: 999px;
  padding: calc(13px * var(--zoom, 1)) calc(17px * var(--zoom, 1));
  box-shadow: 0 calc(10px * var(--zoom, 1)) calc(26px * var(--zoom, 1)) rgba(0, 0, 0, 0.16);
}

/* Коло */
.plate.is-studio2.is-card-round .plate-qr-wrap {
  background-color: #fff;
  border: 0;
  border-radius: 50%;
  padding: 0;
  width: var(--qr-size, 22%);
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 calc(1px * var(--zoom, 1)) rgba(0, 0, 0, 0.06),
    0 calc(12px * var(--zoom, 1)) calc(28px * var(--zoom, 1)) rgba(0, 0, 0, 0.14);
}
.plate.is-studio2.is-card-round .plate-qr-wrap canvas {
  width: 70% !important;
  height: 70% !important;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* ── Кнопка «Додати ефект» у контекстному тулбарі ─────────────────── */
.plate-toolbar-head {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: none;
}

.plate-toolbar-fx {
  appearance: none;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.35;
  padding: 2px 9px;
  background: #fff;
  color: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

.plate-toolbar-fx:hover {
  background: #fff200;
  border-color: #fff200;
}

/* ── Вікно ефектів: плаваюче, без затемнення й розмиття ───────────── */
/* Затемнення немає навмисно: інакше листок «замилюється» і не видно,
   як саме лягає ефект. Кліки проходять крізь фон — листок живий. */
.studio-modal.is-float {
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.studio-modal-card.is-fx {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  width: min(520px, calc(100% - 24px));
  padding: 14px 16px 16px;
  border-radius: 4px;
  overflow: visible;
  pointer-events: auto;
  backdrop-filter: none;
  filter: none;
}

.studio-fx-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.studio-fx-head.is-dragging {
  cursor: grabbing;
}

.studio-fx-grip {
  flex: none;
  width: 46px;
  height: 12px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1.1px, transparent 1.3px);
  background-size: 7px 6px;
}

.studio-fx-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 242, 0, 0.75);
  background: #0d0d12;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.studio-fx-close:hover {
  background: #d81e5b;
  border-color: #d81e5b;
}

.studio-fx-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.studio-fx-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.studio-fx-tab {
  flex: 1 1 0;
  appearance: none;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 6px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  cursor: pointer;
}

.studio-fx-tab:hover {
  color: #fff;
  border-color: rgba(255, 242, 0, 0.5);
}

.studio-fx-tab.is-on {
  background: #fff200;
  border-color: #fff200;
  color: #0a0a0a;
}

.studio-fx-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.studio-fx-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  user-select: none;
}

.studio-fx-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.studio-fx-knob {
  position: relative;
  flex: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.15s ease;
}

.studio-fx-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.studio-fx-switch input:checked + .studio-fx-knob {
  background: #fff200;
}

.studio-fx-switch input:checked + .studio-fx-knob::after {
  transform: translateX(16px);
}

.studio-fx-switch-text {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.studio-fx-range {
  display: grid;
  grid-template-columns: 62px 1fr 34px;
  align-items: center;
  gap: 10px;
}

.studio-fx-name {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.studio-fx-val {
  font-size: 10px;
  text-align: right;
  color: #fff200;
  font-variant-numeric: tabular-nums;
}

/* Повзунок власний: клік по доріжці одразу ставить значення, а далі
   ручка йде за мишкою — так само якісно, як повзунок масштабу. */
.studio-fx-slide {
  position: relative;
  display: block;
  height: 18px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.studio-fx-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.studio-fx-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--p, 0) * 100%);
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: #fff200;
}

.studio-fx-handle {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff200;
  box-shadow: 0 0 0 3px rgba(255, 242, 0, 0.16);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.studio-fx-slide:hover .studio-fx-handle,
.studio-fx-slide.is-drag .studio-fx-handle {
  transform: scale(1.14);
  box-shadow: 0 0 0 5px rgba(255, 242, 0, 0.22);
}

.studio-fx-slide:focus-visible {
  outline: 1px solid rgba(255, 242, 0, 0.5);
  outline-offset: 3px;
}

.studio-fx-group {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* Слово «Колір» ліворуч, а навпроти — вся палітра плитками в один рядок. */
.studio-fx-colorline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.studio-fx-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Плитки трохи щільніше — вся палітра разам із хрестиком влазить в один
   рядок і нічого не переноситься на другий. */
.studio-fx-colors .plate-swatch {
  width: 14px;
  height: 14px;
}

.studio-fx-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.studio-fx-hex {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.studio-fx-hex input[type="color"] {
  width: 32px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  cursor: pointer;
}

/* Плитки підкладок */
.studio-fx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
  max-height: 268px;
  overflow-y: auto;
  padding-right: 3px;
}

/* Плитки форм контуру — їх лише десять, тож клітинки трохи вужчі. */
.studio-fx-tiles.is-forms {
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
}

.studio-fx-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  cursor: pointer;
}

.studio-fx-tile:hover {
  border-color: rgba(255, 242, 0, 0.55);
}

.studio-fx-tile.is-on {
  border-color: #fff200;
  background: rgba(255, 242, 0, 0.12);
}

.studio-fx-tile-name {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  line-height: 1.25;
}

.studio-fx-tile.is-on .studio-fx-tile-name {
  color: #fff200;
}

.studio-fx-view {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

.studio-fx-view > i {
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 2px;
}

/* ── Взірці десяти форм контуру ─────────────────────────────────────
   Темний квадрат і жовта обводка — форма мусить читатись із першого
   погляду, ще до того, як її вибрали. */
.studio-fx-view[class*="is-of-"] > i {
  position: relative;
  background: #101014;
  border-radius: 3px;
}

.studio-fx-view.is-of-solid > i {
  box-shadow: 0 0 0 2px #fff200;
}

.studio-fx-view.is-of-double > i {
  box-shadow: 0 0 0 1.5px #fff200, 0 0 0 4px #101014, 0 0 0 5.5px #fff200;
}

.studio-fx-view.is-of-glow > i {
  box-shadow: 0 0 10px 4px rgba(255, 242, 0, 0.75);
}

.studio-fx-view.is-of-soft > i {
  box-shadow: 0 0 0 2.5px rgba(255, 242, 0, 0.55);
  filter: blur(0.6px);
}

.studio-fx-view.is-of-halo > i {
  box-shadow: 0 0 0 1px #fff200, 0 0 8px 3px rgba(255, 242, 0, 0.55);
}

.studio-fx-view.is-of-offset > i {
  box-shadow: 4px 4px 0 1px #fff200;
}

.studio-fx-view.is-of-wave > i {
  border-radius: 46% 54% 58% 42% / 54% 46% 56% 44%;
  box-shadow: 0 0 0 2px #fff200;
}

.studio-fx-view.is-of-sketch > i {
  border-radius: 6px 3px 7px 2px;
  box-shadow: 0 0 0 2px #fff200;
  filter: blur(0.4px);
}

.studio-fx-view.is-of-dash > i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px dashed #fff200;
  border-radius: 3px;
}

.studio-fx-view.is-of-dots > i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px dotted #fff200;
  border-radius: 3px;
}

.studio-fx-view.is-none > i {
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.35);
}

.studio-fx-view.is-card > i {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.studio-fx-view.is-soft > i {
  border-radius: 9px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.5);
}

.studio-fx-view.is-lift > i {
  border-radius: 3px;
  box-shadow: 0 6px 11px rgba(0, 0, 0, 0.55);
}

.studio-fx-view.is-halo > i {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 0 5px #fff200, 0 0 14px 5px rgba(255, 242, 0, 0.5);
}

.studio-fx-view.is-glass > i {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
}

.studio-fx-view.is-accent > i {
  background: #fff200;
  box-shadow: 3px 3px 0 rgba(10, 10, 10, 0.85);
}

.studio-fx-view.is-duo > i {
  background: linear-gradient(135deg, #fff200 0 48%, #2e3192 48% 100%);
}

.studio-fx-view.is-neon > i {
  background: #0a0a0a;
  border: 1px solid #fff200;
  border-radius: 5px;
  box-shadow: 0 0 11px 2px rgba(255, 242, 0, 0.75);
}

.studio-fx-view.is-grid > i {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg, rgba(10, 10, 10, 0.3) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(10, 10, 10, 0.3) 0 1px, transparent 1px 5px);
}

.studio-fx-view.is-dots > i {
  background-color: #fff;
  background-image: radial-gradient(rgba(10, 10, 10, 0.35) 1px, transparent 1.3px);
  background-size: 5px 5px;
}

.studio-fx-view.is-corners > i {
  width: 26px;
  height: 26px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 0;
}

.studio-fx-view.is-corners::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-image:
    linear-gradient(#fff200, #fff200), linear-gradient(#fff200, #fff200),
    linear-gradient(#fff200, #fff200), linear-gradient(#fff200, #fff200),
    linear-gradient(#fff200, #fff200), linear-gradient(#fff200, #fff200),
    linear-gradient(#fff200, #fff200), linear-gradient(#fff200, #fff200);
  background-size: 9px 2px, 2px 9px, 9px 2px, 2px 9px, 9px 2px, 2px 9px, 9px 2px, 2px 9px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}

.studio-fx-view.is-long > i {
  border-radius: 3px;
  box-shadow: 3px 3px 0 #0a0a0a, 6px 6px 0 #fff200, 9px 9px 0 rgba(10, 10, 10, 0.4);
}

.studio-fx-view.is-band > i {
  transform: rotate(-8deg);
  box-shadow: 0 0 0 4px #fff200;
}

.studio-fx-view.is-stamp > i {
  background: rgba(255, 255, 255, 0.85);
  border: 2px dashed rgba(10, 10, 10, 0.8);
  border-radius: 4px;
  box-shadow: 2px 2px 0 #fff200;
}

.studio-fx-view.is-ticket > i {
  border: 1px dashed rgba(10, 10, 10, 0.6);
  border-radius: 4px;
  box-shadow: -4px 0 0 #fff200, 4px 0 0 #fff200;
}

.studio-fx-view.is-outline > i {
  background: none;
  border: 2px solid var(--accent, #fff200);
}

.studio-fx-view.is-inset > i {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.studio-fx-view.is-pill > i {
  width: 30px;
  height: 15px;
  border-radius: 999px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
}

.studio-fx-view.is-round > i {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff200;
}

/* ── Ефекти під обʼєктом ──────────────────────────────────────────────
   Тінь, контур і підкладка малюються на САМОМУ вмісті шару — на тексті,
   картинці та полотні коду ([data-fx-paint]), а не на обгортці. Обгортка
   лишається чистою, тож рамка виділення й кружечок обертання більше не
   отримують ні тіні, ні підкладки. */
.plate.is-studio2 [data-fx-paint].fx-on {
  filter: var(--l-fx-filter, none);
}

.plate.is-studio2 [data-fx-paint].is-fxcard {
  /* content-box: відступ підкладки нарощує рамку НАВКОЛО обʼєкта, а не
     зʼїдає сам обʼєкт (у темі все border-box, тож перекриваємо). */
  box-sizing: content-box;
  /* --fxcb-bgc окремо від --fxcb-bg: у підкладок, що малюють пляму
     градієнтом, заливка лишається прозорою. */
  background-color: var(--fxcb-bgc, var(--fxcb-bg, transparent));
  background-image: var(--fxcb-img, none);
  background-size: var(--fxcb-bgs, auto);
  background-position: var(--fxcb-bgp, 0 0);
  background-repeat: var(--fxcb-bgr, repeat);
  border: var(--fxcb-bd, 0);
  border-radius: var(--fxcb-r, 0);
  padding: var(--fxcb-p, 0);
  box-shadow: var(--fxcb-sh, none);
}

/* Підкладка під текстом: рамка = «Розмір» (типово 90 %) ширини ЛИСТКА, а не
   текстової колонки. Доти вона стискалась до довжини напису (fit-content) і
   виглядала ≈65 % листка. Ширину та зсув рахує fxCardBox() у відсотках
   колонки (--fxcb-w / --fxcb-ml): так усе лишається масштабним (зум, експорт,
   інший розмір листка), а зсув тримає рамку в межах аркуша.
   box-sizing: border-box — відступ підкладки не нарощує рамку понад ті 90 %.
   Ширина в темі задана з !important, тому перекриваємо її так само. */
.plate.is-studio2 .plate-copy [data-fx-paint].is-fxcard {
  width: var(--fxcb-w, 100%) !important;
  max-width: none !important;
  margin-left: var(--fxcb-ml, 0%) !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Ті самі ширина й зсув — і для вирівняних блоків: інакше auto-поля з
   попередніх правил центрували б рамку в колонці й вона вилазила б за неї. */
.plate.is-studio2 .plate-copy.is-ta-center [data-fx-paint].is-fxcard,
.plate.is-studio2 .plate-copy.is-ta-right [data-fx-paint].is-fxcard,
.plate.is-studio2 .plate-copy.is-ta-justify [data-fx-paint].is-fxcard {
  width: var(--fxcb-w, 100%) !important;
  max-width: none !important;
  margin-left: var(--fxcb-ml, 0%) !important;
  margin-right: 0 !important;
}

/* fx183: підкладка під картинкою, іконкою чи смайлом.
   Доти тут стояло саме лише display:block — і підкладка отримувала ширину
   на всю колонку аркуша, тобто була в кілька разів більша за саму картинку,
   а відступ мірявся в пікселях листка й на дрібній іконці зʼїдав її всю.
   Тепер підкладка живе на власній обгортці (.plate-emblem-card), а відступ
   заданий у cqw — у відсотках від ШИРИНИ самої картинки, бо обгортка шару
   оголошена контейнером. Тож та сама підкладка виглядає природно і на
   іконці 6 %, і на картинці 26 %: вона завжди навколо картинки, ніколи
   замість неї. */
.plate.is-studio2 .plate-emblem-wrap {
  container-type: inline-size;
}

.plate.is-studio2 .plate-emblem-card {
  display: block;
  width: 100%;
  line-height: 0;
}

.plate.is-studio2 .plate-emblem-card.is-fxcard {
  /* content-box: відступ нарощує підкладку НАВКОЛО картинки, а не стискає її. */
  box-sizing: content-box;
  background-color: var(--fxcb-bgc, var(--fxcb-bg, transparent));
  background-image: var(--fxcb-img, none);
  background-size: var(--fxcb-bgs, auto);
  background-position: var(--fxcb-bgp, 0 0);
  background-repeat: var(--fxcb-bgr, repeat);
  border: var(--fxcb-bd, 0);
  border-radius: var(--fxcb-r, 0);
  padding: var(--fxcb-p, 0);
  box-shadow: var(--fxcb-sh, none);
}

.plate.is-studio2 .plate-emblem-card > .plate-emblem {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ── Підпункти ефектів у панелі шарів ─────────────────────────────── */
.studio-fx-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0 14px;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  /* Рядок відкриває вікно ефектів — мусить виглядати клікабельним. */
  cursor: pointer;
}

.studio-fx-sub:hover {
  border-color: rgba(255, 242, 0, 0.45);
  border-left-color: var(--yellow);
  background: rgba(255, 242, 0, 0.1);
}

.studio-fx-sub.is-off:hover {
  opacity: 1;
}

.studio-fx-sub.is-on {
  border-left-color: var(--yellow);
  background: rgba(255, 242, 0, 0.06);
}

.studio-fx-sub.is-off {
  opacity: 0.6;
}

.studio-fx-sub-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfcfcf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-fx-sub-ico {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  color: #9a9a9a;
  border: 1px solid currentColor;
}

.studio-fx-sub.is-on .studio-fx-sub-ico {
  color: var(--yellow);
}

.studio-fx-sub-ico.is-shadow {
  border-radius: 50%;
  box-shadow: 2px 2px 0 -1px currentColor;
}

.studio-fx-sub-ico.is-outline {
  border-width: 2px;
  border-radius: 1px;
}

.studio-fx-sub-ico.is-card {
  background: currentColor;
}

.studio-fx-sub-del {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #cfcfcf;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.studio-fx-sub-del:hover {
  border-color: #ff5a5a;
  background: rgba(255, 90, 90, 0.12);
  color: #ff5a5a;
}

/* Малий перемикач у підпункті: видно, увімкнено ефект чи ні. */
.studio-fx-switch.is-mini {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  border: 0;
  gap: 6px;
}

.studio-fx-switch.is-mini .studio-fx-knob {
  width: 26px;
  height: 14px;
}

.studio-fx-switch.is-mini .studio-fx-knob::after {
  width: 10px;
  height: 10px;
}

.studio-fx-switch.is-mini input:checked + .studio-fx-knob::after {
  transform: translateX(12px);
}

.studio-fx-switch.is-mini .studio-fx-switch-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Напис у бічній панелі: ефекти стосуються виділеного обʼєкта. */
.studio-effects-hint {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8d8d;
}

/* ── «+ Ефект» під виділеним шаром ────────────────────────────────── */
.studio-fx-add {
  position: relative;
  margin: 5px 0 0 14px;
}

.studio-fx-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: transparent;
  color: #bdbdbd;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.studio-fx-add-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.studio-fx-add-menu {
  display: none;
}

.studio-fx-add:focus-within .studio-fx-add-menu {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border: 1px solid var(--line);
  background: #14141a;
}

.studio-fx-add-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: #d8d8d8;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.studio-fx-add-opt:last-child {
  border-bottom: 0;
}

.studio-fx-add-opt:hover {
  background: rgba(255, 242, 0, 0.12);
  color: var(--yellow);
}

/* Підпис обʼєкта живе в шапці вікна — праворуч від котка. У вмісті
   звільняється цілий рядок, а назва завжди перед очима.
   Селектор зі «.studio-modal-card» навмисно: загальне правило теми
   `.studio-modal-card p` має вищу специфічність і без цього перебило б
   і кегль, і відступи. */
.studio-modal-card .studio-fx-who {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 0 auto;
  max-width: 62%;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
  cursor: inherit;
}

.studio-modal-card .studio-fx-who em {
  font-style: normal;
  color: var(--yellow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-modal-card .studio-fx-who.is-off em {
  color: #7d7d7d;
}

/* ── Підкладок побільшало: плитки щільніше, список довший ─────────────
   Висоту списку тримаємо пропорційною екрана: на низьких ноутбуках
   воно все одно вміщається, і нижні повзунки не випадають за край. */
.studio-fx-tiles {
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  max-height: min(308px, 34vh);
}

/* Хрестик у рядку кольору: прибирає вибраний колір підкладки. */
.studio-fx-cdel {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
}

.studio-fx-cdel:hover {
  color: #0a0a0a;
  background: var(--yellow);
  border-color: var(--yellow);
}

/* ── Прев'ю нових підкладок у списку ───────────────────────────────── */
.studio-fx-view.is-plaster > i {
  width: 30px;
  height: 26px;
  background: linear-gradient(-30deg, #f4d3bb 0 44%, #d99a72 44% 58%, transparent 58% 100%);
  border: 1px solid rgba(10, 10, 10, 0.4);
  transform: rotate(-30deg);
}

.studio-fx-view.is-stripes > i {
  background: repeating-linear-gradient(45deg, #fff200 0 3px, #0a0a0a 3px 6px);
}

.studio-fx-view.is-beams > i {
  background: conic-gradient(from 0deg, #fff 0 22deg, #fff200 22deg 44deg, #fff 44deg 66deg, #2e3192 66deg 88deg, #fff 88deg 360deg);
}

.studio-fx-view.is-split > i {
  background: linear-gradient(90deg, #fff200 0 50%, #2e3192 50% 100%);
}

.studio-fx-view.is-tri > i {
  background: linear-gradient(118deg, #fff200 0 33%, #2e3192 33% 67%, #d81e5b 67% 100%);
}

.studio-fx-view.is-quad > i {
  background: conic-gradient(from 45deg, #fff200 0 90deg, #2e3192 90deg 180deg, #d81e5b 180deg 270deg, #0a0a0a 270deg 360deg);
}

.studio-fx-view.is-tape > i {
  width: 32px;
  height: 15px;
  background: linear-gradient(-22deg, transparent 0 10%, rgba(255, 255, 255, 0.7) 10% 38%, transparent 38% 62%, rgba(255, 242, 0, 0.6) 62% 90%, transparent 90% 100%);
  box-shadow: none;
}

.studio-fx-view.is-frame > i {
  background: #fff;
  border: 2px solid #fff200;
  border-radius: 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #fff200;
}

.studio-fx-view.is-arch > i {
  background: radial-gradient(130% 118% at 50% 6%, #2e3192 0 46%, #fff200 46% 100%);
  border-radius: 999px 999px 4px 4px;
}

.studio-fx-view.is-mesh > i {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(45deg, #2e3192 0 1px, transparent 1px 5px),
    repeating-linear-gradient(135deg, rgba(10, 10, 10, 0.4) 0 1px, transparent 1px 5px);
}

.studio-fx-view.is-stitch > i {
  background: #fff;
  border: 2px dashed #0a0a0a;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #0a0a0a;
}

.studio-fx-view.is-scan > i {
  background-color: #0a0a0a;
  background-image: repeating-linear-gradient(0deg, #fff200 0 1px, transparent 1px 4px);
}

.studio-fx-view.is-riso > i {
  background: #f4f1ea;
  border: 1px solid rgba(10, 10, 10, 0.35);
  box-shadow: -4px 4px 0 #fff200, 4px -4px 0 #d81e5b;
}

.studio-fx-view.is-glow > i {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff200 0 56%, #2e3192 56% 70%, transparent 76% 100%);
}

/* ── Преміум-набір: +30 підкладок ──────────────────────────────────── */
.studio-fx-view.is-prism > i {
  background: conic-gradient(from 0deg, #fff200 0 40deg, #2e3192 40deg 120deg, #d81e5b 120deg 200deg, #fff200 200deg 240deg, #2e3192 240deg 320deg, #d81e5b 320deg 360deg);
}

.studio-fx-view.is-aurora > i {
  background-color: #101018;
  background-image:
    radial-gradient(72% 92% at 14% 10%, #2e3192 0 56%, transparent 62%),
    radial-gradient(82% 92% at 86% 94%, #d81e5b 0 50%, transparent 58%);
}

.studio-fx-view.is-sunrise > i {
  background: linear-gradient(0deg, #fff200 0 32%, #ff6b35 32% 58%, #d81e5b 58% 100%);
}

.studio-fx-view.is-halftone > i {
  background-color: #fff;
  background-image:
    radial-gradient(#0a0a0a 1.2px, transparent 1.4px),
    radial-gradient(#0a0a0a 0.6px, transparent 0.8px);
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;
}

.studio-fx-view.is-carbon > i {
  background-color: #14141a;
  background-image:
    repeating-linear-gradient(45deg, #2d2d3a 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, #2d2d3a 0 2px, transparent 2px 4px);
}

.studio-fx-view.is-blueprint > i {
  background-color: #123a7a;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px 6px);
}

.studio-fx-view.is-ruled > i {
  background-color: #f8f6f1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(10, 10, 10, 0.55) 4px 5px);
}

.studio-fx-view.is-confetti > i {
  background-color: #fff;
  background-image:
    radial-gradient(2.2px 2.2px at 20% 30%, #fff200 99%, transparent),
    radial-gradient(2px 2px at 70% 65%, #2e3192 99%, transparent),
    radial-gradient(2.4px 2.4px at 45% 85%, #d81e5b 99%, transparent),
    radial-gradient(1.8px 1.8px at 85% 15%, #fff200 99%, transparent);
  background-size: 16px 16px;
}

.studio-fx-view.is-terrazzo > i {
  background-color: #f4f1ea;
  background-image:
    radial-gradient(3px 2px at 18% 26%, #2e3192 99%, transparent),
    radial-gradient(2px 3px at 68% 62%, #fff200 99%, transparent),
    radial-gradient(2.6px 2.2px at 42% 84%, #c97b63 99%, transparent);
  background-size: 20px 20px;
}

.studio-fx-view.is-glitch > i {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(0deg, #00d4ff 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #d81e5b 0 22%, transparent 22% 78%, #00d4ff 78% 100%);
}

.studio-fx-view.is-rgb > i {
  background: linear-gradient(90deg, #0a0a0a 0 25%, #e63946 25% 50%, #0f9d58 50% 75%, #2e3192 75% 100%);
}

.studio-fx-view.is-vhs > i {
  background-color: #12121a;
  background-image: repeating-linear-gradient(0deg, #37c8f5 0 1px, transparent 1px 3px);
}

.studio-fx-view.is-chrome > i {
  background: linear-gradient(115deg, #8b95a1 0 12%, #dfe3e8 12% 30%, #fff 30% 38%, #dfe3e8 38% 62%, #8b95a1 62% 76%, #dfe3e8 76% 100%);
}

.studio-fx-view.is-holo > i {
  background: linear-gradient(100deg, #37c8f5 0 14%, #f4f1ea 14% 30%, #b98cff 30% 46%, #f4f1ea 46% 62%, #7dffc8 62% 78%, #f4f1ea 78% 100%);
}

.studio-fx-view.is-led > i {
  background-color: #0a0a0a;
  background-image: radial-gradient(#fff200 1px, transparent 1.3px);
  background-size: 6px 6px;
}

.studio-fx-view.is-columns > i {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(to top, transparent 0 44%, #0a0a0a 44% 100%),
    repeating-linear-gradient(90deg, #fff200 0 4px, transparent 4px 9px);
}

.studio-fx-view.is-bricks > i {
  background-color: #f4f1ea;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(10, 10, 10, 0.35) 13px 14px),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(10, 10, 10, 0.35) 6px 7px);
}

.studio-fx-view.is-chevrons > i {
  background-color: #2e3192;
  background-image:
    linear-gradient(135deg, transparent 0 50%, #fff200 50% 100%),
    linear-gradient(45deg, transparent 0 50%, #fff200 50% 100%);
  background-size: 12px 12px;
}

.studio-fx-view.is-receipt > i {
  border-radius: 0;
  background-color: #fff;
  border-bottom: 2px dashed #0a0a0a;
  background-image: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(10, 10, 10, 0.55) 4px 5px);
}

.studio-fx-view.is-wave > i {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle at 50% 0, transparent 0 66%, #37c8f5 66% 78%, transparent 78%),
    radial-gradient(circle at 50% 100%, transparent 0 66%, #fff200 66% 78%, transparent 78%);
  background-size: 18px 9px;
}

.studio-fx-view.is-ripple > i {
  background-color: #fff;
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, #2e3192 4px 5px);
}

.studio-fx-view.is-target > i {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2e3192 0 18%, #fff200 18% 36%, #2e3192 36% 54%, #fff200 54% 72%, #2e3192 72% 100%);
}

.studio-fx-view.is-plaid > i {
  background-color: #1f3a5f;
  background-image:
    repeating-linear-gradient(0deg, #fff200 0 2px, transparent 2px 17px),
    repeating-linear-gradient(90deg, #fff200 0 2px, transparent 2px 17px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 5px, transparent 5px 17px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 5px, transparent 5px 17px);
}

.studio-fx-view.is-argyle > i {
  background-color: #f4f1ea;
  background-image:
    conic-gradient(from 45deg, #2e3192 0 25%, transparent 25% 75%, #2e3192 75% 100%),
    conic-gradient(from 225deg, #fff200 0 25%, transparent 25% 75%, #fff200 75% 100%);
  background-size: 13px 13px, 13px 13px;
  background-position: 0 0, 6.5px 6.5px;
}

.studio-fx-view.is-zigzag > i {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(45deg, #fff200 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, #fff200 0 2px, transparent 2px 6px);
}

.studio-fx-view.is-meander > i {
  background-color: #fff;
  border: 2px double #2e3192;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #2e3192;
}

.studio-fx-view.is-deco > i {
  border-radius: 0;
  background-color: #0a0a0a;
  background-image: repeating-conic-gradient(from 0deg at 50% 118%, #d4af37 0 5deg, transparent 5deg 10deg);
  border: 1px solid #fff200;
}

.studio-fx-view.is-bauhaus > i {
  background-color: #f4f1ea;
  background-image:
    radial-gradient(circle at 24% 26%, #e63946 0 13%, transparent 13.5%),
    radial-gradient(circle at 76% 58%, #2e3192 0 17%, transparent 17.5%),
    linear-gradient(0deg, #fff200 0 100%);
  background-size: 100% 100%, 100% 100%, 100% 26%;
  background-position: 0 0, 0 0, 0 100%;
  background-repeat: no-repeat;
}

.studio-fx-view.is-gloss > i {
  border-radius: 5px;
  background-color: #2e3192;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 55%);
}

.studio-fx-view.is-emboss > i {
  border-radius: 5px;
  background-color: #e9e9ef;
  box-shadow: -3px -3px 0 rgba(255, 255, 255, 0.95), 3px 3px 0 rgba(10, 10, 10, 0.22);
}

/* ── 20 чистих геометричних підкладок: мініатюри ─────────────────── */
.studio-fx-view.is-octa > i {
  background-color: #0f1117;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, #fff200 0 45deg, #37c8f5 45deg 90deg);
}

.studio-fx-view.is-nona > i {
  background-color: #101014;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, #e8e2d4 0 20deg, transparent 20deg 40deg);
}

.studio-fx-view.is-fan > i {
  background-color: #0c0c10;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, #d81e5b 0 12deg, transparent 12deg 24deg);
}

.studio-fx-view.is-wedge > i {
  background-image: conic-gradient(from 0deg at 50% 50%, #2e3192 0 90deg, #f2f2f2 90deg 180deg, #2e3192 180deg 270deg, #f2f2f2 270deg 360deg);
}

.studio-fx-view.is-lattice > i {
  background-color: #f7f4ee;
  background-image:
    repeating-linear-gradient(45deg, #2e3192 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, #2e3192 0 1px, transparent 1px 9px);
}

.studio-fx-view.is-triad > i {
  background-color: #0d0d0d;
  background-image:
    repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 11px),
    repeating-linear-gradient(60deg, #fff 0 1px, transparent 1px 11px),
    repeating-linear-gradient(120deg, #fff 0 1px, transparent 1px 11px);
}

.studio-fx-view.is-bars > i {
  background-image: repeating-linear-gradient(90deg, #fff200 0 5px, #2e3192 5px 10px);
}

.studio-fx-view.is-slant > i {
  background-color: #12100c;
  background-image: repeating-linear-gradient(30deg, #c9a227 0 2px, transparent 2px 9px);
}

.studio-fx-view.is-plus > i {
  background-color: #101014;
  background-image:
    linear-gradient(#37c8f5 0 100%, transparent 0),
    linear-gradient(90deg, #37c8f5 0 100%, transparent 0);
  background-size: 18% 100%, 100% 18%;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;
}

.studio-fx-view.is-gate > i {
  background-color: #14110c;
  background-image: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px #fff200;
}

.studio-fx-view.is-tworings > i {
  background-color: #0b0b0f;
  background-image: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #e8e2d4, inset 0 0 0 7px #c9a227;
}

.studio-fx-view.is-rings > i {
  background-color: #0d0d12;
  background-image: repeating-radial-gradient(circle at 50% 50%, #d81e5b 0 1px, transparent 1px 6px);
}

.studio-fx-view.is-arc > i {
  background-color: #f4efe4;
  background-image: radial-gradient(ellipse 130% 130% at 50% 108%, transparent 0 52%, #2e3192 52% 62%, transparent 62%);
}

.studio-fx-view.is-halves > i {
  background-color: #fff;
  background-image:
    radial-gradient(ellipse 50% 50% at 0% 50%, #2e3192 0 100%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 100% 50%, #fff200 0 100%, transparent 100%);
}

.studio-fx-view.is-dualtone > i {
  background-image: linear-gradient(90deg, #e8e2d4 0 50%, #d81e5b 50% 100%);
}

.studio-fx-view.is-corner > i {
  background-color: #f4efe4;
  background-image: linear-gradient(135deg, #2e3192 0 50%, transparent 50%);
}

.studio-fx-view.is-corner4 > i {
  background-color: #fdfcf8;
  background-image:
    linear-gradient(to bottom right, #2e3192 0 50%, transparent 50%),
    linear-gradient(to bottom left, #d81e5b 0 50%, transparent 50%),
    linear-gradient(to top right, #d81e5b 0 50%, transparent 50%),
    linear-gradient(to top left, #2e3192 0 50%, transparent 50%);
  background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}

.studio-fx-view.is-checker > i {
  background-image: conic-gradient(#14110c 0 25%, #f2f2f2 25% 50%, #14110c 50% 75%, #f2f2f2 75% 100%);
  background-size: 9px 9px;
}

.studio-fx-view.is-pinstripe > i {
  background-color: #f7f4ee;
  background-image: repeating-linear-gradient(45deg, #2e3192 0 2px, transparent 2px 8px, #fff200 8px 10px, transparent 10px 16px);
}

.studio-fx-view.is-rays > i {
  background-color: #0b0b0f;
  background-image: repeating-conic-gradient(from 200deg at 0% 100%, #fff200 0 4deg, transparent 4deg 13deg);
}

/* ── Ще 50 підкладок: мініатюри ───────────────────────────────────────
   Малюнок мініатюри повторює повнорозмірну підкладку з відповідного
   запису в студії, лише в дрібному масштабі. */

/* Геометрія */
.studio-fx-view.is-hexa > i {
  background-color: #fff;
  background-image:
    linear-gradient(30deg, #2e3192 12%, transparent 12.5% 87%, #2e3192 87.5%),
    linear-gradient(150deg, #2e3192 12%, transparent 12.5% 87%, #2e3192 87.5%),
    linear-gradient(60deg, #c7d0ea 25%, transparent 25.5% 75%, #c7d0ea 75%);
  background-size: 16px 28px, 16px 28px, 16px 28px;
  background-position: 0 0, 0 0, 8px 14px;
}

.studio-fx-view.is-trihex > i {
  background-color: #f4f1ea;
  background-image:
    linear-gradient(45deg, #2e3192 25%, transparent 25% 75%, #2e3192 75%),
    linear-gradient(45deg, #fff200 25%, transparent 25% 75%, #fff200 75%);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
}

.studio-fx-view.is-rhombus > i {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(45deg, #fff200 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, #2e3192 0 1px, transparent 1px 12px);
}

.studio-fx-view.is-pinwheel > i {
  background-color: #fff;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, #2e3192 0 45deg, transparent 45deg 90deg, #d81e5b 90deg 135deg, transparent 135deg 360deg);
  background-size: 14px 14px;
}

.studio-fx-view.is-mosaic > i {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 7px, #2e3192 7px 8px),
    repeating-linear-gradient(0deg, transparent 0 7px, #2e3192 7px 8px),
    radial-gradient(#fff200 1.4px, transparent 1.8px);
  background-size: 8px 8px, 8px 8px, 8px 8px;
  background-position: 0 0, 0 0, 4px 4px;
}

.studio-fx-view.is-isogrid > i {
  background-color: #0f1420;
  background-image:
    repeating-linear-gradient(60deg, #2e3192 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-60deg, #2e3192 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, #37c8f5 0 1px, transparent 1px 9px);
}

.studio-fx-view.is-diamond > i {
  background-color: #fff;
  background-image: conic-gradient(from 45deg at 50% 50%, #fff200 0 25%, transparent 25% 50%, #2e3192 50% 75%, transparent 75% 100%);
  background-size: 13px 13px;
}

.studio-fx-view.is-weave > i {
  background-color: #14141a;
  background-image:
    repeating-linear-gradient(0deg, #2d2d3a 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #5c6770 0 3px, transparent 3px 6px);
}

.studio-fx-view.is-basket > i {
  background-color: #c97b63;
  background-image:
    repeating-linear-gradient(90deg, #8c2f13 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, #f4d3bb 0 4px, transparent 4px 8px);
  background-size: 8px 8px, 8px 8px;
}

.studio-fx-view.is-scallop > i {
  background-color: #2e3192;
  background-image:
    radial-gradient(circle at 50% 0%, transparent 0 58%, #7dffc8 58% 66%, transparent 66%),
    radial-gradient(circle at 0% 100%, transparent 0 58%, #37c8f5 58% 66%, transparent 66%);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* Техніка */
.studio-fx-view.is-circuit > i {
  background-color: #0b2b18;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, #2fbf71 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 5px, #2fbf71 5px 6px),
    radial-gradient(#d4af37 1.4px, transparent 1.8px);
  background-size: 12px 12px, 12px 12px, 12px 12px;
  background-position: 0 0, 0 0, 6px 6px;
}

.studio-fx-view.is-topo > i {
  background-color: #f4f1ea;
  background-image:
    repeating-radial-gradient(circle at 28% 22%, transparent 0 4px, #c97b63 4px 5px),
    repeating-radial-gradient(circle at 76% 72%, transparent 0 6px, #2e3192 6px 7px);
}

.studio-fx-view.is-isobar > i {
  background-color: #0f1420;
  background-image: repeating-radial-gradient(ellipse 40% 30% at 50% 42%, transparent 0 7px, #37c8f5 7px 8px);
}

.studio-fx-view.is-barcode > i {
  background-color: #fff;
  background-image: repeating-linear-gradient(90deg, #0a0a0a 0 1px, transparent 1px 3px, #0a0a0a 3px 4px, transparent 4px 6px, #0a0a0a 6px 8px, transparent 8px 11px);
  border: 1px solid rgba(10, 10, 10, 0.2);
}

.studio-fx-view.is-matrix > i {
  background-color: #04100a;
  background-image:
    repeating-linear-gradient(90deg, #2fbf71 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, transparent 0 2px, #7dffc8 2px 3px, transparent 3px 5px);
}

.studio-fx-view.is-equalizer > i {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(90deg, #fff200 0 2px, transparent 2px 5px),
    linear-gradient(0deg, transparent 0 28%, #d81e5b 28% 32%, transparent 32% 60%, #d81e5b 60% 64%, transparent 64% 82%, #d81e5b 82% 86%, transparent 86% 100%);
}

.studio-fx-view.is-spectro > i {
  background-color: #0a0a0a;
  background-image: linear-gradient(90deg, transparent 0 8%, #37c8f5 8% 20%, transparent 20% 28%, #7dffc8 28% 44%, transparent 44% 52%, #b98cff 52% 68%, transparent 68% 76%, #37c8f5 76% 88%, transparent 88% 100%);
  background-size: 26px 62%;
  background-position: 0 19%;
  background-repeat: repeat-x;
}

.studio-fx-view.is-pulse > i {
  background-color: #fff;
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, #d81e5b 3px 4px, transparent 4px 6px, #d81e5b 6px 8px, transparent 8px 13px);
}

.studio-fx-view.is-seismic > i {
  background-color: #14141a;
  background-image:
    repeating-linear-gradient(45deg, #fff200 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, #37c8f5 0 1px, transparent 1px 8px);
}

.studio-fx-view.is-ticker > i {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, #0a0a0a 3px 4px),
    repeating-linear-gradient(90deg, #fff200 0 5px, transparent 5px 10px);
}

/* Космос і світло */
.studio-fx-view.is-galaxy > i {
  background-color: #05030f;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, #b98cff 0 14deg, transparent 14deg 44deg),
    radial-gradient(60% 60% at 50% 50%, #37c8f5 0 22%, transparent 52%);
}

.studio-fx-view.is-nebula > i {
  background-color: #070512;
  background-image:
    repeating-conic-gradient(from 40deg at 50% 50%, transparent 0 18deg, #d81e5b 18deg 24deg, transparent 24deg 60deg),
    radial-gradient(70% 70% at 30% 30%, #2e3192 0 32%, transparent 66%);
}

.studio-fx-view.is-stardust > i {
  background-color: #05030f;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff 99%, transparent),
    radial-gradient(0.9px 0.9px at 70% 12%, #fff200 99%, transparent),
    radial-gradient(1.5px 1.5px at 46% 78%, #fff 99%, transparent),
    radial-gradient(1px 1px at 86% 62%, #fff200 99%, transparent);
  background-size: 14px 14px;
}

.studio-fx-view.is-eclipse > i {
  border-radius: 50%;
  background-color: #05030f;
  background-image: radial-gradient(circle at 50% 46%, transparent 0 34%, #fff200 34% 38%, transparent 38% 45%, #ff6b35 45% 47%, transparent 47% 100%);
}

.studio-fx-view.is-orbit > i {
  background-color: #070512;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, #37c8f5 5px 6px),
    radial-gradient(circle at 72% 26%, #fff200 2px, transparent 2.6px);
}

.studio-fx-view.is-sunburst > i {
  background-color: #fff200;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, #ff6b35 0 6deg, transparent 6deg 18deg),
    radial-gradient(circle at 50% 50%, #fff 0 16%, transparent 42%);
}

.studio-fx-view.is-vortex > i {
  border-radius: 50%;
  background-color: #0f1420;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, #b98cff 0 18deg, transparent 18deg 36deg),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, #37c8f5 4px 5px);
}

.studio-fx-view.is-spiral > i {
  border-radius: 50%;
  background-color: #fff;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, #2e3192 2px 4px),
    conic-gradient(from 0deg at 50% 50%, transparent 0 180deg, #d81e5b 180deg 360deg);
}

.studio-fx-view.is-plasma > i {
  background-color: #12001f;
  background-image:
    radial-gradient(80% 80% at 28% 72%, #d81e5b 0 34%, transparent 68%),
    radial-gradient(70% 70% at 74% 28%, #b98cff 0 28%, transparent 64%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.06) 3px 4px);
}

.studio-fx-view.is-lava > i {
  background-color: #1a0606;
  background-image:
    repeating-linear-gradient(60deg, #ff6b35 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-40deg, #fff200 0 1px, transparent 1px 12px),
    radial-gradient(60% 40% at 50% 100%, #8c2f13 0 50%, transparent 82%);
}

/* Матеріали */
.studio-fx-view.is-marble > i {
  background-color: #f4f1ea;
  background-image: repeating-linear-gradient(115deg, transparent 0 5px, #5c6770 5px 6px, transparent 6px 13px, #c97b63 13px 14px, transparent 14px 26px);
}

.studio-fx-view.is-granite > i {
  background-color: #5c6770;
  background-image:
    radial-gradient(#0a0a0a 0.8px, transparent 1.1px),
    radial-gradient(#f4f1ea 0.6px, transparent 0.9px);
  background-size: 5px 5px, 4px 4px;
  background-position: 0 0, 2px 3px;
}

.studio-fx-view.is-linen > i {
  background-color: #f4f1ea;
  background-image:
    repeating-linear-gradient(0deg, #c97b63 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #5c6770 0 1px, transparent 1px 3px);
}

.studio-fx-view.is-denim > i {
  background-color: #1f3a5f;
  background-image:
    repeating-linear-gradient(45deg, #7d93b8 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, #0f2440 0 1px, transparent 1px 4px);
}

.studio-fx-view.is-silk > i {
  background-color: #f4f1ea;
  background-image:
    repeating-linear-gradient(120deg, transparent 0 5px, #d4af37 5px 7px, transparent 7px 14px),
    linear-gradient(120deg, transparent 0 42%, #c97b63 42% 58%, transparent 58% 100%);
}

.studio-fx-view.is-leather > i {
  background-color: #4a2c19;
  background-image:
    radial-gradient(#2b1608 0.5px, transparent 0.9px),
    radial-gradient(#8c5a33 0.4px, transparent 0.8px);
  background-size: 3px 3px, 3px 3px;
  background-position: 0 0, 2px 1px;
}

.studio-fx-view.is-kraft > i {
  background-color: #d9b382;
  background-image:
    repeating-linear-gradient(75deg, transparent 0 3px, #a9764a 3px 4px),
    repeating-linear-gradient(-15deg, transparent 0 4px, #f0dcc2 4px 5px);
}

.studio-fx-view.is-terracotta > i {
  background-color: #c97b63;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 8px, #8c2f13 8px 9px),
    repeating-linear-gradient(0deg, transparent 0 8px, #8c2f13 8px 9px),
    radial-gradient(#f4d3bb 0.8px, transparent 1.1px);
  background-size: 9px 9px, 9px 9px, 9px 9px;
  background-position: 0 0, 0 0, 4px 4px;
}

.studio-fx-view.is-concrete > i {
  background-color: #b9bcc2;
  background-image:
    radial-gradient(#6e737b 0.8px, transparent 1.1px),
    radial-gradient(#e4e6ea 0.6px, transparent 0.9px);
  background-size: 6px 6px, 7px 7px;
  background-position: 0 0, 3px 4px;
}

.studio-fx-view.is-rust > i {
  background-color: #8c2f13;
  background-image:
    repeating-linear-gradient(35deg, transparent 0 2px, #c97b63 2px 4px, transparent 4px 8px),
    radial-gradient(60% 50% at 30% 70%, #3a1a0a 0 34%, transparent 78%);
}

/* Принти й настрій */
.studio-fx-view.is-bubbles > i {
  background-color: #0f1420;
  background-image:
    radial-gradient(circle at 32% 32%, transparent 0 28%, #37c8f5 28% 32%, transparent 32%),
    radial-gradient(circle at 70% 66%, transparent 0 20%, #7dffc8 20% 24%, transparent 24%);
  background-size: 17px 17px, 14px 14px;
  background-position: 0 0, 6px 5px;
}

.studio-fx-view.is-droplets > i {
  background-color: #e8f4ff;
  background-image:
    radial-gradient(#37c8f5 1.2px, transparent 1.6px),
    radial-gradient(#2e3192 0.9px, transparent 1.3px);
  background-size: 9px 9px, 11px 11px;
  background-position: 0 0, 4px 5px;
}

.studio-fx-view.is-snowfall > i {
  background-color: #dfe9f5;
  background-image:
    radial-gradient(1.3px 1.3px at 25% 40%, #fff 99%, transparent),
    radial-gradient(1px 1px at 68% 22%, #7d93b8 99%, transparent),
    radial-gradient(1.2px 1.2px at 45% 82%, #fff 99%, transparent);
  background-size: 13px 13px;
}

.studio-fx-view.is-frost > i {
  background-color: #eaf4ff;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, #37c8f5 0 4deg, transparent 4deg 30deg),
    repeating-conic-gradient(from 15deg at 50% 50%, #2e3192 0 2deg, transparent 2deg 30deg);
  border: 1px solid rgba(46, 49, 146, 0.2);
}

.studio-fx-view.is-zen > i {
  background-color: #e9dcc3;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, #a9764a 4px 5px),
    repeating-linear-gradient(90deg, #6e737b 0 1px, transparent 1px 5px);
}

.studio-fx-view.is-dunes > i {
  background-color: #c97b63;
  background-image:
    radial-gradient(circle at 0% 100%, transparent 0 58%, #8c2f13 58% 66%, transparent 66%),
    radial-gradient(circle at 100% 100%, transparent 0 50%, #f4d3bb 50% 58%, transparent 58%);
  background-size: 22px 13px, 22px 13px;
}

.studio-fx-view.is-vinyl > i {
  border-radius: 50%;
  background-color: #0a0a0a;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, #2d2d3a 2px 3px),
    radial-gradient(circle at 50% 50%, #fff200 0 9%, transparent 10%);
}

.studio-fx-view.is-pixel > i {
  background-color: #fff;
  background-image: conic-gradient(from 90deg at 50% 50%, #2e3192 0 25%, #fff200 25% 50%, #2e3192 50% 75%, #fff200 75% 100%);
  background-size: 5px 5px;
  border-radius: 2px;
}

.studio-fx-view.is-streamers > i {
  background-color: #05030f;
  background-image: repeating-linear-gradient(20deg, transparent 0 4px, #d81e5b 4px 6px, transparent 6px 13px, #37c8f5 13px 15px, transparent 15px 22px, #fff200 22px 24px, transparent 24px 31px);
}

.studio-fx-view.is-camo > i {
  background-color: #4a5d3a;
  background-image:
    radial-gradient(40% 40% at 26% 30%, #2f3d24 0 60%, transparent 62%),
    radial-gradient(45% 45% at 72% 66%, #8c9a6b 0 60%, transparent 62%),
    radial-gradient(36% 36% at 52% 18%, #c97b63 0 60%, transparent 62%);
  background-size: 29px 29px, 35px 35px, 26px 26px;
  background-position: 0 0, 12px 15px, 5px 23px;
}

/* ── Рядок кольору підкладки ──────────────────────────────────────────
   Напис завжди один — «Колір». Далі по прямокутнику на КОЖЕН колір
   малюнка (скільки кольорів — стільки прямокутників), а праворуч
   палітра. Ніяких «Колір 1», «Колір 2» окремими рядками і ніякого
   різноколірного круга. Активний прямокутник обведений жовтим. */
.studio-fx-colorline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-fx-colorline .studio-fx-group {
  flex: none;
  min-width: 34px;
}

.studio-fx-colorline .studio-fx-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.studio-fx-chips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.studio-fx-chip {
  position: relative;
  flex: none;
  display: block;
  width: 28px;
  height: 20px;
  padding: 0;
  background: var(--chip, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}

.studio-fx-chip.is-on {
  border-color: #fff200;
  box-shadow: 0 0 0 1px #fff200;
}

/* Палітра завжди йде рівним рядком під прямокутниками: так вона ніколи
   не рветься навпіл і хрестик теж ніколи не лишається сам у рядку. */
.studio-fx-swatches {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

/* Три класи в селекторі навмисно: інакше ширше правило вище перебило б. */
.studio-fx-colors .studio-fx-swatches .plate-swatch {
  width: 14px;
  height: 14px;
}

/* ── Смайл у кілька кольорів: квадрати кольорів + «+» ─────────────────
   Кожен квадрат додає свою фарбу в градієнт (як у багатоколірних
   підкладках). Другий клік по квадрату прибирає цей колір. */
.plate-toolbar .plate-scale.is-tint .plate-scale-row {
  gap: 5px;
}

.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip.is-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #d8d8d8;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  cursor: pointer;
}

.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip.is-plus:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

/* ── «Під стиль підкладки»: квадрат, ліва половина — колір підкладки ──── */
.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip.is-fit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fit, #ffd400) 0 50%, rgba(255, 255, 255, 0.14) 50% 100%);
}

.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip.is-fit:hover {
  border-color: var(--yellow);
}

.plate-toolbar .plate-scale.is-tint .plate-toolbar-chip.is-fit > i { display: none; }

/* ── Презентаційні блоки акцентів: 3 рядки + «Більше…» ───────────────── */
.studio-accent-base {
  display: block;
  margin-bottom: 10px;
}

.studio-accent-block + .studio-accent-block {
  margin-top: 12px;
}

.studio-accent-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-accent-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}

/* Кнопка «Більше…» — синя, текст білий, стоїть у кінці третього рядка. */
.studio-accent-base .studio-accent-cell.is-more {
  grid-column: span 2;
  aspect-ratio: auto;
  min-height: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #2196f3;
  border: 1px solid #2196f3;
  border-style: solid;
}

.studio-accent-base .studio-accent-cell.is-more:hover {
  color: #fff;
  background: #1e88e5;
  border-color: #1e88e5;
}

/* ── Колекція: дві вкладки — кольорові та монохромні ─────────────────── */
.studio-icon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.studio-icon-tab {
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.studio-icon-tab:hover {
  border-color: var(--yellow);
}

.studio-icon-tab.is-on {
  color: #fff;
  background: #2196f3;
  border-color: #2196f3;
}

@media (max-width: 640px) {
  .studio-accent-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}




/* ══════════════════════════════════════════════════════════════════
   STUDIO 2 — «ГРАНЬ»
   Третя хвиля оформлення: кнопка «Випадковий дизайн» без смикання,
   безпечні підкладки QR і вишукана креслярська геометрія інтерфейсу
   (кутики-засічки, ромб-знак, жовтий хребет на активному стані).
   Гама сайту: #fff200 / #2e3192 / #0f0f14.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Кнопка «Випадковий дизайн» не смикається ──────────────────── */
/* Натискання більше не зсуває кнопку: реакція — лише грань і світло. */
.studio-btn.is-dice:active {
  transform: none;
  filter: brightness(0.94) drop-shadow(0 4px 10px rgba(46, 49, 146, 0.5));
}

/* Підпис підсвічується БЕЗ зміни трекінгу — інакше кнопка змінює
   ширину, і вся панель смикається на кожному натисканні. */
.studio-btn.is-dice.is-rolling .studio-random-label {
  animation: studio2-dice-glow 0.55s ease-out 1;
}

@keyframes studio2-dice-glow {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

/* Листок перемальовується мʼяким проявом, без стрибка вгору й нахилу. */
.studio-board.is-swap {
  animation: studio2-soft-swap 0.34s ease both;
}

@keyframes studio2-soft-swap {
  0% { opacity: 0.5; transform: none; }
  100% { opacity: 1; transform: none; }
}

/* ── 2. Підкладки QR: пад завжди росте НАЗОВНІ від коду ───────────── */
/* box-sizing: content-box — значення «Розмір QR» задає сам код, а
   рамка/відступ підкладки додаються зовні. Раніше подушка зʼїдала
   площу коду, а круглий пад (70% діаметра = межа вписаного квадрата)
   зрізав кутові модулі QR — код ставав нерозпізнаваним. */
.plate.is-studio2 .plate-qr-wrap {
  box-sizing: content-box;
}

/* Круг: код зменшено до безпечних 62% діаметра (квадрат під кутом
   вписується у 70.7%), а обрізання знято зовсім. */
.plate.is-studio2.is-card-round .plate-qr-wrap {
  overflow: visible;
  padding: 0;
}

.plate.is-studio2.is-card-round .plate-qr-wrap canvas {
  width: 62% !important;
  height: 62% !important;
  max-width: 62%;
  max-height: 62%;
}

/* ── 3. Спільний словник інтерфейсу: засічки по кутах ─────────────── */
.studio-shell {
  --tick: rgba(255, 242, 0, 0.62);
  --tick-hot: #fff200;
}

/* ── 3.1 Кнопки ───────────────────────────────────────────────────── */
.studio-btn {
  border-radius: 0;
  background-image:
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position: left top, left top, right bottom, right bottom;
  transition: border-color 0.16s ease, color 0.16s ease, filter 0.16s ease;
}

.studio-btn:hover {
  --tick: var(--tick-hot);
  border-color: var(--yellow);
  filter: brightness(1.07);
}

.studio-btn.is-danger:hover,
.studio-btn.is-danger:focus-visible {
  filter: none;
}

/* ── 3.2 Плитки (ефекти, акценти, іконки) ─────────────────────────── */
.studio-fx-tile,
.studio-icon-cell,
.studio-accent-cell {
  --tick: rgba(255, 242, 0, 0.5);
  border-radius: 0;
  background-image:
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px;
  background-position: left top, left top, right bottom, right bottom;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    box-shadow 0.16s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.studio-fx-tile:hover,
.studio-icon-cell:hover,
.studio-accent-cell:hover {
  --tick: var(--tick-hot);
  background-color: rgba(255, 242, 0, 0.1);
  border-color: rgba(255, 242, 0, 0.55);
  transform: translateY(-1px);
}

.studio-fx-tile.is-on,
.studio-icon-cell.is-on,
.studio-accent-cell.is-on {
  --tick: var(--tick-hot);
  border-color: var(--yellow);
  background-color: rgba(255, 242, 0, 0.16);
  box-shadow: inset 2px 0 0 var(--yellow);
}

/* ── 3.3 Плавальна панель над листком ─────────────────────────────── */
.plate-toolbar {
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 242, 0, 0.06), transparent 42%),
    linear-gradient(180deg, #16171f, #0d0d12);
}

.plate-toolbar-group {
  border-radius: 0;
  background-image:
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 7px 1px, 1px 7px;
  background-position: left top, right bottom;
}

.plate-tool-btn {
  letter-spacing: 0.02em;
  transition: background 0.14s ease, color 0.14s ease;
}

.plate-tool-btn:hover:not(:disabled) {
  background: rgba(46, 49, 146, 0.75);
  box-shadow: inset 0 -2px 0 var(--yellow);
}

.plate-tool-btn.is-on {
  background: var(--yellow);
  color: #0a0a0a;
  box-shadow: inset 0 -2px 0 #2e3192;
}

.plate-toolbar-marks .studio-tb-mark {
  border-radius: 0;
}

/* ── 3.4 Шари ─────────────────────────────────────────────────────── */
.studio-layer {
  background-image:
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 7px 1px, 1px 7px;
  background-position: left top, right bottom;
}

.studio-layer:hover {
  --tick: var(--tick-hot);
}

.studio-layer.is-on {
  box-shadow: inset 2px 0 0 var(--yellow), 0 0 14px rgba(255, 242, 0, 0.14);
}

.studio-layer.is-grabbed {
  box-shadow: inset 2px 0 0 #4a4ee0, inset 0 0 0 1px rgba(46, 49, 146, 0.6);
}

.studio-layer-num {
  border-radius: 0;
}

.studio-layer-btn:hover:not(:disabled) {
  box-shadow: inset 0 -2px 0 var(--yellow);
}

/* ── 3.5 Палітри (лише стани, щоб не збити смужку кольору) ────────── */
.studio-palette {
  border-radius: 0;
}

.studio-palette:hover {
  border-color: rgba(255, 242, 0, 0.5);
}

.studio-palette.is-on {
  box-shadow: inset 2px 0 0 var(--yellow), 0 0 0 1px rgba(255, 242, 0, 0.3) inset;
}

.plate-swatch {
  border-radius: 0;
}

/* ── 3.6 Панелі, вікна, заголовки розділів ────────────────────────── */
.studio-layers-panel {
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(255, 242, 0, 0.55), rgba(46, 49, 146, 0.4) 45%, transparent 85%),
    linear-gradient(180deg, rgba(46, 49, 146, 0.22), transparent 45%);
  background-repeat: no-repeat;
  background-size: 100% 1px, auto;
  background-position: left top, left top;
}

.studio-magic-bar {
  background-image:
    linear-gradient(90deg, rgba(46, 49, 146, 0.5), rgba(255, 242, 0, 0.45) 50%, transparent 90%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%);
  background-repeat: no-repeat;
  background-size: 100% 1px, auto;
  background-position: left top, left top;
}

.studio-modal-card {
  border-radius: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 242, 0, 0.6), rgba(46, 49, 146, 0.45) 48%, transparent 88%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: left top;
}

/* Знак перед заголовком розділу: вісім різнокольорових ліній — «веселка»,
   але навмисно перетасована: кольори йдуть у довільному порядку, а не
   веселковим градієнтом. Лінії довгі (16 × 10) — як у справжнього прапора.
   У розділу «Не змінювати:» знака немає — там він зайвий. */
.studio-layers-kicker::before,
.studio-rail-kicker::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
  background-image: linear-gradient(180deg,
    #37c8f5 0 0.95px, transparent 0.95px 1.25px,
    #e63946 1.25px 2.2px, transparent 2.2px 2.5px,
    #fff200 2.5px 3.45px, transparent 3.45px 3.75px,
    #b98cff 3.75px 4.7px, transparent 4.7px 5px,
    #0f9d58 5px 5.95px, transparent 5.95px 6.25px,
    #2e3192 6.25px 7.2px, transparent 7.2px 7.5px,
    #ff6b35 7.5px 8.45px, transparent 8.45px 8.75px,
    #d81e5b 8.75px 9.7px, transparent 9.7px 10px);
}

/* Дуже стриманий «подих» світла в панелі шарів — ледь помітний. */
.studio-layers-panel::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  height: 120px;
  top: -140px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(255, 242, 0, 0.09),
    transparent 70%
  );
  animation: studio2-panel-drift 11s ease-in-out infinite;
}

@keyframes studio2-panel-drift {
  0%, 100% { top: -140px; opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  100% { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-layers-panel::before { animation: none; opacity: 0; }
  .studio-fx-tile, .studio-icon-cell, .studio-accent-cell { transition: none; }
  .studio-fx-tile:hover, .studio-icon-cell:hover, .studio-accent-cell:hover { transform: none; }
  .studio-board.is-swap { animation: none; }
  .studio-btn.is-dice.is-rolling .studio-random-label { animation: none; }
}
/* ── fx42: підкладка коду більше не обрізає сам код ──────────────────────
   Підкладка (біла «картка», «коло», «капсула» тощо) малюється на тому ж
   полотні, що й код, тож її радіус зрізав кути коду — саме там кутові
   маркери. Круглі підкладки потребують відступу щонайменше 11 % від
   розміру коду, щоб код цілком лежав усередині кола; ставимо 18 % із
   запасом (відступ масштабується разом із «Розміром» підкладки). */
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-round,
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-glow,
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-target,
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-eclipse,
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-vortex,
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-spiral,
.plate.is-studio2 .plate-qr-wrap canvas.is-fxcard.is-card-pill {
  /* fx65: conic accents/washes replaced with SVG mask (no aliasing). */
  padding: max(var(--fxcb-p, 0px), 22%) !important;
}

/* ── fx44: у панелі шарів більше немає смуги прокрутки ──────────────────
   Панель має overflow-y: auto, тож щойно шарів ставало більше за висоту,
   праворуч вискакувала стандартна світла смуга — і разом із нею стискався
   вміст. Смугу ховаємо повністю (сама прокрутка колесом лишається). */
.studio-layers-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.studio-layers-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ── fx47: «Ваш Колір» — три кольорові прямокутники на самому початку
   розділу «Дизайн шаблону». Працюють так само, як підкладка в ефектах чи
   клітинки з іконками: тиснеш прямокутник — відкривається системна палітра. */
.studio-mycolor {
  margin-bottom: 12px;
}

.studio-mycolor-title {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.studio-mycolor-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.studio-mycolor-chip {
  position: relative;
  display: block;
  height: 42px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.studio-mycolor-chip > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.studio-mycolor-chip input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* Клік по прямокутнику має перехопити скрипт і відкрити уніфіковану
     палітру сайту — системне вікно <input type="color"> тут не потрібне. */
  pointer-events: none;
}

.studio-mycolor-chip input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.studio-mycolor-chip input[type="color"]::-webkit-color-swatch {
  border: 0;
}

.studio-mycolor-chip:hover {
  border-color: rgba(255, 242, 0, 0.75);
}

.studio-mycolor-chip:focus-within {
  border-color: var(--yellow);
  box-shadow: inset 2px 0 0 var(--yellow);
}

.studio-mycolor-chip:focus-visible {
  outline: 0;
  border-color: var(--yellow);
  box-shadow: inset 2px 0 0 var(--yellow), 0 0 0 1px rgba(255, 242, 0, 0.35);
}

@media (max-width: 640px) {
  .studio-mycolor-row { gap: 4px; }
  .studio-mycolor-chip { height: 36px; }
}

/* ── fx49–fx52: підсказка над сіткою іконок і смайлів ────────────────
   Дрібним шрифтом, перший рядок — по ширині блока (як абзац у газеті),
   останній короткий рядок притискаємо до лівого краю — так само, як
   виглядає звичайний текст у макеті. */
.studio-icons-note {
  margin: 0 0 10px;
  padding: 0 1px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--mute, #9a9a9a);
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: auto;
}

/* ── fx53: бібліотека контурів — тепер 21 форма ──────────────────────
   Плиток стало більше ніж удвічі, тож сітку робимо трохи щільнішою, а
   висоту списку — вищою, щоб більшість форм було видно без прокрутки.
   Кожна плитка — тільки CSS-натяк на характер контуру: справжня форма
   малюється SVG-фільтром (див. fxOutlineParts у studio-app.js). */
.studio-fx-tiles.is-forms {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  max-height: min(360px, 42vh);
}
.studio-fx-view.is-of-twin > i { box-shadow: 0 0 0 1px #fff200, 0 0 0 2.5px #101014, 0 0 0 3.5px #fff200; }
.studio-fx-view.is-of-hair > i { width: 15px; height: 15px; box-shadow: 0 0 0 1px #fff200; }
.studio-fx-view.is-of-inner > i { box-shadow: inset 0 0 0 2px #fff200; }
.studio-fx-view.is-of-neon > i { box-shadow: 0 0 0 1px #fff200, 0 0 6px 2px rgba(255,242,0,.85), 0 0 16px 7px rgba(255,242,0,.4); }
.studio-fx-view.is-of-aura > i { width: 14px; height: 14px; box-shadow: 0 0 0 2px rgba(255,242,0,.6), 0 0 14px 8px rgba(255,242,0,.3); }
.studio-fx-view.is-of-echo > i { box-shadow: 0 0 0 1px #101014, -3px -3px 0 0 rgba(255,242,0,.9), 3px 3px 0 0 rgba(255,242,0,.9); }
.studio-fx-view.is-of-stamp > i { border: 2.5px solid #fff200; border-radius: 45% 55% 48% 52% / 52% 48% 55% 45%; filter: blur(.5px); }
.studio-fx-view.is-of-bubble > i { border: 2.5px solid #fff200; border-radius: 50%; box-shadow: inset 0 0 7px rgba(255,242,0,.3); }
.studio-fx-view.is-of-micro > i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dotted #fff200;
  border-radius: 1px;
}
.studio-fx-view.is-of-beads > i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px dotted #fff200;
  border-radius: 4px;
  filter: blur(.3px);
}
.studio-fx-view.is-of-spray > i::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px dotted rgba(255, 242, 0, .55);
  border-radius: 3px;
  filter: blur(1.1px);
}

/* Спалах-підтвердження: «Памʼять студії очищено» після Ctrl+Shift+R.
   Показується на мить і зникає, нічого не перекриваючи. */
.studio-flash {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 9999;
  padding: 10px 18px;
  border: 1px solid var(--yellow);
  background: #0d0d12;
  color: var(--yellow);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.studio-flash.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ══════════════════════════════════════════════════════════════════
   Акцент і декор тла — кнопки в сайдбарі + вікно з плитками
   ══════════════════════════════════════════════════════════════════ */

.studio-deco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0;
}

.studio-deco-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.studio-deco-btn:hover,
.studio-deco-btn:focus-visible {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.08);
  outline: none;
}

.studio-deco-btn-k {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.studio-deco-btn-v {
  font-style: normal;
  font-size: 12px;
  color: #fff;
}

/* Селекти лишаються в розмітці як джерело правди, але очей не муляють. */
.studio-deco-store[hidden],
.studio-deco-store {
  display: none;
}

.studio-modal-card.is-deco {
  width: min(820px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.studio-deco-tabs {
  display: flex;
  gap: 6px;
}

.studio-deco-tab {
  flex: 1 1 auto;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.studio-deco-tab:hover { border-color: var(--yellow); }

.studio-deco-tab.is-on {
  background: #fff200;
  border-color: #fff200;
  color: #0a0a0a;
}

.studio-deco-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.studio-deco-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0b0d16;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.studio-deco-tile:hover {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.06);
}

.studio-deco-tile.is-on {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.12);
}

.studio-deco-tile-name {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.studio-deco-tile.is-on .studio-deco-tile-name { color: var(--yellow); }

/* Прев'ю — це справжній листок у мініатюрі: усередині працюють ті самі
   правила бару й декору, тож плитка ніколи не розійдеться з макетом. */
.studio-deco-grid .studio-deco-view {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1.28;
  padding: 0;
  overflow: hidden;
  background: var(--paper, #fff) !important;
  box-shadow: none;
  pointer-events: none;
}

.studio-deco-grid .studio-deco-view .plate-bar,
.studio-deco-grid .studio-deco-view .plate-wash {
  display: block;
}

/* ── Нові акценти: не лише смуга, а й форми ───────────────────────── */

.plate.is-studio2.is-bar-diag .plate-bar {
  top: 0;
  left: -8%;
  right: -8%;
  height: calc(14px * var(--zoom, 1));
  transform: rotate(-4deg);
  transform-origin: 50% 0;
}

.plate.is-studio2.is-bar-diag2 .plate-bar {
  top: 0;
  left: -8%;
  right: -8%;
  height: calc(36px * var(--zoom, 1));
  background: repeating-linear-gradient(
    -45deg,
    var(--accent, #fff200) 0 calc(7px * var(--zoom, 1)),
    transparent calc(7px * var(--zoom, 1)) calc(15px * var(--zoom, 1))
  );
  transform: rotate(-3deg);
  transform-origin: 50% 0;
}

.plate.is-studio2.is-bar-rhomb .plate-bar {
  top: 0;
  bottom: 0;
  height: auto;
  background: var(--accent, #fff200);
  clip-path: polygon(50% 5%, 66% 50%, 50% 95%, 34% 50%);
}

.plate.is-studio2.is-bar-blob .plate-bar {
  top: auto;
  right: auto;
  bottom: -16%;
  left: -16%;
  width: 58%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 46% 54% 38% 62% / 52% 44% 56% 48%;
  background: var(--accent, #fff200);
}

.plate.is-studio2.is-bar-corner .plate-bar {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 44%;
  height: 24%;
  background: var(--accent, #fff200);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.plate.is-studio2.is-bar-dot .plate-bar {
  top: 4%;
  left: 4%;
  right: auto;
  bottom: auto;
  width: 13%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent, #fff200);
}

.plate.is-studio2.is-bar-dots .plate-bar {
  top: 0;
  left: 0;
  right: 0;
  height: calc(11px * var(--zoom, 1));
  background-color: transparent;
  background-image: radial-gradient(var(--accent, #fff200) 42%, transparent 44%);
  background-size: calc(11px * var(--zoom, 1)) calc(11px * var(--zoom, 1));
  background-repeat: repeat-x;
}

.plate.is-studio2.is-bar-zig .plate-bar {
  top: 0;
  left: 0;
  right: 0;
  height: calc(14px * var(--zoom, 1));
  background-color: transparent;
  background-image:
    linear-gradient(135deg, var(--accent, #fff200) 25%, transparent 25%),
    linear-gradient(225deg, var(--accent, #fff200) 25%, transparent 25%);
  background-size: calc(14px * var(--zoom, 1)) calc(14px * var(--zoom, 1));
  background-repeat: repeat-x;
}

.plate.is-studio2.is-bar-steps .plate-bar {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 26%;
  background: var(--accent, #fff200);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 66% 34%, 66% 67%, 33% 67%, 33% 100%, 0 100%);
}

.plate.is-studio2.is-bar-wave .plate-bar {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(22px * var(--zoom, 1));
  border-radius: 0 0 999px 999px;
  background: var(--accent, #fff200);
}

.plate.is-studio2.is-bar-spark .plate-bar {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 42%;
  background-color: transparent;
  background-image: repeating-conic-gradient(
    from 0deg at 0% 0%,
    var(--accent, #fff200) 0deg 4.2deg,
    transparent 5.8deg 13deg
  );
}

.plate.is-studio2.is-bar-split .plate-bar {
  top: 0;
  bottom: 0;
  height: auto;
  background: linear-gradient(118deg, var(--accent, #fff200) 0 20%, transparent 20%);
}

/* ── fx61: три схожі «косі» акценти замінено на справді різні декори ─────
   «Смужки» (часті вертикальні лінії), «Дуга» (півколо від верхнього краю)
   і «Метелик» (два трикутники навхрест). Старі правила is-bar-diag2,
   is-bar-rhomb та is-bar-split лишились — щоб давні макети не змінились. */
.plate.is-studio2.is-bar-stripes .plate-bar {
  top: 0;
  left: 0;
  right: 0;
  height: calc(26px * var(--zoom, 1));
  background-color: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent, #fff200) 0 calc(5px * var(--zoom, 1)),
    transparent calc(5px * var(--zoom, 1)) calc(10px * var(--zoom, 1))
  );
}

.plate.is-studio2.is-bar-arc .plate-bar {
  top: 0;
  left: -10%;
  right: -10%;
  height: 38%;
  border-radius: 0 0 999px 999px;
  background: var(--accent, #fff200);
}

.plate.is-studio2.is-bar-bowtie .plate-bar {
  top: 0;
  bottom: 0;
  height: auto;
  background: var(--accent, #fff200);
  clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 0);
}

/* ── fx65: conic-градієнти акцентів і заливок замінено на mask з SVG-променями.
   раузер растеризує сектори conic сходинками, а path в SVG — рівно. ── */
.plate.is-wash-cone .plate-wash,
.plate.is-wash-fanbl .plate-wash,
.plate.is-wash-wheelthin .plate-wash {
  background: var(--accent, #fff200);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M100%20100L-105.21%20663.82A600%20600%200%200%201%20-474.39%20273.42Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M100%20100L-105.21%20663.82A600%20600%200%200%201%20-474.39%20273.42Z'%20fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.plate.is-wash-fanbl .plate-wash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20200L-134.97%20-384.62A600%20600%200%200%201%20-102.13%20-391.24ZM0%20200L0%20-400A600%20600%200%200%201%2033.49%20-399.06ZM0%20200L134.97%20-384.62A600%20600%200%200%201%20167.39%20-376.18ZM0%20200L263.02%20-339.28A600%20600%200%200%201%20292.72%20-323.75ZM0%20200L377.59%20-266.29A600%20600%200%200%201%20403.03%20-244.48ZM0%20200L472.81%20-169.4A600%20600%200%200%201%20492.69%20-142.43ZM0%20200L543.78%20-53.57A600%20600%200%200%201%20557.09%20-22.82ZM0%20200L586.89%2075.25A600%20600%200%200%201%20592.94%20108.21ZM0%20200L599.91%20210.47A600%20600%200%200%201%20598.39%20243.94ZM0%20200L582.18%20345.15A600%20600%200%200%201%20573.17%20377.42ZM0%20200L534.6%20472.39A600%20600%200%200%201%20518.56%20501.81ZM0%20200L459.63%20585.67A600%20600%200%200%201%20437.38%20610.73ZM0%20200L361.09%20679.18A600%20600%200%200%201%20333.78%20698.59ZM0%20200L244.04%20748.13A600%20600%200%200%201%20213.06%20760.9ZM0%20200L114.49%20788.98A600%20600%200%200%201%2081.43%20794.45ZM0%20200L-20.94%20799.63A600%20600%200%200%201%20-54.38%20797.53ZM0%20200L-155.29%20779.56A600%20600%200%200%201%20-187.4%20769.98ZM0%20200L-281.68%20729.77A600%20600%200%200%201%20-310.82%20713.22ZM0%20200L-393.64%20652.83A600%20600%200%200%201%20-418.3%20630.15ZM0%20200L-485.41%20552.67A600%20600%200%200%201%20-504.34%20525.02ZM0%20200L-552.3%20434.44A600%20600%200%200%201%20-564.53%20403.24ZM0%20200L-590.88%20304.19A600%20600%200%200%201%20-595.78%20271.04ZM0%20200L-599.18%20168.6A600%20600%200%200%201%20-596.49%20135.2ZM0%20200L-576.76%2034.62A600%20600%200%200%201%20-566.63%202.68ZM0%20200L-524.77%20-90.89A600%20600%200%200%201%20-507.72%20-119.73ZM0%20200L-445.89%20-201.48A600%20600%200%200%201%20-422.78%20-225.74ZM0%20200L-344.15%20-291.49A600%20600%200%200%201%20-316.17%20-309.94ZM0%20200L-224.76%20-356.31A600%20600%200%200%201%20-193.36%20-367.99ZM0%20200L-93.86%20-392.61A600%20600%200%200%201%20-60.63%20-396.93ZM0%20200L41.85%20-398.54A600%20600%200%200%201%2075.2%20-395.27ZM0%20200L175.42%20-373.78A600%20600%200%200%201%20207.18%20-363.1Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20200L-134.97%20-384.62A600%20600%200%200%201%20-102.13%20-391.24ZM0%20200L0%20-400A600%20600%200%200%201%2033.49%20-399.06ZM0%20200L134.97%20-384.62A600%20600%200%200%201%20167.39%20-376.18ZM0%20200L263.02%20-339.28A600%20600%200%200%201%20292.72%20-323.75ZM0%20200L377.59%20-266.29A600%20600%200%200%201%20403.03%20-244.48ZM0%20200L472.81%20-169.4A600%20600%200%200%201%20492.69%20-142.43ZM0%20200L543.78%20-53.57A600%20600%200%200%201%20557.09%20-22.82ZM0%20200L586.89%2075.25A600%20600%200%200%201%20592.94%20108.21ZM0%20200L599.91%20210.47A600%20600%200%200%201%20598.39%20243.94ZM0%20200L582.18%20345.15A600%20600%200%200%201%20573.17%20377.42ZM0%20200L534.6%20472.39A600%20600%200%200%201%20518.56%20501.81ZM0%20200L459.63%20585.67A600%20600%200%200%201%20437.38%20610.73ZM0%20200L361.09%20679.18A600%20600%200%200%201%20333.78%20698.59ZM0%20200L244.04%20748.13A600%20600%200%200%201%20213.06%20760.9ZM0%20200L114.49%20788.98A600%20600%200%200%201%2081.43%20794.45ZM0%20200L-20.94%20799.63A600%20600%200%200%201%20-54.38%20797.53ZM0%20200L-155.29%20779.56A600%20600%200%200%201%20-187.4%20769.98ZM0%20200L-281.68%20729.77A600%20600%200%200%201%20-310.82%20713.22ZM0%20200L-393.64%20652.83A600%20600%200%200%201%20-418.3%20630.15ZM0%20200L-485.41%20552.67A600%20600%200%200%201%20-504.34%20525.02ZM0%20200L-552.3%20434.44A600%20600%200%200%201%20-564.53%20403.24ZM0%20200L-590.88%20304.19A600%20600%200%200%201%20-595.78%20271.04ZM0%20200L-599.18%20168.6A600%20600%200%200%201%20-596.49%20135.2ZM0%20200L-576.76%2034.62A600%20600%200%200%201%20-566.63%202.68ZM0%20200L-524.77%20-90.89A600%20600%200%200%201%20-507.72%20-119.73ZM0%20200L-445.89%20-201.48A600%20600%200%200%201%20-422.78%20-225.74ZM0%20200L-344.15%20-291.49A600%20600%200%200%201%20-316.17%20-309.94ZM0%20200L-224.76%20-356.31A600%20600%200%200%201%20-193.36%20-367.99ZM0%20200L-93.86%20-392.61A600%20600%200%200%201%20-60.63%20-396.93ZM0%20200L41.85%20-398.54A600%20600%200%200%201%2075.2%20-395.27ZM0%20200L175.42%20-373.78A600%20600%200%200%201%20207.18%20-363.1Z'%20fill='%23fff'/%3E%3C/svg%3E");
}
.plate.is-wash-wheelthin .plate-wash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M100%20100L-55.29%20-479.56A600%20600%200%200%201%20-38.03%20-483.91ZM100%20100L100%20-500A600%20600%200%200%201%20117.8%20-499.74ZM100%20100L255.29%20-479.56A600%20600%200%200%201%20272.42%20-474.69ZM100%20100L400%20-419.62A600%20600%200%200%201%20415.28%20-410.49ZM100%20100L524.26%20-324.26A600%20600%200%200%201%20536.66%20-311.49ZM100%20100L619.62%20-200A600%20600%200%200%201%20628.29%20-184.45ZM100%20100L679.56%20-55.29A600%20600%200%200%201%20683.91%20-38.03ZM100%20100L700%20100A600%20600%200%200%201%20699.74%20117.8ZM100%20100L679.56%20255.29A600%20600%200%200%201%20674.69%20272.42ZM100%20100L619.62%20400A600%20600%200%200%201%20610.49%20415.28ZM100%20100L524.26%20524.26A600%20600%200%200%201%20511.49%20536.66ZM100%20100L400%20619.62A600%20600%200%200%201%20384.45%20628.29ZM100%20100L255.29%20679.56A600%20600%200%200%201%20238.03%20683.91ZM100%20100L100%20700A600%20600%200%200%201%2082.2%20699.74ZM100%20100L-55.29%20679.56A600%20600%200%200%201%20-72.42%20674.69ZM100%20100L-200%20619.62A600%20600%200%200%201%20-215.28%20610.49ZM100%20100L-324.26%20524.26A600%20600%200%200%201%20-336.66%20511.49ZM100%20100L-419.62%20400A600%20600%200%200%201%20-428.29%20384.45ZM100%20100L-479.56%20255.29A600%20600%200%200%201%20-483.91%20238.03ZM100%20100L-500%20100A600%20600%200%200%201%20-499.74%2082.2ZM100%20100L-479.56%20-55.29A600%20600%200%200%201%20-474.69%20-72.42ZM100%20100L-419.62%20-200A600%20600%200%200%201%20-410.49%20-215.28ZM100%20100L-324.26%20-324.26A600%20600%200%200%201%20-311.49%20-336.66ZM100%20100L-200%20-419.62A600%20600%200%200%201%20-184.45%20-428.29ZM100%20100L-55.29%20-479.56A600%20600%200%200%201%20-38.03%20-483.91ZM100%20100L100%20-500A600%20600%200%200%201%20117.8%20-499.74ZM100%20100L255.29%20-479.56A600%20600%200%200%201%20272.42%20-474.69Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M100%20100L-55.29%20-479.56A600%20600%200%200%201%20-38.03%20-483.91ZM100%20100L100%20-500A600%20600%200%200%201%20117.8%20-499.74ZM100%20100L255.29%20-479.56A600%20600%200%200%201%20272.42%20-474.69ZM100%20100L400%20-419.62A600%20600%200%200%201%20415.28%20-410.49ZM100%20100L524.26%20-324.26A600%20600%200%200%201%20536.66%20-311.49ZM100%20100L619.62%20-200A600%20600%200%200%201%20628.29%20-184.45ZM100%20100L679.56%20-55.29A600%20600%200%200%201%20683.91%20-38.03ZM100%20100L700%20100A600%20600%200%200%201%20699.74%20117.8ZM100%20100L679.56%20255.29A600%20600%200%200%201%20674.69%20272.42ZM100%20100L619.62%20400A600%20600%200%200%201%20610.49%20415.28ZM100%20100L524.26%20524.26A600%20600%200%200%201%20511.49%20536.66ZM100%20100L400%20619.62A600%20600%200%200%201%20384.45%20628.29ZM100%20100L255.29%20679.56A600%20600%200%200%201%20238.03%20683.91ZM100%20100L100%20700A600%20600%200%200%201%2082.2%20699.74ZM100%20100L-55.29%20679.56A600%20600%200%200%201%20-72.42%20674.69ZM100%20100L-200%20619.62A600%20600%200%200%201%20-215.28%20610.49ZM100%20100L-324.26%20524.26A600%20600%200%200%201%20-336.66%20511.49ZM100%20100L-419.62%20400A600%20600%200%200%201%20-428.29%20384.45ZM100%20100L-479.56%20255.29A600%20600%200%200%201%20-483.91%20238.03ZM100%20100L-500%20100A600%20600%200%200%201%20-499.74%2082.2ZM100%20100L-479.56%20-55.29A600%20600%200%200%201%20-474.69%20-72.42ZM100%20100L-419.62%20-200A600%20600%200%200%201%20-410.49%20-215.28ZM100%20100L-324.26%20-324.26A600%20600%200%200%201%20-311.49%20-336.66ZM100%20100L-200%20-419.62A600%20600%200%200%201%20-184.45%20-428.29ZM100%20100L-55.29%20-479.56A600%20600%200%200%201%20-38.03%20-483.91ZM100%20100L100%20-500A600%20600%200%200%201%20117.8%20-499.74ZM100%20100L255.29%20-479.56A600%20600%200%200%201%20272.42%20-474.69Z'%20fill='%23fff'/%3E%3C/svg%3E");
}
.plate.is-studio2.is-bar-spark .plate-bar {
  background-color: var(--accent, #fff200);
  background-image: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L-134.97%20-584.62A600%20600%200%200%201%20-91.79%20-592.94ZM0%200L0%20-600A600%20600%200%200%201%2043.94%20-598.39ZM0%200L134.97%20-584.62A600%20600%200%200%201%20177.42%20-573.17ZM0%200L263.02%20-539.28A600%20600%200%200%201%20301.81%20-518.56ZM0%200L377.59%20-466.29A600%20600%200%200%201%20410.73%20-437.38ZM0%200L472.81%20-369.4A600%20600%200%200%201%20498.59%20-333.78ZM0%200L543.78%20-253.57A600%20600%200%200%201%20560.9%20-213.06ZM0%200L586.89%20-124.75A600%20600%200%200%201%20594.45%20-81.43ZM0%200L599.91%2010.47A600%20600%200%200%201%20597.53%2054.38ZM0%200L582.18%20145.15A600%20600%200%200%201%20569.98%20187.4ZM0%200L534.6%20272.39A600%20600%200%200%201%20513.22%20310.82ZM0%200L459.63%20385.67A600%20600%200%200%201%20430.15%20418.3ZM0%200L361.09%20479.18A600%20600%200%200%201%20325.02%20504.34ZM0%200L244.04%20548.13A600%20600%200%200%201%20203.24%20564.53ZM0%200L114.49%20588.98A600%20600%200%200%201%2071.04%20595.78ZM0%200L-20.94%20599.63A600%20600%200%200%201%20-64.8%20596.49ZM0%200L-155.29%20579.56A600%20600%200%200%201%20-197.32%20566.63ZM0%200L-281.68%20529.77A600%20600%200%200%201%20-319.73%20507.72ZM0%200L-393.64%20452.83A600%20600%200%200%201%20-425.74%20422.78ZM0%200L-485.41%20352.67A600%20600%200%200%201%20-509.94%20316.17ZM0%200L-552.3%20234.44A600%20600%200%200%201%20-567.99%20193.36ZM0%200L-590.88%20104.19A600%20600%200%200%201%20-596.93%2060.63ZM0%200L-599.18%20-31.4A600%20600%200%200%201%20-595.27%20-75.2ZM0%200L-576.76%20-165.38A600%20600%200%200%201%20-563.1%20-207.18ZM0%200L-524.77%20-290.89A600%20600%200%200%201%20-502.06%20-328.54ZM0%200L-445.89%20-401.48A600%20600%200%200%201%20-415.29%20-433.06ZM0%200L-344.15%20-491.49A600%20600%200%200%201%20-307.23%20-515.38ZM0%200L-224.76%20-556.31A600%20600%200%200%201%20-183.42%20-571.28ZM0%200L-93.86%20-592.61A600%20600%200%200%201%20-50.21%20-597.9ZM0%200L41.85%20-598.54A600%20600%200%200%201%2085.58%20-593.87ZM0%200L175.42%20-573.78A600%20600%200%200%201%20216.97%20-559.39Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L-134.97%20-584.62A600%20600%200%200%201%20-91.79%20-592.94ZM0%200L0%20-600A600%20600%200%200%201%2043.94%20-598.39ZM0%200L134.97%20-584.62A600%20600%200%200%201%20177.42%20-573.17ZM0%200L263.02%20-539.28A600%20600%200%200%201%20301.81%20-518.56ZM0%200L377.59%20-466.29A600%20600%200%200%201%20410.73%20-437.38ZM0%200L472.81%20-369.4A600%20600%200%200%201%20498.59%20-333.78ZM0%200L543.78%20-253.57A600%20600%200%200%201%20560.9%20-213.06ZM0%200L586.89%20-124.75A600%20600%200%200%201%20594.45%20-81.43ZM0%200L599.91%2010.47A600%20600%200%200%201%20597.53%2054.38ZM0%200L582.18%20145.15A600%20600%200%200%201%20569.98%20187.4ZM0%200L534.6%20272.39A600%20600%200%200%201%20513.22%20310.82ZM0%200L459.63%20385.67A600%20600%200%200%201%20430.15%20418.3ZM0%200L361.09%20479.18A600%20600%200%200%201%20325.02%20504.34ZM0%200L244.04%20548.13A600%20600%200%200%201%20203.24%20564.53ZM0%200L114.49%20588.98A600%20600%200%200%201%2071.04%20595.78ZM0%200L-20.94%20599.63A600%20600%200%200%201%20-64.8%20596.49ZM0%200L-155.29%20579.56A600%20600%200%200%201%20-197.32%20566.63ZM0%200L-281.68%20529.77A600%20600%200%200%201%20-319.73%20507.72ZM0%200L-393.64%20452.83A600%20600%200%200%201%20-425.74%20422.78ZM0%200L-485.41%20352.67A600%20600%200%200%201%20-509.94%20316.17ZM0%200L-552.3%20234.44A600%20600%200%200%201%20-567.99%20193.36ZM0%200L-590.88%20104.19A600%20600%200%200%201%20-596.93%2060.63ZM0%200L-599.18%20-31.4A600%20600%200%200%201%20-595.27%20-75.2ZM0%200L-576.76%20-165.38A600%20600%200%200%201%20-563.1%20-207.18ZM0%200L-524.77%20-290.89A600%20600%200%200%201%20-502.06%20-328.54ZM0%200L-445.89%20-401.48A600%20600%200%200%201%20-415.29%20-433.06ZM0%200L-344.15%20-491.49A600%20600%200%200%201%20-307.23%20-515.38ZM0%200L-224.76%20-556.31A600%20600%200%200%201%20-183.42%20-571.28ZM0%200L-93.86%20-592.61A600%20600%200%200%201%20-50.21%20-597.9ZM0%200L41.85%20-598.54A600%20600%200%200%201%2085.58%20-593.87ZM0%200L175.42%20-573.78A600%20600%200%200%201%20216.97%20-559.39Z'%20fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── Положення акценту й декору тла (fx72) ──────────────────────────── */
/* Зсув задається змінними на листку й діє лише на оформлення — самі шари
   (текст, QR, зображення) не рухаються. Обгортка .plate-deco лишається
   з overflow:hidden, тому навіть зсунутий акцент не вилізе за край. */
.plate.is-studio2 > .plate-deco > .plate-wash {
  transform: translate(var(--wash-x, 0px), var(--wash-y, 0px));
}

.plate.is-studio2 > .plate-deco > .plate-bar {
  transform: translate(var(--bar-x, 0px), var(--bar-y, 0px));
}

/* Поки триває переміщення — курсор і заборона системних жестів. */
.plate.is-studio2.is-deco-moving {
  cursor: grab;
  touch-action: none;
}

.plate.is-studio2.is-deco-moving.is-dragging-any {
  cursor: grabbing;
}

/* Компактна картка біля листка: питання → кнопка збереження. */
.studio-deco-move {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 14;
  width: min(320px, calc(100% - 36px));
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: #0c0c10;
  border: 2px solid var(--yellow);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72);
  color: #fff;
}

.studio-deco-move.hidden {
  display: none;
}

.studio-deco-move-q {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}

.studio-deco-move-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.studio-deco-move-hint.hidden {
  display: none;
}

.studio-deco-move-actions {
  display: flex;
  gap: 8px;
}

.studio-deco-move-actions.hidden {
  display: none;
}

.studio-deco-move-btn {
  flex: 1 1 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.studio-deco-move-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.studio-deco-move-btn.is-yes {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #0a0a0a;
}

.studio-deco-move-btn.is-yes:hover {
  background: #fff;
  color: #0a0a0a;
}

.studio-deco-move-save {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: #0a0a0a;
}

.studio-deco-move-save:hover {
  background: #fff;
}

.studio-deco-move-save.hidden {
  display: none;
}

/* ── «Поділитися»: список форматів файлу (fx73) ─────────────────────── */
.studio-share-caret {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.16s ease;
}

#studio-share-toggle[aria-expanded="true"] .studio-share-caret {
  transform: rotate(180deg);
}

.studio-share-menu .studio-share-formats,
.studio-share-menu .studio-share-sep,
.studio-share-menu .studio-share-networks {
  grid-column: 1 / -1;
}

.studio-share-menu .studio-share-formats {
  display: grid;
  gap: 2px;
  padding: 2px 0 5px;
}

.studio-share-formats-kicker {
  margin: 2px 4px 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.studio-share-menu .studio-share-fmt {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 8px 9px;
  text-align: left;
  background: transparent;
}

.studio-share-menu .studio-share-fmt .studio-share-fmt-name {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.studio-share-menu .studio-share-fmt .studio-share-fmt-hint {
  flex: 1 1 auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-align: right;
}

.studio-share-menu .studio-share-fmt:hover,
.studio-share-menu .studio-share-fmt:focus-visible {
  background: rgba(255, 242, 0, 0.08);
}

.studio-share-menu .studio-share-fmt:hover .studio-share-fmt-name,
.studio-share-menu .studio-share-fmt:focus-visible .studio-share-fmt-name,
.studio-share-menu .studio-share-fmt:hover .studio-share-fmt-hint,
.studio-share-menu .studio-share-fmt:focus-visible .studio-share-fmt-hint {
  color: var(--yellow);
}

.studio-share-menu .studio-share-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--line);
}

.studio-share-menu .studio-share-networks {
  padding: 2px 0 0;
}

/* Розділ «Фонові шари» внизу панелі. */
.studio-layers-kicker.is-deco {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #8d8d8d;
}

.studio-layers-kicker.is-deco::before {
  content: none;
}

.studio-layers-kicker.is-deco > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Приглушений рядок: оформлення є, але його зараз не редагують. */
.studio-layer.is-deco .studio-layer-pick {
  color: #8f8f8f;
  cursor: pointer;
}

.studio-layer.is-deco .studio-layer-ico {
  color: #7d7d7d;
}

.studio-layer.is-deco:hover .studio-layer-pick,
.studio-layer.is-deco:hover .studio-layer-ico {
  color: #d8d8d8;
}

/* Редагується — рядок живий, як звичайний виділений шар. */
.studio-layer.is-deco.is-on {
  border-style: dashed;
}

.studio-layer.is-deco.is-on .studio-layer-pick,
.studio-layer.is-deco.is-on .studio-layer-ico {
  color: #fff;
}

.studio-layer-lock.is-deco-edit {
  filter: none;
  color: var(--yellow);
}

/* ── fx79: акцент і декор тла — обертання як у решти шарів ──────────── */
/* Зсув, кут і масштаб тримає обгортка .plate-deco-shape — так само, як
   --rot у звичайного шару. Смуга й декор усередині лишаються без власного
   transform, тому їхні давні правила (fx72, fx77) більше не діють. */
.plate.is-studio2 > .plate-deco > .plate-deco-item {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.plate.is-studio2 > .plate-deco > .plate-deco-item > .plate-deco-shape {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform:
    translate(var(--deco-x, 0px), var(--deco-y, 0px))
    rotate(var(--rot, 0deg))
    scale(var(--deco-scale, 1));
}

.plate.is-studio2 > .plate-deco > .plate-deco-item > .plate-deco-shape > .plate-bar,
.plate.is-studio2 > .plate-deco > .plate-deco-item > .plate-deco-shape > .plate-wash {
  transform: none;
}

/* Ручку обертання з fx81 винесено окремим шаром .plate-deco-rot —
   див. кінець файлу. */

/* У режимі редагування оформлення шари листка не перехоплюють кліки —
   інакше текст чи код своїм прямокутником закриває ручку біля обʼєкта. */
.plate.is-studio2.is-deco-moving > .plate-layer {
  pointer-events: none;
}

/* Пунктирна рамка навколо оформлення більше не потрібна — вибір показує
   ручка, як у будь-якого іншого обʼєкта. */
.plate.is-studio2 > .plate-deco > [data-drag].is-selected {
  outline: none;
}


/* ── fx81: ручка обертання стоїть біля самого оформлення ───────────── */
/* Ручка живе окремим шаром поза .plate-deco: усередині її обрізав би
   overflow:hidden, а вона має стояти біля обʼєкта — навіть коли форма
   виходить за край листка. Позицію --hx/--hy у пікселях листка рахує
   syncDecoRotHandles() із трансформованого кута смуги/декору. */
.plate.is-studio2 > .plate-deco-rot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

.plate.is-studio2 > .plate-deco-rot > .plate-rot {
  left: var(--hx, 13px);
  top: var(--hy, 13px);
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Ручка є тільки в того оформлення, яке зараз редагують або виділили. */
.plate.is-studio2 > .plate-deco-rot.is-on > .plate-rot {
  display: grid;
}

/* Під час експорту й вибору точки на листку жодних ручок. */
.plate.is-exporting > .plate-deco-rot > .plate-rot,
.plate.is-picking > .plate-deco-rot > .plate-rot {
  display: none !important;
}

/* ── fx84: обертання й масштаб оформлення — навколо центру обʼєкта ────── */
/* Як у звичайного шару, де transform стоїть на самому обʼєкті: кут і
   масштаб рахуються від центру форми, а не від центру листка. Через це
   при збільшенні акцент/декор більше не «відʼїжджає» вгору. */
.plate.is-studio2 > .plate-deco > .plate-deco-item > .plate-deco-shape {
  transform-origin: var(--org-x, 50%) var(--org-y, 50%);
}

/* У режимі редагування оформлення шари листка лишаються клікабельними:
   ручка обертання стоїть окремим шаром вище (z-index 900) і сама себе
   захищає. */
.plate.is-studio2.is-deco-moving > .plate-layer {
  pointer-events: auto;
}

/* ── fx88: QR-код завжди поверх підкладки ───────────────────────────── *
/
/* Підкладка (.plate-qr-wrap) малює фон, рамку й тінь, а сам код — це
   полотно всередині неї. Ставимо полотно вище за підкладку, щоб жодна
   картка, пляма декору чи рамка акценту не могла його перекрити. Шари
   листка при цьому теж підняті над оформленням (z-index 10+ у макеті). */
.plate.is-studio2 .plate-qr-wrap > canvas {
  position: relative;
  z-index: 3;
}

/* ── fx88: оформлення можна схопити за саму форму ───────────────────── *
/
/* Акцент і декор тла лежать ПІД шарами листка, тому раніше перетягування
   починалось лише з порожнього місця аркуша: щойно під курсором був текст
   чи код, подію забирав шар. У режимі редагування оформлення його обгортка
   й форма знову ловлять вказівник — тягнути можна прямо за пляму. */
.plate.is-studio2.is-deco-moving > .plate-deco,
.plate.is-studio2.is-deco-moving > .plate-deco > .plate-deco-item,
.plate.is-studio2.is-deco-moving > .plate-deco > .plate-deco-item > .plate-deco-shape {
  pointer-events: auto;
}

/* ── fx91: пошук картинок в інтернеті ───────────────────────────────── */
.studio-photo {
  margin: 0 0 12px;
}

.studio-photo-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.studio-photo-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}

.studio-photo-input:focus {
  outline: 1px solid var(--yellow);
  border-color: var(--yellow);
}

.studio-photo-go {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-photo-note {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

/* Вікно результатів: сітка мініатюр із галочками вибору. */
.studio-modal-card.is-photos {
  width: min(880px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.studio-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 2px;
  min-height: 120px;
  overflow-y: auto;
}

.studio-photo-empty {
  grid-column: 1 / -1;
  margin: 22px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.studio-photo-cell {
  position: relative;
  padding: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  overflow: hidden;
}

.studio-photo-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-photo-cell:hover {
  border-color: rgba(255, 242, 0, 0.6);
}

.studio-photo-cell.is-on {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 242, 0, 0.35) inset;
}

.studio-photo-cell.is-on img {
  opacity: 0.72;
}

.studio-photo-tick {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.studio-photo-cell.is-on .studio-photo-tick {
  display: grid;
}

/* ── fx91: прозорість картинок, іконок і смайлів ───────────────────── */
.plate.is-studio2 .plate-emblem-wrap .plate-emblem {
  opacity: calc(var(--emblem-op, 100) / 100);
}

/* Повзунок прозорості — той самий, що в підкладки QR, але стиснутий
   у проміжок між мініатюрою та хрестиком. */
.studio-emblem-op {
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: 1fr 34px;
  gap: 6px;
  margin-right: 4px;
}

.studio-emblem-op .studio-fx-slide {
  height: 22px;
}

/* -- fx92: photo search lives in the modal, 50 results + paging ---- */
.studio-photo-open {
  width: 100%;
  margin: 0 0 12px;
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* fx213: кнопка другого джерела зображень — QR-коди з кабінету. */
#studio-account-qr-add {
  width: 100%;
  margin: 0 0 12px;
  padding: 9px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-modal-card.is-photos .studio-photo-row {
  margin: 0 0 8px;
}

.studio-modal-card.is-photos .studio-photo-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  padding: 2px 6px 2px 2px;
}

/* Whole photo visible, never cropped by the cell. */
.studio-photo-cell {
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.07);
}

.studio-photo-cell img {
  object-fit: contain;
}

.studio-photo-more {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px dashed rgba(255, 242, 0, 0.5);
  background: rgba(255, 242, 0, 0.08);
  color: #fff;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.studio-photo-more:hover:not(:disabled) {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.16);
}

.studio-photo-more:disabled {
  opacity: 0.55;
  cursor: default;
}

/* -- fx92: "Прозорість" label above the image slider ---------------- */
.studio-emblem-op {
  display: grid;
  grid-template-columns: 1fr 34px;
  grid-template-areas: "name val" "slide slide";
  gap: 2px 6px;
  align-items: center;
}

.studio-emblem-op-name {
  grid-area: name;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.studio-emblem-op .studio-fx-slide {
  grid-area: slide;
  height: 16px;
}

.studio-emblem-op .studio-fx-val {
  grid-area: val;
  justify-self: end;
  align-self: center;
  font-size: 10px;
}

/* -- fx93: fixed 4:3 cell via padding (grid rows collapsed with
   aspect-ratio because items stretch; padding makes the row height
   depend on the column width, so thumbnails always keep their box) --- */
.studio-photo-cell {
  height: 0;
  padding: 0 0 75%;
  aspect-ratio: auto;
  align-self: start;
}

.studio-photo-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* fx95 - mouse wheel and two-finger pinch zoom the sheet.
   pan-x pan-y keeps one-finger scrolling but lets the browser hand
   two-finger gestures to our touch handlers instead of page zoom. */
.studio-press-sheet {
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}

/* fx96 - the image opacity slider gets the same caption as "Scale":
   one centred yellow uppercase line with the value in grey next to it,
   slider full width underneath. */
.studio-emblem-op {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "slide";
  justify-items: center;
  gap: 3px;
  margin-right: 6px;
}

.studio-emblem-op-name {
  grid-area: name;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1;
}

.studio-emblem-op-name em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9a9a9a;
}

.studio-emblem-op .studio-fx-slide {
  grid-area: slide;
  width: 100%;
  height: 16px;
}

/* fx97 - all sliders look like the sheet "Scale" slider.
   The Scale control is a native range with accent-color yellow: a 6px
   track where the filled part is yellow and the rest grey, plus a plain
   16px round thumb without a glow ring. The custom slides (image
   opacity and the effect sliders) are re-skinned to match it exactly. */
.studio-fx-rail {
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.32);
}

.studio-fx-fill {
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: var(--yellow);
}

.studio-fx-handle {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: none;
  transition: none;
}

.studio-fx-slide:hover .studio-fx-handle,
.studio-fx-slide.is-drag .studio-fx-handle {
  transform: none;
  box-shadow: none;
}

.studio-fx-slide {
  height: 16px;
}

/* Empty lead line in the photo modal takes no space. */
#studio-photo-lead:empty {
  display: none;
}

/* fx98 - large preview of a picked web photo inside the same modal.
   The overlay fills the card, shows the full-size image (object-fit
   contain, so nothing is cropped) and has two buttons in one row:
   "Pick" and "Search more". Both return to the grid, the modal stays. */
.studio-modal-card.is-photos {
  position: relative;
}

.studio-photo-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 42px 14px 14px;
  background: #12141f;
}

.studio-photo-view.hidden,
.studio-photo-view[hidden] {
  display: none !important;
}

.studio-modal-card.is-photos .studio-modal-close {
  z-index: 4;
}

.studio-photo-view-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
}

.studio-photo-view-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.studio-photo-view-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.studio-photo-view-actions .studio-btn {
  width: 100%;
}

.studio-photo-cell[aria-pressed="true"] {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
}

/* ══ fx101: кілька фонових шарів ════════════════════════════════════════ */
/* ожен фоновий шар — власний «листок у мініатюрі»: класи форми
   (is-bar-… / is-wash-…) живуть на обгортці шару, а не на корені листка.
   Тому акцентів і декорів може бути кілька, і в кожного своя форма.
   бгортка не малює власного тла й тіні — інакше вона закрила б шари
   під собою, а обрізає все одно .plate-deco. */
.plate.is-studio2 > .plate-deco > .plate-deco-item > .plate-deco-shape {
  background: transparent;
  box-shadow: none;
  color: inherit;
  overflow: visible;
}

/* нопка «+ одати шар» у самому низу розділу «онові шари». */
.studio-layers-add {
  margin-top: 2px;
}

.studio-layer-add {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.25);
  color: #cfcfcf;
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}

.studio-layer-add:hover {
  border-color: rgba(255, 242, 0, 0.6);
  background: rgba(46, 49, 146, 0.35);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   fx103 — HMI NEON: повний рестайл оболонки Studio 2
   Референс: автомобільний HMI-екран у темряві — глибоке синє скло,
   тонкі світні лінії, неонові індикатори. Гама сайту: синій
   #2e3192, жовтий #fff200, білий.
   Розподіл неону:
     • синій  — база: скло, рамки, наведення, вибір, повзунки;
     • жовтий — головна дія та активний стан (CTA, плитка, рядок шару);
     • білий  — заголовки, значення, іконки, волосяні лінії.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Палітра та матеріали ─────────────────────────────────────── */
body.studio-body {
  --hmi-void: #03050d;
  --hmi-deep: #060a16;
  --hmi-panel: rgba(15, 24, 48, 0.58);
  --hmi-panel-solid: rgba(7, 12, 26, 0.94);
  --hmi-hair: rgba(124, 158, 255, 0.16);
  --hmi-hair-hot: rgba(140, 175, 255, 0.45);
  --hmi-blue: #4d6dff;
  --hmi-blue-deep: #2e3192;
  --hmi-blue-hot: #7d9bff;
  --hmi-ice: #cfe0ff;
  --hmi-glow-b: rgba(77, 109, 255, 0.55);
  --hmi-glow-y: rgba(255, 242, 0, 0.5);
  --hmi-glow-w: rgba(255, 255, 255, 0.55);
  --hmi-r-lg: 20px;
  --hmi-r: 14px;
  --hmi-r-sm: 10px;
  --mute: #8ea3c9;
}

/* ── 2. Тло: ніч + синій ореол + горизонт ────────────────────────── */
body.studio-body {
  color: #eaf1ff;
  background:
    radial-gradient(120% 78% at 50% -14%, rgba(46, 49, 146, 0.62), transparent 62%),
    radial-gradient(80% 62% at 3% 104%, rgba(77, 109, 255, 0.22), transparent 64%),
    radial-gradient(62% 48% at 101% 2%, rgba(255, 242, 0, 0.07), transparent 62%),
    linear-gradient(180deg, #05070f 0%, #02030a 58%, #040610 100%);
}

body.studio-body .studio-noise {
  opacity: 0.035;
  mix-blend-mode: screen;
}

body.studio-body .studio-grid {
  background-image:
    linear-gradient(rgba(120, 158, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 158, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 22%, transparent 78%);
}

/* fx264: «лінію горизонту» (білу смугу на 34% висоти екрана) прибрано.
   Вона жила в .studio-grid (position: fixed), тому під час прокрутки не
   їхала з контентом, а висіла посеред екрана — саме та біла лінія, яка
   «рухалась разом з колесом». Тепер тло — тільки статична сітка. */

/* ── 3. Шапка ────────────────────────────────────────────────────── */
body.studio-body .studio-top {
  border-bottom: 1px solid var(--hmi-hair);
  background: linear-gradient(180deg, rgba(10, 16, 34, 0.9), rgba(5, 8, 18, 0.42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 44px -32px rgba(77, 109, 255, 0.95);
  backdrop-filter: blur(12px) saturate(130%);
}

body.studio-body .studio-brand-mark {
  filter: drop-shadow(0 0 14px rgba(77, 109, 255, 0.65));
}

body.studio-body .studio-brand-word {
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.32);
}

body.studio-body .studio-brand-word.is-global {
  color: var(--yellow);
  text-shadow: 0 0 18px var(--hmi-glow-y);
}

body.studio-body .studio-top-tagline {
  color: #7f93b8;
}

body.studio-body .studio-chip {
  border: 1px solid var(--hmi-hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--hmi-ice);
}

/* ── 4. Бокові колонки ───────────────────────────────────────────── */
body.studio-body .studio-rail {
  border-right: 1px solid var(--hmi-hair);
  background: linear-gradient(180deg, rgba(16, 26, 54, 0.55), rgba(5, 9, 20, 0.45));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

body.studio-body .studio-controls {
  border-left: 1px solid var(--hmi-hair);
  background: linear-gradient(180deg, rgba(16, 26, 54, 0.5), rgba(5, 9, 20, 0.55));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.03);
}

body.studio-body .studio-rail-kicker,
body.studio-body .studio-layers-kicker {
  color: var(--yellow);
  text-shadow: 0 0 14px var(--hmi-glow-y);
  letter-spacing: 0.2em;
}

/* ── 5. Плитки типів шаблону ─────────────────────────────────────── */
body.studio-body .studio-plate-btn {
  border: 1px solid var(--hmi-hair);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  color: #c3d3ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease,
    box-shadow 0.16s ease, transform 0.16s ease;
}

body.studio-body .studio-plate-btn:hover {
  border-color: var(--hmi-hair-hot);
  background: linear-gradient(180deg, rgba(77, 109, 255, 0.2), rgba(77, 109, 255, 0.05));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 20px -6px var(--hmi-glow-b);
  transform: translateX(1px);
}

body.studio-body .studio-plate-btn.is-on {
  border-color: rgba(150, 182, 255, 0.85);
  background: linear-gradient(180deg, #3d55cf, #232a6e);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 26px -4px var(--hmi-glow-b),
    0 12px 28px -18px #000;
}

body.studio-body .studio-plate-btn.is-on .studio-plate-copy {
  border-radius: 8px;
  background: linear-gradient(180deg, #fff85e, var(--yellow));
  color: #0a0a0a;
  box-shadow: 0 0 20px -4px var(--hmi-glow-y);
}

body.studio-body .studio-plate-btn.is-on .studio-plate-copy b {
  color: #0a0a0a;
  text-shadow: none;
}

body.studio-body .studio-plate-btn.is-on .studio-plate-icon {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 16px -2px var(--hmi-glow-w);
}

body.studio-body .studio-plate-icon {
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
}

/* ── 6. Сцена ────────────────────────────────────────────────────── */
body.studio-body .studio-stage-head h1 {
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 0 22px rgba(150, 185, 255, 0.4);
}

body.studio-body .studio-lead {
  color: #93a7cc;
}

body.studio-body .studio-btn {
  border: 1px solid var(--hmi-hair);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  color: #e6eeff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease,
    background 0.16s ease, filter 0.16s ease;
}

body.studio-body .studio-btn:hover {
  border-color: rgba(135, 170, 255, 0.7);
  background: linear-gradient(180deg, rgba(77, 109, 255, 0.28), rgba(77, 109, 255, 0.08));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 22px -6px var(--hmi-glow-b);
}

body.studio-body .studio-btn:focus-visible {
  outline: none;
  border-color: rgba(150, 182, 255, 0.9);
  box-shadow:
    0 0 0 2px rgba(77, 109, 255, 0.55),
    0 0 24px -4px var(--hmi-glow-b);
}

body.studio-body .studio-btn.is-ghost {
  background: rgba(255, 255, 255, 0.045);
}

body.studio-body .studio-btn.is-yellow,
body.studio-body .studio-btn.is-yellow:hover,
body.studio-body .studio-btn.is-yellow:focus-visible {
  border-color: rgba(255, 242, 0, 0.95);
  background: linear-gradient(180deg, #fff961, #fff200);
  color: #0a0a0a;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 26px -4px var(--hmi-glow-y),
    0 12px 26px -18px rgba(255, 242, 0, 0.9);
}

body.studio-body .studio-btn.is-place {
  border-color: rgba(150, 182, 255, 0.8);
  background: linear-gradient(180deg, #4f6bff, #2b3190);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 24px -6px var(--hmi-glow-b);
}

body.studio-body .studio-btn.is-place:hover {
  color: #fff;
  filter: brightness(1.1);
}

body.studio-body .studio-btn.is-place.is-on {
  border-color: var(--yellow);
  background: linear-gradient(180deg, #5a74ea, #2e3192);
  color: var(--yellow);
  box-shadow:
    inset 0 0 0 1px rgba(255, 242, 0, 0.5),
    0 0 24px -4px var(--hmi-glow-y);
}

/* Кнопка «Випадковий дизайн»: синій корпус, жовто-біло-синя неонова рамка. */
body.studio-body .studio-btn.is-dice {
  border: 1px solid transparent;
  border-radius: 14px;
  clip-path: none;
  background:
    linear-gradient(#0a1024, #0a1024) padding-box,
    linear-gradient(118deg, var(--yellow), #4d6dff 42%, #ffffff 60%, var(--yellow)) border-box;
  color: #fff;
  box-shadow:
    0 0 26px -8px var(--hmi-glow-y),
    0 0 28px -10px var(--hmi-glow-b);
}

body.studio-body .studio-btn.is-dice:hover {
  filter: brightness(1.1) drop-shadow(0 0 16px rgba(77, 109, 255, 0.55));
}

/* ── 7. Формат і спадні вікна ────────────────────────────────────── */
body.studio-body .studio-format-btn {
  border: 1px solid var(--hmi-hair);
  border-radius: 999px;
  background: rgba(7, 12, 26, 0.78);
  color: #dbe6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.studio-body .studio-format-btn:hover,
body.studio-body .studio-format.is-open .studio-format-btn {
  border-color: rgba(140, 175, 255, 0.7);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 20px -6px var(--hmi-glow-b);
}

body.studio-body .studio-format-menu,
body.studio-body .studio-export-menu,
body.studio-body .studio-share-menu {
  border: 1px solid rgba(124, 158, 255, 0.28);
  border-radius: var(--hmi-r);
  background: linear-gradient(180deg, rgba(18, 28, 58, 0.97), rgba(5, 9, 20, 0.98));
  box-shadow:
    0 30px 60px -30px #000,
    0 0 40px -18px var(--hmi-glow-b),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

body.studio-body .studio-format-menu button,
body.studio-body .studio-export-item,
body.studio-body .studio-share-menu button {
  border-radius: 9px;
  color: #cfdcf5;
}

body.studio-body .studio-format-menu button:hover,
body.studio-body .studio-format-menu button.is-on,
body.studio-body .studio-export-item:hover,
body.studio-body .studio-export-item.is-on,
body.studio-body .studio-share-menu button:hover,
body.studio-body .studio-share-menu button:focus-visible {
  background: rgba(77, 109, 255, 0.22);
  border-color: rgba(140, 175, 255, 0.55);
  color: #fff;
}

body.studio-body .studio-share-toggle.is-open {
  border-color: rgba(255, 242, 0, 0.8);
  color: var(--yellow);
  box-shadow: 0 0 20px -6px var(--hmi-glow-y);
}

/* ── 8. Поліграфічний стіл ───────────────────────────────────────── */
body.studio-body .studio-press {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r-lg);
  background:
    radial-gradient(120% 90% at 50% -24%, rgba(46, 49, 146, 0.5), transparent 62%),
    linear-gradient(180deg, rgba(17, 27, 56, 0.55), rgba(4, 7, 16, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 70px -44px #000,
    0 0 70px -34px rgba(77, 109, 255, 0.9);
}

body.studio-body .studio-press-sheet {
  border: 1px solid rgba(120, 155, 255, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(88% 68% at 50% 6%, rgba(77, 109, 255, 0.22), transparent 62%),
    radial-gradient(70% 56% at 50% 106%, rgba(255, 242, 0, 0.07), transparent 60%),
    linear-gradient(180deg, #080d1c, #03050c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -60px 90px -70px rgba(77, 109, 255, 0.9);
}

body.studio-body .studio-layers-panel {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r);
  background: linear-gradient(180deg, rgba(16, 26, 54, 0.6), rgba(5, 9, 20, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 36px -24px rgba(77, 109, 255, 0.95);
}

body.studio-body .studio-layers-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(77, 109, 255, 0.24), transparent 72%);
  animation: none;
  opacity: 1;
}

/* ── 9. Рядки шарів ──────────────────────────────────────────────── */
body.studio-body .studio-layer {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

body.studio-body .studio-layer:hover {
  border-color: var(--hmi-hair-hot);
  background: linear-gradient(180deg, rgba(77, 109, 255, 0.16), rgba(77, 109, 255, 0.04));
}

body.studio-body .studio-layer.is-on {
  border-color: rgba(255, 242, 0, 0.72);
  background: linear-gradient(180deg, rgba(255, 242, 0, 0.16), rgba(255, 242, 0, 0.05));
  box-shadow:
    inset 2px 0 0 var(--yellow),
    0 0 22px -8px var(--hmi-glow-y);
}

body.studio-body .studio-layer.is-grabbed {
  border-color: rgba(150, 182, 255, 0.85);
  background: rgba(77, 109, 255, 0.22);
  box-shadow:
    inset 2px 0 0 var(--hmi-blue-hot),
    0 0 20px -8px var(--hmi-glow-b);
}

body.studio-body .studio-layer.is-drop-above::before,
body.studio-body .studio-layer.is-drop-below::after {
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--hmi-glow-y);
}

body.studio-body .studio-layer-pick {
  color: #c8d6f2;
}

body.studio-body .studio-layer.is-on .studio-layer-pick {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

body.studio-body .studio-layer-num {
  border: 1px solid rgba(140, 175, 255, 0.28);
  border-radius: 6px;
  background: rgba(77, 109, 255, 0.12);
  color: #cfe0ff;
}

body.studio-body .studio-layer.is-on .studio-layer-num {
  border-color: rgba(255, 242, 0, 0.8);
  background: rgba(255, 242, 0, 0.16);
  color: var(--yellow);
  box-shadow: 0 0 12px -4px var(--hmi-glow-y);
}

body.studio-body .studio-layer-ico {
  color: var(--hmi-blue-hot);
  filter: drop-shadow(0 0 7px rgba(77, 109, 255, 0.55));
}

body.studio-body .studio-layer.is-on .studio-layer-ico {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

body.studio-body .studio-layer-btn {
  border-radius: 7px;
}

body.studio-body .studio-layer-btn:hover:not(:disabled) {
  background: rgba(77, 109, 255, 0.28);
  color: #fff;
  box-shadow: 0 0 14px -5px var(--hmi-glow-b);
}

body.studio-body .studio-layer-add {
  border: 1px dashed rgba(124, 158, 255, 0.45);
  border-radius: var(--hmi-r-sm);
  background: rgba(77, 109, 255, 0.08);
  color: #b9c9e8;
  letter-spacing: 0.12em;
}

body.studio-body .studio-layer-add:hover {
  border-color: rgba(255, 242, 0, 0.85);
  background: rgba(255, 242, 0, 0.08);
  color: #fff;
  box-shadow: 0 0 20px -8px var(--hmi-glow-y);
}

/* ── 10. Розділи панелі керування ────────────────────────────────── */
body.studio-body .studio-fold {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  margin-bottom: 8px;
  overflow: hidden;
}

body.studio-body .studio-fold[open] {
  border-color: rgba(124, 158, 255, 0.42);
  background: linear-gradient(180deg, rgba(77, 109, 255, 0.16), rgba(77, 109, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 28px -14px var(--hmi-glow-b);
}

body.studio-body .studio-fold-sum {
  padding: 11px 12px;
}

body.studio-body .studio-fold-sum span {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
}

body.studio-body .studio-fold-sum em {
  color: #8ea3c9;
}

body.studio-body .studio-fold-ico {
  color: var(--yellow);
  filter: drop-shadow(0 0 8px rgba(255, 242, 0, 0.45));
}

body.studio-body .studio-fold-body {
  border-top: 1px solid var(--hmi-hair);
}

body.studio-body .studio-fold-lead {
  color: #8ea3c9;
}

/* ── 11. Поля вводу ──────────────────────────────────────────────── */
body.studio-body .studio-form input,
body.studio-body .studio-form textarea,
body.studio-body .studio-layout select,
body.studio-body .studio-emblem select,
body.studio-body .studio-qr-style select,
body.studio-body .studio-qr-style input[type="text"],
body.studio-body .studio-account select,
body.studio-body .studio-form .studio-tb-font select {
  border: 1px solid rgba(124, 158, 255, 0.24);
  border-radius: var(--hmi-r-sm);
  background: linear-gradient(180deg, rgba(5, 10, 22, 0.96), rgba(9, 15, 32, 0.96));
  color: #eaf1ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.studio-body .studio-form input:focus,
body.studio-body .studio-form textarea:focus,
body.studio-body .studio-layout select:focus,
body.studio-body .studio-emblem select:focus,
body.studio-body .studio-qr-style select:focus,
body.studio-body .studio-qr-style input[type="text"]:focus,
body.studio-body .studio-account select:focus,
body.studio-body .studio-form .studio-tb-font select:focus {
  outline: none;
  border-color: rgba(150, 182, 255, 0.85);
  box-shadow:
    0 0 0 2px rgba(77, 109, 255, 0.26),
    0 0 20px -6px var(--hmi-glow-b);
}

body.studio-body .studio-form label,
body.studio-body .studio-layout label,
body.studio-body .studio-emblem label,
body.studio-body .studio-qr-style label,
body.studio-body .studio-account label {
  color: #8ea3c9;
}

body.studio-body .studio-layout label em,
body.studio-body .studio-emblem label em,
body.studio-body .studio-qr-style label em {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

/* Повзунки — синій неон, значення — білі. */
body.studio-body .studio-layout input[type="range"],
body.studio-body .studio-emblem input[type="range"],
body.studio-body .studio-qr-style input[type="range"],
body.studio-body .plate-tool-range {
  accent-color: #5b7cff;
}

body.studio-body .studio-check input {
  accent-color: var(--yellow);
}

body.studio-body .studio-inks input[type="color"],
body.studio-body .studio-emblem-item img {
  border-radius: 8px;
  border-color: rgba(124, 158, 255, 0.28);
}

body.studio-body .studio-note {
  color: #8ea3c9;
}

body.studio-body .studio-mycolor-title {
  color: var(--yellow);
  text-shadow: 0 0 12px var(--hmi-glow-y);
}

body.studio-body .studio-mycolor-chip {
  border-radius: var(--hmi-r-sm);
  border-color: rgba(124, 158, 255, 0.26);
  background: rgba(255, 255, 255, 0.04);
}

body.studio-body .studio-mycolor-chip:hover,
body.studio-body .studio-mycolor-chip:focus-within {
  border-color: rgba(255, 242, 0, 0.8);
  box-shadow: 0 0 20px -8px var(--hmi-glow-y);
}

/* ── 12. Плитки: ефекти, іконки, акценти, палітри ────────────────── */
body.studio-body .studio-fx-tile,
body.studio-body .studio-icon-cell,
body.studio-body .studio-accent-cell,
body.studio-body .studio-photo-cell,
body.studio-body .studio-size-preset,
body.studio-body .studio-deco-tile {
  border: 1px solid var(--hmi-hair);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease,
    transform 0.16s ease;
}

body.studio-body .studio-fx-tile:hover,
body.studio-body .studio-icon-cell:hover,
body.studio-body .studio-accent-cell:hover,
body.studio-body .studio-photo-cell:hover,
body.studio-body .studio-size-preset:hover,
body.studio-body .studio-deco-tile:hover {
  border-color: rgba(140, 175, 255, 0.65);
  background: linear-gradient(180deg, rgba(77, 109, 255, 0.2), rgba(77, 109, 255, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 20px -8px var(--hmi-glow-b);
  transform: translateY(-1px);
}

body.studio-body .studio-fx-tile.is-on,
body.studio-body .studio-icon-cell.is-on,
body.studio-body .studio-accent-cell.is-on,
body.studio-body .studio-deco-tile.is-on,
body.studio-body .studio-photo-cell.is-on {
  border-color: rgba(255, 242, 0, 0.8);
  background: linear-gradient(180deg, rgba(255, 242, 0, 0.18), rgba(255, 242, 0, 0.05));
  box-shadow:
    inset 2px 0 0 var(--yellow),
    0 0 22px -8px var(--hmi-glow-y);
}

body.studio-body .studio-fx-tile.is-on .studio-fx-tile-name,
body.studio-body .studio-deco-tile.is-on .studio-deco-tile-name {
  color: var(--yellow);
  text-shadow: 0 0 12px var(--hmi-glow-y);
}

body.studio-body .studio-fx-tile-name {
  color: #c3d3ef;
}

body.studio-body .studio-icon-tab,
body.studio-body .studio-fx-tab {
  border: 1px solid var(--hmi-hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #b9c9e8;
}

body.studio-body .studio-icon-tab:hover,
body.studio-body .studio-fx-tab:hover {
  border-color: rgba(140, 175, 255, 0.6);
  color: #fff;
}

body.studio-body .studio-icon-tab.is-on,
body.studio-body .studio-fx-tab.is-on {
  border-color: rgba(160, 190, 255, 0.9);
  background: linear-gradient(180deg, #5a78ff, #3548c8);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 22px -8px var(--hmi-glow-b);
}

body.studio-body .studio-palette {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r-sm);
  background: rgba(255, 255, 255, 0.04);
}

body.studio-body .studio-palette:hover {
  border-color: rgba(140, 175, 255, 0.6);
  box-shadow: 0 0 18px -8px var(--hmi-glow-b);
}

body.studio-body .studio-palette.is-on {
  border-color: rgba(255, 242, 0, 0.8);
  box-shadow: inset 2px 0 0 var(--yellow), 0 0 18px -8px var(--hmi-glow-y);
}

/* ── 13. Модальні вікна ──────────────────────────────────────────── */
body.studio-body .studio-modal {
  background: rgba(3, 6, 15, 0.76);
  backdrop-filter: blur(8px) saturate(120%);
}

body.studio-body .studio-modal-card {
  border: 1px solid rgba(124, 158, 255, 0.26);
  border-radius: var(--hmi-r-lg);
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.94), rgba(6, 10, 22, 0.97));
  box-shadow:
    0 44px 90px -44px #000,
    0 0 70px -30px rgba(77, 109, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(130%);
}

/* Неонова кромка зверху вікна: синій → білий → жовтий. */
body.studio-body .studio-modal-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #4d6dff 22%, #ffffff 50%, #fff200 78%, transparent);
  box-shadow: 0 0 18px rgba(77, 109, 255, 0.55);
}

body.studio-body .studio-modal-card p {
  color: #b9c9e8;
}

body.studio-body .studio-modal-close {
  display: grid;
  place-items: center;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(140, 175, 255, 0.4);
  border-radius: 50%;
  background: rgba(8, 14, 30, 0.85);
  color: #fff;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.studio-body .studio-modal-close:hover {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #0a0a0a;
  box-shadow: 0 0 20px -4px var(--hmi-glow-y);
}

body.studio-body .studio-modal-actions .studio-btn {
  border-radius: 12px;
}

/* ── 14. Вікно ефектів ───────────────────────────────────────────── */
body.studio-body .studio-modal.is-float {
  background: transparent;
  backdrop-filter: none;
}

body.studio-body .studio-modal-card.is-fx {
  border: 1px solid rgba(124, 158, 255, 0.3);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 28, 58, 0.95), rgba(5, 9, 20, 0.97));
  box-shadow:
    0 34px 80px -40px #000,
    0 0 70px -30px rgba(77, 109, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.studio-body .studio-fx-head {
  border-bottom: 1px solid var(--hmi-hair);
}

body.studio-body .studio-fx-title {
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
}

body.studio-body .studio-fx-close {
  border-color: rgba(255, 242, 0, 0.75);
  background: #070c19;
  color: #fff;
  box-shadow: 0 0 18px -6px var(--hmi-glow-y);
}

body.studio-body .studio-fx-close:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0a0a0a;
}

body.studio-body .studio-fx-switch {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r-sm);
  background: rgba(255, 255, 255, 0.035);
}

body.studio-body .studio-fx-knob {
  background: rgba(255, 255, 255, 0.18);
}

body.studio-body .studio-fx-switch input:checked + .studio-fx-knob {
  background: #4d6dff;
  box-shadow: 0 0 16px -4px var(--hmi-glow-b);
}

body.studio-body .studio-fx-switch-text {
  color: #cfe0ff;
}

body.studio-body .studio-fx-name,
body.studio-body .studio-fx-group {
  color: #8ea3c9;
}

body.studio-body .studio-fx-val {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

body.studio-body .studio-fx-rail {
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45);
}

body.studio-body .studio-fx-fill {
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2e3192, #5b7cff 62%, #cfe0ff);
  box-shadow: 0 0 14px -3px var(--hmi-glow-b);
}

body.studio-body .studio-fx-handle {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(77, 109, 255, 0.35),
    0 0 18px rgba(255, 255, 255, 0.75);
}

body.studio-body .studio-fx-slide:hover .studio-fx-handle,
body.studio-body .studio-fx-slide.is-drag .studio-fx-handle {
  transform: scale(1.16);
  box-shadow:
    0 0 0 5px rgba(77, 109, 255, 0.4),
    0 0 22px rgba(255, 255, 255, 0.9);
}

body.studio-body .studio-fx-slide:focus-visible {
  outline: 1px solid rgba(140, 175, 255, 0.6);
}

body.studio-body .studio-fx-hex input[type="color"] {
  border-radius: 8px;
  border-color: rgba(124, 158, 255, 0.3);
}

body.studio-body .studio-fx-hint {
  color: #8ea3c9;
}

/* ── 15. Вікно «Акцент і декор тла» ──────────────────────────────── */
body.studio-body .studio-deco-btn {
  border: 1px solid var(--hmi-hair);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.studio-body .studio-deco-btn:hover,
body.studio-body .studio-deco-btn:focus-visible {
  border-color: rgba(140, 175, 255, 0.65);
  box-shadow: 0 0 20px -8px var(--hmi-glow-b);
}

body.studio-body .studio-deco-tab {
  border: 1px solid var(--hmi-hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #b9c9e8;
}

body.studio-body .studio-deco-tab:hover {
  border-color: rgba(140, 175, 255, 0.6);
  color: #fff;
}

body.studio-body .studio-deco-tab.is-on {
  border-color: rgba(160, 190, 255, 0.9);
  background: linear-gradient(180deg, #5a78ff, #3548c8);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 22px -8px var(--hmi-glow-b);
}

/* ── 16. Плавальна панель над листком ────────────────────────────── */
body.studio-body .plate-toolbar {
  border: 1px solid rgba(124, 158, 255, 0.45);
  border-radius: var(--hmi-r);
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.96), rgba(6, 10, 22, 0.97));
  box-shadow:
    0 26px 54px -26px #000,
    0 0 36px -16px rgba(77, 109, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
}

body.studio-body .plate-toolbar-group {
  border: 1px solid rgba(124, 158, 255, 0.2);
  border-radius: var(--hmi-r-sm);
  background: rgba(255, 255, 255, 0.045);
}

body.studio-body .plate-tool-btn {
  color: #dfe8ff;
}

body.studio-body .plate-tool-btn:hover:not(:disabled) {
  background: rgba(77, 109, 255, 0.35);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.studio-body .plate-tool-btn.is-on {
  background: linear-gradient(180deg, #fff858, var(--yellow));
  color: #0a0a0a;
  box-shadow: 0 0 18px -6px var(--hmi-glow-y);
}

body.studio-body .plate-toolbar-tag {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

body.studio-body .plate-toolbar-close {
  border-color: rgba(255, 242, 0, 0.8);
  background: #070c19;
}

body.studio-body .plate-scale {
  border: 1px solid rgba(124, 158, 255, 0.2);
  border-radius: var(--hmi-r-sm);
  background: rgba(255, 255, 255, 0.045);
}

body.studio-body .plate-scale-label {
  color: #cfe0ff;
}

body.studio-body .plate-swatch {
  border-color: rgba(255, 255, 255, 0.45);
}

body.studio-body .plate-swatch.is-on {
  box-shadow:
    0 0 0 2px var(--yellow),
    0 0 14px -2px var(--hmi-glow-y);
}

/* ── 17. Масштаб листка ──────────────────────────────────────────── */
body.studio-body .studio-zoom {
  border: 1px solid var(--hmi-hair-hot);
  border-radius: 999px;
  background: rgba(7, 12, 26, 0.8);
  padding: 5px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 26px -10px var(--hmi-glow-b),
    0 14px 32px -22px #000;
  backdrop-filter: blur(10px);
}

body.studio-body .studio-zoom .plate-scale-label {
  color: #cfe0ff;
}

body.studio-body .studio-zoom .plate-scale-label em {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

body.studio-body .studio-zoom .plate-tool-btn {
  border-radius: 999px;
  border-color: rgba(124, 158, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
}

body.studio-body .studio-zoom .plate-tool-btn:hover {
  border-color: rgba(255, 242, 0, 0.8);
  color: var(--yellow);
}

/* ── 18. Повідомлення ────────────────────────────────────────────── */
body.studio-body .studio-flash,
body.studio-body .studio-share-hint {
  border: 1px solid rgba(255, 242, 0, 0.75);
  border-radius: 999px;
  background: rgba(7, 12, 26, 0.95);
  color: #fff;
  box-shadow:
    0 0 30px -10px var(--hmi-glow-y),
    0 20px 44px -26px #000;
  backdrop-filter: blur(12px);
}

/* ── 19. Смуги прокрутки ─────────────────────────────────────────── */
/* fx243: у студії жодних видимих смуг прокрутки — білий повзунок збоку
   прибрано повністю (раніше тут стояв scrollbar-width: thin + білий
   thumb). Прокрутка колесом, тачем і стрілками працює як і раніше. */
html,
body.studio-body,
body.studio-body .studio-rail,
body.studio-body .studio-controls,
body.studio-body .studio-stage,
body.studio-body .studio-format-menu,
body.studio-body .studio-plates,
body.studio-body .studio-press-sheet {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

html::-webkit-scrollbar,
body.studio-body *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body.studio-body *::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 0;
  background: transparent;
}

html::-webkit-scrollbar-thumb:hover,
body.studio-body *::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

html::-webkit-scrollbar-track,
body.studio-body *::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner,
body.studio-body *::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── 20. Дрібні деталі ───────────────────────────────────────────── */
body.studio-body .studio-locks-kicker {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

body.studio-body .studio-lock {
  border: 1px solid var(--hmi-hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #c3d3ef;
}

body.studio-body .studio-lock:hover {
  border-color: rgba(140, 175, 255, 0.65);
  color: #fff;
}

body.studio-body .studio-lock:has(input:checked) {
  border-color: rgba(255, 242, 0, 0.8);
  background: rgba(255, 242, 0, 0.1);
  color: var(--yellow);
  box-shadow: 0 0 18px -8px var(--hmi-glow-y);
}

body.studio-body .studio-recipe,
body.studio-body .studio-scan {
  color: #cfe0ff;
}

body.studio-body .studio-recipe-dot {
  background: var(--yellow);
  box-shadow: 0 0 10px var(--hmi-glow-y);
}

body.studio-body .studio-scan-led {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

body.studio-body .studio-magic-bar {
  border: 1px solid var(--hmi-hair);
  border-radius: var(--hmi-r);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    radial-gradient(80% 100% at 50% 0%, rgba(77, 109, 255, 0.16), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.studio-body .studio-stage-meta .studio-lead {
  color: #93a7cc;
}

/* Тонкі розділювачі всередині панелей — світні, з легким неоном. */
body.studio-body .studio-inks-qr {
  border-bottom: 1px solid var(--hmi-hair);
}

@media (prefers-reduced-motion: reduce) {
  body.studio-body .studio-btn,
  body.studio-body .studio-plate-btn,
  body.studio-body .studio-layer,
  body.studio-body .studio-fx-tile,
  body.studio-body .studio-icon-cell,
  body.studio-body .studio-accent-cell,
  body.studio-body .studio-photo-cell,
  body.studio-body .studio-deco-tile,
  body.studio-body .studio-size-preset {
    transition: none;
  }
  body.studio-body .studio-btn:hover,
  body.studio-body .studio-plate-btn:hover,
  body.studio-body .studio-fx-tile:hover,
  body.studio-body .studio-icon-cell:hover,
  body.studio-body .studio-accent-cell:hover,
  body.studio-body .studio-photo-cell:hover,
  body.studio-body .studio-deco-tile:hover,
  body.studio-body .studio-size-preset:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   fx105 — «ЖИВА СИСТЕМА»: вибір QR з кабінету
   Нативний список (URL + номер) замінено модальним вікном у стилі
   студії. У плитці лише сам код, під ним назва та номер, навколо —
   рівне неонове світіння, що дихає, і білі «кібер» цятки по кутах,
   як пульс у плитках QR в акаунті.
   ══════════════════════════════════════════════════════════════════ */

/* Сам select лишається джерелом правди, але очей більше не муляє. */
body.studio-body .studio-account-store,
body.studio-body .studio-account select.studio-account-store {
  display: none !important;
}

body.studio-body .studio-account-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(124, 158, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(7, 12, 26, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #eaf1ff;
  letter-spacing: 0.03em;
}

body.studio-body .studio-account-open:hover:not(:disabled) {
  border-color: rgba(140, 175, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 22px -8px var(--hmi-glow-b);
}

body.studio-body .studio-account-open:disabled {
  opacity: 0.55;
  cursor: default;
}

body.studio-body .studio-account-open.is-linked {
  border-color: rgba(255, 242, 0, 0.55);
  color: var(--yellow);
  box-shadow: inset 2px 0 0 var(--yellow), 0 0 22px -10px var(--hmi-glow-y);
}

body.studio-body .studio-account-open-ico {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(140, 175, 255, 0.75);
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 30%, #fff 1.5px, transparent 1.9px),
    radial-gradient(circle at 70% 30%, #fff 1.5px, transparent 1.9px),
    radial-gradient(circle at 30% 70%, #fff 1.5px, transparent 1.9px),
    radial-gradient(circle at 70% 70%, #fff 1.5px, transparent 1.9px);
  box-shadow: 0 0 12px -3px var(--hmi-glow-b);
}

body.studio-body .studio-account-open.is-linked .studio-account-open-ico {
  border-color: rgba(255, 242, 0, 0.8);
  box-shadow: 0 0 12px -3px var(--hmi-glow-y);
}

body.studio-body .studio-account-open-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Вікно ───────────────────────────────────────────────────────── */
body.studio-body .studio-modal-card.is-qrpick {
  width: min(940px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  overflow: hidden;
}

body.studio-body .studio-qrpick-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 40px;
}

body.studio-body .studio-qrpick-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 14px var(--hmi-glow-y);
}

body.studio-body .studio-qrpick-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.3);
}

body.studio-body .studio-qrpick-lead {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #93a7cc;
}

body.studio-body .studio-qrpick-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding: 6px 8px 12px 2px;
}

/* ── Плитка коду ─────────────────────────────────────────────────── */
body.studio-body .studio-qrpick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 13px 10px 12px;
  border: 1px solid rgba(124, 158, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 26, 54, 0.72), rgba(5, 9, 20, 0.9));
  color: #eaf1ff;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 30px -22px var(--hmi-glow-b);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Рівне неонове світіння навколо плитки — дихає, не блимає. */
body.studio-body .studio-qrpick::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 19px;
  pointer-events: none;
  background: radial-gradient(62% 62% at 50% 42%, rgba(77, 109, 255, 0.5), transparent 72%);
  filter: blur(10px);
  opacity: 0.32;
  animation: studio-qrpick-breathe 4.8s ease-in-out infinite;
  animation-delay: var(--qrpick-d, 0s);
}

/* Тонка світна кромка зверху — «скло під напругою». */
body.studio-body .studio-qrpick::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  border-radius: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(140, 175, 255, 0.6), transparent);
}

body.studio-body .studio-qrpick:hover {
  border-color: rgba(140, 175, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 34px -14px var(--hmi-glow-b);
  transform: translateY(-2px);
}

body.studio-body .studio-qrpick:focus-visible {
  outline: none;
  border-color: rgba(160, 190, 255, 0.95);
  box-shadow:
    0 0 0 2px rgba(77, 109, 255, 0.32),
    0 0 34px -14px var(--hmi-glow-b);
}

body.studio-body .studio-qrpick.is-on {
  border-color: rgba(255, 242, 0, 0.82);
  box-shadow:
    inset 2px 0 0 var(--yellow),
    0 0 36px -14px var(--hmi-glow-y);
}

body.studio-body .studio-qrpick.is-on::before {
  background: radial-gradient(62% 62% at 50% 42%, rgba(255, 242, 0, 0.34), transparent 72%);
  opacity: 0.42;
}

/* ── Сцена з кодом + білий кібер-акцент ─────────────────────────── */
body.studio-body .studio-qrpick-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(124, 158, 255, 0.12);
  pointer-events: none;
}

body.studio-body .studio-qrpick-canvas {
  display: block;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Білі цятки-біти по кутах — той самий «пульс», що в плитках акаунта. */
body.studio-body .studio-qrpick-bit {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.95);
  animation: studio-qrpick-bit 1.6s steps(2, end) infinite;
}

body.studio-body .studio-qrpick-bit.tl { top: 1px; left: 1px; }
body.studio-body .studio-qrpick-bit.tr { top: 1px; right: 1px; animation-delay: 0.22s; }
body.studio-body .studio-qrpick-bit.bl { bottom: 1px; left: 1px; animation-delay: 0.38s; }
body.studio-body .studio-qrpick-bit.br { bottom: 1px; right: 1px; animation-delay: 0.54s; }

/* Сканувальна лінія — біла, з синім ореолом. */
body.studio-body .studio-qrpick-scan {
  position: absolute;
  z-index: 2;
  left: 7px;
  right: 7px;
  top: 7px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  box-shadow: 0 0 10px rgba(140, 175, 255, 0.85);
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: studio-qrpick-scan 4.2s ease-in-out infinite alternate;
  animation-delay: var(--qrpick-d, 0s);
}

/* ── Підпис: назва та номер ─────────────────────────────────────── */
body.studio-body .studio-qrpick-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

body.studio-body .studio-qrpick-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
}

body.studio-body .studio-qrpick-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--yellow);
  text-shadow: 0 0 12px var(--hmi-glow-y);
}

body.studio-body .studio-qrpick.is-on .studio-qrpick-name {
  color: var(--yellow);
  text-shadow: 0 0 14px var(--hmi-glow-y);
}

/* ── Порожній стан ───────────────────────────────────────────────── */
body.studio-body .studio-qrpick-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 16px 10px;
  text-align: center;
}

body.studio-body .studio-qrpick-empty.hidden,
body.studio-body .studio-qrpick-empty[hidden] {
  display: none;
}

body.studio-body .studio-qrpick-empty-lead {
  margin: 0;
  font-size: 13px;
  color: #93a7cc;
}

@keyframes studio-qrpick-breathe {
  0%, 100% { opacity: 0.24; transform: scale(0.97); }
  50% { opacity: 0.6; transform: scale(1.03); }
}

@keyframes studio-qrpick-bit {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0.14; }
}

@keyframes studio-qrpick-scan {
  0% { transform: translateY(0); opacity: 0.18; }
  45% { opacity: 0.62; }
  100% { transform: translateY(108px); opacity: 0.18; }
}

@media (max-width: 640px) {
  body.studio-body .studio-qrpick-grid {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 9px;
    padding-right: 4px;
  }
  body.studio-body .studio-qrpick {
    padding: 10px 7px 9px;
    border-radius: 13px;
  }
  body.studio-body .studio-qrpick-title {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.studio-body .studio-qrpick,
  body.studio-body .studio-qrpick:hover {
    transform: none;
  }
  body.studio-body .studio-qrpick::before,
  body.studio-body .studio-qrpick-bit,
  body.studio-body .studio-qrpick-scan {
    animation: none;
  }
  body.studio-body .studio-qrpick::before { opacity: 0.34; }
  body.studio-body .studio-qrpick-bit { opacity: 0.85; }
  body.studio-body .studio-qrpick-scan { opacity: 0.35; }
}

/* ══════════════════════════════════════════════════════════════════
   fx106 — РІЗАНІ КУТИ + ЖИВИЙ НЕОН
   Геометрія з головної: кнопки-вкладки там мають зріз зверху-зліва
   та знизу-справа, а «Сканер / Генератор» — восьмикутник (усі чотири
   кути зрізані). Тут ця ж мова форми:
     • кнопки / чипи / вкладки  — асиметричний зріз 8px;
     • плитки / рядки шарів      — восьмикутник 10px;
     • панелі / вікна            — восьмикутник 16px.
   При наведенні під кнопкою з’являється жовта «підкладка»-силует
   зі зсувом (як на головній), плюс легке синє світіння.
   А ще — живе дихання: бігла лінія по панелях, мерехтіння написів,
   пульс кутових міток листка, повільний бік-скан по сцені.
   ══════════════════════════════════════════════════════════════════ */

body.studio-body {
  --hmi-cut-sm: 8px;
  --hmi-cut: 10px;
  --hmi-cut-panel: 16px;

  /* зріз на двох кутах — як у вкладок на головній */
  --hmi-shape-el: polygon(
    var(--hmi-cut-sm) 0,
    100% 0,
    100% calc(100% - var(--hmi-cut-sm)),
    calc(100% - var(--hmi-cut-sm)) 100%,
    0 100%,
    0 var(--hmi-cut-sm)
  );

  /* восьмикутник — як у плиток сканера / генератора */
  --hmi-shape-tile: polygon(
    var(--hmi-cut) 0,
    calc(100% - var(--hmi-cut)) 0,
    100% var(--hmi-cut),
    100% calc(100% - var(--hmi-cut)),
    calc(100% - var(--hmi-cut)) 100%,
    var(--hmi-cut) 100%,
    0 calc(100% - var(--hmi-cut)),
    0 var(--hmi-cut)
  );

  --hmi-shape-panel: polygon(
    var(--hmi-cut-panel) 0,
    calc(100% - var(--hmi-cut-panel)) 0,
    100% var(--hmi-cut-panel),
    100% calc(100% - var(--hmi-cut-panel)),
    calc(100% - var(--hmi-cut-panel)) 100%,
    var(--hmi-cut-panel) 100%,
    0 calc(100% - var(--hmi-cut-panel)),
    0 var(--hmi-cut-panel)
  );
}

/* ── 1. Асиметричні кнопки ───────────────────────────────────────── */
body.studio-body .studio-btn:not(.is-dice),
body.studio-body .studio-chip,
body.studio-body .studio-format-btn,
body.studio-body .studio-share-toggle,
body.studio-body .studio-icon-tab,
body.studio-body .studio-fx-tab,
body.studio-body .studio-deco-tab,
body.studio-body .studio-size-preset,
body.studio-body .studio-lock,
body.studio-body .studio-mycolor-chip,
body.studio-body .studio-layer-add {
  border-radius: 0;
  clip-path: var(--hmi-shape-el);
}

/* Хрестики закриття маленькі (30px) — зріз 8px на них завеликий. */
body.studio-body .studio-modal-close,
body.studio-body .studio-fx-close {
  border-radius: 0;
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
}

/* Хрестик панелі об’єкта лишається круглим «бейджем» і не обрізається:
   панель тепер не має clip-path. */

/* Кнопка з рандомом має власну геометрію — зберігаємо глибокий зріз. */
body.studio-body .studio-btn.is-dice {
  clip-path: polygon(
    13px 0,
    100% 0,
    100% calc(100% - 13px),
    calc(100% - 13px) 100%,
    0 100%,
    0 13px
  );
}

/* ── 2. Плитки та рядки шарів ────────────────────────────────────── */
body.studio-body .studio-plate-btn,
body.studio-body .studio-plate-icon,
body.studio-body .studio-fx-tile,
body.studio-body .studio-icon-cell,
body.studio-body .studio-accent-cell,
body.studio-body .studio-photo-cell,
body.studio-body .studio-deco-tile,
body.studio-body .studio-deco-btn,
body.studio-body .studio-layer,
body.studio-body .studio-qrpick {
  border-radius: 0;
  clip-path: var(--hmi-shape-tile);
}

/* ── 3. Панелі та вікна ──────────────────────────────────────────── */
body.studio-body .studio-press,
body.studio-body .studio-press-sheet,
body.studio-body .studio-magic-bar,
body.studio-body .studio-layers-panel,
body.studio-body .studio-fold,
body.studio-body .studio-modal-card,
body.studio-body .studio-format-menu,
body.studio-body .studio-export-menu,
body.studio-body .studio-share-menu {
  border-radius: 0;
  clip-path: var(--hmi-shape-panel);
}

/* Дрібні плаваючі елементи: великий зріз на них «з'їдає» форму. */
body.studio-body .studio-zoom {
  border-radius: 0;
  clip-path: var(--hmi-shape-el);
}

/* Панель редагування об’єкта. Її НЕ можна обрізати через clip-path:
   хрестик закриття висить на куті зі зсувом -9px і зникав. Тому сама
   панель прозора, а зрізану «плиту» малює ::before. */
body.studio-body .plate-toolbar {
  border-radius: 0;
  clip-path: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.studio-body .plate-toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(124, 158, 255, 0.45);
  background: linear-gradient(180deg, rgba(20, 30, 60, 0.96), rgba(6, 10, 22, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  filter:
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 20px rgba(77, 109, 255, 0.5));
  backdrop-filter: blur(14px);
  clip-path: var(--hmi-shape-tile);
}

/* Layer rows are short -> smaller cut. */
body.studio-body .studio-layer {
  clip-path: polygon(
    7px 0,
    calc(100% - 7px) 0,
    100% 7px,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    7px 100%,
    0 calc(100% - 7px),
    0 7px
  );
}

/* Drop-індикатор шарів раніше висів на 4px над рядком — зі зрізом
   він обрізався, тому переносимо його всередину. */
body.studio-body .studio-layer.is-drop-above::before {
  top: 0;
  height: 3px;
  border-radius: 0;
}
body.studio-body .studio-layer.is-drop-below::after {
  bottom: 0;
  height: 3px;
  border-radius: 0;
}

/* ── 4. «Підкладка» під елементом при наведенні ──────────────────── */
body.studio-body .studio-btn:not(.is-dice),
body.studio-body .studio-chip,
body.studio-body .studio-format-btn,
body.studio-body .studio-share-toggle,
body.studio-body .studio-icon-tab,
body.studio-body .studio-fx-tab,
body.studio-body .studio-deco-tab,
body.studio-body .studio-size-preset,
body.studio-body .studio-lock,
body.studio-body .studio-mycolor-chip,
body.studio-body .studio-layer-add,
body.studio-body .studio-plate-btn,
body.studio-body .studio-fx-tile,
body.studio-body .studio-icon-cell,
body.studio-body .studio-accent-cell,
body.studio-body .studio-photo-cell,
body.studio-body .studio-deco-tile,
body.studio-body .studio-deco-btn,
body.studio-body .studio-layer,
body.studio-body .studio-qrpick,
body.studio-body .studio-modal-close,
body.studio-body .studio-fx-close {
  transition-property: border-color, background, color, box-shadow, transform, filter;
  transition-duration: 0.16s;
  transition-timing-function: ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Підкладка живе ВСЕРЕДИНІ форми. Раніше тут був зовнішній
     drop-shadow зі зсувом: фільтр обводив КОЖНУ літеру, і підпис
     двоївся — «Заголовок 2» ставав нечитабельним. Тепер жовта
     підкладка = внутрішня рамка + клин у зрізі + синє світіння,
     а сам текст не чіпаємо взагалі. */
  body.studio-body .studio-btn:not(.is-dice):not(.is-yellow):hover,
  body.studio-body .studio-chip:hover,
  body.studio-body .studio-format-btn:hover,
  body.studio-body .studio-share-toggle:hover,
  body.studio-body .studio-icon-tab:hover,
  body.studio-body .studio-fx-tab:hover,
  body.studio-body .studio-deco-tab:hover,
  body.studio-body .studio-size-preset:hover,
  body.studio-body .studio-lock:hover,
  body.studio-body .studio-mycolor-chip:hover,
  body.studio-body .studio-layer-add:hover,
  body.studio-body .studio-plate-btn:hover,
  body.studio-body .studio-fx-tile:hover:not(.is-on),
  body.studio-body .studio-icon-cell:hover:not(.is-on),
  body.studio-body .studio-accent-cell:hover:not(.is-on),
  body.studio-body .studio-photo-cell:hover:not(.is-on),
  body.studio-body .studio-deco-tile:hover:not(.is-on),
  body.studio-body .studio-deco-btn:hover,
  body.studio-body .studio-layer:hover:not(.is-on),
  body.studio-body .studio-qrpick:hover:not(.is-on) {
    box-shadow:
      inset 0 0 0 1px rgba(255, 242, 0, 0.5),
      inset 0 -14px 0 -10px rgba(255, 242, 0, 0.22),
      inset 0 0 22px rgba(77, 109, 255, 0.26);
  }

  /* Синя кнопка розміщення: підкладка біла, текст лишається чітким. */
  body.studio-body .studio-btn.is-place:hover {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.55),
      inset 0 -14px 0 -10px rgba(255, 255, 255, 0.2),
      inset 0 0 22px rgba(77, 109, 255, 0.3);
  }

  /* Іконкові кнопки без підпису під текстом не страждають — їм
     можна лишити м'який зовнішній ореол. */
  body.studio-body .studio-modal-close:hover,
  body.studio-body .studio-fx-close:hover,
  body.studio-body .plate-tool-btn:hover:not(:disabled) {
    filter: drop-shadow(0 0 10px rgba(255, 242, 0, 0.55));
  }
}

/* ── 5. Блік, що пробігає по кнопці ──────────────────────────────── */
body.studio-body .studio-btn:not(.is-dice) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.studio-body .studio-btn:not(.is-dice)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-170%) skewX(-14deg);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  body.studio-body .studio-btn:not(.is-dice):hover::after {
    animation: hmi-sheen 0.85s ease-out 1;
  }
}

@keyframes hmi-sheen {
  0% { transform: translateX(-170%) skewX(-14deg); opacity: 0; }
  22% { opacity: 0.9; }
  100% { transform: translateX(430%) skewX(-14deg); opacity: 0; }
}

/* ── 6. Живе світіння: вибраний стан дихає ───────────────────────── */
body.studio-body .studio-layer.is-on,
body.studio-body .studio-fx-tile.is-on,
body.studio-body .studio-deco-tile.is-on,
body.studio-body .studio-icon-cell.is-on,
body.studio-body .studio-accent-cell.is-on,
body.studio-body .studio-photo-cell.is-on,
body.studio-body .studio-qrpick.is-on {
  filter: drop-shadow(0 0 9px rgba(255, 242, 0, 0.34));
}

body.studio-body .studio-layer.is-on,
body.studio-body .studio-fx-tile.is-on,
body.studio-body .studio-deco-tile.is-on,
body.studio-body .studio-icon-cell.is-on,
body.studio-body .studio-accent-cell.is-on,
body.studio-body .studio-photo-cell.is-on {
  animation: hmi-on-breathe 5.8s ease-in-out infinite;
}

body.studio-body .studio-layers .studio-layer.is-on:nth-child(2n) {
  animation-delay: -2.4s;
}
body.studio-body .studio-fx-grid .studio-fx-tile.is-on:nth-child(3n),
body.studio-body .studio-icon-grid .studio-icon-cell.is-on:nth-child(3n) {
  animation-delay: -1.9s;
}
body.studio-body .studio-fx-grid .studio-fx-tile.is-on:nth-child(3n + 2),
body.studio-body .studio-icon-grid .studio-icon-cell.is-on:nth-child(3n + 2) {
  animation-delay: -4.1s;
}

@keyframes hmi-on-breathe {
  0%, 100% {
    box-shadow:
      inset 2px 0 0 var(--yellow),
      inset 0 0 0 1px rgba(255, 242, 0, 0.14);
  }
  50% {
    box-shadow:
      inset 2px 0 0 var(--yellow),
      inset 0 0 0 1px rgba(255, 242, 0, 0.42),
      inset 0 0 18px rgba(255, 242, 0, 0.16);
  }
}

/* Головна жовта кнопка — «ядро» повільно набирає яскравість. */
body.studio-body .studio-btn.is-yellow {
  animation: hmi-core 6.4s ease-in-out infinite;
}

@keyframes hmi-core {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 0 26px -4px rgba(255, 242, 0, 0.5),
      0 12px 26px -18px rgba(255, 242, 0, 0.9);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 0 16px rgba(255, 255, 255, 0.32),
      0 0 32px -2px rgba(255, 242, 0, 0.62),
      0 12px 26px -18px rgba(255, 242, 0, 0.9);
  }
}

/* ── 7. Бігла неонова лінія ──────────────────────────────────────── */
body.studio-body .studio-magic-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(140, 175, 255, 0.9) 38%,
    #ffffff 54%,
    rgba(255, 242, 0, 0.9) 72%,
    transparent);
  box-shadow: 0 0 12px rgba(77, 109, 255, 0.75);
  animation: hmi-bar-run 9.5s linear infinite;
}

@keyframes hmi-bar-run {
  0% { transform: translateX(-110%); opacity: 0; }
  8% { opacity: 1; }
  84% { opacity: 1; }
  100% { transform: translateX(380%); opacity: 0; }
}

/* ── 8. Сцена листка — без анімацій ──────────────────────────────── */
/* fx208: прибрано «скан» — світлу смугу, яка повільно прокочувалась
   зверху вниз по полю з листком (hmi-sheet-beam, 12.5s). Вона працювала
   лише тут, але це найбільша ділянка екрана, тож кожен кадр змушував
   браузер перемальовувати всю сцену під час набору тексту чи
   перетягування. Поле листка тепер статичне. */

/* ── 9. Мерехтіння написів ───────────────────────────────────────── */
body.studio-body .studio-rail-kicker,
body.studio-body .studio-layers-kicker,
body.studio-body .studio-qrpick-kicker {
  animation: hmi-flicker 9s ease-in-out infinite;
}

@keyframes hmi-flicker {
  0%, 88%, 100% { opacity: 1; }
  89% { opacity: 0.55; }
  90% { opacity: 1; }
  92% { opacity: 0.7; }
  93.5% { opacity: 1; }
}

/* ── 10. Кутові мітки листка пульсують по черзі ──────────────────── */
body.studio-body .studio-crop i {
  filter: drop-shadow(0 0 6px rgba(255, 242, 0, 0.45));
  animation: hmi-crop 6.4s ease-in-out infinite;
}

body.studio-body .studio-crop i:nth-child(2) { animation-delay: -1.6s; }
body.studio-body .studio-crop i:nth-child(3) { animation-delay: -3.2s; }
body.studio-body .studio-crop i:nth-child(4) { animation-delay: -4.8s; }

@keyframes hmi-crop {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── 11. Верхня кромка вікон — біжить світло ─────────────────────── */
body.studio-body .studio-modal-card::before {
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(77, 109, 255, 0.9) 24%,
    #ffffff 46%,
    rgba(255, 242, 0, 0.95) 66%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  animation: hmi-edge-run 7s linear infinite;
}

@keyframes hmi-edge-run {
  0% { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}

/* ── 12. Дрібні живі індикатори ──────────────────────────────────── */
body.studio-body .studio-account-open-ico {
  --ico-glow: rgba(77, 109, 255, 0.6);
  animation: hmi-ico-pulse 4.6s ease-in-out infinite;
}

body.studio-body .studio-account-open.is-linked .studio-account-open-ico {
  --ico-glow: rgba(255, 242, 0, 0.65);
}

@keyframes hmi-ico-pulse {
  0%, 100% { box-shadow: 0 0 12px -3px var(--ico-glow); opacity: 0.88; }
  50% { box-shadow: 0 0 18px -2px var(--ico-glow); opacity: 1; }
}

body.studio-body .studio-scan-led {
  animation: hmi-led 5.6s ease-in-out infinite;
}

@keyframes hmi-led {
  0%, 100% { opacity: 1; }
  52% { opacity: 1; }
  55% { opacity: 0.4; }
  58% { opacity: 1; }
  62% { opacity: 0.62; }
  64% { opacity: 1; }
}

/* ── 13. Дрібні елементи плаваючої панелі ─────────────────────────── */
body.studio-body .plate-scale,
body.studio-body .plate-toolbar-fx,
body.studio-body .plate-tool-btn {
  border-radius: 0;
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
}

body.studio-body .plate-toolbar-close {
  border-radius: 0;
  clip-path: polygon(
    5px 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%,
    0 5px
  );
}

/* ── 14. Списки <select> у стилі студії ─────────────────────────── */
/* Нативне випадаюче меню малює ОС: без color-scheme воно біле, а
   сірі підписи на білому не читаються. */
body.studio-body {
  color-scheme: dark;
}

body.studio-body select {
  color-scheme: dark;
}

body.studio-body select option,
body.studio-body select optgroup {
  background-color: #060a16;
  color: #e8f0ff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 10px;
}

body.studio-body select optgroup {
  color: var(--yellow);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.studio-body select option:checked {
  background-color: #2e3192;
  color: #ffffff;
  font-weight: 700;
}

body.studio-body select option:hover,
body.studio-body select option:focus {
  background-color: #4d6dff;
  color: #ffffff;
}

/* Меню шрифтів: назви мають читатись, тому трохи більший інтерліньяж. */
body.studio-body #studio-font option,
body.studio-body #studio-type option,
body.studio-body #studio-align option {
  padding: 7px 10px;
}

/* ── 15. Тихий режим ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.studio-body .studio-magic-bar::after,
  body.studio-body .studio-press-sheet::after,
  body.studio-body .studio-modal-card::before,
  body.studio-body .studio-crop i,
  body.studio-body .studio-rail-kicker,
  body.studio-body .studio-layers-kicker,
  body.studio-body .studio-qrpick-kicker,
  body.studio-body .studio-account-open-ico,
  body.studio-body .studio-scan-led,
  body.studio-body .studio-btn.is-yellow,
  body.studio-body .studio-layer.is-on,
  body.studio-body .studio-fx-tile.is-on,
  body.studio-body .studio-deco-tile.is-on,
  body.studio-body .studio-icon-cell.is-on,
  body.studio-body .studio-accent-cell.is-on,
  body.studio-body .studio-photo-cell.is-on,
  body.studio-body .studio-btn:not(.is-dice)::after {
    animation: none !important;
  }

  body.studio-body .studio-magic-bar::after,
  body.studio-body .studio-press-sheet::after {
    opacity: 0;
  }

  body.studio-body .studio-modal-card::before {
    background-position: 50% 0;
  }

  body.studio-body .studio-crop i {
    opacity: 0.75;
  }
}


/* ── fx111: смартфон і планшет ─────────────────────────────────────── */
/* Шість правок із реального телефона:
   1) смуга шаблонів видно одразу, її не ховає is-collapsed;
   2) «Випадковий дизайн» → замки → ↺ ↻ + «Скинути» одним рядком у низу;
   3) плитки шаблонів більше не злипаються: назва у два рядки;
   4) шапка сцени вкладається у два рядки — назва, під нею чотири кнопки;
   5) хрестик у вікні ефектів не зрізається формою панелі;
   6) кругла підкладка не з'їдає кути QR-коду. */

@media (max-width: 1023px) {
  /* 1. Смуга шаблонів — зверху й завжди доступна. */
  .studio-rail {
    order: 0;
    padding: 9px 10px 6px;
    border-bottom: 1px solid var(--line);
  }

  /* is-collapsed ховав панель одразу після вибору шаблону — на телефоні
     через це «обрати шаблон» не знаходилось зовсім. */
  .studio-rail.is-collapsed {
    display: block;
  }

  /* fx262: рядок «Тип шаблону» лишає місце під кнопку «? Гайд», яка
     стоїть у тому самому рядку, біля правого краю (див. studio.css,
     .studio-topbar → position:absolute). Тому напис вертикально
     відцентрований і ніколи не заходить під кнопку. */
  .studio-rail-kicker {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0 0 6px;
    padding-right: 100px;
    font-size: 9px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .studio-plates {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  /* Плитки тримаємо картками: без цього `flex: 0 0 auto` розтягував
     кожну на всю ширину планшета (737 px на 768 px екрана). */
  .studio-plates > * {
    flex: 0 0 168px;
    min-width: 168px;
    max-width: 168px;
    scroll-snap-align: start;
  }

  /* Смуга видима постійно, тому режим «вибираю шаблон» не має гасити
     панель керування. */
  .studio-shell.is-picking-plate .studio-controls {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 760px) {
  /* 3. Плитки шаблонів: назва у два рядки, нічого не злипається. */
  .studio-plates > * {
    flex: 0 0 158px;
    min-width: 158px;
    max-width: 158px;
  }

  .studio-plate-btn {
    padding: 7px 8px;
  }

  .studio-plate-btn b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    line-height: 1.2;
    font-size: 10px;
  }

  .studio-plate-btn.is-on {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 4px;
  }

  .studio-plate-btn.is-on .studio-plate-copy {
    padding: 5px 7px;
  }

  /* 4. Шапка сцени у два рядки: назва, під нею чотири кнопки. */
  .studio-stage-head {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
  }

  .studio-stage-copy {
    flex: 1 1 100%;
    order: 1;
  }

  /* Чотири кнопки мають стати в один рядок, тому обгортки «розчиняємо» —
     їхні діти беруть участь у flex самої шапки. */
  .studio-stage-meta,
  .studio-stage-actions {
    display: contents;
  }

  .studio-stage-meta[hidden] {
    display: none !important;
  }

  .studio-stage-meta .studio-format { order: 2; }
  #studio-change-plate { order: 3; }
  .studio-stage-actions .studio-export { order: 4; }
  .studio-stage-actions .studio-share { order: 5; }

  .studio-stage-head .studio-format,
  .studio-stage-head #studio-change-plate,
  .studio-stage-head .studio-share,
  .studio-stage-head .studio-export {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Обгортки стають flex-рядками, а кнопка всередині розтягується сама.
     Висоту 100% тут ставити не можна: у flex-колонці вона замикається
     сама на себе і шапка рахує рядок нижчим, ніж він є. */
  .studio-stage-head .studio-format,
  .studio-stage-head .studio-share,
  .studio-stage-head .studio-export {
    display: flex;
  }

  .studio-stage-head .studio-format > *,
  .studio-stage-head .studio-share > *,
  .studio-stage-head .studio-export > * {
    flex: 1 1 auto;
    width: 100%;
  }

  .studio-stage-head .studio-btn,
  .studio-stage-head .studio-format-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 3px;
    font-size: 8.5px;
    letter-spacing: 0;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Підпис формату на 80 пікселях не влазить у рядок, тому лишаємо
     короткий варіант «формат · A4» замість «Формат шаблону · A4». */
  .studio-stage-head .studio-format-btn {
    font-size: 0;
  }

  .studio-stage-head .studio-format-btn::before {
    content: "формат ·";
    font-size: 8.5px;
  }

  .studio-stage-head .studio-format-btn strong {
    font-size: 9px;
  }

  .studio-stage-head .studio-share-toggle svg {
    display: none;
  }

  /* Випадаючі списки більше не центруються на 85-піксельній кнопці —
     інакше вони вилазили за лівий край екрана. */
  .studio-format-menu {
    left: 0;
    right: auto;
    transform: none;
    min-width: 0;
    width: min(258px, calc(100vw - 32px));
  }

  .studio-share-menu {
    width: min(320px, calc(100vw - 32px));
  }

  .studio-export-menu {
    width: min(248px, calc(100vw - 32px));
  }

  /* 2. «Скинути» та ↺ ↻ — одним рядком у самому низу панелі. */
  .studio-magic-bar {
    padding: 6px;
  }

  .studio-magic-tools {
    gap: 6px;
  }

  .studio-btn.is-dice {
    order: 1;
    flex: 1 1 100%;
  }

  .studio-locks {
    order: 2;
    flex: 1 1 100%;
    justify-content: center;
    gap: 4px;
  }

  .studio-undo-pair {
    order: 3;
    flex: 0 0 auto;
  }

  #studio-reset {
    order: 4;
    flex: 1 1 0;
    font-size: 10px;
    padding: 9px 8px;
  }

  .studio-undo-pair .studio-btn.is-icon {
    min-width: 42px;
    padding: 9px 10px;
  }

  .studio-lock {
    padding: 3px 6px;
    font-size: 9px;
  }

  /* 5. Вікно ефектів на телефоні: у межах екрана, тіло прокручується. */
  body.studio-body .studio-modal-card.is-fx {
    left: 8px !important;
    top: 8px !important;
    width: calc(100% - 16px) !important;
    max-height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
  }

  body.studio-body .studio-fx-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 5. Хрестик вікна ефектів. Панель має зрізані кути (clip-path), тому
   бейдж на -12px зрізався повністю — його не було видно ніде. Ставимо
   його всередину, де формі нічого зрізати. */
body.studio-body .studio-fx-close {
  top: 9px;
  right: 20px;
}

/* 5б. Хрестик тепер лежить у рядку заголовка, тому назва обʼєкта
   («Текст 1») залазила йому під палець — лишаємо під нього місце. */
body.studio-body .studio-fx-head {
  padding-right: 36px;
}

/* 6. Кругла підкладка більше не обрізає кути коду: полотно стоїть вище
   за підкладку, а обгортка його не ховає через overflow. */
.plate.is-studio2.is-card-round .plate-qr-wrap {
  overflow: visible;
}

.plate.is-studio2.is-card-round .plate-qr-wrap canvas {
  width: 74% !important;
  height: 74% !important;
  max-width: 74%;
  max-height: 74%;
}

.plate.is-studio2 .plate-qr-wrap > canvas {
  z-index: 6;
}

/* 6б. Підкладки-фігури з радіусом 50 % (коло, ореол, приціл, капсула…)
   малюються на тому ж полотні, що й код, і зрізали його кутові маркери.
   Відступ у fx42 тримав код усередині, але впритул (0.5 px запасу), тож
   на будь-якому округленні кути все одно зникали. Тепер полотно не
   обрізається взагалі: підкладка — це його фон, а код завжди зверху. */
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-round,
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-glow,
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-target,
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-eclipse,
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-vortex,
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-spiral,
.plate.is-studio2 .plate-qr-wrap > canvas.is-card-pill {
  overflow: visible !important;
}

/* ── fx132: іконки типів шаблону повернуто ───────────────────────────
   У fx115 іконку прибрали, і список перетворився на голий текст — тип
   шаблону стало важко знайти очима. Повертаємо плитку з іконкою ліворуч
   (28 px, у вибраного 36 px зі studio.css) і назвою праворуч. */
body.studio-body .studio-plate-btn {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  /* Плитка не має просiдати нижче зручної висоти пальця. */
  min-height: 36px;
  align-items: center;
}

body.studio-body .studio-plate-btn.is-on {
  grid-template-columns: 28px minmax(0, 1fr);
}

/* Копія живе в другій колонці — іконка лишається на своєму місці. */
body.studio-body .studio-plate-copy {
  grid-column: 2;
  min-width: 0;
}

/* ── fx117/fx119: знак шарів лише в «Шарах» + меню в три рядки ──────
   Правки з телефона:
   1) веселковий значок перед «Тип шаблону» — це іконка панелі шарів,
      у списку шаблонів вона зайва;
   2) «Випадковий дизайн» більше не розтягується на всю ширину: він
      тонкий і вузький, а «не змінювати» стоїть одразу праворуч від
      нього; уся панель займає рівно три рядки. */

body.studio-body .studio-rail-kicker::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  /* Вузька й тонка кнопка: ширина — по вмісту, не на всю панель.
     padding зліва лишає місце під ромб. */
  body.studio-body .studio-btn.is-dice {
    padding: 5px 10px 5px 21px;
    min-height: 0;
    font-size: 9.5px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    filter: drop-shadow(0 3px 8px rgba(46, 49, 146, 0.45));
  }

  body.studio-body .studio-btn.is-dice::before {
    left: 7px;
    width: 10px;
    height: 10px;
  }

  /* Панель — сітка, а не потік: кнопка зліва, «не змінювати» зразу
     праворуч від неї, ↺ ↻ і «Скинути» — у тому ж рядку на планшеті. */
  .studio-magic-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
  }

  .studio-magic-tools .studio-btn.is-dice {
    grid-area: 1 / 1;
    width: auto;
    justify-content: flex-start;
  }

  .studio-magic-tools .studio-locks {
    grid-area: 1 / 2;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 5px;
  }

  /* Підпис лишається видимим — інакше незрозуміло, що це за замки;
     він просто стає дрібним (8 px) і більше не переносить гурт. */
  .studio-magic-tools .studio-locks-kicker {
    display: inline;
    font-size: 8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-right: 1px;
  }

  body.studio-body .studio-lock {
    padding: 2px 5px;
    gap: 3px;
    font-size: 8px;
    letter-spacing: 0.02em;
  }

  .studio-lock input {
    width: 9px;
    height: 9px;
  }

  .studio-lock span {
    white-space: nowrap;
  }

  .studio-magic-tools .studio-undo-pair {
    grid-area: 1 / 3;
  }

  .studio-magic-tools #studio-reset {
    grid-area: 1 / 4;
    width: auto;
  }
}

@media (max-width: 760px) {
  /* Телефон — рівно ДВА рядки, без «гіпер-кнопок» і без дірок:
     рядок 1 — «Випадковий дизайн» + ↺ ↻ + «Скинути»;
     рядок 2 — «Не змінювати:» + чотири замки на всю ширину.
     Кнопка дизайну просто більша за решту (42 px заввишки, шрифт 11 px),
     але займає рівно стільки, скільки їй треба, — не весь рядок. */
  .studio-magic-tools {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 5px;
    align-items: stretch;
  }

  body.studio-body .studio-magic-tools .studio-btn.is-dice {
    grid-area: 1 / 1;
    width: auto;
    min-height: 42px;
    padding: 8px 12px 8px 26px;
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 1.15;
    justify-content: flex-start;
  }

  .studio-magic-tools .studio-btn.is-dice::before {
    left: 9px;
    width: 12px;
    height: 12px;
  }

  .studio-magic-tools .studio-undo-pair {
    grid-area: 1 / 2;
    justify-content: flex-start;
    align-items: stretch;
  }

  .studio-magic-tools .studio-btn.is-icon {
    min-width: 34px;
    padding: 0 6px;
  }

  body.studio-body .studio-magic-tools #studio-reset {
    grid-area: 1 / 3;
    width: auto;
    justify-self: end;
    min-height: 42px;
    padding: 8px 11px;
    font-size: 10px;
  }

  .studio-magic-tools .studio-locks {
    grid-area: 2 / 1 / 3 / -1;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2px;
  }

  .studio-magic-tools .studio-locks-kicker {
    display: inline;
    font-size: 7.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-right: 1px;
  }

  body.studio-body .studio-lock {
    padding: 1px 2px;
    gap: 2px;
    font-size: 8px;
    letter-spacing: 0;
  }

  .studio-lock input {
    width: 9px;
    height: 9px;
  }

  .studio-lock span {
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  /* Вузькі екрани (320–374 px): той самий поділ на два рядки,
     просто все трохи компактніше — інакше «Скинути» і останній замок
     вилазять за правий край панелі. */
  .studio-magic-tools {
    gap: 4px;
  }

  body.studio-body .studio-magic-tools .studio-btn.is-dice {
    padding: 8px 8px 8px 22px;
    font-size: 10px;
    min-height: 40px;
  }

  .studio-magic-tools .studio-btn.is-dice::before {
    left: 7px;
    width: 10px;
    height: 10px;
  }

  .studio-magic-tools .studio-btn.is-icon {
    min-width: 28px;
    padding: 0 4px;
  }

  body.studio-body .studio-magic-tools #studio-reset {
    padding: 7px 7px;
    font-size: 9px;
  }

  .studio-magic-tools .studio-locks {
    gap: 1px;
  }

  .studio-magic-tools .studio-locks-kicker {
    font-size: 6.5px;
    letter-spacing: 0;
    margin-right: 0;
  }

  body.studio-body .studio-lock {
    padding: 1px 1px;
    gap: 2px;
    font-size: 7px;
    letter-spacing: 0;
  }

  .studio-lock input {
    width: 7px;
    height: 7px;
  }
}

/* fx123: «Скинути» завжди притиснута до правого краю рядка.
   На планшеті/десктопі панель — flex із justify-content:center, тому
   кнопка «висіла» по центру (на 1024 не дотягувала до краю 41 px, а на
   1180–1440 взагалі переносилась і стояла посередині другого рядка).
   margin-left:auto перебирає вільне місце на себе, тож кнопка стоїть
   останньою в рядку, а якщо перенос неминучий — праворуч у своєму рядку. */
@media (min-width: 901px) {
  .studio-magic-tools #studio-reset {
    margin-left: auto;
  }
}

/* fx125: на планшеті (і далі) панель не переноситься — усі чотири групи
   стоять в ОДНОМУ рядку: «Випадковий дизайн» · ↺ ↻ · «Не змінювати:» з
   чотирма замками · «Скинути».
   Раніше сумарна ширина великих кнопок (852 px) не влазила в панель, яка
   буває 656–918 px, тому «Скинути» зʼїжджала на другий рядок (901, 1180–
   1440). Компактні розміри дають 636 px — влазить навіть у найвужчу панель. */
@media (min-width: 901px) {
  .studio-magic-tools {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
  }

  /* fx133: рядок заповнюємо не дірками, а розміром — кнопки більші,
     тож уся ширина панелі зайнята компактно, без порожніх проміжків.
     Дрібний кегль тримає «Випадковий дизайн» в одному рядку навіть у
     найвужчій панелі (656 px), інакше кнопка стає заввишки 53 px. */
  body.studio-body .studio-magic-tools .studio-btn.is-dice {
    padding: 7px 13px 7px 26px;
    min-height: 38px;
    font-size: 11.5px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .studio-magic-tools .studio-btn.is-dice::before {
    left: 9px;
    width: 12px;
    height: 12px;
  }

  /* Замки забирають усе вільне місце рядка й розкладаються по ньому
     рівно — тому праворуч перед «Скинути» більше немає дірки. */
  .studio-magic-tools .studio-locks {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .studio-magic-tools .studio-locks-kicker {
    display: inline;
    flex: 0 0 auto;
    font-size: 9.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    margin-right: 2px;
  }

  /* Замки самі розтягуються на вільну ширину рядка: кнопка стає більшою,
     а проміжки лишаються рівними — жодних порожніх дірок. */
  body.studio-body .studio-magic-tools .studio-lock {
    flex: 1 1 auto;
    justify-content: center;
    padding: 3px 6px;
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.01em;
  }

  .studio-magic-tools .studio-lock input {
    width: 11px;
    height: 11px;
  }

  .studio-magic-tools .studio-lock span {
    white-space: nowrap;
  }

  .studio-magic-tools .studio-btn.is-icon {
    min-width: 40px;
    min-height: 38px;
    padding: 0 10px;
  }

  body.studio-body .studio-magic-tools #studio-reset {
    margin-left: 0;
    width: auto;
    min-height: 38px;
    padding: 7px 13px;
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* ══ fx137: тридцять нових акцентів ═══════════════════════════════════
   Базовий .plate-bar — це лише верхня смуга 8px. Тому кожне правило тут
   повністю задає геометрію (top/left/right/bottom/width/height) і малює
   форму фоном, градієнтами або псевдоелементом. Колір завжди з --accent,
   а кожен піксель множиться на --zoom, щоб акцент ріс разом з аркушем. */

/* Бігунець: ряд «тире-крапка», як стрічка новин. */
.plate.is-studio2.is-bar-ticker .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(10px * var(--zoom, 1));
  background-color: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent, #fff200) 0 calc(12px * var(--zoom, 1)),
    transparent calc(12px * var(--zoom, 1)) calc(16px * var(--zoom, 1)),
    var(--accent, #fff200) calc(16px * var(--zoom, 1)) calc(18px * var(--zoom, 1)),
    transparent calc(18px * var(--zoom, 1)) calc(22px * var(--zoom, 1))
  );
}

/* Штрихкод: смуги різної товщини у два періоди — як справжній код. */
.plate.is-studio2.is-bar-barcode .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(20px * var(--zoom, 1));
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--accent, #fff200) 0 calc(3px * var(--zoom, 1)),
      transparent calc(3px * var(--zoom, 1)) calc(7px * var(--zoom, 1)),
      var(--accent, #fff200) calc(7px * var(--zoom, 1)) calc(8px * var(--zoom, 1)),
      transparent calc(8px * var(--zoom, 1)) calc(13px * var(--zoom, 1))
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(17px * var(--zoom, 1)),
      var(--accent, #fff200) calc(17px * var(--zoom, 1)) calc(21px * var(--zoom, 1))
    );
}

/* Лінія знизу: тонка волосяна смуга по нижньому краю. */
.plate.is-studio2.is-bar-edge .plate-bar {
  top: auto; bottom: 0; left: 0; right: 0;
  height: calc(3px * var(--zoom, 1));
}

/* Рейки: дві тонкі лінії — згори й знизу, без заливки. */
.plate.is-studio2.is-bar-rail .plate-bar {
  inset: 0;
  height: auto;
  background: transparent;
  border-top: calc(3px * var(--zoom, 1)) solid var(--accent, #fff200);
  border-bottom: calc(3px * var(--zoom, 1)) solid var(--accent, #fff200);
}

/* Хребет: вертикальна смуга зліва із заокругленим кінцем. */
.plate.is-studio2.is-bar-spine .plate-bar {
  top: 0; bottom: 0; left: 0; right: auto;
  width: calc(14px * var(--zoom, 1));
  height: auto;
  border-radius: 0 999px 999px 0;
}

/* Арки: ланцюг півкіл уздовж верхнього краю. */
.plate.is-studio2.is-bar-arches .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(18px * var(--zoom, 1));
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 100%, var(--accent, #fff200) 0 46%, transparent 47%);
  background-size: calc(18px * var(--zoom, 1)) calc(18px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Кола: ряд порожніх кілець. */
.plate.is-studio2.is-bar-rings .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(22px * var(--zoom, 1));
  background-color: transparent;
  background-image: radial-gradient(circle, transparent 0 38%, var(--accent, #fff200) 38% 62%, transparent 63%);
  background-size: calc(22px * var(--zoom, 1)) calc(22px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Блоки: три квадрати, що меншають, — сходи зліва згори. */
.plate.is-studio2.is-bar-blocks .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(26px * var(--zoom, 1));
  background-color: transparent;
  background-image:
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)),
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)),
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200));
  background-size:
    calc(14px * var(--zoom, 1)) calc(14px * var(--zoom, 1)),
    calc(9px * var(--zoom, 1)) calc(9px * var(--zoom, 1)),
    calc(5px * var(--zoom, 1)) calc(5px * var(--zoom, 1));
  background-position:
    0 0,
    calc(18px * var(--zoom, 1)) 0,
    calc(29px * var(--zoom, 1)) calc(9px * var(--zoom, 1));
  background-repeat: no-repeat;
}

/* Косі знизу: коса штриховка по нижньому краю. */
.plate.is-studio2.is-bar-slashes .plate-bar {
  top: auto; bottom: 0; left: 0; right: 0;
  height: calc(16px * var(--zoom, 1));
  background-color: transparent;
  background-image: repeating-linear-gradient(
    45deg,
    var(--accent, #fff200) 0 calc(6px * var(--zoom, 1)),
    transparent calc(6px * var(--zoom, 1)) calc(13px * var(--zoom, 1))
  );
}

/* Стрічка: смуга з вирізами-шевронами на кінцях. */
.plate.is-studio2.is-bar-ribbon .plate-bar {
  top: 38%; bottom: auto; left: -2%; right: -2%;
  height: 20%;
  background: var(--accent, #fff200);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}

/* Зубці: часточки-зубці, що ростуть догори від нижнього краю. */
.plate.is-studio2.is-bar-teeth .plate-bar {
  top: auto; bottom: 0; left: 0; right: 0;
  height: calc(20px * var(--zoom, 1));
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 0, transparent 0 49%, var(--accent, #fff200) 50%);
  background-size: calc(16px * var(--zoom, 1)) calc(20px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Сходи: сходинки в правому нижньому куті. */
.plate.is-studio2.is-bar-stairs .plate-bar {
  top: auto; bottom: 0; left: auto; right: 0;
  width: 34%; height: 30%;
  background: var(--accent, #fff200);
  clip-path: polygon(100% 0, 66% 0, 66% 33%, 33% 33%, 33% 66%, 0 66%, 0 100%, 100% 100%);
}

/* Сяйво лінії: тонка лінія з мʼяким світінням. */
.plate.is-studio2.is-bar-glowline .plate-bar {
  top: auto; bottom: calc(7px * var(--zoom, 1)); left: 6%; right: 6%;
  height: calc(4px * var(--zoom, 1));
  border-radius: 999px;
  background: var(--accent, #fff200);
  box-shadow: 0 0 calc(15px * var(--zoom, 1)) var(--accent, #fff200);
}

/* Намистини: ряд круглих намистин по нижньому краю. */
.plate.is-studio2.is-bar-beads .plate-bar {
  top: auto; bottom: 0; left: 0; right: 0;
  height: calc(12px * var(--zoom, 1));
  background-color: transparent;
  background-image: radial-gradient(circle, var(--accent, #fff200) 0 44%, transparent 46%);
  background-size: calc(12px * var(--zoom, 1)) calc(12px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Розчинення: смуга тане вбік. */
.plate.is-studio2.is-bar-fade .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(16px * var(--zoom, 1));
  background: linear-gradient(90deg, var(--accent, #fff200) 0 8%, transparent 78%);
}

/* Півколо: половина диска по центру знизу. */
.plate.is-studio2.is-bar-halfmoon .plate-bar {
  top: auto; bottom: 0; left: 24%; right: 24%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: var(--accent, #fff200);
}

/* Капсула: заокруглена пігулка по центру знизу. */
.plate.is-studio2.is-bar-pillbar .plate-bar {
  top: auto; bottom: calc(6px * var(--zoom, 1)); left: 14%; right: 14%;
  height: calc(9px * var(--zoom, 1));
  border-radius: 999px;
  background: var(--accent, #fff200);
}

/* Трикутник: кут зліва знизу. */
.plate.is-studio2.is-bar-triangle .plate-bar {
  top: auto; bottom: 0; left: 0; right: auto;
  width: 42%; height: 32%;
  background: var(--accent, #fff200);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Три кути: по трикутнику в трьох кутах аркуша. */
.plate.is-studio2.is-bar-tricorner .plate-bar {
  inset: 0;
  height: auto;
  background: transparent;
  background-image:
    linear-gradient(135deg, var(--accent, #fff200) 0 9%, transparent 9%),
    linear-gradient(225deg, var(--accent, #fff200) 0 9%, transparent 9%),
    linear-gradient(315deg, var(--accent, #fff200) 0 9%, transparent 9%);
}

/* Хрестик: плюс у правому верхньому куті. */
.plate.is-studio2.is-bar-plus .plate-bar {
  top: 0; bottom: auto; left: auto; right: 0;
  width: calc(38px * var(--zoom, 1));
  height: calc(7px * var(--zoom, 1));
  margin: calc(13px * var(--zoom, 1)) calc(13px * var(--zoom, 1)) 0 0;
  border-radius: calc(2px * var(--zoom, 1));
}
.plate.is-studio2.is-bar-plus .plate-bar::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(7px * var(--zoom, 1));
  height: calc(38px * var(--zoom, 1));
  margin: calc(-19px * var(--zoom, 1)) 0 0 calc(-3.5px * var(--zoom, 1));
  border-radius: calc(2px * var(--zoom, 1));
  background: var(--accent, #fff200);
}

/* Ікс: дві тонкі перекладини навхрест. */
.plate.is-studio2.is-bar-crossx .plate-bar {
  top: calc(10px * var(--zoom, 1)); bottom: auto;
  left: auto; right: calc(10px * var(--zoom, 1));
  width: calc(34px * var(--zoom, 1));
  height: calc(6px * var(--zoom, 1));
  border-radius: calc(3px * var(--zoom, 1));
  transform: rotate(45deg);
  transform-origin: 100% 0;
}
.plate.is-studio2.is-bar-crossx .plate-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent, #fff200);
  transform: rotate(-90deg);
}

/* Обруч: велике порожнє коло, що виходить за правий нижній кут. */
.plate.is-studio2.is-bar-hoop .plate-bar {
  top: auto; bottom: -14%; left: auto; right: -14%;
  width: 54%; height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: calc(9px * var(--zoom, 1)) solid var(--accent, #fff200);
}

/* Вертикалі: дрібні вертикальні лінії праворуч. */
.plate.is-studio2.is-bar-pins .plate-bar {
  top: 0; bottom: 0; left: auto; right: 0;
  width: 22%;
  height: auto;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--accent, #fff200) 0 calc(1.5px * var(--zoom, 1)),
    transparent calc(1.5px * var(--zoom, 1)) calc(6px * var(--zoom, 1))
  );
}

/* Шах: шахівниця в лівому нижньому куті. */
.plate.is-studio2.is-bar-checker .plate-bar {
  top: auto; bottom: 0; left: 0; right: auto;
  width: 30%; height: 14%;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, var(--accent, #fff200) 25%, transparent 25% 75%, var(--accent, #fff200) 75%),
    linear-gradient(45deg, var(--accent, #fff200) 25%, transparent 25% 75%, var(--accent, #fff200) 75%);
  background-size: calc(10px * var(--zoom, 1)) calc(10px * var(--zoom, 1));
  background-position: 0 0, calc(5px * var(--zoom, 1)) calc(5px * var(--zoom, 1));
}

/* Спрей: розсіяні часточки по верхній смузі. */
.plate.is-studio2.is-bar-speckle .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(22px * var(--zoom, 1));
  background-color: transparent;
  background-image:
    radial-gradient(circle, var(--accent, #fff200) 0 26%, transparent 28%),
    radial-gradient(circle, var(--accent, #fff200) 0 18%, transparent 20%);
  background-size:
    calc(17px * var(--zoom, 1)) calc(17px * var(--zoom, 1)),
    calc(11px * var(--zoom, 1)) calc(11px * var(--zoom, 1));
  background-position:
    0 0,
    calc(7px * var(--zoom, 1)) calc(9px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Цоколь: нижня плита й тонка лінія над нею. */
.plate.is-studio2.is-bar-socle .plate-bar {
  top: auto; bottom: 0; left: 0; right: 0;
  height: calc(12px * var(--zoom, 1));
}
.plate.is-studio2.is-bar-socle .plate-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: calc(2px * var(--zoom, 1));
  margin-bottom: calc(4px * var(--zoom, 1));
  background: var(--accent, #fff200);
}

/* Хвиля знизу: ланцюг півкіл по нижньому краю. */
.plate.is-studio2.is-bar-waveband .plate-bar {
  top: auto; bottom: 0; left: 0; right: 0;
  height: calc(16px * var(--zoom, 1));
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 100%, var(--accent, #fff200) 0 48%, transparent 49%);
  background-size: calc(20px * var(--zoom, 1)) calc(16px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Зсувна рамка: дві рамки, зсунуті одна від одної. */
.plate.is-studio2.is-bar-offsetframe .plate-bar {
  inset: 6%;
  height: auto;
  background: transparent;
  border: calc(3px * var(--zoom, 1)) solid var(--accent, #fff200);
}
.plate.is-studio2.is-bar-offsetframe .plate-bar::after {
  content: "";
  position: absolute;
  inset: calc(-9px * var(--zoom, 1)) calc(9px * var(--zoom, 1)) calc(9px * var(--zoom, 1)) calc(-9px * var(--zoom, 1));
  border: calc(3px * var(--zoom, 1)) solid var(--accent, #fff200);
}

/* Зубці згори: товста смуга з прямокутними вирізами. */
.plate.is-studio2.is-bar-topnotch .plate-bar {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(18px * var(--zoom, 1));
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--accent, #fff200) 0 62%, transparent 62%);
  background-size: calc(26px * var(--zoom, 1)) calc(18px * var(--zoom, 1));
  background-repeat: repeat-x;
}

/* Чотири кути: вісім коротких рисок, по дві в кожному куті. */
.plate.is-studio2.is-bar-corners4 .plate-bar {
  inset: 5%;
  height: auto;
  background:
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 0 0 / calc(16px * var(--zoom, 1)) calc(3px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 0 0 / calc(3px * var(--zoom, 1)) calc(16px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 100% 0 / calc(16px * var(--zoom, 1)) calc(3px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 100% 0 / calc(3px * var(--zoom, 1)) calc(16px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 0 100% / calc(16px * var(--zoom, 1)) calc(3px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 0 100% / calc(3px * var(--zoom, 1)) calc(16px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 100% 100% / calc(16px * var(--zoom, 1)) calc(3px * var(--zoom, 1)) no-repeat,
    linear-gradient(var(--accent, #fff200), var(--accent, #fff200)) 100% 100% / calc(3px * var(--zoom, 1)) calc(16px * var(--zoom, 1)) no-repeat;
}

/* ══ fx137: тридцять нових декорів тла ════════════════════════════════
   Декор — це шар під усім вмістом (.plate-wash), тому тут лише фон і
   прозорість: сам малюнок ніколи не перекриває текст. */

/* Велика крапка в правому нижньому куті. */
.plate.is-wash-bigdot .plate-wash {
  background: radial-gradient(circle at 84% 82%, var(--accent, #fff200) 0 7%, transparent 7.6%);
  opacity: 0.5;
}

/* Смуга, що розчиняється в тло. */
.plate.is-wash-fadeband .plate-wash {
  background: linear-gradient(90deg, transparent 0 6%, var(--accent, #fff200) 34% 62%, transparent 96%);
  opacity: 0.14;
}

/* Віньєтка: прозорий центр, акцент по кутах. */
.plate.is-wash-vignette .plate-wash {
  background: radial-gradient(ellipse 68% 62% at 50% 50%, transparent 0 52%, var(--accent, #fff200) 100%);
  opacity: 0.16;
}

/* Два кільця навколо центру. */
.plate.is-wash-ring2 .plate-wash {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, var(--accent, #fff200) 26% 27.2%, transparent 27.2%),
    radial-gradient(circle at 50% 50%, transparent 0 40%, var(--accent, #fff200) 40% 41%, transparent 41%);
  opacity: 0.28;
}

/* Дві косі смуги. */
.plate.is-wash-stripe2 .plate-wash {
  background:
    linear-gradient(118deg, transparent 0 14%, var(--accent, #fff200) 14% 22%, transparent 22%),
    linear-gradient(118deg, transparent 0 62%, var(--accent, #fff200) 62% 70%, transparent 70%);
  opacity: 0.18;
}

/* Зигзаг по нижньому краю. */
.plate.is-wash-zigzag2 .plate-wash {
  background-color: transparent;
  background-image:
    linear-gradient(135deg, var(--accent, #fff200) 25%, transparent 25%),
    linear-gradient(225deg, var(--accent, #fff200) 25%, transparent 25%);
  background-size: 26px 26px;
  background-position: 0 100%;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(0deg, #000 0 12%, transparent 22%);
  mask-image: linear-gradient(0deg, #000 0 12%, transparent 22%);
  opacity: 0.3;
}

/* Вертикальна колона точок. */
.plate.is-wash-dotsvert .plate-wash {
  background-color: transparent;
  background-image: radial-gradient(circle, var(--accent, #fff200) 0 34%, transparent 36%);
  background-size: 14px 14px;
  background-position: 88% 0;
  background-repeat: repeat-y;
  opacity: 0.32;
}

/* Три горизонтальні лінії. */
.plate.is-wash-tripleline .plate-wash {
  background:
    linear-gradient(180deg, transparent 0 24%, var(--accent, #fff200) 24% 24.6%, transparent 24.6%),
    linear-gradient(180deg, transparent 0 50%, var(--accent, #fff200) 50% 50.6%, transparent 50.6%),
    linear-gradient(180deg, transparent 0 76%, var(--accent, #fff200) 76% 76.6%, transparent 76.6%);
  opacity: 0.22;
}

/* Ліва грань: мʼякий перехід від лівого краю. */
.plate.is-wash-edgeleft .plate-wash {
  background: linear-gradient(90deg, var(--accent, #fff200) 0 2%, transparent 34%);
  opacity: 0.2;
}

/* Права грань. */
.plate.is-wash-edgeright .plate-wash {
  background: linear-gradient(270deg, var(--accent, #fff200) 0 2%, transparent 34%);
  opacity: 0.2;
}

/* Сяйво згори. */
.plate.is-wash-topglow .plate-wash {
  background: radial-gradient(ellipse 120% 44% at 50% 0, var(--accent, #fff200) 0 12%, transparent 62%);
  opacity: 0.2;
}

/* Сяйво знизу. */
.plate.is-wash-botglow .plate-wash {
  background: radial-gradient(ellipse 120% 44% at 50% 100%, var(--accent, #fff200) 0 12%, transparent 62%);
  opacity: 0.2;
}

/* Віяло з лівого верхнього кута. */
.plate.is-wash-cornerfan .plate-wash {
  background: repeating-conic-gradient(
    from 12deg at 0% 0%,
    var(--accent, #fff200) 0deg 3.4deg,
    transparent 3.4deg 11deg
  );
  opacity: 0.16;
}

/* Арки знизу. */
.plate.is-wash-arches2 .plate-wash {
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 100%, var(--accent, #fff200) 0 46%, transparent 47%);
  background-size: 34px 34px;
  background-position: 0 100%;
  background-repeat: repeat-x;
  opacity: 0.2;
}

/* Точкові соти. */
.plate.is-wash-hexdots .plate-wash {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 50% 50%, var(--accent, #fff200) 0 26%, transparent 28%),
    radial-gradient(circle at 0 0, var(--accent, #fff200) 0 26%, transparent 28%);
  background-size: 26px 26px;
  opacity: 0.24;
}

/* Тартан: дві системи тонких ліній навхрест. */
.plate.is-wash-plaidw .plate-wash {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 22px, var(--accent, #fff200) 22px 23px),
    repeating-linear-gradient(0deg, transparent 0 22px, var(--accent, #fff200) 22px 23px);
  opacity: 0.16;
}

/* Контур кола праворуч. */
.plate.is-wash-circleout .plate-wash {
  background: radial-gradient(circle at 100% 50%, transparent 0 26%, var(--accent, #fff200) 26% 27%, transparent 27%);
  opacity: 0.3;
}

/* Іскри: три дрібні спалахи. */
.plate.is-wash-sparkle .plate-wash {
  background:
    radial-gradient(circle at 18% 24%, var(--accent, #fff200) 0 1.4%, transparent 3%),
    radial-gradient(circle at 72% 16%, var(--accent, #fff200) 0 1%, transparent 2.4%),
    radial-gradient(circle at 56% 78%, var(--accent, #fff200) 0 1.6%, transparent 3.4%);
  opacity: 0.55;
}

/* Мʼяка сітка з розмиттям. */
.plate.is-wash-gridsoft .plate-wash {
  background-image:
    linear-gradient(var(--accent, #fff200) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent, #fff200) 1px, transparent 1px);
  background-size: 30px 30px;
  filter: blur(1.4px);
  opacity: 0.16;
}

/* Тонка смуга через середину. */
.plate.is-wash-bandthin .plate-wash {
  background: linear-gradient(180deg, transparent 0 47%, var(--accent, #fff200) 47% 48.2%, transparent 48.2%);
  opacity: 0.3;
}

/* Коса плита навскіс. */
.plate.is-wash-slantband .plate-wash {
  background: linear-gradient(112deg, transparent 0 58%, var(--accent, #fff200) 58% 78%, transparent 78%);
  opacity: 0.16;
}

/* Сходинки в правому верхньому куті. */
.plate.is-wash-stepsw .plate-wash {
  background: linear-gradient(90deg, transparent 0 66%, var(--accent, #fff200) 66%);
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 8%, transparent 8% 16%);
  mask-image: repeating-linear-gradient(0deg, #000 0 8%, transparent 8% 16%);
  opacity: 0.18;
}

/* Захід сонця: смуги, що меншають догори. */
.plate.is-wash-sunsets .plate-wash {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 6%,
    var(--accent, #fff200) 6% 9%,
    transparent 9% 14%
  );
  -webkit-mask-image: linear-gradient(0deg, #000 0 40%, transparent 92%);
  mask-image: linear-gradient(0deg, #000 0 40%, transparent 92%);
  opacity: 0.26;
}

/* Крупні точки в шаховому порядку. */
.plate.is-wash-dotsbig .plate-wash {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 30% 30%, var(--accent, #fff200) 0 22%, transparent 24%),
    radial-gradient(circle at 80% 80%, var(--accent, #fff200) 0 22%, transparent 24%);
  background-size: 44px 44px;
  opacity: 0.2;
}

/* Три хвилі. */
.plate.is-wash-wave3 .plate-wash {
  background:
    radial-gradient(ellipse 120% 22% at 50% 22%, transparent 0 78%, var(--accent, #fff200) 78% 80%, transparent 80%),
    radial-gradient(ellipse 120% 22% at 50% 52%, transparent 0 78%, var(--accent, #fff200) 78% 80%, transparent 80%),
    radial-gradient(ellipse 120% 22% at 50% 82%, transparent 0 78%, var(--accent, #fff200) 78% 80%, transparent 80%);
  opacity: 0.24;
}

/* Трикутник праворуч. */
.plate.is-wash-trianglew .plate-wash {
  background: var(--accent, #fff200);
  clip-path: polygon(100% 0, 100% 100%, 42% 22%);
  opacity: 0.16;
}

/* Решітка навскіс. */
.plate.is-wash-lattice .plate-wash {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 16px, var(--accent, #fff200) 16px 17px),
    repeating-linear-gradient(-45deg, transparent 0 16px, var(--accent, #fff200) 16px 17px);
  opacity: 0.14;
}

/* Зерно: найдрібніша фактура. */
.plate.is-wash-grainw .plate-wash {
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 50%, var(--accent, #fff200) 0 16%, transparent 18%);
  background-size: 7px 7px;
  opacity: 0.14;
}

/* Прожектор: конус світла згори. */
.plate.is-wash-spotlight .plate-wash {
  background: conic-gradient(from 158deg at 50% -10%, transparent 0deg 44deg, var(--accent, #fff200) 44deg 62deg, transparent 62deg 360deg);
  opacity: 0.14;
}

/* Дві грані: акцент з обох боків. */
.plate.is-wash-duoedge .plate-wash {
  background:
    linear-gradient(90deg, var(--accent, #fff200) 0 1.6%, transparent 26%),
    linear-gradient(270deg, var(--accent, #fff200) 0 1.6%, transparent 26%);
  opacity: 0.24;
}

/* ══════════════════════════════════════════════════════════════════════
   fx142 — чотири правки студії
     1) список QR: без блимаючих пікселів;
     2) підкладка коду завжди ПІД кодом — код не обрізається;
     3) «Фонові шари»: білий шрифт, білі іконки, біла лінія розділу;
     4) по лініях сітки тла біжать слабкі світні бліки.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Блимаючі пікселі у списку QR ──────────────────────────────────
   Анімацію знято; лишились ледь помітні статичні кутові цятки. */
body.studio-body .studio-qrpick-bit {
  animation: none !important;
  opacity: 0.3;
}

/* ── 2. Підкладка завжди під кодом ────────────────────────────────────
   Раніше підкладка малювалась на тому самому полотні, що й код: її
   радіус і відступ різали кутові маркери, а «Розмір» зʼїдав сам код.
   Тепер підкладку малює ::before обгортки, а полотно коду лежить поверх
   і не обрізається — підкладка лише нарощує рамку навколо нього.
   Змінні --fxcb-* ставить скрипт (див. fxPaint / fxLayerBits). */
.plate.is-studio2 .plate-qr-wrap.is-fxcard {
  overflow: visible;
}

.plate.is-studio2 .plate-qr-wrap.is-fxcard::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: calc(0px - var(--fxcb-p, 0px));
  background-color: var(--fxcb-bgc, var(--fxcb-bg, transparent));
  background-image: var(--fxcb-img, none);
  background-size: var(--fxcb-bgs, auto);
  background-position: var(--fxcb-bgp, 0 0);
  background-repeat: var(--fxcb-bgr, repeat);
  border: var(--fxcb-bd, 0);
  border-radius: var(--fxcb-r, 0);
  box-shadow: var(--fxcb-sh, none);
  z-index: 0;
  pointer-events: none;
}

/* Код — завжди зверху підкладки. */
.plate.is-studio2 .plate-qr-wrap.is-fxcard > canvas {
  position: relative;
  z-index: 1;
}

/* Круглі підкладки мусять бути не менші за діагональ коду (22 % з
   кожного боку), інакше код вилізе за їхній край. */
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-round::before,
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-glow::before,
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-target::before,
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-eclipse::before,
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-vortex::before,
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-spiral::before,
.plate.is-studio2 .plate-qr-wrap.is-fxcard.is-card-pill::before {
  margin: calc(0px - max(var(--fxcb-p, 0px), 22%));
}

/* ── 3. «Фонові шари»: усе біле ───────────────────────────────────────
   Селектори з body.studio-body перекривають жовті правила HMI-теми. */
body.studio-body .studio-layers-kicker.is-deco {
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.62);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body.studio-body .studio-layer.is-deco .studio-layer-pick,
body.studio-body .studio-layer.is-deco:hover .studio-layer-pick,
body.studio-body .studio-layer.is-deco.is-on .studio-layer-pick {
  color: #fff;
}

body.studio-body .studio-layer.is-deco .studio-layer-ico,
body.studio-body .studio-layer.is-deco:hover .studio-layer-ico,
body.studio-body .studio-layer.is-deco.is-on .studio-layer-ico {
  color: #fff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.42));
}

/* Іконки-кнопки всередині тих самих рядків: олівець, «×», «↑», «↓». */
body.studio-body .studio-layer.is-deco .studio-layer-lock.is-deco-edit,
body.studio-body .studio-layer.is-deco .studio-layer-btn,
body.studio-body .studio-layer.is-deco .studio-layer-tools button {
  color: #fff;
}

body.studio-body .studio-layer.is-deco .studio-layer-btn:hover:not(:disabled),
body.studio-body .studio-layer.is-deco .studio-layer-tools button:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

/* fx264: пульс по лініях сітки тла (fx143) прибрано — лишилася тільки
   статична сітка .studio-grid. */

/* ── fx145 ─────────────────────────────────────────────────────────────
   1) Напрямні центрування (як у Photoshop): синя лінія зʼявляється лише в
      момент, коли обʼєкт стає на центр листка або на центр іншого обʼєкта.
      Раніше в розмітці вже були .plate-guides, але правила для .is-on не
      існувало — лінії не показувалися ніколи.
   2) Кнопка «Розграфити листок» у лівому нижньому куті сцени та сама сітка
      рівних сірих клітинок для точного вимірювання.
   Все статичне: жодних циклічних анімацій, лише короткий спалах лінії. */

body.studio-body .plate.is-studio2 .plate-guides {
  z-index: 14;
}

body.studio-body .plate.is-studio2 .plate-guides i {
  /* Токен --blue у темі — темно-синій #2e3192, на сцені він майже не читається,
     тому лінія центрування має власний яскравий синій. */
  background: #4d6dff;
  box-shadow: 0 0 9px rgba(77, 109, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.6);
}

body.studio-body .plate.is-studio2 .plate-guides i.is-on {
  display: block;
  animation: studio-snap-line 0.22s ease-out both;
}

@keyframes studio-snap-line {
  0% { opacity: 0.15; }
  45% { opacity: 1; }
  100% { opacity: 0.9; }
}

/* ── Сітка листка (крок клітинки задає JS через --gx / --gy) ───────── */
body.studio-body .plate.is-studio2 > .plate-grid {
  --gx: 5%;
  --gy: 5%;
  position: absolute;
  inset: 0;
  z-index: 9;
  display: none;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(126, 130, 144, 0.34) 0 1px, transparent 1px var(--gx)),
    repeating-linear-gradient(0deg, rgba(126, 130, 144, 0.34) 0 1px, transparent 1px var(--gy)),
    repeating-linear-gradient(90deg, rgba(86, 90, 108, 0.62) 0 1px, transparent 1px calc(var(--gx) * 5)),
    repeating-linear-gradient(0deg, rgba(86, 90, 108, 0.62) 0 1px, transparent 1px calc(var(--gy) * 5));
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat;
}

body.studio-body .plate.is-studio2.is-grid-on > .plate-grid {
  display: block;
}

/* Перехрестя центру листка — щоб око бачило середину без обʼєктів на ній. */
body.studio-body .plate.is-studio2 > .plate-grid::before,
body.studio-body .plate.is-studio2 > .plate-grid::after {
  content: "";
  position: absolute;
  background: rgba(77, 109, 255, 0.42);
}

body.studio-body .plate.is-studio2 > .plate-grid::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
}

body.studio-body .plate.is-studio2 > .plate-grid::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
}

/* Сітка й напрямні ніколи не потрапляють в експорт. */
body.studio-body .plate.is-exporting > .plate-grid,
body.studio-body .plate.is-exporting > .plate-guides {
  display: none !important;
}

/* ── Тумблер «Розграфити листок» (лівий нижній кут) ────────────────── */
body.studio-body .studio-press-body > .studio-grid-toggle {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(238, 241, 248, 0.82);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.14s linear, border-color 0.14s linear, background 0.14s linear;
}

body.studio-body .studio-press-body > .studio-grid-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}

body.studio-body .studio-press-body > .studio-grid-toggle:focus-visible {
  outline: 2px solid #4d6dff;
  outline-offset: 2px;
}

body.studio-body .studio-press-body > .studio-grid-toggle .studio-grid-toggle-ico {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.75;
}

body.studio-body .studio-press-body > .studio-grid-toggle.is-on {
  color: #d7e4ff;
  border-color: rgba(77, 109, 255, 0.75);
  background: rgba(77, 109, 255, 0.18);
  box-shadow: 0 0 12px rgba(77, 109, 255, 0.35);
}

body.studio-body .studio-press-body > .studio-grid-toggle.is-on .studio-grid-toggle-ico {
  opacity: 1;
}

@media (max-width: 640px) {
  body.studio-body .studio-press-body > .studio-grid-toggle {
    left: 6px;
    bottom: 6px;
    padding: 6px 8px;
    gap: 5px;
    letter-spacing: 0.1em;
  }
}
/* ══ fx148: «Перегляд вашого дизайну» + згорнута рейка на телефоні ═════
   1) Кнопка перегляду: біла, чорний текст, форма — дзеркало «кидка»
      (.is-dice зрізає лівий-верхній і правий-нижній): тут зрізано
      правий-верхній і лівий-нижній кути.
   2) До 1100 px рейка після вибору шаблону згортається в один рядок
      «ТИП ШАБЛОНУ · ТЕКСТ», а горизонтальна смуга плиток зникає.
   3) Там, де в шапці сцени стояла назва шаблону (порожній рядок), на
      телефоні й планшеті — кнопка перегляду по центру.
   4) Нитки пульсу під великими панелями більше не анімуються. */

body.studio-body .studio-btn.is-preview {
  flex: 0 0 auto;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: #ffffff;
  background-image: none;
  color: #0a0a0a;
  font-weight: 700;
  text-shadow: none;
  box-shadow: none;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}

/* Наведення й фокус лишаються світлими: чорний текст на білому —
   інакше кнопка зливалася б із синьою панеллю, як решта .studio-btn. */
body.studio-body .studio-btn.is-preview:hover,
body.studio-body .studio-btn.is-preview:focus-visible {
  border-color: #ffffff;
  background: #eef2ff;
  background-image: none;
  color: #0a0a0a;
  box-shadow: none;
}

body.studio-body .studio-btn.is-preview.is-busy {
  opacity: 0.6;
  cursor: progress;
}

/* ── Перегляд: підкладка з готовою картинкою листка ─────────────────── */
.studio-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 7, 18, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.studio-preview-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.studio-preview-card {
  position: relative;
  max-width: min(92vw, 720px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-preview-img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9);
}

.studio-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.92);
  color: #ffffff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.studio-preview-close:hover,
.studio-preview-close:focus-visible {
  background: #ffffff;
  color: #0a0a0a;
}

body.studio-preview-open {
  overflow: hidden;
}

@media (max-width: 1023px) {
  /* Рейка: після вибору шаблону — один рядок із типом. */
  body.studio-body .studio-rail.is-collapsed {
    display: block;
    padding: 8px 12px 9px;
  }

  body.studio-body .studio-rail.is-collapsed .studio-plates {
    display: none;
  }

  body.studio-body .studio-rail.is-collapsed .studio-rail-kicker {
    margin: 0;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Шапка сцени: назву шаблону вже показує рейка — на її місці перегляд. */
  body.studio-body .studio-stage-meta {
    flex-wrap: wrap;
  }

  body.studio-body .studio-stage-copy {
    display: none;
  }

  body.studio-body #studio-preview {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 8px;
    min-height: 38px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

@media (max-width: 760px) {
  body.studio-body #studio-preview {
    min-height: 36px;
    margin: 0 0 2px;
    padding: 6px 10px;
    font-size: 9.5px;
    letter-spacing: 0.02em;
  }

  .studio-preview-overlay {
    padding: 0;
  }

  .studio-preview-card {
    max-width: 100vw;
    max-height: 100vh;
  }

  .studio-preview-img {
    max-width: 100vw;
    max-height: 88vh;
    border-radius: 0;
  }

  .studio-preview-close {
    top: 10px;
    right: 10px;
  }
}

/* ══ fx149: «Розграфити» на компі — під листком, навпроти масштабу ════
   На телефоні панель шарів зверху, тому кнопка стоїть у самому куті.
   На компі зліва від листка лежить панель шарів (216 px + 8 px відступ
   + 12 px padding преса), тож кут «навпроти масштабу» — це лівий край
   листка, а не лівий край панелі. */
body.studio-body .studio-press-body > .studio-grid-toggle {
  left: calc(18px + 216px + 8px + 12px);
}

@media (max-width: 760px) {
  body.studio-body .studio-press-body > .studio-grid-toggle {
    left: 18px;
  }
}

@media (max-width: 640px) {
  body.studio-body .studio-press-body > .studio-grid-toggle {
    left: 6px;
  }
}

/* ══ fx149: десять мальованих декорів тла ═════════════════════════════
   Як і решта декорів (fx137), це шар ПІД усім вмістом: тільки фон і
   прозорість, жодного mix-blend-mode — експорт у PNG малює те саме. */
.plate.is-wash-markerscribble .plate-wash {
  background:
    repeating-linear-gradient(18deg, transparent 0 26px, rgba(10, 10, 10, 0.55) 26px 28px, transparent 28px 54px),
    repeating-linear-gradient(122deg, transparent 0 34px, rgba(10, 10, 10, 0.34) 34px 36px, transparent 36px 70px),
    repeating-linear-gradient(74deg, transparent 0 19px, rgba(46, 49, 146, 0.3) 19px 20px, transparent 20px 43px);
  opacity: 0.55;
}

.plate.is-wash-oilwash .plate-wash {
  background:
    linear-gradient(-24deg, transparent 0 20%, var(--accent, #fff200) 25% 33%, transparent 38% 52%, rgba(46, 49, 146, 0.5) 57% 65%, transparent 70% 100%),
    repeating-linear-gradient(66deg, transparent 0 7px, rgba(255, 255, 255, 0.16) 7px 8px, transparent 8px 16px);
  opacity: 0.42;
}

.plate.is-wash-brushband .plate-wash {
  background:
    linear-gradient(52deg, transparent 0 33%, rgba(10, 10, 10, 0.6) 38% 47%, transparent 52% 100%),
    linear-gradient(52deg, transparent 0 58%, rgba(10, 10, 10, 0.28) 61% 66%, transparent 70% 100%);
  opacity: 0.45;
}

.plate.is-wash-splat .plate-wash {
  background:
    radial-gradient(circle at 22% 28%, rgba(10, 10, 10, 0.75) 0 2.2%, transparent 3.6%),
    radial-gradient(circle at 37% 19%, rgba(10, 10, 10, 0.55) 0 1.4%, transparent 2.6%),
    radial-gradient(circle at 31% 41%, rgba(10, 10, 10, 0.45) 0 1%, transparent 2.2%),
    radial-gradient(circle at 74% 66%, var(--accent, #fff200) 0 3%, transparent 4.6%),
    radial-gradient(circle at 63% 78%, rgba(10, 10, 10, 0.35) 0 1.2%, transparent 2.4%);
  opacity: 0.6;
}

.plate.is-wash-crayonhatch .plate-wash {
  background:
    repeating-linear-gradient(38deg, transparent 0 7px, rgba(255, 255, 255, 0.5) 7px 8px, transparent 8px 15px),
    repeating-linear-gradient(-38deg, transparent 0 11px, rgba(255, 255, 255, 0.22) 11px 12px, transparent 12px 24px);
  opacity: 0.34;
}

.plate.is-wash-tornpaper .plate-wash {
  background:
    repeating-linear-gradient(94deg, transparent 0 13px, rgba(10, 10, 10, 0.6) 13px 14px, transparent 14px 31px),
    repeating-linear-gradient(86deg, transparent 0 17px, rgba(10, 10, 10, 0.4) 17px 18px, transparent 18px 37px);
  background-size: 100% 20%, 100% 14%;
  background-position: 0 64%, 0 84%;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.plate.is-wash-inkblot .plate-wash {
  background:
    radial-gradient(circle at 24% 34%, rgba(10, 10, 10, 0.62) 0 6%, rgba(10, 10, 10, 0.32) 8%, transparent 14%),
    radial-gradient(circle at 71% 62%, rgba(10, 10, 10, 0.5) 0 5%, rgba(10, 10, 10, 0.24) 7%, transparent 13%),
    radial-gradient(circle at 58% 22%, rgba(10, 10, 10, 0.28) 0 2%, transparent 8%);
  opacity: 0.55;
}

.plate.is-wash-gouacheblob .plate-wash {
  background:
    radial-gradient(circle at 20% 26%, rgba(46, 49, 146, 0.34) 0 22%, transparent 38%),
    radial-gradient(circle at 78% 34%, rgba(242, 84, 61, 0.32) 0 20%, transparent 36%),
    radial-gradient(circle at 48% 86%, var(--accent, #fff200) 0 18%, transparent 36%);
  opacity: 0.38;
}

.plate.is-wash-spraydots .plate-wash {
  background:
    radial-gradient(rgba(10, 10, 10, 0.55) 0.9px, transparent 1.5px),
    radial-gradient(rgba(10, 10, 10, 0.3) 1.6px, transparent 2.4px);
  background-size: 9px 9px, 23px 23px;
  opacity: 0.5;
}

.plate.is-wash-chalkline .plate-wash {
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(255, 255, 255, 0.42) 21px 23px, transparent 23px 46px),
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(255, 255, 255, 0.2) 33px 34px, transparent 34px 61px);
  opacity: 0.3;
}

/* ══════════════════════════════════════════════════════════════════
   FX153 — випадковий дизайн: тип (легкий / помірний / деталізований)
   та вікно параметрів (що не змінювати).
   ══════════════════════════════════════════════════════════════════ */

/* ── Кнопка «Параметри» поруч із кубиком ─────────────────────────── */
.studio-btn.is-randopts {
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 8px 12px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.studio-btn.is-randopts[hidden] {
  display: none !important;
}

/* ── Вікно вибору типу ───────────────────────────────────────────── */
.studio-modal-card.is-rtype {
  width: min(880px, 100%);
  padding: 34px 20px 20px;
}

.studio-rtype-title {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
}

.studio-rtype-lead {
  margin: 0 auto 20px;
  max-width: 54ch;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: #b9c9e8;
}

.studio-rtype-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-rtype-tile {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--hmi-hair);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  color: #e6eeff;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.studio-rtype-tile:hover {
  border-color: rgba(135, 170, 255, 0.7);
  background: linear-gradient(180deg, rgba(77, 109, 255, 0.2), rgba(77, 109, 255, 0.05));
}

.studio-rtype-tile:focus-visible {
  outline: none;
  border-color: var(--yellow);
  box-shadow: inset 0 0 0 1px var(--yellow);
}

.studio-rtype-tile.is-on {
  border-color: var(--yellow);
  background: linear-gradient(180deg, rgba(255, 242, 0, 0.14), rgba(255, 242, 0, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 242, 0, 0.55);
}

.studio-rtype-art {
  display: block;
  width: 100%;
  height: 148px;
  overflow: hidden;
}

.studio-rtype-pick {
  display: flex;
  align-items: center;
  gap: 7px;
}

.studio-rtype-dot {
  flex: 0 0 auto;
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(180, 200, 255, 0.65);
  border-radius: 50%;
  background: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.studio-rtype-tile.is-on .studio-rtype-dot {
  border-color: var(--yellow);
  background: var(--yellow);
  box-shadow: 0 0 10px -2px var(--hmi-glow-y);
}

.studio-rtype-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}

.studio-rtype-tile.is-on .studio-rtype-name {
  color: var(--yellow);
}

.studio-rtype-hint {
  display: block;
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(185, 201, 232, 0.85);
}

.studio-rtype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.studio-rtype-chips em {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
}

.studio-rtype-tile.is-on .studio-rtype-chips em {
  border-color: rgba(255, 242, 0, 0.5);
  color: var(--yellow);
}

.studio-modal-card.is-rtype .studio-modal-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.studio-modal-card.is-rtype .studio-modal-actions .studio-btn {
  flex: 0 1 200px;
}

/* ── Мініатюра листка в плитці типу ──────────────────────────────── */
.rt-mini {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f8f6f0;
  border: 1px solid rgba(10, 12, 22, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.rt-mini > i {
  position: absolute;
  display: block;
  font-style: normal;
}

.rt-txt {
  left: 12%;
  top: 15%;
  width: 46%;
  height: 6.5%;
  background: #12141f;
}

.rt-txt.two {
  top: 26%;
  width: 31%;
  height: 4%;
  background: rgba(18, 20, 31, 0.4);
}

.rt-qr {
  right: 11%;
  bottom: 12%;
  width: 46%;
  aspect-ratio: 1 / 1;
  background: #12141f;
}

.rt-qr::before,
.rt-qr::after {
  content: "";
  position: absolute;
  width: 26%;
  aspect-ratio: 1 / 1;
  background: #f8f6f0;
}

.rt-qr::before {
  left: 11%;
  top: 11%;
}

.rt-qr::after {
  right: 11%;
  bottom: 11%;
}

.rt-wash {
  border-radius: 50%;
}

.rt-wash.w1 {
  left: -16%;
  top: -18%;
  width: 64%;
  aspect-ratio: 1 / 1;
  background: rgba(46, 49, 146, 0.2);
}

.rt-wash.w2 {
  right: -18%;
  bottom: -20%;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 242, 0, 0.5);
}

.rt-bar.b1 {
  left: 12%;
  bottom: 17%;
  width: 28%;
  height: 3.6%;
  background: #2e3192;
}

.rt-bar.b2 {
  right: 12%;
  top: 8%;
  width: 21%;
  height: 2.6%;
  background: #e9c400;
}

.rt-ring {
  right: 4%;
  bottom: 5%;
  width: 60%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid rgba(18, 20, 31, 0.45);
  border-radius: 50%;
}

.rt-spark.s1 {
  left: 13%;
  bottom: 42%;
  width: 8%;
  aspect-ratio: 1 / 1;
  background: #2e3192;
  transform: rotate(45deg);
}

.rt-spark.s2 {
  right: 33%;
  top: 13%;
  width: 5%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #e9c400;
}

/* Помірний — трохи щільніший папір. */
.rt-mini.is-medium {
  background: #f3efe4;
}

/* Деталізований — найбільше оформлення, але стримана палітра. */
.rt-mini.is-rich {
  background: #efeade;
}

.rt-mini.is-rich .rt-txt {
  height: 7%;
}

/* ── Вікно параметрів ────────────────────────────────────────────── */
.studio-modal-card.is-rparams {
  width: min(540px, 100%);
  padding: 30px 18px 20px;
}

.studio-rparams-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 34px;
  margin: 0 0 6px;
}

.studio-rparams-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
}

/* fx183: «Змінити тип дизайну» — біла пігулка з чорним написом.
   Раніше це був підкреслений жовтий текст, який губився поряд із жирним
   заголовком вікна. Біла заливка робить його єдиною помітною дією в
   рядку заголовка, а чорний напис дає максимальний контраст на ній. */
.studio-rparams-change {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: #ffffff;
  padding: 6px 12px;
  margin-top: 3px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  color: #0a0a0a;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.studio-rparams-change:hover {
  background: var(--yellow);
  color: #0a0a0a;
  transform: translateY(-1px);
}

.studio-rparams-change:active {
  transform: translateY(0);
}

.studio-rparams-change:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.studio-rparams-lead {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #b9c9e8;
}

.studio-rparams-lead strong {
  color: var(--yellow);
  font-weight: 700;
}

.studio-rparams-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.studio-rparams-list .studio-lock {
  justify-content: flex-start;
  padding: 8px 9px;
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

@media (max-width: 860px) {
  .studio-rtype-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .studio-modal-card.is-rtype {
    padding: 30px 14px 16px;
  }

  .studio-rtype-title {
    font-size: 18px;
  }

  .studio-rtype-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .studio-rtype-art {
    height: 118px;
  }

  .studio-rtype-tile {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas:
      "art pick"
      "art hint"
      "art chips";
    align-items: start;
    column-gap: 10px;
    row-gap: 4px;
  }

  .studio-rtype-art {
    grid-area: art;
    height: 92px;
  }

  .studio-rtype-pick {
    grid-area: pick;
  }

  .studio-rtype-hint {
    grid-area: hint;
  }

  .studio-rtype-chips {
    grid-area: chips;
  }

  .studio-modal-card.is-rtype .studio-modal-actions {
    flex-direction: column-reverse;
  }

  .studio-modal-card.is-rtype .studio-modal-actions .studio-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 430px) {
  .studio-rparams-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-rtype-tile,
  .studio-rtype-dot {
    transition: none;
  }
}

/* ── Кнопка «Параметри» в панелі магії: місце в кожному розкладі ────
   Десктоп (>900) — звичайний flex-рядок, кнопка просто стає поруч із
   кубиком. Планшет (≤900) — сітка, вільна комірка 1/2. Телефон (≤760) —
   окремий другий рядок на всю ширину панелі. */
@media (min-width: 901px) {
  .studio-magic-tools #studio-rand-opts {
    flex: 0 1 auto;
  }
}

@media (max-width: 900px) {
  .studio-magic-tools #studio-rand-opts {
    justify-self: start;
    min-height: 38px;
  }
}

@media (max-width: 760px) {
  .studio-magic-tools #studio-rand-opts {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: stretch;
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 9.5px;
  }
}

/* ── Низькі та вузькі екрани: вікна не обрізаються зверху/знизу ─────
   body.studio-modal-open ховає прокрутку сторінки, тож скролитися мусить
   саме оверлей. Картка з auto-margin’ами центрується, коли місця
   достатньо, і притискається до верху, коли ні — решта доступна скролом. */
#studio-rtype-modal,
#studio-rparams-modal {
  align-items: start;
  justify-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#studio-rtype-modal .studio-modal-card.is-rtype,
#studio-rparams-modal .studio-modal-card.is-rparams {
  margin-top: auto;
  margin-bottom: auto;
}

@media (max-height: 700px) {
  .studio-modal-card.is-rtype {
    padding: 22px 16px 14px;
  }

  .studio-rtype-title {
    font-size: 17px;
  }

  .studio-rtype-lead {
    margin-bottom: 12px;
    font-size: 11.5px;
  }

  .studio-rtype-art {
    height: 104px;
  }
}

@media (max-height: 520px) {
  .studio-rtype-art {
    height: 80px;
  }

  .studio-rtype-hint {
    display: none;
  }

  .studio-modal-card.is-rtype .studio-modal-actions {
    margin-top: 12px;
  }
}

/* Кнопки завжди на виду: доки картка вища за екран, футер «прилипає»
   до низу оверлея, тож «Застосувати» / «Скасувати» не треба шукати. */
#studio-rtype-modal .studio-modal-actions,
#studio-rparams-modal .studio-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 14px;
  padding: 12px 0 2px;
  background: linear-gradient(
    to bottom,
    rgba(18, 20, 31, 0) 0,
    #12141f 16px,
    #12141f 100%
  );
}

/* ── fx158: тип дизайну обирають на власному листку ──────────────────
   Вікно більше не накриває аркуш по центру: воно стало компактною
   панеллю в лівому нижньому куті. Поруч лишається видно сам листок,
   і кожен клік по типу одразу перемальовує його — людина обирає вже
   готовий дизайн, а не опис. */
#studio-rtype-modal {
  display: grid;
  place-items: end start;
  padding: 14px;
  background: rgba(6, 8, 18, 0.3);
  align-items: end;
  justify-items: start;
  overflow: visible;
}

#studio-rtype-modal .studio-modal-card.is-rtype {
  width: min(392px, 100%);
  max-height: calc(100vh - 28px);
  margin: 0;
  padding: 16px 14px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
}

#studio-rtype-modal .studio-rtype-title {
  margin: 0 0 4px;
  padding-right: 28px;
  font-size: 14px;
  line-height: 1.26;
  text-align: left;
}

#studio-rtype-modal .studio-rtype-lead {
  margin: 0 0 10px;
  max-width: none;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
}

#studio-rtype-modal .studio-rtype-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

/* Плитка — горизонтальна картка: мініатюра ліворуч, підпис праворуч. */
#studio-rtype-modal .studio-rtype-tile {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "art pick"
    "art hint"
    "art chips";
  align-items: center;
  gap: 2px 10px;
  padding: 7px;
}

#studio-rtype-modal .studio-rtype-art {
  grid-area: art;
  width: 76px;
  height: 108px;
  min-height: 0;
}

#studio-rtype-modal .studio-rtype-pick { grid-area: pick; }
#studio-rtype-modal .studio-rtype-name { font-size: 12px; }

#studio-rtype-modal .studio-rtype-hint {
  grid-area: hint;
  font-size: 9.5px;
  line-height: 1.4;
}

#studio-rtype-modal .studio-rtype-chips {
  grid-area: chips;
  margin-top: 0;
  gap: 3px;
}

#studio-rtype-modal .studio-rtype-chips em {
  font-size: 7.5px;
  padding: 1px 4px;
}

#studio-rtype-modal .studio-modal-actions {
  gap: 7px;
}

#studio-rtype-modal .studio-modal-actions .studio-btn {
  flex: 1 1 0;
}

@media (max-width: 760px) {
  #studio-rtype-modal {
    place-items: end center;
    justify-items: center;
    padding: 8px;
  }

  #studio-rtype-modal .studio-modal-card.is-rtype {
    width: 100%;
    max-height: 74vh;
  }
}

/* ── Мініатюра = справжній листок: папір, чорнило й акцент користувача,
     його заголовок і підпис. Різниця між плитками — лише в кількості
     оформлення, тобто в тому, що додає сам випадковий дизайн. ─────── */
.rt-mini.is-light,
.rt-mini.is-medium,
.rt-mini.is-rich {
  background: var(--rt-paper, #f8f6f0);
}

.rt-mini > b {
  position: absolute;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: normal;
  color: var(--rt-ink, #12141f);
}

.rt-mini .rt-head {
  left: 11%;
  top: 10%;
  width: 80%;
  font-size: 8px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.rt-mini .rt-sub {
  left: 11%;
  top: 22%;
  width: 68%;
  font-size: 5.5px;
  line-height: 1.15;
  font-weight: 500;
  opacity: 0.68;
}

.rt-mini .rt-txt {
  left: 11%;
  top: 43%;
  width: 44%;
  height: 3.2%;
  background: var(--rt-ink, #12141f);
}

.rt-mini .rt-txt.two {
  top: 50%;
  width: 30%;
  opacity: 0.45;
}

.rt-mini .rt-qr {
  background: var(--rt-ink, #12141f);
}

.rt-mini .rt-qr::before,
.rt-mini .rt-qr::after {
  background: var(--rt-paper, #f8f6f0);
}

.rt-mini .rt-ring {
  border-color: var(--rt-ink, #12141f);
  opacity: 0.45;
}

.rt-mini .rt-bar.b1 {
  background: var(--rt-accent, #2e3192);
}

.rt-mini .rt-bar.b2 {
  background: var(--rt-accent, #e9c400);
  opacity: 0.9;
}

.rt-mini .rt-wash.w1 {
  background: var(--rt-accent, #2e3192);
  opacity: 0.18;
}

.rt-mini .rt-wash.w2 {
  background: var(--rt-accent, #fff200);
  opacity: 0.45;
}

.rt-mini .rt-spark.s1 {
  background: var(--rt-accent, #2e3192);
  opacity: 0.5;
}

.rt-mini .rt-spark.s2 {
  background: var(--rt-accent, #e9c400);
  opacity: 0.8;
}

/* ── fx159: аркуш під час вибору типу мусить бути справжнім ───────────
   Базовий .studio-modal розмиває фон на 8px — але тут фон і є листок,
   який людина обирає. Тримаємо його чітким і майже не затемнюємо. */
#studio-rtype-modal {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(6, 8, 18, 0.12);
}

/* ── fx183: фільтри дизайну ───────────────────────────────────────────
   Кнопка в тулбарі, квадрат «макет у центрі — фільтри по контуру» і самі
   плитки. Квадрат — сітка 3×3: вісім клітинок по периметру займають
   фільтри, центральна — живий макет аркуша. Так око бачить одразу і
   результат, і всі варіанти, без прокрутки й без другого екрана. */

.studio-btn.is-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.studio-filter-glyph {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: conic-gradient(from 45deg, #fff200, #00e5ff, #ff2fd0, #fff200);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.studio-modal-card.is-filter {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px;
}

.studio-filter-title {
  margin: 0 34px 6px 0;
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
}

.studio-filter-lead {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #b9c9e8;
  max-width: 62ch;
}

/* Сітка квадрата 4×4. Дванадцять клітинок по контуру займають фільтри,
   центральні чотири — живий макет. Стовпці й рядки однакові, тож макет
   справді стоїть у центрі, а фільтри — рівно по його контуру. */
.studio-filter-square {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 9px;
  aspect-ratio: 1 / 1;
  /* Квадрат мусить лишатися квадратом: самі лише width і aspect-ratio
     дозволяли сітці вирости на висоту вмісту, і вікно вилазило за екран.
     Тому висота задана явно, а flex-shrink вимкнено. */
  width: min(70vh, 100%);
  height: min(70vh, 100%);
  min-height: 0;
  flex: 0 0 auto;
  margin: 0 auto 14px;
}

.studio-filter-preview {
  grid-area: 2 / 2 / 4 / 4;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 16px;
  border: 1px dashed rgba(255, 242, 0, 0.32);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 242, 0, 0.1), transparent 62%),
    rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

/* Живий макет: справжній аркуш користувача, вставлений як є й зменшений
   трансформацією. Тому в мініатюрі видно рівно те, що буде на аркуші. */
.studio-filter-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.studio-filter-sheet > .plate {
  pointer-events: none;
  margin: 0 !important;
}

.studio-filter-sheet .plate-rot,
.studio-filter-sheet .plate-guides,
.studio-filter-sheet .studio-point-overlay {
  display: none !important;
}

.studio-filter-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 14px 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  background: linear-gradient(to top, rgba(6, 8, 18, 0.92), rgba(6, 8, 18, 0));
  pointer-events: none;
}

.studio-filter-caption strong {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.studio-filter-caption em {
  font-size: 10px;
  font-style: normal;
  color: #9fb2d4;
}

/* ── плитки по периметру ───────────────────────────────────────────── */
.studio-filter-tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: #dbe6ff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background-color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease;
}

/* Позиції по контуру: 1 → 12 за годинниковою стрілкою від верхнього
   лівого кута. Центральні клітинки (2/2…3/3) займає макет — він у
   розмітці стоїть останнім, тож плитки завжди йдуть першими. */
.studio-filter-tile:nth-child(1) { grid-area: 1 / 1; }
.studio-filter-tile:nth-child(2) { grid-area: 1 / 2; }
.studio-filter-tile:nth-child(3) { grid-area: 1 / 3; }
.studio-filter-tile:nth-child(4) { grid-area: 1 / 4; }
.studio-filter-tile:nth-child(5) { grid-area: 2 / 4; }
.studio-filter-tile:nth-child(6) { grid-area: 3 / 4; }
.studio-filter-tile:nth-child(7) { grid-area: 4 / 4; }
.studio-filter-tile:nth-child(8) { grid-area: 4 / 3; }
.studio-filter-tile:nth-child(9) { grid-area: 4 / 2; }
.studio-filter-tile:nth-child(10) { grid-area: 4 / 1; }
.studio-filter-tile:nth-child(11) { grid-area: 3 / 1; }
.studio-filter-tile:nth-child(12) { grid-area: 2 / 1; }

.studio-filter-tile:hover {
  border-color: rgba(255, 242, 0, 0.42);
  background: rgba(255, 242, 0, 0.08);
  transform: translateY(-1px);
}

.studio-filter-tile.is-on {
  border-color: var(--yellow);
  background: rgba(255, 242, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 242, 0, 0.55);
}

.studio-filter-tile:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.studio-filter-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-filter-name i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ff-accent, #fff200);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Мініатюра фільтра: крихітний аркуш із палітрою самого фільтра. Вона
   обіцяє рівно те, що фільтр робить з кольором і акцентом, — без
   окремого рендера й без розбіжностей із результатом. */
.studio-filter-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 1 / 1.12;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ff-paper, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.4);
}

.studio-filter-art i {
  position: absolute;
  display: block;
  border-radius: 2px;
}

.studio-filter-art i:nth-child(1) {
  left: 11%;
  top: 13%;
  width: 50%;
  height: 9%;
  background: var(--ff-ink, #0a0a0a);
  opacity: 0.92;
}

.studio-filter-art i:nth-child(2) {
  left: 11%;
  top: 28%;
  width: 36%;
  height: 5%;
  background: var(--ff-ink, #0a0a0a);
  opacity: 0.5;
}

.studio-filter-art i:nth-child(3) {
  left: 57%;
  top: 54%;
  width: 32%;
  height: 32%;
  background: var(--ff-ink, #0a0a0a);
  border-radius: 3px;
  opacity: 0.9;
}

.studio-filter-art i:nth-child(4) {
  left: 11%;
  bottom: 11%;
  width: 40%;
  height: 11%;
  background: var(--ff-accent, #fff200);
}

/* Кілька фільтрів мають упізнаваний «почерк» навіть у 90 px — але тепер
   це правило живе не на плитці, а на самому взірці (is-art-…, див. блок
   fx184 у кінці файлу): плитка більше не носить клас фільтра, бо фільтр
   не має «своєї» палітри. */

/* Вузький екран: контур квадрата вже не читається (плитки по 60 px), тож
   макет стає зверху на всю ширину, а фільтри — сіткою під ним. Логіка та
   сама: спершу дивишся на свій аркуш, потім обираєш настрій. */
@media (max-width: 640px) {
  .studio-filter-square {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 7px;
    aspect-ratio: auto;
    width: 100%;
    /* Базове правило задає квадрату висоту 70vh. У колонці на вузькому
       екрані це виносило кнопки за край вікна, тож висоту знімаємо й
       обмежуємо: плитки гортаються всередині сітки. */
    height: auto;
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 2px;
  }

  .studio-filter-preview {
    order: -1;
    flex: 1 0 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 140px;
    max-height: 30vh;
  }

  .studio-filter-tile {
    flex: 1 0 calc(50% - 7px);
    padding: 7px;
    border-radius: 10px;
    gap: 5px;
  }

  .studio-filter-name {
    font-size: 9.5px;
  }

  .studio-filter-caption em {
    display: none;
  }
}

@media (max-height: 800px) {
  .studio-filter-square {
    width: min(60vh, 100%);
  }

  .studio-filter-lead {
    margin-bottom: 10px;
  }
}

/* ══ fx184: ФІЛЬТРИ ОБРОБКИ АРКУША ═══════════════════════════════════
   Фільтр тут — не інший макет, а інший погляд на той самий. Ні палітра,
   ні шрифт, ні позиції не змінюються: JS лише додає на корінь аркуша
   один клас is-flt-…, а цей шар малює поверх нього обробку. Звідси те,
   чого не було раніше: фільтр можна зняти будь-коли й він не руйнує
   роботу, працює на будь-якому шаблоні (бо не залежить від палітри) і
   виглядає однаково в редакторі, у мініатюрі вікна та в експорті — це
   буквально той самий вузол.

   Дві площини. .plate-flt-under лежить між тлом і шарами — це «просвіт»:
   ореол, тонування паперу, растрова сітка. .plate-flt-over лежить над
   усім: скан-лінії, зерно, віньєтка, полиск, рамка. У кожної ще по два
   псевдошари, тож обробка складається з чотирьох площин і не потребує
   жодної зайвої розмітки в листку.

   Кольори обробки приходять готовими — --flt-glow / --flt-soft / --flt-hard.
   Вони рахуються в JS з акценту й чорнила самої палітри (з перевіркою
   контрасту до паперу), тому неон лишається видимим і на білому, і на
   чорному аркуші, а не перетворюється на сіру пляму. */

.plate.is-flt > .plate-flt-under,
.plate.is-flt > .plate-flt-over {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.plate.is-flt > .plate-flt-under { z-index: 5; }
.plate.is-flt > .plate-flt-over { z-index: 30; }

.plate.is-flt > .plate-flt-under::before,
.plate.is-flt > .plate-flt-under::after,
.plate.is-flt > .plate-flt-over::before,
.plate.is-flt > .plate-flt-over::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── 1. Чистий ─────────────────────────────────────────────────────── */
/* Полірування без «спецефектів»: рівніший тон паперу, легкий просвіт
   за текстом і ледь помітна віньєтка — аркуш стає охайнішим, але
   лишається собою. */
.plate.is-flt-clean > .plate-flt-under::before {
  background: radial-gradient(ellipse 72% 58% at 50% 36%, rgba(255, 255, 255, 0.24), transparent 70%);
}
.plate.is-flt-clean > .plate-flt-over::after {
  background: radial-gradient(ellipse 96% 92% at 50% 46%, transparent 66%, rgba(0, 0, 0, 0.10) 100%);
}
.plate.is-flt-clean .plate-name,
.plate.is-flt-clean .plate-eyebrow {
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.45);
}

/* ── 2. Неон ───────────────────────────────────────────────────────── */
/* Лінії й текст світяться власним кольором, навколо коду — ореол, а по
   контуру аркуша йде тонка підсвітка. Свічення береться з акценту
   палітри, тому фільтр не «фарбує» дизайн у чужий колір. */
.plate.is-flt-glow .plate-name {
  text-shadow: 0 0 12px var(--flt-soft), 0 0 30px var(--flt-glow);
}
.plate.is-flt-glow .plate-eyebrow,
.plate.is-flt-glow .plate-sub,
.plate.is-flt-glow .plate-meta {
  text-shadow: 0 0 9px var(--flt-soft), 0 0 20px var(--flt-glow);
}
.plate.is-flt-glow .plate-bar {
  box-shadow: 0 0 16px var(--flt-glow), 0 0 44px var(--flt-soft);
}
.plate.is-flt-glow .plate-wash {
  box-shadow: 0 0 22px var(--flt-soft);
}
.plate.is-flt-glow > .plate-flt-under::before {
  background: radial-gradient(ellipse 56% 46% at 50% 64%, var(--flt-soft), transparent 72%);
}
.plate.is-flt-glow > .plate-flt-over::before {
  inset: 7px;
  border-radius: 6px;
  box-shadow: inset 0 0 20px var(--flt-soft), inset 0 0 3px var(--flt-glow);
}
.plate.is-studio2.is-flt-glow .plate-qr-wrap {
  filter: drop-shadow(0 0 9px var(--flt-glow)) drop-shadow(0 0 24px var(--flt-soft));
}
.plate.is-studio2.is-flt-glow .plate-emblem-card {
  box-shadow: 0 0 16px var(--flt-soft);
}

/* ── 3. Скан ───────────────────────────────────────────────────────── */
/* Аркуш ніби прогнали через сканер: рядкові смуги, кутові дужки кадру й
   хроматичний зсув на заголовку — так, ніби лінза не звела канали. */
.plate.is-flt-scan > .plate-flt-over::before {
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0 1px,
    rgba(0, 0, 0, 0.10) 1px 2px,
    transparent 2px 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.plate.is-flt-scan > .plate-flt-over::after {
  inset: 12px;
  background:
    linear-gradient(var(--flt-hard), var(--flt-hard)) left top / 18px 2px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) left top / 2px 18px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) right top / 18px 2px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) right top / 2px 18px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--flt-hard), var(--flt-hard)) right bottom / 2px 18px no-repeat;
}
.plate.is-flt-scan > .plate-flt-under::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.12));
}
.plate.is-flt-scan .plate-name,
.plate.is-flt-scan .plate-eyebrow {
  text-shadow: 1.1px 0 rgba(255, 42, 96, 0.5), -1.1px 0 rgba(0, 176, 255, 0.5);
}

/* ── 4. Плівка ─────────────────────────────────────────────────────── */
/* Зерно, теплий зсув і темні кути кадру — обробка «знято на плівку».
   Зерно малюється двома зсунутими растру горошин, тому воно дрібне й не
   перетворює текст на кашу. */
.plate.is-flt-film > .plate-flt-over::before {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.14) 0.6px, transparent 0.7px),
    radial-gradient(rgba(0, 0, 0, 0.16) 0.6px, transparent 0.7px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.plate.is-flt-film > .plate-flt-over::after {
  background: radial-gradient(ellipse 84% 78% at 50% 48%, transparent 54%, rgba(26, 14, 4, 0.44) 100%);
}
.plate.is-flt-film > .plate-flt-under::before {
  background: linear-gradient(168deg, rgba(255, 196, 120, 0.20), rgba(40, 24, 10, 0.08));
  mix-blend-mode: multiply;
}
.plate.is-flt-film .plate-copy {
  filter: sepia(0.14) saturate(1.06);
}

/* ── 5. Різограф ───────────────────────────────────────────────────── */
/* Два прогони фарби зі зсувом і растрова точка: так друкує різограф.
   Зсув дається тінню тексту й відбитком коду, точка — multiply-растром
   під шарами, тому білий код лишається читабельним. */
.plate.is-flt-riso .plate-name,
.plate.is-flt-riso .plate-eyebrow,
.plate.is-flt-riso .plate-sub {
  text-shadow: 1.6px 1.2px 0 var(--flt-soft), -1.4px -1px 0 rgba(255, 60, 130, 0.34);
}
.plate.is-flt-riso > .plate-flt-under::before {
  background-image: radial-gradient(var(--flt-soft) 1px, transparent 1.15px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.plate.is-flt-riso > .plate-flt-over::after {
  background: linear-gradient(96deg, transparent 46%, rgba(255, 92, 140, 0.10) 50%, transparent 54%);
}
.plate.is-studio2.is-flt-riso .plate-qr-wrap {
  filter: drop-shadow(1.5px 1.5px 0 rgba(255, 60, 130, 0.35));
}

/* ── 6. Тиснення ───────────────────────────────────────────────────── */
/* Рельєф: світло згори, тінь знизу — так виглядає витиснений напис на
   папері. Тіней дві й вони тонкі, тому ефект читається як обʼєм, а не як
   «обведення». */
.plate.is-flt-press .plate-name,
.plate.is-flt-press .plate-eyebrow,
.plate.is-flt-press .plate-sub,
.plate.is-flt-press .plate-meta {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(0, 0, 0, 0.22);
}
.plate.is-flt-press .plate-bar,
.plate.is-flt-press .plate-wash {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}
.plate.is-flt-press > .plate-flt-over::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%, rgba(0, 0, 0, 0.12));
  mix-blend-mode: soft-light;
}
.plate.is-studio2.is-flt-press .plate-qr-wrap {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.22));
}
.plate.is-studio2.is-flt-press .plate-emblem-card {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* ── 7. Скло ───────────────────────────────────────────────────────── */
/* Полиск по діагоналі й глибина під обʼєктами: аркуш читається як
   пластина, крізь яку видно код. Внутрішня тінь рамки задає товщину
   скла, не додаючи жодного пікселя до геометрії. */
.plate.is-flt-glass > .plate-flt-under::before {
  background: radial-gradient(ellipse 76% 58% at 32% 20%, rgba(255, 255, 255, 0.40), transparent 64%);
  mix-blend-mode: screen;
}
.plate.is-flt-glass > .plate-flt-over::before {
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.36) 0 10%,
    transparent 24% 58%,
    rgba(255, 255, 255, 0.20) 70% 78%,
    transparent 90%
  );
  mix-blend-mode: screen;
  opacity: 0.85;
}
.plate.is-flt-glass > .plate-flt-over::after {
  inset: 8px;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 8px 22px rgba(255, 255, 255, 0.18),
    inset 0 -8px 22px rgba(0, 0, 0, 0.10);
}
.plate.is-studio2.is-flt-glass .plate-qr-wrap,
.plate.is-studio2.is-flt-glass .plate-emblem-card {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

/* ── 8. Піксель ────────────────────────────────────────────────────── */
/* Жорсткий блоковий зсув: тінь без розмиття, піксельна сітка й код без
   згладжування. Єдиний фільтр, який свідомо чіпає полотно коду, — і саме
   тому він не чіпає нічого іншого. */
.plate.is-flt-pixel > .plate-flt-over::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.10) 1px, transparent 1px);
  background-size: 9px 9px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.plate.is-flt-pixel .plate-name,
.plate.is-flt-pixel .plate-eyebrow {
  text-shadow: 2px 2px 0 var(--flt-soft);
}
.plate.is-studio2.is-flt-pixel .plate-qr-wrap {
  filter: drop-shadow(3px 3px 0 var(--flt-hard));
}
.plate.is-studio2.is-flt-pixel .plate-qr-wrap canvas {
  image-rendering: pixelated;
}

/* ── 9. Гравіювання ────────────────────────────────────────────────── */
/* Штрихування під 45°, приглушений метал і різкість: тонка сітка тіней
   лягає під текстом, а світло/тінь по одному пікселю дають «врізаний»
   контур. Колір знімається з точністю до півтону, щоб аркуш не став
   сірим. */
.plate.is-flt-engrave > .plate-flt-over::before {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.plate.is-flt-engrave > .plate-flt-under::before {
  background: radial-gradient(ellipse 92% 82% at 50% 38%, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.10));
  mix-blend-mode: soft-light;
}
.plate.is-flt-engrave .plate-copy {
  filter: saturate(0.4) contrast(1.06);
}
.plate.is-flt-engrave .plate-name,
.plate.is-flt-engrave .plate-sub {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.32);
}

/* ── 10. Контур ────────────────────────────────────────────────────── */
/* Обведення всіх обʼєктів і рамка аркуша. Обведення — не border, тому
   сітка не зсувається ні на піксель: це outline із відступом, він малює
   рамку навколо, не змінюючи розмірів. */
.plate.is-studio2.is-flt-keyline .plate-qr-wrap {
  outline: 1.5px solid var(--flt-hard);
  outline-offset: 6px;
}
.plate.is-studio2.is-flt-keyline .plate-emblem {
  outline: 1.5px solid var(--flt-hard);
  outline-offset: 5px;
}
.plate.is-flt-keyline .plate-bar,
.plate.is-flt-keyline .plate-wash {
  outline: 1.5px solid var(--flt-hard);
}
.plate.is-flt-keyline .plate-eyebrow,
.plate.is-flt-keyline .plate-sub,
.plate.is-flt-keyline .plate-meta {
  -webkit-text-stroke: 0.4px var(--flt-hard);
}
.plate.is-flt-keyline .plate-name {
  -webkit-text-stroke: 0.6px var(--flt-hard);
}
.plate.is-flt-keyline > .plate-flt-over::after {
  inset: 10px;
  border-radius: 6px;
  outline: 1.5px solid var(--flt-hard);
  outline-offset: 0;
}

/* ── 11. Приглушений ───────────────────────────────────────────────── */
/* Тихий колір, серпанок і мʼякі краї: насиченість знімається з шарів
   окремо (код лишається контрастним до паперу), а серпанок лягає
   screen-градієнтом поверх — як пил на обʼєктиві. */
.plate.is-flt-muted .plate-deco,
.plate.is-flt-muted .plate-copy,
.plate.is-flt-muted .plate-emblem-wrap {
  filter: saturate(0.52) contrast(0.96);
}
.plate.is-flt-muted > .plate-flt-over::before {
  background: radial-gradient(ellipse 100% 96% at 50% 36%, rgba(255, 255, 255, 0.34), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.6;
}
.plate.is-flt-muted > .plate-flt-over::after {
  background: radial-gradient(ellipse 86% 82% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.12) 100%);
}

/* ── 12. Голограма ─────────────────────────────────────────────────── */
/* Перламутровий перелив: тонкі веселкові смуги під низькою прозорістю
   лягають screen-режимом і дають полиск, який змінюється від положення.
   Кольори обробки тут свої (не з палітри) — це єдиний фільтр, який
   свідомо додає колір, і саме тому він стоїть останнім у списку. */
.plate.is-flt-holo > .plate-flt-under::before {
  background:
    radial-gradient(ellipse 60% 44% at 24% 18%, rgba(255, 214, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 56% 42% at 82% 74%, rgba(180, 255, 244, 0.5), transparent 72%);
  mix-blend-mode: screen;
}
.plate.is-flt-holo > .plate-flt-over::before {
  background: linear-gradient(
    118deg,
    transparent 0 12%,
    rgba(255, 120, 220, 0.20) 20%,
    rgba(255, 236, 120, 0.20) 32%,
    rgba(120, 255, 190, 0.20) 44%,
    rgba(120, 190, 255, 0.20) 56%,
    rgba(190, 120, 255, 0.20) 68%,
    transparent 82% 100%
  );
  mix-blend-mode: screen;
  opacity: 0.85;
}
.plate.is-flt-holo > .plate-flt-over::after {
  inset: 6px;
  border-radius: 8px;
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.plate.is-studio2.is-flt-holo .plate-qr-wrap {
  filter: drop-shadow(0 6px 18px rgba(150, 110, 255, 0.35));
}
.plate.is-flt-holo .plate-name {
  text-shadow: 0 0 10px rgba(255, 140, 230, 0.4), 0 0 22px rgba(120, 200, 255, 0.32);
}

/* ── взірці у плитках вікна ────────────────────────────────────────── */
/* Плитка показує не «чужий макет», а саму обробку на кольорах вашого
   аркуша: обидві обіцянки — і колір, і почерк — збігаються з тим, що
   станеться з листком. */
.studio-filter-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.studio-filter-art.is-art-clean::after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 -10px 14px -10px rgba(0, 0, 0, 0.22);
}

.studio-filter-art.is-art-glow i:nth-child(1) {
  box-shadow: 0 0 6px var(--ff-ink, #0a0a0a);
}
.studio-filter-art.is-art-glow i:nth-child(4) {
  box-shadow: 0 0 10px var(--ff-accent, #fff200), 0 0 22px var(--ff-accent, #fff200);
}
.studio-filter-art.is-art-glow::after {
  box-shadow: inset 0 0 12px var(--ff-accent, #fff200);
}

.studio-filter-art.is-art-scan::after {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
}

.studio-filter-art.is-art-film::after {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 0.5px, transparent 0.6px),
    radial-gradient(rgba(0, 0, 0, 0.18) 0.5px, transparent 0.6px),
    radial-gradient(ellipse 90% 88% at 50% 50%, transparent 56%, rgba(30, 16, 4, 0.5) 100%);
  background-size: 3px 3px, 4px 4px, auto;
  background-position: 0 0, 1px 1px, 0 0;
}

.studio-filter-art.is-art-riso i:nth-child(1),
.studio-filter-art.is-art-riso i:nth-child(2) {
  box-shadow: 1.5px 1.5px 0 var(--ff-accent, #fff200);
}
.studio-filter-art.is-art-riso::after {
  background-image: radial-gradient(var(--ff-ink, #0a0a0a) 0.8px, transparent 0.9px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.28;
}

.studio-filter-art.is-art-press i:nth-child(1),
.studio-filter-art.is-art-press i:nth-child(3),
.studio-filter-art.is-art-press i:nth-child(4) {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.studio-filter-art.is-art-press::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 46%, rgba(0, 0, 0, 0.12));
  mix-blend-mode: soft-light;
}

.studio-filter-art.is-art-glass::after {
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.45) 0 12%,
    transparent 26% 62%,
    rgba(255, 255, 255, 0.24) 74% 82%,
    transparent 92%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.studio-filter-art.is-art-pixel i {
  border-radius: 0;
}
.studio-filter-art.is-art-pixel i:nth-child(3) {
  background:
    repeating-linear-gradient(90deg, var(--ff-ink, #0a0a0a) 0 22%, transparent 22% 44%),
    repeating-linear-gradient(0deg, var(--ff-ink, #0a0a0a) 0 22%, transparent 22% 44%);
  opacity: 0.85;
  box-shadow: 3px 3px 0 var(--ff-accent, #fff200);
}
.studio-filter-art.is-art-pixel::after {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
}

.studio-filter-art.is-art-engrave i {
  opacity: 0.72;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.studio-filter-art.is-art-engrave::after {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.studio-filter-art.is-art-keyline i {
  box-shadow: 0 0 0 1px var(--ff-ink, #0a0a0a);
}
.studio-filter-art.is-art-keyline::after {
  inset: 5px;
  border-radius: 4px;
  outline: 1px solid var(--ff-ink, #0a0a0a);
  outline-offset: 0;
}

.studio-filter-art.is-art-muted i {
  opacity: 0.55;
}
.studio-filter-art.is-art-muted::after {
  background: radial-gradient(ellipse 100% 96% at 50% 34%, rgba(255, 255, 255, 0.34), transparent 74%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.studio-filter-art.is-art-holo::after {
  background: linear-gradient(
    118deg,
    transparent 0 12%,
    rgba(255, 120, 220, 0.42) 22%,
    rgba(255, 236, 120, 0.42) 34%,
    rgba(120, 255, 190, 0.42) 46%,
    rgba(120, 190, 255, 0.42) 58%,
    rgba(190, 120, 255, 0.42) 70%,
    transparent 84% 100%
  );
  mix-blend-mode: screen;
}

/* ── fx194 ─────────────────────────────────────────────────────────────
   Три дрібниці, які роблять панель чеснішою:
   1. Іконка «Фільтри дизайну» — маленький ромб із конічним градієнтом і
      прорізом усередині: ефектна, але мінімалістична, всього 12×12.
   2. «Не змінювати у випадковому дизайні:» — рівно по центру вікна.
   3. Обʼєкт, опущений у «Фонові шари»: листок стає власним контекстом
      накладання, тож відʼємний z-index шару лягає під оформлення тла,
      але над папером, а рядок у панелі шарів стає приглушеним. */

.studio-filter-glyph {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: conic-gradient(from 45deg, #fff200, #00e5ff, #ff2fd0, #fff200);
  transform: rotate(45deg);
  box-shadow:
    0 0 7px rgba(0, 229, 255, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Проріз робить із квадрата «рамку-ромб»: на 12 пікселях це читається
   як знак фільтра, а не як ще одна кнопка зі скругленим прямокутником. */
.studio-filter-glyph i {
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background: #0a0d18;
}

.studio-btn.is-filter:hover .studio-filter-glyph {
  transform: rotate(135deg);
  box-shadow:
    0 0 10px rgba(255, 47, 208, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.studio-rparams-lead {
  margin: 0 0 2px;
  text-align: center;
}

.studio-rparams-sub {
  margin: 0 0 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.plate.is-studio2.has-back-layer {
  isolation: isolate;
}

.studio-layers-kicker.is-deco.is-back {
  margin-top: 6px;
  opacity: 0.78;
}

.studio-layer.is-back .studio-layer-pick span,
.studio-layer.is-back .studio-layer-ico {
  opacity: 0.68;
}

/* ── fx196: вікно фільтрів — лаконічніше ─────────────────────────────
   Запит: прибрати опис-абзац і підпис поверх макета («Без фільтра /
   дизайн як є»), заголовок зробити жовтим, а «Скасувати» та
   «Застосувати» поставити в ОДИН рядок і стиснути до розміру слова
   (трохи більше). Раніше .studio-modal-actions був grid в один стовпець,
   тож обидві кнопки тягнулись на всю ширину вікна. */
body.studio-body .studio-modal-card.is-filter .studio-filter-title {
  margin: 0 34px 12px 0;
  color: var(--yellow, #fff200);
  text-shadow: 0 0 18px rgba(255, 242, 0, 0.35);
}

.studio-modal-card.is-filter .studio-filter-lead,
.studio-modal-card.is-filter .studio-filter-caption {
  display: none !important;
}

#studio-filter-modal .studio-modal-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.studio-body #studio-filter-modal .studio-modal-actions .studio-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 8px 16px;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.08em;
}

@media (max-width: 359px) {
  body.studio-body #studio-filter-modal .studio-modal-actions .studio-btn {
    padding: 7px 11px;
    font-size: 11px;
  }
}

/* ── fx199: слово — неподільне ────────────────────────────────────────
   Тема ставила `overflow-wrap: anywhere` і `word-break: break-word`, тож
   будь-яке довге слово різалося навпіл («Посил-ання» на два рядки) — саме
   це й було видно на екрані. Тепер слово переноситься ТІЛЬКИ цілком, а
   кегль підбирає fitWordsToOneLine(): міряє найдовше слово й зменшує
   напис рівно настільки, щоб воно влізло в підкладку.
   text-wrap: pretty — щоб останній рядок не висів одним коротким словом. */
.plate.is-studio2 .plate-copy,
.plate.is-studio2 .plate-copy [data-fx-paint] {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

/* ── fx201: шар перетягується у «Фонові шари» ─────────────────────────
   Запит: «всі шари крім кюар коду» можна перетягнути у фон, а на телефоні
   список має легко докручуватися до фонового розділу.
   1) Рядки фону тепер теж draggable — курсор показує, що їх можна хапати.
   2) Під час перетягування розділ фону стає видимою ціллю (пунктир), а
      під курсором — жовтим.
   3) Рядки не перехоплюють вертикальний свайп (touch-action: pan-y),
      інакше на телефоні список взагалі не прокручувався б. */
#studio-layers .studio-layer.is-back {
  cursor: grab;
}

#studio-layers .studio-layer.is-back:active {
  cursor: grabbing;
}

#studio-layers .studio-layer,
#studio-layers .studio-layers-kicker {
  touch-action: pan-y;
}

#studio-layers.is-drag-live .studio-layers-kicker.is-deco {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 242, 0, 0.22);
  border-radius: 6px;
}

#studio-layers .studio-layers-kicker.is-deco.is-drop-back,
#studio-layers .studio-layer.is-drop-back {
  color: var(--yellow, #fff200);
  background: rgba(255, 242, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 242, 0, 0.6);
  border-radius: 6px;
}

/* Смуга-підказка «кинь сюди» між переднім планом і фоном: зʼявляється
   лише під час перетягування, у спокійному стані панель не змінюється. */
#studio-layers.is-drag-live .studio-layers-kicker.is-deco::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 242, 0, 0.75) 0 6px,
    transparent 6px 12px
  );
}

@media (max-width: 760px) {
  /* Панель шарів на телефоні: власна плавна прокрутка, тонкий видимий
     повзунок і запас знизу, щоб останній фоновий рядок можна було
     підняти вище пальця. */
  .studio-layers-panel {
    max-height: 42%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scroll-padding-bottom: 20px;
  }

  .studio-layers-panel::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 0;
  }

  .studio-layers-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.32);
    border-radius: 3px;
  }

  #studio-layers {
    min-height: 0;
    padding-bottom: 20px;
  }
}

/* ── fx204 / fx213: перевірка зображення на чужі QR-коди ──────────────
   Раніше тут жив видимий індикатор («Перевіряємо зображення на QR-код…»)
   і глобальний курсор progress. fx213 прибрав його: перевірка працює
   непомітно, а про знайдений сторонній код повідомляє звичайне вікно
   студії (#studio-foreignqr-modal). */

/* ══ fx205: зображення й іконку можна роздути на 50 % більше за листок ══
   Доти ширину шару різав загальний ліміт `.plate-layer`
   (`max-width: min(100%, calc(100% - 28px * var(--zoom)))`) — повзунок
   «Масштаб» уже дозволяв більше, а картинка все одно впиралась у кромку
   аркуша. Тут для шару-картинки той самий ліміт піднятий до 150 %:
   шар центрується на своїй точці, тож 150 % = по 25 % звисання з кожного
   боку. Селектор із двома класами шару перебиває і правило вище, і
   власний `max-width` у `.plate-emblem-wrap`. Резерв у 28px тут не
   потрібен: він існував, щоб шар не впирався в кромку, а тепер кромка —
   це саме те, за що картинка має право звисати. */
.plate.is-studio2 .plate-layer.plate-emblem-wrap {
  max-width: 150%;
}

/* ══ fx209: шапка як на головній + менше постійної роботи браузера ═══════
   1) Шапка повторює сайт: обертовий логотип і напис в один рядок, без
      підпису «STUDIO» (його шість літер тягнули 18 нескінченних анімацій:
      color + text-shadow + filter + дві копії-привиди з mix-blend-mode).
   2) «Global» тепер білий, як і решта літер. Був жовтий — на темній шапці
      це сліпило й сперечалося з жовтими кнопками.
   3) Шапка більше не тримає backdrop-filter: під нею постійно біжать нитки
      сітки, тож розмиття перераховувалось щокадру. Фон став щільнішим —
      вигляд той самий, зайвої роботи для GPU немає.
   4) Постійні пульси box-shadow замінені статичним світінням: жовті кнопки
      (hmi-core), вибрані плитки (hmi-on-breathe), іконка акаунта
      (hmi-ico-pulse). box-shadow не виноситься на композитор, тому кожен
      такий «подих» — перемальовування елемента 60 разів на секунду.
   5) Модальні вікна більше не розмивають тло: картка й без того майже
      непрозора, а blur над анімованою сіткою знімав кадри весь час, поки
      вікно відкрите (а воно відкрите майже завжди).
   6) «Живість» лишилась на transform/opacity — ці властивості композитор
      анімує без перемальовування: нитки сітки, бігунок смуги інструментів,
      блік по кнопці, кути кадру, обертання логотипа, кубик «Випадковий»,
      кромка вікна.
   7) Усе, що лишилось, засинає у фоновій вкладці (body.studio-asleep). */

/* ── Шапка ───────────────────────────────────────────────────────── */
body.studio-body .studio-brand-word,
body.studio-body .studio-brand-word.is-global {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.32);
}

body.studio-body .studio-top {
  background: linear-gradient(180deg, rgba(10, 16, 34, 0.97), rgba(5, 8, 18, 0.86));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Жовта кнопка: статичне світіння замість нескінченного пульсу ── */
body.studio-body .studio-btn.is-yellow {
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 14px rgba(255, 255, 255, 0.18),
    0 0 28px -4px rgba(255, 242, 0, 0.54),
    0 12px 26px -18px rgba(255, 242, 0, 0.9);
}

/* Під курсором вона все одно «оживає» — але лише на дію користувача. */
@media (hover: hover) and (pointer: fine) {
  body.studio-body .studio-btn.is-yellow:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 0 18px rgba(255, 255, 255, 0.3),
      0 0 36px -2px rgba(255, 242, 0, 0.72),
      0 12px 26px -18px rgba(255, 242, 0, 0.9);
  }
}

/* ── Вибрані плитки: світіння стале, без «дихання» ────────────────── */
body.studio-body .studio-layer.is-on,
body.studio-body .studio-fx-tile.is-on,
body.studio-body .studio-deco-tile.is-on,
body.studio-body .studio-icon-cell.is-on,
body.studio-body .studio-accent-cell.is-on,
body.studio-body .studio-photo-cell.is-on {
  animation: none;
  box-shadow:
    inset 2px 0 0 var(--yellow),
    inset 0 0 0 1px rgba(255, 242, 0, 0.34),
    inset 0 0 18px rgba(255, 242, 0, 0.14);
}

/* ── Іконка акаунта: той самий ритм, але на opacity (композитор) ──── */
body.studio-body .studio-account-open-ico {
  animation: hmi-ico-fade 4.6s ease-in-out infinite;
  box-shadow: 0 0 15px -2px var(--ico-glow);
}

@keyframes hmi-ico-fade {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}

/* ── Модальні вікна: без розмиття тла ────────────────────────────── */
body.studio-body .studio-modal {
  background: rgba(3, 6, 15, 0.86);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.studio-body .studio-modal-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Фонова вкладка: уся жива графіка стає на паузу ──────────────── */
body.studio-asleep *,
body.studio-asleep *::before,
body.studio-asleep *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  body.studio-body .studio-account-open-ico {
    animation: none;
    opacity: 1;
  }
  body.studio-body .studio-modal-card::before {
    animation: none;
  }
}

/* ── fx215: «Додати URL» у вікні «Картинки з інтернету» ────────────────
   Кнопка стоїть ЛІВОРУЧ від поля, тож її видно першою, а пошук звужується.
   Нічого не міряємо вручну: рядок — flex, кнопка flex:0 0 auto, поле
   flex:1 1 auto з min-width:0 — поле саме втрачає рівно ширину кнопки.
   На вузьких екранах (телефон) кнопка просто переходить на другий рядок. */
body.studio-body .studio-btn.is-white,
body.studio-body .studio-btn.is-white:hover,
body.studio-body .studio-btn.is-white:focus-visible {
  border-color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, #ffffff, #e8edf7);
  color: #0a0a0a;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 26px -8px rgba(255, 255, 255, 0.7),
    0 12px 26px -18px rgba(255, 255, 255, 0.8);
}

body.studio-body .studio-photo-url {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.studio-body .studio-photo-url.is-on {
  border-color: var(--yellow);
  box-shadow:
    inset 0 0 0 1px rgba(255, 242, 0, 0.55),
    0 0 24px -6px var(--hmi-glow-y);
}


/* ── fx219: «Створити свій QR» у вікні про сторонній QR ────────────────
   Це посилання, а не <button>, тому браузер малював йому підкреслення,
   а текст притискався до лівого краю. Робимо його такою ж кнопкою, як
   решта: без підкреслення, по центру, на всю ширину комірки сітки. */
#studio-foreignqr-modal .studio-modal-actions a.studio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  -webkit-text-decoration: none;
}

#studio-foreignqr-modal .studio-modal-actions a.studio-btn:hover,
#studio-foreignqr-modal .studio-modal-actions a.studio-btn:focus-visible {
  text-decoration: none;
}


/* ── fx220: анімована інструкція студії ────────────────────────────────
   Три частини:
   1) кнопка «Інструкція» у шапці;
   2) вікно-запитання перед інструкцією;
   3) сама інструкція — затемнення, жовта рамка навколо цілі й картка.

   Свідомі рішення:
   • підсвітка й картка — окремі шари `position: fixed`, тому коли гортаєш
     панель усередині, вони не «їдуть» разом із вмістом, а лише
     перераховують своє місце;
   • жодного layout-зсуву: інструкція нічого не переставляє в студії;
   • картка на вузькому екрані стає внизу на всю ширину — так само, як в
     інструкції кабінету. */

body.studio-body .studio-top-help {
  display: flex;
  align-items: center;
  grid-column: auto;
  justify-self: auto;
  align-self: center;
  position: static;
  top: auto;
  inset-inline-end: auto;
  margin: 0;
  padding: 0;
  z-index: auto;
}

body.studio-body .studio-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* fx262: жорстко фіксуємо розмір — він однаковий на телефоні, планшеті й
     компі (раніше кнопка на вузькому екрані виглядала більшою, бо стояла
     сама в рядку без сусідів). */
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
}

body.studio-body .studio-help-glyph {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 242, 0, 0.7);
  border-radius: 50%;
  color: var(--yellow, #fff200);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}

/* fx260: «Гайд» стоїть у власному верхньому рядку редактора
   (.studio-stage-guide) — притиснутий праворуч, тобто навпроти
   «Тип шаблону» в лівому рейлі. Старі «шапкові» правила (grid-колонка
   третього стовпчика шапки, absolute на планшеті) скинуто вище. */
body.studio-body .studio-stage-guide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

/* fx260: шапка тепер стандартна (header.top → z-index 5000 зі styles.css),
   тому повноекранні діалоги студії мусять бути вище за неї — інакше
   затемнення не накривало шапку. */
body.studio-body .studio-modal {
  z-index: 6000;
}

/* fx260: плаваюче вікно стилю QR стояло на top:88px (під старою 44-піксельною
   шапкою). Стандартна шапка висока (~123px на десктопі), тому відлічуємо
   від її реальної висоти — інакше верхівка вікна йде під шапку. */
body.studio-body .studio-float {
  top: calc(var(--qrg-top-h, 85px) + 8px);
  max-height: calc(100vh - var(--qrg-top-h, 85px) - 24px);
}

/* ── вікно-запитання ─────────────────────────────────────────────── */

#studio-tour-ask .studio-modal-card.is-tour-ask {
  width: min(520px, 100%);
  padding: 34px 24px 22px;
}

.studio-tour-ask-kicker {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow, #fff200);
}

.studio-tour-ask-title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.32;
  color: #fff;
}

.studio-tour-ask-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.62;
  color: #a9b3c7;
}

#studio-tour-ask .studio-modal-actions {
  grid-template-columns: 1fr;
}

/* ── сама інструкція ─────────────────────────────────────────────── */

.qrg-stour {
  position: fixed;
  inset: 0;
  z-index: 90000;
  pointer-events: none;
}

.qrg-stour[hidden] {
  display: none !important;
}

body.qrg-stour-open {
  overflow: hidden;
}

.qrg-stour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.62);
  pointer-events: auto;
  animation: qrg-stour-fade 0.22s ease both;
}

.qrg-stour-spots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qrg-stour-spot {
  position: fixed;
  box-sizing: border-box;
  border: 2px solid var(--yellow, #fff200);
  border-radius: 10px;
  pointer-events: none;
  transition:
    top 0.26s ease,
    left 0.26s ease,
    width 0.26s ease,
    height 0.26s ease;
  animation: qrg-stour-pulse 1.3s ease-in-out infinite;
}

.qrg-stour-spot:not(.is-primary) {
  border-width: 1px;
  border-color: rgba(255, 242, 0, 0.55);
}

.qrg-stour-card {
  position: fixed;
  z-index: 2;
  box-sizing: border-box;
  width: 520px;
  max-width: calc(100vw - 24px);
  padding: 16px 16px 14px;
  background: #0c0c0c;
  border: 1px solid rgba(255, 242, 0, 0.45);
  color: #fff;
  box-shadow: 8px 8px 0 rgba(46, 49, 146, 0.55);
  pointer-events: auto;
}

.qrg-stour-card.is-in {
  animation: qrg-stour-card-in 0.3s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

.qrg-stour-progress {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow, #fff200);
}

.qrg-stour-bar {
  height: 2px;
  margin: 0 0 12px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.qrg-stour-bar > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yellow, #fff200);
  transition: width 0.32s ease;
}

.qrg-stour-title {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.25;
}

.qrg-stour-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.62;
  color: #d4d4d4;
}

.qrg-stour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.qrg-stour-btn {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.qrg-stour-btn:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

.qrg-stour-btn:focus-visible {
  outline: 2px solid var(--yellow, #fff200);
  outline-offset: 2px;
}

.qrg-stour-skip {
  order: 1;
  margin-inline-end: auto;
  border-color: transparent;
  color: #9aa4b8;
}

.qrg-stour-prev {
  order: 2;
}

.qrg-stour-next {
  order: 3;
  border-color: var(--yellow, #fff200) !important;
  background: var(--yellow, #fff200) !important;
  color: #0a0a0a;
  font-weight: 700;
}

@keyframes qrg-stour-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes qrg-stour-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qrg-stour-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 242, 0, 0.42);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 242, 0, 0.16);
  }
}

@media (max-width: 1023px) {
  /* fx260: на планшеті/телефоні кнопка залишається в тому ж верхньому
     рядку й так само притиснута праворуч — жодного absolute. */
  body.studio-body .studio-stage-guide {
    justify-content: flex-end;
  }

  .qrg-stour-card {
    width: auto;
  }

  .qrg-stour-body {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qrg-stour-spot,
  .qrg-stour-bar > i {
    transition: none;
  }

  .qrg-stour-spot,
  .qrg-stour-card.is-in,
  .qrg-stour-backdrop {
    animation: none;
  }
}


/* ══ fx221: список QR у розділі «QR код» ═══════════════════════════════
   одані з кабінету коди тепер стоять під кнопками розділу — тим самим
   списком, що й зображення. равила нижче лише підтягують відступи,
   бо сама розмітка вже стилізована класами .studio-emblem-*. */
#fold-qr #studio-qr-count {
  margin: 14px 0 8px;
}

#fold-qr #studio-qr-list {
  max-height: 240px;
}

#fold-qr #studio-qr-list:empty {
  display: none;
}

/* Ширша картка інструкції: у ній більше тексту, тож рядки не мають
   ставати надто довгими. */
.qrg-stour-card .qrg-stour-body {
  max-height: 46vh;
  overflow-y: auto;
}

/* ══ fx224: мова сайту — у шапці студії ════════════════════════════════
   Запит власника: список мов має стояти у ШАПЦІ, а не в картці інструкції,
   і мова інструкції має йти за мовою сайту. Тому селект із картки
   прибрано, а в шапку покладено ту саму розмітку `.lang-dropdown`, що й на
   головній: її вже стилізує styles.css, а кліки обробляє i18n.js.

   Тут — лише те, чого styles.css не знає: місце в сітці шапки студії. */

/* Рядок «1 / 23» над смугою прогресу лишився без селекта мови: тримаємо
   його зліва (справа в RTL) і без зайвого відступу. */
.qrg-stour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.qrg-stour-head .qrg-stour-progress {
  margin: 0;
  white-space: nowrap;
}

/* Список мов переїхав у шапку, тому правила .qrg-stour-lang/.qrg-stour-langsel
   прибрано: цих елементів більше немає в розмітці. */
body.studio-body .studio-top-tools {
  grid-column: 2 / -1;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 14px;
  position: relative;
  z-index: 5;
}

/* Список мов розкривається ВНИЗ і виходить за межі шапки, тому сама шапка
   мусить малюватися над `.studio-shell` (у studio.css обидва мають
   z-index: 1, і shell ішов би поверх меню). */
body.studio-body .studio-top {
  z-index: 60;
}

body.studio-body .studio-top-tools .studio-top-help {
  padding-right: 0;
}

/* Меню мови у студії: шапка низька, тож підпис і кнопку робимо компактнішими
   за головну сторінку, інакше шапка «стрибає» у висоту. */
body.studio-body .studio-top-tools .lang-menu-caption {
  font-size: 9px;
  line-height: 1.1;
  margin-bottom: 2px;
}

body.studio-body .studio-top-tools .lang-toggle {
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  gap: 6px;
}

body.studio-body .studio-top-tools .lang-menu {
  width: max(100%, 10.5rem);
}

body.studio-body .studio-top-tools .lang-option {
  padding: 7px 10px;
  font-size: 13px;
}

body.studio-body .studio-top-tools .lang-menu-list {
  /* 17 мов мають влізти без прокрутки — як на головній сторінці; обмеження
     лише страховка для низьких вікон. */
  max-height: none;
  overflow-y: visible;
}

@media (max-height: 720px) {
  body.studio-body .studio-top-tools .lang-menu-list {
    max-height: min(72vh, 520px);
    overflow-y: auto;
  }
}

/* Вузький екран: у студії шапка стає в один стовпець (studio.css,
   max-width: 900px) і центрується — там перемикач мови стоїть під логотипом. */
@media (max-width: 900px) {
  body.studio-body .studio-top-tools {
    grid-column: 1 / -1;
    justify-self: center;
    padding-right: 0;
    gap: 8px;
  }
  body.studio-body .studio-top-tools .studio-top-help {
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  body.studio-body .studio-top-tools .lang-menu-caption {
    display: none;
  }
  body.studio-body .studio-top-tools .studio-help-txt {
    display: none;
  }
}

/* ══ fx223: демо-код шаблону ховається, коли на макеті є власні QR ════
   Коли з кабінету додають один або кілька кодів, «бутафорський» код
   шаблону більше не потрібен: він лишався стовбичити поруч із справжніми.
   Шар не видаляємо з розмітки (на ньому тримаються розмір, стиль і
   експорт), а лише ховаємо. */
.plate .plate-layer.plate-qr-wrap.is-decor-off {
  display: none !important;
}

/* =====================================================================
   fx243 — студія на весь зріст: без білих повзунків і без «квадратів»
   ---------------------------------------------------------------------
   1) studio.css фарбує ВСІ смуги прокрутки в білий колір. У студії вони
      стирчать збоку (ліва панель і полотно) — прибираємо їх повністю.
      Прокрутка колесом/пальцем працює як і раніше.
   2) Гостьова студія на головній (iframe ?embed=1&guest=1) стоїть на
      повний екран, як сканер і генератор: без рамки, без «квадратів»
      і без фіксованих прямокутників усередині.
   ===================================================================== */

/* 1. Жодних видимих смуг прокрутки всередині студії */
body.studio-body,
body.studio-body * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.studio-body::-webkit-scrollbar,
body.studio-body *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
body.studio-body::-webkit-scrollbar-thumb,
body.studio-body *::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0;
}
body.studio-body::-webkit-scrollbar-track,
body.studio-body *::-webkit-scrollbar-track,
body.studio-body::-webkit-scrollbar-corner,
body.studio-body *::-webkit-scrollbar-corner {
  background: transparent;
}

/* 2. Студія на головній — на весь екран, без рамок */
@media (min-width: 1024px) {
  html.studio-guest.studio-embed .studio-shell {
    height: calc(100vh - 45px);
    min-height: calc(100vh - 45px);
  }
}

/* fx246: заголовок обраного шаблону більше не <h1> — на сторінці /studio
   головний заголовок один (вітрина). Вигляд лишаємо той самий. */
.studio-stage-head .studio-stage-title {
  margin: 0;
  font-family: "Syne", "JetBrains Mono", sans-serif;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
body.studio-body .studio-stage-head .studio-stage-title {
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 0 22px rgba(150, 185, 255, 0.4);
}