:root {
  --bg: #f2f1f6;
  --panel: #ffffff;
  --panel-soft: #f8f7fb;
  --line: #e6e3ec;
  --line-strong: #d9d4e2;
  --ink: #25222d;
  --muted: #777281;
  --muted-2: #a09aa9;
  --purple: #6756d9;
  --purple-dark: #4f42bd;
  --purple-soft: #efecff;
  --lime: #d7ff43;
  --green: #33b47b;
  --yellow: #e2a72b;
  --blue: #4988e8;
  --red: #de5a69;
  --shadow: 0 18px 48px rgba(44, 36, 70, 0.12);
  --sidebar: 226px;
  --tool-panel: 330px;
  --inspector: 252px;
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { background: var(--bg); overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(103, 86, 217, 0.22); outline-offset: 2px; }
.is-hidden { display: none !important; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; display: inline-grid; place-items: center; color: #625d6c; }
.icon-button:hover { background: #efedf3; color: var(--ink); }

/* Welcome */
.welcome-screen { position: fixed; inset: 0; overflow: hidden; background: #12172e; color: #fff; z-index: 1000; }
.welcome-art { position: absolute; inset: 0; background-image: image-set(url("./assets/flowford-hero.webp") type("image/webp"), url("./assets/flowford-hero.png") type("image/png")); background-position: center; background-size: cover; background-repeat: no-repeat; animation: welcomeIn 1s ease-out both; }
.welcome-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,10,29,.08), rgba(8,11,30,.06) 45%, rgba(10,13,35,.82) 72%, #0e122b 100%); }
.welcome-screen::before, .welcome-screen::after { content: ""; position: absolute; border-radius: 999px; filter: blur(90px); opacity: .34; }
.welcome-screen::before { width: 380px; height: 380px; background: #b5507d; left: -160px; top: 25%; }
.welcome-screen::after { width: 340px; height: 340px; background: #237be2; right: -180px; top: 18%; }
.welcome-brand { position: absolute; top: 28px; left: 38px; display: flex; align-items: center; gap: 11px; font: 700 11px/1 "Segoe UI", sans-serif; letter-spacing: .2em; z-index: 2; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #826ff2, #5444c2); box-shadow: 0 7px 18px rgba(88,69,198,.28); }
.brand-mark--light { width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.brand-mark__play { width: 13px; height: 13px; display: block; position: relative; border: 2px solid white; border-radius: 4px; }
.brand-mark__play::after { content: ""; position: absolute; border-left: 5px solid #fff; border-top: 3px solid transparent; border-bottom: 3px solid transparent; left: 4px; top: 2px; }
.welcome-content { position: absolute; z-index: 2; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(510px, calc(100% - 48px)); text-align: center; }
.welcome-kicker { margin: 0 0 5px; color: #c8c5d8; font: 700 10px/1.4 "Segoe UI", sans-serif; letter-spacing: .22em; }
.welcome-kicker span { display: inline-block; width: 18px; height: 1px; margin: 0 8px 3px 0; background: #d7ff43; }
.welcome-content h1 { margin: 0; font: 700 clamp(38px, 5vw, 59px)/1.1 "Segoe UI", sans-serif; letter-spacing: -.045em; }
.welcome-tagline { max-width: 450px; margin: 9px auto 19px; color: #c7c7d3; font: 400 14px/1.6 "Segoe UI", sans-serif; }
.google-button { width: min(330px, 100%); height: 50px; border: 0; border-radius: 14px; background: #fff; color: #25222d; display: inline-flex; justify-content: center; align-items: center; gap: 12px; font: 600 14px/1 "Segoe UI", sans-serif; box-shadow: 0 15px 36px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s; }
.google-button:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(0,0,0,.32); }
.google-button svg { width: 19px; height: 19px; }
.welcome-note { margin: 13px 0 0; color: #8f91a6; font: 400 10px/1 "Segoe UI", sans-serif; }
.welcome-footer { position: absolute; left: 38px; right: 38px; bottom: 23px; display: flex; justify-content: space-between; color: #686c86; font: 600 9px/1 "Segoe UI", sans-serif; letter-spacing: .1em; z-index: 2; }
@keyframes welcomeIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes welcomeOut { to { opacity: 0; transform: scale(1.02); } }
.welcome-screen.is-leaving { animation: welcomeOut .5s ease-in both; }

/* Shell */
.app-shell { display: flex; width: 100vw; height: 100vh; background: var(--bg); }
.sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); min-height: 100%; display: flex; flex-direction: column; padding: 18px 13px 13px; background: #fbfafc; border-right: 1px solid var(--line); z-index: 30; }
.sidebar__brand { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 7px; margin-bottom: 13px; }
.sidebar__brand .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.sidebar__brand > div:nth-child(2) { display: flex; flex-direction: column; }
.sidebar__brand strong { font-size: 14px; line-height: 1.05; letter-spacing: -.02em; }
.sidebar__brand span { margin-top: 3px; color: #898492; font-size: 9px; }
.sidebar-close { display: none; margin-left: auto; }
.create-button { height: 42px; border: 0; border-radius: 11px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 9px 22px rgba(29,25,37,.15); }
.create-button:hover { background: #39333f; transform: translateY(-1px); }
.create-button span { color: var(--lime); font-size: 18px; font-weight: 400; }
.nav-list { margin-top: 15px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dcd8e2 transparent; }
.nav-label { margin: 15px 10px 6px; color: #a19ba8; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-item { position: relative; width: 100%; height: 35px; margin: 2px 0; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 9px; background: transparent; color: #625d69; text-align: left; font-size: 11px; font-weight: 600; }
.nav-item:hover { background: #f1eff4; color: var(--ink); }
.nav-item.is-active { background: var(--purple-soft); color: var(--purple-dark); font-weight: 700; }
.nav-item.is-active::before { content: ""; position: absolute; left: -13px; height: 19px; width: 3px; border-radius: 0 4px 4px 0; background: var(--purple); }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; color: #777080; font-size: 14px; font-weight: 500; }
.nav-icon--spark { color: var(--purple); }
.nav-item span:nth-child(2) { flex: 1; }
.nav-item b { padding: 2px 6px; border-radius: 20px; background: var(--lime); color: #566319; font-size: 7px; }
.sidebar__bottom { margin-top: auto; }
.storage-card { margin: 8px 2px 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.storage-card__top { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: var(--muted); }
.storage-card__top b { color: #585260; font-size: 8px; }
.storage-track { height: 4px; margin: 8px 0 6px; border-radius: 10px; background: #eceaf0; overflow: hidden; }
.storage-track span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--purple), #9b8cf3); }
.storage-card button { padding: 0; border: 0; background: transparent; color: var(--purple); font-size: 8px; font-weight: 700; }
.profile-row { width: 100%; min-height: 44px; padding: 6px 6px; border: 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: transparent; text-align: left; }
.avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f1a177, #7555c8); color: white; font-size: 11px; font-weight: 800; }
.profile-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-row strong { font-size: 9px; }
.profile-row small { color: var(--muted); font-size: 8px; }
.profile-more { color: #97919c; font-size: 9px; }

.main-area { min-width: 0; flex: 1; display: flex; flex-direction: column; height: 100vh; }
.topbar { height: 53px; flex: 0 0 53px; padding: 0 15px 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); z-index: 20; }
.topbar__left, .topbar__actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: #9a94a1; font-size: 10px; white-space: nowrap; }
.breadcrumb button { border: 0; padding: 3px 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; }
.breadcrumb button span { color: var(--muted); margin-left: 4px; }
.save-state { margin-left: 8px; color: #918b98; font-size: 8px; white-space: nowrap; }
.save-state i { width: 5px; height: 5px; display: inline-block; margin: 0 4px 1px 0; border-radius: 50%; background: var(--green); }
.divider { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }
.topbar-button { height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #5f5967; display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.topbar-button:hover { border-color: #cfc9d8; background: #faf9fc; }
.topbar-button--ghost { color: var(--ink); }
.topbar-button--export { border-color: var(--purple); background: var(--purple); color: white; padding: 0 13px; box-shadow: 0 7px 15px rgba(103,86,217,.2); }
.topbar-button--export:hover { background: var(--purple-dark); border-color: var(--purple-dark); }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.status-dot--green { background: var(--green); box-shadow: 0 0 0 3px rgba(51,180,123,.12); }
.mobile-menu { display: none; }

/* Studio layout */
.studio-view { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 198px; overflow: hidden; }
.studio-grid { min-height: 0; display: grid; grid-template-columns: var(--tool-panel) minmax(330px, 1fr) var(--inspector); }
.tool-panel, .inspector-panel { min-width: 0; background: white; overflow: hidden; }
.tool-panel { border-right: 1px solid var(--line); }
.tool-panel__header { height: 62px; padding: 0 13px 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.tool-panel__header > div { display: flex; align-items: center; gap: 9px; }
.tool-heading-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--purple-soft); color: var(--purple); font-size: 14px; }
.tool-panel__header h2 { margin: 0; font-size: 12px; line-height: 1.25; }
.tool-panel__header p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.tool-content { height: calc(100% - 62px); overflow-y: auto; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: #d9d5de transparent; }
.tool-section { padding: 13px 16px; border-bottom: 1px solid #efedf2; }
.compact-section { padding-top: 11px; padding-bottom: 11px; }
.field-label { min-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.field-label label, .field-label > label { font-size: 9px; font-weight: 800; }
.field-label span { color: #9b95a2; font-size: 7px; }
.text-button { border: 0; background: transparent; color: var(--purple); font-size: 8px; font-weight: 700; }
.link-input-wrap { height: 36px; padding: 0 5px 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid #d9d4e2; border-radius: 9px; background: white; }
.link-input-wrap:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(103,86,217,.08); }
.link-input-wrap > span { color: var(--purple); font-size: 13px; }
.link-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: #4d4855; font-size: 8px; text-overflow: ellipsis; }
.link-input-wrap button { height: 25px; padding: 0 9px; border: 0; border-radius: 6px; background: var(--purple-soft); color: var(--purple); font-size: 8px; font-weight: 700; }
.product-link-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 7px; margin-top: 8px; }
.product-link-actions button, .product-image-upload { min-height: 31px; display: grid; place-items: center; margin: 0; border: 1px solid #403600; border-radius: 8px; background: #181504; color: #f1df78; font-size: 7.5px; font-weight: 750; cursor: pointer; text-align: center; }
.product-link-actions button:hover, .product-image-upload:hover { border-color: #ffe600; color: #fff18a; }
.product-link-actions button:disabled { opacity: .55; cursor: wait; }
.product-image-upload input { display: none; }
.product-link-status { min-height: 14px; margin: 7px 2px 0; color: #9d9565; font-size: 7px; line-height: 1.45; }
.product-link-status[data-state="processing"] { color: #76b9ff; }
.product-link-status[data-state="success"] { color: #65d58b; }
.product-link-status[data-state="error"] { color: #ff7373; }
.product-meta-card { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid #383100; border-radius: 10px; background: #080800; }
.product-meta-card label > span { display: block; margin-bottom: 5px; color: #cabe76; font-size: 7px; font-weight: 700; }
.product-meta-card input, .product-meta-card textarea { width: 100%; border: 1px solid #3e3600; border-radius: 7px; background: #030303; color: #fff2a0; padding: 8px; outline: none; font: 8px/1.45 "Segoe UI",sans-serif; resize: vertical; }
.product-meta-card input:focus, .product-meta-card textarea:focus { border-color: #ffe600; box-shadow: 0 0 0 3px rgba(255,230,0,.08); }
.product-meta-card button { min-height: 31px; border: 1px solid #ffe600; border-radius: 8px; background: #ffe600; color: #050505; font-size: 8px; font-weight: 800; cursor: pointer; }
.platforms { display: flex; gap: 5px; margin-top: 7px; }
.platforms span { padding: 3px 6px; border-radius: 5px; background: #f3f1f5; color: #8a8490; font-size: 6px; font-weight: 700; }
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.style-card { position: relative; min-width: 0; height: 82px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: white; display: grid; grid-template-columns: 39px 1fr; grid-template-rows: 22px 18px; text-align: left; overflow: hidden; }
.style-card:hover { border-color: #c4bdd3; }
.style-card.is-selected { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple), 0 5px 14px rgba(103,86,217,.08); }
.style-visual { grid-row: 1 / 3; width: 34px; height: 54px; border-radius: 7px; display: grid; place-items: center; color: white; font-size: 18px; font-weight: 900; }
.style-visual--sale { background: linear-gradient(145deg, #f89067, #c54d6d); }
.style-visual--fun { background: linear-gradient(145deg, #ffd263, #e78648); }
.style-visual--pet { background: linear-gradient(145deg, #79c7eb, #5d78c9); }
.style-visual--story { background: linear-gradient(145deg, #9a84d8, #504a8c); }
.style-card strong { align-self: end; font-size: 8px; }
.style-card small { color: var(--muted); font-size: 6.5px; }
.style-card i, .character-card i, .caption-style i, .cover-card i { display: none; position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--purple); color: white; font: 800 8px/14px "Segoe UI", sans-serif; text-align: center; }
.style-card.is-selected i, .character-card.is-selected i, .caption-style.is-selected i, .cover-card.is-selected i { display: block; }
.segment-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 9px; background: #f2f0f5; }
.segment-control button { height: 36px; border: 0; border-radius: 7px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 8px; font-weight: 800; }
.segment-control button small { color: var(--muted); font-size: 6px; font-weight: 500; }
.segment-control button.is-selected { background: white; color: var(--purple); box-shadow: 0 2px 8px rgba(45,35,63,.08); }
.tool-section textarea, .full-input { width: 100%; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #fbfafc; color: #4c4653; font-size: 8px; line-height: 1.7; resize: none; }
.tool-section textarea { min-height: 78px; padding: 9px; }
.full-input { height: 36px; padding: 0 10px; }
.tool-section textarea:focus, .full-input:focus { border-color: var(--purple); background: white; }
.script-actions { display: flex; gap: 5px; margin-top: 6px; }
.script-actions button { height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: white; color: #655f6b; font-size: 7px; font-weight: 700; }
.script-actions button:first-child { color: var(--purple); }
.script-actions button { flex: 1; padding: 0 5px; }
.voice-playback-status { margin: 9px 14px 8px; padding: 8px 9px; border: 1px solid #4a3e00; border-radius: 8px; background: #0d0c05; color: #d6c669; font-size: 7.5px; line-height: 1.45; }
.voice-playback-status.is-speaking { border-color: #ffe600; color: #ffe95b; box-shadow: 0 0 14px rgba(255,230,0,.1); }
.generate-button { width: calc(100% - 32px); min-height: 49px; margin: 13px 16px 0; padding: 0 11px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #6d5ade, #5344bf); color: white; display: flex; align-items: center; gap: 9px; text-align: left; box-shadow: 0 10px 22px rgba(88,70,199,.25); }
.generate-button:hover { transform: translateY(-1px); box-shadow: 0 13px 26px rgba(88,70,199,.3); }
.generate-button > span:first-child { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.16); color: var(--lime); }
.generate-button > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.generate-button strong { font-size: 9px; }
.generate-button small { color: #d5d0ef; font-size: 7px; }
.generate-button b { font-size: 15px; }
.generate-button.is-loading > span:first-child { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tool variants */
.tool-intro { margin: 12px 14px 0; padding: 11px; border-radius: 10px; display: flex; gap: 10px; align-items: center; }
.tool-intro > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.75); font-size: 11px; font-weight: 800; }
.tool-intro strong { font-size: 9px; }
.tool-intro p { margin: 2px 0 0; color: #716b78; font-size: 7px; }
.tool-intro--purple { background: #f0edff; color: #5c4bc3; }
.tool-intro--blue { background: #e9f5ff; color: #3d7dbd; }
.tool-intro--orange { background: #fff1e7; color: #ba6d38; }
.tool-intro--green { background: #eaf8f1; color: #328762; }
.tool-intro--pink { background: #fff0f3; color: #bf6177; }
.voice-grid { display: grid; gap: 6px; }
.voice-card { height: 47px; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; background: white; text-align: left; }
.voice-card.is-selected { border-color: var(--purple); background: #faf9ff; }
.voice-card > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f4a282, #8d59c3); color: white; font-size: 9px; font-weight: 800; }
.voice-card:nth-child(2) > span, .voice-card:nth-child(4) > span { background: linear-gradient(145deg, #6bbec3, #4d679f); }
.voice-card div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.voice-card strong { font-size: 8px; }
.voice-card small { color: var(--muted); font-size: 7px; }
.voice-card i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f1eff5; color: var(--purple); font: normal 7px/1 sans-serif; }
.range-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.range-heading label { font-size: 8px; font-weight: 800; }
.range-heading output { min-width: 31px; height: 19px; display: grid; place-items: center; border-radius: 5px; background: var(--purple-soft); color: var(--purple); font-size: 7px; font-weight: 800; }
input[type="range"] { width: 100%; height: 4px; accent-color: var(--purple); }
.range-labels { display: flex; justify-content: space-between; color: #9f99a6; font-size: 6px; }
.chip-options { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-options button { height: 27px; padding: 0 9px; border: 1px solid var(--line); border-radius: 20px; background: white; font-size: 7px; }
.chip-options button.is-selected { border-color: var(--purple); background: var(--purple-soft); color: var(--purple); font-weight: 700; }
.panel-primary { width: calc(100% - 32px); height: 38px; margin: 14px 16px; border: 0; border-radius: 9px; background: var(--purple); color: white; font-size: 9px; font-weight: 800; box-shadow: 0 8px 18px rgba(103,86,217,.2); }
.caption-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.caption-style { position: relative; height: 74px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 6px; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.caption-style.is-selected { border-color: var(--purple); }
.caption-style > span { width: 100%; height: 38px; display: grid; place-items: center; border-radius: 5px; background: #242133; color: white; font-size: 6px; font-weight: 800; text-align: center; }
.caption-style > span b { color: var(--lime); }
.caption-style strong { font-size: 7px; }
.color-swatches { display: flex; align-items: center; gap: 9px; }
.color-swatches button { width: 27px; height: 27px; padding: 0; border: 3px solid white; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #d5d0db; }
.color-swatches button.is-selected { box-shadow: 0 0 0 2px var(--purple); }
.toggle-list { display: grid; gap: 10px; }
.toggle-list label { display: flex; align-items: center; }
.toggle-list label > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.toggle-list strong { font-size: 8px; }
.toggle-list small { color: var(--muted); font-size: 6.5px; }
.toggle-list input { display: none; }
.toggle-list i { width: 29px; height: 17px; padding: 2px; border-radius: 20px; background: #d8d4dd; }
.toggle-list i::after { content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .2s; }
.toggle-list input:checked + i { background: var(--purple); }
.toggle-list input:checked + i::after { transform: translateX(12px); }
.character-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.character-card { position: relative; height: 104px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: white; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.character-card.is-selected { border-color: var(--purple); }
.character-avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50% 50% 45% 45%; color: white; font-size: 17px; font-weight: 800; box-shadow: inset 0 -8px 14px rgba(0,0,0,.08); }
.character-avatar--one { background: linear-gradient(145deg, #f4c2a6, #df7993 58%, #5b436f 59%); }
.character-avatar--two { background: linear-gradient(145deg, #c69d7c, #5d87af 58%, #344a64 59%); }
.character-avatar--three { background: linear-gradient(145deg, #e0ac69, #bc734e); }
.character-avatar--none { background: #e8e5eb; color: #918b98; }
.character-card strong { font-size: 8px; }
.character-card small { color: var(--muted); font-size: 6px; }
.position-picker { width: 112px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 auto; }
.position-picker button { width: 32px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: #faf9fb; color: #8c8593; font-size: 9px; }
.position-picker button.is-selected { border-color: var(--purple); background: var(--purple-soft); color: var(--purple); }
.adjustment-list { display: grid; gap: 15px; }
.adjustment-list input { width: 100%; height: 3px; accent-color: var(--purple); }
.filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.filter-grid button { height: 77px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: white; display: flex; flex-direction: column; gap: 5px; }
.filter-grid button.is-selected { border-color: var(--purple); }
.filter-preview { height: 49px; border-radius: 5px; background: radial-gradient(circle at 65% 45%, #f5dad7 0 12%, transparent 13%), linear-gradient(150deg, #3c4974 45%, #d899a0 46% 65%, #705970 66%); }
.filter-preview--warm { filter: sepia(.45) saturate(1.2); }
.filter-preview--film { filter: contrast(.85) saturate(.7); }
.filter-preview--drama { filter: contrast(1.5) saturate(.6) brightness(.75); }
.filter-grid strong { font-size: 7px; }
.cover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cover-card { position: relative; height: 118px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: white; display: flex; flex-direction: column; gap: 5px; }
.cover-card.is-selected { border-color: var(--purple); }
.cover-preview { height: 84px; border-radius: 6px; display: grid; place-items: center; color: white; text-align: center; overflow: hidden; }
.cover-preview b { font-size: 11px; line-height: 1.35; text-shadow: 0 2px 7px rgba(0,0,0,.4); }
.cover-preview em { color: var(--lime); font-style: normal; font-size: 13px; }
.cover-preview--one { background: radial-gradient(circle at 65% 35%, #ffd1be 0 13%, transparent 14%), linear-gradient(145deg, #704d9f, #e37d85); }
.cover-preview--two { background: linear-gradient(145deg, #e8d8c7, #8fb6b0); }
.cover-preview--three { background: linear-gradient(145deg, #db9d85, #785680); }
.cover-preview--four { background: linear-gradient(145deg, #d84968, #512954); }
.cover-card strong { font-size: 7px; }
.upload-zone { margin: 15px; height: 145px; border: 1px dashed #bfb8cb; border-radius: 12px; background: #faf9fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.upload-zone.is-dragging { border-color: var(--purple); background: var(--purple-soft); }
.upload-zone > span { color: var(--purple); font-size: 22px; }
.upload-zone strong { font-size: 9px; }
.upload-zone p { margin: 0; color: var(--muted); font-size: 7px; }
.upload-zone button { height: 27px; margin-top: 4px; padding: 0 10px; border: 1px solid var(--purple); border-radius: 7px; background: white; color: var(--purple); font-size: 7px; font-weight: 700; }
.media-list { display: grid; gap: 6px; }
.media-list > button { height: 48px; display: flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: white; text-align: left; }
.media-thumb { width: 49px; height: 37px; display: grid; place-items: center; border-radius: 5px; color: white; font-size: 8px; }
.media-thumb--one { background: linear-gradient(145deg, #d59e9f, #604967); }
.media-thumb--two { background: linear-gradient(145deg, #cea88c, #955f6c); }
.media-thumb--three { background: linear-gradient(145deg, #807b9c, #d7aaa6); }
.media-list div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.media-list strong { font-size: 7px; }
.media-list small { color: var(--muted); font-size: 6px; }
.media-list i { color: var(--muted); font-style: normal; }

/* Automatic clip mixer */
.mixer-upload { margin: 13px 14px 0; padding: 11px; border: 1px dashed #8b7cf6; border-radius: 11px; background: linear-gradient(145deg, rgba(103,86,217,.16), rgba(73,136,232,.08)); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; }
.mixer-upload.is-dragging { border-style: solid; box-shadow: 0 0 0 3px rgba(139,124,246,.14); }
.mixer-upload__icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(139,124,246,.17); color: #a89bff; font-size: 17px; }
.mixer-upload div:nth-child(2) { min-width: 0; }
.mixer-upload strong { display: block; font-size: 8px; }
.mixer-upload p { margin: 2px 0 0; color: var(--muted); font-size: 6px; }
.mixer-upload button { height: 27px; padding: 0 8px; border: 0; border-radius: 7px; background: var(--purple); color: white; font-size: 6.5px; font-weight: 800; }
.mixer-empty { min-height: 75px; border: 1px dashed var(--line-strong); border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.mixer-empty > span { color: #8b7cf6; font-size: 15px; }.mixer-empty strong { margin-top: 3px; font-size: 7.5px; }.mixer-empty p { margin: 2px 0 0; font-size: 6px; }
.mixer-queue { display: grid; gap: 6px; }
.mixer-clip { min-height: 70px; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.mixer-drag { color: #746e7e; font: 700 9px/1 monospace; cursor: grab; }
.mixer-thumb { position: relative; width: 39px; height: 54px; flex: 0 0 39px; overflow: hidden; border-radius: 6px; background: #15141c; }
.mixer-thumb video { width: 100%; height: 100%; object-fit: cover; }
.mixer-thumb b { position: absolute; left: 3px; bottom: 3px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: white; font-size: 6px; }
.mixer-clip__info { min-width: 0; flex: 1; }.mixer-clip__info > strong { display: block; overflow: hidden; color: var(--ink); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.mixer-clip__info > small { color: var(--muted); font-size: 5.5px; }
.trim-row { display: flex; gap: 4px; margin-top: 5px; }.trim-row label { height: 19px; padding: 0 4px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 5.5px; }.trim-row input { width: 34px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 6px; }
.mixer-clip__actions { display: grid; gap: 2px; }.mixer-clip__actions button { width: 20px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 7px; }.mixer-clip__actions button:hover { border-color: var(--purple); color: #a89bff; }.mixer-clip__actions button:last-child:hover { border-color: var(--red); color: var(--red); }
.mix-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.mix-mode-grid button { height: 66px; padding: 6px 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); display: flex; flex-direction: column; align-items: center; gap: 2px; }.mix-mode-grid button > span { color: #9f91ff; font-size: 14px; }.mix-mode-grid strong { font-size: 6.5px; }.mix-mode-grid small { color: var(--muted); font-size: 5px; }.mix-mode-grid button.is-selected { border-color: var(--purple); background: rgba(103,86,217,.13); }
.mixer-caption-row { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }.mixer-caption-row > span { color: var(--muted); font-size: 7px; }
.mini-segments { display: flex; gap: 3px; }.mini-segments button { min-width: 24px; height: 23px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 6px; }.mini-segments button.is-selected { border-color: var(--purple); background: var(--purple); color: white; }
.auto-caption-check { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 7px; }.auto-caption-check input { display: none; }.auto-caption-check > span { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 4px; }.auto-caption-check input:checked + span { border-color: var(--purple); background: var(--purple); color: white; }.auto-caption-check i { display: none; font-style: normal; font-size: 7px; }.auto-caption-check input:checked + span i { display: inline; }
.mixer-generate:disabled { cursor: not-allowed; filter: grayscale(.55); opacity: .5; box-shadow: none; }

/* Expanded voices, captions and covers */
.voice-filter-bar { margin: 10px 14px 0; padding: 3px; border-radius: 8px; background: var(--panel-soft); display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }.voice-filter-bar button { height: 25px; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 6px; }.voice-filter-bar button.is-selected { background: var(--purple); color: white; font-weight: 800; }
.voice-card em { margin-right: 3px; padding: 2px 4px; border-radius: 10px; background: rgba(215,255,67,.14); color: #bedf42; font-size: 5px; font-style: normal; font-weight: 800; }.voice-card.is-filtered-out { display: none; }.voice-card:nth-child(n) > span { font-size: 7px; }
.word-count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.word-count-grid button { height: 43px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }.word-count-grid strong { font-size: 9px; }.word-count-grid small { color: var(--muted); font-size: 5.5px; }.word-count-grid button.is-selected { border-color: var(--purple); background: rgba(103,86,217,.15); color: #b7adff; }
.highlight-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }.highlight-count button { height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 6px; }.highlight-count button.is-selected { border-color: var(--purple); background: var(--purple); color: white; }
.caption-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }.caption-palette label { padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); display: flex; align-items: center; gap: 4px; }.caption-palette label span { color: var(--muted); font-size: 5.5px; }.caption-palette input { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; }.caption-palette label.is-disabled { opacity: .28; }
.caption-live-example { min-height: 36px; margin-top: 8px; padding: 7px; border-radius: 7px; background: #111019; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }.caption-live-example span { color: var(--token-color); font-size: 8px; font-weight: 900; }
.caption-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }.caption-token { color: white; transition: transform .18s, color .18s; }.caption-token.is-speaking { color: var(--token-color); transform: scale(1.08); }
.cover-preview--five { background: linear-gradient(90deg, #9f7685 0 49%, #e6bd9c 50%); }.cover-preview--six { position: relative; background: linear-gradient(145deg, #1e294c, #c83f54); }.cover-preview--six small { position: absolute; top: 6px; left: 6px; padding: 2px 4px; border-radius: 2px; background: #ff344e; color: white; font-size: 5px; font-weight: 900; }.cover-preview--seven { background: repeating-linear-gradient(135deg, #6b50ba 0 12px, #745ac5 12px 24px); }.cover-preview--eight { background: radial-gradient(circle at 70% 25%, #8d6a36, transparent 25%), linear-gradient(145deg, #151515, #4d3824); }.cover-preview--eight em { color: #f1ce83; font-size: 8px; letter-spacing: .08em; }
.cover-effects { display: flex; flex-wrap: wrap; gap: 5px; }.cover-effects button { height: 26px; padding: 0 7px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-soft); color: var(--muted); font-size: 6px; }.cover-effects button.is-selected { border-color: #8978f1; background: rgba(103,86,217,.18); color: #b7adff; }

/* Professional twilight theme — softer than pure white for long editing sessions */
:root { --bg: #15141c; --panel: #211f2a; --panel-soft: #292631; --line: #3b3746; --line-strong: #4a4554; --ink: #f3eff8; --muted: #aaa4b4; --muted-2: #817a89; --purple: #7b69eb; --purple-dark: #9b8cff; --purple-soft: #302a4b; --shadow: 0 20px 55px rgba(4,3,9,.34); }
body, .app-shell { background: radial-gradient(circle at 55% -20%, #2f2945 0, #171620 38%, #13121a 100%); }
.sidebar { background: #191820; border-color: #34313c; box-shadow: 12px 0 34px rgba(4,3,9,.18); }
.sidebar__brand span, .nav-label, .profile-row small, .storage-card__top { color: #8f8999; }
.nav-item { color: #aaa4b2; }.nav-item:hover { background: #25232e; color: #f3eff8; }.nav-item.is-active { background: linear-gradient(90deg, rgba(123,105,235,.23), rgba(123,105,235,.09)); color: #c0b7ff; }.nav-icon { color: #918a9c; }
.storage-card, .profile-row { border-color: #35313e; background: #201e28; }.storage-track { background: #34313e; }
.topbar { border-color: #37333f; background: rgba(27,26,35,.92); }.breadcrumb button, .dashboard-heading h2 { color: #f3eff8; }.topbar .icon-button { color: #aaa4b2; }.divider { background: #3d3945; }.topbar-button { border-color: #403b49; background: #27242f; color: #c4becc; }.topbar-button:hover { border-color: #5a5364; background: #302d39; }.topbar-button--export { border-color: var(--purple); background: var(--purple); color: white; }
.tool-panel, .inspector-panel { background: #211f2a; }.tool-panel, .inspector-panel, .tool-panel__header, .inspector-tabs, .tool-section { border-color: #393541; }.tool-panel__header { background: #22202b; }.tool-content, .inspector-content { scrollbar-color: #4a4553 transparent; }
.link-input-wrap, .style-card, .voice-card, .caption-style, .character-card, .filter-grid button, .cover-card, .media-list > button, .scene-actions button, .mixer-clip { border-color: #3d3947; background: #292631; }.link-input-wrap input, .full-input, .tool-section textarea { color: #e5e0eb; background: #292631; }.link-input-wrap:focus-within, .tool-section textarea:focus, .full-input:focus { background: #2d2a36; }.platforms span, .segment-control, .script-actions button, .voice-card i { background: #302d38; color: #b2abba; }.segment-control button.is-selected { background: #453b73; color: white; }.script-actions button { border-color: #403b49; }.style-card strong, .voice-card strong, .character-card strong, .cover-card strong { color: #f2eef7; }
.upload-zone { border-color: #554d68; background: #26232f; }.upload-zone button { background: #2e2a38; }.toggle-list i { background: #4a4552; }
.workspace { background: #15141c; }.canvas-toolbar, .playback-bar { border-color: #37333f; background: #1d1c25; }.canvas-stage { background-color: #171620; background-image: radial-gradient(#3a3643 1px, transparent 1px); }.canvas-stage::before { background: radial-gradient(circle at center, rgba(106,88,162,.13), transparent 66%); }.canvas-tools > button:first-child { border-color: #403b49; background: #292631; color: #bbb4c2; }
.inspector-tabs button { background: #211f2a; color: #938d9d; }.inspector-tabs button.is-active { color: #f3eff8; }.summary-card { border-color: #443b69; background: linear-gradient(145deg, #29253c, #252237); }.summary-card__top small, .summary-card > p { color: #aaa4b4; }.inspector-section { border-color: #393541; }.project-summary dd { color: #e2dce9; }.autosave-note > span { background: rgba(51,180,123,.15); }
.timeline-panel, .track-labels { border-color: #37333f; background: #1c1b24; }.timeline-header, .track-labels > div, .ruler, .track { border-color: #35313d; }.track-labels > div { color: #a59ead; }.tracks-wrap { background-color: #181720; background-image: linear-gradient(90deg, rgba(71,65,79,.28) 1px, transparent 1px); }.clip { background: #34303f; }.clip b { color: #eee9f4; }.clip small { color: #aaa3b1; }
.dashboard-view { background: radial-gradient(circle at 70% 0, rgba(103,86,217,.09), transparent 38%); }.dash-panel { border-color: #3a3642; background: #211f2a; }.section-heading h3, .project-card > div:last-child strong, .service-list strong { color: #f1edf5; }.system-button { border-color: #403b49; background: #292631; color: #c5becd; }
.modal, .export-drawer, .toast { border: 1px solid #3b3745; background: #22202a; color: #f3eff8; }.modal__header, .drawer__header, .modal__footer { border-color: #3a3642; }.api-field > div, .select-field select { border-color: #403b49; background: #2a2733; color: #e8e3ec; }.api-field input { background: transparent; color: #e8e3ec; }.export-preview, .export-options { background: #2a2733; }.secondary-button { border-color: #403b49; background: #2a2733; color: #c1bac9; }
.log-legend { background: #292631; }.log-list article:not(:last-child)::after { border-color: #413c48; }.icon-button:hover { background: #302d39; color: white; }

/* Canvas */
.workspace { min-width: 0; display: flex; flex-direction: column; background: #eceaf0; }
.canvas-toolbar { height: 45px; flex: 0 0 45px; padding: 0 12px; border-bottom: 1px solid #dbd7df; display: flex; align-items: center; justify-content: space-between; background: #f7f6f9; }
.canvas-tabs { height: 100%; display: flex; align-items: stretch; gap: 12px; }
.canvas-tabs button { padding: 0 3px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #938d99; font-size: 8px; font-weight: 700; }
.canvas-tabs button.is-active { border-bottom-color: var(--purple); color: var(--ink); }
.canvas-tools { display: flex; align-items: center; gap: 3px; }
.canvas-tools > button:first-child { height: 29px; padding: 0 8px; border: 1px solid #ddd9e1; border-radius: 7px; background: white; color: #67616d; font-size: 8px; }
.canvas-stage { position: relative; min-height: 0; flex: 1; display: grid; place-items: center; overflow: hidden; background-image: radial-gradient(#d3cfd8 1px, transparent 1px); background-size: 18px 18px; }
.canvas-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,.44), transparent 66%); }
.video-canvas { position: relative; height: min(calc(100% - 20px), 385px); aspect-ratio: 9 / 16; max-width: 70%; overflow: hidden; border-radius: 4px; background: #4a374c; box-shadow: 0 18px 40px rgba(43,35,54,.22); transform: translateZ(0); }
.video-canvas video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: none; }
.product-preview-image { position: absolute; z-index: 2; left: 50%; top: 48%; display: none; width: 74%; height: 58%; object-fit: contain; transform: translate(-50%,-50%); filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.product-preview-image.is-visible { display: block; }
.video-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, rgba(255,229,209,.7), transparent 20%), radial-gradient(circle at 22% 67%, rgba(255,255,255,.3), transparent 22%), linear-gradient(160deg, #f0bbb0 0 23%, #b98291 50%, #5c3c5d 100%); }
.video-backdrop::before { content: ""; position: absolute; width: 120%; height: 48%; left: -10%; bottom: -4%; transform: rotate(-8deg); background: linear-gradient(135deg, #c2969e, #7d586d); border-radius: 50% 50% 0 0; }
.video-backdrop::after { content: ""; position: absolute; width: 60%; height: 30%; top: 20%; right: -15%; background: rgba(255,244,228,.35); filter: blur(18px); }
.product-orb { position: absolute; border-radius: 50%; background: rgba(255,245,230,.5); box-shadow: inset -10px -8px 20px rgba(122,74,97,.18); }
.product-orb--one { width: 36px; height: 36px; left: 12%; top: 27%; }
.product-orb--two { width: 20px; height: 20px; right: 12%; top: 39%; }
.product-bottle { position: absolute; left: 50%; top: 48%; width: 78px; height: 145px; transform: translate(-50%, -50%) rotate(-5deg); filter: drop-shadow(0 16px 16px rgba(56,29,49,.32)); }
.bottle-cap { position: absolute; width: 35px; height: 28px; left: 21px; top: 0; border-radius: 7px 7px 2px 2px; background: linear-gradient(90deg, #b39594, #f1d7ca, #9f7b80); }
.bottle-cap::before { content: ""; position: absolute; width: 22px; height: 11px; left: 7px; top: -8px; border-radius: 5px 5px 1px 1px; background: #d9bcb2; }
.bottle-body { position: absolute; inset: 26px 4px 0; border-radius: 10px 10px 17px 17px; background: linear-gradient(90deg, rgba(255,238,226,.76), rgba(255,255,249,.95) 48%, rgba(226,194,190,.75)); border: 1px solid rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #765460; }
.bottle-body i { font: 700 13px/1 "Segoe UI", sans-serif; letter-spacing: .12em; }
.bottle-body b { margin-top: 4px; font: 600 6px/1 "Segoe UI", sans-serif; letter-spacing: .25em; }
.bottle-body small { margin-top: 11px; font: 500 5px/1 "Segoe UI", sans-serif; }
.video-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 20px; background: rgba(38,27,42,.55); backdrop-filter: blur(8px); color: white; font-size: 6px; font-weight: 700; }
.caption-preview { position: absolute; left: 7%; right: 7%; bottom: 20%; color: white; font-size: 14px; line-height: 1.25; font-weight: 900; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.65); }
.caption-preview span { display: inline-block; }
.caption-preview b { color: var(--lime); }
.video-cta { position: absolute; left: 17%; right: 17%; bottom: 7%; height: 22px; border-radius: 20px; background: white; color: #644a5c; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 7px; font-weight: 800; box-shadow: 0 5px 12px rgba(0,0,0,.18); }
.video-cta span { color: #c04b71; font-size: 12px; }
.safe-area { position: absolute; left: 5%; right: 5%; height: 1px; border-top: 1px dashed rgba(255,255,255,.25); }
.safe-area--top { top: 12%; }.safe-area--bottom { bottom: 14%; }
.stage-side-note { position: absolute; left: calc(50% + 75px); top: 26%; display: flex; align-items: flex-start; gap: 6px; color: #a19ba6; }
.stage-side-note span { width: 27px; margin-top: 4px; border-top: 1px dashed #aaa4af; }
.stage-side-note p { margin: 0; font-size: 6px; line-height: 1.5; }
.playback-bar { height: 38px; flex: 0 0 38px; padding: 0 12px; border-top: 1px solid #d9d5de; display: flex; align-items: center; justify-content: center; gap: 5px; background: #f8f7f9; color: #89838f; font-size: 7px; }
.playback-bar > div:first-child { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.play-button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--ink); color: white; font-size: 7px; }
.playback-bar time:first-of-type { color: var(--ink); font-weight: 800; }
.playback-right { position: absolute; right: calc(var(--inspector) + 14px); display: flex; align-items: center; }
.playback-right #qualityButton { height: 27px; border: 0; background: transparent; color: #706a76; font-size: 7px; }

/* Inspector */
.inspector-panel { border-left: 1px solid var(--line); }
.inspector-tabs { height: 45px; display: flex; border-bottom: 1px solid var(--line); }
.inspector-tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: white; color: #918b98; font-size: 8px; font-weight: 700; }
.inspector-tabs button.is-active { border-bottom-color: var(--purple); color: var(--ink); }
.inspector-tabs button span { min-width: 13px; height: 13px; margin-left: 3px; padding: 0 3px; border-radius: 7px; background: #efedf2; display: inline-grid; place-items: center; color: #776f7e; font-size: 6px; }
.inspector-content { height: calc(100% - 45px); overflow-y: auto; padding: 11px; scrollbar-width: thin; }
.inspector-section { padding: 11px 3px; border-bottom: 1px solid #eeecf0; }
.summary-card { padding: 11px; border: 1px solid #ded9ee; border-radius: 10px; background: linear-gradient(145deg, #faf9ff, #f4f1ff); }
.summary-card__top { display: flex; align-items: center; gap: 7px; }
.summary-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: white; color: var(--purple); box-shadow: 0 3px 9px rgba(60,47,93,.08); }
.summary-card__top div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.summary-card__top strong { font-size: 8px; }
.summary-card__top small { color: var(--muted); font-size: 6px; }
.summary-progress { height: 4px; margin: 10px 0 5px; border-radius: 10px; background: #ded9e9; overflow: hidden; }
.summary-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), #a38bf4); transition: width .4s; }
.summary-card > p { margin: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 6px; }
.summary-card > p b { color: var(--purple); }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.inspector-heading strong { font-size: 8px; }
.inspector-heading button { border: 0; background: transparent; color: var(--purple); font-size: 6.5px; font-weight: 700; }
.inspector-heading > span { color: var(--muted); font-size: 6.5px; }
.project-summary { margin: 0; display: grid; gap: 7px; }
.project-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.project-summary dt { color: #8e8794; font-size: 7px; }
.project-summary dd { margin: 0; max-width: 130px; color: #4b4650; font-size: 7px; font-weight: 700; text-align: right; }
.project-summary dd i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--green); }
.scene-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.scene-actions button { height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #6d6772; font-size: 6px; }
.scene-actions button span { font-size: 11px; }
.scene-actions button:hover { border-color: var(--purple); color: var(--purple); }
.autosave-note { display: flex; align-items: center; gap: 7px; }
.autosave-note > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e5f6ed; color: var(--green); font-size: 8px; font-weight: 900; }
.autosave-note p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.autosave-note strong { font-size: 7px; }.autosave-note small { color: var(--muted); font-size: 6px; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 3px 1px 9px; }
.log-head span { font-size: 8px; font-weight: 800; }
.log-head button { border: 0; background: transparent; color: var(--red); font-size: 6.5px; }
.log-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px; border-radius: 8px; background: #f7f5f8; }
.log-legend span { display: flex; align-items: center; gap: 4px; color: #817a87; font-size: 6px; }
.log-dot { width: 7px; height: 7px; flex: 0 0 7px; display: inline-block; border-radius: 50%; }
.log-dot--green { background: var(--green); }.log-dot--yellow { background: var(--yellow); }.log-dot--blue { background: var(--blue); }.log-dot--red { background: var(--red); }
.log-dot--blue { animation: pulseDot 1.2s ease-out infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(73,136,232,.45); } 100% { box-shadow: 0 0 0 5px rgba(73,136,232,0); } }
.log-list { margin-top: 8px; display: grid; }
.log-list article { position: relative; min-height: 65px; padding: 8px 2px 7px 20px; display: flex; gap: 7px; }
.log-list article:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: -5px; border-left: 1px solid #ded9e1; }
.log-list article > i { position: absolute; left: 2px; top: 11px; }
.log-list article div { display: flex; flex-direction: column; }
.log-list strong { font-size: 7.5px; }.log-list p { margin: 3px 0; color: var(--muted); font-size: 6.2px; line-height: 1.45; }.log-list time { color: #aba5af; font-size: 5.5px; }

/* Timeline */
.timeline-panel { position: relative; min-height: 0; border-top: 1px solid var(--line-strong); background: #fbfafc; z-index: 10; }
.timeline-header { height: 35px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.timeline-actions, .timeline-zoom { display: flex; align-items: center; gap: 2px; }
.timeline-actions > span { width: 1px; height: 18px; margin: 0 5px; background: var(--line); }
.timeline-actions > button:not(.icon-button) { height: 25px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: #77717d; font-size: 7px; }
.timeline-zoom input { width: 70px; height: 3px; accent-color: var(--purple); }
.timeline-body { height: calc(100% - 35px); display: grid; grid-template-columns: 89px 1fr; overflow: hidden; }
.track-labels { padding-top: 17px; border-right: 1px solid var(--line); background: #f7f6f9; }
.track-labels > div { height: 31px; padding: 0 7px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #eeebf0; color: #77717d; }
.track-labels > div span { width: 14px; color: #8e8794; font-size: 8px; text-align: center; }
.track-labels > div strong { flex: 1; font-size: 6.5px; font-weight: 700; }
.track-labels > div button { border: 0; background: transparent; color: #aaa3ae; font-size: 6px; }
.tracks-wrap { position: relative; min-width: 0; overflow: hidden; background-image: linear-gradient(90deg, rgba(219,215,223,.35) 1px, transparent 1px); background-size: 12.5% 100%; }
.ruler { height: 17px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; border-bottom: 1px solid var(--line); color: #aaa4ae; font-size: 5.5px; }
.playhead { position: absolute; top: 0; bottom: 0; left: 13%; width: 1px; background: #e05669; z-index: 9; pointer-events: none; transition: left .1s linear; }
.playhead span { position: absolute; top: 0; left: -4px; width: 9px; height: 7px; border-radius: 2px 2px 5px 5px; background: #e05669; }
.track { position: relative; height: 31px; border-bottom: 1px solid #eeebf0; overflow: hidden; }
.track--video { display: flex; gap: 2px; padding: 2px 3px; }
.clip { position: relative; min-width: 0; flex-basis: 0; height: 27px; padding: 0 3px 0 26px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #ded8ea; text-align: left; }
.clip:hover, .clip.is-selected { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.clip--one { flex-grow: 5; }.clip--two { flex-grow: 9; }.clip--three { flex-grow: 12; }.clip--four { flex-grow: 10; }.clip--five { flex-grow: 6; }
.clip > span { position: absolute; inset: 0 auto 0 0; width: 22px; background: linear-gradient(145deg, #dea39c, #65465e); }
.clip--two > span { background: linear-gradient(145deg, #a28dc4, #51425e); }.clip--three > span { background: linear-gradient(145deg, #dcc1b8, #99717f); }.clip--four > span { background: linear-gradient(145deg, #eab5a0, #875375); }.clip--five > span { background: linear-gradient(145deg, #b79ae0, #624895); }
.clip b, .clip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clip b { color: #514a57; font-size: 5.5px; }.clip small { color: #8a8390; font-size: 4.8px; }
.track--caption span { position: absolute; top: 5px; height: 21px; padding: 4px 5px; border: 1px solid #b9d6e8; border-radius: 4px; background: #dff1fa; color: #547284; font-size: 5.5px; overflow: hidden; white-space: nowrap; }
.track--voice { margin: 0 3px; width: calc(100% - 6px); background: #f0eafd; border: 1px solid #d8ccf0; border-radius: 4px; }
.track--voice { position: relative; overflow: hidden; }
.track--voice .waveform { opacity: .78; }
.track--voice small { position: absolute; right: 6px; top: 7px; max-width: 45%; overflow: hidden; color: #c9b84e; font-size: 5.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.waveform { display: block; width: 100%; height: 100%; color: #8f74d3; font: 14px/29px monospace; letter-spacing: 1px; overflow: hidden; opacity: .7; }
.track--music { padding: 4px 3px; }
.music-clip { position: relative; display: block; width: 76%; height: 23px; padding: 5px 7px; border: 1px solid #cce5d7; border-radius: 4px; background: #e5f5ec; color: #4d8064; overflow: hidden; }
.music-clip b { position: relative; z-index: 2; font-size: 5.5px; }.music-clip i { position: absolute; left: 0; top: 50%; width: 100%; border-top: 1px dashed #82bd9d; }

/* Dashboard */
.dashboard-view { flex: 1; min-height: 0; padding: 27px 30px; overflow-y: auto; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: flex-end; }
.dashboard-heading p { margin: 0 0 5px; color: var(--muted); font-size: 10px; }
.dashboard-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.primary-button, .secondary-button { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 9px; font-weight: 800; }
.primary-button { border: 0; background: var(--purple); color: white; box-shadow: 0 8px 17px rgba(103,86,217,.2); }
.secondary-button { border: 1px solid var(--line); background: white; color: #6e6873; }
.quick-start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 22px; }
.quick-card { min-height: 128px; padding: 15px; border: 1px solid rgba(0,0,0,.03); border-radius: 15px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; transition: transform .2s, box-shadow .2s; }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.quick-card > span { width: 34px; height: 34px; margin-bottom: 17px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.7); font-size: 15px; }
.quick-card strong { font-size: 11px; }.quick-card small { margin-top: 3px; color: #69636f; font-size: 7.5px; line-height: 1.5; }
.quick-card--violet { background: linear-gradient(145deg, #e8e3ff, #d8d0fb); color: #5745bc; }.quick-card--blue { background: linear-gradient(145deg, #e4f3ff, #cae4f5); color: #387aa9; }.quick-card--orange { background: linear-gradient(145deg, #fff0df, #f7d7bc); color: #ad6735; }.quick-card--green { background: linear-gradient(145deg, #e5f5ea, #cde8d5); color: #39825c; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .6fr); gap: 15px; margin-top: 18px; }
.dash-panel { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.section-heading h3 { margin: 0; font-size: 11px; }.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 7px; }.section-heading > button { border: 0; background: transparent; color: var(--purple); font-size: 7px; font-weight: 700; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 13px; }
.project-card { cursor: pointer; }
.project-thumb { position: relative; height: 112px; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; padding: 11px; color: white; }
.project-thumb::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(24,19,28,.75)); }
.project-thumb--serum { background: radial-gradient(circle at 60% 38%, #f4d7d3 0 13%, transparent 14%), linear-gradient(145deg, #d69b9d, #60415a); }.project-thumb--story { background: radial-gradient(circle at 70% 27%, #fff0b4 0 10%, transparent 11%), linear-gradient(145deg, #5674a5, #342f65); }.project-thumb--pet { background: radial-gradient(circle at 54% 44%, #deb16c 0 14%, transparent 15%), linear-gradient(145deg, #75b3bd, #4a547d); }
.project-thumb > span { position: absolute; z-index: 2; right: 7px; top: 7px; padding: 3px 5px; border-radius: 5px; background: rgba(25,20,30,.45); font-size: 6px; }
.project-thumb button { position: absolute; z-index: 2; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(255,255,255,.25); color: white; font-size: 7px; backdrop-filter: blur(4px); }
.project-thumb strong { position: relative; z-index: 2; font-size: 9px; }
.project-card > div:last-child { padding: 7px 2px 0; }.project-card > div:last-child strong { font-size: 8px; }.project-card > div:last-child p { margin: 3px 0 0; color: var(--muted); font-size: 6px; }
.live-badge { padding: 4px 7px; border-radius: 20px; background: #e9f7ef; color: var(--green); font-size: 6px; font-weight: 800; }.live-badge i { width: 5px; height: 5px; display: inline-block; margin-right: 3px; border-radius: 50%; background: var(--green); }
.service-list { list-style: none; margin: 15px 0 10px; padding: 0; display: grid; gap: 10px; }
.service-list li { display: flex; align-items: center; gap: 8px; }
.service-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-size: 8px; font-weight: 900; }.service-icon--violet { background: var(--purple-soft); color: var(--purple); }.service-icon--blue { background: #e9f3ff; color: #4285f4; }.service-icon--orange { background: #fff1e4; color: #c2763d; }
.service-list div { flex: 1; display: flex; flex-direction: column; gap: 2px; }.service-list strong { font-size: 8px; }.service-list small { color: var(--muted); font-size: 6px; }
.status-text { font-size: 6px; }.status-text--green { color: var(--green); }.status-text--blue { color: var(--blue); }
.system-button { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #faf9fb; color: #66606c; font-size: 7px; font-weight: 700; }

/* Modal, drawer, toast */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(27,23,35,.48); backdrop-filter: blur(5px); }
.modal { width: min(460px, 100%); padding: 18px; border-radius: 17px; background: white; box-shadow: 0 25px 70px rgba(24,19,34,.28); animation: modalIn .25s ease-out both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal__header, .drawer__header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.modal__header > div, .drawer__header > div { display: flex; align-items: center; gap: 9px; }
.modal-icon, .drawer__header > div > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--purple-soft); color: var(--purple); font-size: 14px; }
.modal__header h2, .drawer__header h2 { margin: 0; font-size: 13px; }.modal__header p, .drawer__header p { margin: 2px 0 0; color: var(--muted); font-size: 7px; }
.api-service { display: flex; align-items: center; gap: 9px; padding: 14px 0 8px; }
.api-service__icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; color: white; font: 800 9px/1 "Segoe UI", sans-serif; }.api-service__icon--dark { background: #25222d; }.api-service__icon--google { background: linear-gradient(145deg, #4285f4, #34a853); }
.api-service > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }.api-service strong { font-size: 8px; }.api-service small { color: var(--muted); font-size: 6px; }
.connection-state { color: var(--green); font-size: 6.5px; font-weight: 700; }.connection-state i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--green); }
.connection-state--pending { color: var(--yellow); }
.connection-state--pending i { background: var(--yellow); }
.api-field { display: block; margin-bottom: 4px; }.api-field > span, .select-field > span { display: block; margin-bottom: 5px; font-size: 7px; font-weight: 800; }.api-field > div { height: 35px; padding: 0 5px 0 9px; border: 1px solid var(--line); border-radius: 8px; display: flex; }.api-field input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: 8px; }.api-field button { border: 0; background: transparent; color: var(--purple); font-size: 7px; font-weight: 700; }.api-field small { display: block; margin-top: 4px; color: var(--muted); font-size: 6px; }
.modal__footer { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 7px; }
.export-drawer { position: fixed; z-index: 90; right: 0; top: 0; bottom: 0; width: min(370px, 100vw); padding: 18px; background: white; box-shadow: -20px 0 50px rgba(33,27,44,.18); animation: drawerIn .3s ease-out both; }
@keyframes drawerIn { from { transform: translateX(100%); } }
.export-preview { margin: 15px 0; padding: 10px; border-radius: 10px; background: #f5f2fb; display: flex; align-items: center; justify-content: space-between; }.export-preview div { display: flex; align-items: center; gap: 8px; }.export-preview div > span { width: 29px; height: 38px; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(145deg, #dc9e9f, #64435e); color: white; font-size: 6px; }.export-preview b { font-size: 8px; }.export-preview p { color: var(--muted); font-size: 6px; }
.select-field { display: block; margin-top: 12px; }.select-field select { width: 100%; height: 37px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #56505c; font-size: 8px; }
.export-options { margin-top: 14px; padding: 10px; display: grid; gap: 9px; border-radius: 9px; background: #faf9fb; }.export-options label { display: flex; align-items: center; gap: 7px; font-size: 7px; }.export-options input { accent-color: var(--purple); }
.render-estimate { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 11px; border-radius: 9px; background: #eef6ff; color: #47779d; }.render-estimate > span { font-size: 17px; }.render-estimate div { display: flex; flex-direction: column; gap: 2px; }.render-estimate strong { font-size: 8px; }.render-estimate small { font-size: 6px; }
.export-drawer .generate-button { width: 100%; margin: 17px 0 0; }
.toast-container { position: fixed; z-index: 300; right: 18px; top: 66px; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 350px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: white; display: flex; align-items: center; gap: 9px; box-shadow: 0 14px 38px rgba(43,35,54,.17); animation: toastIn .25s ease-out both; }.toast.is-leaving { animation: toastOut .25s ease-in both; }.toast > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #e8f7ef; color: var(--green); font-size: 10px; font-weight: 900; }.toast--info > span { background: #ebf2ff; color: var(--blue); }.toast--error > span { background: #fff0f1; color: var(--red); }.toast div { display: flex; flex-direction: column; gap: 2px; }.toast strong { font-size: 8px; }.toast small { color: var(--muted); font-size: 6.5px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(15px); } } @keyframes toastOut { to { opacity: 0; transform: translateX(15px); } }

/* Late theme overrides for components declared below the theme foundation */
.workspace { background: #15141c; }
.canvas-toolbar, .playback-bar { border-color: #37333f; background: #1d1c25; }
.canvas-stage { background-color: #171620; background-image: radial-gradient(#3a3643 1px, transparent 1px); }
.canvas-stage::before { background: radial-gradient(circle at center, rgba(106,88,162,.13), transparent 66%); }
.canvas-tools > button:first-child { border-color: #403b49; background: #292631; color: #bbb4c2; }
.inspector-panel, .inspector-tabs button { background: #211f2a; }.inspector-tabs button { color: #938d9d; }.inspector-tabs button.is-active { color: #f3eff8; }
.summary-card { border-color: #443b69; background: linear-gradient(145deg, #29253c, #252237); }.summary-card__top small, .summary-card > p { color: #aaa4b4; }
.inspector-section { border-color: #393541; }.project-summary dd { color: #e2dce9; }.scene-actions button { border-color: #3d3947; background: #292631; color: #b8b1c0; }.autosave-note > span { background: rgba(51,180,123,.15); }
.timeline-panel, .track-labels { border-color: #37333f; background: #1c1b24; }.timeline-header, .track-labels > div, .ruler, .track { border-color: #35313d; }.track-labels > div { color: #a59ead; }.tracks-wrap { background-color: #181720; background-image: linear-gradient(90deg, rgba(71,65,79,.28) 1px, transparent 1px); }.clip { background: #34303f; }.clip b { color: #eee9f4; }.clip small { color: #aaa3b1; }
.dashboard-view { background: radial-gradient(circle at 70% 0, rgba(103,86,217,.09), transparent 38%); }.dash-panel { border-color: #3a3642; background: #211f2a; }.section-heading h3, .project-card > div:last-child strong, .service-list strong { color: #f1edf5; }.system-button { border-color: #403b49; background: #292631; color: #c5becd; }
.modal, .export-drawer, .toast { border: 1px solid #3b3745; background: #22202a; color: #f3eff8; }.modal__header, .drawer__header, .modal__footer { border-color: #3a3642; }.api-field > div, .select-field select { border-color: #403b49; background: #2a2733; color: #e8e3ec; }.api-field input { background: transparent; color: #e8e3ec; }.export-preview, .export-options { background: #2a2733; }.secondary-button { border-color: #403b49; background: #2a2733; color: #c1bac9; }
.log-legend { background: #292631; }.log-list article:not(:last-child)::after { border-color: #413c48; }

/* Readability pass */
:root { --muted: #c0b9ca; --muted-2: #9d96a7; }
.studio-view { grid-template-rows: minmax(0, 1fr) 216px; }
.nav-item { height: 38px; font-size: 12px; letter-spacing: .005em; }.nav-label { font-size: 9px; color: #a9a2b2; }.nav-item b { font-size: 8px; }
.tool-panel__header h2 { font-size: 13px; }.tool-panel__header p { color: #b9b2c1; font-size: 9px; }.tool-heading-icon { font-size: 15px; }
.tool-section { padding-top: 14px; padding-bottom: 14px; }.field-label { margin-bottom: 8px; }.field-label label, .field-label > label { color: #f6f2fa; font-size: 10.5px; }.field-label span { color: #b9b2c3; font-size: 8.5px; }
.tool-intro strong { font-size: 10px; }.tool-intro p { font-size: 8px; }.text-button, .script-actions button, .panel-primary { font-size: 9px; }
.link-input-wrap input, .tool-section textarea, .full-input { font-size: 9.5px; }.platforms span { font-size: 7px; }.segment-control button { font-size: 9px; }.segment-control button small { font-size: 7px; }
.voice-card strong, .character-card strong, .cover-card strong { font-size: 9px; }.voice-card small, .character-card small { color: #bbb4c4; font-size: 7.5px; }.voice-card em { font-size: 6px; }
.range-heading label { font-size: 9.5px; }.range-heading output { font-size: 8px; }.range-labels, .chip-options button { font-size: 7.5px; }
.project-summary dt, .project-summary dd, .inspector-heading strong { font-size: 8px; }.summary-card__top strong { font-size: 9px; }.summary-card__top small { font-size: 7px; }
.breadcrumb { color: #b8b1c1; font-size: 11px; }.breadcrumb button { font-size: 12px; }.save-state { color: #aaa3b3; font-size: 9px; }.topbar-button { font-size: 10px; }
.canvas-tabs button, .canvas-tools > button:first-child { font-size: 9px; }.playback-bar, .playback-right #qualityButton { color: #b8b1c1; font-size: 8.5px; }
.inspector-tabs button { font-size: 9.5px; }.inspector-heading strong { font-size: 9.5px; }.inspector-heading button, .inspector-heading > span { font-size: 8px; }
.project-summary dt, .project-summary dd { font-size: 9px; }.summary-card__top strong { font-size: 10px; }.summary-card__top small, .summary-card > p { font-size: 8px; }.scene-actions button { font-size: 7.5px; }.autosave-note strong { font-size: 8.5px; }.autosave-note small { font-size: 7.5px; }
.timeline-actions > button:not(.icon-button) { color: #b8b1c1; font-size: 8px; }.track-labels > div strong { font-size: 7.5px; }.ruler { color: #aaa3b2; font-size: 6.5px; }.clip b, .track--caption span, .music-clip b { font-size: 6.5px; }.clip small { font-size: 5.5px; }

/* Compact video style picker */
.style-grid { gap: 5px; }
.style-card { height: 56px; padding: 5px; grid-template-columns: 30px 1fr; grid-template-rows: 21px 17px; border-radius: 8px; }
.style-visual { width: 25px; height: 40px; border-radius: 6px; font-size: 13px; }
.style-card strong { align-self: end; font-size: 8.5px; }.style-card small { color: #b9b2c2; font-size: 6.5px; }.style-card i { top: 4px; right: 4px; width: 12px; height: 12px; font-size: 7px; line-height: 12px; }

/* Sound effects */
.sfx-filter-bar { margin: 10px 14px 0; padding: 3px; border-radius: 8px; background: #292631; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }.sfx-filter-bar button { flex: 0 0 auto; height: 27px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #b9b2c2; font-size: 7.5px; }.sfx-filter-bar button.is-selected { background: var(--purple); color: white; font-weight: 800; }
.sfx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }.sfx-card { position: relative; min-height: 62px; padding: 7px 28px 7px 7px; border: 1px solid #403b49; border-radius: 9px; background: #292631; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; cursor: pointer; }.sfx-card:hover { border-color: #625a70; }.sfx-card.is-selected { border-color: #8f7ff5; box-shadow: inset 0 0 0 1px #8f7ff5; }.sfx-card.is-filtered-out { display: none; }
.sfx-play { position: absolute; inset: 0; border: 0; border-radius: inherit; background: transparent; font-size: 0; }.sfx-icon { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: white; font-size: 12px; font-weight: 900; pointer-events: none; }.sfx-icon--blue { background: linear-gradient(145deg,#4c97d6,#5d66c8); }.sfx-icon--pink { background: linear-gradient(145deg,#f183ad,#bd4c81); }.sfx-icon--orange { background: linear-gradient(145deg,#f29c5f,#c7544e); }.sfx-icon--yellow { background: linear-gradient(145deg,#f7ca56,#dd8d40); }.sfx-icon--violet { background: linear-gradient(145deg,#a47cf2,#6749b7); }.sfx-icon--green { background: linear-gradient(145deg,#61c891,#318262); }
.sfx-card > div { position: relative; z-index: 1; min-width: 0; pointer-events: none; }.sfx-card strong { display: block; color: #f6f2fa; font-size: 9px; }.sfx-card small { display: block; margin-top: 2px; color: #b9b2c3; font-size: 7px; }.sfx-add { position: absolute; z-index: 2; right: 6px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); padding: 0; border: 1px solid #5a5265; border-radius: 6px; background: #35313f; color: #c2b8ff; font-size: 12px; }.sfx-add:hover { border-color: #8f7ff5; background: var(--purple); color: white; }
.sfx-position-row { margin-top: 12px; padding-top: 11px; border-top: 1px solid #3b3745; display: flex; align-items: center; gap: 7px; }.sfx-position-row > label { color: #d8d2df; font-size: 8.5px; font-weight: 700; }.sfx-position-row > div { height: 29px; display: flex; align-items: center; border: 1px solid #4b4554; border-radius: 7px; background: #292631; }.sfx-position-row input { width: 47px; border: 0; outline: 0; background: transparent; color: white; text-align: center; font-size: 8px; }.sfx-position-row div span { padding-right: 6px; color: #aaa3b2; font-size: 6.5px; }.sfx-position-row button { height: 29px; margin-left: auto; padding: 0 7px; border: 1px solid #554c71; border-radius: 7px; background: #302a4b; color: #b9afff; font-size: 7px; }
.active-sfx-empty { min-height: 48px; border: 1px dashed #4a4553; border-radius: 8px; display: grid; place-items: center; color: #9992a2; font-size: 7.5px; }.active-sfx-list { display: grid; gap: 5px; }.active-sfx-list article { min-height: 43px; padding: 5px 6px; border: 1px solid #3f3a48; border-radius: 8px; background: #292631; display: flex; align-items: center; gap: 7px; }.active-sfx-list article > button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #3a3546; color: #bfb4ff; font-size: 7px; }.active-sfx-list article div { flex: 1; }.active-sfx-list strong { display: block; font-size: 8.5px; }.active-sfx-list small { color: #b2abba; font-size: 7px; }.active-sfx-list .active-sfx-remove { background: transparent; color: #df7d88; font-size: 12px; }

/* Easier highlight color selection */
.highlight-preset-label { margin-top: 12px; }.highlight-presets { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }.highlight-presets button { min-width: 54px; height: 45px; padding: 4px; border: 1px solid #403b49; border-radius: 8px; background: #292631; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #c7c0cf; }.highlight-presets button.is-selected { border-color: #8f7ff5; box-shadow: inset 0 0 0 1px #8f7ff5; color: white; }.highlight-presets i { width: 34px; height: 13px; border-radius: 8px; background: linear-gradient(90deg,var(--p1) 0 40%,var(--p2) 40% 72%,var(--p3,var(--p2)) 72%); }.highlight-presets span { font-size: 7px; font-weight: 700; }
.caption-palette { gap: 6px; margin-top: 10px; }.caption-palette label { min-height: 39px; padding: 6px; flex-direction: column; justify-content: center; gap: 2px; }.caption-palette label span { color: #d2cbd8; font-size: 7px; font-weight: 700; }.caption-palette input { width: 28px; height: 22px; cursor: pointer; }.highlight-count button { height: 29px; font-size: 7.5px; }

/* Sound effects timeline */
.track--sfx { overflow: visible; padding: 3px; }.sfx-timeline-empty { display: inline-block; padding: 5px 7px; color: #857e8d; font-size: 6.5px; }.sfx-timeline-chip { position: absolute; top: 3px; height: 24px; min-width: 57px; padding: 0 6px; transform: translateX(-4px); border: 1px solid #765dc0; border-radius: 5px; background: hsl(calc(255 + var(--sfx-index) * 18) 42% 30%); color: #eee9ff; font-size: 6.5px; white-space: nowrap; }.sfx-timeline-chip span { color: #d7ff43; }

/* FordFlow Noir Yellow — black surfaces with yellow typography */
:root {
  --bg: #000000;
  --panel: #090909;
  --panel-soft: #121107;
  --line: #3f3600;
  --line-strong: #665600;
  --ink: #ffe95b;
  --muted: #d6c56a;
  --muted-2: #9d914c;
  --purple: #ffd800;
  --purple-dark: #ffec74;
  --purple-soft: #211c00;
  --lime: #ffe600;
  --yellow: #ffd800;
  --shadow: 0 20px 58px rgba(0,0,0,.62);
}
body, .app-shell { color: var(--ink); background: #000; }
button, input, textarea, select { color: var(--ink); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: rgba(255,230,0,.5); }
.welcome-screen { background: #000; }.welcome-art { filter: grayscale(.72) sepia(.9) hue-rotate(2deg) saturate(2.1) brightness(.34) contrast(1.2); }.welcome-shade { background: linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.5) 48%,rgba(0,0,0,.93) 76%,#000 100%); }.welcome-content h1, .welcome-brand { color: #ffe95b; }.welcome-tagline, .welcome-kicker, .welcome-note { color: #d1c36c; }.google-button { border: 1px solid #ffe600; background: #ffe600; color: #050505; }.welcome-screen::before, .welcome-screen::after { background: #ffd800; opacity: .09; }
.brand-mark, .avatar { background: linear-gradient(145deg,#ffe600,#a88700); color: #050505; box-shadow: 0 0 22px rgba(255,216,0,.18); }.brand-mark__play, .brand-mark__play::after { border-color: #050505; }.brand-mark__play::after { border-left-color: #050505; border-top-color: transparent; border-bottom-color: transparent; }
.sidebar { background: #050505; border-color: #332b00; }.sidebar__brand strong, .profile-row strong { color: #ffe95b; }.sidebar__brand span, .nav-label, .profile-row small, .storage-card__top, .storage-card__top b { color: #bbae63; }.create-button { border: 1px solid #ffe600; background: #ffe600; color: #050505; box-shadow: 0 8px 24px rgba(255,216,0,.16); }.create-button span { color: #050505; }.create-button:hover { background: #fff18a; }
.nav-item { color: #d6c56a; }.nav-item:hover { background: #151303; color: #fff18a; }.nav-item.is-active { background: linear-gradient(90deg,#ffe600,#cba900); color: #050505; box-shadow: 0 7px 20px rgba(255,216,0,.13); }.nav-item.is-active::before { background: #fff6b0; }.nav-item.is-active .nav-icon, .nav-item.is-active b { color: #050505; }.nav-icon, .nav-icon--spark, .nav-icon--flow { color: #ffe600; }.nav-item b { background: #ffe600; color: #050505; }
.storage-card, .profile-row { border-color: #332b00; background: #0b0b08; }.storage-track { background: #252005; }.storage-track span { background: linear-gradient(90deg,#ffe600,#a98700); }.storage-card button { color: #ffe600; }
.topbar { border-color: #332b00; background: rgba(3,3,3,.94); }.breadcrumb, .save-state { color: #bcae60; }.breadcrumb button, .dashboard-heading h2 { color: #ffe95b; }.divider { background: #3f3600; }.topbar .icon-button { color: #d5c466; }.topbar-button { border-color: #4a3e00; background: #0d0c05; color: #ffe95b; }.topbar-button:hover { border-color: #ffe600; background: #171402; }.topbar-button--export { border-color: #ffe600; background: #ffe600; color: #050505; }.topbar-button--export:hover { border-color: #fff18a; background: #fff18a; }
.tool-panel, .inspector-panel { background: #080808; }.tool-panel, .inspector-panel, .tool-panel__header, .inspector-tabs, .tool-section { border-color: #332b00; }.tool-panel__header { background: #0b0b08; }.tool-heading-icon, .summary-icon { border: 1px solid #665600; background: #191500; color: #ffe600; }.tool-panel__header h2, .field-label label, .field-label > label, .range-heading label { color: #ffe95b; }.tool-panel__header p, .field-label span, .range-labels { color: #c3b35f; }.tool-content, .inspector-content { scrollbar-color: #7d6900 #080808; }
.link-input-wrap, .style-card, .voice-card, .caption-style, .character-card, .filter-grid button, .cover-card, .media-list > button, .scene-actions button, .mixer-clip, .sfx-card { border-color: #403600; background: #101008; }.link-input-wrap input, .full-input, .tool-section textarea { border-color: #403600; background: #050505; color: #fff18a; }.link-input-wrap:focus-within, .tool-section textarea:focus, .full-input:focus { border-color: #ffe600; background: #090900; box-shadow: 0 0 0 3px rgba(255,216,0,.08); }.link-input-wrap > span, .text-button { color: #ffe600; }.link-input-wrap button, .platforms span, .segment-control, .script-actions button, .voice-card i { border-color: #403600; background: #181504; color: #e6d46f; }
.style-card strong, .voice-card strong, .character-card strong, .cover-card strong, .sfx-card strong { color: #ffe95b; }.style-card small, .voice-card small, .character-card small, .sfx-card small { color: #c2b15d; }.style-card.is-selected, .voice-card.is-selected, .caption-style.is-selected, .character-card.is-selected, .filter-grid button.is-selected, .cover-card.is-selected, .sfx-card.is-selected { border-color: #ffe600; background: #181503; box-shadow: inset 0 0 0 1px #ffe600,0 0 18px rgba(255,216,0,.08); }.style-card i, .character-card i, .caption-style i, .cover-card i { background: #ffe600; color: #050505; }.segment-control button.is-selected { background: #ffe600; color: #050505; }.segment-control button.is-selected small { color: #3b3100; }
.style-visual--sale, .style-visual--fun, .style-visual--pet, .style-visual--story { background: linear-gradient(145deg,#ffe600,#8d7500); color: #050505; }
.generate-button, .panel-primary { background: linear-gradient(135deg,#ffe600,#c9a800); color: #050505; box-shadow: 0 10px 25px rgba(255,216,0,.15); }.generate-button > span:first-child { background: rgba(0,0,0,.13); color: #050505; }.generate-button small { color: #493c00; }.panel-primary:hover, .generate-button:hover { box-shadow: 0 14px 32px rgba(255,216,0,.22); }
.tool-intro, .tool-intro--purple, .tool-intro--blue, .tool-intro--orange, .tool-intro--green, .tool-intro--pink { border: 1px solid #4b4000; background: #151203; color: #ffe95b; }.tool-intro > span { background: #ffe600; color: #050505; }.tool-intro p { color: #c4b45f; }
.chip-options button, .highlight-count button, .word-count-grid button, .mini-segments button, .cover-effects button, .sfx-filter-bar button { border-color: #403600; background: #101008; color: #d0bf65; }.chip-options button.is-selected, .highlight-count button.is-selected, .word-count-grid button.is-selected, .mini-segments button.is-selected, .cover-effects button.is-selected, .sfx-filter-bar button.is-selected { border-color: #ffe600; background: #ffe600; color: #050505; }.toggle-list i { background: #3a3209; }.toggle-list input:checked + i { background: #ffe600; }.toggle-list input:checked + i::after { background: #050505; }
.caption-style > span, .caption-live-example { border: 1px solid #403600; background: #000; color: #ffe600; }.caption-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; text-shadow: none; }.caption-token, .caption-live-example span { padding: 3px 6px; border: 1px solid rgba(255,230,0,.4); border-radius: 5px; background: rgba(0,0,0,.86); color: #ffe600 !important; box-shadow: 0 2px 8px rgba(0,0,0,.55); }.caption-token.is-speaking { color: var(--token-color) !important; background: #000; border-color: var(--token-color); box-shadow: 0 0 14px color-mix(in srgb,var(--token-color) 38%,transparent); }.highlight-presets button, .caption-palette label { border-color: #403600; background: #101008; color: #d4c368; }.highlight-presets button.is-selected { border-color: #ffe600; color: #ffe95b; box-shadow: inset 0 0 0 1px #ffe600; }
.workspace, .canvas-toolbar, .playback-bar { background: #050505; border-color: #332b00; }.canvas-stage { background-color: #000; background-image: radial-gradient(#3d3507 1px,transparent 1px); }.canvas-stage::before { background: radial-gradient(circle at center,rgba(255,216,0,.07),transparent 63%); }.canvas-tabs button { color: #a99b52; }.canvas-tabs button.is-active { border-bottom-color: #ffe600; color: #ffe95b; }.canvas-tools > button:first-child { border-color: #403600; background: #101008; color: #d8c76a; }.play-button { background: #ffe600; color: #050505; }.playback-bar, .playback-right #qualityButton { color: #c3b35f; }
.video-canvas { border: 1px solid #665600; box-shadow: 0 18px 48px rgba(0,0,0,.7),0 0 30px rgba(255,216,0,.08); }.video-badge { background: #050505; color: #ffe600; border: 1px solid rgba(255,230,0,.45); }.video-cta { background: #ffe600; color: #050505; }.video-cta span { color: #050505; }
.inspector-tabs button { background: #080808; color: #a99b52; }.inspector-tabs button.is-active { border-bottom-color: #ffe600; color: #ffe95b; }.inspector-tabs button span { background: #ffe600; color: #050505; }.summary-card { border-color: #514500; background: linear-gradient(145deg,#141203,#0b0b08); }.summary-card__top strong, .inspector-heading strong, .project-summary dd, .autosave-note strong { color: #ffe95b; }.summary-card__top small, .summary-card > p, .project-summary dt, .autosave-note small { color: #c2b15d; }.summary-progress { background: #302900; }.summary-progress span { background: linear-gradient(90deg,#ffe600,#fff18a); }.inspector-section { border-color: #332b00; }.scene-actions button { border-color: #403600; background: #101008; color: #d2c169; }.autosave-note > span { background: #1c1800; color: #ffe600; }
.timeline-panel, .track-labels { border-color: #332b00; background: #050505; }.timeline-header, .track-labels > div, .ruler, .track { border-color: #292300; }.track-labels > div, .timeline-actions > button:not(.icon-button), .ruler { color: #b9aa59; }.tracks-wrap { background-color: #020202; background-image: linear-gradient(90deg,rgba(255,216,0,.08) 1px,transparent 1px); }.clip { background: #171505; }.clip b { color: #ffe95b; }.clip small { color: #ae9f53; }.track--caption span { border-color: #7d6900; background: #2a2400; color: #ffe95b; }.track--voice { border-color: #6e5d00; background: #181500; }.waveform { color: #ffe600; }.music-clip { border-color: #6b5a00; background: #161400; color: #ffe95b; }.sfx-timeline-chip { border-color: #ffe600; background: #2a2300; color: #ffe95b; }.sfx-timeline-chip span { color: #ffe600; }
.dashboard-view { background: radial-gradient(circle at 70% 0,rgba(255,216,0,.06),transparent 36%),#000; }.dash-panel { border-color: #332b00; background: #090909; }.quick-card--violet, .quick-card--blue, .quick-card--orange, .quick-card--green { border-color: #4a3e00; background: linear-gradient(145deg,#171400,#080808); color: #ffe95b; }.quick-card > span { background: #ffe600; color: #050505; }.quick-card small, .section-heading p, .service-list small { color: #c0af5d; }.section-heading h3, .project-card > div:last-child strong, .service-list strong { color: #ffe95b; }.system-button { border-color: #403600; background: #111007; color: #ffe95b; }
.modal, .export-drawer, .toast { border-color: #514500; background: #080808; color: #ffe95b; }.modal__header, .drawer__header, .modal__footer { border-color: #332b00; }.api-field > div, .select-field select, .export-preview, .export-options { border-color: #403600; background: #111007; color: #ffe95b; }.api-field input { background: transparent; color: #ffe95b; }.secondary-button { border-color: #4a3e00; background: #111007; color: #ffe95b; }.toast > span { background: #ffe600; color: #050505; }

/* Flow handoff panel */
.flow-workflow { display: grid; gap: 7px; margin-top: 10px; }
.flow-workflow article { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #393100; border-radius: 9px; background: #080800; }
.flow-workflow article > b { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #ffe600; color: #050505; font-size: 9px; }
.flow-workflow article strong, .flow-workflow article small { display: block; }
.flow-workflow article strong { color: #fff0a0; font-size: 7.5px; }
.flow-workflow article small { margin-top: 2px; color: #9f9561; font-size: 6.5px; }
.flow-install-actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7px; margin-top: 8px; }
.flow-install-actions a, .flow-install-actions button { min-height: 32px; display: grid; place-items: center; margin: 0; border: 1px solid #4d4200; border-radius: 8px; background: #171400; color: #f5df70; font: 750 7px/1.3 "Segoe UI",sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.flow-install-actions a:hover, .flow-install-actions button:hover { border-color: #ffe600; color: #fff18a; }
.tool-intro--flow { background: linear-gradient(135deg,#1c1800,#090909); }.tool-intro--flow > span { font: 900 15px/1 "Segoe UI",sans-serif; }
.flow-bridge-card { min-height: 50px; padding: 8px; border: 1px solid #4a3e00; border-radius: 10px; background: #0e0d05; display: flex; align-items: center; gap: 8px; }.flow-bridge-mark { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 8px; background: #ffe600; color: #050505; font: 900 13px/1 "Segoe UI",sans-serif; }.flow-bridge-card > div:nth-child(2) { min-width: 0; flex: 1; }.flow-bridge-card strong, .flow-bridge-card small { display: block; }.flow-bridge-card strong { color: #ffe95b; font-size: 9.5px; }.flow-bridge-card small { margin-top: 2px; color: #bdae5b; font-size: 7px; line-height: 1.35; }.flow-status-pill { padding: 4px 6px; border: 1px solid #665600; border-radius: 20px; background: #1d1900; color: #ffe600; font-size: 6.5px; font-weight: 800; white-space: nowrap; }.flow-status-pill.is-connected { background: #ffe600; color: #050505; }
.flow-detect-button, .flow-preview-button, .flow-copy-button { width: 100%; height: 31px; margin-top: 8px; border: 1px solid #5a4c00; border-radius: 8px; background: #171400; color: #ffe95b; font-size: 8px; font-weight: 800; }.flow-detect-button:hover, .flow-preview-button:hover, .flow-copy-button:hover { border-color: #ffe600; background: #201b00; }.flow-helper { margin: 7px 1px 0; color: #a99a50; font-size: 7px; line-height: 1.55; }
.flow-style-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }.flow-style-grid button { min-height: 61px; padding: 7px; border: 1px solid #403600; border-radius: 9px; background: #0e0d06; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 1px 6px; text-align: left; }.flow-style-grid button > span { grid-row: 1/3; width: 28px; height: 39px; display: grid; place-items: center; border-radius: 7px; background: #211c00; color: #ffe600; font-size: 9px; font-weight: 900; }.flow-style-grid strong { align-self: end; color: #ffe95b; font-size: 8px; }.flow-style-grid small { color: #ad9e51; font-size: 6.5px; }.flow-style-grid button.is-selected { border-color: #ffe600; background: #191600; box-shadow: inset 0 0 0 1px #ffe600; }.flow-style-grid button.is-selected > span { background: #ffe600; color: #050505; }
.flow-transition-grid { display: flex; flex-wrap: wrap; gap: 5px; }.flow-transition-grid button { height: 27px; padding: 0 8px; border: 1px solid #403600; border-radius: 16px; background: #0e0d06; color: #cabb63; font-size: 7px; }.flow-transition-grid button.is-selected { border-color: #ffe600; background: #ffe600; color: #050505; font-weight: 800; }
.flow-effect-cloud { display: flex; flex-wrap: wrap; gap: 5px; }.flow-effect-cloud button { min-height: 27px; padding: 0 8px; border: 1px solid #403600; border-radius: 7px; background: #0e0d06; color: #cabb63; font-size: 7px; }.flow-effect-cloud button.is-selected { border-color: #ffe600; background: #211c00; color: #ffe95b; box-shadow: inset 0 0 0 1px rgba(255,230,0,.24); }.flow-range { margin-top: 12px; }.flow-preview-button { background: #ffe600; color: #050505; }
.flow-tool-list { display: grid; gap: 5px; }.flow-tool-list button { min-height: 43px; padding: 5px 7px; border: 1px solid #403600; border-radius: 8px; background: #0e0d06; display: flex; align-items: center; gap: 7px; text-align: left; }.flow-tool-list button > b { width: 32px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #211c00; color: #ffe600; font-size: 7px; }.flow-tool-list button > span { display: flex; flex-direction: column; gap: 1px; }.flow-tool-list strong { color: #ffe95b; font-size: 8px; }.flow-tool-list small { color: #aa9b50; font-size: 6.5px; }.flow-tool-list button.is-selected { border-color: #ffe600; background: #171400; }.flow-tool-list button.is-selected > b { background: #ffe600; color: #050505; }
.flow-package-summary { margin-top: 8px; padding: 8px; border-left: 3px solid #ffe600; border-radius: 0 7px 7px 0; background: #171400; color: #cdbd64; font-size: 7px; line-height: 1.45; }.flow-copy-button { color: #ffe95b; }.flow-open-link { min-height: 40px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 9px; }.flow-open-link span { font-size: 13px; }

/* Flow look preview layer — static preview; render timing is frame-driven in Remotion */
.flow-preview-effect { --flow-intensity: .68; position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity .2s ease; }.flow-preview-effect.is-visible { opacity: calc(var(--flow-intensity) * .55); }.flow-preview-effect::before, .flow-preview-effect::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.flow-preview-effect.flow-fx-light-leak { background: radial-gradient(circle at 112% 5%,rgba(255,235,81,.92),rgba(255,190,0,.34) 22%,transparent 49%); mix-blend-mode: screen; }
.flow-preview-effect.flow-fx-halftone::before { background-image: radial-gradient(rgba(255,230,0,.58) 1px,transparent 1.5px); background-size: 7px 7px; mix-blend-mode: overlay; opacity: .42; }
.flow-preview-effect.flow-fx-scanlines::after { background: repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.48) 4px 5px); opacity: .42; }
.video-canvas.flow-fx-glow .product-bottle { filter: drop-shadow(0 0 11px rgba(255,230,0,.72)); }.video-canvas.flow-fx-zoom-blur .video-backdrop { filter: blur(2px) saturate(1.12); scale: 1.04; }.video-canvas.flow-fx-chromatic { box-shadow: -3px 0 rgba(255,230,0,.22),3px 0 rgba(255,120,0,.2),0 18px 48px rgba(0,0,0,.7); }.video-canvas.flow-fx-film-grain .video-backdrop { filter: contrast(1.12) saturate(.88); }.video-canvas.flow-fx-vignette::after { content: ""; position: absolute; inset: 0; z-index: 4; box-shadow: inset 0 0 48px 18px rgba(0,0,0,.7); pointer-events: none; }.video-canvas.flow-fx-paper .video-backdrop { filter: sepia(.15) contrast(1.08); }.video-canvas.flow-fx-pixel .product-bottle { image-rendering: pixelated; }.video-canvas.flow-fx-starburst .video-backdrop { background-image: conic-gradient(from 20deg at 50% 45%,rgba(255,230,0,.18),transparent 7%,rgba(255,230,0,.12) 12%,transparent 18%); }.video-canvas.flow-fx-shine .product-bottle::after { content: ""; position: absolute; inset: 5% 40% 5% 10%; background: linear-gradient(105deg,transparent,rgba(255,255,220,.42),transparent); rotate: 12deg; }
.flow-preview-tag { position: absolute; z-index: 9; top: 10px; right: 8px; max-width: 64%; padding: 3px 6px; border: 1px solid #ffe600; border-radius: 4px; background: #050505; color: #ffe600; font: 800 5.5px/1.2 "Segoe UI",sans-serif; letter-spacing: .07em; opacity: 0; transition: opacity .2s ease; }.flow-preview-tag.is-visible { opacity: .86; }.product-bottle { z-index: 2; }.caption-preview, .video-badge, .video-cta { z-index: 7; }

@media (max-width: 1180px) {
  :root { --sidebar: 205px; --tool-panel: 310px; --inspector: 235px; }
  .nav-item { font-size: 11px; }
  .stage-side-note { display: none; }
  .topbar-button:first-of-type { display: none; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card:last-child { display: none; }
}

@media (max-width: 980px) {
  :root { --tool-panel: 290px; --inspector: 0px; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); box-shadow: 20px 0 50px rgba(30,25,38,.18); transition: transform .25s; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-close, .mobile-menu { display: inline-grid; }
  .studio-grid { grid-template-columns: var(--tool-panel) minmax(300px, 1fr); }
  .inspector-panel { display: none; }
  .playback-right { right: 12px; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .quick-start-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body { overflow: auto; }
  .app-shell { min-height: 100vh; height: auto; }
  .main-area { min-height: 100vh; height: auto; }
  .topbar { position: sticky; top: 0; }
  .breadcrumb > span:first-child, .save-state, .topbar__actions .icon-button, .topbar__actions .divider, .topbar-button--ghost { display: none; }
  .studio-view { display: block; overflow: visible; }
  .studio-grid { display: flex; flex-direction: column; }
  .workspace { order: -1; min-height: 480px; }
  .canvas-stage { height: 400px; }
  .video-canvas { height: 360px; }
  .tool-panel { border-right: 0; border-top: 1px solid var(--line); }
  .tool-content { height: auto; max-height: none; }
  .timeline-panel { height: 212px; overflow: hidden; }
  .dashboard-view { padding: 20px 16px; }
  .dashboard-heading { align-items: flex-start; gap: 10px; }.dashboard-heading h2 { font-size: 18px; }
  .quick-start-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.quick-card { min-height: 115px; }
  .project-grid { grid-template-columns: 1fr; }.project-card:last-child { display: block; }
  .dashboard-columns { display: block; }.system-panel { margin-top: 12px; }
}

@media (max-height: 720px) and (min-width: 701px) {
  .studio-view { grid-template-rows: minmax(0, 1fr) 205px; }
  .video-canvas { height: min(calc(100% - 14px), 310px); }
  .timeline-body { grid-template-columns: 84px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Yellow + warm-white text hierarchy for brighter long-session readability */
:root {
  --ink: #fffdf2;
  --muted: #ddd9c8;
  --muted-2: #aaa590;
}
body, .app-shell, button, input, textarea, select { color: #fffdf2; }
.welcome-content h1, .welcome-brand, .sidebar__brand strong,
.tool-panel__header h2, .field-label label, .field-label > label,
.range-heading label, .dashboard-heading h2, .section-heading h3,
.inspector-heading strong, .flow-open-link { color: #ffe65a; }
.welcome-tagline, .welcome-kicker { color: #fffdf2; }
.welcome-note, .welcome-footer, .sidebar__brand span, .nav-label,
.profile-row small, .field-label span, .tool-panel__header p,
.range-labels, .save-state, .section-heading p { color: #d8d4c4; }
.nav-item { color: #f4f1e7; }.nav-item .nav-icon { color: #ffe65a; }
.nav-item.is-active, .nav-item.is-active .nav-icon, .nav-item.is-active b { color: #050505; }
.breadcrumb { color: #d6d2c2; }.breadcrumb button { color: #fffdf2; }
.topbar-button:not(.topbar-button--export), .canvas-tabs button.is-active,
.canvas-tools > button:first-child, .playback-bar, .playback-right #qualityButton { color: #fffdf2; }
.style-card strong, .voice-card strong, .character-card strong,
.cover-card strong, .sfx-card strong, .media-list strong,
.quick-card strong, .service-list strong, .project-card > div:last-child strong { color: #fffdf2; }
.style-card small, .voice-card small, .character-card small,
.sfx-card small, .media-list small, .quick-card small,
.service-list small, .project-card > div:last-child p { color: #d2cebd; }
.tool-intro strong, .flow-bridge-card strong, .flow-style-grid strong,
.flow-tool-list strong, .summary-card__top strong, .autosave-note strong { color: #ffe65a; }
.tool-intro p, .flow-bridge-card small, .flow-helper,
.flow-style-grid small, .flow-tool-list small, .flow-package-summary,
.summary-card__top small, .summary-card > p, .autosave-note small { color: #d8d4c4; }
.link-input-wrap input, .full-input, .tool-section textarea,
.project-summary dd, .api-field input, .select-field select { color: #fffdf2; }
.project-summary dt, .track-labels > div, .timeline-actions > button:not(.icon-button),
.ruler, .clip small { color: #cbc7b7; }
.clip b, .track--caption span, .music-clip, .sfx-timeline-chip { color: #fffdf2; }
.flow-transition-grid button:not(.is-selected),
.flow-effect-cloud button:not(.is-selected),
.chip-options button:not(.is-selected), .cover-effects button:not(.is-selected) { color: #f0ede2; }
.flow-style-grid button.is-selected strong, .flow-tool-list button.is-selected strong { color: #fffdf2; }
.caption-token, .caption-live-example span { color: #ffe65a !important; }