/* ============================================================
   LUMIO Showroom — конфигуратор «соберите свой проект»
   Tokens sourced from DESIGN.md (same palette as the landing).
   Desktop-first (1280–1440px). Mobile adaptation — позже;
   сейчас просто не ломаем вёрстку на 768px+.
   ============================================================ */

:root {
  /* Colors */
  --primary: #c7d2fe;
  --tertiary: #111827;
  --neutral: #ffffff;
  --background: #eef2ff;
  --surface: #1c1c1e;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --line: rgba(17, 24, 39, 0.1);

  /* Gradient (from DESIGN.md) */
  --grad-from: #4f46e5;
  --grad-to: #06b6d4;

  /* Radii: surfaces sharp (0), pills full */
  --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;

  /* fixed configurator panel width (≈30% on desktop) */
  --panel-w: clamp(360px, 30vw, 460px);

  /* accent of the demo scene (set from the panel swatches via JS) */
  --demo-accent: #b45309;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Magnetic scroll is JS-driven (showroom.js): once the scroll settles it
     always eases to the nearest scene (mandatory-like), with a slow custom
     ease-in-out animation. scroll-behavior stays auto so per-frame steps of
     that animation aren't double-smoothed by the browser. */
  scroll-behavior: auto;
}

body {
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------
   Left region: scenes, cleared of the fixed panel
   ---------------------------------------------------------- */
.sr-left {
  margin-right: var(--panel-w);
}

/* ----------------------------------------------------------
   Scenes column (placeholders for now) — each fills the screen
   ---------------------------------------------------------- */
.scenes {
  display: flex;
  flex-direction: column;
}

.scene {
  position: relative;
  /* full-screen scene; soft magnetic snap is handled in JS */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(238, 242, 255, 0.35), rgba(255, 255, 255, 0.55));
}

.scene:last-child {
  border-bottom: 0;
}

.scene__tag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scene__title {
  margin-top: 8px;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(17, 24, 39, 0.22);
}

/* subtle hint that this scene is the one the panel is tracking */
.scene.is-current .scene__title {
  color: rgba(17, 24, 39, 0.4);
}

/* temporary addon list inside scenes — for checking parity with the panel */
.scene__addons {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.scene__addons li {
  font-size: 15px;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}

.scene__addons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(17, 24, 39, 0.25);
}

/* ----------------------------------------------------------
   Configurator panel — fixed to the right edge, full height,
   quiet white card. Always visible while scenes scroll.
   ---------------------------------------------------------- */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--panel-w);
  height: 100vh;
  z-index: 20;
}

.panel__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--neutral);
  border-left: 1px solid var(--line);
  padding: 28px 24px;
  /* only the groups zone scrolls internally; total + CTA stay pinned */
  overflow: hidden;
}

/* Back-to-site button (top of the panel) */
.panel__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.panel__back:hover {
  color: var(--tertiary);
  border-color: rgba(17, 24, 39, 0.2);
  background: var(--background);
}

.panel__back:active {
  transform: translateY(1px);
}

.panel__back iconify-icon {
  font-size: 16px;
}

.panel__back:focus-visible {
  outline: 2px solid var(--grad-from);
  outline-offset: 2px;
}

/* 1. Head */
.panel__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tertiary);
}

.panel__hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
/* muted lead line: scenes are examples, projects are bespoke */
.panel__lead {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
/* micro-caption under the niche switch */
.field__note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* shared field block */
.field {
  margin-top: 18px;
}

.field__label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 2. Segmented control */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--background);
  border-radius: var(--r-full);
}

.seg__btn {
  flex: 1;
  padding: 9px 8px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.seg__btn:hover {
  color: var(--tertiary);
}

.seg__btn.is-active {
  background: var(--surface);
  color: #ffffff;
}

.seg__btn:active {
  transform: scale(0.97);
}

.seg__btn:focus-visible {
  outline: 2px solid var(--grad-from);
  outline-offset: 2px;
}

/* 3. Accent swatches */
.accents {
  display: flex;
  gap: 12px;
}

.accents__sw {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 2px solid #ffffff;
  background: var(--sw);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.25);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.accents__sw:hover {
  transform: scale(1.12);
}

.accents__sw:active {
  transform: scale(1.02);
}

.accents__sw.is-active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--sw);
}

.accents__sw:focus-visible {
  outline: 2px solid var(--sw);
  outline-offset: 3px;
}

/* 4. Groups (accordion) — group = scene, body = addons */

/* the groups field grows to fill the panel; only it scrolls */
.field--grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.groups {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* room so the last group's shadow/border isn't clipped by the scrollbox */
  padding-bottom: 2px;
}

