/* G2 visual identity for the /create product app (2026-09-29). CSS-only, additive, loaded after
   styles.css and motion-overrides.css on create.html — no app.js logic touched, no markup changed.
   Reversible: delete the <link> in create.html to fall back to the previous look instantly.

   Approach: (1) repoint the shared CSS custom properties both stylesheets already use everywhere for
   color (styles.css's :root and motion-overrides.css's :root) to the G2 black/cyan/pink palette — this
   alone recolors most icons, focus rings, links and borders; (2) explicit overrides for every component
   that hardcodes a hex color instead of a var (the glossy "3D" yellow buttons/cards/badges, card/input
   backgrounds, the mascot bubble, dialogs, the timing editor (.tm-*), the font picker (.fp-*), the export
   panel), replacing yellow-glass gradients with a cyan-glass equivalent (same bevel/shadow structure, new
   color) and reserving pink for a few clearly-secondary accents (avatar, badges, mascot). Google's own
   "Sign in with Google" button (.google-signin/.auth-option rows that carry the Google logo) is left
   white/light on purpose — that button's look is a Google brand requirement, not part of our design
   system. */

:root{
  --blue:#3ef4ff; --blue2:#17c9db; --blue-soft:rgba(62,244,255,.14); --blue3:#0a2028;
  --yellow:#3ef4ff; --yellow-soft:rgba(62,244,255,.16);
  --line:rgba(62,244,255,.22); --success:#39e6a0;
  --spark:#ff3ecf; --spark-ink:#2a0420;
  --g2-bg:#050608; --g2-card:#0b0f14; --g2-card-2:#0d1420; --g2-line:rgba(62,244,255,.24);
  /* ink-dim (owner 2026-09-29 site-wide sweep): was a distinct blue-gray hex (#8ea3a8) used for every
     "secondary"/small/note text across the wizard - banned by the 3-color text rule (white/cyan/pink
     only; hierarchy via size/weight, not a 4th color). Redefined to white-with-opacity: still "white" by
     hue, just dimmer, and every selector below that already reads var(--g2-ink-dim) is fixed by this one
     line instead of a per-selector edit. */
  --g2-line-soft:rgba(62,244,255,.14); --g2-ink:#eef9fb; --g2-ink-dim:rgba(255,255,255,.72);
  --g2-glow:0 0 0 1px rgba(62,244,255,.12),0 10px 28px rgba(0,0,0,.55);
}
:root{
  --bg-0:#050608; --bg-1:#0a0e14; --surface-1:var(--g2-card); --surface-2:var(--g2-card-2);
  --line-soft:rgba(62,244,255,.16); --line-strong:rgba(62,244,255,.34);
  --text-hi:#f3fbfd; --text-md:rgba(255,255,255,.85); --text-lo:rgba(255,255,255,.72);
  --accent:#3ef4ff; --accent-ink:#031014; --focus:#3ef4ff;
}
html[lang="he"]{ --font-ui:Fredoka,Rubik,system-ui,sans-serif; --font-display:Fredoka,Rubik,sans-serif; --font:Fredoka,Rubik,Arial,sans-serif; }
:root{ --font-ui:'Space Grotesk',Rubik,system-ui,sans-serif; --font-display:'Unbounded',Rubik,sans-serif; }

/* ===== base canvas ===== */
body.viewport-wizard{background:radial-gradient(ellipse at 85% 8%,rgba(62,244,255,.10) 0,transparent 45%),radial-gradient(ellipse at 8% 92%,rgba(255,62,207,.08) 0,transparent 48%),var(--g2-bg)!important}
.ambient{background:radial-gradient(circle at 15% 8%,rgba(62,244,255,.16) 0,transparent 34%),radial-gradient(circle at 86% 22%,rgba(255,62,207,.14) 0,transparent 29%),radial-gradient(circle at 48% 92%,rgba(62,244,255,.10) 0,transparent 42%),var(--g2-bg)!important}
.ambient span{background:rgba(62,244,255,.35)!important}
.ambient span:nth-child(2){background:rgba(255,62,207,.22)!important}
.ambient span:nth-child(3){background:rgba(62,244,255,.20)!important}

/* ===== header (matches the homepage header) ===== */
.viewport-wizard .topbar,.topbar{background:rgba(5,6,8,.86)!important;border-bottom:1px solid var(--g2-line)!important;box-shadow:none!important;backdrop-filter:blur(14px)}
.viewport-wizard .brand,.brand{background:transparent!important;filter:drop-shadow(0 0 6px rgba(62,244,255,.5)) drop-shadow(0 0 6px rgba(255,62,207,.35))!important}
.save-state{color:var(--g2-ink-dim)!important}
.text-button{color:var(--g2-ink)!important}
.text-button:hover{background:rgba(62,244,255,.1)!important;color:var(--blue)!important}
/* language switcher = System B segmented control (toggle-b): flat gradient fill on the active
   segment, no border trick. */
