/* Cantry design language — values ported verbatim from the original app's
 * style.css. Plain CSS on purpose: hover/glass values use rgba() with short
 * decimals, which Tailwind's arbitrary-value parser refuses to compile. */

/* Mode/choice card (.choice-card) — SOLID dark plate (donor --card #161619), NOT
 * translucent: a see-through card let the bright lime backdrop bleed through and
 * green the menu (owner's note, window 2). Donor colours/fonts one-to-one. */
.cz-card {
  background: #161619;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 10px;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.22s,
    border-color 0.22s,
    box-shadow 0.22s;
}
.cz-card:hover {
  background: rgba(34, 34, 42, 0.55);
  border-color: rgba(205, 255, 46, 0.26);
  transform: translateY(-2px);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(205, 255, 46, 0.26);
}

/* The hub shows only the modes that are ready, so each one gets half a row:
 * more plate, a larger icon tile, and room for the title to breathe. */
.cz-card-big {
  padding: 18px;
  border-radius: 16px;
  gap: 18px;
}
.cz-card-big .cz-badge {
  width: 76px;
  height: 76px;
  border-radius: 13px;
}

/* A mode that stays on screen but is temporarily closed: visible, muted, not
 * clickable. The opacity matches the shipped .step-card[disabled] recipe. The
 * hover SWAPS the hint line for the reason rather than adding a badge — a badge
 * collided with the mode title on a narrow card the last time this was tried,
 * and the hint line is already there, already mono, already lights up lime. */
.cz-card-dim {
  /* NOT `opacity` — the card also carries .cz-reveal, whose cz-rise animation
   * ends on `opacity: 1` with fill-mode forwards, and an animation beats a
   * plain declaration in the cascade, so a bare opacity here is silently
   * overwritten (measured in the browser: computed opacity stayed 1).
   * `filter` takes no part in that animation, so it survives the entrance. */
  filter: opacity(0.42);
  cursor: not-allowed;
}
.cz-card-dim:hover {
  background: #161619;
  border-color: rgba(255, 255, 255, 0.09);
  transform: none;
  box-shadow: none;
}
.cz-card-dim .cz-hint-dim {
  display: none;
}
.cz-card-dim:hover .cz-hint-idle {
  display: none;
}
.cz-card-dim:hover .cz-hint-dim {
  display: inline;
}
.cz-card-dim:hover .cz-hint {
  color: #cdff2e;
}
/* A phone has no pointer to hover with, so the reason would never appear and the
 * card would just ignore taps in silence. Without hover it simply stays on,
 * in place of the hint. Must sit AFTER the rules above — same specificity,
 * later wins. */
@media (hover: none) {
  .cz-card-dim .cz-hint-idle {
    display: none;
  }
  .cz-card-dim .cz-hint-dim {
    display: inline;
  }
  .cz-card-dim .cz-hint {
    color: #cdff2e;
  }
}

/* Icon tile inside the card (.choice-badge-text) */
.cz-badge {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: radial-gradient(circle at 50% 38%, rgba(205, 255, 46, 0.16), rgba(0, 0, 0, 0.45));
  color: #cdff2e;
}

/* Mono hint line (.choice-pick); lights up lime with the card hover */
.cz-hint {
  color: #66666e;
  transition: color 0.2s;
}
.cz-card:hover .cz-hint {
  color: #cdff2e;
}

/* Primary lime button (cantry.ai .btn-primary) */
.cz-btn-primary {
  background: #cdff2e;
  color: #0a0a0b;
  border: 1px solid transparent;
  border-radius: 100px;
  box-shadow: 0 0 0 rgba(205, 255, 46, 0.5);
  transition:
    transform 0.15s,
    box-shadow 0.2s,
    background 0.2s;
}
.cz-btn-primary:hover:enabled {
  transform: translateY(-1px);
  box-shadow: 0 6px 26px rgba(205, 255, 46, 0.35);
}

/* Grid backdrop (.bg-grid) + drifting lime glow (.bg-glow) — cantry.ai */
.cz-bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
}
.cz-bg-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 90vw;
  height: 90vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(205, 255, 46, 0.06), transparent 60%);
  animation: cz-drift 18s ease-in-out infinite;
}
@keyframes cz-drift {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-46%) translateY(4%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cz-bg-glow {
    animation: none;
  }
}

/* Top-left brand badge (.brand / .brand-mark / .brand-name / .brand-sub) */
.cz-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cz-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  position: relative;
  background: #cdff2e;
  box-shadow: 0 0 18px rgba(205, 255, 46, 0.45);
}
.cz-brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 3px;
  background: #0a0a0b;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.cz-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.06;
}
.cz-brand-name {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.13em;
  font-size: 15px;
  text-transform: uppercase;
  color: #f5f5f6;
}
.cz-brand-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #66666e;
  text-transform: uppercase;
}

/* Showcase (.show-grid / .show-card / .show-label) — cantry.ai + Cantry app */
.cz-show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.cz-show-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e0e11;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.22s,
    border-color 0.22s;
}
.cz-show-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(205, 255, 46, 0.5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.cz-show-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.55));
}
.cz-show-label {
  position: absolute;
  left: 12px;
  bottom: 11px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Placeholder filling until real demos land */
.cz-show-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at 50% 40%, rgba(205, 255, 46, 0.05), rgba(0, 0, 0, 0.3));
}

/* ===== Entry page (hero redesign, approved on higgsapp.cantry.ai 2026-07-10) ===== */

/* Fixed page backdrop (cantry.ai .bg-stage): the grid + glow live inside it.
 * z-index 0 INSIDE main (not -1): the app's main carries an opaque background,
 * so a negative z-index would hide the grid behind it. Page content sits in a
 * z-10 wrapper above this stage. */
.cz-bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Sticky top bar (cantry.ai .topbar) */
.cz-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 26px;
  background: rgba(10, 10, 11, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.cz-topnav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  color: #9a9aa3;
}
.cz-topnav a {
  color: #9a9aa3;
  text-decoration: none;
  transition: color 0.15s;
}
.cz-topnav a:hover {
  color: #f5f5f6;
}
/* Brand + footer links never carry the browser's default blue underline
 * (defense-in-depth — do not rely on Tailwind preflight resetting anchors). */
.cz-brand,
.cz-footer a {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 720px) {
  .cz-topnav a {
    display: none;
  }
}

/* "Built with <logo>" pill with the hot lime dot (cantry.ai .pill.on) */
.cz-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  background: #161619;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #f5f5f6;
}
.cz-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cdff2e;
  box-shadow: 0 0 8px #cdff2e;
  animation: cz-pulse 2.2s ease-in-out infinite;
}
@keyframes cz-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.cz-pill-logo {
  height: 15px;
  width: auto;
  display: block;
}

/* Hero: dimmed video + radial scrim; content on z-2 (cantry.ai .hero) */
.cz-hero {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 52px 24px 20px;
  text-align: center;
}
.cz-hero-vid {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* Tailwind preflight sets video { max-width: 100% } — without this override
   * the full-bleed video gets capped at the hero's 1080px container. */
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  /* Dissolve the bottom edge into the page so no rectangle line shows where
   * the video ends (owner's note). Applied to the scrim below as well. */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.cz-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 10, 11, 0.35), rgba(10, 10, 11, 0.82) 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.cz-hero > *:not(.cz-hero-vid) {
  position: relative;
  z-index: 2;
}
.cz-hero-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #cdff2e;
}
/* Donor hero headline recipe (Zavod .hero-cine .hero-title): thin serif, huge,
   lime span on the closing phrase. Size is scaled down from the donor clamp so
   the longer slogan holds two clean lines. */
.cz-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 6.2vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 18px 0;
  color: #f5f5f6;
}
.cz-hero-title span {
  color: #cdff2e;
}
.cz-hero-sub {
  color: #9a9aa3;
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 62ch;
  margin: 0 auto;
}
.cz-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
/* Donor large button (Zavod .btn.lg) — bolt icon + short label. */
.cz-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 100px;
}
.cz-btn-bolt {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Donor glass capability bar (Zavod .cap-bar): the five pipeline blocks in a
   rounded mono pill under the CTA. */
.cz-cap-bar {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 13px 24px;
  border-radius: 100px;
  /* Opaque smoky-grey plate (donor #161619 family) so the bright lime backdrop
   * never bleeds through and greens the pill — keeps the labels crisp. No
   * saturate() (that was tinting the glass green). */
  background: rgba(24, 24, 28, 0.66);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5f5f6;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.42);
  flex-wrap: wrap;
  justify-content: center;
}
.cz-cap-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8a8a92;
  flex: 0 0 auto;
}

/* Film-strip directly after the hero — no section header above it, so the
   running frames start right where the hero video dissolves. */
.cz-reel-section {
  padding: 0 24px 8px;
  /* Pulled up to the grid line, leaving one 64px square above it (owner's note). */
  margin-top: -140px;
}

/* Expanding search — icon pill that glides open on hover/focus (kinetics-style). */
.cz-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 100px;
  /* Collapsed: a small visible pill (not a bare circle) with a hairline lime
     tint so the search affordance reads at a glance (owner's note). */
  background: #1c1c21;
  border: 1px solid rgba(205, 255, 46, 0.22);
  color: #cdff2e;
  overflow: hidden;
  transition:
    width 0.4s cubic-bezier(0.22, 0.7, 0.2, 1),
    border-color 0.2s,
    background 0.2s;
  width: 58px;
}
.cz-search.is-open {
  width: 260px;
  border-color: rgba(205, 255, 46, 0.4);
  background: #1c1c21;
}
.cz-search-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #9a9aa3;
}
.cz-search.is-open .cz-search-ic {
  color: #cdff2e;
}
.cz-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #f5f5f6;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.25s 0.1s;
}
.cz-search.is-open .cz-search-input {
  opacity: 1;
}
.cz-search-input::placeholder {
  color: #66666e;
}
.cz-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Coverflow — big 3D card carousel (showcase). Centre card dominant, sides fan
   out; lime ring on the active card. */
.cz-cf {
  outline: none;
}
/* Visible keyboard focus on the operable carousel (arrow keys move it). */
.cz-cf:focus-visible {
  outline: 2px solid #cdff2e;
  outline-offset: 6px;
  border-radius: 18px;
}
.cz-cf-stage {
  position: relative;
  height: 380px;
  perspective: 1500px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: grab;
  overflow: hidden;
}
.cz-cf-stage:active {
  cursor: grabbing;
}
.cz-cf-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58%, 460px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: #101013;
  box-shadow: 0 26px 66px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.55s cubic-bezier(0.22, 0.7, 0.2, 1),
    opacity 0.55s;
  will-change: transform;
}
.cz-cf-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
.cz-cf-card.is-active {
  box-shadow:
    0 26px 66px rgba(0, 0, 0, 0.7),
    0 0 0 2px #cdff2e,
    0 0 26px rgba(205, 255, 46, 0.45);
}
.cz-cf-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.cz-cf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.cz-cf-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #161619;
  color: #cdff2e;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.cz-cf-arrow:hover {
  border-color: rgba(205, 255, 46, 0.5);
  background: #1c1c21;
}
.cz-cf-dots {
  display: flex;
  gap: 8px;
}
.cz-cf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.2s;
}
.cz-cf-dot.on {
  background: #cdff2e;
  transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
  .cz-cf-card {
    transition: none;
  }
}

/* Reel variant — large portrait cards for the anime brief wizard (a preset
   picker with a locked video showcase at the centre). Additive over the base. */