.grp {
  border: 1px solid var(--line);
  background: #ffffff;
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* current (scroll-synced) group gets a quiet accent ring */
.grp.is-current {
  border-color: rgba(79, 70, 229, 0.55);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
}

/* ---- group head ---- */
.grp__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}

/* shared custom checkbox (group module + addon) */
.cbx {
  flex-shrink: 0;
  display: inline-flex;
  cursor: pointer;
  margin-top: 1px;
}

.cbx input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cbx__box {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(17, 24, 39, 0.3);
  border-radius: 4px;
  background: #ffffff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cbx__box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform var(--dur) var(--ease);
}

/* checked: real input (group) OR aria-checked (addon) */
.cbx input:checked + .cbx__box,
.is-checked > .cbx .cbx__box,
.addon.is-checked .cbx__box {
  background: var(--surface);
  border-color: var(--surface);
}

.cbx input:checked + .cbx__box::after,
.addon.is-checked .cbx__box::after {
  transform: rotate(-45deg) scale(1);
}

.cbx input:disabled + .cbx__box {
  background: rgba(17, 24, 39, 0.45);
  border-color: rgba(17, 24, 39, 0.45);
  cursor: default;
}

.cbx:hover input:not(:disabled) + .cbx__box {
  border-color: var(--surface);
}

.cbx input:focus-visible + .cbx__box {
  outline: 2px solid var(--grad-from);
  outline-offset: 2px;
}

/* head main = title row + summary; clickable (expand + scroll to scene) */
.grp__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.grp__titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grp__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tertiary);
  transition: color var(--dur) var(--ease);
}

.grp__main:hover .grp__title {
  color: var(--grad-from);
}

.grp__badge {
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(199, 210, 254, 0.5);
  font-size: 11px;
  font-weight: 500;
  color: #4338ca;
}

/* summary — always visible, even collapsed */
.grp__summary {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.grp__main:focus-visible {
  outline: 2px solid var(--grad-from);
  outline-offset: 2px;
}

/* ---- group body: animated height (grid-rows 0fr→1fr) ---- */
.grp__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms var(--ease);
}

.grp.is-open .grp__body {
  grid-template-rows: 1fr;
}

.grp__bodyinner {
  overflow: hidden;
}

.addons {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px 12px 14px;
}

/* ---- addon row (custom checkbox, role="checkbox") ---- */
.addon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.addon:hover {
  background: var(--background);
}

.addon__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.addon__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tertiary);
}

.addon__hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.addon__meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* locked addon: module off — unavailable until its module is enabled */
.addon.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.addon.is-locked:hover {
  background: transparent;
}

.addon:focus-visible {
  outline: 2px solid var(--grad-from);
  outline-offset: 2px;
}

/* confirming micro-animation when a module switches off and clears its addons */
@keyframes addon-clear {
  0% {
    background: rgba(225, 29, 72, 0.16);
  }
  100% {
    background: transparent;
  }
}

.addon.is-clearing {
  animation: addon-clear 450ms var(--ease);
}

/* 5. Total — sits right below the flexible groups zone, pinned to bottom */
.total {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.total__price {
  display: block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}

.total__weeks {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 6. CTA */
.panel__cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--r-full);
  background: var(--surface);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.panel__cta:hover {
  transform: translateY(-2px);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 14px 22px -6px,
    rgba(0, 0, 0, 0.12) 0px 6px 10px -6px;
}

.panel__cta:active {
  transform: translateY(0);
}

.panel__cta iconify-icon {
  font-size: 16px;
}

.panel__note {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Scene 1 — two niche stages (coffee / detailing) that swap with
   a glossy "polish" sweep on the niche switch.
   ============================================================ */
.scene--stages {
  padding: 0;
  overflow: hidden;
}

/* stacked full-scene stages; only the active niche is visible */
.stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 64px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease);
}
.scene--stages.is-coffee .stage--coffee,
.scene--stages.is-detail .stage--detail,
.scene--stages.is-atelier .stage--atelier {
  opacity: 1;
  visibility: visible;
}

/* ---- coffee stage (light; palette tints the background) ---- */
.stage--coffee {
  --cafe-ink: #1c1917;
  --cafe-accent: #b45309; /* fixed; the palette swatch changes the bg, not text */
  color: var(--cafe-ink);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--demo-accent) 10%, #faf6ef) 0%,
    color-mix(in srgb, var(--demo-accent) 30%, #f0e3d0) 35%,
    color-mix(in srgb, var(--demo-accent) 52%, #e7d2b6) 65%,
    color-mix(in srgb, var(--demo-accent) 16%, #faf6ef) 100%
  );
  background-size: 300% 300%;
}
/* animate the warm gradient only while the coffee stage is visible */
.scene--stages.is-coffee .stage--coffee {
  animation: cafe-bg 22s ease-in-out infinite;
}

@keyframes cafe-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* content fills the scene edge-to-edge (no centered max-width) */
.cafe {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* brand mark, kept without a header bar (top-left of the scene) */
.cafe__logo {
  position: absolute;
  top: 40px;
  left: 64px;
  z-index: 4;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cafe-ink);
}
.cafe__logo i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cafe-accent);
}

