:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --ink: #1b2130;
  --muted: #5d6475;
  --line: #e3e6ee;
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --ok: #059669;
  --warn: #b45309;
  --err: #b91c1c;
  --radius: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Nirmala UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 800; font-size: 20px; color: var(--ink); white-space: nowrap; }
.brand span { color: var(--brand); font-weight: 600; }
#nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#nav a { color: var(--ink); font-weight: 500; white-space: nowrap; }
#nav a.btn { color: #fff; padding: 8px 14px; }

main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; min-height: 70vh; }
.footer { display: flex; gap: 20px; justify-content: center; padding: 24px; color: var(--muted); border-top: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }

h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: 26px; margin: 32px 0 12px; }
h3 { margin: 0 0 6px; }
.lead { font-size: 19px; color: var(--muted); max-width: 720px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }

.hero { text-align: center; padding: 40px 0 24px; }
.hero .lead { margin: 0 auto 24px; }

.btn { display: inline-block; border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; background: var(--brand); color: #fff; }
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn.secondary { background: #e8e9f3; color: var(--ink); }
.btn.secondary:hover { background: #d9dbea; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.danger { background: #fee2e2; color: var(--err); }
.btn.ok { background: var(--ok); }
.btn[disabled] { opacity: .6; cursor: progress; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card.highlight { border: 2px solid var(--brand); }

.price { font-size: 36px; font-weight: 800; margin: 8px 0; }
.price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.features { list-style: none; padding: 0; margin: 14px 0 20px; }
.features li { padding: 4px 0 4px 22px; position: relative; }
.features li::before { content: "\2713"; color: var(--ok); position: absolute; left: 0; font-weight: 700; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.toggle button { border: 0; background: var(--card); padding: 6px 14px; cursor: pointer; font: inherit; }
.toggle button.active { background: var(--brand); color: #fff; }

.auth { max-width: 420px; margin: 20px auto; }
label { display: block; font-weight: 600; margin: 14px 0 4px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
textarea { min-height: 110px; }
input[type=file] { padding: 8px; background: #fafbff; }
.hint { font-weight: 400; color: var(--muted); font-size: 13px; }

.alert { padding: 12px 14px; border-radius: 8px; margin: 14px 0; }
.alert.ok { background: #ecfdf5; color: var(--ok); }
.alert.err { background: #fef2f2; color: var(--err); }
.alert.info { background: #eef2ff; color: var(--brand-dark); }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 18px 0 22px; flex-wrap: wrap; }
.tabs a { padding: 10px 16px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a.active { color: var(--brand); border-color: var(--brand); text-decoration: none; }

.studio-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 12px; }
.studio-tabs button { flex: 1; min-width: min(100%, 150px); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; background: var(--card); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.studio-tabs button[aria-selected=true] { background: var(--brand); border-color: var(--brand); color: #fff; }
.studio-tabs button:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
.studio-tab-group { flex-basis: 100%; margin: 8px 0 -2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.studio-tab-group:first-child { margin-top: 0; }
.color-picker { display: flex; align-items: center; gap: 8px; }
.color-picker select { flex: 1; min-width: 0; }
.color-picker input[type=color] { width: 48px; height: 40px; padding: 2px; flex: none; }
.color-swatch { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.frame-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 8px 0 16px; }
.frame-choice { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.frame-choice img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: #111827; }
.frame-choice[aria-checked=true] { border-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.frame-choice:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
.thumbnail-maker { margin-top: 8px; }
.compression-table tr.compression-best td { background: #ecfdf5; }
.compression-table td { vertical-align: top; }
.video-studio [role=tabpanel][hidden] { display: none; }
.video-studio [role=tabpanel] > .tool-card { width: 100%; min-width: 0; }

.usage { margin: 6px 0 0; }
.bar { height: 10px; background: #e8e9f3; border-radius: 6px; overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; background: var(--brand); }
.bar.full > div { background: var(--err); }

/* Private AI panel on the dashboard */
.private-ai { margin: 14px 0 0; background: linear-gradient(135deg, #eef2ff, #faf5ff); border-color: #ddd6fe; }
.private-ai-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.private-ai-head .tool-icon { margin: 0; width: 36px; height: 36px; border-radius: 10px; background: #fff; }
.private-ai-head h3 { margin: 0; color: #4c1d95; }
.private-ai p { margin: 4px 0; max-width: 820px; }

/* Rewards and Free-plan tool tokens */
.rewards { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(90deg, #fff7ed, #fef3c7); color: #78350f; display: grid; gap: 8px; }
.rewards .row { gap: 8px; align-items: center; flex-wrap: wrap; }
.rewards .muted { color: #92400e; }
.btn.reward { background: linear-gradient(90deg, #f59e0b, #ea580c); }
.btn.reward:hover { background: #c2410c; }
.chip { border: 1px solid #fcd34d; background: #fff; color: #78350f; border-radius: 999px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.chip:hover { background: #fffbeb; }
.tool-tokens { margin: -4px 0 8px; }
.badge.tokens { background: #fef3c7; color: #92400e; }
.alert.locked { background: #fff7ed; color: #7c2d12; border: 1px solid #fdba74; }
.alert.locked p { margin: 6px 0 10px; }
.badge.locked-badge { background: #ffedd5; color: #9a3412; }

.tool-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tool-card.storyboard-target { border-color: #0e7490; box-shadow: 0 0 0 2px rgba(14, 116, 144, .16); }
.badge { font-size: 12px; background: #eef2ff; color: var(--brand-dark); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.result { margin-top: 14px; }
.result pre { white-space: pre-wrap; background: #f3f4f8; padding: 12px; border-radius: 8px; max-height: 260px; overflow: auto; }

table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { background: #fafbff; color: var(--muted); font-weight: 600; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
pre.code { background: #111827; color: #e5e7eb; padding: 14px; border-radius: 8px; overflow: auto; }

.ledger td { padding: 4px; border: 0; }
.ledger input { padding: 6px 8px; min-width: 70px; }
.ledger-wrap { overflow-x: auto; max-width: 100%; }
.grid > * { min-width: 0; }

@media (max-width: 640px) {
  h1 { font-size: 30px; }
  .topbar { padding: 12px 14px; flex-wrap: wrap; }
  .brand { font-size: 18px; }
  #nav { gap: 12px; font-size: 14px; }
  .stats { gap: 18px; }
}

/* ---- Visual polish ---- */
body { background: radial-gradient(1200px 500px at 10% -10%, #eef0ff 0%, transparent 60%), radial-gradient(900px 400px at 100% 0%, #fdf2ff 0%, transparent 55%), var(--bg); }
.topbar { backdrop-filter: saturate(180%) blur(8px); background: rgba(255, 255, 255, .85); }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon.sm { width: 16px; height: 16px; vertical-align: -3px; }

.hero-bg { position: relative; margin: 0 -8px 26px; padding: 56px 24px 40px; border-radius: 24px;
  background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 45%, #7c3aed 100%); color: #fff; box-shadow: 0 20px 50px -20px rgba(67, 56, 202, .55); overflow: hidden; }
.hero-bg::after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 340px; height: 340px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.hero-bg .lead { color: #e0e7ff; }
.hero-bg .btn { background: #fff; color: var(--brand-dark); }
.hero-bg .btn:hover { background: #eef2ff; }
.hero-bg .btn.secondary { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.grad { background: linear-gradient(90deg, #a5b4fc, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); margin-bottom: 18px; }
.btn.lg { padding: 13px 24px; font-size: 16px; }
.stats { display: flex; gap: 40px; justify-content: center; margin-top: 34px; flex-wrap: wrap; position: relative; z-index: 1; }
.stats div { display: flex; flex-direction: column; }
.stats strong { font-size: 28px; }
.stats span { font-size: 13px; color: #c7d2fe; }

.card { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tool-tile:hover, .feature:hover, .tool-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(30, 27, 75, .25); border-color: #c7d2fe; }
.card.highlight { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #6366f1, #a855f7) border-box; border: 2px solid transparent; }

.tool-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; flex: none; }
.tool-icon.c0 { background: #eef2ff; color: #4f46e5; }
.tool-icon.c1 { background: #ecfeff; color: #0e7490; }
.tool-icon.c2 { background: #fdf2f8; color: #be185d; }
.tool-icon.c3 { background: #f0fdf4; color: #15803d; }
.tool-icon.c4 { background: #fff7ed; color: #c2410c; }
.tool-head { justify-content: flex-start; gap: 14px; align-items: center; }
.tool-head .tool-icon { margin-bottom: 0; }
.tool-title h3 { margin: 0 0 4px; }
.badge.ai { background: linear-gradient(90deg, #6366f1, #a855f7); color: #fff; margin-left: 6px; vertical-align: 2px; }
.tool-title .badge.ai { margin-left: 0; }

.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed #c7d2fe; border-radius: 12px;
  background: #fafbff; color: var(--muted); font-weight: 400; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; margin: 4px 0 0; }
.dropzone .icon { color: var(--brand); }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: #eef2ff; }
.dropzone.has-file { border-style: solid; border-color: var(--ok); background: #f0fdf4; }
.dropzone.has-file .icon { color: var(--ok); }
.dz-file { font-size: 13px; color: var(--ink); word-break: break-all; }
.dz-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.alert.loading { display: flex; align-items: center; gap: 10px; }
.alert.loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c7d2fe; border-top-color: var(--brand); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.transcript { background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 14px 16px; margin: 10px 0 12px;
  max-height: 320px; overflow: auto; white-space: pre-wrap; line-height: 1.65; font-size: 15px; }
video.preview, .result audio { width: 100%; border-radius: 10px; margin-top: 6px; background: #000; }
.result audio { background: transparent; }
.media-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; }
.preview-panel { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.preview-panel h4 { margin: 0 0 6px; font-size: 14px; }
.project-video-item.selected-project-video { border-color: var(--brand); box-shadow: 0 0 0 2px #e0e7ff; }
.media-image-preview { display: block; max-width: 100%; max-height: 440px; object-fit: contain; background: #111827; border-radius: 6px; margin: 10px 0; }
.pdf-preview { width: 100%; height: min(78vh, 840px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.metadata-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 12px 0; }
.metadata-panel { min-width: 0; }
.metadata-panel h4 { margin: 4px 0 8px; }
.metadata-panel table { table-layout: fixed; }
.metadata-panel td { overflow-wrap: anywhere; }
.metadata-actions { margin: 0 0 8px; gap: 6px; }
.metadata-checklist .metadata-check { width: 72px; text-align: center; }
.metadata-checklist .metadata-check input { width: 18px; height: 18px; }
.metadata-panel tr.metadata-group th { background: #eef0f7; color: var(--ink); }
.metadata-fixed td { color: var(--muted); }
.metadata-report th:first-child { width: 34%; }
.metadata-report tr.metadata-removed td { background: #ecfdf5; }
.metadata-report tr.metadata-removed .metadata-value { text-decoration: line-through; color: var(--muted); }
.metadata-report tr.metadata-failed td { background: #fef2f2; }
.metadata-report tr.metadata-dropped td, .metadata-report tr.metadata-added td { background: #fffbeb; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line); color: var(--ink); }
.pill.removed { background: var(--ok); color: #fff; }
.pill.failed { background: var(--err); color: #fff; }
.pill.dropped, .pill.added { background: #fde68a; color: #78350f; }
.storyboard-result { margin: 12px 0; overflow-wrap: anywhere; }
.storyboard-result h4 { margin: 0 0 6px; }
.scene-list { display: grid; gap: 8px; margin-top: 12px; }
.scene-item { padding: 10px 12px; border-left: 3px solid #0e7490; background: #fff; }
.scene-item h5 { margin: 0 0 4px; font-size: 14px; }
.scene-item p { margin: 3px 0; }
.scene-timing { color: #0e7490; font-variant-numeric: tabular-nums; }
.storyboard-video-result { margin-top: 14px; }
.demo { margin: 0 0 10px; background: linear-gradient(135deg, #fff, #f5f3ff); }
.ai-pick { margin: 10px 0 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(135deg, #eef2ff, #faf5ff); border: 1px solid #ddd6fe; }
.ai-pick h4 { margin: 0 0 4px; color: #4c1d95; }
.ai-pick p { margin: 2px 0; }
.demo-head { display: flex; gap: 14px; align-items: center; }
.demo-head .tool-icon { margin: 0; }
.demo blockquote { margin: 16px 0; padding: 14px 18px; border-left: 4px solid #a855f7; background: #fff; border-radius: 8px; font-size: 17px; font-style: italic; color: #312e81; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: s; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366f1, #a855f7); margin-bottom: 10px; }

/* ---- Grouped tool forms, visual finder and suggestion tables ---- */
.field-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px 18px; margin: 16px 0; background: linear-gradient(#fcfcff, #fff); }
.field-group > h4 { margin: 0; font-size: 15px; color: var(--brand-dark); }
.field-group > h4 + p { margin: 2px 0 0; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 18px; }
.field-grid > .field { min-width: 0; }
.field-grid > .field.wide { grid-column: 1 / -1; }
.field-grid > .field > textarea { min-height: 84px; }
.field-group .dropzone { padding: 12px; }
.visual-finder > .result { margin-top: 10px; }
.run-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }


.suggestion-table { overflow-x: auto; margin: 12px 0 4px; }
.suggestion-table table { table-layout: auto; }
.suggestion-table th:first-child, .suggestion-table td:first-child { width: 120px; }
.suggestion-table td { vertical-align: middle; }
.suggestion-table tbody tr:hover { background: #f8fafc; }
.suggestion-table tbody tr:last-child td { border-bottom: 0; }
.suggestion-table p { margin: 2px 0 0; }
.suggestion-preview img { display: block; width: 104px; height: 72px; object-fit: cover; border-radius: 6px; background: #111827; }

@media (max-width: 520px) {
  .suggestion-table th:first-child, .suggestion-table td:first-child { width: 86px; }
  .suggestion-preview img { width: 72px; height: 54px; }
}

/* End-user / developer view switch and the Developer tab */
.app-head { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.mode-switch { display: inline-flex; border: 1px solid #c7d2fe; border-radius: 999px; overflow: hidden; }
.mode-option { border: 0; background: #fff; color: var(--brand-dark); padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.mode-option[aria-pressed=true] { background: var(--brand); color: #fff; }
.mode-option:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: -3px; }
.dev-toolbar { align-items: center; gap: 12px; flex-wrap: wrap; }
.dev-grid { display: grid; gap: 16px; margin-top: 12px; }
/* Grid items may shrink below their content (long clip descriptions wrap instead of widening the page). */
.dev-grid > * { min-width: 0; }
.dev-card h4 { margin: 14px 0 6px; }
.dev-table td, .dev-table th { font-size: 13px; vertical-align: top; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.dev-logs { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; max-height: 420px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.badge.ok-badge { background: #ecfdf5; color: var(--ok); }
.badge.bad-badge { background: #fef2f2; color: var(--err); }
.raw-debug { margin-top: 10px; }
.raw-debug pre { background: #f3f4f8; padding: 10px; border-radius: 8px; max-height: 320px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.dev-table tr.clickable { cursor: pointer; }
.dev-table tr.clickable:hover, .dev-table tr.clickable:focus-visible { background: #eef2ff; outline: none; }
.dev-customer { margin-top: 12px; }
.dev-customer .row { gap: 8px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.dev-customer input[type=text] { min-width: 240px; flex: 1; }
.dev-fix-form { gap: 8px; align-items: stretch; flex-wrap: wrap; }
.dev-fix-form textarea { flex: 1; min-width: 220px; }
.preset-preview { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 10px; margin: 6px 0 4px; border: 1px solid #e5e7eb; }
.preset-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0 10px; }
/* Change look option cards. */
.look-gallery { display: grid; gap: 10px; margin: 6px 0 10px; }
.look-group h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted, #57606a); font-weight: 600; }
.look-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.look-card { border: 1px solid var(--border, #d0d7de); border-radius: 10px; padding: 6px 10px; background: transparent; font-size: 13px; cursor: pointer; display: grid; justify-items: center; gap: 4px; }
.look-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.look-card[aria-checked="true"] { border-color: var(--accent, #0969da); box-shadow: 0 0 0 2px var(--accent, #0969da) inset; font-weight: 600; }
/* Photo Story scene editor: one card per scene (line, emotion, action). */
.photo-story-scenes { display: grid; gap: 10px; margin: 8px 0 4px; }
.photo-story-scene { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 8px; align-items: end; border: 1px solid var(--border, #d0d7de); border-radius: 8px; padding: 8px 10px 10px; margin: 0; }
.photo-story-scene legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.photo-story-scene label { display: grid; gap: 4px; font-size: 12.5px; min-width: 0; }
.photo-story-scene input, .photo-story-scene select { width: 100%; min-width: 0; }
@media (max-width: 720px) { .photo-story-scene { grid-template-columns: 1fr; } }
.preset-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; color: inherit; }
.preset-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #f3f4f6; }
.preset-tile[aria-checked=true] { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79, 70, 229, .25); font-weight: 600; }
.preset-tile:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
.upload-tile .upload-icon { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 32px; color: var(--brand-dark); background: #eef2ff; border-radius: 6px; }

/* 1-hour privacy rule notices */
.retention-line { margin: 6px 0; color: var(--muted); }
.retention-note { margin-bottom: 10px; }
.push-optin { margin-top: 8px; }

/* Logo notice on video tools; the "without the logo" choice shows only once the account qualifies. */
.branding-note { margin: 6px 0 2px; }
.branding-choice { display: block; margin-top: 6px; font-weight: 600; cursor: pointer; }
.branding-choice input { margin-right: 6px; }

/* Text-to-Video hybrid scenes: AI shot choice under each storyboard scene. */
.ai-shot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border, #d0d7de); }
.ai-shot .row { gap: 6px; flex-wrap: wrap; }

/* Studios: the "More studios" menu, the studio cards on the CinefyAI home, "Open in..." */
.studios-menu { position: relative; }
.studios-menu summary { cursor: pointer; font-weight: 500; list-style: none; white-space: nowrap; }
.studios-menu summary::-webkit-details-marker { display: none; }
.studios-menu summary::after { content: " \25BE"; color: var(--muted); }
.studios-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; display: grid; gap: 2px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
#nav .studios-menu-list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; }
#nav .studios-menu-list a:hover { background: var(--bg); text-decoration: none; }
.studio-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.studio-card { border-top: 4px solid var(--brand); color: var(--ink); }
.studio-card:hover { text-decoration: none; border-color: var(--brand); }
.open-in { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.open-in h4 { margin: 0 0 8px; }
.open-in .row { flex-wrap: wrap; }
details.open-in { margin-top: 6px; padding: 6px 8px; }
details.open-in summary { cursor: pointer; font-size: 13px; color: var(--brand); }
.handoff-note { margin: 8px 0; }

/* Home dashboard: every studio with its tools (toolDirectory). */
.tool-directory { display: grid; gap: 1rem; }
.directory-studio { border-top: 4px solid var(--brand); }
.directory-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.directory-head h3 { margin: 0; }
.directory-tools { list-style: none; margin: .5rem 0 0; padding: 0; }
.directory-tools li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line, #e5e7eb); }
.directory-tools li p { margin: .15rem 0 0; }
.directory-tools .btn { flex: none; }
.directory-actions { flex: none; gap: 8px; flex-wrap: nowrap; }
.make-link { font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .directory-tools li { flex-direction: column; align-items: flex-start; } }

/* Price labels can be long sentences (Podcast, Audiobook): wrap inside the card, never past it. */
.badge.price-label { display: inline-block; white-space: normal; max-width: 100%; margin: 6px 0 0 8px; border-radius: 10px; line-height: 1.4; overflow-wrap: anywhere; vertical-align: top; }

/* Languages (app.js i18n): the picker, Beta marks, suggestion mode. Indian scripts use the
   Noto families in the body font stack (installed on most phones and Linux; Windows falls
   back to Nirmala UI). Translations run longer than English: labels may wrap. */
.lang-menu summary { font-weight: 500; }
.lang-menu-list { min-width: 200px; }
#nav .lang-menu-list a { justify-content: space-between; }
#nav .lang-menu-list a[aria-checked="true"] { font-weight: 700; }
.badge.beta { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 600; }
.lang-help { margin-top: 4px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.lang-help.on { border-style: solid; background: var(--bg); }
.i18n-help [lang]:not(html), .i18n-help main * { cursor: help; }
.i18n-help-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px); padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.i18n-suggest { position: fixed; right: 16px; bottom: 80px; z-index: 41; width: min(420px, calc(100% - 32px)); display: grid; gap: 6px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .2); }
.i18n-suggest p { margin: 0 0 4px; }
.i18n-suggest textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* ==== App pages in the home page's design (owner 2026-11-03) ====================================
   The router (app.js route) puts class "qx" on <body> for the dashboard (#/app/*), Pricing,
   Templates and the API docs; the designed home (web/pages/home.js) and the step-by-step page
   (web/pages/make.js, scoped to .mk) bring their own styles and do not get it. Lavender
   backgrounds, Sora headings, Inter text, JetBrains Mono labels, 20px cards with soft shadows and
   the studio colours of home.js's homeStudios(). Light only, like the rest of the site. */
body.qx {
  --qx-bg: #FBF8FF; --qx-bg2: #F6F1FF; --qx-ink: #1A1433; --qx-head: #241A4F; --qx-muted: #5A5570; --qx-label: #6B6582;
  --qx-line: #ECE5FA; --qx-violet: #7C3AED; --qx-pink: #DB2777; --qx-teal: #0E7490; --qx-green: #1F7A4D; --qx-orange: #C2410C;
  --qx-shadow: 0 1px 2px rgba(42, 27, 92, .05), 0 14px 34px -20px rgba(42, 27, 92, .28);
  --qx-shadow-hi: 0 2px 4px rgba(42, 27, 92, .06), 0 22px 44px -18px rgba(42, 27, 92, .36);
  --qx-band: linear-gradient(120deg, #4C1D95 0%, #7C3AED 48%, #DB2777 100%);
  --muted: var(--qx-muted); --line: var(--qx-line); --radius: 20px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Gurmukhi", "Nirmala UI", sans-serif;
  color: var(--qx-ink);
  background: radial-gradient(900px 420px at 0% 0%, #FDE7F1 0%, transparent 60%), radial-gradient(900px 480px at 100% 4%, #E4F1FF 0%, transparent 55%), var(--qx-bg);
}
/* A studio host (e.g. Song Studio) keeps its own colour in the header band. */
html:not([data-studio="cinefy"]) body.qx { --qx-band: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 70%, #F472B6 140%); }
body.qx main { max-width: 1200px; padding: 28px 20px 72px; }
body.qx main h1, body.qx main h2, body.qx main h3, body.qx main h4 { font-family: Sora, Inter, system-ui, sans-serif; color: var(--qx-head); letter-spacing: -.02em; }
body.qx main h1 { font-size: 44px; font-weight: 800; line-height: 1.08; }
body.qx main h2 { font-size: 28px; font-weight: 800; margin: 36px 0 10px; }
body.qx main h3 { font-weight: 700; }
body.qx .lead { color: var(--qx-muted); font-size: 18px; }
body.qx .muted { color: var(--qx-muted); }
body.qx code, body.qx .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.qx-kicker { margin: 0 0 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qx-label); }

/* Cards, buttons, fields, tables, alerts */
body.qx .card { border: 1px solid var(--qx-line); border-radius: 20px; box-shadow: var(--qx-shadow); background: #fff; }
body.qx .btn { border-radius: 999px; font-weight: 700; padding: 10px 20px; box-shadow: 0 10px 22px -14px var(--brand); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
body.qx .btn:hover { transform: translateY(-1px); }
body.qx .btn.secondary { background: #fff; color: var(--qx-head); border: 1px solid #E2D8F7; box-shadow: none; }
body.qx .btn.secondary:hover { background: var(--qx-bg2); }
body.qx .btn.small { padding: 6px 14px; }
body.qx .btn.danger { background: #FEE2E2; color: #B91C1C; box-shadow: none; }
body.qx .btn.ok { background: var(--qx-green); box-shadow: 0 10px 22px -14px var(--qx-green); }
body.qx input, body.qx select, body.qx textarea { border: 1px solid #E2D8F7; border-radius: 12px; background: #fff; }
body.qx input[type=checkbox], body.qx input[type=radio] { width: auto; accent-color: var(--qx-violet); vertical-align: -2px; }
body.qx .branding-choice { font-weight: 600; }
body.qx input:focus, body.qx select:focus, body.qx textarea:focus { outline: none; border-color: var(--qx-violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
body.qx a:focus-visible, body.qx button:focus-visible, body.qx summary:focus-visible, body.qx [tabindex]:focus-visible { outline: 3px solid var(--qx-violet); outline-offset: 2px; border-radius: 10px; }
body.qx .btn:focus-visible { outline: 3px solid var(--qx-head); outline-offset: 3px; border-radius: 999px; }
body.qx label { color: var(--qx-head); }
body.qx table { border: 1px solid var(--qx-line); border-radius: 16px; border-collapse: separate; border-spacing: 0; box-shadow: var(--qx-shadow); }
body.qx th { background: var(--qx-bg2); color: var(--qx-label); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
body.qx tr:last-child > td { border-bottom: 0; }
body.qx .card table { box-shadow: none; }
body.qx .alert { border-radius: 14px; }
body.qx .alert.info { background: #F1EBFF; color: #4C1D95; }
body.qx .badge { border-radius: 999px; }
body.qx pre.code { background: #1A1433; color: #EDE9FE; border-radius: 16px; padding: 18px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.6; box-shadow: var(--qx-shadow); }
body.qx .toggle { border: 1px solid #E2D8F7; border-radius: 999px; background: #fff; padding: 3px; gap: 2px; }
body.qx .toggle button { border-radius: 999px; padding: 6px 16px; font-weight: 700; background: transparent; color: var(--qx-muted); }
body.qx .toggle button.active { background: var(--qx-head); color: #fff; }
body.qx .chip { border: 1px solid #E2D8F7; background: #fff; color: var(--qx-head); font-weight: 600; padding: 6px 14px; }
body.qx .chip:hover { background: var(--qx-bg2); }
body.qx .dropzone { border-color: #D9CCF6; border-radius: 16px; background: #FCFAFF; }
body.qx .field-group { border-color: var(--qx-line); border-radius: 16px; background: #FCFAFF; }
body.qx .field-group > h4 { color: #4C1D95; }
body.qx .run-row { border-top-color: var(--qx-line); }
body.qx .tool-card:hover, body.qx .tool-tile:hover { transform: none; border-color: var(--qx-line); box-shadow: var(--qx-shadow); }

/* Dashboard header band: hello, the plan's usage, the view switch */
.qx-band { position: relative; overflow: hidden; margin: 0 0 16px; padding: 30px 32px 26px; border-radius: 28px; background: var(--qx-band); color: #fff; box-shadow: 0 24px 50px -28px rgba(76, 29, 149, .7); }
.qx-band::before, .qx-band::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.qx-band::before { width: 260px; height: 260px; right: -60px; top: -110px; background: rgba(255, 255, 255, .14); }
.qx-band::after { width: 140px; height: 140px; right: 180px; bottom: -90px; background: rgba(255, 201, 60, .35); }
.qx-band > * { position: relative; z-index: 1; }
.qx-band .qx-kicker { color: rgba(255, 255, 255, .78); }
body.qx main .qx-band h1 { color: #fff; margin: 0; font-size: 40px; }
.qx-band .app-head { align-items: flex-end; }
.qx-band .mode-switch { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); }
.qx-band .mode-option { background: transparent; color: #fff; font-weight: 600; }
.qx-band .mode-option[aria-pressed=true] { background: #fff; color: var(--qx-head); }
.qx-band .usage.card { margin: 18px 0 0; padding: 14px 18px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; color: #fff; backdrop-filter: blur(6px); }
.qx-band .usage strong { font-family: Sora, Inter, sans-serif; }
.qx-band .usage .btn.secondary { background: #fff; color: var(--qx-head); border: 0; }
.qx-band .bar { background: rgba(255, 255, 255, .25); height: 8px; }
.qx-band .bar > div { background: #FFC93C; }
.qx-band .bar.full > div { background: #FCA5A5; }
.qx-band .rewards { background: #fff; color: #78350F; }

/* Private AI: a calm lavender strip under the band */
body.qx .private-ai { margin: 0 0 6px; padding: 18px 22px; border: 1px solid #E4DAFB; background: linear-gradient(120deg, #F3EEFF 0%, #FFF 60%, #EAF6FF 100%); }
body.qx .private-ai-head .tool-icon { background: #7C3AED; color: #fff; border-radius: 12px; }
body.qx .private-ai-head h3 { color: #4C1D95; font-size: 18px; }
body.qx .private-ai p { max-width: 900px; }

/* Dashboard tabs as pills; a long row scrolls inside itself on phones */
body.qx nav.tabs { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 18px 0 24px; padding: 6px; border: 1px solid var(--qx-line); border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--qx-shadow); scrollbar-width: none; }
body.qx nav.tabs::-webkit-scrollbar { display: none; }
body.qx nav.tabs a { flex: none; padding: 9px 18px; border: 0; border-radius: 999px; color: var(--qx-muted); font-weight: 600; white-space: nowrap; transition: background .15s ease, color .15s ease; }
body.qx nav.tabs a:hover { background: var(--qx-bg2); color: var(--qx-head); text-decoration: none; }
body.qx nav.tabs a.active { background: var(--qx-head); color: #fff; }
html:not([data-studio="cinefy"]) body.qx nav.tabs a.active { background: var(--brand); }

/* Video Studio: the line-up of studios and their tools (as on the home page) */
.qx-lineup-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 6px 0 14px; }
body.qx main .qx-lineup-head h2 { margin: 0 0 6px; font-size: 32px; }
.qx-lineup-head p { margin: 0; max-width: 720px; }
.qx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.qx-jump button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--qx-line); border-radius: 999px; background: #fff; color: var(--qx-head); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(42, 27, 92, .05); }
.qx-jump button:hover { background: var(--panel, var(--qx-bg2)); }
.qx-dot { width: 12px; height: 12px; flex: none; border-radius: 999px; background: var(--c, var(--qx-violet)); }
.qx-studio { margin: 0 0 22px; padding: 24px; border-radius: 26px; background: var(--panel, var(--qx-bg2)); scroll-margin-top: 140px; }
.qx-studio-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
body.qx main .qx-studio-head h3 { margin: 0; font-size: 26px; font-weight: 800; color: var(--ink, var(--qx-head)); }
.qx-tagline { color: var(--ink, var(--qx-head)); opacity: .8; font-weight: 600; }
.qx-open-studio { margin-left: auto; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink, var(--qx-head)); font-weight: 700; font-size: 14px; white-space: nowrap; }
.qx-open-studio:hover { text-decoration: none; box-shadow: var(--qx-shadow); }
.qx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.qx-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(42, 27, 92, .05); transition: transform .2s ease, box-shadow .2s ease; }
.qx-tile:hover, .qx-tile:focus-within { transform: translateY(-3px); box-shadow: var(--qx-shadow-hi); }
.qx-tile-art { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; background: #FFF8F0; }
.qx-tile-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qx-tile-art .tool-icon { width: 64px; height: 64px; margin: 0; border-radius: 18px; background: #fff; color: var(--c, var(--qx-violet)); box-shadow: var(--qx-shadow); }
.qx-tile-art .tool-icon .icon { width: 30px; height: 30px; }
.qx-new { position: absolute; right: 10px; top: 10px; padding: 2px 7px; border-radius: 6px; background: #0E0B1A; color: #FFC93C; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; }
.qx-tile-body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
body.qx main .qx-tile-body h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #0E0B1A; }
.qx-hook { margin: 0 0 10px; color: var(--qx-muted); font-size: 14px; }
.qx-io { display: grid; gap: 3px; margin: 0 0 14px; font-size: 13px; }
.qx-io div { display: flex; gap: 6px; }
.qx-io dt { flex: none; width: 72px; font-weight: 800; color: #7C6BA8; }
.qx-io dd { margin: 0; font-weight: 700; min-width: 0; }
.qx-tile-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; }
body.qx .btn.qx-make { background: var(--c, var(--brand)); box-shadow: 0 10px 20px -12px var(--c, var(--brand)); padding: 9px 16px; font-size: 14px; }
body.qx .btn.qx-make:hover { background: var(--ink, var(--brand-dark)); }
.qx-classic { color: var(--qx-muted); font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: #D6CCEF; text-underline-offset: 3px; }
.qx-classic:hover { color: var(--ink, var(--qx-head)); }
.qx-templates-link { white-space: nowrap; }
/* A studio host: the tiles, then the classic forms (the tool tabs) */
.qx-classic-forms { margin-top: 30px; padding: 22px; border-radius: 26px; background: #fff; border: 1px solid var(--qx-line); box-shadow: var(--qx-shadow); scroll-margin-top: 140px; }
body.qx main .qx-classic-forms > h3 { margin: 0 0 4px; font-size: 22px; }
body.qx .studio-tabs button { border-radius: 999px; border-color: #E2D8F7; color: var(--qx-head); background: #fff; padding: 10px 16px; }
body.qx .studio-tabs button[aria-selected=true] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 10px 20px -12px var(--brand); }
body.qx .studio-tab-group { font-family: "JetBrains Mono", monospace; color: var(--qx-label); letter-spacing: .06em; }
body.qx .btn.make-link { margin-left: 4px; vertical-align: middle; }
body.qx .tpl-strip { padding: 18px 20px; border-radius: 22px; background: var(--qx-bg2); }

/* My Media: one colourful card per job */
.qx-media-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 6px; }
.qx-media-summary .qx-count { margin: 0; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--qx-line); color: var(--qx-head); font-weight: 600; }
body.qx .media-search { margin: 14px 0 22px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(120deg, #ECE5FF, #FFE3F0); }
body.qx .media-search h3, body.qx .media-search h2 { margin-top: 0; }
.qx-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.qx-job { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--qx-line); box-shadow: var(--qx-shadow); }
.qx-job-art { position: relative; display: grid; place-items: center; height: 158px; overflow: hidden; background: var(--panel, var(--qx-bg2)); }
.qx-job-art > img { width: 100%; height: 100%; object-fit: contain; }
.qx-job-art > .tool-icon { width: 60px; height: 60px; margin: 0; border-radius: 18px; background: #fff; color: var(--c, var(--qx-violet)); }
.qx-job-art > video, .qx-job-art > img.qx-result { width: 100%; height: 100%; object-fit: contain; background: #0E0B1A; }
.qx-job-art > audio { width: calc(100% - 24px); }
.qx-job.gone .qx-job-art > img { filter: grayscale(.85); opacity: .55; }
.qx-status { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--qx-head); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(14, 11, 26, .12); }
.qx-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
.qx-status.completed { background: #DDF3E6; color: #14532D; } .qx-status.completed::before { background: #1F7A4D; }
.qx-status.processing, .qx-status.queued { background: #FFF1D6; color: #92400E; } .qx-status.processing::before, .qx-status.queued::before { background: #F59E0B; animation: qxpulse 1.4s ease-in-out infinite; }
.qx-status.failed { background: #FEE2E2; color: #991B1B; } .qx-status.failed::before { background: #DC2626; }
.qx-status.cancelled { background: #E7EAF0; color: #1E293B; }
@keyframes qxpulse { 50% { opacity: .3; } }
.qx-job-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
body.qx main .qx-job-body h4 { margin: 0; font-size: 16px; font-weight: 700; color: #0E0B1A; }
.qx-job-meta { margin: 0; color: var(--qx-muted); font-size: 13px; }
.qx-job-id { margin: 0; color: #8F86A8; font-size: 11px; }
.qx-job-files { margin-top: auto; padding-top: 10px; display: grid; gap: 8px; }
.qx-job-files .row { gap: 8px; }
.qx-job-files .muted.small { margin: 0; }
body.qx .qx-job .btn { padding: 8px 16px; font-size: 14px; }
body.qx .qx-job .btn.ok { background: var(--c, var(--qx-green)); box-shadow: 0 10px 20px -12px var(--c, var(--qx-green)); }

/* Pricing */
.qx-hero { text-align: center; padding: 26px 0 26px; }
.qx-hero .lead { margin: 0 auto 22px; max-width: 680px; }
body.qx main .qx-hero h1 { font-size: 52px; margin: 0 0 12px; }
.qx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; align-items: stretch; }
body.qx .qx-plan { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.qx-plan-top { padding: 20px 20px 16px; background: var(--panel); }
.qx-plan-top .qx-kicker { color: var(--ink); margin: 0 0 4px; }
body.qx main .qx-plan-top h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
body.qx .qx-plan .price { font-family: Sora, Inter, sans-serif; font-size: 34px; color: #0E0B1A; margin: 10px 0 0; letter-spacing: -.02em; }
body.qx .qx-plan .price small { font-family: Inter, sans-serif; font-size: 14px; }
.qx-plan-body { display: flex; flex: 1; flex-direction: column; padding: 16px 20px 20px; }
.qx-plan-body > p { margin: 0 0 4px; }
body.qx .qx-plan .features { margin: 10px 0 18px; font-size: 14px; }
body.qx .qx-plan .features li::before { content: ""; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.qx-plan-body > .btn { margin-top: auto; text-align: center; }
body.qx .qx-plan .btn:not(.secondary) { background: var(--c); box-shadow: 0 10px 20px -12px var(--c); }
body.qx .qx-plan.highlight { border: 2px solid var(--c); box-shadow: 0 24px 48px -24px rgba(124, 58, 237, .55); }
.qx-ribbon { position: absolute; right: 12px; top: 12px; padding: 3px 10px; border-radius: 999px; background: #0E0B1A; color: #FFC93C; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.qx .qx-credits { margin-top: 28px; padding: 26px; }
body.qx main .qx-credits h2 { margin-top: 0; }
body.qx .qx-credits table td:nth-child(2) { font-weight: 700; color: #4C1D95; }
.qx-fineprint { max-width: 820px; margin: 22px auto 0; }

/* API docs */
.qx-docs-hero { padding: 30px 32px; margin-bottom: 22px; border-radius: 28px; background: linear-gradient(120deg, #1A1433 0%, #3B1F7A 60%, #0E7490 130%); color: #fff; }
body.qx main .qx-docs-hero h1 { color: #fff; margin: 0 0 8px; }
body.qx .qx-docs-hero .lead { color: #E9E3FF; margin: 0; }
.qx-docs-hero .qx-kicker { color: #C4B5FD; }
body.qx .qx-doc-step { margin: 0 0 18px; padding: 24px; }
body.qx main .qx-doc-step h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 22px; }
.qx-num { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 12px; background: var(--c, var(--qx-violet)); color: #fff; font-family: Sora, sans-serif; font-size: 16px; font-weight: 800; }
body.qx .qx-doc-step pre.code { margin: 0; }
body.qx .qx-doc-step table { box-shadow: none; }
body.qx .qx-doc-step td.mono { color: #4C1D95; white-space: normal; word-break: normal; overflow-wrap: anywhere; min-width: 210px; }

/* Billing / Account / Activity / Keys: content cards stack with air */
body.qx nav.tabs + div > .card + .card, body.qx nav.tabs + div > .card + div { margin-top: 14px; }

@media (max-width: 640px) {
  body.qx main { padding: 18px 16px 56px; }
  body.qx main h1 { font-size: 32px; }
  body.qx main h2 { font-size: 24px; }
  .qx-band { padding: 22px 18px 18px; border-radius: 22px; }
  body.qx main .qx-band h1 { font-size: 30px; }
  body.qx nav.tabs { position: static; border-radius: 18px; }
  .qx-studio { padding: 16px; border-radius: 20px; }
  .qx-open-studio { margin-left: 0; }
  body.qx main .qx-hero h1 { font-size: 34px; }
  .qx-docs-hero { padding: 22px 18px; border-radius: 22px; }
  body.qx .qx-doc-step, body.qx .qx-credits { padding: 16px; }
  .qx-classic-forms { padding: 14px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.qx .btn, .qx-tile, body.qx nav.tabs a { transition: none; }
  body.qx .btn:hover, .qx-tile:hover, .qx-tile:focus-within { transform: none; }
  .qx-status::before { animation: none; }
}

/* Content checks (tools/content_refusal.go): the refused words at their text box, why, how to
   fix, the kinder version to accept or not, and the child-safe note. */
.mod-note { margin: 8px 0 4px; padding: 12px 14px; border-radius: 10px; background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; }
.mod-note .mod-msg { font-weight: 600; margin: 0 0 6px; }
.mod-details p { margin: 6px 0; }
.mod-preview { white-space: pre-wrap; background: #fff; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 10px; margin: 6px 0; color: #1f2937; max-height: 12em; overflow: auto; }
.mod-note mark, .mod-details mark { background: #fde047; color: #111; border-radius: 3px; padding: 0 2px; }
textarea.mod-bad, input.mod-bad { outline: 2px solid #ef4444; outline-offset: 1px; }
.mod-child { color: #1e3a8a; background: #eef2ff; border-radius: 6px; padding: 6px 8px; }
.mod-suggest .row { gap: 8px; }
.mod-suggestion { white-space: pre-wrap; background: #ecfdf5; border-left: 4px solid #10b981; margin: 6px 0; padding: 8px 12px; color: #064e3b; }

/* "Completed in 3 min 12 s" above a finished job's result. */
.job-completed { margin: 0 0 8px; font-weight: 700; color: #1F7A4D; }

/* Make page: the next tool's button above a finished result (Storyboard -> Text-to-Video). */
.mk-next-top { margin: 0 0 14px; }

/* Travel Vlog (tool 36): the list of files and the review of the script and faces. */
.tv-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tv-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border, #d0d7de); border-radius: 10px; background: #fff; }
.tv-item img, .tv-item video { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; background: #0E0B1A; }
.tv-item-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.tv-item-name { flex: 1 1 100%; overflow-wrap: anywhere; font-size: 14px; }
.tv-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tv-note { margin: 8px 0 0; }
.tv-details { margin-top: 14px; }
.tv-hero { margin-top: 10px; }
.tv-detail { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; }
.tv-detail input { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .tv-detail { grid-template-columns: 1fr; gap: 4px; } }
.tv-note:empty { display: none; }
.tv-blur-notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #E8F7EE; color: #14532D; font-weight: 700; }
.tv-status:empty { display: none; }
.tv-review { margin-top: 14px; }
.tv-review h4 { margin: 18px 0 8px; font-size: 18px; }
.tv-scenes { display: grid; gap: 10px; }
.tv-scene { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.tv-scene img { width: 112px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: #0E0B1A; }
.tv-scene textarea, .mk .tv-scene textarea { width: 100%; min-height: 96px; margin-top: 4px; box-sizing: border-box; }
.tv-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; font-size: 13px; }
.tv-key { display: inline-flex; align-items: center; gap: 6px; }
.tv-swatch { width: 16px; height: 16px; border-radius: 4px; border: 3px solid; box-sizing: border-box; }
.tv-pictures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.tv-picture { margin: 0; min-width: 0; }
.tv-picture figcaption { font-weight: 700; margin-bottom: 6px; }
.tv-frame { position: relative; max-width: 460px; line-height: 0; user-select: none; }
.tv-frame img { display: block; width: 100%; height: auto; border-radius: 10px; -webkit-user-drag: none; }
.tv-frame.marking { cursor: crosshair; touch-action: none; outline: 3px dashed #DB2777; outline-offset: 2px; }
.tv-frame.marking .tv-box { pointer-events: none; }
.tv-box { position: absolute; padding: 0; margin: 0; border: 3px solid; border-radius: 6px; background: none; box-sizing: border-box; cursor: pointer; font: 700 12px/1 Inter, system-ui, sans-serif; color: #fff; text-align: left; }
.tv-box > span { position: absolute; left: -3px; top: -3px; padding: 2px 5px; border-radius: 6px 0 6px 0; background: inherit; }
.tv-box.blur, .tv-swatch.blur { border-color: #4F46E5; }
.tv-box.clear, .tv-swatch.clear { border-color: #1F7A4D; }
.tv-box.ask, .tv-swatch.ask { border-color: #D97706; }
.tv-box.ask { border-style: dashed; background: rgba(217, 119, 6, .28); }
.tv-box.added, .tv-swatch.added { border-color: #DB2777; }
.tv-box.blur > span { background: #4F46E5; }
.tv-box.clear > span { background: #1F7A4D; }
.tv-box.ask > span { background: #B45309; }
.tv-box.added > span { background: #DB2777; }
.tv-picture .row { margin-top: 8px; }
.tv-faces { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tv-face { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--border, #d0d7de); border-radius: 10px; background: #fff; }
.tv-face.ask { border: 2px solid #D97706; background: #FFF7E6; }
.tv-ask { color: #92400E; font-weight: 700; font-size: 13px; }
.tv-choices { flex: 1 1 100%; display: grid; gap: 4px; }
.tv-choice, .mk label.tv-choice { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1.35; cursor: pointer; }
.tv-choice input { flex: none; margin: 2px 0 0; width: 18px; height: 18px; }
@media (max-width: 640px) {
  .tv-item { grid-template-columns: 64px minmax(0, 1fr); }
  .tv-item-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .tv-scene { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .tv-scene img { width: 72px; }
  .tv-scene textarea, .mk .tv-scene textarea { min-height: 130px; padding: 10px; }
}
/* Song Short (19): the music gallery, the lyrics writer and the review of the scenes. */
.song-gallery { display: grid; gap: 14px; margin: 4px 0; }
.song-style-group h5 { margin: 0 0 8px; font-size: 14px; }
.song-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.song-style-card { display: flex; align-items: stretch; gap: 6px; }
.song-style { flex: 1; min-width: 0; font: inherit; cursor: pointer; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); font-weight: 600; font-size: 14px; color: inherit; }
.song-style:hover { border-color: var(--brand); }
.song-style[aria-checked=true] { border-color: var(--brand); background: rgba(79, 70, 229, .08); box-shadow: 0 0 0 1px var(--brand); }
.song-play { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--card); color: var(--ink); white-space: nowrap; }
.song-play[aria-pressed=true] { background: var(--brand); color: #fff; border-color: var(--brand); }
.song-musician { margin: 10px 0 2px; }
.song-musician summary { cursor: pointer; font-weight: 600; }
.song-musician-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.song-musician-grid .hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.song-musician-grid input, .song-musician-grid select { width: 100%; min-width: 0; }
.song-writer { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.song-writer h5 { margin: 0 0 8px; font-size: 15px; }
.song-writer label { display: block; margin-bottom: 8px; }
.song-writer input, .song-writer select { width: 100%; min-width: 0; }
.song-writer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.song-like { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.song-like h5 { margin: 0; font-size: 15px; }
.song-like p { margin: 0; }
.song-like label { display: block; }
.song-like-rights { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 500; }
.song-like-result input[type=text] { width: 100%; min-width: 0; }
.song-scene-list { display: grid; gap: 12px; margin: 10px 0; }
.song-scene-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); }
.song-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.song-scene-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.song-scene-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.song-scene-media { display: block; width: 180px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #0e0b1a; }
.song-scene-empty { display: flex; align-items: center; justify-content: center; width: 180px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: rgba(127, 127, 127, .15); }
.song-scene-preview { position: relative; }
.song-scene-play { position: absolute; left: 8px; bottom: 8px; padding: 2px 10px; }
.song-scene-change { margin-top: 10px; display: grid; gap: 10px; }
.song-alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.song-alt { padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(127, 127, 127, .1); cursor: pointer; aspect-ratio: 16 / 9; display: block; }
.song-alt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song-alt[aria-pressed=true] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.song-alt:disabled { opacity: .35; cursor: not-allowed; }
.song-search { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; }
.song-search input { flex: 1; min-width: 0; }
.song-upload { width: fit-content; cursor: pointer; }
.song-reset { width: fit-content; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; color: var(--brand); }
@media (max-width: 640px) {
  .song-styles { grid-template-columns: 1fr; }
  .song-musician-grid, .song-writer-row { grid-template-columns: 1fr; }
  .song-scene-media, .song-scene-empty { width: 100%; }
  .song-scene-preview { width: 100%; }
  .song-search { flex-wrap: wrap; }
  .song-search input { flex: 1 1 100%; }
}

/* Recipe Studio (web/studios/recipe.js) */
.rs-plan { margin-top: 12px; }
.rs-review { display: flex; flex-direction: column; gap: 10px; }
.rs-review label { display: block; }
.rs-review .row label { display: inline-block; margin-right: 10px; }
.rs-rows { display: flex; flex-direction: column; gap: 8px; }
.rs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-row input { min-width: 0; flex: 1 1 110px; }
.rs-row input[size] { flex: 0 1 70px; }
.rs-step { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; }
.rs-step textarea { width: 100%; min-height: 64px; box-sizing: border-box; }
.rs-lines { margin: 0; padding-left: 20px; }
.rs-safety { margin: 8px 0; padding: 10px; border-radius: 8px; background: rgba(245, 158, 11, .12); }
.rs-confirm { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.rs-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.rs-cuisine-search { width: 100%; margin-top: 6px; }