.cz-cf-reel .cz-cf-stage {
  height: 360px;
  perspective: 1700px;
  /* Let a hovered card pop out beyond the stage without being clipped. */
  overflow: visible;
}
.cz-cf-reel .cz-cf-card {
  width: min(40%, 250px);
  aspect-ratio: 3 / 4;
}
.cz-cf-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
/* A chosen preset — a brighter, thicker lime ring than the centre "active" one. */
.cz-cf-card.is-selected {
  box-shadow:
    0 26px 66px rgba(0, 0, 0, 0.7),
    0 0 0 3px #cdff2e,
    0 0 34px rgba(205, 255, 46, 0.6);
}
/* Placeholder face shown until the real preset art is generated. */
.cz-cf-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  background: linear-gradient(
    155deg,
    hsl(var(--ph-h, 90) 42% 24%),
    hsl(calc(var(--ph-h, 90) + 40) 46% 12%)
  );
  color: rgba(255, 255, 255, 0.9);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Round carousel — 3D cylinder of the user's images (projects screen). */
.cz-round {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.cz-round-viewport {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
}
.cz-round-viewport:active {
  cursor: grabbing;
}
.cz-round-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.cz-round-card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  margin-left: -95px;
  border-radius: 16px;
  overflow: hidden;
  /* Lime ring on EVERY card (owner's note), a soft one — the front-facing card
     then gets the brighter showcase-style ring below. */
  border: 1px solid rgba(205, 255, 46, 0.35);
  background: #101013;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  backface-visibility: hidden;
}
.cz-round-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
/* Lime ring on the front-facing card — same accent as the showcase coverflow. */
.cz-round-card.is-active {
  border-color: #cdff2e;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 0 2px #cdff2e,
    0 0 22px rgba(205, 255, 46, 0.45);
}

/* Keycap button — a mechanical key that depresses on its own shadow (donor
   Output-folder button, keycap-press motif). */
.cz-keycap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #1c1c21;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f6;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
  transform: translateY(-2px);
  transition:
    transform 0.09s ease,
    box-shadow 0.09s ease,
    border-color 0.2s;
}
.cz-keycap:hover {
  border-color: rgba(205, 255, 46, 0.3);
}
.cz-keycap:active {
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
}
.cz-keycap .cz-keycap-ic {
  color: #cdff2e;
  display: grid;
  place-items: center;
}

/* Sections under the hero */
.cz-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px 8px;
}
.cz-section-head {
  text-align: center;
  margin-bottom: 34px;
}
.cz-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #cdff2e;
  text-transform: uppercase;
}
.cz-section-head h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.015em;
  margin-top: 10px;
  color: #f5f5f6;
}
/* The section standfirst. 58ch left this sentence 12px of room on a 1280px
   screen, so a slightly wider font, a zoom step or a narrower window tipped it
   onto a second line holding one orphaned word. Wider cap gives it real slack,
   and text-wrap:balance means that when it does have to wrap — on a phone — it
   splits evenly instead of dropping a single word underneath. */
.cz-section-sub {
  color: #9a9aa3;
  font-size: 15px;
  max-width: 66ch;
  margin: 10px auto 0;
  text-wrap: balance;
}

/* Hero film-strip — a slow contact sheet of cinematic frames drifting under the
   slogan; sprocket-holed like real film, edge-faded, pauses on hover, static on
   reduced-motion. Frames are curated stills (through-app generations). The track
   is the frame set rendered TWICE so a -50% translate loops seamlessly. */
.cz-reel-shell {
  position: relative; margin: 28px 0 6px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: #0c0c0e;
  padding: 16px 0;
}
.cz-reel-shell::before, .cz-reel-shell::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 3; pointer-events: none;
}
.cz-reel-shell::before { left: 0; background: linear-gradient(90deg, #0c0c0e, transparent); }
.cz-reel-shell::after { right: 0; background: linear-gradient(-90deg, #0c0c0e, transparent); }
.cz-reel { display: flex; gap: 14px; width: max-content; animation: cz-reel-run 72s linear infinite; }
.cz-reel-shell:hover .cz-reel { animation-play-state: paused; }
@keyframes cz-reel-run { to { transform: translateX(-50%); } }
.cz-reel-frame {
  position: relative; flex: none; width: 340px; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #101013;
}
.cz-reel-frame img,
.cz-reel-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-reel-frame::before, .cz-reel-frame::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(10, 10, 11, 0.92) 0 6px, transparent 6px 13px);
}
.cz-reel-frame::before { top: 4px; }
.cz-reel-frame::after { bottom: 4px; }
@media (max-width: 640px) { .cz-reel-frame { width: 230px; } }
@media (prefers-reduced-motion: reduce) { .cz-reel { animation: none; } }

/* Pipeline step cards */
.cz-step-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cz-step-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(22, 22, 27, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.22s;
}
.cz-step-card:hover {
  transform: translateY(-2px);
  border-color: rgba(205, 255, 46, 0.5);
}
.cz-step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #cdff2e;
}
.cz-step-name {
  font-size: 13.5px;
  color: #f5f5f6;
}
.cz-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #46464e;
  margin-left: auto;
}
.cz-step-card.cz-live .cz-step-dot {
  background: #cdff2e;
  box-shadow: 0 0 8px #cdff2e;
  animation: cz-pulse 2.2s ease-in-out infinite;
}

/* FAQ — item look, lime chevron and hover ported 1:1 from cantry.ai */
.cz-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}
.cz-faq-item {
  background: #161619;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  overflow: hidden;
}
.cz-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: #f5f5f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: color 0.15s;
}
.cz-faq-item summary:hover {
  color: #cdff2e;
}
.cz-faq-item summary::-webkit-details-marker {
  display: none;
}
.cz-faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid #cdff2e;
  border-bottom: 2px solid #cdff2e;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.cz-faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.cz-faq-item p {
  color: #9a9aa3;
  padding: 0 18px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 70ch;
}

/* Footer strip */
.cz-footer {
  max-width: 1080px;
  margin: 64px auto 0;
  padding: 22px 24px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cz-footer-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #66666e;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .cz-pill-dot,
  .cz-step-card.cz-live .cz-step-dot,
  .cz-turnkey .step-screen-head.s-active .step-screen-dot,
  .cz-turnkey .ws-personal {
    animation: none;
  }
}

/* Undo snackbar — the drain-bar delete (kinetics.colorion.co pattern): a lime
   timer drains while the action can still be undone; empty = it commits. */
.cz-snack {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(92vw, 440px);
  background: #161619;
  border: 1px solid #2a2a31;
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: cz-snack-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cz-snack-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.cz-snack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
}
.cz-snack-label { font-size: 13.5px; color: #f5f5f6; }
.cz-snack-undo {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cdff2e;
  background: transparent;
  border: 1px solid rgba(205, 255, 46, 0.4);
  border-radius: 8px;
  padding: 6px 15px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.cz-snack-undo:hover {
  border-color: #cdff2e;
  background: rgba(205, 255, 46, 0.08);
}
.cz-snack-track {
  height: 3px;
  background: #24242a;
}
.cz-snack-drain {
  height: 100%;
  background: #cdff2e;
  box-shadow: 0 0 8px rgba(205, 255, 46, 0.5);
  transform-origin: left;
  animation-name: cz-snack-drain;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes cz-snack-drain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cz-snack {
    animation: none;
  }
  .cz-snack-drain {
    animation: none;
    transform: scaleX(0);
  }
}

/* ===== MODES additions: staggered entrance + the Edit & Assemble wide card ===== */

/* Entrance: cards rise in with the cantry.ai reveal curve; per-card delay
 * comes as the --d custom property set inline. */
.cz-reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: cz-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes cz-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The hint arrow nudges right on card hover */
.cz-arr {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cz-card:hover .cz-arr {
  transform: translateX(4px);
}

/* Wide card: Edit & Assemble spans the full hub row */
.cz-card-wide {
  flex: 1 1 100%;
  min-width: 100%;
}

/* Mini-timeline inside the wide card: clips scatter, assemble into a row,
 * then a lime playhead sweeps the assembled track (genwave motif). */
.cz-ed-demo {
  margin-left: auto;
  flex: none;
  align-self: center;
  width: 340px;
  height: 56px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.35);
}
@media (max-width: 760px) {
  .cz-ed-demo {
    display: none;
  }
}
.cz-ed-clip {
  position: absolute;
  top: 14px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(205, 255, 46, 0.35);
  background: linear-gradient(180deg, rgba(205, 255, 46, 0.2), rgba(205, 255, 46, 0.07));
  animation: var(--anim) 7s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.cz-ed-clip:nth-child(1) { left: 12px;  width: 66px; --anim: cz-asm1; }
.cz-ed-clip:nth-child(2) { left: 82px;  width: 44px; --anim: cz-asm2; }
.cz-ed-clip:nth-child(3) { left: 130px; width: 58px; --anim: cz-asm3; }
.cz-ed-clip:nth-child(4) { left: 192px; width: 38px; --anim: cz-asm4; }
.cz-ed-clip:nth-child(5) { left: 234px; width: 62px; --anim: cz-asm5; }
.cz-ed-clip:nth-child(6) { left: 300px; width: 28px; --anim: cz-asm6; }
@keyframes cz-asm1 { 0%, 8% { transform: translate(-9px, -7px); opacity: 0.35; } 24%, 80% { transform: none; opacity: 1; } 96%, 100% { transform: translate(-9px, -7px); opacity: 0.35; } }
@keyframes cz-asm2 { 0%, 8% { transform: translate(7px, 8px); opacity: 0.3; } 26%, 80% { transform: none; opacity: 1; } 96%, 100% { transform: translate(7px, 8px); opacity: 0.3; } }
@keyframes cz-asm3 { 0%, 8% { transform: translate(-6px, 9px); opacity: 0.35; } 28%, 80% { transform: none; opacity: 1; } 96%, 100% { transform: translate(-6px, 9px); opacity: 0.35; } }
@keyframes cz-asm4 { 0%, 8% { transform: translate(10px, -8px); opacity: 0.3; } 30%, 80% { transform: none; opacity: 1; } 96%, 100% { transform: translate(10px, -8px); opacity: 0.3; } }
@keyframes cz-asm5 { 0%, 8% { transform: translate(-8px, 6px); opacity: 0.35; } 32%, 80% { transform: none; opacity: 1; } 96%, 100% { transform: translate(-8px, 6px); opacity: 0.35; } }
@keyframes cz-asm6 { 0%, 8% { transform: translate(9px, 7px); opacity: 0.3; } 34%, 80% { transform: none; opacity: 1; } 96%, 100% { transform: translate(9px, 7px); opacity: 0.3; } }
.cz-ed-playhead {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: #cdff2e;
  box-shadow: 0 0 12px #cdff2e, 0 0 28px rgba(205, 255, 46, 0.5);
  animation: cz-sweep 7s linear infinite;
}
@keyframes cz-sweep {
  0%, 34% { left: 8px; opacity: 0; }
  38% { left: 8px; opacity: 1; }
  74% { left: 330px; opacity: 1; }
  78%, 100% { left: 330px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .cz-ed-clip {
    animation: none;
  }
  .cz-ed-playhead {
    animation: none;
    opacity: 0;
  }
}

/* ===== Edit & Assemble screen (/edit) ===== */

.cz-edbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.cz-edbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #f5f5f6;
}
.cz-edbar-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #9a9aa3;
}
.cz-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9aa3;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 100px;
  padding: 8px 14px;
  background: rgba(22, 22, 27, 0.42);
  transition: color 0.15s, border-color 0.15s;
}
.cz-back:hover {
  color: #cdff2e;
  border-color: rgba(205, 255, 46, 0.5);
}

.cz-ed-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .cz-ed-layout {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Preview column */
.cz-ed-preview {
  flex: none;
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
}
.cz-ed-screen {
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e0e11;
  position: relative;
}
.cz-ed-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cz-ed-screen-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: radial-gradient(circle at 50% 40%, rgba(205, 255, 46, 0.05), rgba(0, 0, 0, 0.3));
}

/* Timeline column */
.cz-ed-side {
  flex: 1;
  min-width: 0;
}
.cz-ed-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cz-ed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(22, 22, 27, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.22s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cz-ed-item:hover {
  border-color: rgba(205, 255, 46, 0.35);
}
.cz-ed-item.cz-active {
  border-color: rgba(205, 255, 46, 0.6);
  box-shadow: 0 0 22px rgba(205, 255, 46, 0.12);
}
.cz-ed-thumb {
  width: 64px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(205, 255, 46, 0.16), rgba(0, 0, 0, 0.45));
  display: grid;
  place-items: center;
  color: #cdff2e;
}
.cz-ed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cz-ed-name {
  min-width: 0;
  flex: 1;
}
.cz-ed-name b {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #f5f5f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cz-ed-name span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #66666e;
}
.cz-ed-ctl {
  display: flex;
  gap: 6px;
  flex: none;
}
.cz-ed-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.3);
  color: #9a9aa3;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: color 0.15s, border-color 0.15s, transform 0.12s;
}
.cz-ed-btn:hover:enabled {
  color: #cdff2e;
  border-color: rgba(205, 255, 46, 0.5);
}
.cz-ed-btn:active:enabled {
  transform: scale(0.94);
}
.cz-ed-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Render settings chips (aspect / grade / dip) */
.cz-setchip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9aa3;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 100px;
  padding: 7px 13px;
  background: rgba(22, 22, 27, 0.42);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cz-setchip:hover {
  color: #f5f5f6;
}
.cz-setchip.cz-on {
  color: #cdff2e;
  border-color: rgba(205, 255, 46, 0.5);
  background: rgba(205, 255, 46, 0.08);
}
.cz-set-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.09);
  margin: 0 4px;
}

