/* LUMINA / 2026 studio refresh. One final layer over the legacy CSS. */
:root,
html[data-theme="dark"] {
  --studio-bg: #171918;
  --studio-side: #202523;
  --studio-panel: #232724;
  --studio-panel-2: #2d322e;
  --studio-panel-3: #3a4039;
  --studio-line: rgba(239, 232, 219, .11);
  --studio-line-strong: rgba(239, 232, 219, .23);
  --studio-text: #f2eee5;
  --studio-muted: #b8b5ab;
  --studio-quiet: #929388;
  --studio-accent: #dc8968;
  --studio-accent-strong: #e9a183;
  --studio-accent-soft: rgba(220, 137, 104, .17);
  --studio-focus: #efa687;
  --studio-focus-soft: rgba(239, 166, 135, .16);
  --studio-on-accent: #251b17;
  --studio-shadow: 0 30px 70px rgba(0, 0, 0, .38);
  --studio-shadow-soft: 0 16px 42px rgba(0, 0, 0, .22);
  --workspace-max: 1420px;
  --workspace-gutter: clamp(24px, 3.5vw, 64px);
}

html[data-theme="light"] {
  --studio-bg: #f4f1eb;
  --studio-side: #242a28;
  --studio-panel: #fffcf6;
  --studio-panel-2: #ebe6dc;
  --studio-panel-3: #ded6c8;
  --studio-line: rgba(42, 39, 32, .12);
  --studio-line-strong: rgba(42, 39, 32, .24);
  --studio-text: #262925;
  --studio-muted: #62655e;
  --studio-quiet: #7a7d74;
  --studio-accent: #a94e33;
  --studio-accent-strong: #873922;
  --studio-accent-soft: rgba(169, 78, 51, .1);
  --studio-focus: #a94e33;
  --studio-focus-soft: rgba(169, 78, 51, .16);
  --studio-on-accent: #fff8ef;
  --studio-shadow: 0 26px 68px rgba(57, 44, 32, .2);
  --studio-shadow-soft: 0 12px 36px rgba(57, 44, 32, .11);
}

body { font-size: 14px; }
button, input, textarea, select { letter-spacing: normal; }
button:active:not(:disabled) { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--studio-focus); outline-offset: 3px; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .19em; }
.view-title, .ai-tools-copy h2 { text-wrap: balance; }