/* ---- hero: copy + coffee-cup puzzle ---- */
.cafe__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.cafe__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cafe-accent);
}

.cafe__title {
  margin-top: 14px;
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--cafe-ink);
}
.cafe__title-acc {
  background: linear-gradient(120deg, #b45309, #1c1917);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cafe__sub {
  margin-top: 18px;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(28, 25, 23, 0.72);
}

.cafe__cta-row {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cafe__cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  border-radius: var(--r-full);
  background: #1c1917;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #1c1917;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cafe__cta:hover {
  transform: translateY(-2px);
  background: #3f2a1e; /* fixed coffee, not palette-driven */
  border-color: #3f2a1e;
  box-shadow: 0 12px 26px rgba(28, 25, 23, 0.22);
}
.cafe__cta--ghost {
  background: transparent;
  color: #1c1917;
  border-color: rgba(28, 25, 23, 0.25);
}
.cafe__cta--ghost:hover {
  background: rgba(28, 25, 23, 0.06);
  color: #1c1917;
  border-color: rgba(28, 25, 23, 0.5);
  box-shadow: none;
}

/* ---- diced puzzle (reference style) clipped into a circle ---- */
.cafe__puzzle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  clip-path: circle(50%);
  animation: puzzle-in 0.6s var(--ease) both;
}

@keyframes puzzle-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ptile {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: 20px;
  /* gentle staggered reveal */
  opacity: 0;
  animation: ptile-in 0.55s var(--ease) forwards;
  animation-delay: calc(var(--i) * 90ms);
}

@keyframes ptile-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ptile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.5s var(--ease), filter var(--dur) var(--ease);
}
.ptile:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