/* Per-clip trim window (in/out seconds) */
.cz-ed-trim {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #66666e;
}
.cz-ed-trim input {
  width: 58px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #f5f5f6;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  padding: 3px 6px;
  transition: border-color 0.15s;
}
.cz-ed-trim input:focus {
  outline: none;
  border-color: rgba(205, 255, 46, 0.5);
}

/* Ghost add-slot (the competitor's ghost-clip pattern, our styling) */
.cz-ed-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(205, 255, 46, 0.35);
  background: rgba(205, 255, 46, 0.04);
  color: #9a9aa3;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cz-ed-ghost:hover,
.cz-ed-ghost.cz-over {
  border-color: #cdff2e;
  background: rgba(205, 255, 46, 0.09);
  color: #cdff2e;
}

/* Export progress: genwave track + typing mono log (cantry.ai motifs) */
.cz-genwrap {
  height: 10px;
  border-radius: 100px;
  background: #1c1c21;
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  position: relative;
}
.cz-genfill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  background: rgba(205, 255, 46, 0.35);
  transition: width 0.3s ease;
}
.cz-genbar {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background-repeat: no-repeat;
  background-size: 55% 100%;
  background-image: linear-gradient(90deg, transparent, #cdff2e 45%, #eaffa0 55%, transparent);
  animation: cz-genwave 1.4s linear infinite;
  opacity: 0.55;
}
@keyframes cz-genwave {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
.cz-ed-log {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: #9a9aa3;
  min-height: 60px;
}
.cz-ed-log .cz-log-line::before {
  content: "› ";
  color: #cdff2e;
}
.cz-ed-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: #cdff2e;
  vertical-align: -2px;
  animation: cz-blink 1s steps(1) infinite;
}
@keyframes cz-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-genbar {
    animation: none;
  }
  .cz-ed-cursor {
    animation: none;
  }
}

/* Composer — generate a clip straight into the cut */
.cz-composer {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(22, 22, 27, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cz-composer-head {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9a9aa3;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cz-composer-head::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.09);
}
.cz-composer-prompt {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #f5f5f6;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.cz-composer-prompt:focus {
  outline: none;
  border-color: rgba(205, 255, 46, 0.5);
}
.cz-composer-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #66666e;
}
.cz-composer-signin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  color: #9a9aa3;
}

/* Ghost slot: a generation occupying the timeline while it runs */
.cz-ed-item.cz-ghosting {
  border-style: dashed;
  border-color: rgba(205, 255, 46, 0.35);
}
.cz-ed-item.cz-ghosting.cz-failed {
  border-color: rgba(255, 207, 94, 0.5);
}
.cz-ghost-shimmer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 60% 100%;
  background-image: linear-gradient(90deg, transparent, rgba(205, 255, 46, 0.22), transparent);
  animation: cz-genwave 1.6s linear infinite;
}
.cz-ed-item.cz-ghosting .cz-ed-thumb {
  position: relative;
  overflow: hidden;
}

/* Generated-earlier rail */
.cz-history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.cz-history-item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e0e11;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cz-history-item:hover:enabled {
  border-color: rgba(205, 255, 46, 0.5);
  transform: translateY(-2px);
}
.cz-history-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.cz-history-item img,
.cz-history-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cz-history-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.2);
}
.cz-history-label {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ===== The track (horizontal timeline) ===== */
.cz-track-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 10px;
}
.cz-track {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  height: 86px;
  cursor: crosshair;
}
.cz-track-inner {
  position: relative;
  height: 100%;
  min-width: 100%;
}
.cz-plate {
  position: absolute;
  top: 12px;
  height: 62px;
  border-radius: 10px;
  border: 1px solid rgba(205, 255, 46, 0.3);
  background-color: #14150c;
  background-size: auto 100%;
  background-repeat: repeat-x;
  cursor: grab;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cz-plate:hover {
  border-color: rgba(205, 255, 46, 0.6);
}
.cz-plate-selected {
  border-color: #cdff2e;
  box-shadow: 0 0 16px rgba(205, 255, 46, 0.25);
}
.cz-plate-active {
  transform: translateY(-2px);
}
.cz-plate-label {
  position: absolute;
  left: 5px;
  top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 100px;
  padding: 1px 6px;
}
.cz-plate-kind {
  position: absolute;
  right: 5px;
  bottom: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #cdff2e;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 100px;
  padding: 1px 6px;
}
.cz-playhead {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: #cdff2e;
  box-shadow: 0 0 10px #cdff2e, 0 0 24px rgba(205, 255, 46, 0.5);
  pointer-events: none;
}
.cz-playhead::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cdff2e;
}
.cz-track-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
}

/* Inspector / side panels */
.cz-inspector {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(22, 22, 27, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cz-insp-name {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #f5f5f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cz-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9aa3;
}
.cz-slider-row span {
  min-width: 110px;
}
.cz-slider-row input[type="range"] {
  flex: 1;
  accent-color: #cdff2e;
}

/* Word caption preview over the player */
.cz-caption-preview {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #f5f5f6;
  background: rgba(10, 10, 11, 0.55);
  border-radius: 100px;
  padding: 6px 16px;
  white-space: nowrap;
  animation: cz-rise 0.14s cubic-bezier(0.2, 0.7, 0.2, 1);
  border-bottom: 2px solid #cdff2e;
}

/* Quiet toast */
.cz-toast {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #f5f5f6;
  background: rgba(22, 22, 27, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(205, 255, 46, 0.35);
  border-radius: 100px;
  padding: 10px 18px;
}

/* Confirmation modal — the explicit yes before any spend */
.cz-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  padding: 24px;
}
.cz-modal {
  width: min(400px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #161619;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cz-rise 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cz-modal-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #f5f5f6;
}
.cz-modal-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cz-modal-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding-bottom: 8px;
}
.cz-modal-rows span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #66666e;
}
.cz-modal-rows b {
  font-size: 13.5px;
  color: #f5f5f6;
  font-weight: 600;
  text-align: right;
}
.cz-modal-note {
  font-size: 12.5px;
  color: #9a9aa3;
}
.cz-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* ============================================================
   Turnkey — 1:1 UI port of the original Turnkey mode.
   Donor: ContenZavod app/frontend/style.css (verbatim rules,
   selectors scoped under .cz-turnkey; ONLY the @keyframes are
   renamed with the cz-tk- prefix — keyframes are global and
   genwave/carblink names are already taken by the /edit screen).
   Do not "improve" these rules: they must match the donor.
   ============================================================ */
.cz-turnkey {
  --bg: #0a0a0b;
  --bg-2: #0e0e11;
  --card: #161619;
  --card-2: #1c1c21;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.055);
  --text: #f5f5f6;
  --muted: #9a9aa3;
  --faint: #66666e;
  --lime: #cdff2e;
  --lime-dim: rgba(205, 255, 46, 0.14);
  --blue: #6b8afd;
  --pink: #ff5fa0;
  --amber: #ffcf5e;
  --cyan: #5fd0e0;
  --purple: #b98cff;
  --ok: #7ee787;
  --idle: #46464e;
  --font: 'Inter', -apple-system, system-ui, sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --r: 14px;
  font-family: var(--font);
  color: var(--text);
  font-size: 15px;
}

/* ---------- Buttons ---------- */
.cz-turnkey .btn{font-family:var(--font); font-weight:600; font-size:14px; padding:12px 22px; border-radius:100px;
  cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, background .2s, border-color .2s, box-shadow .2s}
.cz-turnkey .btn:active{transform:translateY(1px)}
.cz-turnkey .btn-primary{background:var(--lime); color:#0a0a0b; border:none}
.cz-turnkey .btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(205,255,46,.16)}
.cz-turnkey .btn-primary:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none}
.cz-turnkey .btn-ghost{background:var(--card); color:var(--text); border:1px solid var(--line)}
.cz-turnkey .btn-ghost:hover{background:var(--card-2); border-color:rgba(255,255,255,.24)}
.cz-turnkey .btn.sm{padding:9px 16px; font-size:13px; align-self:flex-start}
.cz-turnkey .btn-skip{background:transparent; color:var(--muted); border:1px dashed var(--line)}
.cz-turnkey .btn-skip:hover{color:var(--text); border-color:rgba(255,255,255,.3)}

/* ---------- Wrap / blocks ---------- */
.cz-turnkey .wrap{max-width:1080px; margin:0 auto 52px; padding:0 24px}
.cz-turnkey .block-head{display:flex; align-items:center; gap:14px; margin:0 2px 16px}
.cz-turnkey .block-title{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase}
.cz-turnkey .block-rule{flex:1; height:1px; background:var(--line-2)}
.cz-turnkey .channel-total{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--lime); background:var(--lime-dim); border:1px solid rgba(205,255,46,.3); border-radius:100px; padding:3px 12px; white-space:nowrap}

/* ---------- Projects ---------- */
.cz-turnkey .proj-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; margin-bottom:6px}
.cz-turnkey .proj-card{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:7px; color:var(--text); font-family:var(--font);
  transition:border-color .2s, background .2s, transform .15s}
