/* ============================================================================
   DeenVideo — dark theme
   Palette: bg #0d0e12, card #16181f, border #23262f,
            accent #7c5cff -> #5b8cff, text #e7e9ee, muted #9aa0ad,
            error #ff6b6b, success #39d98a
   ========================================================================== */

:root {
  --bg:            #0d0e12;
  --card:          #16181f;
  --card-2:        #1b1e27;
  --border:        #23262f;
  --text:          #e7e9ee;
  --muted:         #9aa0ad;
  --accent-1:      #7c5cff;
  --accent-2:      #5b8cff;
  --error:         #ff6b6b;
  --success:       #39d98a;

  --radius-lg:     18px;
  --radius-md:     14px;
  --radius-sm:     10px;

  --accent-grad:   linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --shadow:        0 20px 60px -20px rgba(0, 0, 0, .65);
  --shadow-sm:     0 8px 24px -12px rgba(0, 0, 0, .55);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  min-height: 100svh;
}

/* Subtle radial gradient glow behind everything */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(124, 92, 255, .16), transparent 60%),
    radial-gradient(48rem 36rem at 100% 110%, rgba(91, 140, 255, .12), transparent 60%),
    var(--bg);
}

/* Centered shell */
.shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Telegram Mini App: anchor to the TOP instead of centring. In a webview the keyboard
   shrinks the viewport, and a vertically-centred card jumps upward as it opens — the
   input slides out from under the thumb mid-tap. Top-aligned, the card stays put and
   only the space below it is consumed. Also drop the min-height so the shell tracks
   the keyboard-reduced viewport rather than forcing a scroll. */
body.is-miniapp .shell {
  justify-content: flex-start;
  min-height: auto;
  padding-top: 16px;
  padding-bottom: 32px;
}

/* ── Brand / wordmark ──────────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  /* The mark is drawn edge-to-edge in its viewBox, so this gap is the WHOLE gap --
     it used to look wider because the old artwork carried transparent padding. */
  gap: 9px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  user-select: none;
  /* The wordmark is an <a href="/"> now (app.html's topbar and _brand.html), so it
     needs the anchor chrome removed -- .brand__name sets its own colour, but the
     underline would still show. */
  text-decoration: none;
  color: inherit;
}
.brand:hover { opacity: .85; }
.brand:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 4px; border-radius: 8px; }
.brand--center { justify-content: center; margin-bottom: 22px; }
.brand__mark { display: inline-flex; line-height: 0; }
.brand__name { color: var(--text); }
.brand__name-accent {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.card {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.card--login { max-width: 400px; }
.card--app   { max-width: 480px; }

.card__title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
}
.card__subtitle {
  margin: 0 0 24px;
  color: var(--muted);
  text-align: center;
  font-size: .95rem;
}

/* ── App layout (top bar above the card) ───────────────────────────────── */
.app {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.logout {
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color .15s ease, background .15s ease;
}
.logout:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.logout:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: .85rem; font-weight: 500; color: var(--muted); }

.input {
  width: 100%;
  padding: 12px 14px;
  font-size: .98rem;
  font-family: inherit;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder { color: #5d6270; }
.input:hover { border-color: #2e323d; }
.input:focus {
  outline: none;
  border-color: var(--accent-1);
  background: #1e2129;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .18);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn--block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.btn--primary {
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 10px 26px -10px rgba(124, 92, 255, .65);
}
.btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(124, 92, 255, .75); }
.btn--primary:active:not(:disabled) { transform: translateY(0); }
.btn--primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.3);
}

.btn--ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
  margin-top: 10px;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .04); border-color: #2e323d; }

/* ── Chips (errors / alerts) ───────────────────────────────────────────── */
/* The `hidden` attribute must always win over component display rules — .chip
   sets display:block, which would otherwise keep an empty/hidden error chip
   visible as a stray red box. */
[hidden] { display: none !important; }

.chip {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}
.chip--error {
  color: var(--error);
  background: rgba(255, 107, 107, .1);
  border: 1px solid rgba(255, 107, 107, .28);
}

