/* id8 Free Subtitle Generator — page styles (.fsg). id8 UI v2 tokens only (assets/css/id8-ui.css).
   Mobile first (390 wide artboards); desktop from 960 px (1440 wide artboards): a 1000 px card, a
   330 px sticky preview column on the Words / Style / Ready screens.
   Subtitle colours inside the video preview are content, not UI, and live in subtitle-engine.js. */

.fsg-body {
    background: var(--id8-bg);
    color: var(--id8-ink);
    font-family: 'Atkinson Hyperlegible', 'Noto Sans Devanagari', 'Segoe UI', system-ui, sans-serif;
    margin: 0;
}
.fsg-body svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.fsg-desk { display: none; }
.fsg-deskhead { display: none; }
.fsg-mob { display: inline; }
[hidden] { display: none !important; }

/* ── Top: header + stepper ─────────────────────────────────────────────── */
.fsg-top { position: sticky; top: 0; z-index: 30; background: var(--id8-surface); }
.fsg-stepbar { background: var(--id8-surface); border-bottom: 1px solid var(--id8-border); }
.fsg-stepper { display: flex; align-items: flex-start; padding: 12px 6px 10px; max-width: 1000px; margin: 0 auto; }
.fsg-step { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; flex-shrink: 0; color: var(--id8-ink-muted); text-decoration: none; }
.fsg-step__dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--id8-border-control); background: var(--id8-surface); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--id8-ink-muted); }
.fsg-step__dot svg { width: 16px; height: 16px; stroke-width: 3; }
.fsg-step__txt { display: flex; flex-direction: column; align-items: center; }
.fsg-step__sub { display: none; }
.fsg-step__name { font-size: 13px; text-align: center; }
.fsg-step.is-current .fsg-step__dot { background: var(--id8-primary); border-color: var(--id8-primary); color: #fff; box-shadow: 0 0 0 5px var(--id8-primary-tint); }
.fsg-step.is-current .fsg-step__name { color: var(--id8-primary); font-weight: 700; }
.fsg-step.is-done .fsg-step__dot { background: var(--id8-chosen); border-color: var(--id8-chosen); color: #fff; }
.fsg-step.is-done .fsg-step__name { color: var(--id8-chosen-ink); font-weight: 700; }
.fsg-step.is-skipped .fsg-step__dot { border-style: dashed; }
.fsg-step__line { flex-grow: 1; height: 3px; border-radius: 2px; background: var(--id8-border); margin-top: 14px; min-width: 6px; }
a.fsg-step:hover .fsg-step__name { text-decoration: underline; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.fsg { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
.fsg-has-bar .fsg { padding-bottom: 120px; }
.fsg-hero { width: 100%; box-sizing: border-box; padding: 18px 16px 4px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.fsg-hero h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.fsg-hero__lead { margin: 0; font-size: 17px; color: var(--id8-ink-muted); line-height: 1.4; }
.fsg-view { width: 100%; box-sizing: border-box; }
.fsg-card { box-sizing: border-box; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 14px; }
.fsg-head { display: flex; flex-direction: column; gap: 6px; }
.fsg-head h2, .fsg-card h2 { margin: 0; font-size: 26px; line-height: 1.15; }
.fsg-kicker { font-size: 16px; font-weight: 700; color: var(--id8-chosen-ink); }
.fsg-lead { margin: 0; font-size: 17px; line-height: 1.45; color: var(--id8-ink-muted); }
.fsg-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fsg-card h3 { margin: 8px 0 0; font-size: 18px; }
.fsg-hint, .fsg-note { margin: 0; font-size: 15px; color: var(--id8-ink-muted); line-height: 1.4; }
.fsg-privacy { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; margin: 4px 0 0; }
.fsg-privacy svg { color: var(--id8-chosen); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.fsg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 2px solid transparent; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.fsg-btn--primary { background: var(--id8-primary); color: #fff; }
.fsg-btn--primary:hover { background: var(--id8-primary-hover); }
.fsg-btn--secondary { background: var(--id8-surface); color: var(--id8-ink); border-color: var(--id8-border-strong); }
.fsg-btn--secondary:hover { border-color: var(--id8-ink-muted); }
.fsg-btn--ghost { background: transparent; color: var(--id8-ink); border-color: var(--id8-border-strong); }
.fsg-btn--tool { min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--id8-surface); color: var(--id8-ink); border-color: var(--id8-border-strong); font-size: 16px; }
.fsg-btn--tool.is-on { border-color: var(--id8-primary); color: var(--id8-primary); background: var(--id8-primary-tint); }
.fsg-btn--danger { background: var(--id8-danger); color: #fff; }
.fsg-btn--dangertext { color: var(--id8-danger); }
.fsg-btn--whatsapp { background: var(--id8-chosen); color: #fff; }
.fsg-btn--xl { width: 100%; min-height: 72px; border-radius: 16px; font-size: 21px; box-shadow: 0 6px 18px rgb(var(--id8-primary-rgb) / 0.3); }
.fsg-btn--wide { width: 100%; min-height: 56px; }
.fsg-btn--sm { min-height: 44px; padding: 0 14px; font-size: 16px; border-radius: 12px; }
.fsg-btn:disabled { background: var(--id8-surface-sunken); color: var(--id8-ink-muted); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.fsg-btn.is-busy { opacity: 0.8; cursor: progress; }
.fsg-btn.is-done { border-color: var(--id8-chosen); color: var(--id8-chosen-ink); }
.fsg-iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--id8-border); background: var(--id8-surface); color: var(--id8-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.fsg-link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: 17px; font-weight: 700; color: var(--id8-primary); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fsg-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--id8-chosen-tint); border: 2px solid var(--id8-chosen); color: var(--id8-chosen-ink); font: inherit; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.fsg-chip svg { width: 18px; height: 18px; }

/* ── Bottom action bar ────────────────────────────────────────────────── */
.fsg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--id8-surface); border-top: 1px solid var(--id8-border); box-shadow: 0 -4px 16px rgb(var(--id8-ink-rgb) / 0.08); padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.fsg-bar__in { display: flex; align-items: center; gap: 10px; max-width: 1000px; margin: 0 auto; }
.fsg-bar__in > .fsg-btn:last-child { flex-grow: 1; min-height: 56px; }
.fsg-bar__in > span:empty { display: none; }
.fsg-btn--icononly { width: 56px; min-height: 56px; padding: 0; flex-shrink: 0; }
.fsg-btn--icononly span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Step 1 ───────────────────────────────────────────────────────────── */
.fsg-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fsg-drop.is-over { outline: 3px dashed var(--id8-primary); outline-offset: 6px; border-radius: 18px; }
.fsg-drop__icon { width: 64px; height: 64px; border-radius: 16px; background: var(--id8-primary-tint); color: var(--id8-primary); align-items: center; justify-content: center; }
.fsg-drop__icon svg { width: 32px; height: 32px; }
.fsg-drop__title { font-size: 22px; font-weight: 700; }
.fsg-file { border: 3px solid var(--id8-chosen); background: var(--id8-chosen-tint); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fsg-file__row { display: flex; align-items: center; gap: 14px; }
.fsg-file__thumb { width: 64px; height: 104px; object-fit: cover; border-radius: 10px; display: block; flex-shrink: 0; background: var(--id8-ink); }
.fsg-file__audio { width: 64px; height: 64px; border-radius: 12px; background: var(--id8-primary-tint); color: var(--id8-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fsg-file__audio svg { width: 30px; height: 30px; }
.fsg-file__meta { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fsg-file__ok { font-size: 15px; font-weight: 700; color: var(--id8-chosen-ink); display: flex; align-items: center; gap: 6px; }
.fsg-file__ok svg { width: 16px; height: 16px; stroke-width: 3; }
.fsg-file__name { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsg-file__size { font-size: 16px; color: var(--id8-ink-muted); }
.fsg-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--id8-warn-bg); border: 2px solid var(--id8-warn-border); }
.fsg-alert p { margin: 0; font-size: 16px; line-height: 1.45; }
.fsg-alert__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--id8-error); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fsg-alert__icon svg { stroke-width: 3.2; width: 20px; height: 20px; }
.fsg-limit { border: 2px solid var(--id8-border-strong); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--id8-surface); }
.fsg-limit h3 { margin: 0; font-size: 21px; }
.fsg-limit p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--id8-ink-muted); }
.fsg-banner { margin: 14px 16px 0; padding: 14px; border-radius: 16px; background: var(--id8-info-tint); border: 2px solid var(--id8-info); display: flex; flex-direction: column; gap: 10px; }
.fsg-banner > div > strong { display: block; font-size: 17px; }
.fsg-banner > div > span { font-size: 15px; color: var(--id8-ink-muted); }
.fsg-banner__acts { display: flex; gap: 10px; }
.fsg-repick { display: flex; flex-direction: column; gap: 12px; }
.fsg-repick p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--id8-ink-muted); }

.fsg-tip { text-align: left; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--id8-info-tint); border: 2px solid var(--id8-info); color: var(--id8-ink); font-size: 16px; line-height: 1.45; }
.fsg-tip svg { color: var(--id8-info); width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px; }
.fsg-tip strong { display: block; font-size: 19px; line-height: 1.3; margin-bottom: 2px; }
.fsg-engine { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--id8-ink-muted); }
.fsg-engine.is-ready { color: var(--id8-chosen-ink); font-weight: 700; }
.fsg-engine.is-ready svg { width: 18px; height: 18px; stroke-width: 3; }
.fsg-engine__spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--id8-primary); border-top-color: transparent; flex-shrink: 0; animation: fsg-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .fsg-engine__spin { animation: none; } }