.cz-turnkey .proj-card:hover{border-color:rgba(255,255,255,.22); background:var(--card-2); transform:translateY(-2px)}
.cz-turnkey .proj-step{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; flex-wrap:wrap; gap:0 2px}
.cz-turnkey .proj-mode{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); background:rgba(205,255,46,.1); border:1px solid rgba(205,255,46,.25); border-radius:100px; padding:2px 7px; margin-right:8px}
.cz-turnkey .proj-title{font-weight:600; font-size:15px}
.cz-turnkey .proj-url{font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cz-turnkey .proj-cost{font-family:var(--mono); font-size:11px; color:var(--lime); margin-top:2px}

/* ---------- Cost box ---------- */
.cz-turnkey .cost-box{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--lime); border-radius:12px; padding:13px 16px; margin-bottom:20px; display:flex; flex-direction:column; gap:3px}
.cz-turnkey .cost-main{font-family:var(--display); font-weight:600; font-size:18px; color:var(--text)}
.cz-turnkey .cost-rub{font-family:var(--font); font-weight:500; font-size:13px; color:var(--muted)}
.cz-turnkey .cost-cred{margin-left:10px; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--lime); background:var(--lime-dim); border:1px solid rgba(205,255,46,.3); border-radius:100px; padding:2px 11px; vertical-align:middle; white-space:nowrap}
.cz-turnkey .cost-sub{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.cz-turnkey .cost-rows{display:flex; flex-direction:column; gap:5px; margin-top:9px; border-top:1px solid var(--line-2); padding-top:9px}
.cz-turnkey .cost-row{display:flex; align-items:baseline; gap:10px; font-size:12.5px}
.cz-turnkey .cr-name{color:var(--text); font-weight:500; flex:0 0 auto}
.cz-turnkey .cr-det{color:var(--faint); font-family:var(--mono); font-size:11px; flex:1; text-align:right}
.cz-turnkey .cr-usd{color:var(--lime); font-family:var(--mono); font-weight:500; min-width:62px; text-align:right}

/* ---------- Modal ---------- */
.cz-turnkey .modal-backdrop{position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(0,0,0,.55); backdrop-filter:blur(6px)}
.cz-turnkey .modal-backdrop[hidden]{display:none}
.cz-turnkey .modal{width:min(520px,92vw); max-height:90vh; display:flex; flex-direction:column; background:rgba(18,18,24,.72); backdrop-filter:blur(30px) saturate(150%); -webkit-backdrop-filter:blur(30px) saturate(150%); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cz-turnkey .modal h2{font-family:var(--display); font-weight:700; color:var(--text); margin-bottom:18px; font-size:20px; flex:0 0 auto}
.cz-turnkey .modal-body{flex:1 1 auto; overflow-y:auto; min-height:0; margin:0 -4px; padding:0 4px}
.cz-turnkey .modal input{width:100%; padding:12px 14px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-family:var(--font); font-size:14px; margin-bottom:14px}
.cz-turnkey .modal input:focus{outline:none; border-color:var(--lime)}
.cz-turnkey .modal select{width:100%; padding:12px 14px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-family:var(--font); font-size:14px; margin-bottom:14px}
.cz-turnkey .modal select:focus{outline:none; border-color:var(--lime)}
.cz-turnkey .modal label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px}
.cz-turnkey .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px; flex:0 0 auto; padding-top:14px}

/* ---------- Workspace / stepper ---------- */
.cz-turnkey .ws-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 18px}
.cz-turnkey .ws-top .back{margin:0}
/* Delete — lime like the rest of the studio, not a red alarm. Deleting a
   project is undoable here: the drain-bar snackbar holds it for five seconds
   with an Undo, so the button does not need to shout before the fact. */
/* No background here: the shared glass rule below (.proj-card, .btn-ghost,
   .back, .btn-del) sets it with !important, so declaring one would be dead CSS.
   Only the ink, the border on hover and the lift are ours. */
.cz-turnkey .btn-del{border:1px solid rgba(205,255,46,.35); color:var(--lime); border-radius:100px; padding:8px 15px; font-size:13px; cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:6px; transition:border-color .2s, transform .2s cubic-bezier(.2,.7,.2,1)}
.cz-turnkey .btn-del:hover{border-color:var(--lime); transform:translateY(-1px)}
.cz-turnkey .back{background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer; font-size:13px; margin:6px 0 18px; padding:8px 15px; border-radius:100px; font-family:var(--font); display:inline-flex; align-items:center; gap:6px}
.cz-turnkey .back:hover{color:var(--text); border-color:rgba(255,255,255,.22)}
.cz-turnkey .ws-title{font-family:var(--display); font-weight:700; font-size:28px; color:var(--text); margin-bottom:6px; letter-spacing:-.012em}
.cz-turnkey .ws-meta{color:var(--faint); font-size:12.5px; margin-bottom:22px; word-break:break-all; font-family:var(--mono)}
/* Adaptation (documented): the project title is editable in this app — an input
   wearing the donor's .ws-title look. */
.cz-turnkey input.ws-title{display:block; width:100%; background:transparent; border:none; padding:0}
.cz-turnkey input.ws-title:focus{outline:none}
.cz-turnkey .step-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:12px; margin:0 0 26px}
.cz-turnkey .step-card{align-items:center}
.cz-turnkey .step-card .choice-badge{flex:0 0 56px; width:56px; height:56px; font-family:var(--mono); font-size:20px; font-weight:600; color:var(--faint)}
.cz-turnkey .step-card .choice-title{font-size:15px}
.cz-turnkey .step-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px}
.cz-turnkey .step-state{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.cz-turnkey .step-tool{font-size:11.5px; color:var(--muted)}
.cz-turnkey .step-card[disabled]{opacity:.42; cursor:not-allowed; pointer-events:none}
.cz-turnkey .step-card.s-done .choice-badge,.cz-turnkey .step-card.s-approved .choice-badge{color:var(--ok); border-color:rgba(60,200,120,.4)}
.cz-turnkey .step-card.s-active{border-color:var(--lime); background:rgba(205,255,46,.06)}
.cz-turnkey .step-card.s-active .choice-badge{color:var(--lime); border-color:var(--lime)}
.cz-turnkey .step-card.s-active .step-state{color:var(--lime)}
.cz-turnkey .step-card.s-skipped .step-state{color:var(--faint)}

/* Full-screen working window for one step. */
.cz-turnkey .step-screen{min-height:62vh}
.cz-turnkey .step-pager{display:flex; align-items:center; gap:10px}
.cz-turnkey .step-pager-label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.cz-turnkey .step-arrow{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer}
.cz-turnkey .step-arrow:hover:not([disabled]){color:var(--text); border-color:rgba(255,255,255,.22)}
.cz-turnkey .step-arrow[disabled]{opacity:.3; cursor:not-allowed}
.cz-turnkey .step-screen-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-2)}
.cz-turnkey .step-screen-dot{width:11px; height:11px; border-radius:50%; background:var(--idle); flex:0 0 auto}
.cz-turnkey .step-screen-head.s-done .step-screen-dot,.cz-turnkey .step-screen-head.s-approved .step-screen-dot{background:var(--ok)}
.cz-turnkey .step-screen-head.s-active .step-screen-dot{background:var(--lime); box-shadow:0 0 12px var(--lime); animation:cz-pulse 2.2s ease-in-out infinite}
.cz-turnkey .step-screen-head.s-skipped .step-screen-dot{background:var(--faint)}
.cz-turnkey .step-screen-num{font-family:var(--mono); font-size:13px; color:var(--faint)}
.cz-turnkey .step-screen-title{font-family:var(--display); font-weight:700; font-size:24px; color:var(--text); margin:0; letter-spacing:-.01em}
.cz-turnkey .step-screen-tool{font-size:12.5px; color:var(--muted)}
.cz-turnkey .step-screen-state{margin-left:auto; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.cz-turnkey .step-screen-head.s-active .step-screen-state,.cz-turnkey .step-screen-head.s-approved .step-screen-state{color:var(--lime)}
.cz-turnkey .step-screen-body{display:flex; flex-direction:column; gap:12px}
.cz-turnkey .step-screen-foot{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2)}
.cz-turnkey .wta{width:100%; min-height:90px; resize:vertical; overflow:hidden; padding:12px 14px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-family:var(--font); font-size:13.5px; line-height:1.5}
.cz-turnkey .wta:focus{outline:none; border-color:var(--lime)}

/* Step type tags */
.cz-turnkey .step-tag{font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:100px; white-space:nowrap}
.cz-turnkey .tag-auto    { color:var(--lime);   background:var(--lime-dim) }
.cz-turnkey .tag-gate    { color:var(--amber);  background:rgba(255,207,94,.14) }
.cz-turnkey .tag-manual  { color:var(--blue);   background:rgba(107,138,253,.16) }
.cz-turnkey .tag-editable{ color:var(--cyan);   background:rgba(95,208,224,.14) }
.cz-turnkey .tag-choice  { color:var(--pink);   background:rgba(255,95,160,.16) }

/* Prompt cards (step 11): 1 clean prompt = 1 card + Copy */
.cz-turnkey .pcards{display:flex; flex-direction:column; gap:10px; margin-top:2px}
.cz-turnkey .pcard{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; animation:cz-tk-pcard-in .35s ease both}
.cz-turnkey .pcard-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.cz-turnkey .pcard-n{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime)}
.cz-turnkey .pcard-t{white-space:pre-wrap; margin:0; font-family:var(--font); font-size:13px; line-height:1.55; color:var(--text)}
.cz-turnkey .prompts-all{margin-top:10px}