.language-switcher{border-color:transparent!important;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.1)!important}
.language-switcher button{color:var(--g2-ink-dim)!important;background:transparent!important;border:0!important;border-radius:9px!important;transition:background .18s ease,color .18s ease!important}
.viewport-wizard .language-switcher button.active,
.language-switcher button.active{background:linear-gradient(120deg,rgba(62,244,255,.18),rgba(255,62,207,.18))!important;color:var(--g2-ink)!important;box-shadow:none!important;border:0!important}
/* header icon buttons = System B icon-b: permanent cyan→pink gradient ring, pink glow on hover/active */
.g-btn,.hdr-btn,.user-chip{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border:1.5px solid transparent!important;color:var(--g2-ink)!important;box-shadow:none!important;
  transition:box-shadow .18s ease,transform .12s ease!important;
}
.g-btn:hover,.hdr-btn:hover,.user-chip:hover{box-shadow:0 0 18px rgba(255,62,207,.35)!important}
.g-btn:active,.hdr-btn:active,.user-chip:active{transform:scale(.96)!important}
.hdr-btn[aria-expanded="true"]{color:var(--g2-ink)!important;box-shadow:0 0 18px rgba(255,62,207,.35)!important}
.user-avatar{background:linear-gradient(165deg,var(--spark),#c400a0)!important;color:#fff!important;box-shadow:none!important}
.user-menu{background:linear-gradient(150deg,var(--g2-card),var(--g2-card-2))!important;border-color:var(--g2-line)!important;box-shadow:0 18px 44px rgba(0,0,0,.6)!important}
.user-menu-item{color:var(--g2-ink)!important}
.user-menu-item:hover{background:rgba(62,244,255,.12)!important}
.avatar{background:var(--spark)!important;color:#fff!important}

/* ===== workspace / cards ===== */
.viewport-wizard .workspace,.workspace{background:var(--g2-bg)!important;border:1px solid var(--g2-line)!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important}
.intro .eyebrow,.intro .eyebrow span{color:var(--blue)!important}
.intro h1{color:var(--g2-ink)!important;text-shadow:0 0 24px rgba(62,244,255,.25)!important}
.intro p{color:var(--g2-ink-dim)!important}
.intro-note{border-color:var(--g2-line)!important;background:rgba(62,244,255,.08)!important;color:var(--g2-ink)!important}
.intro-note i{color:var(--blue)!important}
.wizard-heading h1{color:var(--g2-ink)!important;text-shadow:none!important}
.wizard-spark{color:var(--spark)!important}
.flow-progress{border-color:var(--g2-line)!important;background:rgba(5,6,8,.7)!important}
.progress-copy b{color:var(--g2-ink)!important}
.progress-copy small{color:var(--g2-ink-dim)!important}
.viewport-wizard .progress-track,.progress-track{background:#03080d!important;border-color:var(--g2-line-soft)!important;box-shadow:none!important}
.viewport-wizard .progress-track i,.progress-track i{background:linear-gradient(90deg,var(--blue),var(--blue2))!important;box-shadow:0 0 14px rgba(62,244,255,.55)!important}

/* card family: recipe / source-card / visual-choice / dropzone / tm-card / optional-upload / extra-styles / visual-route / cover-prompt / export-progress / export-result */
/* selectable cards = System B card-b: soft diagonal white-gradient border idle, cyan→pink
   gradient ring + soft pink glow when selected/active. */
.wizard .visual-choice,.wizard .source-card,.wizard .dropzone,.wizard .recipe,
.tm-card,.optional-upload,.extra-styles,.visual-route,.cover-prompt,
.export-progress,.export-result,.intent-panel>button,.intent-choices>button,
.auto-panel,.advanced,.moment-list,.style-tuning{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:none!important;color:var(--g2-ink)!important;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.wizard .recipe.active,.wizard .recipe.selected,.wizard .source-card.selected,
.wizard .visual-choice.selected,.wizard .visual-choice[aria-pressed="true"],
.tm-card[aria-checked="true"],.visual-choice.selected,.intent-choices>button.active,
.intent-choices>button[aria-pressed="true"]{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;box-shadow:0 0 20px rgba(255,62,207,.2)!important;
}
.wizard .recipe.selected::after{background:var(--blue)!important;color:var(--accent-ink)!important}
@media(hover:hover){
  .wizard .recipe:hover,.wizard .source-card:hover,.wizard .visual-choice:hover,.tm-card:hover{
    background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
               linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
    border-color:transparent!important;transform:translateY(-3px);
  }
}
.wizard .recipe b,.wizard .source-card b,.wizard .visual-choice b,.wizard .dropzone b,
.tm-card b,.dropzone b,.source-card b,.auto-panel b,.recipe b,.style-tuning b,
.style-tuning label,.advanced summary,.intent-panel h3,.intent-panel button b,
.extra-styles summary b,.optional-upload summary span,.visual-route-heading>b,
.visual-choice b,.cover-result b,.export-result b,.export-progress-head{color:var(--g2-ink)!important}
.wizard .recipe p,.wizard .source-card small,.wizard .visual-choice small,.wizard .dropzone small,
.tm-card small,.dropzone small,.source-card small,.auto-panel p,.recipe p,.style-tuning small,
.intent-panel button small,.extra-styles summary small,.optional-upload summary small,
.visual-route-heading>small,.visual-choice small,.cover-result small,.gal-head,.gal-head b{color:var(--g2-ink-dim)!important}
.dropzone em,.field-head label,.source-card>i{color:var(--blue)!important}
.source-card>span,.recipe small,.intent-panel>button>i,.intent-choices>button>i,
.visual-choice>i,.drop-icon,.moment>div button{background:rgba(62,244,255,.14)!important;color:var(--blue)!important;border-color:var(--g2-line-soft)!important}
.recipe-image>span{background:rgba(5,6,8,.8)!important;color:var(--g2-ink)!important}
.recipe-image>i{background:var(--spark)!important;color:#fff!important}
.wizard .dropzone em{background:var(--blue)!important;color:var(--accent-ink)!important;border-color:var(--blue)!important;box-shadow:none!important}
.no-text-note{border-color:rgba(255,62,207,.4)!important;background:rgba(255,62,207,.08)!important}
.no-text-note>i{background:var(--spark)!important;color:#fff!important}
.no-text-note b{color:#ffd6f6!important}
.no-text-note small{color:var(--g2-ink-dim)!important}
.face-consent{border-color:rgba(62,244,255,.4)!important;background:rgba(62,244,255,.08)!important;color:var(--g2-ink)!important}
.face-consent input{accent-color:var(--blue)!important}

/* summaries / disclosure rows */
.song-credits,.credit-fields{background:rgba(62,244,255,.04)!important;border-color:var(--g2-line-soft)!important}
.song-credits summary,.extra-styles summary,.optional-upload summary,.preview-options summary{color:var(--g2-ink)!important}
.song-credits summary small,.extra-styles summary small,.optional-upload summary small{color:var(--g2-ink-dim)!important}
.song-credits summary i,.extra-styles summary>i,.optional-upload summary i,.preview-options summary>i{color:var(--blue)!important}

/* ===== inputs ===== */
.wizard .meta-row input,.wizard .credit-fields input,.wizard textarea,
.meta-row input,.advanced select,.auto-panel select,textarea,
.stage[data-stage="1"] .meta-row input,.credit-row input,.cover-prompt textarea,
.wizard #coverPrompt,.newsletter-fields input,.titles-row select{
  background:var(--g2-card-2)!important;color:var(--g2-ink)!important;
  border:1px solid var(--g2-line-soft)!important;box-shadow:none!important;
}
.wizard .meta-row input::placeholder,.wizard textarea::placeholder,
.meta-row input::placeholder,textarea::placeholder,.newsletter-fields input::placeholder{color:var(--g2-ink-dim)!important;opacity:1}
.wizard input:focus,.wizard textarea:focus,.meta-row input:focus,.advanced select:focus,
.auto-panel select:focus,textarea:focus,.credit-row input:focus,.cover-prompt textarea:focus,.newsletter-fields input:focus{
  border-color:var(--blue)!important;outline:2px solid rgba(62,244,255,.3)!important;outline-offset:2px;box-shadow:0 0 0 4px rgba(62,244,255,.14)!important;
}
/* lang-chip = System B card-b (selectable chip) */
.lang-chip{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box!important;
  border:1px solid transparent!important;color:var(--g2-ink)!important;
}
.lang-chip[aria-pressed="true"]{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;color:var(--g2-ink)!important;box-shadow:0 0 12px rgba(255,62,207,.2)!important;
}
.listening-orb{background:var(--blue)!important}
.listening-orb span{background:var(--spark)!important;box-shadow:0 0 0 7px rgba(255,62,207,.2)!important}

/* ===== Owner-approved button system (2026-09-29): System D + System B =====
   D ("Liquid Shimmer Pill") — primary CTAs only: solid cyan pill, moving light sweep, dark ink
   text, nudging arrow. B ("Gradient-border Glass") — everything else: secondary/back buttons,
   toggles/segmented controls, selectable cards, icon buttons: dark glass fill, cyan→pink
   gradient border/ring for selected/active/hover, neutral rgba(255,255,255,.14) border idle.
   Exact values copied from labs/redesign/buttons/index.html (.btn-d / .btn-b-sec / .icon-b /
   .toggle-b / .card-b). Respects prefers-reduced-motion. RTL arrows nudge left, not right. */
:root{ --g2-radius:12px; }

/* ---------- System D: primary CTAs (.primary-action, #wizardNext, export/render, buy) ---------- */
.wizard .primary-action,.wizard .cover-generate,.wizard .cover-use,
.primary-action,.newsletter-fields button,.pp-primary,.cover-generate,.cover-use{
  position:relative;overflow:hidden;
  background:var(--blue)!important;
  color:#031014!important;border:none!important;
  border-radius:999px!important;
  box-shadow:0 6px 20px rgba(62,244,255,.3)!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.wizard .primary-action::before,.wizard .cover-generate::before,.wizard .cover-use::before,
.primary-action::before,.newsletter-fields button::before,.pp-primary::before,
.cover-generate::before,.cover-use::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:g2Sweep 2.8s ease-in-out infinite;
}
@keyframes g2Sweep{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  .wizard .primary-action::before,.wizard .cover-generate::before,.wizard .cover-use::before,
  .primary-action::before,.newsletter-fields button::before,.pp-primary::before,
  .cover-generate::before,.cover-use::before{animation:none!important;display:none!important}
}
.wizard .primary-action:hover,.wizard .cover-generate:hover,.wizard .cover-use:hover,
.primary-action:hover,.newsletter-fields button:hover,.pp-primary:hover,
.cover-generate:hover,.cover-use:hover{
  background:var(--blue)!important;box-shadow:0 8px 28px rgba(62,244,255,.5)!important;
}
.wizard .primary-action:active,.wizard .cover-generate:active,.wizard .cover-use:active,
.primary-action:active,.pp-primary:active,.cover-generate:active,.cover-use:active,
.newsletter-fields button:active{
  transform:scale(.96)!important;box-shadow:0 3px 12px rgba(62,244,255,.4)!important;
}
.wizard .primary-action:disabled,.primary-action:disabled,.pp-primary:disabled,
.cover-generate:disabled,.cover-use:disabled{
  background:#3a4548!important;color:#6b7a7e!important;box-shadow:none!important;cursor:not-allowed;
}
.wizard .primary-action:disabled::before,.primary-action:disabled::before,.pp-primary:disabled::before,
.cover-generate:disabled::before,.cover-use:disabled::before{display:none!important}
.primary-action:after,.newsletter-fields button:after{display:none!important} /* remove the old torn-paper corner flourish */
.primary-action i,.cover-generate i,.hint i{color:#031014!important}
.primary-action .arrow,.cover-generate .arrow,.cover-use .arrow{display:inline-block;transition:transform .18s ease}
.primary-action:hover .arrow,.cover-generate:hover .arrow,.cover-use:hover .arrow{transform:translateX(5px)}
[dir="rtl"] .primary-action:hover .arrow,[dir="rtl"] .cover-generate:hover .arrow,[dir="rtl"] .cover-use:hover .arrow{transform:translateX(-5px)}

/* ---------- System B: back / secondary text buttons (btn-b-sec — plain border, no gradient trick) ---------- */
.back,.wizard-link,.wizard .back,.wizard .wizard-link,
.pp-new,.credit-add,.cover-retry,
.tm-root :is(.cover-retry,.tm-step,.tm-scope,.tm-rowplay,.tm-play){
  background:rgba(255,255,255,.02)!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:var(--g2-radius)!important;box-shadow:none!important;color:var(--g2-ink-dim)!important;
  transition:transform .12s ease,border-color .15s ease,color .15s ease,background .15s ease!important;
}
.back,.wizard-link,.wizard .back,.wizard .wizard-link{background:transparent!important;border:0!important}
.back:hover,.wizard-link:hover{color:var(--blue)!important}
.pp-new:hover,.credit-add:hover,.cover-retry:hover,
.tm-root :is(.cover-retry,.tm-step,.tm-scope,.tm-rowplay,.tm-play):hover{
  border-color:rgba(139,246,255,.5)!important;color:var(--g2-ink)!important;
}
.back:active,.wizard-link:active,.pp-new:active,.credit-add:active,.cover-retry:active,
.tm-root :is(.cover-retry,.tm-step,.tm-scope,.tm-rowplay,.tm-play):active{transform:scale(.96)!important}

/* ---------- System B: icon buttons (icon-b — permanent gradient ring, pink glow on hover) ---------- */
.fp-close,.pp-collapse,.credit-remove,.sg-page-step,.gal-del{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border:1.5px solid transparent!important;border-radius:var(--g2-radius)!important;
  color:var(--g2-ink-dim)!important;box-shadow:none!important;
  transition:box-shadow .18s ease,transform .12s ease,color .15s ease!important;
}
.fp-close:hover,.pp-collapse:hover,.credit-remove:hover,.sg-page-step:hover,.gal-del:hover{
  box-shadow:0 0 14px rgba(255,62,207,.3)!important;color:var(--g2-ink)!important;
}
.fp-close:active,.pp-collapse:active,.credit-remove:active,.sg-page-step:active,.gal-del:active{transform:scale(.96)!important}

/* ---------- System B: segmented control (.tm-segbtn — toggle-b, flat gradient fill on active) ---------- */
.tm-root .tm-segbtn{
  background:transparent!important;border:0!important;color:var(--g2-ink-dim)!important;
  border-radius:9px!important;box-shadow:none!important;transition:background .18s ease,color .18s ease,transform .12s ease!important;
}
.tm-root .tm-segbtn.active,.tm-root .tm-segbtn[aria-pressed="true"]{
  background:linear-gradient(120deg,rgba(62,244,255,.18),rgba(255,62,207,.18))!important;color:var(--g2-ink)!important;
}
.tm-root .tm-segbtn:active{transform:scale(.96)!important}

.pp-row{background:rgba(255,255,255,.03)!important;border-radius:var(--g2-radius)!important}
.pp-row:hover{background:rgba(62,244,255,.08)!important}
.pp-row.current{background:rgba(62,244,255,.14)!important;border-color:var(--blue)!important}
.pp-open b{color:var(--g2-ink)!important}
.pp-open small,.pp-count,.pp-note,.pp-empty{color:var(--g2-ink-dim)!important}
.pp-title{color:var(--g2-ink)!important}
.pp-del:hover{color:#ff3ecf!important;background:rgba(255,62,207,.12)!important}
.projects-panel{background:linear-gradient(150deg,var(--g2-card),var(--g2-card-2))!important;border-color:var(--g2-line)!important;box-shadow:0 18px 44px rgba(0,0,0,.6)!important}

.export-bar-track{background:#03080d!important}
.export-bar-track i{background:linear-gradient(90deg,var(--blue),var(--spark))!important}
.export-progress,.export-result{background:var(--g2-card)!important;border-color:var(--g2-line-soft)!important}
.export-note,.film-why,.intent-note,.wizard-sub,.share-status,.share-reels-hint,.share-upload-head{color:var(--g2-ink-dim)!important}
/* film/moment play controls = System B icon-b */
.film-controls>button,.moment-play{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border:1.5px solid transparent!important;color:var(--g2-ink)!important;
}
.film-controls>button:hover,.moment-play:hover{box-shadow:0 0 14px rgba(255,62,207,.3)!important}

/* ===== font picker (.fp-*) ===== */
.fp-dialog{background:linear-gradient(180deg,var(--g2-card-2),var(--g2-card))!important;border-color:var(--g2-line)!important;color:var(--g2-ink)!important;box-shadow:0 30px 70px rgba(0,0,0,.6)!important}
.fp-search{background:#03080d!important;border-color:var(--g2-line-soft)!important;color:var(--g2-ink)!important}
.fp-search::placeholder{color:var(--g2-ink-dim)!important}
/* fp-chip / font-opt = System B card-b (selectable) */
.fp-chip{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box!important;
  border:1px solid transparent!important;color:var(--g2-ink)!important;
}
.fp-chip[aria-pressed="true"]{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;color:var(--g2-ink)!important;box-shadow:0 0 14px rgba(255,62,207,.2)!important;
}
/* fp-play = System B icon-b */
.fp-play{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border:1.5px solid transparent!important;color:var(--g2-ink)!important;box-shadow:none!important;
}
.fp-play:hover{box-shadow:0 0 14px rgba(255,62,207,.3)!important}
.fp-status{color:var(--success)!important}
.font-link:focus-visible,.fp-chip:focus-visible,.font-opt:focus-visible,.font-target:focus-visible,
.fp-close:focus-visible,.fp-play:focus-visible,.fp-search:focus-visible{outline-color:var(--blue)!important}
.font-opt.selected{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;box-shadow:0 0 14px rgba(255,62,207,.2)!important;
}
/* cover-pos-b = System B toggle-b segment */
.cover-pos-b.on{background:linear-gradient(120deg,rgba(62,244,255,.18),rgba(255,62,207,.18))!important;color:var(--g2-ink)!important;border-color:transparent!important}

/* ===== modals / legal dialogs / menus ===== */
.modal-card,.legal-dialog,.wizard-menu,.viewport-wizard .legal-dialog,.confirm-dialog .modal-card,.projects-dialog .modal-card{
  background:linear-gradient(150deg,var(--g2-card),var(--g2-card-2))!important;color:var(--g2-ink)!important;
  border:1px solid var(--g2-line)!important;box-shadow:0 30px 90px rgba(0,0,0,.6)!important;
}
.modal-card h2,.legal-dialog h2,.legal-dialog h3,.modal-card>p,.legal-dialog p{color:var(--g2-ink)!important}
.legal-dialog p{color:var(--g2-ink-dim)!important}
.modal-close,.legal-close,.wizard-menu-close{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border:1.5px solid transparent!important;color:var(--g2-ink)!important;
}
.modal-close:hover,.legal-close:hover,.wizard-menu-close:hover{box-shadow:0 0 14px rgba(255,62,207,.3)!important}
.price-options>div{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box!important;
  border:1px solid transparent!important;
}
.price-options .featured{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;box-shadow:0 0 20px rgba(255,62,207,.15)!important;
}
.price-options b,.price-options small,.price-options>div>span{color:var(--g2-ink)!important}
.price-options em{background:var(--spark)!important;color:#fff!important}
.toast{background:var(--g2-card)!important;border:1px solid var(--g2-line)!important;color:var(--g2-ink)!important}
.legal-footer{border-top-color:var(--g2-line-soft)!important;color:var(--g2-ink-dim)!important}
.legal-footer button,.legal-footer a,.wizard-menu .legal-footer button,.wizard-menu .legal-footer a{color:var(--blue)!important}
.rights-notice{background:rgba(62,244,255,.06)!important;border-color:var(--g2-line-soft)!important;color:var(--g2-ink)!important}
.rights-notice p{color:var(--g2-ink-dim)!important}
.gate-lock{background:rgba(62,244,255,.14)!important;color:var(--blue)!important}
.gate-expired{background:rgba(255,62,207,.14)!important;color:#ffd6f6!important}
.gal-opt{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box!important;
  border:1px solid transparent!important;
}
.gal-cell.selected .gal-opt{
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;box-shadow:0 0 16px rgba(255,62,207,.25)!important;
}
.gal-count{color:var(--blue)!important}
:focus-visible{outline-color:var(--blue)!important}
.viewport-wizard :focus-visible{outline-color:var(--blue)!important}

/* ===== mascot removed (owner decision, 2026-09-29) =====
   .mascot is position:fixed (see styles.css/motion-overrides.css), so it is already out of normal
   document flow on every screen and at every width — hiding it leaves no gap to fill, desktop or
   mobile. app.js still creates/positions the element on every wizard-screen change (mascotSync IIFE,
   untouched — no logic removed), it simply never becomes visible. The per-step tips it used to carry
   (mascotSong/mascotAudio/mascotLyrics/mascotSync/mascotGallery/mascotPreview, still defined in app.js's
   `copy` for any future reuse) all already have an on-screen equivalent elsewhere in each step (its own
   heading/subtitle, or a dedicated screen like the auto-recognition step's arHead/arSub) — verified
   screen by screen, so no app.js changes were needed at all. */
.mascot{display:none!important}

/* newsletter block, kept for step 6 */
.newsletter{background:rgba(5,6,8,.8)!important;border-color:var(--g2-line-soft)!important}
.newsletter-copy h2{color:var(--g2-ink)!important}
.newsletter-copy p,.consent{color:var(--g2-ink-dim)!important}
.newsletter .eyebrow{color:var(--spark)!important}
.newsletter-mark{background:var(--blue)!important;color:var(--accent-ink)!important}

/* ===== live-preview panel on "First, your song" (owner 2026-09-29): was a blue→purple/yellow gradient,
   now near-black with a soft cyan/pink glow, matching the homepage hero background. This is a plain CSS
   background (no canvas/JS drawing involved — app.js only ever sets #visualTitle/#visualArtist text via
   updateLiveCanvas()), so this is CSS-only. .canvas-copy small (the eyebrow label) and .beat-line i
   already turned cyan automatically from the --yellow root-variable override earlier in this file. */
.live-canvas{
  background:
    radial-gradient(circle at 80% 15%,rgba(62,244,255,.35) 0,transparent 24%),
    radial-gradient(circle at 15% 85%,rgba(255,62,207,.22) 0,transparent 40%),
    linear-gradient(145deg,#0a0e14 0%,#050608 60%,#0a0e14 100%)!important;
  box-shadow:0 0 0 1px rgba(62,244,255,.14),0 30px 55px rgba(0,0,0,.5)!important;
}
.canvas-grid{opacity:.14!important}
.live-canvas:after{background:linear-gradient(135deg,transparent 40%,rgba(62,244,255,.06))!important}
.live-canvas>b{color:rgba(62,244,255,.08)!important}
.canvas-copy strong{color:#fff!important;text-shadow:0 0 24px rgba(62,244,255,.25)!important}
.canvas-copy span{color:var(--g2-ink-dim,#8ea3a8)!important}
.sound-rings i{border-color:rgba(62,244,255,.28)!important}

/* ===== other leftover blue/purple gradients found across the wizard (owner 2026-09-29 follow-up) =====
   None of these are buttons (the button system is on hold per owner instruction — untouched here):
   the timing-editor summary/panel cards, the timeline word-blocks, the small cover thumbnail, the
   cover-actions sticky-footer fade, and the "show more" list fade (which faded to var(--surface), a
   near-white styles.css variable never repointed for the dark theme — a real leftover-white bug). */
.tm-panel,.tm-summary{background:var(--g2-card)!important;box-shadow:none!important}
.tl-block{background:rgba(62,244,255,.22)!important;border-color:rgba(62,244,255,.45)!important}
.tl-block.k-you{background:rgba(255,62,207,.24)!important;border-color:rgba(255,62,207,.5)!important}
.cover-mini{background:var(--blue)!important}
.cover-result-actions{background:linear-gradient(180deg,rgba(5,6,8,0),var(--g2-card) 28%)!important}
.ar-more{background:linear-gradient(to bottom,transparent,var(--g2-card) 70%)!important;color:var(--g2-ink-dim)!important}

/* misc small accents */
.confidence.green,.review-head>span,.review-head>span i{color:var(--success)!important}
.danger{color:#ff3ecf!important;border-color:rgba(255,62,207,.4)!important}
.audio-missing-note{background:rgba(62,244,255,.08)!important;border-color:rgba(62,244,255,.4)!important;color:var(--g2-ink)!important}

/* ===== welcome-screen step rows (owner 2026-09-29): flat dark cards, cyan number badge ===== */
.intro-steps li{background:var(--g2-card)!important;border:1px solid var(--g2-line-soft)!important;border-radius:var(--g2-radius)!important;box-shadow:none!important}
.intro-steps li::after{background:var(--blue)!important;color:var(--accent-ink)!important}
.intro-step-text{color:var(--g2-ink)!important}
.intro-media{border:1px solid var(--g2-line-soft)!important;box-shadow:none!important}
.intro-cap{color:var(--g2-ink-dim)!important}

/* flat solid avatar circles (was a glossy gradient) */
.user-avatar{background:var(--spark)!important}
.avatar{background:var(--spark)!important}

/* ===== bitmap "clay" icon sprite replaced with inline SVG line icons (owner 2026-09-29) =====
   CSS-only: app.js already sets data-icon="…" on every .clay-icon element (unchanged), these rules
   just replace what .clay-icon paints. All icons are the same cyan (#3ef4ff) minimal stroke style;
   the class name "clay-icon" is kept as-is in markup — only its own background is repainted here. */
.clay-icon{
  position:relative!important;
  background-color:#0a0e14!important;background-repeat:no-repeat!important;
  background-position:center!important;background-size:56%!important;
  border-radius:var(--g2-radius)!important;clip-path:none!important;filter:none!important;
  box-shadow:inset 0 0 12px rgba(62,244,255,.2)!important;
}
/* framed tile (owner 2026-09-29: "עם מסגרת"): thin cyan→pink gradient ring on every icon */
.clay-icon::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,#3ef4ff,#ff3ecf);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.clay-icon[data-icon="upload"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M12 16V4M12 4l-5 5M12 4l5 5'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="download"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M12 4v12M12 16l-5-5M12 16l5-5'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="mic"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v4M9 22h6'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="video"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Crect x='2.5' y='5.5' width='13' height='13' rx='2'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M15.5 9.5 21 6.5v11L15.5 14.5'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="photo"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m4 18 5.5-5.5a2 2 0 0 1 2.8 0L18 18'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="write"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3Z'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M13.5 6.5l3 3'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="gear"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v2.5M12 18.5V21M21 12h-2.5M5.5 12H3'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M18 6l-1.7 1.7M7.7 16.3 6 18M18 18l-1.7-1.7M7.7 7.7 6 6'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="cut"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M8.3 7.5 20 18M20 6 8.3 16.5'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Ccircle cx='6' cy='6' r='2.4'/%3E%3Ccircle cx='6' cy='18' r='2.4'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="share"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='m8.2 10.7 7.6-4.4M8.2 13.3l7.6 4.4'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Ccircle cx='18' cy='5' r='2.4'/%3E%3Ccircle cx='6' cy='12' r='2.4'/%3E%3Ccircle cx='18' cy='19' r='2.4'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="volume"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M4 9.5v5h4l5 4v-13l-5 4H4Z'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M17 8.5a5 5 0 0 1 0 7M19.5 6a8.5 8.5 0 0 1 0 12'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="music"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="play"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M9.5 7.8v8.4l7.3-4.2Z'/%3E%3C/g%3E%3C/svg%3E")!important}


/* RTL: step number badge sits on the RIGHT (start) side (owner 2026-09-29) */
[dir="rtl"] .intro-steps li::after{inset-inline-end:auto!important;inset-inline-start:10px!important}

/* font-picker tab selected state: gradient ring instead of legacy yellow (QA carryover 2026-09-29) */
.font-target[aria-pressed="true"]{border-color:transparent!important;background:linear-gradient(#0b0d12,#0b0d12) padding-box,linear-gradient(120deg,#3ef4ff,#ff3ecf) border-box!important;color:#fff!important}

/* =====================================================================================
   Wizard-wide pink+cyan color system round (owner, 2026-09-29) - remaining hardcoded
   legacy yellow (#ffe000/#ffd400/#e0b64a/#f4c542/rgba(255,21x/22x/24x,...)) and old blue that were not
   already covered by an existing selector above (checked one by one against styles.css/
   motion-overrides.css - see the App Engineering handoff for the full before/after list). ===== */

/* rights checkbox text ("יש לי אישור...") must be white, not the --g2-ink-dim it was inheriting */
.rights-notice .consent,.rights-notice .consent span,.face-consent .consent,.face-consent .consent span{color:#fff!important}

/* language dropdown menu: selected-option highlight + focus outline were yellow */
.lang-option[aria-selected="true"]{background:rgba(62,244,255,.14)!important;color:var(--g2-ink)!important}
.lang-menu :focus-visible{outline-color:var(--blue)!important}
.font-upload:focus-within{outline-color:var(--blue)!important}
.g-btn:focus-visible,.hdr-btn:focus-visible,.user-chip:focus-visible,.user-menu-item:focus-visible,
.projects-panel button:focus-visible,.projects-panel a:focus-visible,.auth-email-input:focus-visible,
.sg-card:focus-visible,.sg-page-step:focus-visible{outline-color:var(--blue)!important}
/* ready-graphic-check spinner */
.rg-spin{border-top-color:var(--blue)!important}
/* mood-fix consent box (old blue background + yellow border) */
.mf-consent-box{border-color:rgba(62,244,255,.4)!important;background:var(--g2-card)!important}
/* scene picker (preview "fix this scene" sheet) */
.scene-seg.cur{background:var(--blue)!important;color:var(--accent-ink)!important}
.scene-choice.on,.scene-choice[aria-pressed="true"],.scene-choice[aria-checked="true"]{
  border-color:transparent!important;
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  box-shadow:0 0 14px rgba(255,62,207,.25)!important;
}
/* timing editor (.tm-*): progress bar, tag pill, tap button, selected/flagged rows */
.tm-progress i{background:linear-gradient(90deg,var(--blue),var(--spark))!important}
.tm-tag{background:var(--blue)!important;color:var(--accent-ink)!important}
.tm-tapbtn{
  border:1px solid transparent!important;
  background:linear-gradient(var(--g2-card-2),var(--g2-card-2)) padding-box,linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  color:var(--g2-ink)!important;box-shadow:none!important;
}
.tm-row.sel .tm-rowsel{border-color:var(--blue)!important;border-inline-start-color:var(--blue)!important;background:rgba(62,244,255,.1)!important}
.tm-row.flag.sel .tm-rowsel{border-color:var(--spark)!important;border-inline-start-color:var(--spark)!important;background:rgba(255,62,207,.1)!important}
.consent-panel .consent input{accent-color:var(--blue)!important}
/* timeline (.tl-*): selected block, tooltip, loop toggle, scope option */
.tl-loop[aria-pressed="true"]{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(62,244,255,.25)!important}
.tl-block.sel{box-shadow:0 0 0 2px var(--blue)!important}
.tl-tip{background:var(--blue)!important;color:var(--accent-ink)!important}
.tl-sopt[aria-checked="true"]{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(62,244,255,.25)!important}
/* homepage-sample caption link on the intro screen (was #f4c542 yellow) */
.intro-samples .intro-cap{color:var(--blue)!important}

/* ===== step progress bar (owner spec: fill cyan->pink, "שלב 1 מתוך 6" white, step name pink) ===== */
.viewport-wizard .progress-track i,.progress-track i{background:linear-gradient(90deg,var(--blue),var(--spark))!important;box-shadow:0 0 14px rgba(255,62,207,.4)!important}
.progress-copy b{color:var(--spark)!important}
.progress-copy small{color:#fff!important}

/* =====================================================================================
   Inputs + credits (owner spec, 2026-09-29): near-black fill, idle = low-opacity cyan->pink gradient
   ring (~1.5px, padding-box/border-box trick), focus = full-strength ring + soft pink glow. Labels
   cyan/white, typed text white, placeholder white at reduced opacity (not gray). ===== */
.wizard .meta-row input,.wizard .credit-fields input,.wizard textarea,
.meta-row input,.advanced select,.auto-panel select,textarea,
.stage[data-stage="1"] .meta-row input,.credit-row input,.cover-prompt textarea,
.wizard #coverPrompt,.newsletter-fields input,.titles-row select,select{
  background:linear-gradient(#0b0d12,#0b0d12) padding-box,
             linear-gradient(120deg,rgba(62,244,255,.35),rgba(255,62,207,.35)) border-box!important;
  border:1.5px solid transparent!important;color:#fff!important;box-shadow:none!important;
  border-radius:12px!important;
}
.wizard .meta-row input::placeholder,.wizard textarea::placeholder,
.meta-row input::placeholder,textarea::placeholder,.newsletter-fields input::placeholder{
  color:rgba(255,255,255,.55)!important;font-size:.94em;opacity:1;
}
.wizard input:focus,.wizard textarea:focus,.meta-row input:focus,.advanced select:focus,
.auto-panel select:focus,textarea:focus,.credit-row input:focus,.cover-prompt textarea:focus,
.newsletter-fields input:focus,select:focus{
  background:linear-gradient(#0b0d12,#0b0d12) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border:1.5px solid transparent!important;outline:0!important;
  box-shadow:0 0 0 4px rgba(255,62,207,.16),0 0 20px rgba(255,62,207,.25)!important;
}
.meta-row label>span,.field-head label,.credit-fields label>span{color:var(--blue)!important}
/* credits: add = System B pill, remove x = System B icon button (already .credit-add/.credit-remove
   via the generic System B rules above; pill shape + accent color pinned here) */
.credit-add{border-radius:999px!important;color:var(--blue)!important;border-color:rgba(62,244,255,.3)!important}
.credit-add:hover{border-color:rgba(255,62,207,.5)!important;color:var(--g2-ink)!important}

/* =====================================================================================
   Upload step (owner spec, 2026-09-29): dropzones + "בחירת קובץ"/"בחירת תמונה" buttons.
   Idle = System B dark glass w/ gradient ring (already the shared card rule above). Hover = brighter
   ring + cyan tint; pressed = pink fill + dark ink + scale(.97); has-file = cyan fill + dark ink with
   the chosen file name/"Selected"; focus-visible ring. ===== */
.wizard .dropzone em{
  background:var(--blue)!important;color:var(--accent-ink)!important;border:1px solid transparent!important;
  border-radius:999px!important;transition:background .15s ease,transform .1s ease,box-shadow .15s ease!important;
}
@media(hover:hover){
  .wizard .dropzone:hover em{box-shadow:0 0 14px rgba(62,244,255,.5)!important}
  .wizard .dropzone:hover{box-shadow:0 0 0 1px rgba(62,244,255,.3)!important}
}
.wizard .dropzone:active em{transform:scale(.97)!important}
.wizard .dropzone.drag{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;box-shadow:0 0 22px rgba(255,62,207,.3)!important;
}
.wizard .dropzone.has-file{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--blue),var(--spark)) border-box!important;
  border-color:transparent!important;
}
.wizard .dropzone.has-file em{background:var(--blue)!important;color:var(--accent-ink)!important}
.wizard .dropzone input:focus-visible ~ em,.wizard .dropzone em:focus-visible{outline:2px solid var(--blue)!important;outline-offset:2px}
/* selected lyrics-source card gets the gradient ring (already covered by the generic .selected rule) */

/* =====================================================================================
   AI cover-generation progress card (owner spec, 2026-09-29): #generateCoverBtn -> /api/cover-openai */
.cover-progress{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--g2-card-2);border:1px solid var(--g2-line-soft)}
.cover-progress-track{position:relative;height:8px;border-radius:999px;background:#03080d;overflow:hidden}
.cover-progress-track i{display:block;height:100%;width:4%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--spark));box-shadow:0 0 10px rgba(255,62,207,.45);transition:width .3s ease}
@media(prefers-reduced-motion:reduce){.cover-progress-track i{transition:none}}
.cover-progress-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px}
.cover-progress-stage{color:var(--g2-ink)!important;font-weight:600}
.cover-progress-time{color:rgba(255,255,255,.72)!important;font-variant-numeric:tabular-nums}
.cover-progress-expect{margin:6px 0 0;color:rgba(255,255,255,.72)!important;font-size:12.5px}
.cover-progress-long{margin:6px 0 0;color:var(--spark)!important;font-size:12.5px;font-weight:600}
#coverErrorRetry{margin-top:10px}

/* =====================================================================================
   New two-tone icons (owner spec, 2026-09-29): icon<->label mismatches fixed by giving each button
   its own icon instead of reusing "photo"/"write"/"mic" across unrelated screens. See the handoff for
   the full audit table. ===== */
.clay-icon[data-icon="imgupload"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Crect x='3' y='5' width='14' height='14' rx='2'/%3E%3Cpath d='m3 16 4-4a1.8 1.8 0 0 1 2.5 0L15 17.5'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M19.5 11V3M19.5 3l-3 3M19.5 3l3 3'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="sparkle"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M11 3.5l1.9 5.1 5.1 1.9-5.1 1.9L11 17.5l-1.9-5.1-5.1-1.9 5.1-1.9Z'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M19 14.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z'/%3E%3Cpath d='M18.5 3v3M17 4.5h3'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="ailisten"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M3 12h1.5M6.5 9v6M10 6v12M13.5 9v6M17 11v2'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M19.5 2.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8Z'/%3E%3C/g%3E%3C/svg%3E")!important}
.clay-icon[data-icon="lyricsdoc"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%233ef4ff'%3E%3Cpath d='M6 3h8.5L19 7.5V21H6Z'/%3E%3Cpath d='M14.5 3v4.5H19'/%3E%3C/g%3E%3Cg stroke='%23ff3ecf'%3E%3Cpath d='M9 11.5h7M9 15h7M9 18.5h4'/%3E%3C/g%3E%3C/svg%3E")!important}

/* color-audit findings, round 2 (owner: "in the whole site" sweep) - light-blue/yellow text found by
   scripts/color-audit.mjs that the earlier passes above did not reach. */
.wizard-hint{color:#fff!important}
.wizard-foot button,.wizard-foot a{color:rgba(255,255,255,.72)!important}
.wizard-foot button:hover,.wizard-foot a:hover{color:#fff!important}
.wizard .rights-notice .text-button,.consent-links .text-button{color:var(--blue)!important}
.wizard .lang-hint-label{color:rgba(255,255,255,.72)!important}
.font-link{color:var(--blue)!important}
.font-link:hover:not(:disabled){color:#fff!important}
.film-controls .timecode,.timecode{color:rgba(255,255,255,.72)!important}
/* disabled primary buttons: was a plain gray (#6b7a7e); white-family at reduced opacity instead */
.wizard .primary-action:disabled,.primary-action:disabled,.pp-primary:disabled,
.cover-generate:disabled,.cover-use:disabled{color:rgba(255,255,255,.5)!important}
.no-text-note b{color:#fff!important}
.cover-mini{color:#fff!important}
#lineCount{color:rgba(255,255,255,.72)!important}
/* timing-step empty state ("Timing needs your song file.") - was a solid navy blue card */
.tm-empty,.tm-empty-list{background:var(--g2-card-2)!important;border-color:var(--g2-line-soft)!important;color:var(--g2-ink)!important}
/* var(--navy) leftovers not caught by the earlier repoint (styles.css :root keeps its own --navy,
   unlike --blue/--yellow which app-g2-theme.css redefines): the preview film frame (incl. its
   "A live preview needs your song file" empty overlay), the "More actions" collapsible on the preview
   screen, the song-chip and the legacy sync-player card. */
.film-frame{background:var(--g2-bg)!important}
.film-overlay{background:rgba(5,6,8,.88)!important}
.wizard-screen[data-screen="preview"] .preview-more{background:var(--g2-card-2)!important;border-color:var(--g2-line-soft)!important}
.wizard-screen[data-screen="preview"] .preview-more>summary{color:var(--g2-ink)!important}
.song-chip{background:var(--g2-card-2)!important}
.sync-player{background:var(--g2-card-2)!important}

/* ===== Revision requests dialog (Backend & AI, 2026-09-30) — text: white / cyan / pink only ===== */
.rev-dialog .modal-card{gap:12px}
.rev-dialog h2,.rev-dialog h3,.rev-dialog p,.rev-dialog label,.rev-dialog li{color:#fff!important}
.rev-dialog h3{font-size:16px;margin:6px 0 0}
.rev-dialog p.rev-counter{color:var(--blue)!important;font-weight:700;font-size:15px;margin:0}
.rev-help{margin:0;opacity:.85}
.rev-label{display:block;font-weight:600;margin-bottom:4px}
.rev-form{display:flex;flex-direction:column;gap:10px}
.rev-text,.rev-t,.rev-n{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--g2-line);border-radius:var(--g2-radius,12px);color:#fff;font:inherit;padding:10px 12px}
.rev-text{resize:vertical;min-height:96px}
.rev-text:focus,.rev-t:focus,.rev-n:focus{outline:2px solid var(--blue);outline-offset:1px}
.rev-text::placeholder,.rev-t::placeholder,.rev-n::placeholder{color:rgba(255,255,255,.6);opacity:1}
.rev-rows{display:flex;flex-direction:column;gap:8px}
.rev-row{display:grid;grid-template-columns:84px 1fr 40px;gap:8px;align-items:center}
.rev-x{min-height:40px}
.rev-add{align-self:flex-start}
.rev-dialog p.rev-err{margin:0;color:var(--spark)!important;font-weight:600}
.rev-dialog p.rev-err[hidden],.rev-counter[hidden],.rev-hist[hidden]{display:none}
.rev-send{width:100%}
.rev-dialog p.rev-exh{margin:0;color:var(--spark)!important;font-weight:600}
.rev-list{display:flex;flex-direction:column;gap:8px}
.rev-item{border:1px solid var(--g2-line-soft);border-radius:var(--g2-radius,12px);background:rgba(255,255,255,.03);padding:10px 12px}
.rev-item-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rev-item-top small{margin-inline-start:auto;color:#fff;opacity:.7}
.rev-status{border:1px solid currentColor;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:700;color:#fff}
.rev-status.is-in_progress{color:var(--blue)}
.rev-status.is-done{color:var(--spark)}
.rev-notes{margin:8px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.rev-ts{color:var(--blue);font-weight:700;unicode-bidi:isolate}
.rev-open[hidden]{display:none}

/* Account management block in the settings dialog (owner 2026-09-30): plain small text link, not a D/B button */
.menu-account{margin-top:14px;padding-top:10px;border-top:1px solid var(--g2-line-soft,rgba(62,244,255,.14));display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.menu-account[hidden]{display:none}
.menu-account-h{margin:0;font-size:13px;font-weight:700;color:#fff;opacity:.85}
.acct-delete{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;font-size:13px;color:#fff;opacity:.7;text-decoration:underline;padding:6px 0;min-height:32px}
.acct-delete:hover{opacity:1}
.acct-delete:focus-visible{outline:2px solid var(--blue);outline-offset:2px;opacity:1}

/* The lyrics step's helper text is the sub-title: keep it visible when the fit controller shrinks other screens */
body[data-screen="lyrics"] .wizard:is([data-fit="1"],[data-fit="2"],[data-fit="3"]) .wizard-sub{display:block}

/* ===== Listening / recognition / sync flow: palette only (owner 2026-09-30: no yellow icons or states) =====
   Warnings and "needs a look" states are pink; progress/active states are cyan; text is white. Overrides the old
   amber/gold values in motion-overrides.css for the auto (listening) screen, the sync progress and its result states. */
.tm-warn,.tm-nosum,.sync-note,.chip-check,.chip-guess{color:#fff!important;border-color:var(--spark)!important;background:rgba(255,62,207,.12)!important;text-shadow:none!important}
.tl-need{color:#fff!important;text-shadow:none!important}
.tm-warn::before,.tm-nosum::before,.chip-check::before,.chip-guess::before{color:var(--spark)!important}
.tm-summary.tm-partial,.tm-summary.tm-rough,.tm-summary.tm-none{border-color:var(--spark)!important;box-shadow:none!important}
.tm-summary.tm-found{border-color:var(--blue)!important}
.tm-phases li.cur::before{background:var(--blue)!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(62,244,255,.25)!important}
.tm-progress i{background:linear-gradient(90deg,var(--blue),var(--spark))!important}
.tm-mark.m-check,.tm-mark.m-guess,.tl-block.flag{background:rgba(255,62,207,.35)!important;border-color:var(--spark)!important}
.tm-mark.sel{background:var(--blue)!important}
.wizard .lang-hint-label{color:#fff!important}
.wizard .lang-chip{background:rgba(255,255,255,.04)!important;border:1px solid var(--g2-line)!important;color:#fff!important}
.wizard .lang-chip[aria-pressed="true"]{background:rgba(62,244,255,.14)!important;border-color:var(--blue)!important;color:#fff!important}
.wizard-hint{color:#fff!important}
.g-btn:focus-visible,.hdr-btn:focus-visible,.user-chip:focus-visible,.user-menu-item:focus-visible,.projects-panel button:focus-visible{outline-color:var(--blue)!important}

/* Owner 2026-09-30: no old sample images in /create -- the legacy style sprites are never painted. */
.mood-visual,.extra-visual{background-image:none!important;background-color:var(--g2-card-2,#0d1420)!important}
.wizard .lang-hint-label{color:#fff!important}
.wizard-actions{border-top-color:rgba(62,244,255,.14)!important}
.skip-link{background:var(--g2-card,#0b0f14)!important}
.brand{color:#fff}
.auth-soon{color:#031014!important}
a.intro-media,a.intro-media:visited{color:#fff}

/* QA W4/W6 (2026-09-30): lyrics label in white; the sync result is a compact centered card with the waveform. */
#lyricsLabel,.field-head span,.field-head label{color:#fff!important}
.tm-root[data-view="result"]{max-width:560px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.wizard-screen[data-screen="sync"]:not([hidden]){display:flex;flex-direction:column;justify-content:center;min-height:100%}
.tm-root[data-view="result"] .tm-summary{text-align:center}
.tm-root[data-view="result"] .tm-wave,.tm-root[data-view="result"] .tm-wave-sm{display:block;height:64px!important;min-height:64px;width:100%}
.tm-root[data-view="result"] .tm-acts{justify-content:center}
.tm-wave{background:#060a10!important;border-color:rgba(62,244,255,.3)!important}
.tm-bars i{background:rgba(62,244,255,.75)!important}
.tm-head{background:var(--spark)!important}

/* ===== a11y 2026-10-06 (Israeli accessibility audit): contrast to AA ===== */
/* avatar initials: white on pink was 3.1:1; dark ink on the pink is about 7:1 */
.user-avatar,.avatar{color:#12031a!important}
/* text-field borders were 35% cyan/pink on near-black (about 2.4:1 against the page); WCAG 2.1 non-text contrast needs 3:1 */
.wizard .meta-row input,.wizard .credit-fields input,.wizard textarea,
.meta-row input,.advanced select,.auto-panel select,textarea,
.stage[data-stage="1"] .meta-row input,.credit-row input,.cover-prompt textarea,
.wizard #coverPrompt,.newsletter-fields input,.titles-row select,select{
  background:linear-gradient(#0b0d12,#0b0d12) padding-box,
             linear-gradient(120deg,rgba(62,244,255,.9),rgba(255,62,207,.9)) border-box!important;
}
.stl-noteinp,#rightsHolder{border-color:rgba(62,244,255,.85)!important}

/* ===== Clip type step (owner 2026-11-12): three cards, each with a muted looping sample that already exists on the site ===== */
.kind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:4px 0 2px}
.kind-card{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;margin:0;text-align:start;font:inherit;color:var(--g2-ink);background:var(--g2-card);border:1.5px solid var(--g2-line-soft);border-radius:var(--g2-radius,18px);overflow:hidden;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;min-width:0}
.kind-card:hover{border-color:var(--g2-line);transform:translateY(-2px)}
.kind-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.kind-card.chosen{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 10px 28px rgba(62,244,255,.18)}
.kind-media{position:relative;display:block;aspect-ratio:16/9;background:#04080c}
.kind-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.kind-check{position:absolute;inset-block-start:8px;inset-inline-end:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--accent-ink);background:var(--blue);opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}
.kind-card.chosen .kind-check{opacity:1;transform:none}
.kind-text{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.kind-title{font-size:16px;font-weight:800;line-height:1.25;color:var(--text-hi);text-wrap:balance}
.kind-card.chosen .kind-title{color:var(--blue)}
.kind-desc{font-size:13.5px;line-height:1.4;color:var(--g2-ink-dim)}
@media(max-width:760px){
 .kind-grid{grid-template-columns:1fr;gap:10px}
 .kind-card{flex-direction:row;align-items:center}
 .kind-media{flex:0 0 46%;max-width:200px;align-self:center;aspect-ratio:16/9;min-height:0} /* the whole 16:9 frame (Shai 15:21: the lyric line on the poster must be fully visible; a stretched box cropped its sides) */
 .kind-text{padding:10px 12px;gap:4px}
 .kind-title{font-size:15px}
 .kind-desc{font-size:13px;line-height:1.35}
 .kind-check{width:24px;height:24px;font-size:13px;inset-block-start:6px;inset-inline-end:6px}
}
/* style step: the clip type line above the setup, with a Change link */
.stl-kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 2px;font-size:14px;color:var(--g2-ink-dim)}
.stl-kind-v{color:var(--text-hi);font-weight:700}
.stl-kind .stl-kind-change{min-height:36px;padding:0 12px;font-size:13px}