/* A quiet dark navigation rail anchors both appearances. */
.sidebar,
.sidebar:hover {
  width: 222px;
  min-width: 222px;
  padding: 24px 15px 18px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #242a28;
  color: #f5f0e7;
}
.sidebar.rail,
.sidebar.rail:hover { width: 74px; min-width: 74px; }
.sidebar .brand { min-height: 48px; padding: 0 6px; }
.sidebar .brand-mark { background: #ede3d3; color: #282b27; border: 0; border-radius: 9px; }
.sidebar .brand-name { color: #f5f0e7; font-size: 13px; letter-spacing: .25em; }
.sidebar .brand-sub, .sidebar .nav-label, .sidebar .user-balance { color: #aaa99e; }
.sidebar .nav-label { margin-top: 53px; font-size: 9px; }
.sidebar .nav-item { min-height: 46px; margin-bottom: 5px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; color: #b9beb6; font-size: 13px; }
.sidebar .nav-item svg { width: 17px; height: 17px; }
.sidebar .nav-item:hover { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.06); color: #fffaf0; }
.sidebar .nav-item.active { border-color: rgba(226,155,119,.24); background: rgba(226,155,119,.13); color: #fff4e9; }
.sidebar .nav-item.active::before { background: #df8d6b; box-shadow: none; }
.sidebar .user-card { border-top-color: rgba(255,255,255,.12); }
.sidebar .user-avatar { background: #e5d6c4; color: #2a2b26; }
.sidebar .user-email { color: #f5f0e7; }
.sidebar .logout-btn { color: #b9beb6; }
.sidebar .rail-toggle { right: -13px; border-color: var(--studio-line-strong); background: var(--studio-panel); color: var(--studio-text); }
.sidebar .account-popover { color: var(--studio-text); }

/* The creation surface now follows one grid from hero to history. */
.stage {
  align-items: stretch;
  padding: 0 var(--workspace-gutter) 90px;
  background: var(--studio-bg);
}
.stage::before, .stage::after { display: none; }
.hero,
body.workspace .hero {
  display: grid;
  width: min(100%, var(--workspace-max));
  min-height: 390px;
  max-height: none;
  margin: 0 auto;
  padding: 38px 0 55px;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  grid-template-rows: 1fr auto;
  gap: 10px clamp(30px, 5vw, 88px);
  align-items: center;
  justify-content: stretch;
  text-align: left;
}
.hero-copy { width: 100%; max-width: 690px; align-self: end; }
.hero-copy .eyebrow { display: block; margin-bottom: 22px; color: var(--studio-accent); font-size: 10px; }
.hero-title { max-width: 780px; font-family: var(--sans); font-size: clamp(48px, 5.1vw, 83px); font-weight: 670; letter-spacing: -.075em; line-height: 1.06; }
.hero-lede { max-width: 32em; margin: 20px 0 0; color: var(--studio-muted); font-size: clamp(13px, 1vw, 15px); line-height: 1.75; }
.hero-control { width: max-content; min-width: 248px; align-self: start; padding-top: 25px; }
.mode-switch { width: 248px; height: 45px; border-radius: 9px; background: var(--studio-panel-2); }
.mode-slider { border-radius: 6px; background: var(--studio-accent); }
.mode-btn { min-height: 35px; border-radius: 6px; font-size: 12px; font-weight: 650; }
.hero-art { position: relative; width: 100%; height: 315px; grid-column: 2; grid-row: 1 / 3; overflow: hidden; border-radius: 7px 44px 7px 7px; background: #252923; box-shadow: 16px 16px 0 var(--studio-panel-2); }
.hero-art::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgba(12,16,14,.78)); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.74) contrast(1.05); }
.hero-art-caption { position: absolute; right: 24px; bottom: 23px; left: 24px; z-index: 1; display: flex; justify-content: space-between; gap: 14px; align-items: end; color: #f6f1e7; }
.hero-art-caption span { font: 9px var(--mono); letter-spacing: .17em; opacity: .72; }
.hero-art-caption strong { font: 500 21px var(--serif); white-space: nowrap; }

.composer,
body.workspace .composer {
  width: min(100%, var(--workspace-max));
  min-height: 185px;
  margin: 0 auto;
  padding: 23px 26px 18px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 12px;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow-soft);
  transform: none;
}
.composer:focus-within { border-color: var(--studio-accent); box-shadow: var(--studio-shadow-soft), 0 0 0 3px var(--studio-accent-soft); transform: none; }
.composer::before, .composer-glow { display: none; }
.composer-label { color: var(--studio-muted); font-size: 11px; letter-spacing: .04em; }
.composer-label kbd { color: var(--studio-quiet); font-size: 10px; }
.prompt-input { min-height: 82px; max-height: 220px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; }
.prompt-input::placeholder { color: var(--studio-quiet); opacity: 1; }
.composer-bar { padding-top: 9px; border-top: 1px solid var(--studio-line); }
.kind-mini, .chip { min-height: 37px; border-radius: 7px; background: var(--studio-panel); color: var(--studio-muted); font-size: 11px; }
.chip:hover { border-color: var(--studio-accent); background: var(--studio-accent-soft); color: var(--studio-text); }
.km-btn { border-radius: 5px; }
.km-btn.active { background: var(--studio-accent); color: var(--studio-on-accent); }
.mode-chip .mode-dot { background: var(--studio-accent); box-shadow: 0 0 0 3px var(--studio-accent-soft); }
.send-btn { width: 46px; min-width: 46px; height: 46px; border-radius: 8px; background: var(--studio-accent); box-shadow: none; }
.send-btn:hover { background: var(--studio-accent-strong); }

.inspiration-reel,
body.workspace .inspiration-reel,
.results,
body.workspace .results { width: min(100%, var(--workspace-max)); }
.inspiration-reel, body.workspace .inspiration-reel { margin: 20px auto 0; }
.prompt-suggestions { justify-content: flex-start; gap: 7px; }
.prompt-suggestion { min-height: 32px; border-radius: 6px; background: transparent; font-size: 11px; }
.prompt-suggestion:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
.reel-head { margin: 49px 0 17px; align-items: end; }
.reel-head .eyebrow { color: var(--studio-accent); font-size: 10px; }
.reel-head h2 { font-size: clamp(25px, 2.1vw, 32px); letter-spacing: -.055em; }
.reel-head p { font-size: 11px; }
.reel-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: repeat(2, 173px); gap: 12px; }
.inspire-chip.reel-card, .reel-card:nth-child(1), .reel-card:nth-child(2), .reel-card:nth-child(3), .reel-card:nth-child(4) { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 8px; }
.reel-card:first-child { grid-row: 1 / 3; }
.reel-card:nth-child(4) { grid-column: 2 / 4; }
.reel-card img, .reel-card video { filter: saturate(.82) contrast(1.03); }
.reel-card:hover img, .reel-card:hover video { filter: saturate(.96) contrast(1.05); }
.reel-index { top: 13px; left: 13px; border-radius: 4px; font-size: 8px; }
.reel-card strong { right: 18px; bottom: 37px; left: 18px; font-size: 20px; }
.reel-card small { right: 18px; bottom: 18px; left: 18px; font-size: 10px; }
.reel-play { width: 31px; height: 31px; }

/* Results and assets keep actions visible for touch and keyboard users. */
.results, body.workspace .results { margin-top: 55px; }
.project-day { margin-bottom: 16px; }
.project-day span { font-size: 22px; }
.generation-project { margin-bottom: 35px; padding-top: 19px; }
.project-copy h2 { font-size: 17px; }
.project-copy p, .project-status { font-size: 11px; }
.project-status.unknown { color: #ad6c34; }
.project-output-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 13px; }
.project-output-grid .card { max-width: none; }
.project-output-grid .card-overlay, #viewAssets .card-overlay { opacity: 1; background: linear-gradient(180deg, transparent 34%, rgba(11,14,13,.83)); }
.project-output-grid .card:hover .card-overlay, .project-output-grid .card:focus-within .card-overlay { opacity: 1; }
.card-result-count { position: absolute; top: 12px; right: 12px; z-index: 5; padding: 6px 9px; border-radius: 5px; background: rgba(17,20,18,.76); color: #fff7ec; font: 10px var(--mono); }
.card.result-unavailable .card-media-fallback, .card.result-unavailable .card-video-poster { filter: grayscale(1) brightness(.43); }
.card.result-unavailable::after { content: "原始预览已失效"; position: absolute; top: 50%; left: 50%; z-index: 4; width: max-content; max-width: 82%; padding: 8px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 5px; background: rgba(12,14,13,.84); color: #fff8ef; font-size: 11px; letter-spacing: .04em; transform: translate(-50%, -50%); }
.card-action, .card-dl { min-height: 31px; font-size: 10px; }
.asset-card-check:focus-within { outline: 2px solid var(--studio-focus); outline-offset: 2px; }
.card:focus-visible { outline: 3px solid var(--studio-focus); outline-offset: 3px; }
.card-failed, .card-unknown { color: var(--studio-text); }

/* Shared page chrome. */
.view-head, .ai-tools-hero, .tool-wrap, .ai-tools-toolbar, .ai-library-layout, .ai-task-section, .admin-list, .asset-toolbar, .asset-grid, .asset-pagination { max-width: var(--workspace-max); }
.view-head { padding: 48px 0 25px; }
.view-title { font-size: clamp(39px, 3.6vw, 58px); }
.view-subtitle { margin-top: 11px; font-size: 13px; }
.asset-filters { border-radius: 8px; }
.af-btn { min-height: 36px; font-size: 12px; }
.asset-toolbar { min-height: 58px; }
.asset-toolbar button, .asset-pagination button, .asset-pagination select { min-height: 35px; border-radius: 6px; font-size: 11px; }
.asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#viewAssets .card, #viewAssets .card.r-square, #viewAssets .card.r-tall, #viewAssets .card.r-wide { aspect-ratio: 4 / 3; border-radius: 8px; }
.tool-wrap { border-radius: 9px; }
.tool-offline { max-width: 560px; }
.tool-offline h3 { font-size: clamp(26px, 2.5vw, 37px); }
.ai-tools-hero { padding: 48px 0 30px; }
.ai-tools-copy h2 { font-size: clamp(40px, 4vw, 62px); }
.ai-tools-copy h2 span { color: var(--studio-accent); }
.ai-tools-copy p { font-size: 13px; line-height: 1.75; }
.ai-tools-hero-meta { border-radius: 9px; }
.ai-library-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 20px; }
.ai-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-tool-card, .ai-tool-card:first-child { grid-column: auto; min-height: 330px; border-radius: 9px; }
.ai-tool-card:first-child .ai-tool-visual, .ai-tool-visual { height: 175px; }
.ai-tool-card:first-child .ai-tool-card-copy strong, .ai-tool-card-copy strong { font-size: 21px; }
.ai-workbench { border-radius: 9px; }
.acc-card, .modal, .model-panel, .pop-panel, .advanced-panel, .reference-link-panel { border-radius: 9px; }

/* Modal details and result browsing. */
.lightbox { padding-bottom: 100px; }
.lightbox-body { max-height: calc(100dvh - 190px); }
.lightbox-body img, .lightbox-body video { max-height: calc(100dvh - 190px); box-shadow: none; }
.lightbox-gallery { display: flex; margin-top: 18px; gap: 16px; align-items: center; color: #f2eee5; font: 12px var(--mono); }
.lightbox-gallery button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; font-size: 18px; }
.lightbox-gallery button:hover:not(:disabled) { border-color: #f2eee5; background: rgba(255,255,255,.13); }
.lightbox-gallery button:disabled { opacity: .3; }
.lightbox-meta { margin-top: 12px; background: transparent; box-shadow: none; }
.mobile-topbar { display: none; }
.sw-light { background: linear-gradient(145deg, #f4f1eb 55%, #a94e33 56%); }
.sw-dark { background: linear-gradient(145deg, #171918 55%, #dc8968 56%); }
.sw-system { background: linear-gradient(145deg, #f4f1eb 49%, #171918 50% 72%, #dc8968 73%); }

@media (max-width: 1180px) {
  .hero, body.workspace .hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 10px 30px; }
  .hero-art { height: 280px; }
  .hero-title { font-size: clamp(46px, 5vw, 64px); }
  .ai-library-layout { grid-template-columns: 1fr; }
  .ai-workbench { position: relative; top: auto; }
}
@media (max-width: 920px) {
  .sidebar, .sidebar:hover { width: 74px; min-width: 74px; }
  .sidebar .brand-text, .sidebar .nav-label, .sidebar .nav-item span, .sidebar .user-info, .sidebar .logout-btn { display: none !important; }
  .sidebar .brand, .sidebar .nav-item, .sidebar:hover .nav-item { justify-content: center; padding-right: 0; padding-left: 0; }
  .sidebar .user-card { display: flex; justify-content: center; }
  .hero, body.workspace .hero { min-height: 0; padding-top: 32px; grid-template-columns: 1fr 270px; }
  .hero-art { height: 250px; }
  .hero-art-caption strong { display: none; }
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 220px); }
  .reel-card:first-child, .reel-card:nth-child(4) { grid-row: auto; grid-column: auto; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #app { padding-bottom: 66px; }
  .mobile-topbar { position: fixed; top: 0; right: 0; left: 0; z-index: 95; display: flex; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.11); background: #242a28; color: #f5f0e7; }
  .mobile-brand { display: flex; gap: 9px; align-items: center; }
  .mobile-brand .brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; background: #ede3d3; color: #242a28; font-size: 15px; }
  .mobile-brand > span:last-child { display: flex; gap: 1px; flex-direction: column; }
  .mobile-brand strong { font-size: 11px; letter-spacing: .22em; }
  .mobile-brand small { color: #aaa99e; font: 7px var(--mono); letter-spacing: .12em; }
  .mobile-top-actions { display: flex; gap: 6px; }
  .mobile-top-actions button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: #f5f0e7; font-size: 18px; }
  .mobile-top-actions button:hover, .mobile-top-actions button[aria-expanded="true"] { border-color: #dc8968; background: rgba(220,137,104,.15); }
  #mobileAccountBtn span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: #e5d6c4; color: #242a28; font-size: 12px; }
  .mobile-account-panel { position: absolute; top: calc(100% + 7px); right: 10px; display: flex; width: min(270px, calc(100vw - 20px)); padding: 17px; gap: 7px; flex-direction: column; border: 1px solid var(--studio-line-strong); border-radius: 9px; background: var(--studio-panel); color: var(--studio-text); box-shadow: var(--studio-shadow); }
  .mobile-account-panel strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-account-panel span { color: var(--studio-muted); font-size: 11px; }
  .mobile-account-panel button { margin-top: 8px; padding: 10px 0 0; border-top: 1px solid var(--studio-line); color: var(--studio-accent); text-align: left; font-size: 11px; }
  .sidebar, .sidebar:hover, .sidebar.rail, .sidebar.rail:hover { width: 100%; min-width: 100%; height: 66px; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); background: #242a28; }
  .sidebar .brand, .sidebar .side-bottom { display: none; }
  .sidebar .nav-label, .sidebar .side-spacer { display: none !important; }
  .sidebar .nav, .sidebar:hover .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body:not(.is-builder) .sidebar .nav, body:not(.is-builder) .sidebar:hover .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar .nav-item, .sidebar:hover .nav-item, .sidebar.rail .nav-item, .sidebar.rail:hover .nav-item { height: 50px; min-height: 50px; max-height: 50px; color: #b9beb6; }
  .sidebar .nav-item.active { color: #fff4e9; }
  .main { height: calc(100dvh - 66px); }
  .stage { padding: 56px 16px 70px; }
  #viewAssets, #viewTools, #viewAiTools, #viewAdmin { padding-top: 56px; }
  .hero, body.workspace .hero { display: flex; width: 100%; min-height: 0; margin: 0 auto; padding: 44px 0 30px; gap: 16px; align-items: flex-start; text-align: left; }
  .hero-copy .eyebrow { margin-bottom: 16px; font-size: 9px; }
  .hero-title { font-size: clamp(40px, 10vw, 60px); }
  .hero-lede { margin-top: 14px; padding: 0; font-size: 12px; }
  .hero-control { padding-top: 2px; }
  .hero-art { display: none; }
  .composer, body.workspace .composer { min-height: 186px; padding: 17px 14px 13px; border-radius: 9px; }
  .prompt-input { min-height: 79px; font-size: 16px; }
  .composer-bar { padding-top: 8px; }
  .chips { max-width: calc(100% - 54px); overflow-x: auto; flex-wrap: nowrap; }
  .chip { flex: 0 0 auto; }
  .reel-head { margin-top: 38px; }
  .reel-grid { display: flex; margin-right: -16px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .inspire-chip.reel-card, .reel-card:nth-child(1), .reel-card:nth-child(2), .reel-card:nth-child(3), .reel-card:nth-child(4) { width: 77vw; min-width: 77vw; height: 235px; min-height: 235px; scroll-snap-align: start; }
  .project-output-grid { grid-template-columns: 1fr; }
  .project-output-grid .card-overlay { opacity: 1; }
  .view-head, .ai-tools-hero, .tool-wrap, .ai-tools-toolbar, .ai-library-layout, .ai-task-section, .asset-grid, .asset-toolbar, .asset-pagination { width: calc(100% - 32px); }
  .view-head { padding-top: 33px; }
  .asset-grid, .ai-tool-grid { grid-template-columns: 1fr; }
  .ai-tool-card:first-child { grid-column: auto; }
  .lightbox { padding: 42px 15px 85px; }
  .lightbox-body img, .lightbox-body video { max-width: calc(100vw - 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .reel-card img, .reel-card video, .card, .composer { animation: none !important; transition: none !important; }
}

/* Workbench revision: creation and recent work are the first-screen content. */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --studio-bg: #111318;
  --studio-side: #17191f;
  --studio-panel: #1b1e25;
  --studio-panel-2: #252932;
  --studio-panel-3: #303540;
  --studio-line: rgba(226,231,243,.10);
  --studio-line-strong: rgba(226,231,243,.19);
  --studio-text: #f3f4f7;
  --studio-muted: #b5bac5;
  --studio-quiet: #8c929f;
  --studio-accent: #96a5ff;
  --studio-accent-strong: #b5bfff;
  --studio-accent-soft: rgba(150,165,255,.15);
  --studio-focus: #a6b5ff;
  --studio-focus-soft: rgba(150,165,255,.20);
  --studio-on-accent: #111629;
  --studio-shadow: 0 22px 55px rgba(0,0,0,.22);
  --studio-shadow-soft: 0 8px 28px rgba(0,0,0,.13);
  --workspace-max: 1480px;
  --workspace-gutter: clamp(24px, 3vw, 48px);
  --bg: var(--studio-bg);
  --bg-side: var(--studio-side);
  --surface: var(--studio-panel);
  --surface-2: var(--studio-panel-2);
  --surface-3: var(--studio-panel-3);
  --line: var(--studio-line);
  --line-strong: var(--studio-line-strong);
  --text: var(--studio-text);
  --muted: var(--studio-muted);
  --quiet: var(--studio-quiet);
  --accent: var(--studio-accent);
  --accent-hover: var(--studio-accent-strong);
  --accent-text: var(--studio-on-accent);
  --shadow: var(--studio-shadow);
  --shadow-soft: var(--studio-shadow-soft);
}
html[data-theme="light"] {
  color-scheme: light;
  --studio-bg: #f5f6f8;
  --studio-side: #17191f;
  --studio-panel: #ffffff;
  --studio-panel-2: #eef0f5;
  --studio-panel-3: #e2e5ee;
  --studio-line: rgba(27,31,42,.10);
  --studio-line-strong: rgba(27,31,42,.18);
  --studio-text: #1b1e27;
  --studio-muted: #626978;
  --studio-quiet: #7b8290;
  --studio-accent: #4859ce;
  --studio-accent-strong: #3445b7;
  --studio-accent-soft: rgba(72,89,206,.10);
  --studio-focus: #4859ce;
  --studio-focus-soft: rgba(72,89,206,.16);
  --studio-on-accent: #ffffff;
  --studio-shadow: 0 20px 60px rgba(20,26,45,.09);
  --studio-shadow-soft: 0 7px 24px rgba(20,26,45,.06);
}

.sidebar, .sidebar:hover { width: 208px; min-width: 208px; background: #17191f; }
.sidebar.rail, .sidebar.rail:hover { width: 72px; min-width: 72px; }
.sidebar .brand-name { color: #f3f4f7; }
.sidebar .brand-mark { background: #f3f4f7; color: #17191f; }
.sidebar .brand-sub, .sidebar .nav-label, .sidebar .user-balance { color: #9299a8; }
.sidebar .nav-label { margin-top: 35px; }
.sidebar .nav-item { color: #aeb4c1; font-size: 13px; }
.sidebar .nav-item:hover { color: #f3f4f7; }
.sidebar .nav-item.active { border-color: rgba(150,165,255,.2); background: rgba(150,165,255,.13); color: #f3f4f7; }
.sidebar .nav-item.active::before { background: #a2b0ff; }
.sidebar .user-email { color: #f3f4f7; }
.sidebar .user-avatar { background: #dfe4ff; color: #202642; }

.stage {
  display: grid;
  width: 100%;
  padding: 0 var(--workspace-gutter) 70px;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
  grid-template-rows: max-content max-content max-content max-content;
  column-gap: clamp(22px, 2.8vw, 44px);
  align-items: start;
  align-content: start;
  background: var(--studio-bg);
}
.stage > * { min-width: 0; }
.hero {
  display: flex;
  width: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 32px 0 26px;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: end;
  justify-content: space-between;
  flex-direction: row;
  gap: 24px;
  border-bottom: 1px solid var(--studio-line);
  overflow: visible;
  text-align: left;
}
.hero-copy { width: auto; min-width: 0; max-width: none; flex: 1 1 0; align-self: auto; }
.hero-copy .eyebrow { margin: 0 0 9px; color: var(--studio-quiet); font-size: 10px; letter-spacing: .11em; }
.hero-title { max-width: none; font-size: clamp(28px, 2.4vw, 38px); font-weight: 680; letter-spacing: -.055em; line-height: 1.12; }
.hero-lede { max-width: 42rem; margin: 7px 0 0; color: var(--studio-muted); font-size: 13px; line-height: 1.5; }
.hero-control { width: auto; min-width: 0; padding: 0; align-self: end; border: 0; }
.mode-switch { width: 190px; height: 38px; padding: 3px; border: 1px solid var(--studio-line-strong); border-radius: 8px; background: var(--studio-panel); }
.mode-btn { min-height: 30px; border-radius: 5px; color: var(--studio-muted); font-size: 12px; }
.mode-btn.active { color: var(--studio-on-accent); }
.mode-slider { inset: 3px 50% 3px 3px; border-radius: 5px; background: var(--studio-accent); }
.hero-art { display: none; }
html[data-theme="light"] .hero, html[data-theme="dark"] .hero { background: transparent; box-shadow: none; }

.composer {
  position: sticky;
  top: 22px;
  width: 100%;
  min-height: 0;
  margin: 24px 0 0;
  padding: 22px;
  grid-column: 1;
  grid-row: 2 / 5;
  align-self: start;
  border: 1px solid var(--studio-line);
  border-radius: 11px;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow-soft);
}
.composer:focus-within { border-color: var(--studio-line-strong); box-shadow: var(--studio-shadow-soft), 0 0 0 3px var(--studio-focus-soft); }
.composer-label { margin-bottom: 12px; color: var(--studio-text); font: 600 13px var(--sans); letter-spacing: 0; text-transform: none; }
.composer-label kbd { border: 0; color: var(--studio-quiet); font: 10px var(--mono); }
.prompt-input { min-height: 120px; max-height: 240px; font: 14px/1.65 var(--sans); }
.prompt-input::placeholder { color: var(--studio-quiet); opacity: 1; }
.composer-bar { display: flex; margin-top: 11px; padding-top: 17px; gap: 17px; align-items: stretch; flex-direction: column; border-top: 1px solid var(--studio-line); }
.chips { display: grid; width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kind-mini { display: none; }
.chips > .chip { display: inline-flex; width: 100%; min-width: 0; min-height: 42px; padding: 0 12px; justify-content: space-between; border-radius: 7px; background: var(--studio-bg); color: var(--studio-text); font-size: 12px; }
.chips > .chip[hidden] { display: none; }
.chips > .model-chip, .chips > .attach-chip { grid-column: span 2; }
.chips > .attach-chip { justify-content: flex-start; gap: 8px; border-style: dashed; color: var(--studio-muted); }
.chips > .attach-chip:hover { color: var(--studio-text); }
.chip svg.chev { width: 10px; opacity: .6; }
.send-btn { display: flex; width: 100%; min-width: 0; height: 46px; padding: 0 15px; justify-content: space-between; border-radius: 7px; background: var(--studio-accent); color: var(--studio-on-accent); font-size: 13px; font-weight: 650; box-shadow: none; }
.send-btn svg { width: 18px; height: 18px; transform: rotate(45deg); }
.send-btn:hover { background: var(--studio-accent-strong); }
.send-btn:disabled { opacity: .58; }

.results-head { display: flex; width: 100%; margin: 19px 0 11px; grid-column: 2; grid-row: 3; align-items: end; justify-content: space-between; gap: 16px; }
.results-head .eyebrow { color: var(--studio-quiet); font-size: 9px; letter-spacing: .1em; }
.results-head h2 { margin-top: 3px; color: var(--studio-text); font-size: 20px; font-weight: 660; letter-spacing: -.04em; }
.results-head > span { color: var(--studio-quiet); font-size: 11px; }
.results, body.workspace .results { width: 100%; margin: 0; grid-column: 2; grid-row: 4; }
.project-day { margin: 8px 0 10px; }
.project-day span { font-size: 16px; }
.project-day em { font-size: 11px; }
.generation-project { margin-bottom: 17px; padding-top: 14px; }
.project-copy h2 { font-size: 14px; font-weight: 620; }
.project-copy p, .project-status { font-size: 11px; }
.project-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-output-grid:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); }
.project-output-grid:has(> .card:only-child) > .card { max-height: 320px; }
.project-output-grid .card { border-radius: 8px; }
.project-output-grid .card-overlay, #viewAssets .card-overlay { background: linear-gradient(180deg, transparent 32%, rgba(10,12,18,.88)); }
.card:hover { transform: translateY(-2px); }
.card.result-unavailable { background: #242935; }
.card.result-unavailable .card-video-shell { background: #242935; }
.card.result-unavailable .card-overlay { background: linear-gradient(180deg, transparent 20%, rgba(10,13,20,.93)); }
.card.result-unavailable .card-media-fallback, .card.result-unavailable .card-video-poster { opacity: 0; }
.project-output-grid .card.result-unavailable,
.project-output-grid .card.result-unavailable.r-square,
.project-output-grid .card.result-unavailable.r-tall,
.project-output-grid .card.result-unavailable.r-wide,
.project-output-grid .card:has(> .card-failed) { display: flex; height: 70px; min-height: 70px; max-height: 70px; padding: 0 14px; grid-column: 1 / -1; align-items: center; aspect-ratio: auto; }
.project-output-grid .card.result-unavailable > *, .project-output-grid .card.result-unavailable .card-overlay { display: none; }
.project-output-grid .card.result-unavailable::after { position: static; padding: 0; border: 0; background: none; color: #c7cfdf; transform: none; }
.project-output-grid .card:has(> .card-failed) .card-failed { width: 100%; height: 100%; padding: 0; justify-content: flex-start; flex-direction: row; text-align: left; }
.project-output-grid .card:has(> .card-failed) .fail-icon { width: 20px; min-width: 20px; }
.project-output-grid .card:has(> .card-failed) .fail-msg { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.project-output-grid .card:has(> .card-failed) .fail-retry { margin: 0 0 0 auto; white-space: nowrap; }

.inspiration-reel, body.workspace .inspiration-reel { width: 100%; max-height: none; margin: 24px 0 0; grid-column: 2; grid-row: 2; opacity: 1; pointer-events: auto; }
.prompt-suggestions { justify-content: flex-start; }
.prompt-suggestion { min-height: 31px; padding: 0 10px; border: 1px solid var(--studio-line); border-radius: 6px; background: var(--studio-panel); color: var(--studio-muted); font-size: 11px; }
.reel-head { margin: 0 0 12px; }
.reel-head h2 { font-size: 18px; font-weight: 630; }
.reel-head .eyebrow { color: var(--studio-quiet); font-size: 9px; }
.reel-head p { color: var(--studio-quiet); }
.reel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 105px; gap: 8px; }
.inspire-chip.reel-card, .reel-card:nth-child(1), .reel-card:nth-child(2), .reel-card:nth-child(3), .reel-card:nth-child(4) { width: 100%; min-height: 0; height: 105px; grid-column: auto; grid-row: auto; border-radius: 7px; }
.reel-card strong { font-size: 15px; }
.reel-card small { font-size: 10px; }
.stage:has(.results:empty) .inspiration-reel { grid-column: 2; grid-row: 2; }
.stage:has(.results:empty) .results-head { display: none; }
.stage:has(.results:empty) .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 155px); }
.stage:has(.results:empty) .stage-empty { display: flex !important; grid-column: 2; grid-row: 2; min-height: 0; padding: 28px 0; }

.view-head { padding: 30px 0 22px; }
.view-title { font-size: clamp(29px, 2.6vw, 39px); font-weight: 660; }
.ai-tools-hero { padding: 30px 0 18px; }
.ai-tools-copy h2 { font-size: clamp(30px, 3vw, 42px); }
.ai-tool-card, .ai-tool-card:first-child { min-height: 285px; }
.ai-tool-card:first-child .ai-tool-visual, .ai-tool-visual { height: 145px; }
.ai-tool-card:first-child .ai-tool-card-copy strong, .ai-tool-card-copy strong { font-size: 18px; }
.sw-light { background: linear-gradient(145deg, #f5f6f8 55%, #4859ce 56%); }
.sw-dark { background: linear-gradient(145deg, #111318 55%, #96a5ff 56%); }
.sw-system { background: linear-gradient(145deg, #f5f6f8 49%, #111318 50% 72%, #96a5ff 73%); }

@media (max-width: 1120px) {
  .stage { grid-template-columns: minmax(300px, 365px) minmax(0, 1fr); column-gap: 24px; }
  .project-output-grid { grid-template-columns: 1fr; }
  .results-head > span { display: none; }
}
@media (max-width: 920px) {
  .sidebar, .sidebar:hover { width: 72px; min-width: 72px; }
  .sidebar .brand-text, .sidebar .nav-label, .sidebar .nav-item span, .sidebar .user-info, .sidebar .logout-btn { display: none; }
  .sidebar .brand, .sidebar .nav-item { justify-content: center; padding: 0; }
  .stage { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); column-gap: 20px; }
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 105px); }
}
@media (max-width: 760px) {
  .mobile-topbar, .sidebar, .sidebar:hover, .sidebar.rail, .sidebar.rail:hover { background: #17191f; }
  .sidebar, .sidebar:hover, .sidebar.rail, .sidebar.rail:hover { width: 100%; min-width: 100%; }
  #sidebar .nav-item { display: flex; padding: 3px 1px; gap: 3px; justify-content: center; flex-direction: column; }
  #sidebar .nav-item span { display: inline !important; max-width: none; opacity: 1; font-size: 9px; }
  .mobile-brand .brand-mark { background: #f3f4f7; color: #17191f; }
  .mobile-top-actions button:hover, .mobile-top-actions button[aria-expanded="true"] { border-color: #96a5ff; background: rgba(150,165,255,.16); }
  .stage { display: flex; padding: 56px 16px 70px; flex-direction: column; }
  .hero { width: 100%; margin: 0; padding: 23px 0 17px; align-items: start; flex-direction: column; gap: 14px; order: 1; }
  .hero-copy .eyebrow { margin-bottom: 8px; }
  .hero-title { font-size: 30px; }
  .hero-lede { margin-top: 5px; font-size: 12px; }
  .hero-control { width: 100%; align-self: stretch; padding: 0; }
  .mode-switch { width: 100%; }
  .composer { position: relative; top: auto; width: 100%; margin: 17px 0 0; padding: 18px; order: 2; }
  .prompt-input { min-height: 105px; font-size: 14px; }
  .composer-bar { padding: 14px 0 0; }
  .chips { display: grid; width: 100%; max-width: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips > .chip { flex: auto; }
  #composer .chips > .chip:not([hidden]) { display: inline-flex; }
  #composer .composer-bar > .send-btn { position: static; width: 100%; height: 45px; }
  .results-head { width: 100%; margin: 28px 0 8px; order: 4; }
  .results { width: 100%; order: 5; }
  .inspiration-reel { width: 100%; margin: 25px 0 0; order: 3; }
  .prompt-suggestions { max-height: 74px; overflow-x: auto; flex-wrap: nowrap; }
  .reel-head { margin-top: 19px; }
  .reel-head p { display: none; }
  .reel-grid { display: flex; width: 100%; margin-right: 0; gap: 9px; overflow-x: auto; }
  .inspire-chip.reel-card, .reel-card:nth-child(1), .reel-card:nth-child(2), .reel-card:nth-child(3), .reel-card:nth-child(4) { width: 62vw; min-width: 62vw; height: 175px; min-height: 175px; }
  .project-output-grid { grid-template-columns: 1fr; }
  .stage:has(.results:empty) .stage-empty { display: none !important; }
  .stage:has(.results:empty) .inspiration-reel { order: 3; }
  .view-head { padding-top: 26px; }
  .ai-tools-hero { padding-top: 26px; }
  .ai-tools-copy h2 { font-size: 32px; }
}

/* Video-led creation layout: a broad central canvas and a persistent result composer. */
:root, html[data-theme="dark"] {
  --studio-bg: #0f1116;
  --studio-side: #181b22;
  --studio-panel: #1b1e27;
  --studio-panel-2: #242833;
  --studio-text: #f4f5f8;
  --studio-muted: #b8bec9;
  --studio-quiet: #8c94a3;
  --studio-accent: #7586f4;
  --studio-accent-strong: #94a2ff;
  --studio-on-accent: #ffffff;
  --workspace-gutter: clamp(24px, 4vw, 72px);
}
html[data-theme="light"] {
  --studio-bg: #ffffff;
  --studio-side: #f5f6f9;
  --studio-panel: #ffffff;
  --studio-panel-2: #f5f6f9;
  --studio-text: #202431;
  --studio-muted: #626b7b;
  --studio-quiet: #838b99;
  --studio-accent: #485bd7;
  --studio-accent-strong: #3449c5;
  --studio-on-accent: #ffffff;
  --studio-shadow-soft: 0 14px 44px rgba(28, 42, 86, .07);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .sidebar:hover { background: var(--studio-side); border-right-color: #e9ecf2; color: var(--studio-text); }
html[data-theme="light"] .sidebar .brand-name,
html[data-theme="light"] .sidebar .user-email { color: var(--studio-text); }
html[data-theme="light"] .sidebar .brand-mark { background: #252a37; color: #fff; }
html[data-theme="light"] .sidebar .brand-sub,
html[data-theme="light"] .sidebar .nav-label,
html[data-theme="light"] .sidebar .user-balance { color: var(--studio-quiet); }
html[data-theme="light"] .sidebar .nav-item { color: #596273; }
html[data-theme="light"] .sidebar .nav-item:hover { background: #ebedf5; border-color: #e4e8f3; color: var(--studio-text); }
html[data-theme="light"] .sidebar .nav-item.active { background: #e9ecff; border-color: #dbe0fa; color: #3448bd; }
html[data-theme="light"] .sidebar .nav-item.active::before { background: #5165db; }
html[data-theme="light"] .sidebar .user-card { border-top-color: #e3e7ef; }
html[data-theme="light"] .sidebar .user-avatar { background: #e8ecff; color: #3448bd; }

#stage.stage {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 0 var(--workspace-gutter) 72px;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--studio-bg);
}
#stage.stage > * { min-width: 0; flex: 0 0 auto; }
#stage .hero {
  display: flex;
  width: min(100%, 1000px);
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  padding: clamp(42px, 8vh, 90px) 0 0;
  align-items: center;
  flex-direction: column;
  gap: 19px;
  border: 0;
  text-align: center;
}
#stage .hero-copy { width: 100%; max-width: 100%; flex: none; }
#stage .hero-copy .eyebrow { margin: 0 0 12px; color: var(--studio-quiet); font-size: 10px; letter-spacing: .16em; }
#stage .hero-title { max-width: none; color: var(--studio-text); font-size: clamp(31px, 3.25vw, 48px); font-weight: 670; line-height: 1.22; letter-spacing: -.055em; }
#stage .hero-lede { max-width: none; margin: 9px 0 0; color: var(--studio-muted); font-size: 13px; line-height: 1.6; }
#stage .hero-control { width: auto; padding: 0; align-self: center; }
#stage .mode-switch { width: 220px; height: 39px; border-radius: 10px; }
#stage .mode-slider { border-radius: 7px; }
#stage .mode-btn { min-height: 31px; }

#stage > .composer {
  position: relative;
  top: auto;
  width: min(100%, 1000px);
  min-height: 0;
  margin: 24px auto 0;
  padding: 19px 22px 17px;
  align-self: center;
  border-radius: 14px;
  background: var(--studio-panel);
  color: var(--studio-text);
  box-shadow: var(--studio-shadow-soft);
}
#composer .composer-label { margin-bottom: 10px; color: var(--studio-muted); font-size: 12px; }
#composer .prompt-input { width: 100%; min-height: 104px; max-height: 240px; font-size: 14px; line-height: 1.6; }
#composer .composer-bar { display: flex; min-width: 0; margin-top: 10px; padding-top: 12px; align-items: center; flex-direction: row; gap: 10px; }
#composer .chips { display: flex; width: auto; max-width: none; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; overflow: visible; }
#composer .chips > .chip { display: inline-flex; width: auto; min-width: 0; min-height: 36px; padding: 0 10px; grid-column: auto; justify-content: center; gap: 7px; border-style: solid; border-radius: 8px; background: var(--studio-panel-2); font-size: 11px; white-space: nowrap; }
#composer .chips > .chip[hidden] { display: none; }
#composer .chips > .attach-chip { min-width: 80px; }
#composer .chips > .model-chip { max-width: 215px; }
#composer .chips .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#composer .composer-bar > .send-btn { position: static; display: grid; width: 40px; min-width: 40px; height: 40px; margin-left: auto; padding: 0; place-items: center; border-radius: 50%; flex: 0 0 auto; }
#composer .send-btn span { display: none; }
#composer .send-btn svg { width: 19px; height: 19px; transform: none; }

#stage .inspiration-reel,
#stage .results-head,
#stage .results { width: min(100%, 1320px); margin-right: auto; margin-left: auto; }
#stage .inspiration-reel { max-height: none; margin-top: 23px; opacity: 1; overflow: visible; pointer-events: auto; }
#stage .prompt-suggestions { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
#stage .prompt-suggestion { min-height: 30px; border-radius: 7px; }
#stage .reel-head { margin: 29px 0 14px; }
#stage .reel-head h2 { font-size: 21px; }
#stage .reel-grid,
#stage:has(.results:empty) .reel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 205px; gap: 11px; }
#stage .inspire-chip.reel-card,
#stage .reel-card:nth-child(1),
#stage .reel-card:nth-child(2),
#stage .reel-card:nth-child(3),
#stage .reel-card:nth-child(4) { width: 100%; height: 205px; min-height: 205px; grid-column: auto; grid-row: auto; border-radius: 10px; }
#stage .reel-card strong { font-size: 17px; }
#stage .reel-card small { font-size: 10px; }
#stage .results-head { margin-top: 35px; }
#stage .results { margin-top: 0; }
#stage:has(.results:empty) .results-head,
#stage .stage-empty { display: none !important; }

body.reference-workspace #stage { padding-top: 32px; padding-bottom: 36px; align-items: stretch; }
body.reference-workspace #stage .hero,
body.reference-workspace #stage .inspiration-reel { display: none; }
body.reference-workspace #stage .results-head { margin-top: 0; margin-bottom: 12px; }
body.reference-workspace #stage .results { margin-top: 0; }
body.reference-workspace #stage .project-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) { grid-template-columns: minmax(0, min(100%, 900px)); justify-content: center; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card:not(.result-unavailable):not(:has(> .card-failed)) { max-height: none; min-height: 320px; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card.r-square { width: min(100%, 650px); margin: 0 auto; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card.r-tall { width: min(100%, 500px); margin: 0 auto; }
body.reference-workspace #dock { display: flex; padding: 12px var(--workspace-gutter) max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--studio-line); background: var(--studio-bg); }
body.reference-workspace #dock[hidden] { display: none; }
body.reference-workspace #dock::before,
body.reference-workspace #dock .dock-hint { display: none; }
body.reference-workspace #dock .composer { position: relative; top: auto; width: min(100%, 1000px); min-height: 0; margin: 0 auto; padding: 12px 16px 11px; border-radius: 13px; background: var(--studio-panel); box-shadow: var(--studio-shadow-soft); }
body.reference-workspace #dock .composer-label { display: none; }
body.reference-workspace #dock .prompt-input { height: 54px; min-height: 54px; max-height: 108px; }
body.reference-workspace #dock .composer-bar { margin-top: 4px; padding-top: 9px; }
body.reference-workspace #dock .composer.compact .chips .chip { display: inline-flex; }

@media (max-width: 1100px) {
  #stage .reel-grid, #stage:has(.results:empty) .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 190px); }
  #stage .inspire-chip.reel-card, #stage .reel-card:nth-child(1), #stage .reel-card:nth-child(2), #stage .reel-card:nth-child(3), #stage .reel-card:nth-child(4) { height: 190px; min-height: 190px; }
}
@media (max-width: 760px) {
  html[data-theme="light"] .mobile-topbar,
  html[data-theme="light"] .sidebar,
  html[data-theme="light"] .sidebar:hover,
  html[data-theme="light"] .sidebar.rail,
  html[data-theme="light"] .sidebar.rail:hover { background: var(--studio-side); }
  html[data-theme="light"] .mobile-brand .brand-mark { background: #252a37; color: #fff; }
  html[data-theme="light"] .mobile-brand strong { color: var(--studio-text); }
  html[data-theme="light"] .mobile-brand small { color: var(--studio-quiet); }
  #stage.stage { padding: 56px 16px 50px; }
  #stage .hero { padding-top: 18px; gap: 15px; }
  #stage .hero-title { font-size: clamp(29px, 8vw, 38px); }
  #stage .hero-lede { font-size: 12px; }
  #stage .hero-control, #stage .mode-switch { width: 100%; }
  #stage > .composer { width: 100%; margin-top: 20px; padding: 16px; }
  #composer .prompt-input { height: 94px; min-height: 94px; font-size: 16px; }
  #composer .composer-bar { align-items: center; }
  #composer .chips { display: flex; width: auto; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  #composer .chips > .chip { min-height: 34px; flex: 0 0 auto; }
  #composer .chips > .model-chip { max-width: min(100%, 200px); }
  #composer .composer-bar > .send-btn { width: 40px; min-width: 40px; height: 40px; }
  #stage .inspiration-reel { width: 100%; margin-top: 22px; }
  #stage .prompt-suggestions { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  #stage .reel-head { margin-top: 25px; align-items: flex-start; flex-direction: column; }
  #stage .reel-grid, #stage:has(.results:empty) .reel-grid { display: flex; width: 100%; grid-template-columns: none; grid-template-rows: none; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory; }
  #stage .inspire-chip.reel-card, #stage .reel-card:nth-child(1), #stage .reel-card:nth-child(2), #stage .reel-card:nth-child(3), #stage .reel-card:nth-child(4) { width: min(70vw, 290px); min-width: min(70vw, 290px); height: 190px; min-height: 190px; scroll-snap-align: start; }
  #stage .results-head, #stage .results { width: 100%; }
  body.reference-workspace #stage { padding-top: 76px; padding-bottom: 24px; }
  body.reference-workspace #stage .project-output-grid { grid-template-columns: 1fr; }
  body.reference-workspace #stage .project-output-grid:has(> .card:only-child) { grid-template-columns: 1fr; }
  body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card:not(.result-unavailable):not(:has(> .card-failed)) { min-height: 210px; }
  body.reference-workspace #dock { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  body.reference-workspace #dock .composer { padding: 10px 12px; }
  body.reference-workspace #dock .prompt-input { height: 45px; min-height: 45px; max-height: 65px; }
  body.reference-workspace #dock .chips { max-height: 75px; overflow-y: auto; }
}

/* Design fidelity pass: the approved creation composition, with real controls. */
.studio-topbar {
  position: relative;
  z-index: 12;
  display: grid;
  height: 66px;
  min-height: 66px;
  padding: 0 clamp(24px, 3.4vw, 54px);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--studio-bg);
}
.top-model-chip {
  display: inline-flex;
  width: max-content;
  max-width: 240px;
  min-height: 39px;
  padding: 0 13px 0 8px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--studio-line);
  border-radius: 10px;
  background: var(--studio-panel-2);
  color: var(--studio-text);
  font-size: 12px;
  white-space: nowrap;
}
.top-model-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.top-model-chip svg { width: 10px; height: 6px; margin-left: 6px; flex: 0 0 auto; }
.top-model-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 5px; background: #263042; color: #fff; font-size: 14px; }
.top-mode-switch { width: 248px; height: 40px; padding: 3px; border: 0; border-radius: 11px; background: var(--studio-panel-2); }
.top-mode-switch .mode-btn { min-height: 34px; font-size: 12px; }
.top-mode-switch .mode-slider { inset: 3px 50% 3px 3px; border-radius: 8px; }
.top-mode-switch.video .mode-slider { transform: translateX(calc(100% + 1px)); }
.topbar-actions { display: flex; min-width: 0; gap: 16px; justify-content: flex-end; align-items: center; }
.topbar-settings { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; color: var(--studio-muted); }
.topbar-settings:hover { background: var(--studio-panel-2); color: var(--studio-text); }
.topbar-settings svg { width: 18px; height: 18px; }
.topbar-profile { display: flex; min-width: 0; gap: 8px; align-items: center; color: var(--studio-text); font-size: 12px; }
.topbar-profile > span:nth-child(2) { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--studio-panel-2); color: var(--studio-text); font-weight: 650; }
.topbar-profile em { padding: 3px 7px; border-radius: 5px; background: var(--studio-accent-soft); color: var(--studio-accent); font-size: 10px; font-style: normal; }

.sidebar, .sidebar:hover { width: 208px; min-width: 208px; }
.sidebar .brand { min-height: 47px; padding: 0 9px; }
.sidebar:not(.rail) .brand-mark { display: none; }
.sidebar .brand-text { display: flex !important; gap: 5px; align-items: baseline; flex-direction: row !important; }
.sidebar .brand-name { font-size: 19px; font-weight: 760; letter-spacing: -.035em; }
.sidebar .brand-sub { margin-top: 0; font: 400 15px var(--sans); letter-spacing: -.04em; text-transform: none; }
.sidebar .nav-label { display: none !important; }
.sidebar .nav { margin-top: 23px; }
.sidebar .nav-item { min-height: 49px; margin-bottom: 4px; font-size: 13px; }
.sidebar .nav-item.active { border-radius: 10px; }
.sidebar .rail-toggle { right: -12px; }
.sidebar.rail .brand-mark { display: grid; }
.sidebar.rail .brand-text { display: none !important; }
.sidebar.rail .nav { margin-top: 23px; }

#stage.stage { padding-right: clamp(24px, 3.4vw, 54px); padding-left: clamp(24px, 3.4vw, 54px); }
#stage .hero { padding-top: clamp(30px, 6vh, 64px); gap: 0; }
#stage .hero-title { font-size: clamp(34px, 3.05vw, 48px); letter-spacing: -.055em; }
#stage .hero-lede { margin-top: 12px; font-size: 14px; }
#stage .hero-control { display: none; }

#stage > .composer {
  width: min(100%, 1000px);
  margin-top: 30px;
  padding: 23px 26px 18px;
  border: 1px solid color-mix(in srgb, var(--studio-accent) 38%, var(--studio-line));
  border-radius: 16px;
  background: var(--studio-panel);
  box-shadow: 0 12px 40px rgba(34, 76, 190, .08), 0 0 0 2px rgba(96, 153, 255, .04);
}
#stage > .composer:focus-within { box-shadow: 0 16px 45px rgba(52, 89, 203, .12), 0 0 0 3px var(--studio-focus-soft); }
#stage > .composer .composer-label { display: none; }
.composer-input-row { display: flex; min-height: 119px; gap: 20px; align-items: stretch; }
#composer .composer-upload,
#composer .composer-upload:hover {
  display: flex;
  width: 108px;
  min-width: 108px;
  min-height: 108px;
  padding: 12px 7px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border: 1px dashed var(--studio-line-strong);
  border-radius: 11px;
  background: var(--studio-panel-2);
  color: var(--studio-muted);
  font-size: 11px;
  text-align: center;
  white-space: normal;
}
#composer .composer-upload:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
#composer .composer-upload svg { width: 22px; height: 22px; }
#composer .composer-upload b { font-size: 17px; font-weight: 400; line-height: 1; }
#composer .composer-writing { position: relative; min-width: 0; flex: 1 1 auto; }
#composer .composer-writing .prompt-input { height: 102px; min-height: 102px; max-height: 240px; padding: 0 0 22px; resize: vertical; background: transparent; font-size: 15px; line-height: 1.55; }
#composer .prompt-counter { position: absolute; right: 0; bottom: 0; color: var(--studio-quiet); font: 11px var(--mono); }
#composer .prompt-counter.over-guideline { color: #bf624f; }
#stage > .composer .composer-bar { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--studio-line); }
#composer .chips { gap: 8px; }
#composer .chips > .chip {
  position: relative;
  display: grid;
  min-width: 108px;
  height: 53px;
  padding: 6px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 13px 22px;
  align-content: center;
  justify-content: stretch;
  column-gap: 9px;
  row-gap: 1px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--studio-panel-2);
  text-align: left;
}
#composer .chips > .chip:hover { border-color: var(--studio-line-strong); }
#composer .chips > .chip::before { display: block; grid-column: 1 / -1; color: var(--studio-quiet); font-size: 10px; line-height: 13px; }
#composer .model-chip::before { content: "模型"; }
#composer .mode-chip::before { content: "创作方式"; }
#composer #ratioChip::before { content: "比例"; }
#composer #resChip::before { content: "清晰度"; }
#composer #qualityChip::before { content: "画质"; }
#composer #durChip::before { content: "时长"; }
#composer #countChip::before { content: "生成数量"; }
#composer #advancedChip::before { content: "参数"; }
#composer .chips .chip-label { grid-column: 1; grid-row: 2; color: var(--studio-text); font-size: 11px; line-height: 20px; }
#composer .chips .chev { grid-column: 2; grid-row: 2; align-self: center; }
#composer .chips .mode-dot { display: none; }
#composer .chips > .model-chip { width: 178px; max-width: 178px; }
#composer .chips > .mode-chip { width: 126px; }
#composer .chips > .advanced-chip { min-width: 122px; }
#composer .composer-bar > .send-btn { width: 52px; min-width: 52px; height: 52px; background: linear-gradient(135deg, #7e79fa, #3f8ff6); box-shadow: 0 5px 18px rgba(68, 107, 225, .22); }
#composer .send-btn svg { width: 22px; height: 22px; transform: rotate(45deg); }

#stage .inspiration-reel { margin-top: 24px; }
#stage .prompt-suggestions { min-height: 43px; gap: 8px; align-items: center; justify-content: center; }
.suggestion-intro { margin-right: 5px; color: var(--studio-muted); font-size: 12px; white-space: nowrap; }
#stage .prompt-suggestion { display: inline-flex; min-height: 39px; padding: 4px 11px 4px 5px; gap: 8px; align-items: center; border: 1px solid var(--studio-line); border-radius: 22px; background: var(--studio-panel-2); color: var(--studio-text); font-size: 11px; white-space: nowrap; }
#stage .prompt-suggestion img { width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
#stage .reel-head { margin: 43px 0 17px; align-items: end; }
#stage .reel-head h2 { color: var(--studio-text); font-size: 21px; }
#stage .reel-head p { display: block; max-width: none; margin-top: 7px; color: var(--studio-quiet); font-size: 11px; text-align: left; }
.reel-head-note { color: var(--studio-quiet); font-size: 11px; }
#stage .reel-grid,
#stage:has(.results:empty) .reel-grid { grid-template-rows: auto; gap: 13px; }
#stage .inspire-chip.reel-card,
#stage .reel-card:nth-child(1),
#stage .reel-card:nth-child(2),
#stage .reel-card:nth-child(3),
#stage .reel-card:nth-child(4) { display: flex; height: auto; min-height: 0; overflow: visible; align-items: stretch; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
#stage .reel-media { display: block; width: 100%; height: clamp(150px, 14vw, 195px); overflow: hidden; border-radius: 9px; background: var(--studio-panel-2); }
#stage .reel-media img { position: static; width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform .25s ease; }
#stage .reel-card:hover .reel-media img { filter: none; transform: scale(1.035); }
#stage .reel-caption { display: flex; padding: 10px 1px 0; gap: 5px; flex-direction: column; }
#stage .reel-card strong,
#stage .reel-card small { position: static; display: block; color: var(--studio-text); transform: none; }
#stage .reel-card strong { font-size: 13px; font-weight: 660; line-height: 1.3; }
#stage .reel-card small { color: var(--studio-quiet); font-size: 11px; line-height: 1.3; }
#stage .results-head { margin-top: 48px; }

body.reference-workspace .studio-topbar { border-bottom: 1px solid var(--studio-line); }
body.reference-workspace #dock .composer-input-row { min-height: 54px; }
body.reference-workspace #dock .composer-upload { width: 52px; min-width: 52px; min-height: 52px; padding: 7px; }
body.reference-workspace #dock .composer-upload span,
body.reference-workspace #dock .composer-upload b { display: none; }
body.reference-workspace #dock .composer-writing .prompt-input { height: 54px; min-height: 54px; }
body.reference-workspace #dock .composer-bar { margin-top: 9px; }

@media (min-width: 761px) and (max-width: 920px) {
  #sidebar, #sidebar:hover, #sidebar.rail, #sidebar.rail:hover { width: 72px; min-width: 72px; }
  #sidebar .brand-mark, #sidebar.rail .brand-mark { display: grid; }
  #sidebar .brand-text, #sidebar.rail .brand-text { display: none !important; }
  #sidebar .rail-toggle { display: none !important; }
  .topbar-profile > span:nth-child(2) { display: none; }
}
@media (max-width: 760px) {
  #app { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  #sidebar, #sidebar:hover, #sidebar.rail, #sidebar.rail:hover {
    width: 100%;
    min-width: 100%;
    height: calc(66px + env(safe-area-inset-bottom));
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
  }
  .main { height: calc(100dvh - 66px - env(safe-area-inset-bottom)); }
  .studio-topbar { display: none; }
  #sidebar .rail-toggle { display: none !important; }
  #sidebar .side-bottom,
  #sidebar.rail .side-bottom,
  #sidebar.rail:hover .side-bottom { display: none !important; }
  #sidebar .nav, #sidebar.rail .nav { margin-top: 0; }
  #sidebar .brand-text, #sidebar.rail .brand-text { display: none !important; }
  #sidebar .brand-mark, #sidebar.rail .brand-mark { display: none; }
  #stage.stage { padding-right: 16px; padding-left: 16px; }
  #stage .hero { padding-top: 18px; }
  #stage .hero-control { display: block; }
  #stage > .composer { margin-top: 20px; padding: 15px; }
  .composer-input-row { min-height: 98px; gap: 11px; }
  #composer .composer-upload, #composer .composer-upload:hover { width: 76px; min-width: 76px; min-height: 88px; padding: 6px; font-size: 10px; }
  #composer .composer-upload svg { width: 19px; height: 19px; }
  #composer .composer-writing .prompt-input { height: 94px; min-height: 94px; padding-bottom: 18px; font-size: 14px; }
  #stage > .composer .composer-bar { margin-top: 11px; padding-top: 11px; }
  #composer .chips { flex-wrap: nowrap; overflow-x: auto; }
  #composer .chips > .chip { min-width: 100px; height: 47px; flex: 0 0 auto; }
  #composer .chips > .model-chip { width: 145px; max-width: 145px; }
  #composer .composer-bar > .send-btn { width: 47px; min-width: 47px; height: 47px; }
  #stage .inspiration-reel { margin-top: 19px; }
  #stage .prompt-suggestions { justify-content: flex-start; }
  .suggestion-intro { display: none; }
  #stage .reel-head { margin-top: 25px; align-items: flex-start; }
  #stage .reel-head p { display: block; }
  .reel-head-note { display: none; }
  #stage .reel-grid, #stage:has(.results:empty) .reel-grid { gap: 10px; }
  #stage .inspire-chip.reel-card, #stage .reel-card:nth-child(1), #stage .reel-card:nth-child(2), #stage .reel-card:nth-child(3), #stage .reel-card:nth-child(4) { width: min(72vw, 290px); min-width: min(72vw, 290px); height: auto; min-height: 0; }
  #stage .reel-media { height: 174px; }
  body.reference-workspace #dock .composer-upload { width: 45px; min-width: 45px; min-height: 45px; }
  body.reference-workspace #dock .composer-writing .prompt-input { height: 45px; min-height: 45px; }
}