/* The existing interaction styles are a low-priority fallback. This is the
   single visual system for every studio surface and every theme. */
@import url('/assets/styles.css?v=6.0.0') layer(legacy);
@import url('/assets/sketch-v3.css?v=6.0.0') layer(legacy);
@import url('/assets/ui-v5.css?v=6.0.0') layer(legacy);

:root, html[data-ui="paper-sketch"] {
  color-scheme: light;
  --bg-canvas: #f5f3ed; --bg-surface: #fffefa;
  --bg-surface-elevated: #fffefa; --bg-surface-muted: #eeede7;
  --text-primary: #23292d; --text-secondary: #555f65; --text-muted: #626e74;
  --line-subtle: #dedfd8; --line-strong: #b9bdb6; --line-active: #315cce;
  --accent: #315cce; --accent-hover: #244bb5; --accent-soft: #e8edfc;
  --accent-gradient: #315cce; --danger: #ba4e3e; --warning: #966014; --info: #315cce;
  --success: #28634f; --success-soft: #eaf3ec; --danger-soft: #fbefec; --warning-soft: #f9f0dc;
  --on-accent: #fffefa; --screen-bg: #f0f2ed; --focus-ring: #315cce;
  --bg-surface-glass: var(--bg-surface); --bg-surface-card: var(--bg-surface); --bg-card-hover: var(--bg-surface-muted);
  --bg-input: var(--bg-surface); --bg-input-focus: var(--bg-surface); --surface-raised: var(--bg-surface);
  --border-focus: var(--accent); --accent-glow: none; --shadow-floating: var(--shadow-md);
  --accent-ink: var(--accent); --accent-soft-hover: var(--accent-soft); --accent-gradient-hover: var(--accent-hover);
  --paper: var(--bg-canvas); --paper-light: var(--bg-surface); --paper-deep: var(--bg-surface-muted);
  --ink: var(--text-primary); --ink-soft: var(--text-secondary); --red: var(--danger);
  --mint: var(--accent); --mint-dark: var(--accent-hover); --corn: #eadbb5; --sky: var(--info);
  --black: #23292d; --white: #fffefa; --border: 1px solid var(--line-subtle);
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-display); --font-sketch: var(--font-display); --font-ui: var(--font-display);
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px #23292d08; --shadow: 2px 3px 0 #23292d0c;
  --shadow-md: 0 16px 36px #23292d16;
  --topbar-height: 70px; --studio-header-height: 70px; --sidebar-width: 224px;
  --transition-fast: 140ms ease; --transition-base: 180ms ease;
  font-family: var(--font-display); font-size: 16px;
}
html[data-studio-theme="dark"], html[data-theme="dark"] {
  color-scheme: dark; --bg-canvas: #191e23; --bg-surface: #22282e;
  --bg-surface-elevated: #282f36; --bg-surface-muted: #1d242b;
  --text-primary: #f0f1eb; --text-secondary: #b9c1c5; --text-muted: #97a4ab;
  --line-subtle: #363f46; --line-strong: #52606a; --line-active: #91adff;
  --accent: #91adff; --accent-hover: #b0c4ff; --accent-soft: #2b3854;
  --accent-gradient: #91adff; --danger: #ff9b86; --warning: #e4bd72; --info: #91adff;
  --success: #9bd5b5; --success-soft: #263b33; --danger-soft: #442f2d; --warning-soft: #403827;
  --on-accent: #142341; --screen-bg: #1b2229; --focus-ring: #91adff;
  --corn: #423925; --black: #11171c; --shadow: 2px 3px 0 #0003;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text-primary); background: var(--bg-canvas); font: 400 1rem/1.5 var(--font-display); }
html, body { max-width: 100%; overflow-x: clip; }
button, input, textarea, select, summary { font-family: inherit; font-size: .875rem; letter-spacing: 0; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { min-height: 36px; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--line-subtle); border-radius: 6px; box-shadow: none; color: var(--text-primary); font-weight: 550; line-height: 1.3; cursor: pointer; transition: background 140ms, border-color 140ms; }
button:hover { border-color: var(--line-strong); background: var(--bg-surface-muted); transform: none; }
button:disabled { cursor: not-allowed; opacity: .4; }
button strong { font-weight: 600; }
a { color: var(--accent); text-underline-offset: 3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { min-height: 42px; width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--bg-surface); color: var(--text-primary); padding: 10px 12px; box-shadow: none; font: 400 .9375rem/1.5 var(--font-display); }
textarea { resize: vertical; }
select { padding-right: 32px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); min-width: 0; width: 100%; }
label { min-width: 0; }
label > span:first-child, .field-heading, legend, .full-field > span { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
small, .field-hint, .field-help { font-size: .8125rem; line-height: 1.55; color: var(--text-secondary); }
p { line-height: 1.6; }
h1, h2, h3, h4, strong, b { font-family: var(--font-display); }
h1, h2, h3 { color: var(--text-primary); font-weight: 650; letter-spacing: -.025em; text-transform: none; }
h2 { font-size: 1.125rem; line-height: 1.4; }
::selection { background: var(--accent-soft); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden], .is-hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.pixel-button, .hero-action, .mini-link, .render-button, .auth-submit { font-family: var(--font-display); text-transform: none; letter-spacing: 0; box-shadow: none; border-radius: 6px; font-size: .875rem; min-height: 38px; }
.pixel-button { padding: 9px 13px; gap: 8px; border: 1px solid var(--line-strong); }
.pixel-button.ink, .hero-action, .render-button, .auth-submit, .primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.hero-action { padding: 12px 17px; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; border: 1px solid var(--accent); box-shadow: 2px 3px 0 var(--line-strong); border-radius: 6px 8px 5px 7px; }
.hero-action > span { font-size: 1.25rem; }
.mini-link { background: transparent; border: 0; color: var(--accent); padding: 6px 8px; }
.danger, .pixel-button.danger { color: var(--danger); background: transparent; border-color: var(--line-subtle); }
/* One quiet header, one clear navigation rail. */
.topbar { height: var(--topbar-height); min-height: var(--topbar-height); display: flex; align-items: center; gap: 28px; padding: 0 24px; background: var(--bg-surface); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; width: 100%; z-index: 100; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding: 0; color: var(--text-primary); min-width: 0; }
.brand-mark { width: 35px; height: 35px; padding: 6px; gap: 2px; grid-template-columns: repeat(3,1fr); background: var(--bg-surface); border: 1.5px solid var(--text-primary); border-radius: 8px 6px 9px 5px; box-shadow: 2px 2px 0 var(--line-strong); transform: rotate(-3deg); }
.brand-mark i { width: auto; height: auto; background: var(--text-primary); border-radius: 1px; box-shadow: none; }
.brand-mark i:nth-child(3n) { opacity: .25; }
.brand-mark i:nth-child(5) { background: var(--accent); opacity: 1; }
.brand-copy { display: grid; gap: 0; }
.subtoken-brand-icon { display: block; width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; border-radius: 8px; }
.brand-copy strong { font-size: 1.1rem; font-weight: 750; letter-spacing: -.035em; line-height: 1.35; }
.brand-copy em { color: var(--text-secondary); font-weight: 450; font-style: normal; }
.brand-copy small { font-size: .75rem; letter-spacing: .02em; font-weight: 400; color: var(--text-muted); }
.machine-strip { display: flex; align-items: center; gap: 16px; margin-left: auto; height: 34px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.machine-cell { display: flex; gap: 6px; align-items: center; border: 0; padding: 0; min-width: 0; }
.machine-cell:first-child > span:last-child { display: flex; gap: 6px; align-items: center; }
.machine-cell:first-child small { display: none; }
.machine-cell small { font: 400 .75rem var(--font-display); text-transform: lowercase; color: var(--text-muted); }
.machine-cell strong { font: 550 .75rem var(--font-display); text-transform: lowercase; }
.led, .live-badge i, .provider-badge i { width: 7px; height: 7px; box-shadow: none; border: 0; }
.top-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; padding: 0; }
.top-actions .project-switcher { display: none; }
.top-actions .pixel-button { border: 0; background: transparent; font-size: .8125rem; min-height: 36px; padding: 8px; }
.top-actions #key-focus { display: none; }
.top-actions #api-open > span:first-child { display: none; }
.language span { color: var(--text-secondary); }
.language span.is-active { color: var(--accent); }
.theme-switch { width: 54px; height: 32px; min-height: 32px; padding: 4px; display: flex; gap: 2px; background: var(--bg-surface-muted); border: 1px solid var(--line-subtle); border-radius: 20px; box-shadow: none; }
.theme-switch::before, .theme-switch::after { display: none; }
.theme-switch { width: 34px; justify-content: center; background: transparent; border: 0; border-radius: 5px; }
.theme-switch span { display: none; }
html[data-studio-theme="dark"] .theme-switch span:first-child,
html[data-studio-theme="light"] .theme-switch span:last-child { display: grid; place-items: center; color: var(--text-secondary); }
.theme-switch span { width: 22px; height: 22px; font-size: 14px; }
.account-button { border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 11px 5px 6px; min-height: 36px; gap: 8px; background: var(--bg-surface); box-shadow: none; }
.account-avatar { height: 25px; width: 25px; border: 0; box-shadow: none; background: var(--accent-soft); color: var(--accent); font-size: 10px; }
.account-copy small { display: none; }
.account-copy strong { font-size: .8125rem; font-weight: 550; text-transform: none; }
#theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 5px; }
.theme-toggle-track { display: grid; place-items: center; width: auto; height: auto; border: 0; background: none; box-shadow: none; padding: 0; }
.theme-toggle-track b, .theme-toggle-track::before, .theme-toggle-track::after { display: none; }
.theme-toggle-track i { display: none; position: static; width: 24px; height: 24px; font-size: 21px; line-height: 24px; font-style: normal; color: var(--text-secondary); transform: none; opacity: 1; }
html[data-studio-theme="dark"] .theme-sun, html[data-studio-theme="light"] .theme-moon { display: block; }
.account-chip { display: flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 5px 10px 5px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-surface); box-shadow: none; }
.sidebar-toggle { display: flex; flex: 0 0 32px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 32px; height: 34px; min-height: 34px; padding: 6px; border: 1px solid var(--line-subtle); border-radius: 5px; background: transparent; }
.sidebar-toggle span { width: 18px; height: 1.5px; background: var(--text-primary); }
.sidebar-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
@media (min-width: 941px) {
  .sidebar-hidden .studio-shell { grid-template-columns: minmax(0,1fr); }
  .sidebar-hidden .studio-sidebar { display: none; }
}
.studio-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); min-height: calc(100dvh - var(--topbar-height)); }
.studio-sidebar { width: auto; position: sticky; top: var(--topbar-height); height: calc(100dvh - var(--topbar-height)); padding: 24px 14px 14px; border-right: 1px solid var(--line-subtle); background: var(--bg-surface); display: flex; flex-direction: column; gap: 23px; overflow-y: auto; }
.sidebar-project { display: block; flex: 0 0 auto; padding: 12px; min-height: 0; height: auto; color: var(--text-primary); background: var(--bg-canvas); border: 1px solid var(--line-strong); border-radius: 6px 9px 5px 8px; box-shadow: 2px 2px 0 var(--line-subtle); }
.sidebar-project-index { font-size: .6875rem; color: var(--text-muted); font-weight: 500; letter-spacing: .06em; }
.sidebar-project strong { font-size: .875rem; font-weight: 600; display: block; white-space: normal; overflow: visible; line-height: 1.45; margin: 7px 0; max-height: none; }
.sidebar-project small { font-size: .75rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.sidebar-project-meter { height: 2px; margin: 8px 0; border: 0; background: var(--line-subtle); }
.sidebar-project-meter i { background: var(--accent); }
.sidebar-nav { display: grid; gap: 20px; flex: 0 0 auto; }
.sidebar-group { display: grid; gap: 3px; }
.sidebar-group + .sidebar-group { border: 0; padding: 0; margin: 0; }
.sidebar-group-label { padding: 0 10px; margin: 0 0 6px; font-size: .6875rem; font-weight: 600; color: var(--text-muted); letter-spacing: .065em; }
.sidebar-item { display: flex; align-items: center; padding: 9px 10px; gap: 10px; height: auto; min-height: 39px; border: 1px solid transparent; border-radius: 5px; background: transparent; text-align: left; color: var(--text-secondary); box-shadow: none; }
.sidebar-item > span { width: 19px; flex: 0 0 19px; text-align: center; font-size: 17px; color: var(--text-muted); }
.sidebar-item strong { font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sidebar-item em { margin-left: auto; font-size: .6875rem; font-style: normal; font-weight: 500; padding: 1px 5px; min-width: 20px; height: 20px; border: 0; background: var(--bg-surface-muted); border-radius: 4px; box-shadow: none; }
.sidebar-item em { color: var(--text-secondary); }
.sidebar-item.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.sidebar-item.is-active::before, .sidebar-item.is-active::after { display: none; }
.sidebar-item.is-active > span { color: var(--accent); }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line-subtle); padding-top: 12px; display: flex; gap: 4px; }
.sidebar-foot button { flex: 1; padding: 7px 2px; border: 0; background: transparent; font-size: .75rem; }
.sidebar-foot strong { font-size: .6875rem; font-weight: 450; }
.sidebar-collapsed { --sidebar-width: 66px; }
.sidebar-collapsed .studio-sidebar { padding-inline: 10px; }
.sidebar-collapsed :is(.sidebar-project,.sidebar-group-label,.sidebar-item strong,.sidebar-item em,.sidebar-foot strong) { display: none; }
.sidebar-collapsed .sidebar-item { justify-content: center; padding: 8px 0; }
.sidebar-collapsed .sidebar-foot { flex-direction: column; }
.sidebar-scrim { display: none; }
.studio-canvas { width: 100%; min-width: 0; padding: 0; background: var(--bg-canvas); }
.studio-page { max-width: 1500px; padding: 36px clamp(24px,3.6vw,58px) 56px; margin: 0 auto; }
.page-masthead, .page-masthead.compact { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 0 28px; margin: 0 0 24px; border-bottom: 1px solid var(--line-strong); background: transparent; }
.page-code { font-size: .6875rem; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: .09em; font-weight: 400; }
.page-masthead h1, .page-masthead.compact h1, .dashboard-masthead h1 { margin: 7px 0 9px; font-size: clamp(1.65rem,2.5vw,2.3rem); line-height: 1.18; letter-spacing: -.045em; font-weight: 650; max-width: none; }
.page-masthead p { margin: 0; max-width: 640px; color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; }
.page-masthead h1::after { display: none; }
.hero-action::before, .hero-action::after, .brand-mark::before, .brand-mark::after { display: none; }
.brand-mark { filter: none; animation: none; }
.brand-mark { box-shadow: 2px 2px 0 var(--line-strong); }
.dashboard-masthead::before { display: none; }
.hero-action { filter: none; background-image: none; }
.page-masthead { min-height: 0; }
.dashboard-grid { margin: 0; }
.empty-glyph { width: 38px; height: 38px; min-height: 0; border: 1px solid var(--line-strong); border-radius: 4px 7px 3px 6px; display: grid; place-items: center; box-shadow: none; }
.section-heading.editorial { border-bottom: 0; }
.dashboard-pulse .pulse-row { border-style: solid; }
.dashboard-project-empty > div { text-align: center; }
.dashboard-project-empty p { margin-top: 6px; }
.sidebar-item strong { white-space: nowrap; }
.section-heading, .section-heading.editorial, .console-heading { padding: 0; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.section-heading > div { display: flex; gap: 10px; align-items: center; }
.section-heading h2, .console-heading h2, .panel-label h2 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.015em; text-transform: none; }
.section-heading > div > span, .console-number, .panel-label > span { font: 400 .6875rem var(--font-mono); background: transparent; color: var(--text-muted); border: 1px solid var(--line-strong); border-radius: 4px; width: 26px; height: 26px; display: inline-grid; place-items: center; }
.page-empty, .dashboard-project-empty, .queue-empty, .recent-empty, .image-candidate-empty { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; min-height: 215px; padding: 28px; border: 1px dashed var(--line-strong); border-radius: 8px 12px 7px 10px; background: var(--bg-surface); box-shadow: none; color: var(--text-secondary); }
.page-empty > span, .empty-glyph { font-size: 26px; color: var(--text-muted); }
.page-empty strong, .dashboard-project-empty strong, .queue-empty strong { font-size: 1rem; font-weight: 550; color: var(--text-primary); letter-spacing: 0; }
.page-empty p, .dashboard-project-empty p, .queue-empty p { margin: 0; max-width: 440px; font-size: .875rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 24px; }
.dashboard-now, .dashboard-pulse { background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 24px; box-shadow: var(--shadow); }
.dashboard-project-empty { min-height: 235px; grid-template-columns: 1fr; background: var(--bg-canvas); }
.dashboard-project-card { display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 18px; min-height: 0; padding: 8px 0; }
.dashboard-project-card .project-poster { width: 86px; aspect-ratio: 4/5; max-height: none; padding: 11px; border: 1px solid var(--line-strong); border-radius: 5px 8px 5px 6px; background: var(--accent-soft); color: var(--accent); box-shadow: 2px 3px 0 var(--line-subtle); }
.dashboard-project-card .project-poster span { color: var(--accent); font-size: .75rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.dashboard-project-card .project-poster strong { color: var(--accent); font: 550 1.75rem/1 var(--font-display); letter-spacing: -.04em; text-shadow: none; }
.dashboard-project-card > div:not(.project-poster) { min-width: 0; }
.dashboard-project-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.45; overflow-wrap: anywhere; }
.dashboard-project-card p { margin: 7px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--text-secondary); }
.dashboard-project-card > button { grid-column: 2; justify-self: start; margin: 0; font-size: .875rem; }
.dashboard-pulse { background: var(--bg-surface); color: var(--text-primary); }
.pulse-label { font-size: .6875rem; color: var(--text-muted); letter-spacing: .08em; }
.pulse-number { padding: 14px 0 22px; display: flex; flex-direction: row; align-items: baseline; gap: 10px; }
.pulse-number strong { font: 400 3rem/1 var(--font-display); letter-spacing: -.06em; color: var(--text-primary); }
.pulse-number span { font-size: .6875rem; color: var(--text-muted); }
.pulse-row { padding: 11px 0; font-size: .8125rem; border-top: 1px solid var(--line-subtle); }
.pulse-row strong { font-size: .9375rem; color: var(--text-primary); }
.pulse-row, .pulse-row + .pulse-row { border: 0; border-top: 1px solid var(--line-subtle); box-shadow: none; padding: 12px 0; }
.pulse-row span, .pulse-number span { font-size: .75rem; font-weight: 450; letter-spacing: 0; }
.pulse-number { border: 0; }
.pulse-number span { margin: 0; }
.pipeline-strip { margin-top: 30px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; border: 0; padding: 0; background: none; }
.pipeline-strip > i { display: none; }
.pipeline-strip button { padding: 18px 14px; display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 7px; text-align: left; border: 1px solid var(--line-strong); background: var(--bg-surface); border-radius: 7px 10px 5px 8px; box-shadow: 1px 2px 0 var(--line-subtle); min-height: 116px; }
.pipeline-strip button :is(strong,small) { margin: 0; }
.pipeline-strip button > span { font: 400 .6875rem var(--font-mono); color: var(--accent); }
.pipeline-strip strong { font-size: .8125rem; letter-spacing: 0; }
.pipeline-strip small { font-size: .75rem; }
.project-toolbar, .asset-toolbar, .storyboard-toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 22px; padding: 0; background: none; border: 0; }
.search-field { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-surface); padding-left: 12px; width: min(100%,340px); }
.search-field input { border: 0 !important; background: none !important; }
.view-switch, .asset-filters { display: flex; flex-wrap: wrap; gap: 4px; background: transparent; border: 0; padding: 0; }
.view-switch button, .asset-filters button { border: 1px solid transparent; background: none; border-radius: 5px; padding: 8px 12px; font-size: .8125rem; }
.view-switch button.is-active, .asset-filters button.is-active { border-color: var(--line-strong); background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.project-grid, .asset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 22px; }
.project-grid > .page-empty, .asset-grid > .page-empty { grid-column: 1/-1; }
.project-card, .asset-card { background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 7px 10px 6px 8px; box-shadow: var(--shadow); overflow: hidden; }
.project-card-button { padding: 0; width: 100%; text-align: left; border: 0; background: transparent; }
.project-card-art { height: 150px; background: var(--bg-surface-muted); border-bottom: 1px solid var(--line-subtle); color: var(--accent); }
.project-card-meta, .asset-card-body { padding: 16px; }
.project-card-meta h3, .asset-card h3 { margin: 0 0 8px; font-size: 1rem; }
.project-card-meta p { color: var(--text-secondary); font-size: .875rem; }
.project-card-actions, .asset-card-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-subtle); flex-wrap: wrap; }
.project-card-actions button, .asset-card-actions button { font-size: .75rem; }
.asset-preview { background: var(--bg-surface-muted); }
.asset-card { display: flex; flex-direction: column; min-width: 0; }
.asset-preview { flex: 0 0 auto; aspect-ratio: 16/10; height: auto; overflow: hidden; border-bottom: 1px solid var(--line-subtle); }
.asset-preview img, .asset-preview video { display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-card-body { display: grid; gap: 10px; flex: 1 1 auto; }
.asset-card-body .asset-kind { margin: 0; color: var(--text-muted); font: 500 .75rem/1.5 var(--font-display); letter-spacing: .04em; }
.asset-card-body strong { font-size: .9375rem; line-height: 1.5; font-weight: 550; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.asset-card-body small { margin: 0; white-space: normal; font: 400 .8125rem/1.5 var(--font-display); color: var(--text-secondary); }
.asset-card-body select { font-size: .875rem; }
.asset-card-actions { position: static; inset: auto; width: 100%; justify-content: flex-end; align-items: center; margin: 0; margin-top: auto; }
.asset-card-actions button { width: auto; height: auto; min-height: 36px; padding: 8px 12px; font-size: .8125rem; line-height: 1.4; background: var(--bg-surface); border: 1px solid var(--line-subtle); }
.asset-card-actions button:hover { background: var(--bg-surface-muted); }
.asset-dropzone { display: flex; align-items: center; gap: 16px; min-height: 90px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 8px 6px 10px 5px; margin-bottom: 24px; background: transparent; }
.asset-dropzone strong { font-size: .875rem; font-weight: 550; }
.asset-dropzone > span { font-size: 24px; color: var(--accent); }
.asset-dropzone small { display: block; margin-top: 3px; }
.asset-upload-button input { display: none; }
.script-workspace { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,2fr); gap: 26px; border: 0; background: none; }
.story-brief { padding: 22px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-surface); display: grid; gap: 20px; }
.story-brief label { display: grid; gap: 7px; }
.brief-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.script-editor { border: 1px solid var(--line-strong); background: var(--bg-surface); border-radius: 6px 10px 7px 9px; box-shadow: var(--shadow); min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.editor-bar { padding: 16px 22px; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-subtle); background: var(--bg-surface-muted); color: var(--text-primary); }
.editor-bar > div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.editor-bar span { font-size: .75rem; font-weight: 600; color: var(--text-primary); }
.editor-bar small { font-size: .6875rem; font-weight: 400; color: var(--text-secondary); }
#project-script { border: 0; flex: 1; min-height: 550px; background: repeating-linear-gradient(transparent 0,transparent 31px,var(--line-subtle) 32px); background-position: 0 20px; font: 400 .9375rem/32px var(--font-mono); padding: 24px; border-radius: 0; }
.script-editor footer { padding: 16px 20px; border-top: 1px solid var(--line-subtle); display: flex; gap: 16px; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--text-muted); }
.story-analysis { background: var(--bg-canvas); border: 0; padding: 14px; border-radius: 6px; }
.story-analysis > span, .story-analysis > strong { font-size: .6875rem; font-weight: 500; color: var(--text-secondary); }
.story-analysis > strong { color: var(--accent); }
.story-analysis > div { background: var(--line-subtle); height: 3px; }
.story-analysis i { background: var(--accent); }
.script-editor footer > span { color: var(--text-muted); font-size: .6875rem; font-weight: 400; }
.save-state { background: none; border: 0; padding: 0; font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.save-state i, .canvas-save-state i { width: 6px; height: 6px; background: #487c65; box-shadow: none; }
.storyboard-actions, .board-batch-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.storyboard-actions .pixel-button, .board-batch-actions button { font-size: .75rem; padding: 8px 10px; }
.storyboard-commandbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 7px; margin-bottom: 14px; }
.board-filter { display: flex; gap: 9px; align-items: center; }
.board-filter, .board-selection { background: none; border: 0; box-shadow: none; padding: 0; }
.board-selection { color: var(--text-muted); display: flex; gap: 6px; margin-right: auto; }
.board-selection strong { color: var(--text-primary); font: 500 .875rem var(--font-display); }
.board-selection span { font-size: .75rem; font-weight: 400; letter-spacing: 0; }
.board-filter > span, .board-selection > span { color: var(--text-secondary); }
.view-switch.labeled strong, .view-switch.labeled span { font-size: .8125rem; font-weight: 500; }
.board-filter > span, .board-selection, .board-zoom { font-size: .75rem; }
.board-filter select { width: auto; min-height: 35px; padding-block: 5px; font-size: .8125rem; }
.board-zoom { display: flex; align-items: center; margin-left: auto; gap: 5px; background: transparent; color: var(--text-secondary); border: 0; padding: 0; box-shadow: none; }
.board-zoom > span { font-size: .6875rem; font-weight: 450; letter-spacing: 0; }
.board-zoom button { min-width: 30px; min-height: 30px; padding: 4px; font-size: 16px; }
.board-zoom output { width: 42px; color: var(--text-primary); font: 400 .6875rem var(--font-mono); }
.continuity-notice { display: flex; background: var(--accent-soft); color: var(--text-primary); border: 0; border-radius: 7px; padding: 15px 18px; margin-bottom: 22px; gap: 14px; }
.continuity-notice > span { font-size: 24px; color: var(--accent); }
.continuity-notice > div { flex: 1; min-width: 0; }
.continuity-notice > label { flex: 0 0 38px; width: 38px; margin: 0; position: static; inset: auto; transform: none; }
.continuity-notice strong { font-size: .8125rem; font-weight: 600; }
.continuity-notice p { font-size: .8125rem; margin: 4px 0 0; color: var(--text-secondary); }
.shot-list { gap: 20px; }
.storyboard-canvas-shell { background: transparent; border: 0; border-radius: 0; overflow: visible; padding: 0; width: 100%; min-width: 0; max-width: 100%; }
.shot-list.is-list { display: flex; flex-direction: column; gap: 14px; padding: 0; margin-top: 24px; }
.shot-list.is-list .shot-card { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 0; }
.shot-list.is-list .shot-actions { grid-column: 2; }
.shot-list.is-list .shot-number { grid-row: 1 / 3; }
.shot-list.is-board { display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; gap: 14px; padding: 15px 2px 22px; min-height: 0; border: 0; background: none; min-width: 0; width: 100%; max-width: 100%; }
.shot-list.is-board .shot-card { display: flex; flex-direction: column; flex: 0 0 calc(340px * var(--board-zoom,1)); min-width: 280px; max-width: none; }
.shot-body { padding: 18px; min-width: 0; }
.shot-body > header, .shot-list.is-board .shot-body > header { display: flex; gap: 12px; align-items: center; flex-direction: row; flex-wrap: wrap; }
.shot-body .shot-title-input { flex: 1 1 160px; font-size: .9375rem; font-weight: 550; min-height: 38px; padding: 7px 10px; }
.shot-body .shot-meta { font: 400 .6875rem var(--font-mono); color: var(--text-muted); white-space: normal; }
.shot-body > .shot-status { display: inline-block; border: 0; background: var(--bg-surface-muted); color: var(--text-secondary); font: 500 .625rem var(--font-mono); padding: 4px 6px; border-radius: 4px; margin: 10px 0 0; }
.shot-body > .shot-status.ready, .shot-body > .shot-status.generated { color: var(--accent); background: var(--accent-soft); }
.shot-prompt-input { margin-top: 12px; min-height: 90px; height: auto; padding: 10px 12px; font-size: .875rem; }
.shot-number { min-height: 0; padding: 16px 8px; justify-content: flex-start; gap: 7px; }
.shot-number > span { color: var(--text-muted); font: 400 .5625rem var(--font-mono); }
.shot-number strong { margin: 0; font: 450 1.25rem var(--font-display); }
.shot-select { display: grid; place-items: center; width: 20px; height: 20px; margin: 0; }
.shot-select input { opacity: 1; position: static; width: 15px; height: 15px; appearance: auto; }
.shot-select > span { display: none; }
.shot-list.is-board .shot-number { display: flex; flex-direction: row; padding: 12px 16px; min-height: 44px; border: 0; border-bottom: 1px solid var(--line-subtle); gap: 9px; }
.shot-drag-handle { margin-left: auto; border: 0; background: none; padding: 3px; min-height: 25px; font-size: 19px; }
.shot-frame-preview { border: 1px solid var(--line-subtle); border-radius: 5px; overflow: hidden; margin: 0 0 12px; background: var(--bg-canvas); }
.shot-frame-preview > div { min-height: 80px; color: var(--text-muted); background: transparent; }
.shot-frame-preview > div > span { font: 400 .625rem var(--font-mono); }
.shot-boundaries { margin-top: 14px; gap: 14px; }
.shot-boundaries label > span { font-size: .6875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.shot-boundaries select { font-size: .8125rem; min-height: 36px; padding: 7px; }
.shot-controls { gap: 14px; margin-top: 14px; }
.shot-controls label { display: grid; grid-template-columns: auto minmax(50px,100px); align-items: center; gap: 7px; }
.shot-controls label > span, .shot-chain-state { font-size: .625rem; font-weight: 450; letter-spacing: 0; color: var(--text-muted); }
.shot-controls input { padding: 7px 9px; min-height: 35px; font-size: .8125rem; }
.shot-actions, .shot-list.is-board .shot-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; padding: 12px 18px; border: 0; border-top: 1px solid var(--line-subtle); justify-content: flex-start; }
.shot-actions .pixel-button { width: auto; min-width: 34px; min-height: 34px; padding: 7px 10px; font-size: .6875rem; }
.shot-actions .pixel-button:first-child { margin-right: auto; }
.bridge-shot-button { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 34px; max-height: none; margin: 0 0 0 58px; padding: 5px 10px; border: 0; box-shadow: none; background: transparent; }
.bridge-shot-button > span { font-size: 18px; color: var(--accent); }
.bridge-shot-button strong { font-size: .625rem; font-weight: 450; color: var(--text-secondary); }
.bridge-shot-button small { font-size: .625rem; font-weight: 400; color: var(--text-muted); }
.shot-list.is-board .bridge-shot-button { flex: 0 0 32px; align-self: center; width: 32px; height: 32px; min-height: 32px; margin: 0; padding: 5px; border: 1px dashed var(--line-strong); border-radius: 50%; background: none; }
.shot-list.is-board .bridge-shot-button strong, .shot-list.is-board .bridge-shot-button small { display: none; }
.shot-overview { background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px; margin-top: 20px; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; }
.shot-overview-rail { min-width: 0; overflow-x: auto; padding: 3px 8px; }
.shot-overview-label { min-width: 90px; padding: 4px 8px; background: transparent; color: var(--text-secondary); border-right: 1px solid var(--line-subtle); }
.shot-overview-label strong { color: var(--text-primary); font-size: .875rem; }
.shot-overview-label small { font-size: .625rem; font-weight: 450; }
.overview-segment { border: 1px solid var(--line-subtle); background: var(--accent-soft); color: var(--accent); min-height: 30px; }
.shot-card { background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 7px 9px 6px 8px; box-shadow: var(--shadow); }
.shot-number { color: var(--text-muted); font: 400 .875rem var(--font-mono); background: var(--bg-surface-muted); border-right: 1px solid var(--line-subtle); }
.shot-title-input { font-weight: 600; }
.shot-card textarea { font-size: .875rem; }
.shot-meta, .shot-status, .shot-actions button, .boundary-controls button { font-size: .75rem; }
.audio-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; padding: 0; border: 0; background: transparent; }
.music-console, .audio-timeline { padding: 24px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow); min-width: 0; }
.console-heading { justify-content: flex-start; align-items: flex-start; }
.console-heading p { margin: 4px 0 0; font-size: .8125rem; color: var(--text-secondary); }
.provider-badge { padding: 8px 10px; gap: 7px; background: transparent; border: 1px solid var(--line-subtle); border-radius: 6px; font-size: .6875rem; }
.music-params, .image-param-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-block: 18px; }
.music-params label, .image-param-grid label, .full-field { display: grid; gap: 7px; }
.music-toggles { margin-block: 16px; }
.music-console { display: block; }
.music-console .full-field { margin-block: 0 18px; }
.music-console .console-heading, .audio-timeline .console-heading { border: 0; padding: 0; margin-bottom: 22px; }
.music-toggles { padding: 0; }
.music-toggles label { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; }
.track-lane { padding: 0; }
.track-lane header { margin: 0; }
.track-items { padding: 12px; }
.track-empty { margin: 0; border: 0; background: transparent; font-weight: 400; padding: 8px; }
.range-field output { background: transparent; color: var(--text-secondary); border: 0; padding: 0; font: 400 .75rem var(--font-mono); }
.music-toggles label > span, .loop-toggle > span, .continuity-notice label > span, .composer-toggle > span { width: 34px; height: 19px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-surface-muted); position: relative; flex: 0 0 34px; }
.music-toggles label > span::after, .loop-toggle > span::after, .continuity-notice label > span::after, .composer-toggle > span::after { content: ''; position: absolute; inset: 3px auto auto 3px; width: 11px; height: 11px; background: var(--text-muted); border-radius: 50%; box-shadow: none; }
.music-toggles input:checked + span::after, .loop-toggle input:checked + span::after, .continuity-notice input:checked + span::after, .composer-toggle input:checked + span::after { transform: translateX(15px); background: var(--accent); }
.music-toggles input:focus-visible + span, .loop-toggle input:focus-visible + span, .continuity-notice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.music-toggles strong, .mix-strip strong, .master-check strong { font-size: .75rem; font-weight: 550; }
.mix-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 17px; background: var(--bg-canvas); border: 0; border-radius: 7px; }
.unit-input, .composer-unit, .seed-lock, .password-wrap { display: flex; align-items: center; min-width: 0; }
.unit-input b, .composer-unit b { border: 1px solid var(--line-strong); border-left: 0; background: var(--bg-surface-muted); padding: 10px; height: 43px; font-size: .8125rem; border-radius: 0 5px 5px 0; }
.unit-input input, .composer-unit input { border-radius: 5px 0 0 5px; }
.render-button { display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 14px 18px; min-height: 58px; width: 100%; margin-top: 20px; border-radius: 6px 8px 5px 7px; box-shadow: 2px 3px 0 var(--line-strong); }
.render-button-icon { font-size: 18px; }
.render-button strong { font-size: .9375rem; font-weight: 600; }
.render-button small { display: block; font: 400 .6875rem/1.5 var(--font-display); opacity: .8; color: inherit; letter-spacing: .01em; }
.button-corner { margin-left: auto; font-size: 18px; }
.track-lane { border: 1px solid var(--line-subtle); border-radius: 6px; background: var(--bg-canvas); margin-bottom: 12px; }
.track-lane header { padding: 12px; gap: 12px; border-bottom: 1px solid var(--line-subtle); }
.track-lane header > span { font-size: .6875rem; color: var(--accent); background: var(--accent-soft); border: 0; padding: 6px; border-radius: 4px; }
.track-lane header strong { font-size: .8125rem; }
.track-empty { min-height: 50px; padding: 16px; border: 0; color: var(--text-muted); font-size: .75rem; }
.master-export-panel { border: 0; border-top: 1px solid var(--line-strong); padding: 20px 0 0; background: none; margin-top: 24px; }
.master-export-panel header small { display: none; }
.master-export-panel p { font-size: .875rem; }
.master-export-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.master-export-controls > label:first-child { grid-column: 1/-1; }
.music-job-card, .track-clip, .master-export-card { border: 1px solid var(--line-strong); border-radius: 6px; padding: 16px; background: var(--bg-surface); }
/* Canvas: the empty state belongs to the available viewport, not the world. */
.creative-workbench-page { height: calc(100dvh - var(--topbar-height)); min-height: 520px; display: flex; flex-direction: column; overflow: hidden; }
.creative-workbench-page { flex: 0 0 auto; max-height: none; }
.canvas-project-bar { display: flex; flex: 0 0 72px; height: 72px; gap: 20px; align-items: center; justify-content: space-between; background: var(--bg-canvas); border-bottom: 1px solid var(--line-subtle); padding: 12px 26px; }
.canvas-title-group { display: flex; gap: 11px; min-width: 0; align-items: center; }
.canvas-title-group > div { min-width: 0; }
.canvas-brand-dot { display: none; }
.canvas-kicker { font: 400 .625rem var(--font-mono); letter-spacing: .1em; color: var(--text-muted); }
.canvas-title-group h1 { font-size: 1rem; line-height: 1.4; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas-save-state { padding: 0; margin: 16px 0 0 8px; font-size: .6875rem; color: var(--text-muted); white-space: nowrap; background: none; border: 0; }
.canvas-project-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.canvas-ratio-control { display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; height: 36px; background: var(--bg-surface); }
.canvas-ratio-control > span { display: none; }
.canvas-ratio-control select { width: 75px; height: 34px; min-height: 34px; padding: 4px 22px 4px 4px; background-color: transparent; border: 0; font-size: .8125rem; }
.canvas-queue-chip { display: flex; gap: 5px; align-items: center; padding: 8px 10px; font-size: .75rem; min-height: 36px; }
.canvas-icon-button { min-height: 36px; width: 36px; padding: 7px; font-size: 17px; }
.creative-workbench { display: grid; grid-template-columns: 48px minmax(0,1fr) 352px; flex: 1; min-height: 0; width: 100%; overflow: hidden; background: var(--bg-canvas); }
.creative-workbench:has(.assistant-panel.is-collapsed) { grid-template-columns: 48px minmax(0,1fr) 0; }
.canvas-dock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; width: auto; padding: 20px 4px; border: 0; background: transparent; z-index: 5; }
.canvas-dock button { width: 34px; height: 34px; min-height: 34px; padding: 5px; background: transparent; border: 0; border-radius: 5px; color: var(--text-secondary); font-size: 20px; }
.canvas-dock button:hover { background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.dock-separator { height: 1px; width: 22px; margin: 7px 0; background: var(--line-subtle); }
.creative-canvas-region { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-canvas); }
.canvas-viewport { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; overflow: hidden; background-color: var(--bg-canvas); background-image: radial-gradient(var(--line-strong) .6px,transparent .8px); background-size: 24px 24px; border: 0; }
#canvas-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: var(--canvas-world-width,4000px); height: var(--canvas-world-height,3000px); }
#canvas-edge-layer, #canvas-node-layer { position: absolute; left: 0; top: 0; overflow: visible; width: 100%; height: 100%; pointer-events: none; }
#canvas-node-layer .canvas-node { pointer-events: auto; }
#canvas-edge-layer { z-index: 0; }
.canvas-edge { fill: none; stroke: var(--text-muted); color: var(--text-muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.canvas-edge.is-selected, .canvas-edge-group:focus-visible .canvas-edge { stroke: var(--accent); color: var(--accent); stroke-width: 2.5; }
.canvas-edge-group:focus-visible { outline: none; }
.canvas-edge-hit { fill: none; stroke: transparent; stroke-width: 18; vector-effect: non-scaling-stroke; }
#canvas-arrow path { fill: context-stroke; stroke: none; }
.canvas-edge-preview { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.canvas-node { border: 1px solid var(--line-strong); background: var(--bg-surface); border-radius: 7px 9px 5px 8px; box-shadow: 2px 4px 0 #23292d12; color: var(--text-primary); }
.canvas-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft),2px 4px 0 #23292d12; }
.canvas-node > header { font: 550 .8125rem var(--font-display); background: var(--bg-surface); border-bottom: 1px solid var(--line-subtle); padding: 11px 12px; }
.canvas-node { overflow: visible; }
.canvas-node > header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-subtle); border-radius: 7px 9px 0 0; background: var(--bg-canvas); }
.node-type { color: var(--text-muted); font: 400 .6875rem var(--font-mono); }
.node-more { padding: 0; width: 28px; min-height: 22px; border: 0; background: transparent; }
.node-body { padding: 16px; display: grid; gap: 9px; }
.node-title { font-size: 1rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.node-asset .node-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.node-meta { color: var(--text-muted); font: 400 .6875rem var(--font-mono); margin: 0; }
.node-prompt { color: var(--text-secondary); font-size: .875rem; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.node-status { justify-self: start; font-size: .625rem; background: var(--bg-canvas); color: var(--text-muted); padding: 3px 6px; border-radius: 4px; }
.node-status.status-ready, .node-status.status-generated { color: var(--accent); background: var(--accent-soft); }
.node-ports { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.node-ports .canvas-port { position: absolute; top: 0; transform: translateY(-50%); width: 15px; height: 15px; min-height: 15px; padding: 0; border-radius: 50%; font-size: 0; pointer-events: auto; }
.node-ports .port-input { left: -8px; }
.node-ports .port-output { right: -8px; }
.node-preview { overflow: hidden; background: var(--bg-canvas); border-bottom: 1px solid var(--line-subtle); }
.node-preview:has(.node-file-icon), .node-preview:empty { display: none; }
.node-preview:has(.shot-placeholder-art) { display: none; }
.node-preview img, .node-preview video { width: 100%; max-height: 150px; object-fit: cover; display: block; }
.node-inspector { padding: 20px; }
.node-inspector > header { margin-bottom: 20px; }
.node-inspector > header > span { font: 400 .625rem var(--font-mono); color: var(--text-muted); }
.node-inspector h2 { margin: 8px 0 0; font-size: 1.125rem; }
.inspector-form { display: grid; gap: 16px; }
.inspector-form label { display: grid; gap: 7px; }
.inspector-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inspector-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; }
.inspector-actions button { font-size: .75rem; }
.canvas-port { background: var(--bg-surface); border: 1.5px solid var(--accent); min-height: 12px; }
.canvas-empty-state { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: min(420px,calc(100% - 64px)); max-width: none; height: auto; min-height: 0; margin: 0; padding: 38px 30px; display: grid; justify-items: center; text-align: center; border: 1px solid var(--line-strong); border-radius: 8px 16px 7px 12px; background: var(--bg-surface); box-shadow: 4px 5px 0 var(--line-subtle); }
.empty-sketch { display: flex; gap: 6px; height: 39px; margin-bottom: 20px; align-items: center; }
.empty-sketch i { display: block; width: 22px; height: 30px; background: transparent; border: 1px solid var(--text-muted); border-radius: 3px; transform: rotate(-8deg); }
.empty-sketch i:nth-child(2) { background: var(--accent-soft); border-color: var(--accent); height: 35px; transform: rotate(3deg); }
.empty-sketch i:nth-child(3) { transform: rotate(10deg); }
.canvas-empty-state h2 { margin: 0 0 10px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.035em; }
.canvas-empty-state { max-width: 420px; }
.canvas-empty-state p { font-size: .875rem; line-height: 1.65; color: var(--text-secondary); margin: 0; max-width: 300px; }
.canvas-empty-state kbd { border: 1px solid var(--line-subtle); padding: 1px 4px; border-radius: 3px; font-size: .8em; }
.canvas-empty-state button { margin: 24px 0 0; padding: 10px 17px; min-height: 40px; background: var(--text-primary); color: var(--bg-surface); border: 0; box-shadow: none; border-radius: 5px 7px 4px 6px; font-size: .875rem; }
.canvas-bottom-tools { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-surface); box-shadow: var(--shadow-sm); z-index: 8; width: auto; min-height: 0; }
.canvas-bottom-tools button { width: 29px; height: 29px; min-height: 29px; padding: 4px; background: transparent; border: 0; font-size: 17px; }
.canvas-bottom-tools output { width: 47px; text-align: center; font: 400 .75rem var(--font-mono); }
.canvas-bottom-tools > span { height: 17px; width: 1px; background: var(--line-subtle); margin-inline: 4px; }
.assistant-panel { position: relative; width: auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--line-strong); background: var(--bg-surface); overflow: hidden; }
.assistant-panel { max-width: none; inset: auto; box-shadow: none; transform: none; }
.assistant-panel.is-collapsed { width: 0; overflow: hidden; border: 0; }
.assistant-panel.is-collapsed > * { display: none; }
.assistant-header { display: flex; flex: 0 0 58px; padding: 11px 14px; gap: 8px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line-subtle); background: transparent; }
.assistant-tabs { display: flex; padding: 0; background: transparent; border: 0; border-radius: 0; gap: 3px; }
.assistant-tabs button { min-height: 34px; font-size: .8125rem; padding: 8px 10px; background: transparent; border: 0; color: var(--text-muted); border-radius: 5px; box-shadow: none; }
.assistant-tabs button.is-active { background: var(--bg-surface-muted); color: var(--text-primary); box-shadow: none; }
.assistant-tabs button { white-space: nowrap; }
#assistant-collapse { background: transparent; border: 0; width: 28px; min-height: 30px; padding: 4px; font-size: 19px; }
.assistant-content, .node-inspector { flex: 1 1 auto; min-height: 80px; max-height: none; overflow-y: auto; padding: 0; }
#assistant-inspector-pane { display: block; min-width: 0; padding: 22px 20px; overscroll-behavior: contain; }
#assistant-inspector-pane > header { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line-subtle); }
#assistant-inspector-pane h2 { overflow-wrap: anywhere; font-size: 1.125rem; line-height: 1.5; }
#assistant-inspector-pane > header > span { font-size: .75rem; line-height: 1.5; }
.inspector-form { width: 100%; min-width: 0; }
.inspector-form label > span { font-size: .875rem; line-height: 1.5; font-weight: 500; }
.inspector-form textarea { min-height: 150px; }
.inspector-pair { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.inspector-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding-top: 22px; }
.inspector-actions button { min-height: 40px; padding: 10px 12px; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.inspector-actions .primary, .inspector-actions .danger { grid-column: 1/-1; }
.inspector-actions .danger { margin-top: 6px; }
.inspector-preview { overflow: hidden; border: 1px solid var(--line-subtle); border-radius: 6px; background: var(--bg-canvas); }
.inspector-preview :is(img,video) { display: block; width: 100%; max-height: 240px; object-fit: contain; }
#assistant-inspector-pane dl { margin: 18px 0 0; font-size: .8125rem; }
#assistant-inspector-pane dl > div { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-subtle); }
#assistant-inspector-pane dd { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.edge-inspector-summary { font-size: .875rem; }
.assistant-messages { padding: 24px 20px; display: grid; gap: 20px; }
.assistant-message { display: flex; align-items: flex-start; gap: 10px; }
.assistant-avatar { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; background: var(--text-primary); color: var(--bg-surface); border: 0; border-radius: 5px 7px 4px 6px; box-shadow: none; font-size: 11px; }
.assistant-message > div { min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.assistant-message strong { font-size: .8125rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0; }
.assistant-message strong { text-transform: none; }
.assistant-message p { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; margin: 9px 0 0; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.assistant-suggestions button { padding: 6px 8px; min-height: 30px; font-size: .6875rem; font-weight: 450; background: var(--bg-canvas); border: 1px solid var(--line-subtle); border-radius: 4px; }
.ai-composer { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; padding: 16px; gap: 12px; background: var(--bg-surface); border-top: 1px solid var(--line-subtle); overflow: visible; max-height: 68%; }
.ai-composer { max-height: calc(100% - 58px); flex-shrink: 0; overflow-y: auto; }
.ai-composer > .composer-main, .ai-composer > .composer-toolbar { flex: 0 0 auto; }
.ai-composer > .composer-settings { flex: 0 0 auto; min-height: 25px; }
.composer-main { position: relative; padding: 0; }
#canvas-composer-input { min-height: 110px; max-height: 200px; height: 112px; padding: 13px; background: var(--bg-canvas); font-size: .875rem; line-height: 1.6; border: 1px solid var(--line-strong); border-radius: 6px 9px 5px 8px; resize: vertical; }
.composer-settings { padding: 0; border: 0; border-radius: 0; background: transparent; min-height: 0; overflow: auto; }
.composer-settings > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; min-height: 25px; font-size: .75rem; }
.composer-settings > summary::before { display: none; }
.composer-settings > summary::after { content: '+'; color: var(--text-muted); font-size: 16px; order: -1; }
.composer-settings[open] > summary::after { content: '−'; }
.composer-settings summary small { font-size: .625rem; margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.composer-settings-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; padding: 14px 0 4px; border: 0; max-height: 300px; overflow-y: auto; }
.composer-settings-grid label { display: grid; gap: 5px; }
.composer-settings-grid label > span { font-size: .6875rem; }
.composer-settings-grid :is(input,select) { min-height: 35px; padding: 6px 8px; font-size: .75rem; }
.composer-settings-grid select { padding-right: 25px; }
.composer-wide { grid-column: 1/-1; }
.composer-toggle strong { font-size: .6875rem; }
.composer-toolbar { display: flex; gap: 8px; justify-content: space-between; padding: 0; margin: 0; align-items: center; background: transparent; border: 0; }
.composer-actions { display: flex; gap: 4px; align-items: center; }
.composer-actions { flex: 0 0 auto; }
.composer-actions button { border: 0; background: transparent; min-height: 32px; height: 32px; padding: 6px; min-width: 26px; font-size: .875rem; }
.composer-skill-button { display: flex; gap: 3px; }
.composer-skill-button strong { font-size: .6875rem; font-weight: 500; }
.composer-skill-button strong { width: auto; max-width: none; white-space: nowrap; overflow: visible; }
.composer-skill-button > span, .composer-skill-button > i { display: none; }
.composer-mode { border: 0; background: none; font-size: .625rem; gap: 4px; padding: 0; }
.composer-mode strong { font-size: .6875rem; font-weight: 500; }
.composer-mode strong { white-space: nowrap; }
.composer-mode span, .composer-mode > i { display: none; }
.composer-submit-group { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.smart-match-button { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); }
.smart-match-button strong { font-size: .6875rem; font-weight: 500; white-space: nowrap; }
.smart-match-button small { display: none; }
#canvas-submit { height: 34px; width: 34px; min-height: 34px; border-radius: 6px; font-size: 19px; background: var(--accent); color: var(--bg-surface); border: 0; padding: 5px; }
.composer-popover, .mention-listbox, .canvas-shortcuts { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-md); }
.composer-popover button { text-align: left; background: none; border: 0; }
.composer-popover strong { font-size: .8125rem; }
.composer-popover small { font-size: .75rem; }
.inspector-empty { padding: 30px 24px; }
.inspector-empty p { font-size: .875rem; color: var(--text-secondary); }
.creative-workbench-page:not([hidden]) ~ .footer-ticker { display: none; }
/* Render, queue and all supporting dialogs share the notebook system. */
.workbench[data-workspace-view="render"] { display: grid; grid-template-columns: minmax(320px,.88fr) minmax(0,1.25fr); gap: 28px; padding: 30px; max-width: 1560px; margin: 0 auto; background: transparent; }
.control-column, .stage-column, .queue-column { min-width: 0; padding: 24px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow); }
.control-column { padding: 24px; }
.panel-label { padding: 0; margin: 0 0 20px; gap: 10px; display: flex; align-items: center; }
.form-block { padding: 0; margin: 0 0 22px; border: 0; background: transparent; }
.form-block .field-heading { margin-bottom: 9px; }
.field-heading, .telemetry-top span { text-transform: none; letter-spacing: .01em; }
.field-heading em, legend em { font-size: .625rem; color: var(--text-muted); background: none; font-style: normal; }
#prompt { min-height: 150px; font-size: .9375rem; line-height: 1.65; }
#prompt { height: 150px; }
.prompt-tools { padding-top: 0; border: 0; }
.render-reference-tools { margin-top: 10px; }
.render-button-icon { display: grid; place-items: center; width: 22px; height: 22px; background: transparent; color: inherit; border: 0; box-shadow: none; }
.estimate-block { border: 0; padding: 0; background: none; }
.submit-dock { margin-top: 22px; gap: 16px; }
.submit-dock .render-button { margin: 0; }
.prompt-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prompt-chip { min-height: 28px; border: 1px solid var(--line-subtle); padding: 5px 8px; background: var(--bg-canvas); font-size: .6875rem; border-radius: 4px; }
.render-disclosure, .advanced-block, .lyrics-panel { border: 1px solid var(--line-subtle); border-radius: 6px; background: var(--bg-surface); margin-bottom: 12px; }
.render-disclosure > summary, .advanced-block > summary, .lyrics-panel > summary { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 13px; font-size: .75rem; font-weight: 550; min-height: 44px; }
.render-disclosure summary small, .advanced-block summary small { font-size: .625rem; color: var(--text-muted); }
.render-disclosure-body, .advanced-inner { padding: 16px 13px; }
.render-disclosure-body > :last-child { margin-bottom: 0; }
.preset-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.preset-card { padding: 10px 5px; display: grid; gap: 5px; background: var(--bg-canvas); border: 1px solid var(--line-subtle); border-radius: 5px; text-align: center; }
.preset-card strong { font-size: .75rem; }
.preset-card small { font-size: .625rem; }
.preset-card.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.preset-bars { display: none; }
.field-grid.two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
.field-grid label { display: grid; gap: 7px; }
.range-field { display: flex; gap: 9px; align-items: center; }
.range-field output { font: 400 .8125rem var(--font-mono); }
.frame-readout { display: flex; gap: 8px; justify-content: flex-start; align-items: center; background: var(--bg-canvas); border: 0; border-radius: 4px; padding: 9px; margin-top: 12px; font-size: .6875rem; }
.frame-readout strong { font-size: .8125rem; }
.mode-tabs { gap: 4px; background: var(--bg-canvas); padding: 4px; border: 0; border-radius: 6px; }
.mode-tabs label span { padding: 8px; font-size: .6875rem; border-radius: 4px; }
.mode-tabs input:checked + span { background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.drop-slot { border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--bg-canvas); min-height: 120px; }
.drop-slot strong, .reference-row strong { font-size: .75rem; }
.reference-row { padding: 10px; background: var(--bg-canvas); border: 1px solid var(--line-subtle); border-radius: 5px; }
.reference-row small { font-size: .6875rem; }
.ref-code { font: 400 .625rem var(--font-mono); color: var(--accent); background: var(--accent-soft); border: 0; padding: 7px; border-radius: 3px; }
.stage-head { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.stage-head .panel-label { margin: 0; }
.stage-status { font-size: .6875rem; color: var(--text-muted); background: none; border: 0; }
.stage-header { margin: 0 0 22px; }
.stage-header .panel-label { margin: 0; }
.stage-coordinates { font-size: .625rem; gap: 8px; color: var(--text-muted); }
.stage-rulers { display: none; }
.empty-stage { padding: 32px; gap: 12px; color: var(--text-secondary); }
.empty-stage h3 { color: var(--text-primary); font-size: 1.125rem; line-height: 1.45; font-weight: 550; max-width: 350px; margin: 4px auto; }
.empty-stage > p { color: var(--text-muted); font: 500 .6875rem var(--font-mono); letter-spacing: .08em; margin: 12px 0 0; }
.empty-stage small { font-size: .8125rem; max-width: 330px; line-height: 1.65; color: var(--text-secondary); }
.pixel-reel { width: 48px; height: 42px; background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 6px 8px 5px 7px; box-shadow: 2px 3px 0 var(--line-subtle); transform: rotate(-3deg); }
.pixel-reel > span { display: none; }
.pixel-reel > i { background: none; color: var(--accent); border: 0; font-size: 16px; }
.telemetry { margin-top: 0; }
.recent-section .section-heading { border: 0; }
#completed-count { background: var(--bg-canvas); border: 0; border-radius: 4px; color: var(--text-muted); padding: 3px 6px; font-size: .6875rem; }
/* A screening frame, not a second visual theme. Media keeps its natural colors. */
.video-stage { position: relative; isolation: isolate; aspect-ratio: 16/9; height: auto; min-height: 260px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--screen-bg); color: var(--text-primary); box-shadow: none; overflow: hidden; }
.video-stage::before, .video-stage::after, .stage-placeholder .scanline { display: none; }
.video-stage:has(.render-overlay:not([hidden])) { min-height: 300px; }
.video-stage:has(#video-player.is-visible) { min-height: 0; background: #10151a; }
#video-player { width: 100%; height: 100%; object-fit: contain; }
.render-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--screen-bg); color: var(--text-primary); gap: 14px; padding: 36px; text-align: center; }
.render-overlay .overlay-scan { display: none; animation: none; }
.render-overlay .render-state { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; border-radius: 20px; padding: 5px 11px; font: 550 .75rem/1.5 var(--font-display); letter-spacing: 0; box-shadow: none; text-transform: none; }
.render-state::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.render-overlay strong { margin: 0; color: var(--text-primary); text-shadow: none; font: 550 clamp(1.25rem,2.1vw,1.75rem)/1.3 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.025em; max-width: 100%; }
.render-overlay[data-display="percentage"] strong { font-size: clamp(2rem,4vw,3rem); }
.render-overlay p { margin: 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.65; letter-spacing: 0; max-width: 360px; overflow-wrap: anywhere; }
.render-activity { width: 36px; height: 36px; flex: 0 0 36px; border: 2px solid var(--line-subtle); border-top-color: var(--accent); border-radius: 50%; margin-bottom: 2px; animation: notebook-turn 1.5s linear infinite; }
.render-overlay[data-status="queued"] .render-activity { animation-duration: 3s; }
.render-overlay[data-status="failed"] .render-activity, .render-overlay[data-status="cancelled"] .render-activity, .render-overlay[data-status="completed"] .render-activity { display: none; }
.render-overlay[data-status="failed"] .render-state { color: var(--danger); background: var(--danger-soft); }
.render-overlay[data-status="cancelled"] .render-state { color: var(--text-secondary); background: var(--bg-surface-muted); border-color: var(--line-subtle); }
.render-overlay[data-status="completed"] .render-state { color: var(--success); background: var(--success-soft); }
.stage-placeholder { color: var(--text-secondary); gap: 10px; }
.stage-placeholder strong { color: var(--text-primary); font-size: 1rem; letter-spacing: -.02em; }
.stage-placeholder p { font-size: .8125rem; }
.stage-column > .stage-meta { position: static; inset: auto; width: 100%; min-width: 0; padding: 14px 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; border: 0; border-bottom: 1px solid var(--line-subtle); border-radius: 0; box-shadow: none; backdrop-filter: none; color: var(--text-secondary); font: 400 .6875rem/1.5 var(--font-mono); background: transparent; }
.stage-meta > span { min-width: 0; }
#stage-seed { margin-left: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#current-eta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; word-break: normal; font-variant-numeric: tabular-nums; }
.telemetry { border: 0; padding: 20px 0 12px; background: none; }
.telemetry-top { gap: 16px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); }
.telemetry-top > div { min-width: 0; display: grid; gap: 6px; }
.telemetry-top span { font-size: .6875rem; color: var(--text-muted); letter-spacing: .015em; }
.telemetry-top strong { font-size: .8125rem; font-weight: 550; word-break: normal; overflow-wrap: anywhere; }
#current-job-id { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.8; }
#pixel-progress { display: block; position: relative; height: 4px; min-height: 4px; border: 0; border-radius: 4px; background: var(--line-subtle); margin: 22px 0; overflow: hidden; }
#pixel-progress i { display: none; }
#pixel-progress::before { content: ''; display: block; width: var(--progress,0%); height: 100%; background: var(--accent); border-radius: inherit; transition: width 220ms ease; }
#pixel-progress.is-indeterminate::before { width: 36%; animation: notebook-progress 2s ease-in-out infinite; }
@keyframes notebook-turn { to { transform: rotate(360deg); } }
@keyframes notebook-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(380%); } }
.job-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.job-actions .pixel-button { font-size: .75rem; padding: 8px 10px; }
.recent-section { border-top: 1px solid var(--line-subtle); padding-top: 22px; margin-top: 8px; }
.recent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.recent-empty { min-height: 130px; grid-column: 1/-1; background: var(--bg-canvas); font-size: .875rem; }
.queue-column { grid-column: 1/-1; background: var(--bg-surface); margin: 0; }
.queue-column { display: block; }
.queue-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; }
.queue-head .panel-label { margin-bottom: 8px; }
.queue-head p { font-size: .875rem; margin: 0; color: var(--text-secondary); }
.live-badge { border: 0; background: var(--bg-canvas); color: var(--text-secondary); font-size: .625rem; border-radius: 4px; padding: 6px 8px; }
.queue-operations { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.queue-machine { padding: 16px; background: var(--bg-canvas); border: 1px solid var(--line-subtle); border-radius: 6px; box-shadow: none; }
.queue-digits { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.queue-digits > div { background: var(--bg-surface); border: 1px solid var(--line-subtle); border-radius: 5px; padding: 12px; display: flex; justify-content: space-between; align-items: center; }
.queue-digits > div { flex-direction: row; }
.queue-digits span { font-size: .6875rem; color: var(--text-muted); }
.queue-digits strong { font: 450 1.25rem var(--font-display); color: var(--text-primary); }
.throughput-line { margin-top: 11px; font-size: .625rem; color: var(--text-muted); }
.throughput-line strong { color: var(--text-secondary); font-size: .625rem; }
.queue-note { background: transparent; border: 1px solid var(--line-subtle); border-radius: 6px; padding: 0; }
.queue-note summary { display: flex; align-items: center; gap: 9px; padding: 13px; font-size: .75rem; }
.queue-note summary strong { font-size: .75rem; white-space: normal; }
.note-pin { width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-strong); background: none; color: var(--text-muted); font-size: .75rem; }
.queue-note p { padding: 0 14px 14px; margin: 0; font-size: .8125rem; color: var(--text-secondary); }
.queue-runway { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 20px; }
.queue-empty { min-height: 150px; background: var(--bg-canvas); }
.queue-empty-signal { font: 400 .625rem var(--font-mono); letter-spacing: .1em; color: var(--text-muted); }
.api-teaser { padding: 18px; background: transparent; border: 1px solid var(--line-subtle); border-radius: 6px; }
.api-teaser strong { font-size: .8125rem; }
.api-teaser > div > span { border: 0; background: transparent; color: var(--accent); }
.api-teaser p { font-size: .8125rem; margin: 10px 0; color: var(--text-secondary); }
.api-teaser .pixel-button { font-size: .75rem; }
.queue-card { background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none; }
.footer-ticker { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 18px; border: 0; background: transparent; color: var(--text-muted); font: 400 .625rem var(--font-display); letter-spacing: .01em; }
.footer-ticker i { width: 3px; height: 3px; background: var(--line-strong); }
dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 40px); border: 1px solid var(--line-strong); border-radius: 10px 15px 9px 12px; background: var(--bg-surface); color: var(--text-primary); padding: 0; box-shadow: 6px 7px 0 #0002,0 25px 80px #0003; overflow: auto; }
dialog::backdrop { background: #17212e75; backdrop-filter: blur(5px); }
.dialog-shell > header, .auth-panel > header { padding: 24px 26px; border-bottom: 1px solid var(--line-subtle); display: flex; justify-content: space-between; align-items: center; background: transparent; }
.dialog-code, .auth-edition { display: inline-block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: 450 .6875rem/1.5 var(--font-mono); color: var(--text-muted); letter-spacing: .06em; }
.dialog-shell h2, .auth-panel h2 { margin: 6px 0 0; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.035em; }
.dialog-close { padding: 3px; width: 30px; height: 30px; min-height: 30px; font-size: 23px; background: transparent; border: 0; }
.api-dialog { width: 850px; }
.dialog-content { padding: 24px 26px; }
.dialog-content > p { font-size: .875rem; color: var(--text-secondary); }
.code-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 22px 0; background: none; border: 0; }
.code-tabs button { padding: 8px 10px; font-size: .75rem; }
.code-tabs button.is-active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.code-pane { border: 1px solid var(--line-strong); border-radius: 6px; overflow: auto; background: var(--bg-canvas); }
.code-toolbar { padding: 8px 12px; background: var(--bg-surface-muted); border-bottom: 1px solid var(--line-subtle); font-size: .6875rem; }
pre { margin: 0; padding: 20px; color: var(--text-primary); background: transparent; font: 400 .8125rem/1.7 var(--font-mono); overflow: auto; }
.parameter-table table { font-size: .8125rem; border-collapse: collapse; width: 100%; }
.parameter-table td, .parameter-table th { padding: 11px 14px; border-bottom: 1px solid var(--line-subtle); background: none; color: var(--text-secondary); }
.parameter-table th { text-align: left; font-size: .6875rem; font-weight: 600; }
.api-links { padding-top: 20px; font-size: .75rem; color: var(--text-muted); }
.auth-dialog { width: 500px; height: auto; min-height: 0; max-height: calc(100dvh - 40px); overflow-y: auto; }
.auth-shell { display: block; min-height: 0; height: auto; width: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.auth-poster { display: none; }
.auth-panel { display: block; height: auto; min-height: 0; padding: 0 28px 24px; background: none; overflow: visible; }
.signed-in-summary { display: grid; gap: 10px; padding: 18px; margin: 20px 0; border: 1px solid var(--line-subtle); border-radius: 7px; background: var(--bg-canvas); color: var(--text-primary); text-align: left; }
.signed-in-summary > strong { font-size: 1rem; line-height: 1.5; font-weight: 600; }
.signed-in-summary > span { color: var(--text-secondary); overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.55; }
.signed-in-summary .auth-submit { min-height: 38px; margin: 8px 0 0; padding: 9px 12px; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--line-strong); box-shadow: none; border-radius: 5px; text-transform: none; font-size: .8125rem; }
.signed-in-summary .auth-submit:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.auth-status:empty { display: none; }
.auth-panel > header { padding: 25px 0 18px; }
.auth-intro { color: var(--text-secondary); font-size: .875rem; margin: 18px 0; }
.auth-tabs { display: flex; gap: 5px; border: 0; background: var(--bg-canvas); padding: 4px; border-radius: 6px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; border: 0; background: none; border-radius: 4px; font-size: .8125rem; }
.auth-tabs button.is-active { background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.auth-panel form label { display: grid; gap: 7px; margin-bottom: 18px; }
.password-wrap button { border-left: 0; border-radius: 0 5px 5px 0; height: 43px; font-size: .6875rem; }
.auth-links { display: flex; justify-content: space-between; gap: 15px; font-size: .6875rem; }
.auth-submit { width: 100%; padding: 14px; display: flex; justify-content: center; gap: 9px; font-size: .875rem; margin-top: 20px; }
.auth-privacy { display: flex; gap: 10px; padding-top: 15px; border-top: 1px solid var(--line-subtle); margin-top: 20px; font-size: .75rem; color: var(--text-muted); }
.auth-privacy p { margin: 0; }
.auth-status { font-size: .8125rem; }
.toast { background: var(--bg-surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 6px; color: var(--text-primary); box-shadow: var(--shadow-md); padding: 14px 18px; font-size: .875rem; }
@media (min-width: 1800px) { .creative-workbench { grid-template-columns: 52px minmax(0,1fr) 390px; } }
@media (max-width: 1250px) {
  :root, html[data-ui="paper-sketch"] { --sidebar-width: 198px; }
  .topbar { gap: 18px; padding-inline: 18px; }
  .machine-cell:not(:first-child) { display: none; }
  .creative-workbench { grid-template-columns: 42px minmax(0,1fr) 320px; }
  .creative-workbench:has(.assistant-panel.is-collapsed) { grid-template-columns: 42px minmax(0,1fr) 0; }
  .canvas-save-state { display: none; }
  .canvas-project-bar { padding-inline: 20px; }
  .canvas-empty-state { width: calc(100% - 40px); padding: 30px 20px; }
  .canvas-empty-state h2 { font-size: 1.2rem; }
  .studio-page { padding-inline: 26px; }
  .dashboard-grid { grid-template-columns: minmax(0,1fr) 235px; }
  .pipeline-strip { gap: 8px; }
  .pipeline-strip button { padding: 14px 10px; }
  .workbench[data-workspace-view="render"] { padding: 24px; gap: 20px; grid-template-columns: minmax(300px,.9fr) minmax(0,1fr); }
  .control-column, .stage-column, .queue-column { padding: 20px; }
  .audio-workspace { grid-template-columns: 1fr; }
  .audio-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .audio-timeline > .console-heading { grid-column: 1/-1; }
  .master-export-panel { grid-column: 1/-1; }
}
@media (max-width: 940px) {
  :root, html[data-ui="paper-sketch"] { --topbar-height: 64px; --studio-header-height: 64px; --sidebar-width: 224px; }
  .topbar { padding: 0 16px; gap: 14px; }
  .sidebar-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 32px; height: 34px; min-height: 34px; padding: 6px; border: 0; background: transparent; }
  .sidebar-toggle span { width: 18px; height: 1.5px; background: var(--text-primary); }
  .brand-copy strong { font-size: 1rem; }
  .brand-copy small { display: none; }
  .brand-mark { width: 29px; height: 29px; padding: 5px; }
  .machine-strip { margin-left: auto; }
  .top-actions { margin-left: 0; gap: 5px; }
  .top-actions #api-open { display: none; }
  .studio-shell { display: block; }
  .studio-sidebar { position: fixed; left: 0; top: var(--topbar-height); bottom: 0; width: 240px; height: calc(100dvh - var(--topbar-height)); min-height: 0; max-height: calc(100dvh - var(--topbar-height)); z-index: 220; transform: translateX(-100%); transition: transform 180ms; border-right: 1px solid var(--line-strong); padding: 20px 14px; }
  .sidebar-open .studio-sidebar { transform: translateX(0); }
  .sidebar-open .sidebar-scrim { display: block; position: fixed; inset: var(--topbar-height) 0 0; background: #17212e65; border: 0; padding: 0; z-index: 210; }
  .sidebar-collapsed .sidebar-project, .sidebar-collapsed .sidebar-group-label, .sidebar-collapsed .sidebar-item strong, .sidebar-collapsed .sidebar-foot strong { display: initial; }
  .sidebar-collapsed .sidebar-item { justify-content: flex-start; padding-inline: 10px; }
  .creative-workbench { grid-template-columns: 42px minmax(0,1fr) 310px; }
  .assistant-panel { position: relative; inset: auto; max-height: none; transform: none; box-shadow: none; }
  .creative-workbench:has(.assistant-panel:not(.is-collapsed)) .canvas-empty-state { display: grid; }
  .page-masthead h1 { font-size: 1.8rem; }
  .mobile-section-nav { display: none; }
  .workbench[data-workspace-view="render"] { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(0,1fr); }
}
@media (max-width: 700px) {
  .telemetry-top { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar { gap: 8px; padding-inline: 12px; }
  .brand { gap: 8px; }
  .brand-copy strong { font-size: .875rem; line-height: 1.2; }
  .brand-copy em { display: block; font-size: .75rem; margin-top: 2px; }
  .subtoken-brand-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 6px; }
  .machine-strip { display: none; }
  .top-actions { margin-left: auto; }
  .top-actions .pixel-button.language { font-size: .6875rem; padding: 6px; }
  .theme-switch { width: 48px; }
  .account-button { padding: 5px; min-height: 33px; }
  .account-chip { flex: 0 0 36px; width: 36px; padding: 4px; gap: 0; justify-content: center; }
  .account-copy { display: none; }
  .studio-page { padding: 25px 18px 40px; }
  .page-masthead, .page-masthead.compact { gap: 15px; align-items: flex-start; padding-bottom: 22px; margin-bottom: 22px; flex-wrap: wrap; }
  .page-masthead h1, .page-masthead.compact h1, .dashboard-masthead h1 { font-size: 1.75rem; }
  .page-masthead p { font-size: .875rem; }
  .hero-action { padding: 10px 14px; font-size: .8125rem; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 18px; }
  .dashboard-now, .dashboard-pulse { padding: 20px; }
  .dashboard-pulse { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .pulse-label { grid-column: 1/-1; }
  .pulse-number { grid-column: 1/-1; padding: 0 0 10px; }
  .pulse-number strong { font-size: 2rem; }
  .pulse-row { display: grid; gap: 7px; font-size: .6875rem; }
  .pipeline-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .pipeline-strip button { min-height: 100px; padding: 17px; }
  .pipeline-strip button:last-child { grid-column: 1/-1; }
  .project-toolbar, .asset-toolbar { flex-wrap: wrap; }
  .search-field { flex: 1; min-width: 180px; }
  .asset-toolbar .search-field { width: 100%; }
  .asset-filters { gap: 2px; }
  .asset-filters button { font-size: .75rem; padding: 8px; }
  .script-workspace { grid-template-columns: 1fr; gap: 20px; }
  .story-brief { padding: 18px; }
  .editor-bar { padding: 14px; }
  .editor-bar > div { gap: 5px; }
  #project-script { padding: 18px; font-size: .8125rem; }
  .script-editor footer { flex-wrap: wrap; }
  .storyboard-toolbar { flex-wrap: wrap; gap: 14px; }
  .storyboard-commandbar { padding: 12px; gap: 10px; }
  .board-batch-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .board-batch-actions button.primary { grid-column: auto; }
  .storyboard-commandbar { flex-direction: row; }
  .board-zoom { margin-left: 0; }
  .continuity-notice { align-items: flex-start; padding: 14px; }
  .continuity-notice > span { display: none; }
  .shot-list.is-board { grid-template-columns: 1fr; }
  .music-console, .audio-timeline { padding: 18px; }
  .audio-timeline { display: block; }
  .provider-badge { font-size: .625rem; }
  .canvas-project-bar { flex: 0 0 66px; height: 66px; padding: 10px 14px; gap: 12px; }
  .canvas-kicker { font-size: .5625rem; }
  .canvas-title-group h1 { font-size: .875rem; max-width: 150px; }
  .canvas-project-actions { gap: 5px; }
  .canvas-queue-chip, #canvas-advanced-open { display: none; }
  .canvas-ratio-control { height: 32px; padding-inline: 3px; }
  .canvas-ratio-control select { width: 64px; height: 30px; min-height: 30px; font-size: .75rem; }
  .canvas-icon-button { width: 32px; min-height: 32px; padding: 5px; }
  .creative-workbench { position: relative; grid-template-columns: 38px minmax(0,1fr); }
  .creative-workbench:has(.assistant-panel.is-collapsed) { grid-template-columns: 38px minmax(0,1fr); }
  .canvas-dock { padding-top: 15px; gap: 9px; }
  .canvas-dock button { width: 31px; }
  .canvas-empty-state { top: 43%; width: calc(100% - 42px); padding: 30px 18px; }
  .canvas-empty-state h2 { font-size: 1.25rem; }
  .canvas-empty-state p { font-size: .875rem; }
  .canvas-bottom-tools { left: 12px; bottom: 18px; }
  .assistant-panel { position: absolute; right: 10px; left: 46px; top: 10px; bottom: 12px; z-index: 20; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-md); width: auto; height: auto; max-height: none; }
  .assistant-panel.is-collapsed { display: none; }
  .creative-workbench:has(.assistant-panel:not(.is-collapsed)) .canvas-empty-state { visibility: hidden; }
  .assistant-header { flex-basis: 53px; padding: 9px 12px; }
  .assistant-messages { padding: 20px 16px; }
  .ai-composer { padding: 14px; max-height: calc(100% - 53px); }
  .assistant-content, .node-inspector { min-height: 0; }
  .composer-settings-grid { max-height: 210px; }
  .shot-list.is-list .shot-card { grid-template-columns: 1fr; }
  .shot-list.is-list .shot-number { grid-row: auto; flex-direction: row; justify-content: flex-start; padding: 12px; border: 0; border-bottom: 1px solid var(--line-subtle); }
  .shot-list.is-list .shot-actions { grid-column: 1; }
  .shot-list.is-board .shot-card { flex-basis: 280px; min-width: 260px; max-width: 90vw; }
  .shot-body { padding: 14px; }
  .shot-controls label { grid-template-columns: auto minmax(40px,80px); }
  .bridge-shot-button { margin: 0; }
  .bridge-shot-button small { display: none; }
  .shot-actions, .shot-list.is-board .shot-actions { padding: 12px; }
  .mobile-section-nav:not([hidden]) { display: flex; position: sticky; top: var(--topbar-height); z-index: 30; padding: 8px 16px; gap: 8px; background: var(--bg-surface); border-bottom: 1px solid var(--line-subtle); }
  .mobile-section-nav a { flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 8px; border: 0; text-decoration: none; font-size: .75rem; color: var(--text-secondary); border-radius: 5px; }
  .mobile-section-nav a.is-current { background: var(--accent-soft); color: var(--accent); }
  .mobile-section-nav span { font: 400 .625rem var(--font-mono); }
  .workbench[data-workspace-view="render"] { display: grid; grid-template-columns: 1fr; padding: 18px; gap: 20px; }
  .control-column, .stage-column, .queue-column { padding: 18px; scroll-margin-top: 125px; }
  .queue-column { grid-column: 1; }
  .queue-operations, .queue-runway { grid-template-columns: 1fr; gap: 14px; }
  .queue-head { align-items: flex-start; }
  .queue-digits > div { padding: 10px 7px; }
  .queue-digits strong { font-size: 1rem; }
  .queue-digits { gap: 7px; }
  .video-stage { aspect-ratio: 16/9; }
  .video-stage:has(.render-overlay:not([hidden])) { aspect-ratio: auto; min-height: 285px; }
  .render-overlay { padding: 28px 20px; }
  .stage-column > .stage-meta { gap: 7px 12px; font-size: .6875rem; }
  #stage-seed { flex-basis: 100%; margin-left: 0; }
  .telemetry-top > div:first-child { grid-column: 1/-1; }
  .stage-header { flex-wrap: wrap; gap: 12px; }
  #assistant-inspector-pane { padding: 18px 14px; }
  .footer-ticker { flex-wrap: wrap; gap: 8px; font-size: .625rem; padding: 16px; }
  .auth-panel { padding: 0 20px 20px; }
  .dialog-content { padding: 18px; }
  .dialog-shell > header { padding: 20px 18px; }
  .code-tabs { gap: 5px; margin-block: 18px; }
  .code-tabs button { font-size: .6875rem; padding: 7px 8px; }
  pre { padding: 14px; font-size: .75rem; }
  .api-links { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* Shared component finishes: quiet states, precise icons and readable controls. */
.sidebar-item > span { display: inline-grid; place-items: center; }
.sidebar-item > span svg { display: block; width: 18px; height: 18px; }
.brand { text-decoration: none; }
.brand:hover { text-decoration: none; }
.subtoken-brand-icon { object-fit: contain; }
.stage-coordinates { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 450 .6875rem/1.4 var(--font-display); }
#stage-model { color: var(--text-secondary); }
#clock-code { padding: 4px 7px; border: 1px solid var(--line-subtle); border-radius: 4px; white-space: nowrap; }
button, .pixel-button, .render-button, .hero-action, .account-chip { text-shadow: none; }
button:not(:disabled):active, .pixel-button:not(:disabled):active { transform: none; }
.pixel-button.ink:hover, .render-button:hover:not(:disabled), .hero-action:hover, .auth-submit:hover { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }
button:disabled, input:disabled, select:disabled { opacity: .6; }
#render-output-disclosure :is(input,select):disabled { opacity: 1; background: var(--bg-surface-muted); color: var(--text-secondary); cursor: not-allowed; }
#fasth3-v2-hint { padding: 10px 12px; margin: 12px 0 0; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; line-height: 1.55; }
:is(.status-tag,.shot-status,.node-status,.music-job-status) { background: var(--bg-surface-muted); color: var(--text-secondary); border: 1px solid var(--line-subtle); border-radius: 20px; padding: 4px 9px; font: 500 .6875rem/1.4 var(--font-display); letter-spacing: 0; text-shadow: none; box-shadow: none; }
:is(.status-tag.running,.status-tag.queued,.status-tag.waiting,.node-status.status-running,.shot-status.generating) { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
:is(.status-tag.failed,.node-status.status-failed,.shot-status.failed) { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
:is(.status-tag.completed,.node-status.status-generated,.shot-status.generated) { color: var(--success); background: var(--success-soft); border-color: transparent; }
.status-tag.cancelled { color: var(--text-muted); }
.queue-card.is-running, .queue-card.is-queued, .queue-card.is-waiting { background: var(--bg-surface); border: 1px solid var(--line-subtle); border-radius: 8px; box-shadow: none; }
.queue-card.is-running { border-left: 3px solid var(--accent); }
.queue-card-top { gap: 12px; }
.queue-card-title-row { align-items: flex-start; gap: 10px; }
.queue-card-title { color: var(--text-primary); font-size: .875rem; line-height: 1.5; font-weight: 550; }
.queue-card-sub, .queue-card-foot { font-size: .75rem; color: var(--text-secondary); letter-spacing: 0; }
.queue-card-foot button { color: var(--danger); font-size: .75rem; border: 0; background: transparent; }
.queue-number { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 6px; box-shadow: none; font: 500 .75rem var(--font-mono); }
.mini-progress { height: 3px; overflow: hidden; border: 0; border-radius: 3px; background: var(--line-subtle); }
.mini-progress > i { background: var(--accent); border-radius: inherit; }
.mini-progress.is-indeterminate > i { width: 36% !important; animation: notebook-progress 2s ease-in-out infinite; }
.recent-card { border: 1px solid var(--line-subtle); border-radius: 6px; background: var(--bg-surface); box-shadow: none; }
.recent-card > button { color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 5px; }
.recent-card-title { font: 550 .8125rem/1.5 var(--font-display); color: var(--text-primary); }
.recent-card-copy small { font-size: .6875rem; color: var(--text-secondary); }
.dialog-close:hover { background: var(--bg-surface-muted); color: var(--text-primary); }
.dialog-close { flex: 0 0 32px; }
.auth-submit:disabled { background: var(--accent-soft); color: var(--text-secondary); border-color: var(--line-subtle); }
pre, code, .api-endpoint { text-shadow: none; }
.code-pane pre { white-space: pre; overflow-x: auto; }
.field-grid, .brief-pair, .music-params, .image-param-grid, .inspector-pair { min-width: 0; }
.account-chip { max-width: 180px; }
.account-copy { min-width: 0; }
.account-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 125px; }
:focus-visible { outline-color: var(--focus-ring); }
@media (max-width: 700px) {
  .stage-column > .stage-meta { align-items: baseline; }
  .render-overlay strong { font-size: 1.3rem; }
  .render-overlay p { font-size: .8125rem; }
  .job-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-actions #download-current { grid-column: 1/-1; }
  .status-tag { white-space: nowrap; }
  .queue-card-title-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 380px) {
  .composer-toolbar { gap: 3px; }
  .composer-actions { gap: 1px; }
  .smart-match-button { padding-inline: 3px; gap: 3px; }
  .smart-match-button > span { display: none; }
  .composer-submit-group { gap: 3px; }
}

/* Composer utilities and generation actions are separate, readable rows. */
#ai-composer { gap: 14px; overflow: hidden; flex-shrink: 1; }
#composer-fields { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 3px; margin: -3px; }
#composer-fields > * { flex: 0 0 auto; }
#ai-composer .composer-toolbar { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 2px 0 0; align-items: stretch; }
#ai-composer .composer-actions { display: flex; gap: 8px; width: 100%; align-items: center; }
#ai-composer .composer-actions > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 36px; width: auto; height: 36px; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line-subtle); border-radius: 5px; background: var(--bg-surface); box-shadow: none; font-size: 17px; }
#ai-composer #composer-skill { gap: 7px; padding-inline: 11px; }
#composer-skill #composer-skill-label { display: block; width: auto; min-width: max-content; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 13px; line-height: 20px; font-weight: 500; }
#composer-skill > i { display: inline; font-size: 12px; font-style: normal; color: var(--text-muted); }
#ai-composer .composer-submit-group { display: flex; width: 100%; gap: 12px; align-items: center; justify-content: space-between; }
#ai-composer #composer-smart-match { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 7px; min-height: 40px; padding: 8px 10px; background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 6px; white-space: nowrap; }
#composer-smart-match > span { display: inline; font-size: 14px; }
#composer-smart-match > strong { flex: 0 0 auto; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; word-break: normal; overflow: visible; }
#ai-composer #canvas-submit { display: inline-flex; flex: 0 0 auto; gap: 9px; justify-content: center; align-items: center; width: auto; min-width: 88px; height: 40px; min-height: 40px; padding: 8px 12px; }
#canvas-submit strong { font: 600 13px/20px var(--font-display); white-space: nowrap; }
#canvas-submit > span { font-size: 20px; }
#canvas-skill-menu { z-index: 300; padding: 7px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-md); }
#canvas-skill-menu > button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 5px; background: transparent; text-align: left; min-height: 58px; }
#canvas-skill-menu > button:hover, #canvas-skill-menu > button:focus-visible { background: var(--accent-soft); color: var(--accent); }
#canvas-skill-menu > button > span { width: 21px; flex: 0 0 21px; font-size: 18px; }
#canvas-skill-menu strong { display: block; color: var(--text-primary); font-size: 13px; font-weight: 550; line-height: 1.5; }
#canvas-skill-menu small { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 3px; }
.wp-mention-popover { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-md); }
.wp-mention-search-wrap { flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
.wp-mention-search { width: 100%; min-height: 40px; padding: 9px 11px; font: 400 14px/20px var(--font-ui); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--bg-canvas); }
.wp-mention-filters { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 5px; }
.wp-mention-filters button { padding: 5px 8px; min-height: 29px; font-size: 12px; border: 0; border-radius: 4px; }
.wp-mention-listbox { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 5px; }
.wp-mention-option { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 5px; cursor: pointer; }
.wp-mention-option.is-active { background: var(--accent-soft); color: var(--accent); }
.wp-mention-option__kind { flex: 0 0 auto; font-size: 11px; padding-top: 2px; color: var(--text-muted); }
.wp-mention-option__label { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.wp-mention-status { flex: 0 0 auto; padding: 1px 2px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.wp-mention-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 74px; overflow-y: auto; }
.wp-mention-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 7px; border: 1px solid var(--line-subtle); border-radius: 5px; background: var(--bg-canvas); }
.wp-mention-chip__kind { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
.wp-mention-chip__label { min-width: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.wp-mention-chip__remove { flex: 0 0 auto; width: 24px; min-height: 24px; padding: 2px; border: 0; background: transparent; font-size: 15px; }
.wp-mention-chips { flex-wrap: nowrap; max-height: 98px; overflow-x: auto; overflow-y: hidden; padding: 3px 1px; }
.wp-mention-chip.has-thumbnail { position: relative; display: grid; flex: 0 0 76px; width: 76px; gap: 4px; padding: 6px; justify-items: center; }
.has-thumbnail .wp-mention-thumbnail { display: flex; width: 62px; height: 44px; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.wp-mention-thumbnail :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.has-thumbnail .wp-mention-chip__kind { display: none; }
.has-thumbnail .wp-mention-chip__label { font: 400 9px/14px var(--font-mono); white-space: nowrap; }
.has-thumbnail .wp-mention-chip__remove { position: absolute; right: -1px; top: -1px; display: grid; place-items: center; width: 22px; height: 22px; min-height: 22px; border: 1px solid var(--line-subtle); border-radius: 50%; background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.has-thumbnail .wp-mention-chip__missing { font-size: 10px; }
#canvas-shortcuts { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; z-index: 500; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 20px; }
#canvas-shortcuts header { gap: 16px; margin-bottom: 12px; }
#canvas-shortcuts header strong { font-size: 15px; line-height: 1.5; }
#canvas-shortcuts header button { width: 32px; min-height: 32px; padding: 5px; }
#canvas-shortcuts dl { margin: 0; }
#canvas-shortcuts dl > div { gap: 20px; padding: 12px 0; font-size: 13px; line-height: 1.5; }
#canvas-shortcuts dt { white-space: nowrap; }
#canvas-shortcuts dd { margin: 0; text-align: right; }
#canvas-shortcuts kbd { font-size: 13px; }