/* Hook-frame boxes (step 11) */
.cz-turnkey .hook-box{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:14px; margin:4px 0 12px; display:flex; flex-direction:column; gap:10px}
.cz-turnkey .hook-chips{display:flex; gap:8px; flex-wrap:wrap}
.cz-turnkey .hook-chip{font-size:13px; font-weight:600; padding:7px 16px; border-radius:100px; background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:background .18s, color .18s, border-color .18s}
.cz-turnkey .hook-chip:hover{border-color:rgba(255,255,255,.24); color:var(--text)}
.cz-turnkey .hook-chip.on{background:var(--lime); color:#0a0a0b; border-color:transparent}
.cz-turnkey .hook-fields{display:flex; flex-direction:column; gap:8px}
.cz-turnkey .hook-f[hidden]{display:none}

/* Running dots on the busy button */
.cz-turnkey .gdots{display:inline-flex; gap:3px; margin-left:7px; vertical-align:middle}
.cz-turnkey .gdots i{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.4; animation:cz-tk-gdot 1s infinite ease-in-out}
.cz-turnkey .gdots i:nth-child(2){animation-delay:.16s}
.cz-turnkey .gdots i:nth-child(3){animation-delay:.32s}
@keyframes cz-tk-gdot{0%,80%,100%{opacity:.35; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}

/* The running wave + fake engine-room log */
.cz-turnkey .genwrap{display:flex; flex-direction:column; gap:11px; padding:16px 0 6px; animation:cz-tk-pcard-in .3s ease both}
.cz-turnkey .genbar{position:relative; height:6px; border-radius:100px; background:var(--bg-2); border:1px solid var(--line); overflow:hidden}
.cz-turnkey .genbar::before{content:""; position:absolute; top:-1px; bottom:-1px; left:-42%; width:42%; border-radius:100px;
  background:linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow:0 0 16px rgba(205,255,46,.55); animation:cz-tk-genwave 1.25s cubic-bezier(.45,0,.55,1) infinite}
@keyframes cz-tk-genwave{0%{left:-42%} 100%{left:102%}}
.cz-turnkey .genlabel{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center}
.cz-turnkey .genlabel .car{display:inline-block; width:7px; height:1.05em; vertical-align:-2px; background:var(--lime); margin-left:3px; box-shadow:0 0 6px var(--lime); animation:cz-tk-carblink 1s steps(1) infinite}
@media(prefers-reduced-motion:reduce){.cz-turnkey .gdots i,.cz-turnkey .pcard,.cz-turnkey .genwrap{animation:none}.cz-turnkey .genbar::before{animation:none; left:0; width:100%; opacity:.45}}
.cz-turnkey .genlog{font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--faint); margin:-4px 0 0;
  max-height:96px; overflow:hidden; white-space:pre-wrap; word-break:break-word}
.cz-turnkey .genlog .gl{display:block; opacity:.5}
.cz-turnkey .genlog .gl::before{content:"\203A  "; color:var(--lime); opacity:.65}
.cz-turnkey .genlog .gl.cur{opacity:.95; color:var(--muted)}
.cz-turnkey .genlog .gl.cur::after{content:""; display:inline-block; width:6px; height:1em; vertical-align:-2px; margin-left:2px;
  background:var(--lime); box-shadow:0 0 6px var(--lime); animation:cz-tk-carblink 1s steps(1) infinite}
@media(prefers-reduced-motion:reduce){.cz-turnkey .genlog{display:none}}
@keyframes cz-tk-carblink{50%{opacity:0}}
/* Step-1 live transcript stream — the Zavod token-by-token moment (donor
   style.css:759-762): a growing pre with a blinking lime caret. */
.cz-turnkey .stream-live{max-height:300px; overflow:auto}
.cz-turnkey .stream-live .car{display:inline-block; width:7px; height:1.05em; vertical-align:-2px;
  background:var(--lime); margin-left:2px; box-shadow:0 0 6px var(--lime);
  animation:cz-tk-carblink 1s steps(1) infinite}
@media(prefers-reduced-motion:reduce){.cz-turnkey .stream-live .car{animation:none}}
/* Account badge + workspace dot (donor style.css:109-122) — who pays for runs. */
.cz-turnkey .ws-acct{display:inline-block; font-size:12.5px; color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-radius:100px; padding:5px 13px; margin-bottom:14px}
.cz-turnkey .ws-acct b{color:var(--text)}
.cz-turnkey .ws-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px;
  vertical-align:middle; background:#46464e}
.cz-turnkey .ws-personal{background:var(--lime); box-shadow:0 0 8px rgba(205,255,46,.5); animation:cz-pulse 2.2s ease-in-out infinite}
/* Lore review — donor styling verbatim (style.css:738-757): pink strikethrough
   original, lime fix tag, green decided states, ring-only current dot. */
/* Ambient background video (donor style.css:434-447 spirit): dimmed loop under
   the glow+grid; hidden for reduced motion. */
/* The Zavod ambient scene, ported verbatim (donor style.css:434-447): the
   original bg animation (assets/bg.mp4) as a SEAMLESS palindrome loop
   (/bg-loop.mp4 — forward+reverse, no visible seam), opacity .5 + slow drift.
   Global class: every MODES screen mounts the same video. */
/* Ambient scene — kept DARK like the donor (Zavod bg-stage): the loop has a
 * bright lime phase, so opacity is low and a dark veil sits over it so it never
 * pulls focus (owner's note, window 2). */
.cz-bg-video{position:fixed; inset:0; width:100vw; height:100vh; object-fit:cover; z-index:0;
  opacity:.24; animation:cz-bgdrift 26s ease-in-out infinite alternate; pointer-events:none}
.cz-bg-veil{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, rgba(10,10,11,.5), rgba(10,10,11,.84) 82%)}
@keyframes cz-bgdrift{0%{transform:scale(1)}100%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.cz-bg-video{animation:none; opacity:.18}}
/* model composer picker chips + drop panel (press a chip -> select list). */
.cz-pick{position:relative; display:inline-block}
.cz-pick-row{display:flex; gap:8px; flex-wrap:wrap}
.cz-pick-arrow{opacity:.6; font-size:10px; margin-left:4px}
.cz-pick-pop{position:absolute; top:calc(100% + 8px); left:0; z-index:60; min-width:280px;
  max-height:min(56vh, 340px); overflow-y:auto; overscroll-behavior:contain;
  background:#161619; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); animation:cz-pick-in .16s ease both}
/* A settings dropdown opens inside a .cz-reveal block whose rise animation leaves
   a resting transform — that makes each block its own stacking context, trapping
   the z-index:60 menu so a LATER block (the Back/nav row) paints over it. Lift the
   block that currently holds an open dropdown so the menu clears its siblings. */
[data-block]:has(.cz-pick-pop){position:relative; z-index:200}
@keyframes cz-pick-in{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.cz-pick-title{font-family:var(--mono, 'JetBrains Mono', monospace); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#9a9aa3; padding:6px 10px 8px}
.cz-pick-item{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  text-align:left; background:transparent; border:0; border-radius:10px; padding:9px 10px;
  color:#f5f5f6; cursor:pointer; font-family:inherit; font-size:13.5px}
.cz-pick-item:hover{background:rgba(255,255,255,.06)}
.cz-pick-item.on{background:rgba(205,255,46,.08)}
.cz-pick-body{display:flex; flex-direction:column; gap:2px; min-width:0}
.cz-pick-label{font-weight:600}
.cz-pick-note{font-size:11.5px; color:#9a9aa3}
.cz-pick-check{color:#cdff2e; font-weight:700}
/* Frame-gallery hover lift (donor style.css:386-390): generated tiles lift with
   a lime edge; pairs with the zoom-in cursor of the lightbox. */
.cz-turnkey .cz-history-item{transition:transform .18s, border-color .2s}
.cz-turnkey .cz-history-item:hover{transform:translateY(-2px); border-color:rgba(205,255,46,.45)}
@keyframes cz-tk-pcard-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Output blocks / misc */
.cz-turnkey .wout{white-space:pre-wrap; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.55; color:var(--muted); max-height:300px; overflow:auto; font-family:var(--font); margin:0}
.cz-turnkey .wout.small{max-height:150px; font-size:12.5px}
.cz-turnkey .grow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.cz-turnkey .grow .cz-keycap{align-self:center}
/* "All projects" toggle under the 8-project grid */
.cz-keycap-more{margin:16px auto 0}
/* Round carousel section under the projects */
.cz-turnkey .ws-round{margin-top:30px}
.cz-turnkey .hint{font-size:12px; color:var(--muted)}
.cz-turnkey .wsoon{font-size:12.5px; color:var(--faint); font-family:var(--mono); display:inline-flex; align-items:center; gap:8px}
.cz-turnkey .waudio{width:100%; margin-top:4px}
.cz-turnkey .wfile{color:var(--muted); font-size:13px}
.cz-turnkey .wfile::file-selector-button{background:var(--card-2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 12px; margin-right:10px; cursor:pointer; font-family:var(--font)}
.cz-turnkey .thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.cz-turnkey .thumb{width:64px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}

/* ---------- Choosers (choice cards + lime highlight) ---------- */
.cz-turnkey .choice-row{display:flex; flex-direction:column; gap:11px; margin:2px 0}
.cz-turnkey .choice-card{display:flex; align-items:stretch; gap:14px; text-align:left; cursor:pointer; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px;
  color:var(--text); font-family:var(--font);
  transition:border-color .2s, background .2s, transform .15s, box-shadow .2s}
.cz-turnkey .choice-card:hover{border-color:rgba(205,255,46,.5); background:var(--card-2); transform:translateY(-2px)}
.cz-turnkey .choice-card.chosen{border-color:var(--lime); background:rgba(205,255,46,.06);
  box-shadow:0 0 0 1px var(--lime), 0 10px 30px rgba(205,255,46,.12)}
.cz-turnkey .choice-badge{flex:0 0 84px; width:84px; height:84px; border-radius:10px; border:1px solid var(--line);
  background-size:cover; background-position:center; box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.cz-turnkey .choice-badge-text{display:flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:700; font-size:34px; color:var(--lime);
  background:radial-gradient(circle at 50% 38%, rgba(205,255,46,.16), rgba(0,0,0,.45))}
.cz-turnkey .choice-card.chosen .choice-badge{border-color:var(--lime)}
.cz-turnkey .choice-body{display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0}
.cz-turnkey .choice-title{font-family:var(--display); font-weight:600; font-size:16px; line-height:1.3; color:var(--text)}
.cz-turnkey .choice-pick{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.cz-turnkey .choice-card:hover .choice-pick{color:var(--lime)}
.cz-turnkey .choice-on{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime)}
.cz-turnkey .fmt-box{border:2px solid var(--lime); border-radius:3px; background:rgba(205,255,46,.14)}
.cz-turnkey .fmt-916{width:24px; height:42px}
.cz-turnkey .fmt-169{width:46px; height:26px}
.cz-turnkey .modal .choice-row{flex-direction:row; flex-wrap:wrap; gap:8px}
.cz-turnkey .modal .choice-card{flex:1 1 calc(50% - 4px); min-width:150px; padding:9px; gap:10px}
.cz-turnkey .modal .choice-badge{flex:0 0 52px; width:52px; height:52px}
.cz-turnkey .modal .choice-badge-text{font-size:22px}
.cz-turnkey .modal .choice-title{font-size:14px}
.cz-turnkey .modal .fmt-916{width:17px; height:30px}
.cz-turnkey .modal .fmt-169{width:32px; height:18px}

/* ---------- Frosted glass + stronger hover motion (donor enhancement block) ---------- */
.cz-turnkey .proj-card,.cz-turnkey .cost-box,.cz-turnkey .choice-card,.cz-turnkey .take,.cz-turnkey .btn-ghost,.cz-turnkey .back,.cz-turnkey .btn-del{
  background:rgba(22,22,27,.42)!important; backdrop-filter:blur(16px) saturate(135%); -webkit-backdrop-filter:blur(16px) saturate(135%);
  border-color:rgba(255,255,255,.12)}
.cz-turnkey .proj-card:hover,.cz-turnkey .choice-card:hover{background:rgba(34,34,42,.55)!important}
.cz-turnkey .cost-box{border-left:3px solid var(--lime)}
.cz-turnkey .proj-card,.cz-turnkey .choice-card{transition:transform .22s cubic-bezier(.2,.7,.2,1), background .22s, border-color .22s, box-shadow .22s}
.cz-turnkey .proj-card:hover,.cz-turnkey .choice-card:hover{transform:translateY(-4px) scale(1.012); box-shadow:0 18px 46px rgba(0,0,0,.5)}
.cz-turnkey .step-card[disabled]:hover{transform:none; box-shadow:none}

/* Donor's input recipe (its .modal input), reused for the step-body inputs —
   the original styles bare inputs only inside modals. */
.cz-turnkey input.winput{width:100%; padding:12px 14px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-family:var(--font); font-size:14px}
.cz-turnkey input.winput:focus{outline:none; border-color:var(--lime)}

/* Turnkey clip rows and the cover plate — carried over from the previous
   pipeline skin (donor-consistent glass rows), renamed into the scope. */
.cz-turnkey .clip-row{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; background:rgba(22,22,27,.42); backdrop-filter:blur(16px) saturate(135%); -webkit-backdrop-filter:blur(16px) saturate(135%); padding:8px 12px}
.cz-turnkey .clip-thumb{position:relative; flex:none; width:64px; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:var(--bg-2); display:grid; place-items:center; color:rgba(255,255,255,.25)}
.cz-turnkey .clip-thumb img,.cz-turnkey .clip-thumb video{width:100%; height:100%; object-fit:cover}
.cz-turnkey .clip-name{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.cz-turnkey .clip-name b{font-size:13.5px; font-weight:600; color:var(--text)}
.cz-turnkey .clip-name span{font-size:12px; color:var(--muted)}
.cz-turnkey .clip-ctl{display:flex; gap:8px; align-items:center; flex:none}
.cz-turnkey .cover-wrap{width:200px; aspect-ratio:9/16; border-radius:12px; overflow:hidden; border:1px solid rgba(205,255,46,.4); margin:10px 0}
.cz-turnkey .cover-wrap img{width:100%; height:100%; object-fit:cover}
/* pcard header row inside <details>: the summary carries the mono number label */
.cz-turnkey .pcard summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none}
.cz-turnkey .pcard summary::-webkit-details-marker{display:none}
.cz-turnkey .frame-actions{position:absolute; top:6px; right:6px; display:flex; gap:4px}

/* One hover language for every ACTIVE lime control — the same lift + lime
   glow as the primary button (cz-btn-primary:hover). */
.cz-turnkey .btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 26px rgba(205,255,46,.35)}
.cz-turnkey .hook-chip.on:hover{transform:translateY(-1px); box-shadow:0 6px 26px rgba(205,255,46,.35); background:var(--lime); color:#0a0a0b; border-color:transparent}
.cz-turnkey .choice-card.chosen:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--lime), 0 6px 26px rgba(205,255,46,.35); background:rgba(205,255,46,.06)!important}

/* ============================================================
   One-shot Film studio (studio_.oneshot.tsx)
   Two-pane: left control rail (model composer) + right output canvas.
   ============================================================ */
.cz-pro-tag {
  font: 500 9.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0a0a0b;
  background: var(--lime, #cdff2e);
  border-radius: 100px;
  padding: 3px 7px;
  margin-left: 8px;
}

.cz-os-rail { flex: none; width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) { .cz-os-rail { width: 100%; } }

.cz-os-hero { position: relative; margin-bottom: 2px; }
.cz-os-hero video { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.cz-os-hero-cap {
  position: absolute; left: 10px; bottom: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: 0.08em;
  color: #f5f5f6; background: rgba(10,10,11,.6); border: 1px solid rgba(205,255,46,.3);
  border-radius: 100px; padding: 5px 9px; backdrop-filter: blur(8px);
}

.cz-os-preset {
  font: 500 10.5px/1.2 "JetBrains Mono", monospace; color: #c9c9d0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; padding: 6px 10px; cursor: pointer; transition: border-color .16s, color .16s;
  max-width: 100%;
}
.cz-os-preset:hover { border-color: rgba(205,255,46,.45); color: #f5f5f6; }

.cz-os-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font: 500 11px/1.3 "JetBrains Mono", monospace; letter-spacing: 0.02em;
  color: #9a9aa3; background: none; border: none; cursor: pointer; transition: color .16s;
}
.cz-os-link:hover { color: var(--lime, #cdff2e); }
.cz-os-link:disabled { opacity: .4; cursor: default; }

.cz-os-fixed {
  align-self: center; font: 500 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.06em; color: #66666e; padding-left: 4px;
}
.cz-os-setlabel {
  font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8a8a93; margin: 12px 0 7px;
}
.cz-os-cta { width: 100%; justify-content: center; text-align: center; }
.cz-os-note { margin-top: 10px; font: 400 11px/1.5 Inter, system-ui, sans-serif; color: #7a7a82; }

/* Structured scene form — single-line inputs (studio look). */
.cz-os-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 9px 11px;
  font: 400 12.5px/1.3 Inter, system-ui, sans-serif;
  color: #f5f5f6;
  transition: border-color 0.16s;
}
.cz-os-input::placeholder { color: #66666e; }
.cz-os-input:focus { outline: none; border-color: rgba(205, 255, 46, 0.45); }

/* Visual style presets — 16:9 tiles + caption pill (mirrors cz-show-card/label). */
.cz-os-showcase { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cz-os-styletile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cz-os-styletile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e0e11;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.2s;
}
.cz-os-styletile.big { aspect-ratio: 16 / 9; cursor: default; }
.cz-os-styletile:hover { transform: translateY(-2px); border-color: rgba(205, 255, 46, 0.4); }
.cz-os-styletile.on { border: 2px solid var(--lime, #cdff2e); }
.cz-os-styletile-cap {
  position: absolute;
  left: 9px;
  bottom: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.cz-os-styletile-cap.on { border-color: rgba(205, 255, 46, 0.55); }
.cz-os-showcase-hint {
  font: 500 10px/1.5 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  color: #66666e;
  margin: 2px 0 0;
}

/* right: stage stepper */
.cz-os-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cz-os-step {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.04em; color: #7a7a82;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 100px; padding: 7px 12px 7px 8px; transition: all .2s;
}
.cz-os-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 100px; font-size: 10px;
  background: rgba(255,255,255,.07); color: #9a9aa3;
}
.cz-os-step.done { color: #c9c9d0; border-color: rgba(205,255,46,.25); }
.cz-os-step.done b { background: rgba(205,255,46,.16); color: var(--lime, #cdff2e); }
.cz-os-step.cur { color: #0a0a0b; background: var(--lime, #cdff2e); border-color: var(--lime, #cdff2e); }
.cz-os-step.cur b { background: rgba(10,10,11,.22); color: #0a0a0b; }

/* right: output canvas */
.cz-os-canvas {
  position: relative; min-height: 340px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09); background: rgba(14,14,17,.55);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px;
}
.cz-os-media { max-width: 100%; max-height: 62vh; border-radius: 12px; display: block; }
.cz-os-busy { width: 100%; max-width: 460px; }
.cz-os-empty { text-align: center; color: #66666e; max-width: 440px; padding: 30px; }
.cz-os-empty p { margin: 12px 0 0; font: 400 14px/1.5 Inter, system-ui, sans-serif; color: #9a9aa3; }
.cz-os-empty-sub { font-size: 12px !important; color: #66666e !important; }

/* right: beats plan view */
.cz-os-plan { width: 100%; max-width: 720px; padding: 6px 4px; align-self: flex-start; }
.cz-os-plan-logline { font: 600 17px/1.35 "Space Grotesk", system-ui, sans-serif; color: #f5f5f6; }
.cz-os-plan-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px;
  font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.04em; color: #8a8a93;
}
.cz-os-plan-zones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cz-os-zone {
  font: 500 10.5px/1 "JetBrains Mono", monospace; color: #c9c9d0;
  background: rgba(205,255,46,.06); border: 1px solid rgba(205,255,46,.18);
  border-radius: 100px; padding: 5px 10px;
}
.cz-os-plan-beats { display: flex; flex-direction: column; gap: 8px; }
.cz-os-beat { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.cz-os-beat-n {
  flex: none; width: 24px; height: 24px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 "JetBrains Mono", monospace; color: #0a0a0b; background: var(--lime, #cdff2e);
}
.cz-os-beat-body { display: flex; flex-direction: column; gap: 3px; }
.cz-os-beat-body b { font: 500 13.5px/1.35 Inter, system-ui, sans-serif; color: #f5f5f6; }
.cz-os-beat-zone { font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a93; }
.cz-os-beat-extra { font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #9a9aa3; }
.cz-os-plan-ending { margin-top: 14px; font: 400 13px/1.5 Inter, system-ui, sans-serif; color: #c9c9d0; }
.cz-os-plan-ending b { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a93; margin-right: 8px; }

/* right: library */
.cz-os-library { margin-top: 20px; }
.cz-os-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cz-os-lib-item {
  position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 21/9;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.cz-os-lib-item video, .cz-os-lib-item img { width: 100%; height: 100%; object-fit: cover; }
.cz-os-lib-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #66666e; }
.cz-os-lib-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  font: 500 10px/1.2 "JetBrains Mono", monospace; color: #f5f5f6;
  background: linear-gradient(transparent, rgba(10,10,11,.82)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* One-shot: result + approval bar (creator approves each render before the next step) */
.cz-os-result { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cz-os-approve {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 720px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.cz-os-approve-label {
  flex: 1 1 auto; min-width: 160px;
  font: 400 12.5px/1.4 Inter, system-ui, sans-serif; color: #c9c9d0;
}
.cz-os-approve-ok {
  flex: 1 1 auto; min-width: 160px; display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1.3 "JetBrains Mono", monospace; letter-spacing: 0.02em; color: var(--lime, #cdff2e);
}
.cz-os-approve .btn { display: inline-flex; align-items: center; gap: 6px; }
.cz-os-hint-approve {
  margin-top: 8px; text-align: center;
  font: 500 10.5px/1.3 "JetBrains Mono", monospace; letter-spacing: 0.04em; color: #b0902e;
}

/* ===== SEO Studio (ported from ContentZavod style.css:506-573, scoped under .cz-turnkey) ===== */
.cz-turnkey .seo-tabs { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.cz-turnkey .seo-tab {
  display: inline-flex; align-items: center; gap: 6px; background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px;
  font: 600 13px var(--font); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.cz-turnkey .seo-tab:hover { color: var(--text, #f5f5f6); border-color: rgba(255, 255, 255, .24); }
.cz-turnkey .seo-tab.on { background: var(--lime-dim); color: var(--lime); border-color: rgba(205, 255, 46, .45); }
.cz-turnkey .seo-tab .ic { width: 15px; height: 15px; }

.cz-turnkey .seo-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cz-turnkey .seo-ctl-label { font: 600 11px var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cz-turnkey .seo-seed {
  width: 100%; min-height: 52px; resize: vertical; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-2, #0f0f12); border: 1px solid var(--line); color: var(--text, #f5f5f6);
  font: 400 14px var(--font); line-height: 1.4;
}
.cz-turnkey .seo-seed:focus { outline: none; border-color: rgba(205, 255, 46, .4); }
.cz-turnkey .seo-note { font: 500 12px var(--font); color: var(--muted); margin-top: 12px; }
.cz-turnkey .seo-soon { font: 500 13px var(--font); color: var(--muted); margin-top: 16px; line-height: 1.5; }

.cz-turnkey .kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.cz-turnkey .kw-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cz-turnkey .kw-card:hover { border-color: rgba(255, 255, 255, .2); }
.cz-turnkey .kw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cz-turnkey .kw-word { font: 600 15px var(--display); color: var(--text, #f5f5f6); line-height: 1.25; }
.cz-turnkey .kw-score { flex: none; min-width: 38px; text-align: center; font: 800 15px var(--mono); border-radius: 9px; padding: 3px 8px; }
.cz-turnkey .score-hi { background: rgba(126, 231, 135, .16); color: var(--ok); }
.cz-turnkey .score-mid { background: rgba(255, 207, 94, .16); color: var(--amber); }
.cz-turnkey .score-lo { background: rgba(255, 95, 160, .15); color: var(--pink); }
.cz-turnkey .kw-meta { font: 500 12px var(--font); color: var(--muted); }
.cz-turnkey .kw-comp { font-weight: 600; }
.cz-turnkey .comp-low { color: var(--ok); }
.cz-turnkey .comp-medium { color: var(--amber); }
.cz-turnkey .comp-high { color: var(--pink); }
.cz-turnkey .kw-why { font: 400 13px var(--font); color: var(--muted); line-height: 1.45; }
.cz-turnkey .kw-angle { font: 500 13px var(--font); color: var(--lime); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.cz-turnkey .kw-angle .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.cz-turnkey .kw-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cz-turnkey .kw-cta {
  display: inline-flex; align-items: center; gap: 6px; background: var(--lime-dim); color: var(--lime);
  border: 1px solid rgba(205, 255, 46, .4); border-radius: 100px; padding: 6px 13px;
  font: 600 12px var(--font); cursor: pointer; transition: background .15s;
}
.cz-turnkey .kw-cta:hover { background: rgba(205, 255, 46, .22); }
.cz-turnkey .kw-cta .ic { width: 13px; height: 13px; }
/* Pipeline closed for debugging: the funnel button stays on the keyword card,
 * muted and inert, and swaps its label for the reason on hover — same language
 * as the dimmed mode card in the hub (.cz-card-dim). */
.cz-turnkey .kw-cta-dim { opacity: .42; cursor: not-allowed; }
.cz-turnkey .kw-cta-dim:hover { background: var(--lime-dim); }
.cz-turnkey .kw-cta-dim .kw-cta-note { display: none; }
.cz-turnkey .kw-cta-dim:hover .kw-cta-idle { display: none; }
.cz-turnkey .kw-cta-dim:hover .kw-cta-note { display: inline; }
/* Same on a phone: no hover, so the reason stays on instead of the label. */
@media (hover: none) {
  .cz-turnkey .kw-cta-dim .kw-cta-idle { display: none; }
  .cz-turnkey .kw-cta-dim .kw-cta-note { display: inline; }
}
.cz-turnkey .kw-copy {
  display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px;
  font: 600 12px var(--font); cursor: pointer;
}
.cz-turnkey .kw-copy:hover { color: var(--text, #f5f5f6); border-color: rgba(255, 255, 255, .24); }

/* SEO Optimization tab (donor style.css:532-561) */
.cz-turnkey .opt-scores { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.cz-turnkey .opt-score {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 18px; min-width: 84px;
}
.cz-turnkey .os-num { font: 800 26px var(--mono); border-radius: 10px; padding: 2px 10px; }
.cz-turnkey .os-lbl { font: 600 11px var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cz-turnkey .opt-block { margin-top: 18px; }
.cz-turnkey .opt-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Score Pulse — the "apply" arrow next to the score tiles; a Quiet Glow (a soft
   brightness/glow pulse) on the transparent 4K original, tapped to roll the
   tiles from current to projected scores. */
.cz-turnkey .score-pulse {
  display: flex; flex-direction: column; align-items: center; gap: 2px; align-self: center;
  background: transparent; border: 0; cursor: pointer; padding: 0 4px;
}
.cz-turnkey .score-pulse-arrow {
  width: 58px; height: 58px; object-fit: contain; animation: cz-sp-glow 2.4s ease-in-out infinite;
}
@keyframes cz-sp-glow {
  0%, 100% { filter: brightness(.9) drop-shadow(0 0 4px rgba(205, 255, 46, .25)); }
  50% { filter: brightness(1.15) drop-shadow(0 0 14px rgba(205, 255, 46, .7)); }
}
.cz-turnkey .score-pulse-cap {
  font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime);
}
.cz-turnkey .score-pulse.on .score-pulse-cap { color: var(--ok); }
.cz-turnkey .score-pulse:focus-visible { outline: 2px solid rgba(205, 255, 46, .5); outline-offset: 4px; border-radius: 10px; }
.cz-turnkey .score-pulse-note {
  margin-top: 8px; font: italic 500 12.5px var(--mono); color: var(--muted); letter-spacing: .01em;
}
@media (prefers-reduced-motion: reduce) { .cz-turnkey .score-pulse-arrow { animation: none; } }

/* Multi-Step Loader — a checklist for a long, multi-phase run (finished steps
   get lime checks, the active one pulses, percent in the header). Not scoped to
   a tab so it can serve the pipeline, one-shot and SEO alike; it always renders
   inside a .cz-turnkey subtree, so the design tokens cascade in. */
.cz-turnkey .cz-msl {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; max-width: 440px;
}
.cz-turnkey .cz-msl-h {
  font: 600 11.5px var(--mono); letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 13px; display: flex; justify-content: space-between;
}
.cz-turnkey .cz-msl-h b { color: var(--lime); }
.cz-turnkey .cz-msl-step {
  display: flex; align-items: center; gap: 11px; padding: 7px 0; color: var(--faint);
  font-size: 13.5px; transition: color .3s;
}
.cz-turnkey .cz-msl-dot {
  position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; flex: none; font: 700 10px var(--mono); color: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.cz-turnkey .cz-msl-step.done { color: var(--muted); }
.cz-turnkey .cz-msl-step.done .cz-msl-dot {
  background: rgba(205, 255, 46, .14); border-color: rgba(205, 255, 46, .5); color: var(--lime);
}
.cz-turnkey .cz-msl-step.active { color: var(--text); }
.cz-turnkey .cz-msl-step.active .cz-msl-dot { border-color: var(--lime); box-shadow: 0 0 10px rgba(205, 255, 46, .35); }
.cz-turnkey .cz-msl-step.active .cz-msl-dot::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  animation: cz-msl-pulse 1s ease-in-out infinite;
}
@keyframes cz-msl-pulse { 50% { opacity: .35; transform: scale(.7); } }
.cz-turnkey .cz-msl-note { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cz-turnkey .cz-msl-step.active .cz-msl-dot::after { animation: none; } }

/* Spotlight Cards — a lime spotlight follows the cursor over a dark card. Global
   (not tab-scoped) so it serves kw-cards, title cards and the MODES hub alike;
   driven by --mx/--my set on mousemove (see turnkey/spotlight.ts). The ::before
   sits under the content (direct children are lifted above it). */
.cz-spot { position: relative; }
.cz-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  opacity: 0; transition: opacity .25s; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(205, 255, 46, .13), transparent 62%);
}
.cz-spot:hover::before { opacity: 1; }
.cz-spot > * { position: relative; z-index: 1; }
.cz-turnkey .opt-saved {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11.5px var(--mono); letter-spacing: .04em; color: var(--lime);
}
/* On-screen edits not yet persisted — amber, so the badge never lies. */
.cz-turnkey .opt-saved.unsaved { color: var(--amber); }

/* Project-picker loading skeletons (three card-sized shimmers, coverflow row). */
.cz-turnkey .seo-skel-row { display: flex; gap: 14px; justify-content: center; padding: 20px 0 10px; }
.cz-turnkey .seo-skel-spj { width: 236px; height: 240px; flex: none; }
.cz-turnkey .opt-h {
  font: 700 13px var(--display); color: var(--text, #f5f5f6); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
}
.cz-turnkey .opt-diag { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cz-turnkey .opt-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cz-turnkey .opt-tag {
  background: var(--card); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px;
  font: 500 12px var(--font); color: var(--muted);
}
.cz-turnkey .sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cz-turnkey .sg-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.cz-turnkey .sg-card:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-2px); }
.cz-turnkey .sg-card.on { border-color: rgba(205, 255, 46, .55); }
/* Title cards are keyboard-pickable (role=radio, tabIndex=0) — show the ring. */
.cz-turnkey .sg-card:focus-visible { outline: 2px solid rgba(205, 255, 46, .45); outline-offset: 2px; }
.cz-turnkey .sg-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: #101013; }
.cz-turnkey .sg-ph { display: flex; align-items: center; justify-content: center; color: rgba(245, 245, 246, .35); }
.cz-turnkey .sg-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.cz-turnkey .sg-title { font: 600 14px var(--display); color: var(--text, #f5f5f6); line-height: 1.3; }
.cz-turnkey .sg-meta { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font); color: var(--muted); }
.cz-turnkey .sg-meta .kw-score { margin-left: auto; font-size: 14px; min-width: 34px; }
.cz-turnkey .pv-row {
  display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px; max-width: 640px;
}
.cz-turnkey .pv-thumb { width: 190px; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; flex: none; }
.cz-turnkey .pv-ph { display: flex; align-items: center; justify-content: center; color: rgba(245, 245, 246, .35); background: #101013; border: 1px solid var(--line); }
.cz-turnkey .pv-title { font: 600 15px var(--display); color: var(--text, #f5f5f6); line-height: 1.3; }
.cz-turnkey .pv-meta { font: 500 12px var(--font); color: var(--muted); margin-top: 6px; }

/* SEO header row — copy left, decorative globe right (globe = cobe canvas +
   darts overlay; hidden on small screens, init skipped there too) */
.cz-turnkey .seo-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cz-turnkey .seo-head-copy { flex: 1 1 auto; min-width: 0; }
.cz-turnkey .seo-globe { flex: none; width: 210px; height: 210px; position: relative; }
.cz-turnkey .seo-globe canvas { width: 100%; height: 100%; display: block; }
.cz-turnkey .seo-globe-darts { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 760px) { .cz-turnkey .seo-globe { display: none; } }

/* SEO pre-release project picker — 3D coverflow (approved v3 preview): the
   centered card is front-facing with the lime ring and full info; side cards
   fan out with tilt, depth and dimming. No scrollbars anywhere. */
.cz-turnkey .spjc {
  position: relative; height: 330px; margin: 6px 0 2px; perspective: 1200px; overflow: hidden;
  overscroll-behavior-x: contain; touch-action: pan-y; outline: none;
}
/* Keyboard focus must be VISIBLE (outline:none above kills only the mouse-click
   ring): a lime ring when the picker is focused via keyboard, so arrow keys
   don't look dead. */
.cz-turnkey .spjc:focus-visible {
  outline: 2px solid rgba(205, 255, 46, .55); outline-offset: 4px; border-radius: 14px;
}
.cz-turnkey .spjc-card {
  position: absolute; left: 50%; top: 14px; width: 252px; margin-left: -126px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s, border-color .25s, box-shadow .25s, filter .5s;
  will-change: transform, opacity; text-align: left;
}
.cz-turnkey .spjc-card.center {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgba(205, 255, 46, .5), 0 18px 44px rgba(0, 0, 0, .5);
}
.cz-turnkey .spjc-card.center.notready { border-color: var(--line); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.cz-turnkey .spjc-card:not(.center) .spj-body { opacity: .55; }
.cz-turnkey .spjc-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(22, 22, 27, .72); color: var(--text, #f5f5f6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
}
.cz-turnkey .spjc-nav:hover { border-color: rgba(205, 255, 46, .5); background: rgba(34, 34, 42, .8); }
.cz-turnkey .spjc-nav.prev { left: 4px; }
.cz-turnkey .spjc-nav.next { right: 4px; transform: translateY(-50%) scaleX(-1); }
.cz-turnkey .spjc-dots { display: flex; gap: 6px; justify-content: center; margin-top: 2px; }
.cz-turnkey .spjc-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(245, 245, 246, .18);
  border: 0; padding: 0; cursor: pointer; transition: background .2s, transform .2s;
}
.cz-turnkey .spjc-dot.on { background: var(--lime); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .cz-turnkey .spjc-card { transition: none; } }
.cz-turnkey .spj-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #101013; }
.cz-turnkey .spj-ph {
  display: flex; align-items: center; justify-content: center; color: rgba(245, 245, 246, .35);
  background-image:
    linear-gradient(rgba(245, 245, 246, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 246, .05) 1px, transparent 1px);
  background-size: 18px 18px;
}
/* Cover-less project card: a deterministic tint (hue from the title, via the
   --ph-h custom property) over the grid, with the project's big first initial —
   richer than a bare grid + film glyph. */
.cz-turnkey .spj-ph.has-initial {
  background-image:
    radial-gradient(135% 135% at 26% 16%, hsl(var(--ph-h, 86) 60% 46% / .42), transparent 62%),
    linear-gradient(rgba(245, 245, 246, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 246, .05) 1px, transparent 1px);
  background-size: cover, 18px 18px, 18px 18px;
}
.cz-turnkey .thumb-initial {
  font: 800 34px var(--display); color: rgba(245, 245, 246, .95); line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.cz-turnkey .spj-badge {
  position: absolute; top: 8px; left: 8px; font: 600 9.5px var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text, #f5f5f6); background: rgba(10, 10, 11, .72);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 8px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cz-turnkey .spj-body { display: flex; flex-direction: column; gap: 5px; padding: 2px 12px 0; }
.cz-turnkey .spj-step { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.cz-turnkey .spj-title {
  font: 600 14px var(--display); color: var(--text, #f5f5f6); line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cz-turnkey .spj-when { font: 400 11.5px var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SEO Video review tab (donor style.css:562-573) */
.cz-turnkey .rv-grid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.cz-turnkey .rv-player {
  position: relative; aspect-ratio: 9/16; background: #000; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.cz-turnkey .rv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cz-turnkey .rv-player-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center;
}
.cz-turnkey .seo-toast {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.06em;
  color: #f5f5f6; background: rgba(22, 22, 27, 0.72);
  backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(205, 255, 46, 0.35); border-radius: 100px; padding: 10px 18px;
}
.cz-turnkey .rv-list { display: flex; flex-direction: column; gap: 10px; }
.cz-turnkey .rv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; }
.cz-turnkey .rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.cz-turnkey .rv-cat { font: 700 13px var(--display); color: var(--text, #f5f5f6); }
.cz-turnkey .rv-ts {
  margin-left: auto; font: 600 11px var(--mono); color: var(--muted);
  background: rgba(255, 255, 255, .06); border-radius: 100px; padding: 3px 9px;
}
.cz-turnkey .rv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cz-turnkey .rv-dot.good { background: var(--ok); }
.cz-turnkey .rv-dot.warn { background: var(--amber); }
.cz-turnkey .rv-dot.bad { background: var(--pink); }
.cz-turnkey .rv-find { font: 400 13px var(--font); color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) {
  .cz-turnkey .rv-grid { grid-template-columns: 1fr; }
  .cz-turnkey .rv-player { max-width: 280px; }
  /* Mirror the real player's mobile cap so the busy skeleton doesn't reflow
     (full-width -> 280px) when the review arrives. */
  .cz-turnkey .seo-skel-rvp { max-width: 280px; }
}

/* SEO busy scaffolds (Slice 2) — the result package "pours in" while the AI
   works, instead of leaving the area blank under a busy button. The shimmer
   reuses the cz-genwave keyframe (same motif as .cz-ghost-shimmer); each
   skeleton's geometry mirrors its tab's real grid so it lands exactly where
   the results will. Purely cosmetic; rendered only while a busy flag is set. */
.cz-turnkey .seo-busy { margin-top: 18px; }
.cz-turnkey .seo-skel {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.cz-turnkey .seo-skel::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: 60% 100%;
  background-image: linear-gradient(90deg, transparent, rgba(205, 255, 46, .12), transparent);
  animation: cz-genwave 1.6s linear infinite;
}
.cz-turnkey .seo-skel-kw { min-height: 118px; display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.cz-turnkey .seo-skel-score { min-width: 84px; height: 72px; flex: none; }
.cz-turnkey .seo-skel-sg { min-height: 200px; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.cz-turnkey .seo-skel-rvp { aspect-ratio: 9 / 16; }
.cz-turnkey .seo-skel-rv { min-height: 74px; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
/* ghost content shapes inside a skeleton — the parent's shimmer sweeps over them,
   so the placeholder reads as "a card loading" instead of an empty box. */
.cz-turnkey .seo-skel .sk-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .06); flex: none; }
.cz-turnkey .seo-skel .sk-row { display: flex; align-items: center; gap: 8px; }
.cz-turnkey .seo-skel .sk-actions { margin-top: auto; }
.cz-turnkey .seo-skel .sk-chip { width: 34px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .06); flex: none; }
.cz-turnkey .seo-skel .sk-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .08); flex: none; }
.cz-turnkey .seo-skel .sk-ts { width: 46px; margin-left: auto; }
.cz-turnkey .seo-skel .sk-btn { height: 26px; width: 128px; border-radius: 8px; }
.cz-turnkey .seo-skel .sk-btn-sm { height: 26px; width: 62px; border-radius: 8px; }
.cz-turnkey .seo-skel .sk-thumb { width: 100%; height: 92px; border-radius: 10px; background: rgba(255, 255, 255, .05); flex: none; }
.cz-turnkey .seo-skel .sk-sg-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .cz-turnkey .seo-skel::after { animation: none; opacity: .5; }
}

/* Anime Studio — development board view (vertical 2:3 sheet) */
.cz-turnkey .cz-anime-board { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cz-turnkey .cz-anime-board-img {
  max-width: 100%; max-height: 74vh; width: auto; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .2);
}
.cz-turnkey .cz-anime-gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center;
}
.cz-turnkey .cz-anime-ok {
  display: inline-flex; align-items: center; gap: 6px; color: #cdff2e;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .04em;
}
/* Anime Studio — inline confirm under the board (video render); the burst blooms over the board */
.cz-turnkey .cz-anime-confirm {
  margin: 12px auto 0; width: min(440px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
  background: #161619; padding: 16px;
}

/* Anime Studio — library grid */
.cz-turnkey .cz-anime-lib {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.cz-turnkey .cz-anime-lib-item {
  position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); aspect-ratio: 16 / 10;
}
/* The whole card opens its project, so it needs a real keyboard focus ring. */
.cz-turnkey .cz-anime-lib-item:focus-visible {
  outline: 2px solid rgba(205, 255, 46, .7); outline-offset: 2px;
}
/* Reel footer — the hint on the left, "All projects" pushed to the right. */
.cz-turnkey .cz-anime-reel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 4px;
}
.cz-turnkey .cz-anime-lib-item video,
.cz-turnkey .cz-anime-lib-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-turnkey .cz-anime-lib-empty {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #6a6a72;
}
.cz-turnkey .cz-anime-lib-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11px; color: #f5f5f6;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.cz-turnkey .cz-anime-lib-del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #f5f5f6;
  background: rgba(22, 22, 27, .7); border: 1px solid rgba(255, 255, 255, .14); opacity: 0; transition: opacity .15s;
}
.cz-turnkey .cz-anime-lib-item:hover .cz-anime-lib-del { opacity: 1; }

/* ===== Preset picker (look chooser between the New video modal and the steps).
   Reuses the shipped Spotlight (.cz-spot) — no new animation defined here. ===== */
.preset-screen { max-width: 1040px; }
.cz-preset-h {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 26px; color: #f5f5f6; margin: 6px 0 4px;
}
.cz-preset-sub { margin: 0 0 20px; max-width: 640px; }
.cz-preset-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cz-preset-card {
  display: flex; flex-direction: column; text-align: left; gap: 10px;
  padding: 14px; border-radius: 14px;
  background: #161619; border: 1px solid #2a2a31;
  color: #f5f5f6; cursor: pointer;
  transition: border-color .16s, transform .16s;
}
button.cz-preset-card:hover { border-color: #3a3a44; transform: translateY(-2px); }
.cz-preset-art {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
}
.cz-preset-art.has-initial {
  background: linear-gradient(135deg, hsl(var(--ph-h) 62% 24%), hsl(calc(var(--ph-h) + 42) 55% 14%));
}
/* Cover art fills the 16/10 tile; the stills are 16/9, so a hair is cropped top
   and bottom rather than letterboxed. The slow push on hover makes the grid feel
   alive without moving the layout. */
.cz-preset-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.cz-preset-card:hover .cz-preset-img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .cz-preset-img { transition: none; }
  .cz-preset-card:hover .cz-preset-img { transform: none; }
}
.cz-preset-initial {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 52px; font-weight: 700; color: rgba(255, 255, 255, .82);
}
.cz-preset-title { font-size: 15px; font-weight: 600; color: #f5f5f6; }
.cz-preset-tag { font-size: 12.5px; line-height: 1.4; color: #9a9aa2; }
.cz-preset-custom { cursor: default; }
.cz-preset-ta { margin-top: 4px; resize: vertical; min-height: 60px; }
.cz-preset-use { margin-top: 8px; align-self: flex-start; }

/* Locked-preset pill (step header) + the read-only style chip that replaces the
   free style field in step 1 once a preset is chosen. */
.cz-preset-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px;
  color: #cdff2e; background: rgba(205, 255, 46, .08);
  border: 1px solid rgba(205, 255, 46, .4);
}
.cz-preset-pill svg { stroke: #cdff2e; }
.cz-locked-chip {
  display: flex; align-items: center; gap: 8px;
  color: #c9c9d0; background: rgba(255, 255, 255, .03);
  cursor: default;
}
.cz-locked-chip .cz-lock-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: #cdff2e;
}

/* ===== Result preview (step 13): prompt <-> your frame cards, optional AI flag. ===== */
.cz-rp-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.cz-rp-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border-radius: 12px;
  background: #161619; border: 1px solid #2a2a31;
}
.cz-rp-card.cz-rp-bad { border-color: rgba(232, 179, 76, .6); }
.cz-rp-img {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 8px; overflow: hidden; background: #0e0e11;
}
.cz-rp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-rp-img .cz-history-empty {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #5a5a62;
}
.cz-rp-n {
  position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  color: #f5f5f6; background: rgba(0, 0, 0, .55);
}
.cz-rp-prompt {
  font-size: 11.5px; line-height: 1.4; color: #9a9aa2;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cz-rp-flag {
  display: inline-flex; align-items: flex-start; gap: 5px;
  font-size: 11px; line-height: 1.35; color: #e8b34c;
}
.cz-rp-flag svg { flex: none; stroke: #e8b34c; margin-top: 1px; }

/* ===== Cast row (preset screen): optional character-for-consistency picker. ===== */
.cz-cast {
  margin: 0 0 22px; padding: 14px; border-radius: 14px;
  background: #131316; border: 1px solid #24242a;
}
.cz-cast-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cz-cast-title { font-size: 13.5px; color: #d5d5db; }
.cz-cast-actions { display: inline-flex; gap: 14px; }
.cz-cast-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #cdff2e; background: transparent; border: none; cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.cz-cast-link svg { stroke: #cdff2e; }
.cz-cast-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cz-cast-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px; padding: 8px; border-radius: 12px;
  background: #161619; border: 1px solid #2a2a31; color: #c9c9d0; cursor: pointer;
  transition: border-color .15s;
}
.cz-cast-chip.chosen { border-color: #cdff2e; }
.cz-cast-thumb,
.cz-cast-none {
  width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: #0e0e11; color: #6a6a72; font-weight: 700; font-size: 22px;
}
.cz-cast-name {
  font-size: 11px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Popstar Studio: the lyrics-ownership consent ----------
   A lime notice that is itself the checkbox. The mark DRAWS ITSELF on and
   undraws on release (stroke-dashoffset over the ring, then the tick), so a
   deliberate act reads as a deliberate act. Appended as its own block: this
   file is shared by four windows, so nothing above is touched. */
.cz-vocal-row { display: flex; flex-wrap: wrap; gap: 8px; }

.cz-consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid rgba(205, 255, 46, .28); border-radius: 12px;
  background: rgba(205, 255, 46, .05);
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.cz-consent:hover { border-color: rgba(205, 255, 46, .5); background: rgba(205, 255, 46, .08); }
.cz-consent:focus-visible { outline: 2px solid #cdff2e; outline-offset: 2px; }
.cz-consent.on { border-color: rgba(205, 255, 46, .7); background: rgba(205, 255, 46, .1); }

.cz-consent-mark { flex: 0 0 auto; width: 30px; height: 30px; }
.cz-consent-mark svg { width: 100%; height: 100%; overflow: visible; }
.cz-consent-ring,
.cz-consent-tick {
  fill: none; stroke: #cdff2e; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Ring: 2*pi*19 ~= 119.4 — one dash the length of the whole circle, so the
   offset alone controls how much of it is drawn. */
.cz-consent-ring { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset .3s ease; }
/* Tick path length ~= 26; a little headroom keeps the end from clipping. */
.cz-consent-tick { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .25s ease .18s; }
.cz-consent.on .cz-consent-ring,
.cz-consent.on .cz-consent-tick { stroke-dashoffset: 0; }
/* Undrawing runs in reverse order — the tick leaves before its ring. */
.cz-consent .cz-consent-ring { transition-delay: .12s; }
.cz-consent.on .cz-consent-ring { transition-delay: 0s; }
.cz-consent.on .cz-consent-tick { transition-delay: .22s; }

.cz-consent-text { font-size: 12.5px; line-height: 1.5; color: #a8a8b0; }
.cz-consent-text b { color: #cdff2e; font-weight: 700; }
.cz-consent.on .cz-consent-text { color: #d8d8de; }

@media (prefers-reduced-motion: reduce) {
  .cz-consent-ring, .cz-consent-tick { transition: none; }
}

/* ---------- Popstar Studio: the optional reference-audio row ----------
   Sits under the Animate settings; one row that changes what it holds as the
   track moves from "pick" to "trim" to "attached". Appended as its own block —
   this file is shared by four windows, so nothing above is touched. */
.cz-audio-attach {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #131317;
}
.cz-audio-attach .hint { margin: 0; flex: 1 1 220px; min-width: 0; }
.cz-audio-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: #cdff2e;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The file input itself is never shown — the label IS the button, so the
   control matches every other button in the studio instead of rendering the
   browser's own grey "Choose file" widget. */
.cz-audio-pick { position: relative; overflow: hidden; cursor: pointer; }
.cz-audio-pick input[type="file"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}

/* ── Live hero tile ─────────────────────────────────────────────────────────
   When a ChoiceCard is given `media`, its `.cz-badge` becomes `.cz-badge-live`
   and holds the mode's hero clip instead of a glyph — looping, muted, and
   monochrome under the SAME lime veil the icons wear (dark at the edges, a
   touch brighter at the centre). Appended as its own block; nothing above is
   touched — this file is shared across windows.
   The veil uses a gradient overlay, not `opacity` on the video, because the
   card's `.cz-reveal` entrance animation ends on `opacity:1 forwards` and a
   cascade animation beats a plain declaration (learned on the pipeline gate). */
.cz-badge-live {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.cz-badge-live img,
.cz-badge-live video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8) blur(1.2px);
  transform: scale(1.12);
}
.cz-badge-live img {
  z-index: 0;
}
.cz-badge-live video {
  z-index: 1;
}
.cz-badge-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 38%, rgba(205, 255, 46, 0.22), rgba(0, 0, 0, 0.72));
}
/* Respect a reduced-motion preference: drop the clip, keep the still poster
   under the identical veil so the tile still reads. */
@media (prefers-reduced-motion: reduce) {
  .cz-badge-live video {
    display: none;
  }
}