/* ── Hints ─────────────────────────────────────────────────────────────── */
.hint { font-size: .85rem; text-align: center; }
.hint--muted { color: var(--muted); margin: 14px 0 0; }

/* ── Step 1 intake: paste a link | drop a file ─────────────────────────── */
/* Two panels of equal weight, side by side. Stacking them made the card ~180px
   taller and pushed the Inspiration grid below the fold on a laptop; the card is
   already 780px wide on the home page, so the columns cost nothing. */
.intake {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 18px;
}
.intake__panel {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-2);
  color: var(--muted);
  text-align: center;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.intake__panel:hover { border-color: #2e323d; }
.intake__panel:focus-within { border-color: var(--accent-1); }

.intake__icon {
  display: inline-flex;
  color: var(--accent-2);
  transition: transform .2s ease;
}
.intake__title {
  font-size: .96rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.intake__meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: .76rem;
  color: var(--muted);
  opacity: .85;
}
.intake__input { margin-top: 8px; text-align: center; font-size: .92rem; }

/* Vertical "or", collapsing to a horizontal one when the panels stack. */
.intake__or {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.intake__or::before,
.intake__or::after {
  content: "";
  flex: 1;
  width: 1px;
  background: var(--border);
}

/* ── States (sections) ─────────────────────────────────────────────────── */
.state { animation: fade-in .35s ease both; }
.state--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.state[hidden] { display: none !important; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dropzone (the upload half of the intake pair) ─────────────────────── */
.intake__panel--drop {
  border-style: dashed;
  border-width: 1.5px;
  border-color: #2e323d;
  cursor: pointer;
}
.intake__panel--drop:hover { border-color: var(--accent-1); color: var(--text); }
.intake__panel--drop:focus-within { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* Dragging is signalled on the ZONE even while the file is over the card elsewhere:
   the whole step-1 card is a drop target, so this box has to be the thing that lights
   up, or the user gets no clue where the file is about to go. */
.intake__panel--drop.is-dragover {
  border-style: solid;
  border-color: var(--accent-1);
  background: rgba(124, 92, 255, .1);
  color: var(--text);
}
.intake__panel--drop.has-file {
  border-style: solid;
  border-color: rgba(124, 92, 255, .55);
  background: rgba(124, 92, 255, .06);
  color: var(--text);
  cursor: default;
}

/* Visually hidden, but still focusable and still what the label activates: Tab
   reaches it and Enter/Space opens the picker with no JS involved. */
.dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.dropzone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.intake__panel--drop.has-file .dropzone__label { display: none; }
.intake__panel--drop:hover .intake__icon,
.intake__panel--drop.is-dragover .intake__icon { transform: translateY(-3px); }

.dropzone__hint { font-size: .86rem; }
.dropzone__browse { color: var(--accent-2); font-weight: 500; }
.intake__panel--drop:hover .dropzone__browse { text-decoration: underline; }

/* Chosen-file row: same box, same height -- Next never moves under the pointer. */
.dropzone__file {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
}
.dropzone__file[hidden] { display: none; }
.dropzone__file-icon { flex: none; display: inline-flex; color: var(--accent-2); }
.dropzone__file-text { flex: 1 1 auto; min-width: 0; }
.dropzone__file-name {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropzone__file-size { display: block; font-size: .78rem; color: var(--muted); }
.dropzone__clear {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.dropzone__clear:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: #2e323d; }
.dropzone__clear:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* The two halves are mutually exclusive: choosing a file dims the link panel rather
   than hiding it, so the card keeps its shape and the × puts it straight back. */
#url-field.is-off { opacity: .4; }
#url-field.is-off .input { pointer-events: none; }

.only-narrow { display: none; }

/* Narrow: stack the panels and lay the "or" on its side. */
@media (max-width: 640px) {
  .only-wide   { display: none; }
  .only-narrow { display: inline; }
  .intake { flex-direction: column; }
  .intake__panel { padding: 18px 16px; }
  .intake__or {
    flex-direction: row;
    width: 100%;
    padding: 12px 0;
  }
  .intake__or::before, .intake__or::after { width: auto; height: 1px; }
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
.progress {
  position: relative;
  width: 100%;
  height: 10px;
  margin: 6px 0 16px;
  border-radius: 999px;
  background: #20232c;
  overflow: hidden;
}
.progress__bar {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent-grad);
  transition: width .8s ease;
  will-change: width;
}
/* Moving shimmer on top of the fill */
.progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, .28) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
  will-change: background-position;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.eta {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  min-height: 1.4em;
}

/* ── Waiting orb (concentric pulsing rings) ────────────────────────────── */
.orb {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 6px 0 26px;
  display: grid;
  place-items: center;
}
.orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(124, 92, 255, .5);
  opacity: 0;
  transform: scale(.4);
  will-change: transform, opacity;
  animation: ring-pulse 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.orb__ring--2 { animation-delay: .8s;  border-color: rgba(91, 140, 255, .5); }
.orb__ring--3 { animation-delay: 1.6s; border-color: rgba(124, 92, 255, .4); }
.orb__core {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 28px rgba(124, 92, 255, .6);
  animation: core-breathe 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ring-pulse {
  0%   { transform: scale(.4); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes core-breathe {
  0%, 100% { transform: scale(.92); opacity: .9; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ── Success check ─────────────────────────────────────────────────────── */
.check { width: 88px; height: 88px; margin: 4px 0 24px; }
.check__svg { width: 100%; height: 100%; }
.check__circle {
  stroke: var(--success);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: draw-circle .6s ease forwards;
}
.check__mark {
  stroke: var(--success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw-mark .35s .55s ease forwards;
}
@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-mark   { to { stroke-dashoffset: 0; } }

/* ── Failure face ──────────────────────────────────────────────────────── */
.sad { color: var(--error); margin: 4px 0 22px; opacity: .9; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .shell { padding: 16px; align-items: stretch; }
  .card  { padding: 28px 22px; border-radius: var(--radius-md); }
  .card__title { font-size: 1.35rem; }
}

/* ── Animated waiting label (letter-by-letter reveal / hold / fade loop) ── */
#wait-label {
  min-height: 1.5em;
  white-space: nowrap;
}
#wait-label .ltr {
  display: inline-block;
  white-space: pre;                  /* preserve spaces between words */
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
#wait-label.is-in .ltr {
  opacity: 1;
  transform: translateY(0);
}
#wait-label.is-out .ltr {
  opacity: 0;
  transform: translateY(-.32em);
  transition: opacity .42s ease-in, transform .42s ease-in;
  transition-delay: 0s !important;   /* fade out all together */
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .progress__bar { transition: width .3s linear; }
  .progress__bar::after { animation: none; display: none; }
  .orb__ring { opacity: .5; transform: scale(.85); }
  .orb__core { opacity: 1; }
  .check__circle, .check__mark { stroke-dashoffset: 0; }
  .state { animation: none; }
  .state:not([hidden]) > * { animation: none !important; }
}

/* ==========================================================================
   QuranStudio — additions on top of the shared theme (wizard, language combo).
   Follows make-interfaces-feel-better: split+staggered enters, subtle exits,
   tabular-nums on live numbers, scale-on-press, concentric radii, 40px hits.
   ========================================================================== */

/* Crisper headings/body */
.card__title { text-wrap: balance; }
.card__subtitle, .review__value, .hint { text-wrap: pretty; }

/* ── Split & stagger the enter of each wizard step's children ─────────────── */
/* fill-mode MUST be `backwards`, not `both`: `both` keeps the final translateY(0)
   applied forever, turning every child into a stacking context — which lets the
   later-in-DOM nav row paint OVER the absolutely-positioned language dropdown. */
.state { animation: none; }                 /* stagger the children, not the box */
.state:not([hidden]) > * { animation: step-in .42s cubic-bezier(.2, .6, .3, 1) backwards; }
.state:not([hidden]) > *:nth-child(1) { animation-delay: 0s; }
.state:not([hidden]) > *:nth-child(2) { animation-delay: .06s; }
.state:not([hidden]) > *:nth-child(3) { animation-delay: .12s; }
.state:not([hidden]) > *:nth-child(4) { animation-delay: .18s; }
.state:not([hidden]) > *:nth-child(5) { animation-delay: .24s; }
.state:not([hidden]) > *:nth-child(6) { animation-delay: .30s; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle exit — softer than the enter (small fixed translateY, quick fade) */
.state.is-out {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.state.is-out > * { animation: none !important; }

/* ── Scale-on-press for tactile feedback (always 0.96) ───────────────────── */
.btn:active:not(:disabled) { transform: scale(.96); }

/* ── Wizard nav row (Back / Next) ─────────────────────────────────────────── */
.nav-row { display: flex; gap: 12px; margin-top: 6px; }
.nav-row .btn { flex: 1; margin-top: 0; }

/* ── Language combobox (type-to-search) ──────────────────────────────────── */
.combo { position: relative; }
.combo:focus-within { z-index: 40; }        /* open dropdown sits above the Back/Next row */
/* magnifier at the start, chevron button at the end; logical sides so Urdu (RTL)
   mirrors itself */
.combo .input { padding-inline: 40px 44px; }
.combo__icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;                       /* clicks fall through to the input */
}
.combo__toggle {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;                               /* min hit area */
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.combo__toggle:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.combo__toggle svg { transition: transform .2s ease; }
.combo__toggle[aria-expanded="true"] { color: var(--text); }
.combo__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .combo__toggle svg { transition: none; } }
.combo__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 288px;
  overflow-y: auto;
  padding: 6px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);            /* concentric: options use radius-sm inside */
  box-shadow: var(--shadow);
  z-index: 20;
}
.combo__group {
  padding: 10px 10px 4px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.combo__option {
  display: flex;
  align-items: center;
  min-height: 40px;                           /* min hit area */
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .96rem;
  cursor: pointer;
  transition: background .12s ease;
}
.combo__option:hover,
.combo__option.is-active {                    /* keyboard-highlighted */
  background: rgba(124, 92, 255, .14);
}
.combo__option[aria-selected="true"] { color: var(--accent-2); font-weight: 600; }
.combo__option-flag {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 3px;
  object-fit: contain;
}
/* language name — never wraps (flag and name must stay on one line). Shrinks only
   after the translator credit has already ellipsized away, then ellipsizes itself
   rather than overflowing, for the few very long language names. */
.combo__option-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
/* translator credit — present but understated, so it doesn't compete with the name.
   flex-shrinks and ellipsizes so long credits never overflow the panel width.
   High shrink factor: this absorbs essentially all row shrinkage, so the language
   name keeps its full width until the credit is gone. */
.combo__option-tr {
  color: var(--muted);
  opacity: .7;
  font-size: .82rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 100 auto;        /* shrink factor 100 -- see comment above */
  min-width: 0;
}
.combo__option[aria-selected="true"] .combo__option-tr { color: var(--muted); }
.combo__empty { padding: 14px 12px; text-align: center; color: var(--muted); font-size: .9rem; }

/* ── Review step (link + language summary) ───────────────────────────────── */
/* Embedded YouTube preview: responsive 16:9, concentric with the review items. */
.preview { margin: 4px 0 12px; }
.preview__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  outline: 1px solid rgba(255, 255, 255, .1);   /* pure-tone edge, no tint */
  outline-offset: -1px;
}
.preview__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ── Finished-video player on the done screen ────────────────────────────────
   radius-md inside the card's radius-lg, so the corners stay concentric. The
   1px pure-white outline (not a tinted border) reads as an edge on any frame
   without picking up the surface colour underneath. */
.preview-box {
  margin: 4px 0 14px;
  border-radius: var(--radius-md);
  overflow: hidden;                 /* clips the video's own square corners */
  background: #000;
  outline: 1px solid rgba(255, 255, 255, .1);
  outline-offset: -1px;
  line-height: 0;                   /* kills the inline-element gap under the video */
}
.preview-box__video {
  display: block;
  width: 100%;
  max-height: 46vh;                 /* a tall portrait render can't push the buttons away */
  background: #000;
}
.retention {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .88rem;
  text-wrap: pretty;                /* no orphan word on the second line */
}

.review { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; text-align: left; }
.review__item {
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.review__label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 5px;
}
.review__value { font-size: .98rem; color: var(--text); word-break: break-word; }
#review-lang { display: flex; align-items: center; gap: 8px; }
.review__flag { flex: none; width: 18px; height: 18px; border-radius: 3px; object-fit: contain; }

/* ── Progress bar (design copied 1:1 from DinVideo) ──────────────────────── */
.progress {
  position: relative;
  width: 100%;
  height: 10px;
  margin: 6px 0 16px;
  border-radius: 999px;
  background: #20232c;
  overflow: hidden;
}
.progress__bar {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent-grad);
  transition: none;          /* width is animated frame-by-frame in JS (continuous, no jumps) */
  will-change: width;
}
/* Moving shimmer on top of the fill */
.progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, .28) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
  will-change: background-position;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Live numbers never cause layout shift ───────────────────────────────── */
.eta, .queue-line, .queue-num { font-variant-numeric: tabular-nums; }
.queue-line { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--text); }
.queue-num  { color: var(--accent-2); }

/* ── Auth extras (links under the card) ──────────────────────────────────── */
.auth-links { margin: 16px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.auth-links a { color: var(--accent-2); text-decoration: none; font-weight: 500; }
.auth-links a:hover { text-decoration: underline; }
.chip--info {
  color: var(--accent-2);
  background: rgba(91, 140, 255, .1);
  border: 1px solid rgba(91, 140, 255, .28);
}
.field__error { color: var(--error); font-size: .82rem; margin-top: 2px; }

/* ── Subtitle font picker (state-style) ──────────────────────────────────── */
@font-face { font-family: "QV Montserrat"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QV Montserrat"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QV PT Sans"; src: url("../fonts/PTSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QV PT Sans"; src: url("../fonts/PTSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QV Raleway"; src: url("../fonts/Raleway-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QV Raleway"; src: url("../fonts/Raleway-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QV Manrope"; src: url("../fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QV Manrope"; src: url("../fonts/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QV Nunito"; src: url("../fonts/Nunito-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QV Nunito"; src: url("../fonts/Nunito-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QV Bebas Neue Cyrillic"; src: url("../fonts/Bebas Neue Cyrillic.ttf") format("truetype"); font-display: swap; }

.font-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.font-grid[hidden] { display: none; }

/* word-by-word highlight switch (style step) */
.wbw-toggle {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.wbw-toggle__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wbw-toggle__title { font-weight: 500; }
.wbw-toggle__hint { font-size: .82rem; color: var(--muted); }
.wbw-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wbw-toggle__track {
  flex: none; position: relative; width: 44px; height: 26px;
  border-radius: 999px; background: var(--border);
  transition: background .2s ease;
}
.wbw-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2, 0, 0, 1);
}
.wbw-toggle__input:checked + .wbw-toggle__track { background: var(--accent-1); }
.wbw-toggle__input:checked + .wbw-toggle__track .wbw-toggle__thumb { transform: translateX(18px); }
.wbw-toggle__input:focus-visible + .wbw-toggle__track { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .wbw-toggle__track, .wbw-toggle__thumb { transition: none; }
}

.font-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);           /* 14; inner name uses radius-sm */
  cursor: pointer;
  transition-property: border-color, background, transform, box-shadow;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.font-card:hover { border-color: var(--accent-1); }
.font-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.font-card:active { transform: scale(.985); }
.font-card[aria-checked="true"] {
  border-color: var(--accent-1);
  background: linear-gradient(135deg, rgba(124, 92, 255, .12), rgba(91, 140, 255, .10));
  box-shadow: var(--shadow-sm);
}
.font-card__preview {
  font-size: 1.18rem; line-height: 1.35; color: var(--text);
  text-wrap: balance;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.font-card__name {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.font-card[aria-checked="true"] .font-card__name { color: var(--accent-2); }
.font-card__check {
  margin-left: auto; width: 16px; height: 16px; flex: none;
  opacity: 0; transform: scale(.4); transition: opacity .16s, transform .16s cubic-bezier(.2,0,0,1);
}
.font-card[aria-checked="true"] .font-card__check { opacity: 1; transform: scale(1); }

/* ── Translation editions (inline under the language picker) ──────────────── */
.edition-wrap { margin-top: 14px; }
.edition-label {
  font-size: .78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.edition-options { display: flex; flex-direction: column; gap: 8px; }

.edition-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px;              /* comfortable hit area */
  padding: 10px 14px; text-align: left;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);            /* concentric with the card */
  color: var(--text); font: inherit; cursor: pointer;
  transition-property: border-color, background, transform, box-shadow;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  /* staggered enter: each button eased in after the one above */
  opacity: 0; transform: translateY(6px);
}
.edition-wrap.is-in .edition-btn {
  animation: edition-in .34s cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes edition-in { to { opacity: 1; transform: translateY(0); } }

.edition-btn:hover { border-color: var(--accent-1); }
.edition-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.edition-btn:active { transform: scale(.97); }
.edition-btn[aria-checked="true"] {
  border-color: var(--accent-1);
  background: linear-gradient(135deg, rgba(124, 92, 255, .12), rgba(91, 140, 255, .10));
  box-shadow: var(--shadow-sm);
}
.edition-btn__name { flex: 1 1 auto; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edition-btn__rec {
  flex: none; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-2);
  background: rgba(91, 140, 255, .12);
  border-radius: 999px; padding: 3px 8px;
}
/* respect reduced-motion: appear instantly, no slide/stagger */
@media (prefers-reduced-motion: reduce) {
  .edition-wrap.is-in .edition-btn { animation: none; }
  .edition-btn { opacity: 1; transform: none; }
}

/* ── Style step: live preview, background, preset gallery ─────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.spv { position: relative; margin: 0 auto 12px; width: 100%; }
.spv__frame {
  position: relative; width: 100%; max-height: 56vh; aspect-ratio: 16 / 9;
  margin: 0 auto; overflow: hidden; background: #000;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* a portrait frame is limited by height, so it gets narrow instead of very tall */
.spv__frame.is-portrait { width: auto; height: min(56vh, 520px); max-width: 100%; }
.spv__bg, .spv__still, .spv__subs {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.spv__bg, .spv__still { object-fit: cover; }
.spv__bg.is-clock { opacity: 0; }         /* still background: the video only keeps time */
.spv__still[hidden] { display: none; }
.spv__subs { pointer-events: none; }
.spv__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: .85rem;
}
.spv__loading[hidden] { display: none; }
.spv__play {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
}
.spv__play:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.spv__icon-play { display: none; }
.spv.is-paused .spv__icon-play { display: block; }
.spv.is-paused .spv__icon-pause { display: none; }
.spv-note { margin: 0 0 12px; font-size: .82rem; color: var(--muted); text-align: center; }
.spv-note[hidden] { display: none; }

.style-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.style-controls .wbw-toggle { margin-bottom: 0; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.seg__opt {
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-weight: 500;
}
.seg__opt[aria-checked="true"] { background: var(--accent-1); color: #fff; }
.seg__opt:disabled { cursor: not-allowed; opacity: .45; }
.seg__opt:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.seg__hint { margin: -2px 2px 0; font-size: .8rem; color: var(--muted); }
.seg__hint[hidden] { display: none; }

.preset-gallery {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 10px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.preset-card {
  flex: none; width: 132px; padding: 6px; cursor: pointer; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font: inherit;
}
.preset-card.is-portrait { width: 92px; }
.preset-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000;
}
.preset-card.is-portrait img { aspect-ratio: 9 / 16; }
.preset-card__name { font-size: .82rem; font-weight: 500; }
.preset-card[aria-checked="true"] { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1); }
.preset-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.font-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.font-pick[hidden] { display: none; }
.font-pick__label { font-size: .88rem; color: var(--muted); }
.font-pick__select {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text);
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}

@media (max-width: 520px) {
  .spv__frame.is-portrait { height: min(50vh, 440px); }
  .preset-card { width: 112px; }
  .preset-card.is-portrait { width: 80px; }
}