/* interlocking corner masks (verbatim technique from the reference) */
.warped-image {
  --r: 20px;
  --s: 40px;
  --x: 25px;
  --y: 5px;
}
.top-right {
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  -webkit-mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
  mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.top-left {
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at var(--r) var(--r),#000 75%,#0000 0);
  --_d:(var(--s) + var(--r));
  -webkit-mask: calc(var(--_d) + var(--x)) 0 var(--_m), 0 calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
  mask: calc(var(--_d) + var(--x)) 0 var(--_m), 0 calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.bottom-left {
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 180deg at var(--r) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  -webkit-mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.bottom-right {
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  -webkit-mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m), 100% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m), 100% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ============================================================
   Detailing stage (dark) — palette tints text & accents here
   ============================================================ */
.stage--detail {
  color: #f4f4f5;
  /* different typeface for the detailing hero */
  font-family: "Space Grotesk", "Geist", system-ui, sans-serif;
  background:
    radial-gradient(60% 80% at 76% 12%, color-mix(in srgb, var(--demo-accent) 30%, transparent), transparent 70%),
    radial-gradient(70% 90% at 10% 96%, color-mix(in srgb, var(--demo-accent) 16%, transparent), transparent 70%),
    #0b0e16;
}

.detail__logo {
  position: absolute;
  top: 40px;
  left: 64px;
  z-index: 4;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.detail__logo i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--demo-accent);
}

/* centered header */
.detail__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.detail__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 4px;
  border-radius: var(--r-full);
  background: var(--demo-accent);
  border: 3px solid color-mix(in srgb, var(--demo-accent) 45%, #ffffff);
  font-size: 13px;
  color: #ffffff;
}
.detail__badge b {
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: #ffffff;
  color: #0b0e16;
  font-size: 12px;
  font-weight: 600;
}

/* monochrome white heading */
.detail__title {
  margin-top: 18px;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.detail__sub {
  margin: 16px auto 0;
  max-width: 54ch;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55;
  color: rgba(244, 244, 245, 0.7);
}

.detail__cta-row {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.detail__cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: var(--r-full);
  background: var(--demo-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--demo-accent);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.detail__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.detail__cta--ghost {
  background: transparent;
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.25);
}
.detail__cta--ghost:hover {
  filter: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
}

/* photo grid below the header (3 columns) */
.detail__grid {
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1000px;
}
.dcard {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.dcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.dcard:hover img {
  transform: scale(1.06);
}
.dcard__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 11px;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 16, 0.78));
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

/* blur-reveal entrance (per reference) — drops in from above with a blur,
   re-runs each time the detail stage becomes active */
.scene--stages.is-detail .dreveal {
  animation: detail-reveal 0.6s var(--ease) both;
  animation-delay: calc(var(--n) * 0.12s);
}
@keyframes detail-reveal {
  from { opacity: 0; filter: blur(10px); transform: translateY(-20px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ---- detailing addon widgets (dark) — revealed by [data-scene-el].is-on ---- */
.dt-lang {
  position: absolute;
  top: 40px;
  right: 64px;
  z-index: 6;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(-8px);
}
.dt-lang.is-on { transform: translateY(0); }
.dt-lang button {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(244, 244, 245, 0.6);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dt-lang button.is-active { background: var(--demo-accent); color: #ffffff; }

.dt-reviews {
  margin: 20px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 500;
  color: #f4f4f5;
  transform: translateY(8px);
}
.dt-reviews.is-on { transform: translateY(0); }
.dt-reviews__stars { color: #f59e0b; letter-spacing: 1px; }

.dt-booking {
  position: absolute;
  left: 64px;
  bottom: 40px;
  z-index: 6;
  width: 248px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #11151f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(16px);
}
.dt-booking.is-on { transform: translateY(0); }
.dt-card__h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--demo-accent);
}
.dt-card__t {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.dt-slots {
  margin-top: 12px;
  display: flex;
  gap: 6px;
}
.dt-slots button {
  flex: 1;
  padding: 7px 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #f4f4f5;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dt-slots button:hover { border-color: var(--demo-accent); }
.dt-slots button.is-active {
  background: var(--demo-accent);
  border-color: var(--demo-accent);
  color: #ffffff;
}
.dt-booking__btn {
  margin-top: 12px;
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  background: var(--demo-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.dt-chat {
  position: absolute;
  right: 64px;
  bottom: 40px;
  z-index: 6;
  width: 268px;
  padding: 14px;
  border-radius: 14px;
  background: #11151f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  transform: translateY(16px);
}
.dt-chat.is-on { transform: translateY(0); }
.dt-chat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.dt-chat__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.dt-chat__msg {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px 10px 10px 2px;
  font-size: 13px;
  line-height: 1.45;
  color: #e7e7ea;
}
.dt-chat__input {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(244, 244, 245, 0.5);
}

/* ============================================================
   Atelier stage (shader-style) — animated mesh gradient bg,
   glass badge, hero bottom-left, pulsing circle bottom-right.
   Palette (--demo-accent) tints the mesh + accents.
   ============================================================ */
.stage--atelier {
  color: #ffffff;
  background: #000000;
  overflow: hidden;
}

/* animated mesh-gradient (CSS approximation of the shader) */
.atelier__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #000000;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #5d4037 0%, transparent 60%),
    radial-gradient(45% 55% at 82% 22%, #8b4513 0%, transparent 60%),
    radial-gradient(50% 55% at 72% 82%, #3e2723 0%, transparent 60%),
    radial-gradient(46% 52% at 28% 78%, color-mix(in srgb, var(--demo-accent) 65%, #3e2723) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 50%, #1a120b 0%, transparent 70%);
  background-size: 180% 180%;
  filter: blur(8px) saturate(1.1);
  /* static fallback — the WebGL shader animates on top of it */
}
/* real WebGL shader layer (paper-design MeshGradient) — covers the CSS fallback */
.atelier__shader {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.atelier__shader canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.atelier__logo {
  position: absolute;
  top: 40px;
  left: 64px;
  z-index: 4;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.atelier__logo i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--demo-accent);
}

/* hero, bottom-left */
.atelier__hero {
  position: absolute;
  left: 64px;
  bottom: 56px;
  z-index: 2;
  max-width: 500px;
}
.scene--stages.is-atelier .atelier__hero {
  animation: atelier-in 0.7s var(--ease) both;
}
@keyframes atelier-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.atelier__badge {
  position: relative;
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}
.atelier__badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.atelier__title {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.atelier__title em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

.atelier__sub {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.atelier__cta-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.atelier__btn {
  padding: 12px 26px;
  border-radius: var(--r-full);
  background: #ffffff;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #ffffff;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.atelier__btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.9);
}
.atelier__btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.atelier__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
}

/* atelier addon widgets reuse the dark .dt-* styles; reposition the two that
   would clash with the bottom-left hero */
.stage--atelier .dt-reviews {
  margin: 20px 0 0; /* left-aligned in the hero, not centered */
}
.stage--atelier .dt-booking {
  left: auto;
  right: 64px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* ---- glossy "polish" sweep used for the stage transition ---- */
.scene__wipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-130%) skewX(-12deg);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 68%,
    transparent 100%
  );
  mix-blend-mode: overlay;
}
.scene--stages.is-wiping .scene__wipe {
  animation: polish-sweep 760ms var(--ease);
}
@keyframes polish-sweep {
  0% { opacity: 0; transform: translateX(-130%) skewX(-12deg); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(230%) skewX(-12deg); }
}

/* ============================================================
   Addon-driven scene elements — hidden until their addon is on
   ============================================================ */
[data-scene-el] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
[data-scene-el].is-on {
  opacity: 1;
  pointer-events: auto;
}

/* addon: language switcher (floating, top-right of the scene) */
.cafe__lang {
  position: absolute;
  top: 40px;
  right: 64px;
  z-index: 4;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 25, 23, 0.1);
  transform: translateY(-8px);
}
.cafe__lang.is-on {
  transform: translateY(0);
}
.cafe__lang button {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(28, 25, 23, 0.6);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cafe__lang button.is-active {
  background: #1c1917;
  color: #ffffff;
}

/* addon: reviews row (under the CTA) */
.cafe__reviews {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 25, 23, 0.1);
  font-size: 13px;
  font-weight: 500;
  color: #1c1917;
  transform: translateY(8px);
}
.cafe__reviews.is-on {
  transform: translateY(0);
}
.cafe__stars {
  color: #f59e0b;
  letter-spacing: 1px;
}

/* addon: booking widget (floating, bottom-left of the scene) */
.cafe__booking {
  position: absolute;
  left: 56px;
  bottom: 40px;
  width: 250px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid rgba(28, 25, 23, 0.1);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(28, 25, 23, 0.16);
  transform: translateY(16px);
}
.cafe__booking.is-on {
  transform: translateY(0);
}
.cafe__booking-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cafe-accent);
}
.cafe__booking-t {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1917;
}
.cafe__slots {
  margin-top: 12px;
  display: flex;
  gap: 6px;
}
.cafe__slots button {
  flex: 1;
  padding: 7px 0;
  border: 1px solid rgba(28, 25, 23, 0.15);
  border-radius: 6px;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #1c1917;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.cafe__slots button:hover {
  border-color: var(--cafe-accent);
}
.cafe__slots button.is-active {
  background: var(--cafe-accent);
  border-color: var(--cafe-accent);
  color: #ffffff;
}
.cafe__booking-btn {
  margin-top: 12px;
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  background: #1c1917;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.cafe__booking-btn:hover {
  background: var(--cafe-accent);
}

/* addon: AI chat widget (floating, bottom-right of the scene) */
.cafe__chat {
  position: absolute;
  right: 56px;
  bottom: 40px;
  width: 270px;
  padding: 14px;
  background: #1c1917;
  color: #f5f5f4;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(28, 25, 23, 0.32);
  transform: translateY(16px);
}
.cafe__chat.is-on {
  transform: translateY(0);
}
.cafe__chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.cafe__chat-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.cafe__chat-msg {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px 10px 10px 2px;
  font-size: 13px;
  line-height: 1.45;
}
.cafe__chat-input {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(245, 245, 244, 0.5);
}

/* ============================================================
   Scene 2 — cafe CRM dashboard. CRM addons get demo spots bound
   to config.addons via [data-demo]: ghost (off) ↔ .is-live (on).
   ============================================================ */
.scene--crm {
  background:
    linear-gradient(180deg, rgba(238, 242, 255, 0.4), rgba(255, 255, 255, 0.6));
}

.crm {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: min(78vh, 660px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 210px 1fr;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.12);
  overflow: hidden;
}

/* ---- sidebar ---- */
.crm__side {
  background: #f7f8fb;
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}
.crm__brand {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--tertiary);
}
.crm__brand i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.crm__nav { display: flex; flex-direction: column; gap: 4px; }
.crm__navitem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.crm__navitem:hover { background: rgba(17, 24, 39, 0.05); color: var(--tertiary); }
.crm__navitem.is-active { background: var(--surface); color: #ffffff; }
.crm__badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--demo-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
}

/* demo nav items (mailing / reports): on-label vs ghost off-label */
.crm__navitem--demo { padding: 0; background: transparent; }
.crm__navitem--demo:hover { background: transparent; }
/* a ghost (off) demo item never looks active */
.crm__navitem--demo:not(.is-live).is-active { background: transparent; }
.crm__navlabel-on {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
}
.crm__navitem--demo.is-live .crm__navlabel-on { display: flex; animation: crm-live-in 0.3s var(--ease); }
.crm__navitem--demo.is-live:hover .crm__navlabel-on { background: rgba(17, 24, 39, 0.05); color: var(--tertiary); }
.crm__navitem--demo.is-live.is-active .crm__navlabel-on { background: var(--surface); color: #ffffff; }
.crm__navlabel-off {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border: 1.5px dashed rgba(17, 24, 39, 0.3);
  border-radius: 8px;
  color: var(--text-muted);
  opacity: 0.6;
}
.crm__navitem--demo.is-live .crm__navlabel-off { display: none; }

/* ---- main ---- */
.crm__main { position: relative; padding: 20px 22px; overflow: hidden; }
.crm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.crm__h { font-size: 20px; font-weight: 600; color: var(--tertiary); }
.crm__sub { font-size: 13px; color: var(--text-muted); }
.crm__view[hidden] { display: none; }

/* tables grid */
.crm__tables {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.crm__table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 82px;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
}
.crm__table.is-busy {
  background: #f3f1ff;
  border-color: rgba(79, 70, 229, 0.25);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.crm__table.is-busy:hover { border-color: var(--demo-accent); }
.crm__tnum { font-size: 13px; font-weight: 600; color: var(--tertiary); }
.crm__tguest { font-size: 12px; color: var(--text-secondary); }
.crm__table:not(.is-busy)::after {
  content: "свободен";
  font-size: 11px;
  color: var(--text-muted);
}
/* loyalty star — visible only when loyalty is live */
.crm__tstar {
  position: absolute;
  top: 10px;
  right: 11px;
  font-size: 14px;
  color: #f59e0b;
  display: none;
}
.crm.is-loyal .crm__table[data-loyal] .crm__tstar {
  display: block;
  animation: crm-live-in 0.3s var(--ease);
}

/* menu list */
.crm__menu-list {
  list-style: none;
  display: grid;
  gap: 2px;
  max-width: 460px;
}
.crm__menu-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-secondary);
}
.crm__menu-list li:last-child { border-bottom: 0; }
.crm__menu-list b { font-weight: 600; color: var(--tertiary); }

/* reports */
.crm__back {
  margin-bottom: 14px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.crm__back:hover { border-color: rgba(17, 24, 39, 0.25); color: var(--tertiary); }
.crm__rgrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
}
.crm__rcard {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.crm__rcard--wide { grid-row: span 2; }
.crm__rlabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.crm__bars {
  margin-top: 22px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
}
.crm__bars span {
  position: relative;
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--demo-accent), color-mix(in srgb, var(--demo-accent) 40%, #ffffff));
}
.crm__bars i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  text-align: center;
  font-style: normal;
  font-size: 10px;
  color: var(--text-muted);
}
.crm__top {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.crm__top b { float: right; color: var(--tertiary); }
.crm__big {
  margin-top: 8px;
  font-size: 38px;
  font-weight: 700;
  color: var(--demo-accent);
  line-height: 1;
}
.crm__rnote { font-size: 12px; color: var(--text-muted); }

/* mailing overlay card */
.crm__mailcard {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 320px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
  animation: crm-live-in 0.3s var(--ease);
}
.crm__mailcard[hidden] { display: none; }
.crm__mailcard-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.crm__mailtitle { margin: 8px 0 14px; font-size: 16px; font-weight: 600; color: var(--tertiary); }
.crm__mailstats { display: flex; gap: 18px; font-size: 13px; color: var(--text-secondary); }
.crm__mailstats b { color: var(--demo-accent); }

/* ---- table detail slide-out ---- */
.crm__detail {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  width: 280px;
  height: 100%;
  padding: 22px;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px rgba(17, 24, 39, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(0);
  animation: crm-slide-in 0.3s var(--ease);
}
.crm__detail[hidden] { display: none; }
.crm__detail-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.crm__order { list-style: none; display: grid; gap: 8px; }
.crm__order li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}
.crm__order b { color: var(--tertiary); }
.crm__total {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-secondary);
}
.crm__total b { float: right; font-size: 16px; color: var(--tertiary); }

/* loyalty block (ghost ↔ live) */
.crm__loyalty { margin-top: auto; }
.crm__loyalty-on {
  display: none;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 13px;
  font-weight: 500;
  color: #92400e;
}
.crm__loyalty.is-live .crm__loyalty-on { display: block; animation: crm-live-in 0.3s var(--ease); }
.crm__loyalty-off {
  display: flex;
  padding: 12px 14px;
  border: 1.5px dashed rgba(17, 24, 39, 0.3);
  border-radius: 10px;
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.crm__loyalty.is-live .crm__loyalty-off { display: none; }

/* ---- tg-notify toasts ---- */
.crm__toasts {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 7;
  width: 250px;
}
.crm__toast { border-radius: 10px; padding: 12px 14px; }
.crm__toast-live {
  display: none;
  background: #0b0e16;
  color: #f3f4f6;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.28);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.crm__toasts.is-live .crm__toast-live { display: block; }
.crm__toasts.is-live .crm__toast-live.show { opacity: 1; transform: translateY(0); }
.crm__toast-ghost {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1.5px dashed rgba(17, 24, 39, 0.3);
  color: var(--text-muted);
  opacity: 0.6;
}
.crm__toast-ghost b { font-size: 13px; font-weight: 600; }
.crm__toast-ghost span { font-size: 12px; }
.crm__toasts.is-live .crm__toast-ghost { display: none; }

@keyframes crm-live-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes crm-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ============================================================
   Scene 2 — data-driven extras: metrics, box statuses,
   detail actions, catalog picker, annotation dots
   ============================================================ */

/* metrics row */
.crm__metrics-wrap { position: relative; margin-bottom: 14px; }
.crm__metrics {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.crm__metric {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.crm__metric b { display: block; font-size: 19px; font-weight: 700; color: var(--tertiary); }
.crm__metric span { font-size: 11.5px; color: var(--text-muted); }

/* card status / box extras */
.crm__table:not(.is-busy)::after { content: none; }
.crm__trow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm__tbadge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
  white-space: nowrap;
}
.crm__tbadge.is-booking { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.crm__table.is-booking { background: #fff7ed; border-color: rgba(217, 119, 6, 0.3); }
.crm__tfree { font-size: 11px; color: var(--text-muted); }
.crm__tsvc { font-size: 11.5px; color: var(--text-secondary); }
.crm__tsum { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--tertiary); }
.crm.is-loyal .crm__tstar { display: block; }

/* 3-column bigger cards (detailing boxes) */
.crm__tables--3 { grid-template-columns: repeat(3, 1fr); }
.crm__tables--3 .crm__table { min-height: 118px; }

/* detail head / who / actions / catalog */
.crm__detail-head { display: flex; align-items: center; gap: 8px; }
.crm__detail-who { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-secondary); }
.crm__detail-owner { font-size: 12px; color: var(--text-muted); }
.crm__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crm__total b { float: none; }
.crm__actions { display: flex; gap: 8px; }
.crm__act {
  flex: 1;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.crm__act:hover { border-color: rgba(17, 24, 39, 0.25); color: var(--tertiary); }
.crm__act--primary { background: var(--surface); color: #fff; border-color: var(--surface); }
.crm__act--primary:hover { color: #fff; }
.crm__catalog {
  list-style: none;
  display: grid;
  gap: 2px;
  max-height: 168px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.crm__catalog[hidden] { display: none; }
.crm__catalog li {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.crm__catalog li:hover { background: rgba(17, 24, 39, 0.05); color: var(--tertiary); }

/* annotation dots + popover */
.note {
  position: absolute;
  z-index: 8;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--demo-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--demo-accent) 22%, transparent);
  cursor: pointer;
}
.note::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--demo-accent);
  animation: note-pulse 2s ease-out infinite;
}
@keyframes note-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
.crm__note-metrics { top: -7px; right: -7px; }
.crm__note-card { right: 10px; bottom: 10px; }
.crm__note-sum {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}
.note-pop {
  position: absolute;
  z-index: 200;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.3);
}
.note-pop[hidden] { display: none; }

/* ============================================================
   Scene 2 — Atelier variant: client constructor + owner feed
   ============================================================ */
.crm[hidden], .atl[hidden] { display: none !important; }

.atl {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.atl__head { text-align: center; margin-bottom: 18px; }
.atl__title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tertiary);
}
.atl__sub { margin-top: 6px; font-size: 14px; color: var(--text-secondary); }

.atl__windows { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.atl__win {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.1);
  overflow: hidden;
}
.atl__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #f3f4f8;
  border-bottom: 1px solid var(--line);
}
.atl__dots { display: flex; gap: 5px; }
.atl__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(17, 24, 39, 0.16); }
.atl__url {
  flex: 1;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.atl__bar--app { background: var(--surface); }
.atl__app { font-size: 13px; font-weight: 600; color: #fff; }

/* ---- constructor (client) ---- */
.atl__client { padding: 18px; }
.atl__preview {
  --c-hood: color-mix(in srgb, var(--c-body, #3a3f47) 82%, #000);
  --c-pocket: color-mix(in srgb, var(--c-body, #3a3f47) 90%, #000);
  --c-string: color-mix(in srgb, var(--c-body, #3a3f47) 62%, #000);
  display: grid;
  place-items: center;
  padding: 6px;
  background: linear-gradient(180deg, #fafafa, #f1f1f4);
  border-radius: 12px;
}
.atl-hoodie { width: 200px; height: auto; }
.atl-body { fill: var(--c-body, #3a3f47); transition: fill 0.3s var(--ease); }
.atl-hood { fill: var(--c-hood); transition: fill 0.3s var(--ease); }
.atl-pocket { fill: var(--c-pocket); transition: fill 0.3s var(--ease); }
.atl-neck { fill: rgba(0, 0, 0, 0.22); }
.atl-string { stroke: var(--c-string); stroke-width: 3; stroke-linecap: round; fill: none; }
.atl-aglet { fill: var(--c-string); }
.atl-emb { fill: var(--c-thread, #fff); font: 700 17px "Geist", sans-serif; letter-spacing: 1px; display: none; }
.atl-print { stroke: var(--c-thread, #fff); fill: var(--c-thread, #fff); display: none; }
.atl__preview.show-emb .atl-emb { display: block; }
.atl__preview.show-print .atl-print { display: block; }

.atl__controls { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.atl__field { position: relative; }
.atl__flabel {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.atl__field[hidden] { display: none; }
.atl__swatches { display: flex; gap: 8px; }
.atl__sw {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--sw);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.atl__sw:hover { transform: scale(1.1); }
.atl__sw.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--demo-accent); }
/* full-width segmented controls so the rows align */
.atl__seg { display: flex; width: 100%; }
.atl__seg .seg__btn { flex: 1; padding-left: 8px; padding-right: 8px; text-align: center; }
.atl__input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--tertiary);
}
.atl__input:focus { outline: none; border-color: var(--demo-accent); }

.atl__pricerow {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.atl__price span { display: block; font-size: 11px; color: var(--text-muted); }
.atl__price b { font-size: 22px; font-weight: 700; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.atl__orderwrap { position: relative; display: flex; align-items: center; gap: 8px; }
.atl__order-btn {
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.atl__order-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }

/* ---- owner feed ---- */
.atl__owner { position: relative; padding: 16px; }
.atl__metrics {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.atl__addonrow { display: flex; gap: 8px; margin-bottom: 12px; }
.atl__chip {
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.atl__chip-on, .atl__chip-off {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.atl__chip-on { display: none; background: var(--surface); color: #fff; }
.atl__chip--demo.is-live .atl__chip-on { display: block; }
.atl__chip-off { border: 1.5px dashed rgba(17, 24, 39, 0.3); color: var(--text-muted); opacity: 0.6; }
.atl__chip--demo.is-live .atl__chip-off { display: none; }

.atl__feed { list-style: none; display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.atl__feed[hidden] { display: none; }
.atl__order {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.atl__order.is-fresh { animation: atl-order-in 0.45s var(--ease); }
@keyframes atl-order-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); background: rgba(99, 102, 241, 0.08); }
  to { opacity: 1; transform: none; background: #fff; }
}
.atl__order-top { display: flex; align-items: baseline; gap: 8px; }
.atl__order-n { font-size: 13px; font-weight: 700; color: var(--tertiary); }
.atl__order-item { font-size: 13px; color: var(--text-secondary); }
.atl__order-sum { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--tertiary); }
.atl__order-params { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.atl__order-stagerow { position: relative; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.atl__stage {
  padding: 4px 12px;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
}
.atl__stage:hover { filter: brightness(0.95); }

/* atelier loyalty (inside an order card) */
.atl__loyalty { margin-top: 10px; }
.atl__loyalty-on {
  display: none;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 12.5px;
  font-weight: 500;
  color: #92400e;
}
.atl__loyalty.is-live .atl__loyalty-on { display: block; }
.atl__loyalty-off {
  display: flex;
  padding: 8px 12px;
  border: 1.5px dashed rgba(17, 24, 39, 0.3);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.6;
  cursor: pointer;
}
.atl__loyalty.is-live .atl__loyalty-off { display: none; }

/* atelier reports + mailing reuse .crm__* card styles */
.atl__reports[hidden] { display: none; }
.atl__mailcard {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 70px;
  z-index: 5;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.2);
  animation: crm-live-in 0.3s var(--ease);
}
.atl__mailcard[hidden] { display: none; }
.atl__mailcard-close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent; font-size: 20px; line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.atl__mailtitle { margin: 8px 0 12px; font-size: 15px; font-weight: 600; color: var(--tertiary); }
.atl__mailstats { display: flex; gap: 18px; font-size: 13px; color: var(--text-secondary); }
.atl__mailstats b { color: var(--demo-accent); }

/* atelier tg-notify toasts */
.atl__toasts { position: absolute; right: 18px; bottom: 18px; z-index: 7; width: 280px; }
.atl__toast { border-radius: 10px; padding: 12px 14px; }
.atl__toast-live {
  display: none;
  background: #0b0e16; color: #f3f4f6;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.28);
  font-size: 13px; line-height: 1.4;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.atl__toasts.is-live .atl__toast-live { display: block; }
.atl__toasts.is-live .atl__toast-live.show { opacity: 1; transform: translateY(0); }
.atl__toast-ghost {
  display: flex; flex-direction: column; gap: 3px;
  border: 1.5px dashed rgba(17, 24, 39, 0.3);
  color: var(--text-muted); opacity: 0.6;
}
.atl__toast-ghost b { font-size: 13px; font-weight: 600; }
.atl__toast-ghost span { font-size: 12px; }
.atl__toasts.is-live .atl__toast-ghost { display: none; }

/* scene--crm needs to grow for the wider atelier layout */
.scene--crm { align-items: center; }