/* ── Step 2 ───────────────────────────────────────────────────────────── */
.fsg-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fsg-lang { position: relative; min-height: 76px; border-radius: 14px; border: 2px solid var(--id8-border); background: var(--id8-surface); padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font: inherit; cursor: pointer; text-align: left; color: var(--id8-ink); }
.fsg-lang__native { font-size: 21px; font-weight: 700; }
.fsg-lang__en { font-size: 15px; color: var(--id8-ink-muted); }
.fsg-lang__tick { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--id8-chosen); color: #fff; display: none; align-items: center; justify-content: center; }
.fsg-lang__tick svg { width: 15px; height: 15px; stroke-width: 3; }
.fsg-lang.is-on { border: 3px solid var(--id8-chosen); background: var(--id8-chosen-tint); }
.fsg-lang.is-on .fsg-lang__tick { display: flex; }
.fsg-tag { font-size: 12px; font-weight: 700; color: var(--id8-chosen-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.fsg-dl, .fsg-hindi { border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.fsg-dl { background: var(--id8-info-tint); border: 2px solid var(--id8-info); }
.fsg-hindi { background: var(--id8-surface-sunken); }
.fsg-dl p, .fsg-hindi p { margin: 0; font-size: 16px; line-height: 1.45; }
.fsg-hindi__eg { font-size: 22px !important; font-weight: 700; }
.fsg-ready { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; color: var(--id8-chosen-ink); }

/* ── Working / making ─────────────────────────────────────────────────── */
.fsg-work__grid { display: flex; flex-direction: column; gap: 16px; }
.fsg-work__media { display: flex; justify-content: center; }
.fsg-work__media img { width: 120px; max-height: 200px; object-fit: cover; border-radius: 12px; border: 3px solid var(--id8-ink); }
.fsg-work__main { display: flex; flex-direction: column; gap: 14px; }
.fsg-progress__nums { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fsg-progress__nums strong { font-size: 32px; color: var(--id8-primary); }
.fsg-progress__nums span { font-size: 16px; color: var(--id8-ink-muted); }
.fsg-progress__track { height: 14px; border-radius: 7px; background: var(--id8-surface-sunken); overflow: hidden; }
.fsg-progress__track span { display: block; height: 100%; background: var(--id8-primary); border-radius: 7px; transition: width 0.6s ease; }
.fsg-progress__track.is-busy span { width: 40%; transition: none; animation: fsg-busy 1.4s ease-in-out infinite alternate; }
@keyframes fsg-busy { from { transform: translateX(0); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .fsg-progress__track.is-busy span { animation: none; width: 100%; opacity: 0.45; } }
.fsg-warm { display: flex; align-items: center; gap: 8px; }
.fsg-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fsg-stage { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; }
.fsg-stage strong { display: block; font-weight: 400; }
.fsg-stage small { display: block; font-size: 14px; color: var(--id8-ink-muted); }
.fsg-stage__dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--id8-border); box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fsg-stage__dot svg { width: 14px; height: 14px; stroke-width: 3.2; }
.fsg-stage.is-done .fsg-stage__dot { background: var(--id8-chosen); border-color: var(--id8-chosen); color: #fff; }
.fsg-stage.is-now .fsg-stage__dot { border-color: var(--id8-primary); border-top-color: transparent; animation: fsg-spin 0.9s linear infinite; }
.fsg-stage.is-now strong { font-weight: 700; }
.fsg-stage.is-todo { color: var(--id8-ink-muted); }
@keyframes fsg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fsg-stage.is-now .fsg-stage__dot { animation: none; border-top-color: var(--id8-primary); } }
.fsg-live { background: var(--id8-surface-sunken); border-radius: 14px; padding: 12px 14px; }
.fsg-live span { font-size: 14px; font-weight: 700; color: var(--id8-ink-muted); }
.fsg-live p { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.fsg-keep { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--id8-warn-bg); font-size: 15px; line-height: 1.4; }

/* ── Failed blocks ────────────────────────────────────────────────────── */
.fsg-fail { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.fsg-fail__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--id8-error); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--id8-error-halo); }
.fsg-fail__icon svg { width: 36px; height: 36px; stroke-width: 3.2; }
.fsg-saved { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--id8-chosen-ink); }
.fsg-tips { width: 100%; box-sizing: border-box; text-align: left; background: var(--id8-surface-sunken); border-radius: 14px; padding: 14px; }
.fsg-tips ul { margin: 6px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.fsg-fail__acts { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.fsg-fail__acts .fsg-btn { width: 100%; min-height: 56px; }

/* ── Words step ───────────────────────────────────────────────────────── */
.fsg-words.fsg-card, .fsg-style.fsg-card { padding: 0 0 8px; gap: 0; }
.fsg-split { display: flex; flex-direction: column; }
.fsg-split__main { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fsg-media { position: sticky; top: var(--fsg-top, 112px); z-index: 5; display: flex; gap: 12px; align-items: stretch; padding: 12px 16px; background: var(--id8-surface); border-bottom: 1px solid var(--id8-border); box-shadow: 0 2px 8px rgb(var(--id8-ink-rgb) / 0.06); }
.fsg-media [data-slot="player"], .fsg-audio-art { width: 104px; flex-shrink: 0; }
.fsg-audio-art { height: 104px; border-radius: 12px; background: var(--id8-primary-tint); color: var(--id8-primary); display: flex; align-items: center; justify-content: center; }
.fsg-audio-art svg { width: 40px; height: 40px; }
.fsg-media__side { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.fsg-media__side .fsg-kicker { font-size: 14px; }
.fsg-media__side h2 { font-size: 22px; }
.fsg-media__side .fsg-lead { font-size: 14px; line-height: 1.35; }
.fsg-media__label { margin: 0; font-size: 15px; font-weight: 700; color: var(--id8-ink-muted); }
.fsg-frame { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #000; border: 3px solid var(--id8-ink); box-sizing: border-box; }
.fsg-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.fsg-frame__overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.fsg-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
.fsg-play { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--id8-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.fsg-play svg { width: 20px; height: 20px; stroke: none; }
.fsg-transport__bar { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fsg-transport__bar input { width: 100%; accent-color: var(--id8-primary); margin: 0; }
.fsg-transport__bar span { font-size: 14px; color: var(--id8-ink-muted); }
.fsg-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.fsg-listinfo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 0; font-size: 15px; color: var(--id8-ink-muted); }
.fsg-legend { margin: 0; font-size: 14px; color: var(--id8-ink-muted); }
.fsg-unsure { text-decoration: underline dotted var(--id8-error); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fsg-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fsg-line { border-radius: 14px; border: 2px solid var(--id8-border); background: var(--id8-surface); }
.fsg-line__btn { width: 100%; min-height: 56px; display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; background: none; border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; border-radius: 12px; }
.fsg-line__time { font-size: 14px; font-weight: 700; color: var(--id8-ink-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 34px; }
.fsg-line__text { font-size: 18px; line-height: 1.45; }
.fsg-line__text mark { background: #FFE58A; color: inherit; border-radius: 3px; padding: 0 1px; }
.fsg-line[aria-current] { border-color: var(--id8-chosen); background: var(--id8-chosen-tint); }
.fsg-line[aria-current] .fsg-line__time { color: var(--id8-chosen-ink); }
.fsg-line.is-editing { border: 3px solid var(--id8-primary); background: var(--id8-primary-tint); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fsg-line.is-editing label, .fsg-line.is-empty label, .fsg-find label { font-size: 14px; font-weight: 700; color: var(--id8-ink-muted); }
.fsg-line__edithead { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 700; color: var(--id8-primary); }
.fsg-input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--id8-border-control); background: var(--id8-surface); font: inherit; font-size: 18px; color: var(--id8-ink); }
.fsg-input:focus { outline: 3px solid var(--id8-primary); outline-offset: 1px; border-color: var(--id8-primary); }
.fsg-line__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fsg-timing summary { font-size: 15px; font-weight: 700; cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.fsg-timing__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fsg-timing__rows > div { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.fsg-timing__rows span { flex-grow: 1; font-variant-numeric: tabular-nums; }
.fsg-line.is-empty { border: 2px dashed var(--id8-error); padding: 12px 14px; display: flex; gap: 12px; }
.fsg-line__edit { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.fsg-warn { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--id8-error); }
.fsg-find { border-radius: 14px; border: 2px solid var(--id8-border-strong); background: var(--id8-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fsg-find__head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.fsg-find__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--id8-ink-muted); flex-wrap: wrap; }

/* ── Output choice ────────────────────────────────────────────────────── */
.fsg-done { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 700; color: var(--id8-chosen-ink); }
.fsg-done svg { width: 18px; height: 18px; stroke-width: 3; }
.fsg-choices { display: flex; flex-direction: column; gap: 12px; }
.fsg-choice { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 2px solid var(--id8-border-strong); background: var(--id8-surface); font: inherit; text-align: left; cursor: pointer; color: var(--id8-ink); }
.fsg-choice:hover { border-color: var(--id8-primary); }
.fsg-choice__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--id8-primary-tint); color: var(--id8-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fsg-choice__body { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.fsg-choice__body strong { font-size: 19px; }
.fsg-choice__body span { font-size: 15px; color: var(--id8-ink-muted); line-height: 1.4; }
.fsg-choice__body small { font-size: 14px; font-weight: 700; color: var(--id8-chosen-ink); }
.fsg-info { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--id8-info-tint); font-size: 16px; line-height: 1.45; }

/* ── Style step ───────────────────────────────────────────────────────── */
.fsg-media--style { flex-wrap: wrap; }
.fsg-media--style [data-slot="player"] { width: 140px; }
.fsg-media--style .fsg-media__label, .fsg-media--style > .fsg-hint { width: 100%; }
.fsg-wmnote { width: 100%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; min-height: 44px; border-radius: 12px; font-size: 15px; box-sizing: border-box; background: var(--id8-surface-sunken); color: var(--id8-ink-muted); }
.fsg-wmbadge { border: 2px solid currentColor; border-radius: 4px; padding: 0 4px; font-size: 12px; }
.fsg-flash { margin: 14px 16px 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--id8-chosen-tint); border: 2px solid var(--id8-chosen); font-size: 16px; font-weight: 700; color: var(--id8-chosen-ink); }
.fsg-tabs { display: flex; gap: 2px; padding: 4px; background: var(--id8-surface-sunken); border-radius: 14px; }
.fsg-tab { flex: 1; min-width: 0; min-height: 48px; padding: 0 2px; border-radius: 10px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--id8-ink-muted); cursor: pointer; white-space: nowrap; }
.fsg-tab.is-on { background: var(--id8-surface); color: var(--id8-ink); box-shadow: 0 1px 4px rgb(var(--id8-ink-rgb) / 0.15); }
.fsg-panel { display: flex; flex-direction: column; gap: 10px; }
.fsg-panel[data-on="false"] { display: none; }
.fsg-panel h3 { margin: 6px 0 0; font-size: 17px; }
.fsg-change { display: none; }
.fsg-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fsg-preset { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; font: inherit; cursor: pointer; color: var(--id8-ink); }
.fsg-preset__frame { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; border: 3px solid var(--id8-border); background-color: #3A4655; background-size: cover; background-position: center; }
.fsg-preset__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fsg-preset__tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--id8-chosen); color: #fff; display: none; align-items: center; justify-content: center; }
.fsg-preset__tick svg { width: 15px; height: 15px; stroke-width: 3; }
.fsg-preset.is-on .fsg-preset__frame { border-color: var(--id8-chosen); box-shadow: 0 0 0 3px var(--id8-chosen-tint); }
.fsg-preset.is-on .fsg-preset__tick { display: flex; }
.fsg-preset__name { font-size: 16px; font-weight: 700; }
.fsg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--id8-surface-sunken); border-radius: 14px; padding: 5px; }
.fsg-seg__btn { min-height: 48px; border-radius: 10px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--id8-ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.fsg-seg__btn.is-on { background: var(--id8-surface); color: var(--id8-ink); box-shadow: 0 1px 4px rgb(var(--id8-ink-rgb) / 0.15); }
.fsg-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.fsg-switchrow strong { display: block; font-size: 17px; }
.fsg-switchrow span { font-size: 15px; color: var(--id8-ink-muted); line-height: 1.4; }
.fsg-switch { position: relative; width: 56px; height: 32px; border-radius: 16px; border: 0; background: var(--id8-border-control); flex-shrink: 0; cursor: pointer; padding: 0; }
.fsg-switch span { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.fsg-switch[aria-checked="true"] { background: var(--id8-chosen); }
.fsg-switch[aria-checked="true"] span { transform: translateX(24px); }
.fsg-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.fsg-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fsg-font { min-height: 64px; border-radius: 12px; border: 2px solid var(--id8-border); background: var(--id8-surface); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 8px 12px; cursor: pointer; color: var(--id8-ink); font-size: 17px; font-weight: 800; }
.fsg-font__eg { font-size: 15px; color: var(--id8-ink-muted); }
.fsg-font.is-on { border: 3px solid var(--id8-chosen); background: var(--id8-chosen-tint); }
.fsg-size { display: flex; align-items: center; gap: 10px; }
.fsg-range { flex-grow: 1; accent-color: var(--id8-chosen); height: 32px; }
.fsg-size__labels { display: flex; justify-content: space-between; font-size: 14px; color: var(--id8-ink-muted); padding: 0 54px; }
.fsg-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.fsg-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--id8-ink-muted); min-width: 48px; }
.fsg-swatch__dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--id8-border-control); box-sizing: border-box; }
.fsg-swatch__name { font-size: 13px; }
.fsg-swatch.is-on .fsg-swatch__dot { box-shadow: 0 0 0 3px var(--id8-surface), 0 0 0 6px var(--id8-chosen); }
.fsg-swatch.is-on .fsg-swatch__name { color: var(--id8-chosen-ink); font-weight: 700; }
.fsg-hls, .fsg-bgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fsg-hl, .fsg-bg { min-height: 76px; border-radius: 12px; border: 2px solid var(--id8-border); background: #3A4655; color: #fff; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; }
.fsg-hl > span:last-child, .fsg-bg > span:last-child { font-size: 14px; font-weight: 700; color: #fff; }
.fsg-hl__eg, .fsg-bg__eg { font-family: 'FSG Poppins 800', 'Noto Sans Devanagari', sans-serif; font-size: 17px; }
.fsg-hl.is-on, .fsg-bg.is-on { border: 3px solid var(--id8-chosen); box-shadow: 0 0 0 3px var(--id8-chosen-tint); }

/* ── Download words ───────────────────────────────────────────────────── */
.fsg-fmts { display: flex; flex-direction: column; gap: 10px; }
.fsg-fmt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 2px solid var(--id8-border); background: var(--id8-surface); font: inherit; text-align: left; cursor: pointer; color: var(--id8-ink); }
.fsg-fmt__body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.fsg-fmt__body strong { font-size: 17px; }
.fsg-fmt__body span { font-size: 15px; color: var(--id8-ink-muted); }
.fsg-fmt__ext { font-size: 15px; font-weight: 700; color: var(--id8-ink-muted); font-family: ui-monospace, monospace; }
.fsg-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--id8-border-control); box-sizing: border-box; flex-shrink: 0; }
.fsg-fmt.is-on { border: 3px solid var(--id8-chosen); background: var(--id8-chosen-tint); }
.fsg-fmt.is-on .fsg-radio { border: 7px solid var(--id8-chosen); }
.fsg-sample { border-radius: 14px; background: var(--id8-surface-sunken); padding: 12px 14px; }
.fsg-sample__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fsg-sample pre { margin: 10px 0 0; white-space: pre-wrap; font-size: 15px; line-height: 1.5; font-family: ui-monospace, 'Noto Sans Devanagari', monospace; max-height: 260px; overflow: auto; }

/* ── Ready ────────────────────────────────────────────────────────────── */
.fsg-ready .fsg-media { position: static; justify-content: center; box-shadow: none; }
.fsg-result { width: 100%; max-width: 330px; max-height: 70vh; border-radius: 12px; background: #000; border: 3px solid var(--id8-ink); }
.fsg-ready__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fsg-ready__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--id8-chosen); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--id8-chosen-tint); }
.fsg-ready__icon svg { width: 32px; height: 32px; stroke-width: 3; }
.fsg-ready__main, .fsg-ready__more { display: flex; flex-direction: column; gap: 10px; }
.fsg-ready__more .fsg-btn { width: 100%; justify-content: flex-start; }
.fsg-upsell { border-radius: 14px; background: var(--id8-primary-tint); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fsg-upsell p { margin: 0; font-size: 16px; line-height: 1.45; }

/* ── Sheet (dialog / bottom sheet) ────────────────────────────────────── */
.fsg-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.fsg-sheet__scrim { position: absolute; inset: 0; background: var(--id8-backdrop); }
.fsg-sheet__card { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-sizing: border-box; background: var(--id8-surface); border-radius: 22px 22px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.fsg-sheet__card h2 { margin: 0 48px 0 0; font-size: 24px; }
.fsg-sheet__card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--id8-ink-muted); }
.fsg-sheet__close { position: absolute; top: 14px; right: 14px; }
.fsg-sheet-open { overflow: hidden; }
.fsg-perks { display: flex; flex-direction: column; gap: 8px; }
.fsg-perk { border-radius: 14px; background: var(--id8-surface-sunken); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fsg-perk strong { font-size: 17px; }
.fsg-perk span { font-size: 15px; color: var(--id8-ink-muted); }

/* ── SEO content ──────────────────────────────────────────────────────── */
.fsg-seo { width: 100%; box-sizing: border-box; padding: 24px 16px 8px; max-width: 1000px; }
.fsg-seo h2 { font-size: 22px; margin: 22px 0 10px; }
.fsg-seo p, .fsg-seo li { font-size: 17px; line-height: 1.55; color: var(--id8-ink); }
.fsg-seo__steps { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.fsg-faq details { border-bottom: 1px solid var(--id8-border); padding: 12px 0; }
.fsg-faq summary { font-size: 18px; font-weight: 700; cursor: pointer; min-height: 32px; }
.fsg-faq p { margin: 8px 0 0; color: var(--id8-ink-muted); }

/* ── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
    .fsg-desk { display: inline; }
    .fsg-deskhead { display: block; }
    .fsg-mob { display: none; }
    .fsg-drop__icon { display: flex; }
    .fsg-stepper { padding: 16px 0; gap: 12px; align-items: center; }
    .fsg-step { flex-direction: row; width: auto; gap: 10px; }
    .fsg-step__dot { width: 40px; height: 40px; font-size: 18px; }
    .fsg-step__txt { align-items: flex-start; gap: 2px; }
    .fsg-step__sub { display: block; font-size: 13px; font-weight: 700; color: var(--id8-ink-muted); }
    .fsg-step.is-current .fsg-step__sub { color: var(--id8-primary); }
    .fsg-step.is-done .fsg-step__sub { color: var(--id8-chosen-ink); }
    .fsg-step__name { font-size: 18px; color: var(--id8-ink); }
    .fsg-step.is-current .fsg-step__name { color: var(--id8-ink); }
    .fsg-step__line { margin-top: 0; min-width: 16px; }
    .fsg { padding-top: 28px; gap: 24px; }
    .fsg-hero { width: 1000px; padding: 4px 0 0; gap: 10px; }
    .fsg-hero h1 { font-size: 44px; line-height: 1.1; }
    .fsg-hero__lead { font-size: 20px; max-width: 760px; margin: 0 auto; }
    .fsg-view { width: 1000px; }
    .fsg-card { background: var(--id8-surface); border: 1px solid var(--id8-border); border-radius: 22px; padding: 40px; gap: 24px; box-shadow: 0 2px 8px rgb(var(--id8-ink-rgb) / 0.05); }
    .fsg-head h2, .fsg-card h2 { font-size: 34px; }
    .fsg-kicker { font-size: 17px; }
    .fsg-lead { font-size: 19px; }
    .fsg-drop { border: 2px dashed var(--id8-border-strong); border-radius: 18px; background: var(--id8-surface-drop); padding: 36px 24px; gap: 14px; }
    .fsg-drop .fsg-btn--xl { width: auto; min-height: 60px; padding: 0 32px; font-size: 20px; }
    .fsg-langs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .fsg-lang { min-height: 92px; padding: 16px 18px; }
    .fsg-banner { margin: 0 0 16px; flex-direction: row; align-items: center; justify-content: space-between; }
    .fsg-bar { padding: 18px 0; }
    .fsg-bar__in > .fsg-btn:last-child { flex-grow: 0; min-height: 60px; padding: 0 32px; font-size: 20px; }
    .fsg-bar__in { justify-content: space-between; }
    .fsg-bar__in > span:empty { display: block; }
    .fsg-btn--icononly { width: auto; padding: 0 18px; }
    .fsg-btn--icononly span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .fsg-words.fsg-card, .fsg-style.fsg-card { padding: 40px; gap: 24px; }
    .fsg-split { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: start; }
    .fsg-split__main { padding: 0; }
    .fsg-media { position: sticky; top: calc(var(--fsg-top, 150px) + 16px); flex-direction: column; align-items: center; gap: 14px; background: var(--id8-surface-sunken); border-radius: 18px; padding: 20px; border: 0; box-shadow: none; }
    .fsg-media [data-slot="player"] { width: 100%; max-width: 290px; }
    .fsg-media [data-slot="player"]:has(.is-wide) { max-width: 100%; }
    .fsg-audio-art { width: 100%; height: 180px; }
    .fsg-media__side { width: 100%; }
    .fsg-media__side .fsg-head { display: none; }
    .fsg-split__main::before { content: none; }
    .fsg-words .fsg-split__main > .fsg-tools { margin-top: 0; }
    .fsg-change { display: block; margin: 18px 0 0; font-size: 22px; }
    .fsg-panel[data-on="false"] { display: flex; }
    .fsg-panel + .fsg-panel { border-top: 1px solid var(--id8-border); padding-top: 14px; }
    .fsg-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fsg-fonts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .fsg-hls { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .fsg-bgs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fsg-choices { flex-direction: row; }
    .fsg-choice { flex: 1; flex-direction: column; align-items: flex-start; padding: 22px; }
    .fsg-choice > svg { display: none; }
    .fsg-work__grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 48px; align-items: center; }
    .fsg-work__media img { width: 240px; max-height: 420px; }
    .fsg-fail { padding: 20px 60px; }
    .fsg-fail__acts { width: 380px; }
    .fsg-ready__head { align-items: flex-start; text-align: left; }
    .fsg-ready__main { flex-direction: row; }
    .fsg-ready__main .fsg-btn { flex: 1; }
    .fsg-sheet { align-items: center; }
    .fsg-sheet__card { border-radius: 22px; padding: 28px; }
    .fsg-seo { padding: 8px 0 24px; }
    .fsg-seo h2 { font-size: 26px; }
}