:root {
  color-scheme: light;
  font-family:
    Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;

  --surface-page: #f1f3f5;
  --surface-panel: #fafbfc;
  --surface-subtle: #e9eef4;
  --surface-muted: #f5f7f9;
  --surface-hover: #e2e9f2;
  --text-primary: #202d3d;
  --text-secondary: #596575;
  --text-tertiary: #748091;
  --border-default: #c8d0da;
  --border-strong: #949fac;
  --action-primary: #426eab;
  --action-primary-hover: #34598d;
  --action-primary-text: #ffffff;
  --focus-ring: #5a84be;
  --status-info: #2f6fbb;
  --status-success: #248558;
  --status-warning: #9a6208;
  --status-danger: #b83c45;
  --status-info-bg: #e7f0fa;
  --status-success-bg: #e5f3eb;
  --status-warning-bg: #f8f0db;
  --status-danger-bg: #fae9ea;
  --code-text: #34465e;
  --code-background: #e5eaf0;
  --diff-insert-edit: #bde7cf;
  --diff-delete-edit: #f1c5c8;
  --shadow-dialog: 0 18px 52px rgb(32 45 61 / 18%);
  --shadow-panel: 0 1px 3px rgb(32 45 61 / 10%);
  --shadow-action: 0 1px 2px rgb(66 110 171 / 26%);
  --accent-primary: var(--action-primary);
  --production-page: #f1f3f5;
  --production-panel: #fafbfc;
  --production-panel-strong: #e9eef4;
  --production-featured: #e3ebf5;
  --production-text: #202d3d;
  --production-muted: #596575;
  --production-faint: #748091;
  --production-border: #c8d0da;
  --production-border-strong: #949fac;
  --production-accent: #426eab;
  --production-accent-hover: #34598d;
  --production-accent-ink: #ffffff;
  --production-accent-soft: #e0e9f5;
  --production-overlay: rgb(241 243 245 / 76%);
  --production-shadow: 0 18px 52px rgb(32 45 61 / 14%);
  --production-glass-panel: rgb(250 251 252 / 82%);
  --production-glass-strong: rgb(233 238 244 / 86%);
  --production-glass-featured: rgb(227 235 245 / 88%);
  --production-glass-field: rgb(255 255 255 / 90%);
  --production-glass-highlight: rgb(255 255 255 / 74%);
  --production-voyage-text: #263d5c;
  --production-voyage-muted: #5b6879;
  --production-voyage-faint: #758195;
  --production-studio-text: #e7ebf0;
  --production-studio-muted: #bac2cc;
  --production-studio-faint: #909aa8;
  --production-studio-border: rgb(231 235 240 / 28%);
  --production-studio-shadow: 0 1px 2px rgb(0 0 0 / 68%);
  --radius-small: 4px;
  --radius-medium: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #111418;
  --surface-panel: #1a1f25;
  --surface-subtle: #232a32;
  --surface-muted: #14181d;
  --surface-hover: #29333f;
  --text-primary: #f2f4f7;
  --text-secondary: #bcc4ce;
  --text-tertiary: #8e98a6;
  --border-default: #39424d;
  --border-strong: #5d6876;
  --action-primary: #7da6dc;
  --action-primary-hover: #9ab9e4;
  --action-primary-text: #101722;
  --focus-ring: #8db4e7;
  --status-info: #8db8ee;
  --status-success: #64d29a;
  --status-warning: #f0c66a;
  --status-danger: #f08a91;
  --status-info-bg: #172d3f;
  --status-success-bg: #173328;
  --status-warning-bg: #382c16;
  --status-danger-bg: #3c2024;
  --code-text: #dce2e9;
  --code-background: #232a32;
  --diff-insert-edit: #205b42;
  --diff-delete-edit: #6a3035;
  --shadow-dialog: 0 22px 62px rgb(0 0 0 / 42%);
  --shadow-panel: 0 1px 3px rgb(0 0 0 / 28%);
  --shadow-action: 0 1px 2px rgb(125 166 220 / 28%);
  --accent-primary: var(--action-primary);
  --production-page: #0d0f12;
  --production-panel: #15191e;
  --production-panel-strong: #1b2228;
  --production-featured: #19222d;
  --production-text: #f2f4f7;
  --production-muted: #b7c0ca;
  --production-faint: #818c9a;
  --production-border: rgb(219 230 235 / 15%);
  --production-border-strong: rgb(219 230 235 / 28%);
  --production-accent: #7da6dc;
  --production-accent-hover: #9ab9e4;
  --production-accent-ink: #101722;
  --production-accent-soft: rgb(125 166 220 / 14%);
  --production-overlay: rgb(13 15 18 / 76%);
  --production-shadow: 0 22px 62px rgb(0 0 0 / 38%);
  --production-glass-panel: rgb(21 25 30 / 74%);
  --production-glass-strong: rgb(27 34 40 / 80%);
  --production-glass-featured: rgb(25 34 45 / 82%);
  --production-glass-field: rgb(12 16 19 / 76%);
  --production-glass-highlight: rgb(255 255 255 / 12%);
  --production-voyage-text: #f2f4f7;
  --production-voyage-muted: #b7c0ca;
  --production-voyage-faint: #818c9a;
  --production-studio-text: #f2f4f7;
  --production-studio-muted: #c0c7d0;
  --production-studio-faint: #929daa;
  --production-studio-border: rgb(242 244 247 / 24%);
  --production-studio-shadow: 0 1px 2px rgb(0 0 0 / 72%);
}

:root[data-theme="light"][data-tone="graphite"] {
  --surface-page: #f2f3f4;
  --surface-panel: #fbfbfc;
  --surface-subtle: #eceff2;
  --surface-muted: #f6f7f8;
  --surface-hover: #e4e8ec;
  --text-primary: #252b33;
  --text-secondary: #616a76;
  --text-tertiary: #7a8490;
  --border-default: #cbd1d7;
  --border-strong: #98a1ab;
  --action-primary: #596675;
  --action-primary-hover: #46515e;
  --focus-ring: #737f8e;
  --code-text: #3e4752;
  --code-background: #e8ebee;
  --shadow-action: 0 1px 2px rgb(89 102 117 / 24%);
  --production-page: #f2f3f4;
  --production-panel: #fbfbfc;
  --production-panel-strong: #eceff2;
  --production-featured: #e7eaed;
  --production-text: #252b33;
  --production-muted: #616a76;
  --production-faint: #7a8490;
  --production-border: #cbd1d7;
  --production-border-strong: #98a1ab;
  --production-accent: #596675;
  --production-accent-hover: #46515e;
  --production-accent-soft: #e4e8ec;
  --production-overlay: rgb(242 243 244 / 76%);
  --production-glass-panel: rgb(251 251 252 / 82%);
  --production-glass-strong: rgb(236 239 242 / 86%);
  --production-glass-featured: rgb(231 234 237 / 88%);
  --production-voyage-text: #313943;
  --production-voyage-muted: #626d79;
  --production-voyage-faint: #7c8793;
}

:root[data-theme="dark"][data-tone="graphite"] {
  --action-primary: #b8c0ca;
  --action-primary-hover: #d1d6dc;
  --action-primary-text: #15191e;
  --focus-ring: #c4ccd5;
  --shadow-action: 0 1px 2px rgb(184 192 202 / 24%);
  --production-featured: #20252b;
  --production-accent: #b8c0ca;
  --production-accent-hover: #d1d6dc;
  --production-accent-ink: #15191e;
  --production-accent-soft: rgb(184 192 202 / 12%);
  --production-glass-featured: rgb(32 37 43 / 82%);
}

:root[data-theme="light"][data-tone="plum"] {
  --surface-page: #f3f1f5;
  --surface-panel: #fbfafc;
  --surface-subtle: #ede9f1;
  --surface-muted: #f7f5f8;
  --surface-hover: #e8e1ee;
  --text-primary: #342d3d;
  --text-secondary: #6a6074;
  --text-tertiary: #83788d;
  --border-default: #d1c9d7;
  --border-strong: #a49aaa;
  --action-primary: #6f5e8e;
  --action-primary-hover: #5b4c78;
  --focus-ring: #8874aa;
  --code-text: #50445e;
  --code-background: #eae5ee;
  --shadow-action: 0 1px 2px rgb(111 94 142 / 25%);
  --production-page: #f3f1f5;
  --production-panel: #fbfafc;
  --production-panel-strong: #ede9f1;
  --production-featured: #e9e2ee;
  --production-text: #342d3d;
  --production-muted: #6a6074;
  --production-faint: #83788d;
  --production-border: #d1c9d7;
  --production-border-strong: #a49aaa;
  --production-accent: #6f5e8e;
  --production-accent-hover: #5b4c78;
  --production-accent-soft: #e8e1ee;
  --production-overlay: rgb(243 241 245 / 76%);
  --production-glass-panel: rgb(251 250 252 / 82%);
  --production-glass-strong: rgb(237 233 241 / 86%);
  --production-glass-featured: rgb(233 226 238 / 88%);
  --production-voyage-text: #443750;
  --production-voyage-muted: #6d6176;
  --production-voyage-faint: #85798e;
}

:root[data-theme="dark"][data-tone="plum"] {
  --surface-page: #151218;
  --surface-panel: #201c24;
  --surface-subtle: #2b2531;
  --surface-muted: #18141c;
  --surface-hover: #382f41;
  --border-default: #49404f;
  --border-strong: #6c6075;
  --action-primary: #b9a5d5;
  --action-primary-hover: #cbb9e2;
  --action-primary-text: #1b1522;
  --focus-ring: #c5b0df;
  --shadow-action: 0 1px 2px rgb(185 165 213 / 26%);
  --production-featured: #241d2b;
  --production-accent: #b9a5d5;
  --production-accent-hover: #cbb9e2;
  --production-accent-ink: #1b1522;
  --production-accent-soft: rgb(185 165 213 / 13%);
  --production-glass-featured: rgb(36 29 43 / 82%);
}

:root[data-theme="light"][data-tone="coral"] {
  --surface-page: #f5f2f1;
  --surface-panel: #fcfbfa;
  --surface-subtle: #f1e9e7;
  --surface-muted: #f8f6f5;
  --surface-hover: #eee2e0;
  --text-primary: #3c302f;
  --text-secondary: #716260;
  --text-tertiary: #8b7c79;
  --border-default: #d8cdca;
  --border-strong: #aa9b98;
  --action-primary: #a65f5c;
  --action-primary-hover: #894c49;
  --focus-ring: #bd7772;
  --code-text: #584745;
  --code-background: #eee7e5;
  --shadow-action: 0 1px 2px rgb(166 95 92 / 24%);
  --production-page: #f5f2f1;
  --production-panel: #fcfbfa;
  --production-panel-strong: #f1e9e7;
  --production-featured: #f0e4e2;
  --production-text: #3c302f;
  --production-muted: #716260;
  --production-faint: #8b7c79;
  --production-border: #d8cdca;
  --production-border-strong: #aa9b98;
  --production-accent: #a65f5c;
  --production-accent-hover: #894c49;
  --production-accent-soft: #eee2e0;
  --production-overlay: rgb(245 242 241 / 76%);
  --production-glass-panel: rgb(252 251 250 / 82%);
  --production-glass-strong: rgb(241 233 231 / 86%);
  --production-glass-featured: rgb(240 228 226 / 88%);
  --production-voyage-text: #563b3a;
  --production-voyage-muted: #74625f;
  --production-voyage-faint: #8c7a77;
}

:root[data-theme="dark"][data-tone="coral"] {
  --surface-page: #171313;
  --surface-panel: #221c1c;
  --surface-subtle: #2e2625;
  --surface-muted: #1b1616;
  --surface-hover: #3a2e2d;
  --border-default: #4d4140;
  --border-strong: #71605e;
  --action-primary: #e49a92;
  --action-primary-hover: #efb0a9;
  --action-primary-text: #241514;
  --focus-ring: #eda69f;
  --shadow-action: 0 1px 2px rgb(228 154 146 / 26%);
  --production-featured: #2b201f;
  --production-accent: #e49a92;
  --production-accent-hover: #efb0a9;
  --production-accent-ink: #241514;
  --production-accent-soft: rgb(228 154 146 / 13%);
  --production-glass-featured: rgb(43 32 31 / 82%);
}
* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  height: 100%;
  background: var(--surface-page);
}

body {
  margin: 0;
  min-width: 320px;
  height: 100dvh;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--surface-page);
  line-height: 1.5;
}

#root {
  height: 100%;
  min-height: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

select option,
select optgroup {
  color: var(--text-primary);
  background: var(--surface-panel);
}

select option:disabled {
  color: var(--text-tertiary);
}

button,
a,
input,
textarea,
select {
  outline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  background: var(--surface-panel);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

button:hover {
  background: var(--surface-hover);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

code {
  border-radius: var(--radius-small);
  padding: 1px 4px;
  color: var(--code-text);
  background: var(--code-background);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
}

.product-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}

.product-brand__mark {
  display: inline-flex;
  flex: 0 0 auto;
  width: 42px;
  height: 30px;
  align-items: center;
  justify-content: center;
}

.product-brand__mark img {
  display: block;
  width: 42px;
  height: auto;
  max-height: 30px;
  object-fit: contain;
}

.product-brand__copy {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.product-brand__copy strong,
.product-brand__copy > span {
  overflow-wrap: anywhere;
}

.product-brand__copy strong {
  font-size: 0.8125rem;
  font-weight: 750;
}

.product-brand__copy > span {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 500;
}

.product-brand__release {
  white-space: nowrap;
  color: var(--text-secondary);
  font-weight: 650;
}

.theme-toggle {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 0;
  color: var(--text-primary);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.theme-toggle:hover {
  border-color: var(--action-primary);
  color: var(--action-primary);
  background: var(--surface-hover);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.app-boot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 100vh;
  color: var(--text-secondary);
}

.app-boot__mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--action-primary);
}

.feedback-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  color: var(--text-secondary);
}

.form-error {
  margin: var(--space-3) 0 0;
  color: var(--status-danger);
  font-size: 0.875rem;
}

.feedback-state h2 {
  margin-bottom: var(--space-1);
  color: var(--text-primary);
  font-size: 1rem;
}

.feedback-state p {
  margin-bottom: var(--space-3);
}

.feedback-state__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.feedback-state--error {
  color: var(--status-danger);
}

.status-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  color: var(--text-secondary);
  background: var(--surface-subtle);
  font-size: 0.875rem;
}

.status-label svg {
  width: 15px;
  height: 15px;
}

.status-label--info {
  color: var(--status-info);
  background: var(--status-info-bg);
}

.status-label--success {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.status-label--warning {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.status-label--danger {
  color: var(--status-danger);
  background: var(--status-danger-bg);
}

.is-spinning {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.project-id-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  color: var(--text-secondary, #667085);
  font-size: 0.72rem;
  line-height: 1.4;
}

.project-id-badge__label {
  flex: 0 0 auto;
  color: var(--text-secondary, #667085);
}

.project-id-badge code {
  min-width: 0;
  max-width: 100%;
  color: var(--text-primary, #344054);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.project-id-badge__copy {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--text-secondary, #667085);
}

.project-id-badge__copy:hover,
.project-id-badge__copy:focus-visible {
  color: var(--text-primary, #344054);
}

.project-id-badge__copy svg {
  width: 14px;
  height: 14px;
}

.project-id-badge__status {
  flex: 0 0 auto;
  min-width: 0;
  color: var(--status-success, #16803c);
  font-size: 0.68rem;
}

@media (max-width: 560px) {
  .project-id-badge {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .project-id-badge code {
    flex: 1 1 180px;
  }
}
.page {
  width: min(100%, 1240px);
  height: 100%;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.page--narrow,
.page--form {
  width: min(100%, 760px);
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-header--stacked {
  display: block;
  margin-top: var(--space-6);
}

.page-header h1,
.overview h1 {
  margin-bottom: 0;
  font-size: 1.75rem;
  line-height: 1.25;
}

.page-kicker {
  margin-bottom: var(--space-1);
  color: var(--action-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  background: var(--surface-panel);
  text-decoration: none;
  font-weight: 650;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.button svg {
  width: 16px;
  height: 16px;
}

.button--primary {
  border-color: var(--action-primary);
  color: var(--action-primary-text);
  background: var(--action-primary);
  box-shadow: var(--shadow-action);
}

.button--primary:hover {
  color: var(--action-primary-text);
  background: var(--action-primary-hover);
}

.button--danger {
  border-color: var(--status-danger);
  color: #ffffff;
  background: var(--status-danger);
}

.button--danger-quiet {
  border-color: transparent;
  color: var(--status-danger);
  background: transparent;
}

.button--danger-quiet:hover {
  border-color: var(--status-danger);
  background: var(--status-danger-bg);
}

.button--quiet {
  border-color: transparent;
  color: var(--text-secondary);
  background: transparent;
}

.button--quiet:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.hub-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 52px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.hub-brandbar .product-brand__copy strong {
  line-height: 1.25;
  font-size: 0.9375rem;
}

.hub-brandbar .product-brand__copy > span {
  font-size: 0.75rem;
}

.hub-brandbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.creative-mode-page {
  --pipeline-bg: var(--production-page);
  --pipeline-panel: var(--production-glass-panel);
  --pipeline-panel-strong: var(--production-glass-strong);
  --pipeline-border: var(--production-border);
  --pipeline-border-strong: var(--production-border-strong);
  --pipeline-text: var(--production-text);
  --pipeline-muted: var(--production-muted);
  --pipeline-faint: var(--production-faint);
  --pipeline-accent: var(--production-accent);
  --pipeline-accent-soft: var(--production-accent-soft);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: var(--pipeline-text);
  transition: color 180ms ease;
}

.creative-mode-page > .production-video-backdrop {
  position: fixed;
  z-index: -2;
}

.creative-mode-page > .production-video-backdrop video {
  filter: saturate(0.58) contrast(1.04);
}

.creative-mode-page .hub-brandbar {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  position: sticky;
  top: var(--space-3);
  z-index: 30;
  margin-bottom: clamp(2.25rem, 5vw, 4.75rem);
  border: 1px solid var(--production-studio-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgb(12 17 23 / 68%);
  box-shadow: 0 14px 36px rgb(5 8 12 / 22%), inset 0 1px 0 rgb(255 255 255 / 9%);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  text-shadow: var(--production-studio-shadow);
}

.creative-mode-page .product-brand,
.creative-mode-page .account-summary,
.creative-mode-page .theme-toggle,
.creative-mode-page .button--quiet {
  color: var(--pipeline-text);
}

.creative-mode-page .product-brand__copy > span,
.creative-mode-page .account-summary small {
  color: var(--pipeline-muted);
}

.creative-mode-page .product-brand__mark {
  color: inherit;
  background: transparent;
}

.creative-mode-page .button--quiet:hover,
.creative-mode-page .theme-toggle:hover,
.creative-mode-page .account-summary:hover {
  border-color: var(--pipeline-accent);
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

.creative-mode-page__header {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--pipeline-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  text-shadow: var(--production-studio-shadow);
}

.creative-mode-page__header h1 {
  margin: 0;
  color: var(--pipeline-text);
  font-size: clamp(2rem, 4vw, 3.15rem);
  letter-spacing: 0;
  line-height: 1.08;
}

.creative-mode-page__header > p {
  max-width: 34rem;
  margin: 0;
  color: var(--pipeline-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: right;
}

.creative-mode-page .page-kicker {
  color: var(--pipeline-accent);
  letter-spacing: 0;
  text-transform: uppercase;
}

.creation-pipeline,
.production-workshops {
  min-width: 0;
}

.creation-pipeline__heading,
.production-workshops__heading {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--production-studio-border);
  text-shadow: var(--production-studio-shadow);
}

.creation-pipeline__heading > div,
.production-workshops__heading > div {
  display: grid;
  gap: 4px;
}

.creation-pipeline__heading strong,
.production-workshops__heading strong {
  color: var(--pipeline-text);
  font-size: 0.95rem;
  letter-spacing: 0;
}

.creation-pipeline__heading span,
.production-workshops__heading span {
  color: var(--pipeline-faint);
  font-size: 0.75rem;
}

.creation-pipeline__heading > span {
  white-space: nowrap;
}

.creation-pipeline__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.creation-pipeline__unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  min-width: 0;
}

.creation-pipeline__unit:last-child {
  grid-template-columns: minmax(0, 1fr);
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 23rem;
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  background: var(--pipeline-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.pipeline-stage:hover {
  border-color: var(--pipeline-border-strong);
  background: var(--pipeline-panel-strong);
  transform: translateY(-3px);
}

.pipeline-stage[data-mode="storyboard_creation"] {
  border-color: color-mix(in srgb, var(--pipeline-accent) 42%, var(--pipeline-border));
  background: var(--production-glass-featured);
}

.pipeline-stage__header {
  display: grid;
  grid-template-columns: auto 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.pipeline-stage__number {
  color: var(--pipeline-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.pipeline-stage__icon,
.production-workshop__icon {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 45%, var(--pipeline-border));
  border-radius: 6px;
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

.pipeline-stage__icon svg,
.production-workshop__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.pipeline-stage__count {
  justify-self: end;
  color: var(--pipeline-muted);
  font-size: 0.75rem;
}

.pipeline-stage__body {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-width: 0;
  margin-top: clamp(1.35rem, 2.5vw, 2rem);
}

.pipeline-stage__copy {
  min-width: 0;
}

.pipeline-stage__copy h2 {
  margin: 0 0 0.45rem;
  color: var(--pipeline-text);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: 0;
}

.pipeline-stage__copy strong {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--pipeline-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.pipeline-stage__copy p {
  max-width: 34ch;
  margin: 0;
  color: var(--pipeline-muted);
  font-size: 0.8rem;
  line-height: 1.65;
}

.pipeline-stage__activity {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px var(--space-3);
  align-items: center;
  min-width: 0;
  border-top: 1px solid var(--pipeline-border);
  padding-top: var(--space-3);
  color: var(--pipeline-faint);
  font-size: 0.72rem;
}

.pipeline-stage__activity > span {
  grid-row: 1 / 3;
}

.pipeline-stage__activity strong {
  overflow: hidden;
  color: var(--pipeline-text);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-stage__activity time {
  color: var(--pipeline-faint);
}

.pipeline-adaptations {
  display: grid;
  grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 32%, var(--pipeline-border));
  border-radius: 8px;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: color-mix(in srgb, var(--pipeline-panel) 88%, var(--pipeline-accent-soft));
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.pipeline-adaptations__heading {
  display: grid;
  gap: 4px;
}

.pipeline-adaptations__heading strong {
  color: var(--pipeline-text);
  font-size: 0.9rem;
}

.pipeline-adaptations__heading span {
  color: var(--pipeline-faint);
  font-size: 0.75rem;
  line-height: 1.45;
}

.pipeline-adaptations nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pipeline-adaptations a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--pipeline-border) 82%, transparent);
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--pipeline-text);
  background: color-mix(in srgb, var(--pipeline-panel-strong) 58%, transparent);
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.pipeline-adaptations a:hover {
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
  transform: translateX(2px);
}

.pipeline-adaptations svg {
  width: 15px;
  height: 15px;
}

.pipeline-adaptations a strong {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.pipeline-adaptations a em {
  color: var(--pipeline-faint);
  font-size: 0.7rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pipeline-stage__action,
.production-workshop a,
.production-workshop__launch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--pipeline-border);
  padding-top: var(--space-3);
  color: var(--pipeline-text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}

.pipeline-stage__action {
  min-height: 44px;
  margin-top: auto;
}

.pipeline-stage__action:hover,
.production-workshop a:hover,
.production-workshop__launch:hover {
  color: var(--pipeline-accent);
}

.pipeline-stage__action svg,
.production-workshop a svg,
.production-workshop__launch svg {
  width: 17px;
  height: 17px;
  transition: transform 180ms ease;
}

.pipeline-stage__action:hover svg,
.production-workshop a:hover svg,
.production-workshop__launch:hover svg {
  transform: translateX(3px);
}

.pipeline-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--pipeline-accent);
}

.pipeline-connector span {
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--pipeline-accent) 60%, transparent);
}

.pipeline-connector svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.pipeline-handoff {
  --pipeline-faint: var(--production-studio-faint);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  margin: clamp(2.5rem, 6vw, 4.75rem) auto;
  color: var(--pipeline-faint);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-shadow: var(--production-studio-shadow);
}

.pipeline-handoff svg {
  width: 15px;
  height: 15px;
  color: var(--pipeline-accent);
}

.production-workshops__heading {
  margin-bottom: var(--space-6);
}

.production-workshops__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.production-workshop {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--pipeline-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.production-workshop::before {
  position: absolute;
  top: -1px;
  right: 12%;
  left: 12%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, var(--pipeline-accent), transparent);
}

.production-workshop--image {
  border-color: color-mix(in srgb, var(--pipeline-accent) 40%, var(--pipeline-border));
  background: var(--production-glass-featured);
}

.production-workshop--voice {
  border-color: color-mix(in srgb, var(--pipeline-accent) 40%, var(--pipeline-border));
  background: var(--production-glass-featured);
}

.production-workshop--voice .production-workshop__status {
  color: var(--pipeline-accent);
}

.production-workshop--video {
  opacity: 0.72;
}

.production-workshop header,
.production-workshop footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.production-workshop__status {
  color: var(--pipeline-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.production-workshop--image .production-workshop__status {
  color: var(--pipeline-accent);
}

.production-workshop__status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--pipeline-accent);
  box-shadow: 0 0 0 3px var(--pipeline-accent-soft);
}

.production-workshop > div {
  margin: auto 0;
  padding: var(--space-6) 0;
}

.production-workshop p {
  margin: 0 0 0.55rem;
  color: var(--pipeline-faint);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.production-workshop h2 {
  margin: 0 0 0.5rem;
  color: var(--pipeline-text);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  letter-spacing: 0;
}

.production-workshop strong {
  display: block;
  max-width: 38ch;
  color: var(--pipeline-muted);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.55;
}

.production-workshop footer {
  align-items: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--pipeline-border);
  color: var(--pipeline-faint);
  font-size: 0.72rem;
}

.production-workshop footer a {
  border-top: 0;
  padding-top: 0;
}

.production-workshop__launch {
  border: 0;
  padding: 0;
  color: var(--pipeline-text);
  background: transparent;
  box-shadow: none;
}

.production-workshop__launch:hover {
  background: transparent;
}

.production-workshop__launch:disabled {
  color: var(--pipeline-faint);
}

.production-workshop__error {
  margin: var(--space-3) 0 0;
  border: 1px solid color-mix(in srgb, var(--status-danger) 38%, transparent);
  border-radius: 5px;
  padding: var(--space-2) var(--space-3);
  color: var(--status-danger);
  background: var(--status-danger-bg);
  font-size: 0.72rem;
  line-height: 1.45;
}

:root[data-theme="light"] .creative-mode-page .pipeline-stage,
:root[data-theme="light"] .creative-mode-page .production-workshop {
  border-color: color-mix(in srgb, var(--pipeline-border-strong) 66%, rgb(255 255 255 / 70%));
  background: color-mix(in srgb, var(--surface-panel) 68%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 78%),
    0 16px 42px rgb(32 45 61 / 15%);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

:root[data-theme="light"] .creative-mode-page .pipeline-stage[data-mode="storyboard_creation"],
:root[data-theme="light"] .creative-mode-page .production-workshop--image,
:root[data-theme="light"] .creative-mode-page .production-workshop--voice {
  background: color-mix(in srgb, var(--production-featured) 72%, transparent);
}

.production-workshop__unavailable {
  color: var(--pipeline-faint);
  font-weight: 650;
}

.page-header__description {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.project-mode-back {
  margin-bottom: var(--space-4);
  font-size: 0.8125rem;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.changelog-dialog {
  width: min(100%, 620px);
  max-height: min(760px, calc(100dvh - 32px));
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  padding: var(--space-6);
  background: var(--surface-panel);
  box-shadow: var(--shadow-dialog);
}

.changelog-backdrop {
  animation: changelog-backdrop-enter 180ms ease-out both;
}

.changelog-dialog--animated {
  transform-origin: 50% 42%;
  animation: changelog-dialog-enter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.changelog-backdrop.is-closing {
  pointer-events: none;
  animation: changelog-backdrop-exit 180ms ease-in both;
}

.changelog-backdrop.is-closing .changelog-dialog--animated {
  animation: changelog-dialog-exit 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

.changelog-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.changelog-dialog__header p {
  margin-bottom: var(--space-1);
  color: var(--action-primary);
  font-size: 0.75rem;
  font-weight: 750;
}

.changelog-dialog__header h2 {
  margin: 0;
  font-size: 1.375rem;
}

.changelog-dialog__lede {
  margin: var(--space-4) 0;
  color: var(--text-secondary);
}

.changelog-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-3);
  border-top: 1px solid var(--border-default);
  padding: var(--space-3) 0;
  animation: changelog-item-enter 320ms ease-out both;
}

.changelog-list li:nth-child(2) {
  animation-delay: 45ms;
}

.changelog-list li:nth-child(3) {
  animation-delay: 90ms;
}

.changelog-list__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-small);
  color: var(--action-primary);
  background: var(--surface-subtle);
}

.changelog-list__icon svg {
  width: 17px;
  height: 17px;
}

.changelog-list h3 {
  margin: 0 0 2px;
  font-size: 0.9375rem;
}

.changelog-list p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.changelog-history__controls {
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}

.changelog-history__toggle > svg:last-child {
  transition: transform 180ms ease;
}

.changelog-history__toggle > svg:last-child.is-open {
  transform: rotate(180deg);
}

.changelog-history {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  animation: changelog-history-enter 220ms ease-out both;
}

.changelog-history ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog-history li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}

.changelog-history li > div {
  display: grid;
  grid-row: 1 / span 2;
  align-content: start;
  gap: 2px;
}

.changelog-history time {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.changelog-history h3,
.changelog-history p {
  margin: 0;
}

.changelog-history h3 {
  font-size: 0.875rem;
}

.changelog-history p {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.55;
}

.changelog-dialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-5, 20px);
}

@keyframes changelog-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes changelog-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes changelog-backdrop-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes changelog-dialog-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}

@keyframes changelog-item-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes changelog-history-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-table {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.project-list-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.project-list-page .hub-brandbar {
  margin-bottom: var(--space-6);
}

.project-list-page .page-header {
  margin-bottom: var(--space-6);
}

.project-list-page .project-table {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100dvh - 296px);
}

.project-table__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 140px 230px;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) 60px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-tertiary);
  background: var(--surface-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.project-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-list-page .project-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.project-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 180px 140px 230px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.project-row:last-child {
  border-bottom: 0;
}

.project-row:hover {
  background: var(--surface-muted);
}

.project-row__icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.project-row__main,
.project-row__title-line {
  min-width: 0;
}

.project-row h2 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.project-row p {
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
}

.project-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.project-row__owner {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row time {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.project-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.project-row__actions .button {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}

.project-pagination {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.project-pagination p {
  margin: 0;
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.project-pagination__button {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}

.project-pagination__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.project-create-page .page-header--stacked {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.project-create-page .form-grid {
  padding-bottom: var(--space-8);
}

.storyboard-source-upload {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--space-4);
}

.storyboard-source-upload > .field--wide {
  grid-column: 1 / -1;
}

.storyboard-runtime-help {
  margin-top: calc(var(--space-2) * -1);
}

.storyboard-source-upload .field > span,
.storyboard-style-upload > span {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.storyboard-source-upload svg,
.storyboard-style-upload svg,
.storyboard-production-mode > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.storyboard-production-mode {
  grid-column: 1 / -1;
  min-height: 74px;
  margin: 0;
}

.creation-basis-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.creation-basis-field legend {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.creation-basis-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-muted);
}

.creation-basis-options label {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 12px 14px;
  cursor: pointer;
}

.creation-basis-options label + label {
  border-left: 1px solid var(--border-default);
}

.creation-basis-options label.is-selected {
  background: var(--surface-panel);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.creation-basis-options input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--accent-primary);
  box-shadow: none;
}

.creation-basis-options label > span {
  display: grid;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
}

.creation-basis-options strong,
.creation-basis-options small {
  overflow-wrap: anywhere;
}

.creation-basis-options small {
  color: var(--text-tertiary);
  font-weight: 400;
  line-height: 1.45;
}

.outline-import-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-strong);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
}

.back-link svg {
  width: 16px;
  height: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.field--wide {
  grid-column: 1 / -1;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: 10px 12px;
  color: var(--text-primary);
  background: var(--surface-panel);
  font-weight: 400;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--border-strong);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 15%, transparent);
}

.field textarea {
  resize: vertical;
}

.field small {
  color: var(--status-danger);
  font-weight: 400;
}

.field small.field-help {
  color: var(--text-tertiary);
}

.field--readonly output {
  display: block;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  background: var(--surface-muted);
  color: var(--text-primary);
  font-weight: 600;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 232px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.workspace-topbar {
  position: relative;
  z-index: 50;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-panel);
}

.workspace-brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-6);
  border-right: 1px solid var(--border-default);
  color: var(--text-primary);
  gap: var(--space-3);
  font-weight: 750;
  text-decoration: none;
}

.workspace-project {
  display: grid;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 var(--space-6);
}

.workspace-project__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  min-width: 0;
}

.workspace-project__title > strong {
  min-width: 0;
}

.workspace-project__id {
  flex: 0 1 auto;
  font-size: 0.68rem;
}

.workspace-project__id .project-id-badge__copy {
  width: 24px;
  height: 24px;
}

.workspace-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-4);
}

.workspace-live-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.workspace-live-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-success);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-small);
  color: var(--text-secondary);
}

.icon-link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.icon-link svg {
  width: 18px;
  height: 18px;
}

.workspace-project strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-project > span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.workspace-sidebar {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.workspace-sidebar__label {
  margin: 0 var(--space-3) var(--space-2);
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 750;
  text-transform: uppercase;
}

.workspace-nav {
  display: grid;
  gap: var(--space-1);
}

.workspace-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
}

.workspace-nav a:hover,
.workspace-nav a.active {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.workspace-sidebar__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.workspace-sidebar__footer a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
}

.workspace-sidebar__footer a:hover,
.workspace-sidebar__footer a.active {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.workspace-sidebar__footer svg {
  width: 17px;
  height: 17px;
}

.workspace-nav a.active {
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.workspace-nav svg {
  width: 17px;
  height: 17px;
}

.workspace-main {
  min-width: 0;
  min-height: 0;
  padding: var(--space-6) clamp(var(--space-4), 3vw, var(--space-8));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (min-width: 761px) {
  .workspace-main:has(.workflow-workspace),
  .workspace-main:has(.storyboard-workspace) {
    overflow: hidden;
  }
}

.storyboard-workspace {
  display: grid;
  grid-template-rows: auto 46px minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.storyboard-workspace__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
}

.storyboard-workspace__header h1 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.2;
}

.storyboard-workspace__header .page-kicker {
  margin-bottom: 2px;
}

.storyboard-workspace__metrics {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.storyboard-workspace__metrics span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--text-secondary);
  background: var(--surface-panel);
  font-size: 0.75rem;
}

.storyboard-workspace__metrics strong {
  color: var(--text-primary);
  font-size: 0.875rem;
}

.storyboard-workspace__metrics svg {
  width: 15px;
  height: 15px;
  color: var(--action-primary);
}

.storyboard-stage-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  padding: 0 10px;
  overflow: hidden;
  background: var(--surface-panel);
  list-style: none;
}

.storyboard-stage-strip li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.storyboard-stage-strip li:not(:last-child)::after {
  position: absolute;
  right: -1px;
  width: 1px;
  height: 16px;
  background: var(--border-default);
  content: '';
}

.storyboard-stage-strip i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--text-tertiary);
  background: var(--surface-muted);
  font-style: normal;
  font-weight: 750;
}

.storyboard-stage-strip .is-complete,
.storyboard-stage-strip .is-current {
  color: var(--text-primary);
  font-weight: 650;
}

.storyboard-stage-strip .is-complete i {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.storyboard-stage-strip .is-current i {
  color: var(--action-primary-text);
  background: var(--action-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.storyboard-workspace__grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(460px, 1.8fr) minmax(270px, 0.9fr);
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.storyboard-agent-panel,
.storyboard-canvas,
.storyboard-inspector {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.storyboard-agent-panel,
.storyboard-inspector {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.storyboard-agent-panel > header,
.storyboard-inspector section > header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 58px;
  border-bottom: 1px solid var(--border-default);
  padding: 10px 14px;
}

.storyboard-agent-panel > header > svg,
.storyboard-inspector section > header > svg {
  width: 19px;
  height: 19px;
  color: var(--action-primary);
}

.storyboard-agent-panel header strong,
.storyboard-agent-panel header span,
.storyboard-inspector header strong,
.storyboard-inspector header span {
  display: block;
}

.storyboard-agent-panel header span,
.storyboard-inspector header span {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.storyboard-run-card {
  display: grid;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  padding: 14px;
}

.storyboard-run-card .status-label {
  justify-self: start;
}

.storyboard-run-card h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.storyboard-run-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.storyboard-run-card .button {
  margin-top: 4px;
}

.storyboard-segment-index {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storyboard-segment-index h2 {
  margin: 0 0 10px;
  font-size: 0.8125rem;
}

.storyboard-segment-index section {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
}

.storyboard-segment-index section > strong {
  padding: 0 8px 4px;
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.storyboard-segment-index button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  border-color: transparent;
  border-radius: 10px;
  padding: 7px 9px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.75rem;
  text-align: left;
}

.storyboard-segment-index button.is-active {
  color: var(--text-primary);
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.storyboard-segment-index small {
  color: var(--text-tertiary);
}

.storyboard-segment-index > p {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.storyboard-canvas {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.storyboard-canvas > .feedback-state {
  height: 100%;
  border: 0;
}

.storyboard-segment-viewer {
  padding: clamp(16px, 2vw, 26px);
}

.storyboard-segment-viewer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 18px;
}

.storyboard-segment-viewer > header p {
  margin: 0 0 2px;
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.storyboard-segment-viewer h2 {
  margin: 0;
  font-size: 1.25rem;
}

.storyboard-opening-staging {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.storyboard-project-id {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.storyboard-project-id code {
  overflow-wrap: anywhere;
  font: 0.6875rem/1.4 "SFMono-Regular", Consolas, monospace;
  color: var(--text-secondary);
}

.storyboard-opening-staging strong {
  color: var(--action-primary);
  font-size: 0.75rem;
}

.storyboard-opening-staging p {
  margin: 4px 0 0;
  font-size: 0.8125rem;
}

.storyboard-shot-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.storyboard-shot-list > li {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 12px 14px;
}

.storyboard-shot-list li > header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.storyboard-shot-list header strong {
  margin-right: auto;
  font-size: 0.8125rem;
}

.storyboard-shot-list header span {
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  font-size: 0.6875rem;
}

.storyboard-shot-list li > p {
  margin: 10px 0 0;
  font-size: 0.8125rem;
}

.storyboard-shot-continuity {
  margin-top: 10px;
  border-top: 1px solid var(--border-default);
  padding-top: 8px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.storyboard-shot-continuity summary {
  cursor: pointer;
  color: var(--action-primary);
  font-weight: 700;
}

.storyboard-shot-continuity__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.storyboard-shot-continuity__grid > div {
  min-width: 0;
  border-left: 2px solid var(--border-default);
  padding-left: 8px;
}

.storyboard-shot-continuity p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.storyboard-shot-continuity__editor {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid var(--border-default);
  padding-top: 10px;
}

.storyboard-shot-continuity__editor label {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.storyboard-shot-continuity__editor textarea,
.storyboard-shot-continuity__editor input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 7px;
  color: var(--text-primary);
  background: var(--surface-default);
  font: 0.6875rem/1.45 "SFMono-Regular", Consolas, monospace;
  resize: vertical;
}

.storyboard-shot-continuity__editor input {
  min-height: 32px;
  font-family: inherit;
}

.storyboard-shot-continuity__editor small,
.storyboard-shot-continuity__error {
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.storyboard-shot-continuity__error {
  color: var(--status-danger);
}

@media (max-width: 720px) {
  .storyboard-shot-continuity__grid {
    grid-template-columns: 1fr;
  }
}

.video-asset-generation-continuity {
  margin-top: 12px;
  border-top: 1px solid var(--border-default);
  padding-top: 10px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.video-asset-generation-continuity summary {
  cursor: pointer;
  color: var(--action-primary);
  font-weight: 700;
}

.video-asset-generation-continuity > p {
  margin: 6px 0;
}

.video-asset-generation-continuity__shot {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  border-left: 2px solid var(--border-default);
  padding-left: 8px;
}

.video-asset-generation-continuity__shot span {
  overflow-wrap: anywhere;
}

.storyboard-shot-list blockquote {
  margin: 10px 0 0;
  border-left: 2px solid var(--action-primary);
  padding: 4px 0 4px 10px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.storyboard-shot-list blockquote p {
  margin: 0 0 3px;
}

.storyboard-dialogue-line + .storyboard-dialogue-line {
  margin-top: 8px;
}

.storyboard-dialogue-line > p > span {
  display: inline-flex;
  margin-left: 8px;
  border: 1px solid color-mix(in srgb, var(--status-success) 40%, transparent);
  border-radius: 6px;
  padding: 1px 5px;
  color: var(--status-success);
  font-size: 0.625rem;
  line-height: 1.4;
}

.storyboard-dialogue-line details {
  margin-top: 3px;
  color: var(--text-tertiary);
}

.storyboard-dialogue-line summary {
  width: fit-content;
  cursor: pointer;
  font-size: 0.6875rem;
}

.storyboard-dialogue-line details p {
  margin-top: 4px;
  color: var(--text-tertiary);
}

.storyboard-prompt-preview {
  border-top: 1px solid var(--border-default);
  padding-top: 12px;
}

.storyboard-prompt-preview summary {
  color: var(--action-primary);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

.storyboard-prompt-preview pre {
  max-height: 320px;
  margin: 10px 0 0;
  border-radius: 12px;
  padding: 14px;
  overflow: auto;
  color: var(--text-primary);
  background: var(--surface-muted);
  font: 0.75rem/1.65 "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
}

.storyboard-inspector {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storyboard-inspector > section + section {
  border-top: 1px solid var(--border-default);
}

.storyboard-rag-status {
  display: grid;
  gap: 7px;
  padding: 12px 14px 16px;
}

.storyboard-rag-status .status-label {
  justify-self: start;
}

.storyboard-rag-status > strong {
  font-size: 0.8125rem;
}

.storyboard-rag-status p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.storyboard-assets-panel ul,
.storyboard-quality-panel ul {
  margin: 0;
  padding: 8px 12px 14px;
  list-style: none;
}

.storyboard-asset-approval {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-default);
}

.storyboard-asset-approval p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.55;
}

.storyboard-asset-approval .button {
  width: 100%;
}

.storyboard-assets-panel li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border-default);
  padding: 9px 2px;
}

.storyboard-assets-panel li strong,
.storyboard-assets-panel li span {
  display: block;
}

.storyboard-assets-panel li strong {
  font-size: 0.75rem;
}

.storyboard-assets-panel li span,
.storyboard-assets-panel li small {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.storyboard-prop-audit {
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
}

.storyboard-prop-audit > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-default);
}

.storyboard-prop-audit > header > svg {
  width: 16px;
  height: 16px;
  color: var(--accent-primary);
  flex: 0 0 auto;
}

.storyboard-prop-audit > header strong,
.storyboard-prop-audit > header span {
  display: block;
}

.storyboard-prop-audit > header strong {
  font-size: 0.8rem;
}

.storyboard-prop-audit > header span,
.storyboard-prop-audit__summary p,
.storyboard-prop-audit__muted,
.storyboard-prop-audit__warning {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.storyboard-prop-audit__summary,
.storyboard-prop-audit__notice {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.storyboard-prop-audit__notice .button {
  width: 100%;
}

.storyboard-prop-audit__summary p,
.storyboard-prop-audit__notice p,
.storyboard-prop-audit__warning,
.storyboard-prop-audit__muted {
  margin: 0;
  line-height: 1.5;
}

.storyboard-prop-audit__summary > strong {
  font-size: 0.75rem;
}

.storyboard-prop-audit__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.storyboard-prop-audit__list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-default);
}

.storyboard-prop-audit__list li > div {
  min-width: 0;
}

.storyboard-prop-audit__list strong,
.storyboard-prop-audit__list span,
.storyboard-prop-audit__list small {
  display: block;
}

.storyboard-prop-audit__list strong {
  font-size: 0.75rem;
}

.storyboard-prop-audit__list span,
.storyboard-prop-audit__list small {
  color: var(--text-tertiary);
  font-size: 0.68rem;
  line-height: 1.45;
}

.storyboard-prop-audit__warning {
  margin: 0;
  padding: 0 12px 12px;
  color: var(--status-warning-text, var(--text-secondary));
}

.storyboard-prop-audit__candidates {
  border-top: 1px solid var(--border-default);
  padding: 10px 12px 12px;
}

.storyboard-prop-audit__candidates summary {
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 650;
}

.storyboard-prop-audit__candidates > p,
.storyboard-prop-audit__approval {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.5;
}

.storyboard-prop-audit__candidate-list {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-default);
}

.storyboard-prop-audit__candidate-list li {
  display: grid;
  gap: 2px;
  padding: 8px 0 0;
}

.storyboard-prop-audit__candidate-list strong,
.storyboard-prop-audit__candidate-list span,
.storyboard-prop-audit__candidate-list small {
  display: block;
}

.storyboard-prop-audit__candidate-list strong {
  font-size: 0.72rem;
}

.storyboard-prop-audit__candidate-list span,
.storyboard-prop-audit__candidate-list small {
  color: var(--text-tertiary);
  font-size: 0.66rem;
  line-height: 1.45;
}

.storyboard-prop-audit__approval {
  padding: 0 12px 12px;
  color: var(--status-warning-text, var(--text-secondary));
}

.storyboard-asset-evidence {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  border-left: 2px solid var(--border-strong);
  padding-left: 8px;
}

.storyboard-asset-evidence > strong {
  color: var(--text-secondary);
  font-size: 0.68rem;
}

.storyboard-asset-evidence p,
.storyboard-asset-evidence ul {
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.4;
}

.storyboard-asset-evidence p span {
  display: inline;
  margin-right: 4px;
  color: var(--text-tertiary);
}

.storyboard-asset-evidence ul {
  padding-left: 13px;
  list-style: disc;
}

.storyboard-quality-panel li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.storyboard-quality-panel li svg {
  width: 15px;
  height: 15px;
  color: var(--status-success);
}

.storyboard-delivery-controls {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.storyboard-delivery-controls label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.storyboard-delivery-controls select {
  width: 100%;
  min-height: 36px;
}

.storyboard-delivery-controls .button {
  width: 100%;
  justify-content: center;
}

.storyboard-delivery-controls p,
.storyboard-delivery-pending {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.storyboard-mobile-tabs {
  display: none;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .storyboard-workspace__grid {
    grid-template-columns: 220px minmax(420px, 1fr) 250px;
  }

  .storyboard-stage-strip span {
    display: none;
  }
}

@media (max-width: 760px) {
  .workspace-main:has(.storyboard-workspace) {
    overflow: hidden;
  }

  .storyboard-workspace {
    display: grid;
    grid-template-rows: auto 44px 40px minmax(0, 1fr);
    gap: var(--space-2);
    height: 100%;
    overflow: hidden;
  }

  .storyboard-workspace__header,
  .storyboard-workspace__metrics {
    align-items: flex-start;
  }

  .storyboard-workspace__header {
    flex-direction: column;
  }

  .storyboard-workspace__metrics {
    width: 100%;
    overflow-x: auto;
  }

  .storyboard-stage-strip {
    grid-template-columns: repeat(7, 40px);
    justify-content: start;
    height: 44px;
    margin: 0;
    overflow-x: auto;
  }

  .storyboard-stage-strip span {
    display: none;
  }

  .storyboard-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    min-height: 40px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 3px;
    background: var(--surface-panel);
  }

  .storyboard-mobile-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    padding: 0 8px;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 650;
  }

  .storyboard-mobile-tabs button[aria-selected='true'] {
    color: var(--text-primary);
    background: var(--surface-hover);
    box-shadow: inset 0 0 0 1px var(--border-strong);
  }

  .storyboard-mobile-tabs svg {
    width: 15px;
    height: 15px;
  }

  .storyboard-workspace__grid {
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .storyboard-workspace__grid[data-mobile-panel='agent'] .storyboard-canvas,
  .storyboard-workspace__grid[data-mobile-panel='agent'] .storyboard-inspector,
  .storyboard-workspace__grid[data-mobile-panel='canvas'] .storyboard-agent-panel,
  .storyboard-workspace__grid[data-mobile-panel='canvas'] .storyboard-inspector,
  .storyboard-workspace__grid[data-mobile-panel='inspector'] .storyboard-agent-panel,
  .storyboard-workspace__grid[data-mobile-panel='inspector'] .storyboard-canvas {
    display: none;
  }

  .storyboard-agent-panel,
  .storyboard-canvas,
  .storyboard-inspector {
    width: 100%;
    height: 100%;
    max-height: none;
  }
}

/* Read-only media export controls. Keep these panels usable on narrow
   workspaces without introducing a second card hierarchy. */
.asset-export-panel,
.video-export-panel {
  position: fixed;
  inset: 72px 24px auto auto;
  z-index: 40;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--production-border, var(--border-default));
  border-radius: 8px;
  color: var(--production-text, var(--text-primary));
  background: var(--project-glass-panel, var(--production-glass-panel, var(--surface-panel)));
  box-shadow: var(--shadow-dialog);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.asset-export-panel > header,
.video-export-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.asset-export-panel h2,
.video-export-panel h2 { margin: 0; color: var(--production-text, var(--text-primary)); font-size: 1rem; }
.asset-export-panel p,
.video-export-panel p { margin: 6px 0 0; color: var(--production-muted, var(--text-secondary)); font-size: .82rem; }

.asset-export-panel__categories,
.asset-export-panel__items,
.video-export-panel__modes,
.video-export-panel__choices,
.video-export-panel__resolutions {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.asset-export-panel__categories label,
.asset-export-panel__items label,
.video-export-panel__modes label,
.video-export-panel__choices label,
.video-export-panel__resolutions label,
.video-export-panel__enhanced {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--production-border, var(--border-default));
  border-radius: 6px;
  color: var(--production-text, var(--text-primary));
  background: var(--production-glass-field, var(--surface-muted));
  font-size: .84rem;
}

.asset-export-panel__categories label:hover,
.asset-export-panel__items label:hover,
.video-export-panel__modes label:hover,
.video-export-panel__choices label:hover,
.video-export-panel__resolutions label:hover,
.video-export-panel__enhanced:hover {
  border-color: var(--production-border-strong, var(--border-strong));
  background: var(--surface-hover);
}

.asset-export-panel input,
.video-export-panel input {
  accent-color: var(--production-accent, var(--action-primary));
}

.asset-export-panel__categories small,
.asset-export-panel__items small,
.video-export-panel__choices small {
  margin-left: auto;
  color: var(--production-muted, var(--text-secondary));
  font-size: .72rem;
}

.asset-export-panel__items,
.video-export-panel__choices { max-height: 260px; overflow: auto; }
.asset-export-panel__items label[data-disabled='true'] { color: var(--production-faint, var(--text-tertiary)); }
.video-export-panel__enhanced { margin-bottom: 10px; }
.video-export-panel__resolutions { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 560px) {
  .asset-export-panel,
  .video-export-panel { inset: 56px 16px 16px; width: auto; max-height: none; }
  .video-export-panel__resolutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.video-asset-generation-enhancement-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.video-asset-generation-enhancement-action select {
  width: 92px;
  min-height: 32px;
  font-size: .66rem;
}

.video-asset-generation-enhancement-action .button {
  min-height: 32px;
  padding-inline: var(--space-2);
  border-color: color-mix(in srgb, var(--video-accent) 48%, var(--video-border));
  color: var(--video-accent);
  font-size: .66rem;
  white-space: nowrap;
}

.video-asset-generation-enhancement-action .button:disabled {
  color: var(--video-faint);
}

.video-asset-generation-enhancement-action svg { width: 14px; }

@media (max-width: 760px) {
  .video-asset-generation-enhancement-action {
    width: 100%;
  }

  .video-asset-generation-enhancement-action select,
  .video-asset-generation-enhancement-action .button {
    flex: 1;
  }
}

/* Mode hub: three focused production chapters with homepage-style wheel navigation. */
.creative-mode-page.page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.creative-mode-page .hub-brandbar {
  position: relative;
  z-index: 40;
  flex: 0 0 64px;
}

.mode-hub-scroll {
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  scrollbar-width: none;
}

.mode-hub-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mode-hub-nav {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  position: absolute;
  z-index: 35;
  top: calc(50% + 32px);
  right: clamp(16px, 2.5vw, 40px);
  display: grid;
  width: 124px;
  gap: 4px;
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: 8px;
  background: rgb(12 17 23 / 72%);
  box-shadow: 0 14px 34px rgb(5 8 12 / 22%);
  backdrop-filter: blur(24px) saturate(132%);
  -webkit-backdrop-filter: blur(24px) saturate(132%);
  transform: translateY(-50%);
}

.mode-hub-nav a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-right: 2px solid transparent;
  padding: 4px 8px 4px 0;
  color: var(--pipeline-muted);
  font-size: 0.7rem;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.mode-hub-nav a:hover,
.mode-hub-nav a[aria-current='page'] {
  border-color: var(--pipeline-accent);
  color: var(--pipeline-text);
  background: var(--pipeline-accent-soft);
  transform: translateX(-3px);
}

.mode-hub-nav span {
  color: var(--pipeline-faint);
  font-variant-numeric: tabular-nums;
}

.mode-hub-nav a[aria-current='page'] span {
  color: var(--pipeline-accent);
}

.mode-hub-nav strong {
  min-width: 0;
  font-weight: 700;
}

.mode-hub-section {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: #aeb7c3;
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  padding: clamp(24px, 4vh, 44px) max(156px, calc((100% - 1240px) / 2 + 24px)) clamp(24px, 4vh, 44px) max(24px, calc((100% - 1240px) / 2 + 24px));
  color: var(--pipeline-text);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-shadow: var(--production-studio-shadow);
}

.mode-hub-section__content {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.mode-hub-intro,
.mode-hub-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 20px;
}

.mode-hub-intro > div,
.mode-hub-section-heading > div {
  min-width: 0;
}

.mode-hub-intro h1,
.mode-hub-section-heading h2 {
  margin: 0;
  color: var(--pipeline-text);
  font-size: 2.35rem;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgb(0 0 0 / 92%), 0 8px 24px rgb(0 0 0 / 52%);
}

.mode-hub-intro > p,
.mode-hub-section-heading > p {
  max-width: 64ch;
  margin: 0;
  border: 1px solid rgb(242 244 247 / 16%);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--pipeline-muted);
  background: rgb(9 13 18 / 68%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  font-size: 0.86rem;
  font-weight: 520;
  line-height: 1.6;
  text-align: right;
  text-shadow: 0 1px 3px rgb(0 0 0 / 92%);
  backdrop-filter: blur(14px) saturate(112%);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
}

.mode-hub-section-heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--pipeline-accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.mode-hub-section__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pipeline-border);
  padding-bottom: 10px;
}

.mode-hub-section__bar > div {
  display: grid;
  gap: 2px;
}

.mode-hub-section__bar strong {
  color: var(--pipeline-text);
  font-size: 0.9rem;
  font-weight: 750;
}

.mode-hub-section__bar span {
  color: var(--pipeline-muted);
  font-size: 0.74rem;
  font-weight: 580;
}

.mode-hub-primary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mode-hub-mode {
  display: flex;
  min-width: 0;
  min-height: 348px;
  flex-direction: column;
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: 24px;
  background: rgb(15 21 28 / 88%);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 14px 34px rgb(5 8 12 / 14%);
  backdrop-filter: blur(22px) saturate(126%);
  -webkit-backdrop-filter: blur(22px) saturate(126%);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.mode-hub-mode:hover {
  border-color: var(--pipeline-border-strong);
  background: rgb(19 27 35 / 94%);
  transform: translateY(-2px);
}

.mode-hub-mode[data-mode='storyboard_creation'] {
  border-color: color-mix(in srgb, var(--pipeline-accent) 45%, var(--pipeline-border));
}

.mode-hub-mode > header {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.mode-hub-mode > header > span {
  color: var(--pipeline-faint);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mode-hub-mode > header > svg {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 44%, var(--pipeline-border));
  border-radius: 6px;
  padding: 8px;
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

.mode-hub-mode > header > em {
  justify-self: end;
  color: var(--pipeline-muted);
  font-size: 0.74rem;
  font-weight: 560;
  font-style: normal;
}

.mode-hub-mode__copy {
  margin-top: 20px;
}

.mode-hub-mode__copy h2 {
  margin: 0 0 6px;
  color: var(--pipeline-text);
  font-size: 1.22rem;
  letter-spacing: 0;
}

.mode-hub-mode__copy strong {
  display: block;
  margin-bottom: 8px;
  color: var(--pipeline-text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.mode-hub-mode__copy p {
  margin: 0;
  color: var(--pipeline-muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
}

.mode-hub-mode__highlights {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--pipeline-border);
  list-style: none;
}

.mode-hub-mode__highlights li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--pipeline-muted);
  font-size: 0.76rem;
  font-weight: 520;
  line-height: 1.4;
}

.mode-hub-mode__highlights svg {
  width: 14px;
  height: 14px;
  color: var(--pipeline-accent);
}

.mode-hub-mode__latest {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 10px;
  margin-top: 18px;
  border-top: 1px solid var(--pipeline-border);
  padding-top: 12px;
  color: var(--pipeline-muted);
  font-size: 0.72rem;
  font-weight: 520;
}

.mode-hub-mode__latest > span {
  grid-row: 1 / 3;
}

.mode-hub-mode__latest strong {
  overflow: hidden;
  color: var(--pipeline-text);
  font-size: 0.79rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-hub-mode > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin-top: auto;
  border-top: 1px solid var(--pipeline-border);
  padding-top: 10px;
  color: var(--pipeline-text);
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}

.mode-hub-mode > a:hover {
  color: var(--pipeline-accent);
}

.mode-hub-mode > a svg,
.mode-hub-adaptations a svg,
.mode-hub-workshop__action svg {
  width: 16px;
  height: 16px;
}

.mode-hub-adaptations {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
  margin-top: 14px;
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgb(15 21 28 / 86%);
  backdrop-filter: blur(20px) saturate(122%);
  -webkit-backdrop-filter: blur(20px) saturate(122%);
}

.mode-hub-adaptations > div {
  display: grid;
  gap: 3px;
}

.mode-hub-adaptations > div strong {
  color: var(--pipeline-text);
  font-size: 0.82rem;
}

.mode-hub-adaptations > div span {
  color: var(--pipeline-muted);
  font-size: 0.73rem;
  font-weight: 520;
}

.mode-hub-adaptations nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mode-hub-adaptations a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--pipeline-border) 82%, transparent);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--pipeline-text);
  background: rgb(22 30 39 / 82%);
  font-size: 0.78rem;
  text-decoration: none;
}

.mode-hub-adaptations a:hover {
  border-color: var(--pipeline-accent);
  color: var(--pipeline-accent);
}

.mode-hub-adaptations a > svg:first-child {
  color: var(--pipeline-accent);
}

.mode-hub-adaptations a em {
  color: var(--pipeline-muted);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}

.mode-hub-visual-grid,
.mode-hub-future-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 18px;
}

.mode-hub-workshops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mode-hub-asset {
  display: flex;
  min-width: 0;
  min-height: 520px;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 58%, var(--pipeline-border));
  border-radius: 8px;
  padding: 26px 28px;
  background: linear-gradient(115deg, rgb(13 27 34 / 94%), rgb(15 21 28 / 90%));
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 20px 46px rgb(5 8 12 / 20%);
  backdrop-filter: blur(28px) saturate(132%);
  -webkit-backdrop-filter: blur(28px) saturate(132%);
}

.mode-hub-asset__header,
.mode-hub-asset__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mode-hub-asset__identity {
  justify-content: flex-start;
}

.mode-hub-asset__identity > div {
  display: grid;
  gap: 3px;
}

.mode-hub-asset__identity > div > span {
  color: var(--pipeline-accent);
  font-size: 0.74rem;
  font-weight: 750;
}

.mode-hub-asset__identity h3 {
  margin: 0;
  color: var(--pipeline-text);
  font-size: 1.4rem;
}

.mode-hub-asset__body {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  flex: 1;
  gap: 32px;
  margin-top: 24px;
  border-top: 1px solid var(--pipeline-border);
  padding-top: 24px;
}

.mode-hub-asset__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.mode-hub-asset__intro > strong {
  color: var(--pipeline-text);
  font-size: 0.98rem;
  line-height: 1.45;
}

.mode-hub-asset__intro > p {
  margin: 9px 0 0;
  color: var(--pipeline-muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.6;
}

.mode-hub-asset__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 24px 0 0;
  border-top: 1px solid var(--pipeline-border);
  border-bottom: 1px solid var(--pipeline-border);
}

.mode-hub-asset__facts > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px 12px 0;
}

.mode-hub-asset__facts > div + div {
  border-left: 1px solid var(--pipeline-border);
  padding-left: 14px;
}

.mode-hub-asset__facts dt {
  color: var(--pipeline-muted);
  font-size: 0.72rem;
  font-weight: 520;
}

.mode-hub-asset__facts dd {
  overflow: hidden;
  margin: 0;
  color: var(--pipeline-text);
  font-size: 0.79rem;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.mode-hub-asset__intro .mode-hub-workshop__action {
  margin-top: 24px;
}

.mode-hub-asset__submode {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  border-top: 1px solid var(--pipeline-border);
  border-bottom: 1px solid var(--pipeline-border);
  padding: 14px 0;
  color: var(--pipeline-text);
  text-decoration: none;
}

.mode-hub-asset__submode:hover {
  color: var(--pipeline-accent);
}

.mode-hub-asset__submode-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 44%, var(--pipeline-border));
  border-radius: 6px;
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

.mode-hub-asset__submode-icon svg {
  width: 17px;
  height: 17px;
}

.mode-hub-asset__submode-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mode-hub-asset__submode-copy > span {
  color: var(--pipeline-accent);
  font-size: 0.7rem;
  font-weight: 750;
}

.mode-hub-asset__submode-copy strong {
  overflow: hidden;
  color: var(--pipeline-text);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-hub-asset__submode-copy small {
  overflow: hidden;
  color: var(--pipeline-muted);
  font-size: 0.74rem;
  font-weight: 520;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-hub-asset__submode > svg {
  width: 17px;
  height: 17px;
  color: var(--pipeline-muted);
}

.mode-hub-asset__highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mode-hub-asset__highlights li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--pipeline-border);
}

.mode-hub-asset__highlights li > span {
  color: var(--pipeline-accent);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.mode-hub-asset__highlights li > div {
  min-width: 0;
}

.mode-hub-asset__highlights strong {
  color: var(--pipeline-text);
  font-size: 0.82rem;
}

.mode-hub-asset__highlights p {
  margin: 5px 0 0;
  color: var(--pipeline-muted);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.55;
}

.mode-hub-workshop {
  display: flex;
  min-width: 0;
  min-height: 442px;
  flex-direction: column;
  border: 1px solid var(--pipeline-border);
  border-radius: 8px;
  padding: 28px;
  background: rgb(15 21 28 / 88%);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 18px 42px rgb(5 8 12 / 18%);
  backdrop-filter: blur(26px) saturate(128%);
  -webkit-backdrop-filter: blur(26px) saturate(128%);
}

.mode-hub-workshop--asset,
.mode-hub-workshop--voice,
.mode-hub-workshop--video {
  border-color: color-mix(in srgb, var(--pipeline-accent) 48%, var(--pipeline-border));
}

.mode-hub-workshop--image {
  --workshop-accent: var(--status-info);
  border-color: color-mix(in srgb, var(--workshop-accent) 48%, var(--pipeline-border));
  background: color-mix(in srgb, rgb(15 21 28 / 92%) 90%, var(--status-info-bg));
}

.mode-hub-workshop > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mode-hub-workshop__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 48%, var(--pipeline-border));
  border-radius: 7px;
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

.mode-hub-workshop--image .mode-hub-workshop__icon {
  border-color: color-mix(in srgb, var(--workshop-accent) 48%, var(--pipeline-border));
  color: var(--workshop-accent);
  background: var(--status-info-bg);
}

.mode-hub-workshop__icon svg {
  width: 20px;
  height: 20px;
}

.mode-hub-workshop__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pipeline-accent);
  font-size: 0.74rem;
  font-weight: 750;
}

.mode-hub-workshop--image .mode-hub-workshop__status {
  color: var(--workshop-accent);
}

.mode-hub-workshop__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.mode-hub-workshop__status--planned {
  color: var(--pipeline-faint);
}

.mode-hub-workshop__intro {
  margin-top: 28px;
}

.mode-hub-workshop__intro > span {
  display: block;
  margin-bottom: 5px;
  color: var(--workshop-accent, var(--pipeline-accent));
  font-size: 0.74rem;
  font-weight: 700;
}

.mode-hub-workshop__intro h2 {
  margin: 0 0 8px;
  color: var(--pipeline-text);
  font-size: 1.65rem;
  letter-spacing: 0;
}

.mode-hub-workshop__intro h3 {
  margin: 0 0 8px;
  color: var(--pipeline-text);
  font-size: 1.42rem;
  letter-spacing: 0;
}

.mode-hub-workshop__intro strong {
  display: block;
  max-width: 52ch;
  color: var(--pipeline-text);
  font-size: 0.88rem;
  line-height: 1.5;
}

.mode-hub-workshop__intro p {
  max-width: 64ch;
  margin: 8px 0 0;
  color: var(--pipeline-muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.6;
}

.mode-hub-workshop__facts {
  margin: 28px 0 0;
}

.mode-hub-workshop__facts > div {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--pipeline-border);
  border-bottom: 1px solid var(--pipeline-border);
  padding: 16px 0;
}

.mode-hub-workshop__facts dt {
  color: var(--pipeline-muted);
  font-size: 0.74rem;
}

.mode-hub-workshop__facts dd {
  overflow: hidden;
  margin: 0;
  color: var(--pipeline-text);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-hub-workshop__list {
  display: grid;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.mode-hub-workshop__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border-top: 1px solid var(--pipeline-border);
  color: var(--pipeline-muted);
  font-size: 0.79rem;
  font-weight: 500;
}

.mode-hub-workshop__list li:last-child {
  border-bottom: 1px solid var(--pipeline-border);
}

.mode-hub-workshop__list svg {
  width: 15px;
  height: 15px;
  color: var(--workshop-accent, var(--pipeline-accent));
}

.mode-hub-workshop__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
}

.mode-hub-workshop__footer > span {
  max-width: 32ch;
  color: var(--pipeline-muted);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.45;
}

.mode-hub-workshop__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  align-self: flex-start;
  margin-top: auto;
  border: 1px solid color-mix(in srgb, var(--workshop-accent, var(--pipeline-accent)) 55%, var(--pipeline-border));
  border-radius: 6px;
  padding: 0 16px;
  color: var(--pipeline-text);
  background: color-mix(in srgb, var(--pipeline-panel-strong) 58%, transparent);
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}

.mode-hub-workshop__action:hover {
  border-color: var(--workshop-accent, var(--pipeline-accent));
  color: var(--workshop-accent, var(--pipeline-accent));
  background: color-mix(in srgb, var(--pipeline-accent-soft) 72%, transparent);
}

.mode-hub-workshop__action:disabled {
  cursor: wait;
  opacity: 0.62;
}

.mode-hub-workshop__footer .mode-hub-workshop__action {
  flex: 0 0 auto;
  margin-top: 0;
}

.video-asset-generation-page {
  min-height: 100vh;
  background: var(--color-bg);
}

.video-asset-generation-header {
  align-items: flex-end;
}

.video-asset-generation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(220px, auto);
  gap: 1px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-border);
}

.video-asset-generation-summary > div,
.video-asset-generation-summary > time {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}

.video-asset-generation-summary svg {
  width: 18px;
  color: var(--color-accent);
}

.video-asset-generation-summary strong {
  color: var(--color-text);
  font-size: 20px;
}

.video-asset-generation-summary span,
.video-asset-generation-summary time {
  font-size: 12px;
}

.video-asset-generation-grid {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(260px, 320px);
  gap: 12px;
  align-items: start;
}

.video-asset-generation-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.video-asset-generation-panel > header {
  min-height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.video-asset-generation-panel h2,
.video-asset-generation-panel p {
  margin: 0;
}

.video-asset-generation-panel h2 {
  font-size: 15px;
}

.video-asset-generation-panel header p {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.video-asset-generation-list {
  max-height: calc(100vh - 310px);
  display: grid;
  gap: 6px;
  overflow: auto;
  padding: 10px;
}

.video-asset-generation-list button {
  display: grid;
  gap: 4px;
  padding: 10px;
  color: var(--color-text-secondary);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-subtle);
}

.video-asset-generation-list button:hover,
.video-asset-generation-list button[data-active='true'] {
  color: var(--color-text);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

.video-asset-generation-list span,
.video-asset-generation-list small {
  font-size: 10px;
}

.video-asset-generation-list strong {
  font-size: 12px;
}

.video-asset-generation-prompt {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.video-asset-generation-prompt pre {
  max-height: 260px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
}

.video-asset-generation-shot-list,
.video-asset-generation-assets {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 425px);
  overflow: auto;
  padding: 12px;
}

.video-asset-generation-shot-list article,
.video-asset-generation-assets article {
  padding: 11px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-subtle);
}

.video-asset-generation-shot-list span,
.video-asset-generation-shot-list small,
.video-asset-generation-assets small {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.video-asset-generation-shot-list strong {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.video-asset-generation-shot-list p,
.video-asset-generation-assets p {
  margin-top: 6px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.video-asset-generation-assets article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
}

.video-asset-generation-asset-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.video-asset-generation-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--color-text-secondary);
  text-align: center;
}

@media (max-width: 1120px) {
  .video-asset-generation-grid { grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); }
  .video-asset-generation-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .video-asset-generation-summary,
  .video-asset-generation-grid { grid-template-columns: 1fr; }
  .video-asset-generation-summary > time,
  .video-asset-generation-grid > :last-child { grid-column: auto; }
  .video-asset-generation-list,
  .video-asset-generation-shot-list,
  .video-asset-generation-assets { max-height: none; }
}

.mode-hub-workshop__planned {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  border: 1px solid var(--pipeline-border);
  border-radius: 5px;
  padding: 0 12px;
  color: var(--pipeline-faint);
  font-size: 0.74rem;
  font-weight: 700;
}

:root[data-theme='light'] .mode-hub-nav,
:root[data-theme='light'] .mode-hub-mode,
:root[data-theme='light'] .mode-hub-adaptations,
:root[data-theme='light'] .mode-hub-asset,
:root[data-theme='light'] .mode-hub-workshop {
  --pipeline-text: var(--text-primary);
  --pipeline-muted: var(--text-secondary);
  --pipeline-faint: var(--text-tertiary);
  background: rgb(249 251 253 / 78%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 16px 38px rgb(32 45 61 / 13%);
  text-shadow: none;
}

:root[data-theme='light'] .mode-hub-section {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  text-shadow: var(--production-studio-shadow);
}

@media (max-width: 1100px) {
  .mode-hub-nav {
    display: none;
  }

  .mode-hub-section {
    padding-right: max(24px, calc((100% - 960px) / 2 + 24px));
    padding-left: max(24px, calc((100% - 960px) / 2 + 24px));
  }
}

@media (min-width: 1200px) {
  .mode-hub-primary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .creative-mode-page.page {
    height: 100%;
  }

  .mode-hub-scroll {
    scroll-snap-type: y proximity;
  }

  .mode-hub-section {
    min-height: auto;
    align-items: flex-start;
    padding: 32px 24px 48px;
  }

  .mode-hub-section--narrative {
    min-height: calc(100dvh - 64px);
  }

  .mode-hub-primary-grid {
    grid-template-columns: 1fr;
  }

  .mode-hub-mode {
    min-height: 224px;
  }

  .mode-hub-adaptations,
  .mode-hub-visual-grid,
  .mode-hub-future-grid,
  .mode-hub-workshops-grid,
  .mode-hub-asset__body {
    grid-template-columns: 1fr;
  }

  .mode-hub-asset__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-hub-asset__submode-copy small {
    white-space: normal;
  }

  .mode-hub-asset {
    min-height: 0;
  }

  .mode-hub-workshop {
    min-height: 430px;
  }
}

@media (max-width: 640px) {
  .creative-mode-page .hub-brandbar {
    flex-basis: 58px;
  }

  .mode-hub-section {
    padding: 24px 16px 40px;
  }

  .mode-hub-section--narrative {
    min-height: calc(100dvh - 58px);
  }

  .mode-hub-intro,
  .mode-hub-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .mode-hub-intro h1,
  .mode-hub-section-heading h2 {
    font-size: 1.8rem;
  }

  .mode-hub-intro > p,
  .mode-hub-section-heading > p {
    font-size: 0.82rem;
    text-align: left;
  }

  .mode-hub-section__bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .mode-hub-mode {
    min-height: 216px;
    padding: 16px;
  }

  .mode-hub-adaptations {
    gap: 12px;
    padding: 14px;
  }

  .mode-hub-adaptations nav {
    grid-template-columns: 1fr;
  }

  .mode-hub-workshop {
    min-height: 0;
    padding: 20px;
  }

  .mode-hub-asset {
    padding: 20px;
  }

  .mode-hub-asset__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .mode-hub-asset__body {
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .mode-hub-asset__highlights {
    grid-template-columns: 1fr;
  }

  .mode-hub-workshop__intro {
    margin-top: 22px;
  }

  .mode-hub-workshop__intro h2 {
    font-size: 1.4rem;
  }

  .mode-hub-workshop__footer {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 24px;
  }

  .mode-hub-workshop__footer .mode-hub-workshop__action,
  .mode-hub-workshop__action {
    width: 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mode-hub-nav,
  .mode-hub-mode,
  .mode-hub-adaptations,
  .mode-hub-workshop {
    background: var(--production-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.workspace-menu-button,
.workspace-drawer {
  display: none;
}

.overview {
  width: min(100%, 980px);
}

.overview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.overview__logline {
  max-width: 720px;
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.resume-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.resume-panel h2 {
  margin-bottom: var(--space-1);
  font-size: 1.125rem;
}

.resume-panel p {
  margin: 0;
  color: var(--text-secondary);
}

.resume-panel__label {
  color: var(--action-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.production-model-panel {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(260px, auto);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.production-model-panel > svg {
  width: 20px;
  height: 20px;
  color: var(--action-primary);
}

.production-model-panel h2 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.production-model-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.field small.field-success {
  display: block;
  margin-top: var(--space-2);
  color: var(--status-success);
  font-weight: 650;
}

.production-model-panel__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.production-model-panel__control select {
  min-width: 220px;
}

.production-model-panel > .save-notice,
.production-model-panel > .form-error {
  grid-column: 2 / -1;
  margin: 0;
}

.project-outline-panel {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.project-outline-panel > svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--status-success);
}

.project-outline-panel__summary h2 {
  margin: 3px 0 5px;
  font-size: 1rem;
}

.project-outline-panel__summary p {
  margin: 0;
  color: var(--text-secondary);
}

.project-outline-panel__form {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.llm-model-choice {
  display: grid;
  gap: var(--space-3);
}

.overview-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
}

.overview-facts > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-1) var(--space-2);
}

.overview-facts svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.overview-facts dt {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.overview-facts dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.project-history-page {
  width: min(100%, 1040px);
}

.project-history-page > header {
  margin-bottom: var(--space-8);
}

.project-history-page h1 {
  margin-bottom: var(--space-2);
  font-size: 1.75rem;
}

.project-history-page > header > p:last-child,
.project-history-empty p,
.project-document-library > header p,
.project-document-empty p,
.project-production-records > header p {
  color: var(--text-secondary);
}

.project-document-library {
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--space-6) 0;
}

.project-document-library > header,
.project-production-records > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-3);
}

.project-document-library > header h2,
.project-production-records > header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.project-document-library > header h2 span {
  margin-left: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
}

.project-document-library > header p,
.project-production-records > header p {
  margin: 0;
  font-size: 0.8125rem;
  text-align: right;
}

.project-document-tools {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.project-document-tools label {
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 650;
}

.project-document-tools select {
  width: 152px;
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background: var(--surface-panel);
  padding: 0 var(--space-3);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
}

.project-document-tools select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.project-document-clean-note {
  padding-bottom: 10px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}

.project-document-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-document-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 160px auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  border-top: 1px solid var(--border-default);
}

.project-document-copy {
  min-width: 0;
}

.project-document-copy strong,
.project-document-copy span {
  display: block;
  overflow-wrap: anywhere;
}

.project-document-copy span,
.project-document-list time {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.project-document-list time {
  margin: 0;
  text-align: right;
}

.project-document-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 var(--space-3);
  color: var(--action-primary);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}

.project-document-download:hover {
  border-color: var(--action-primary);
  background: var(--surface-hover);
}

.project-document-download:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.project-document-download svg {
  width: 17px;
  height: 17px;
}

.project-document-empty {
  padding: var(--space-6) 0 var(--space-2);
  border-top: 1px solid var(--border-default);
}

.project-document-empty h3,
.project-history-empty h3 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.project-document-empty p,
.project-history-empty p {
  margin: 0;
}

.project-production-records {
  margin-top: var(--space-8);
}

.project-history-empty {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.project-history-empty h2 {
  margin-bottom: var(--space-1);
  font-size: 1rem;
}

.project-history-groups {
  display: grid;
  gap: var(--space-8);
}

.project-history-groups h2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.project-history-groups h2 span {
  color: var(--text-secondary);
  font-weight: 400;
}

.project-history-groups ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-default);
  list-style: none;
}

.project-history-groups li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 160px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}

.project-history-groups li.project-dialogue-record {
  grid-template-columns: minmax(0, 1fr) auto 160px auto;
}

.project-dialogue-detail {
  color: var(--accent-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.project-dialogue-detail:hover {
  text-decoration: underline;
}

.project-history-groups li div,
.project-history-groups li span {
  min-width: 0;
}

.project-history-groups li div > span {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.project-history-groups time {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-align: right;
}

.dialog-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgb(24 32 32 / 42%);
}

.confirm-dialog {
  width: min(100%, 480px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  padding: var(--space-6);
  background: var(--surface-panel);
  box-shadow: var(--shadow-dialog);
}

.confirm-dialog > .field {
  margin-top: var(--space-5);
}

.confirm-dialog > .inline-error {
  margin-top: var(--space-3);
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (max-width: 760px) {
  .creation-basis-options,
  .outline-import-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .creation-basis-options label + label {
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }

  .project-outline-panel {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .project-outline-panel > .button,
  .project-outline-panel__form {
    grid-column: 1 / -1;
  }

  .project-outline-panel__form {
    grid-template-columns: minmax(0, 1fr);
  }
  .page {
    padding: var(--space-6) var(--space-4);
  }

  .page-header,
  .project-row,
  .overview__header,
  .resume-panel {
    align-items: stretch;
  }

  .page-header,
  .overview__header,
  .resume-panel {
    flex-direction: column;
  }

  .project-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .project-table {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .project-table__heading {
    display: none;
  }

  .project-list-page {
    display: block;
    overflow-y: auto;
  }

  .project-list-page .project-table {
    display: block;
    max-height: none;
  }

  .project-list-page .project-list {
    flex: none;
    overflow: visible;
  }

  .project-row > .status-label,
  .project-row > time,
  .project-row > .project-row__actions {
    grid-column: 2;
    justify-self: start;
  }

  .project-row__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .project-row__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .project-row__owner {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .project-pagination {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: var(--space-2);
  }

  .project-pagination__button {
    width: 40px;
    padding: 0;
    font-size: 0;
  }

  .project-pagination__button svg {
    width: 18px;
    height: 18px;
  }

  .hub-brandbar {
    margin-bottom: var(--space-8);
  }

  .hub-brandbar__actions {
    gap: var(--space-2);
  }

  .creative-mode-page .hub-brandbar__actions .button--quiet {
    width: 36px;
    padding: 0;
    font-size: 0;
  }

  .creative-mode-page .hub-brandbar__actions .button--quiet svg {
    width: 17px;
    height: 17px;
  }

  .hub-brandbar .product-brand__copy strong {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .hub-brandbar .product-brand__tagline,
  .hub-brandbar .account-summary > span {
    display: none;
  }

  .page--form .hub-brandbar .back-link,
  .project-create-page .hub-brandbar .back-link {
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0;
  }

  .creative-mode-page__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .creative-mode-page__header > p {
    text-align: left;
  }

  .creative-mode-grid {
    grid-template-columns: 1fr;
  }

  .creative-mode-card {
    grid-template-columns: 1fr;
  }

  .creative-mode-card__topline,
  .creative-mode-card__action {
    grid-column: auto;
  }

  .creative-mode-card__activity {
    border-top: 1px solid var(--border-default);
    border-left: 0;
    padding-top: var(--space-3);
    padding-left: 0;
  }

  .changelog-dialog {
    padding: var(--space-4);
  }

  .changelog-history li {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .storyboard-source-upload {
    grid-template-columns: 1fr;
  }

  .storyboard-source-upload > .field--wide {
    grid-column: auto;
  }

  .field--wide {
    grid-column: auto;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .workspace-topbar {
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    padding: 0 var(--space-3);
  }

  .workspace-brand {
    padding: 0 var(--space-2);
    border-right: 0;
  }

  .workspace-brand .product-brand__copy {
    display: grid;
  }

  .workspace-brand .product-brand__copy strong,
  .workspace-brand .product-brand__tagline {
    display: none;
  }

  .workspace-brand .product-brand__meta {
    font-size: 0.625rem;
  }

  .workspace-project {
    justify-content: flex-end;
    justify-items: end;
    padding: 0;
  }

  .workspace-project > span,
  .workspace-sidebar {
    display: none;
  }

  .workspace-project__title {
    justify-content: flex-end;
  }

  .workspace-live-status {
    display: none;
  }

  .workspace-actions {
    gap: 0;
    padding-right: 0;
  }

  .workspace-actions .theme-toggle {
    width: 36px;
    height: 36px;
    margin-right: var(--space-1);
  }

  .workspace-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
  }

  .workspace-menu-button svg {
    width: 18px;
    height: 18px;
  }

  .workspace-main {
    padding: var(--space-4);
  }

  .workspace-drawer {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    display: block;
    width: min(88vw, 320px);
    padding: var(--space-4);
    border-right: 1px solid var(--border-default);
    background: var(--surface-panel);
    box-shadow: var(--shadow-dialog);
  }

  .workspace-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .workspace-drawer__header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
  }

  .overview-facts {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .production-model-panel {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .production-model-panel__control,
  .production-model-panel > .save-notice,
  .production-model-panel > .form-error {
    grid-column: 1 / -1;
  }

  .production-model-panel__control {
    align-items: stretch;
    flex-direction: column;
  }

  .production-model-panel__control select,
  .production-model-panel__control .button {
    width: 100%;
  }

  .project-history-groups li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-history-groups li.project-dialogue-record {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-dialogue-record .project-dialogue-detail {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  .project-document-library > header,
  .project-production-records > header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .project-document-library > header p,
  .project-production-records > header p {
    text-align: left;
  }

  .project-document-tools {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .project-document-tools label,
  .project-document-tools select {
    width: 100%;
  }

  .project-document-clean-note {
    padding-bottom: 0;
    white-space: normal;
  }

  .project-document-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) 0;
  }

  .project-document-list time {
    text-align: left;
  }

  .project-document-download {
    grid-column: 2;
    grid-row: 2;
  }

  .project-history-groups time {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 1040px) {
  .creation-pipeline__track {
    display: block;
  }

  .creation-pipeline__unit {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pipeline-stage {
    min-height: 0;
  }

  .pipeline-connector {
    flex-direction: column;
    height: 3.25rem;
  }

  .pipeline-connector span {
    width: 1px;
    height: 100%;
  }

  .pipeline-connector svg {
    transform: rotate(90deg);
  }
}

@media (max-width: 760px) {
  .creative-mode-page {
    padding-top: var(--space-4);
    padding-bottom: var(--space-8);
  }

  .creative-mode-page .hub-brandbar {
    margin-bottom: 2.5rem;
  }

  .creative-mode-page__header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: 3rem;
  }

  .creative-mode-page__header > p {
    max-width: 34ch;
    text-align: left;
  }

  .creation-pipeline__heading,
  .production-workshops__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .creation-pipeline__heading > span {
    white-space: normal;
  }

  .pipeline-stage {
    padding: var(--space-5);
  }

  .pipeline-stage__copy p {
    max-width: none;
  }

  .pipeline-adaptations {
    grid-template-columns: 1fr;
  }

  .pipeline-adaptations nav {
    grid-template-columns: 1fr;
  }

  .pipeline-handoff {
    margin: 3rem auto;
  }

  .production-workshops__grid {
    grid-template-columns: 1fr;
  }

  .production-workshop {
    min-height: 16rem;
  }

  .production-workshop footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@keyframes pipeline-handoff-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  45% { transform: translateY(4px); opacity: 1; }
}

.pipeline-handoff svg {
  animation: pipeline-handoff-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@media (prefers-reduced-transparency: reduce) {
  .pipeline-stage,
  .production-workshop {
    background: var(--production-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pipeline-stage[data-mode="storyboard_creation"],
  .production-workshop--image,
  .production-workshop--voice {
    background: var(--production-featured);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pipeline-stage,
  .production-workshop {
    background: var(--production-panel);
  }
}

/* Creation hub hierarchy: full-width chrome, core modes, then expansion modes. */
.creative-mode-page.page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.creative-mode-page .hub-brandbar {
  position: sticky;
  z-index: 40;
  top: 0;
  width: 100%;
  min-height: 64px;
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 10px max(var(--space-6), calc((100% - 1240px) / 2 + var(--space-6)));
  background: var(--production-glass-panel);
  box-shadow: 0 12px 34px rgb(5 8 12 / 22%);
}

/* Semantic surface tokens keep the creation hub readable in every tone. */
.creative-mode-page .hub-brandbar,
.creative-mode-page .mode-hub-nav,
.creative-mode-page .mode-hub-section,
.creative-mode-page .mode-hub-mode,
.creative-mode-page .mode-hub-adaptations,
.creative-mode-page .mode-hub-asset,
.creative-mode-page .mode-hub-workshop {
  --pipeline-text: var(--production-text);
  --pipeline-muted: var(--production-muted);
  --pipeline-faint: var(--production-faint);
  --pipeline-border: var(--production-border);
  --pipeline-border-strong: var(--production-border-strong);
  --pipeline-panel: var(--production-glass-panel);
  --pipeline-panel-strong: var(--production-glass-strong);
  --pipeline-accent: var(--production-accent);
  --pipeline-accent-soft: var(--production-accent-soft);
}

.creative-mode-page .mode-hub-nav {
  background: var(--production-glass-panel);
  box-shadow: 0 14px 34px var(--production-shadow);
}

.creative-mode-page .mode-hub-workshop {
  background: var(--production-glass-panel);
}

.creative-mode-page .mode-hub-workshop--image {
  --workshop-accent: var(--pipeline-accent);
  background: color-mix(in srgb, var(--production-glass-panel) 88%, var(--pipeline-accent-soft));
}

.creative-mode-page .mode-hub-workshop--image .mode-hub-workshop__icon {
  border-color: color-mix(in srgb, var(--pipeline-accent) 48%, var(--pipeline-border));
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

/* Keep every creation card on the same neutral workshop surface in dark mode. */
:root[data-theme='dark'] .creative-mode-page {
  --mode-hub-card-surface: var(--production-glass-panel);
  --mode-hub-card-border: var(--production-border);
  --mode-hub-card-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 18px 42px rgb(5 8 12 / 18%);
}

:root[data-theme='dark'] .creative-mode-page .mode-hub-mode,
:root[data-theme='dark'] .creative-mode-page .mode-hub-adaptations,
:root[data-theme='dark'] .creative-mode-page .mode-hub-asset,
:root[data-theme='dark'] .creative-mode-page .mode-hub-workshop {
  border-color: var(--mode-hub-card-border);
  background: var(--mode-hub-card-surface);
  box-shadow: var(--mode-hub-card-shadow);
}

:root[data-theme='dark'] .creative-mode-page .mode-hub-mode:hover {
  background: var(--mode-hub-card-surface);
}

:root[data-theme='light'] .creative-mode-page .hub-brandbar,
:root[data-theme='light'] .creative-mode-page .mode-hub-nav,
:root[data-theme='light'] .creative-mode-page .mode-hub-section,
:root[data-theme='light'] .creative-mode-page .mode-hub-mode,
:root[data-theme='light'] .creative-mode-page .mode-hub-adaptations,
:root[data-theme='light'] .creative-mode-page .mode-hub-asset,
:root[data-theme='light'] .creative-mode-page .mode-hub-workshop {
  --pipeline-text: var(--text-primary);
  --pipeline-muted: var(--text-secondary);
  --pipeline-faint: var(--text-tertiary);
  --pipeline-border: var(--border-default);
  --pipeline-border-strong: var(--border-strong);
  --pipeline-panel: var(--production-glass-panel);
  --pipeline-panel-strong: var(--production-glass-strong);
  --pipeline-accent: var(--accent-primary);
  --pipeline-accent-soft: var(--production-accent-soft);
  text-shadow: none;
}

:root[data-theme='light'] .creative-mode-page .mode-hub-workshop--image {
  --workshop-accent: var(--pipeline-accent);
  background: color-mix(in srgb, var(--production-glass-panel) 88%, var(--pipeline-accent-soft));
}

/* Section headings sit directly on cinematic media and need an inverse palette in light mode. */
:root[data-theme='light'] .creative-mode-page .mode-hub-section {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  text-shadow: var(--production-studio-shadow);
}

:root[data-theme='light'] .creative-mode-page .mode-hub-intro > p,
:root[data-theme='light'] .creative-mode-page .mode-hub-section-heading > p {
  color: var(--pipeline-muted);
  background: rgb(12 17 23 / 82%);
  box-shadow: 0 10px 28px rgb(5 8 12 / 24%);
}

:root[data-theme='light'] .creative-mode-page .mode-hub-adaptations a {
  color: var(--pipeline-text);
  background: color-mix(in srgb, var(--surface-panel) 84%, var(--surface-subtle));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}

:root[data-theme='light'] .creative-mode-page .mode-hub-adaptations a:hover {
  color: var(--pipeline-accent);
  background: var(--surface-hover);
}

.creative-mode-page__body {
  width: min(calc(100% - (var(--space-6) * 2)), 1240px);
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-8);
}

.creative-mode-page__header {
  align-items: center;
  margin-bottom: var(--space-8);
  border: 0;
  border-bottom: 1px solid var(--production-studio-border);
  border-radius: 0;
  padding: var(--space-4) 0 var(--space-6);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.creative-mode-page__header h1 {
  font-size: clamp(1.85rem, 3vw, 2.65rem);
}

.creation-pipeline__track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-4);
}

.pipeline-stage {
  min-height: 21.5rem;
}

.pipeline-adaptations {
  margin-top: var(--space-4);
}

.asset-entry {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(9rem, auto) minmax(11rem, auto);
  gap: var(--space-5);
  align-items: center;
  min-width: 0;
  margin-top: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 44%, var(--pipeline-border));
  border-radius: 8px;
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--production-glass-featured);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.asset-entry__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 52%, var(--pipeline-border));
  border-radius: 7px;
  color: var(--pipeline-accent);
  background: var(--pipeline-accent-soft);
}

.asset-entry__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.asset-entry__copy {
  min-width: 0;
}

.asset-entry__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--pipeline-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.asset-entry__copy h2 {
  margin: 0;
  color: var(--pipeline-text);
  font-size: 1.2rem;
}

.asset-entry__copy p,
.asset-entry__copy > span:last-child {
  margin: 3px 0 0;
  color: var(--pipeline-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.asset-entry__copy > span:last-child {
  display: block;
  max-width: 68ch;
  color: var(--pipeline-faint);
}

.asset-entry__meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 1px solid var(--pipeline-border);
  padding-left: var(--space-4);
}

.asset-entry__meta span {
  color: var(--pipeline-faint);
  font-size: 0.7rem;
}

.asset-entry__meta strong {
  overflow: hidden;
  color: var(--pipeline-text);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-entry__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  border-radius: 6px;
  padding: 0 var(--space-4);
  color: var(--production-accent-ink);
  background: var(--pipeline-accent);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms ease;
}

.asset-entry__action:hover {
  color: var(--production-accent-ink);
  background: var(--production-accent-hover);
  transform: translateX(2px);
}

.asset-entry__action svg {
  width: 17px;
  height: 17px;
}

.image-platform-entry {
  --image-platform-accent: var(--status-info);
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid color-mix(in srgb, var(--image-platform-accent) 48%, var(--pipeline-border));
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--pipeline-panel) 86%, var(--status-info-bg));
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 18px 42px rgb(5 8 12 / 16%);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.image-platform-entry > header,
.image-platform-entry > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.image-platform-entry__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.image-platform-entry__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--image-platform-accent) 54%, var(--pipeline-border));
  border-radius: 7px;
  color: var(--image-platform-accent);
  background: color-mix(in srgb, var(--status-info-bg) 78%, transparent);
}

.image-platform-entry__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.image-platform-entry__identity span {
  display: block;
  margin-bottom: 2px;
  color: var(--image-platform-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.image-platform-entry__identity h2 {
  margin: 0;
  color: var(--pipeline-text);
  font-size: 1.28rem;
}

.image-platform-entry__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--image-platform-accent);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.image-platform-entry__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--image-platform-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--image-platform-accent) 18%, transparent);
}

.image-platform-entry__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  margin: var(--space-5) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--pipeline-border);
  border-bottom: 1px solid var(--pipeline-border);
}

.image-platform-entry__body p {
  max-width: 68ch;
  margin: 0 0 var(--space-2);
  color: var(--pipeline-text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.image-platform-entry__body strong {
  color: var(--pipeline-faint);
  font-size: 0.76rem;
  font-weight: 550;
}

.image-platform-entry__body ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-platform-entry__body li {
  display: grid;
  min-height: 3.5rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--image-platform-accent) 30%, var(--pipeline-border));
  border-radius: 6px;
  padding: var(--space-2);
  color: var(--pipeline-muted);
  background: color-mix(in srgb, var(--pipeline-panel-strong) 62%, transparent);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
}

.image-platform-entry > footer > span {
  color: var(--pipeline-faint);
  font-size: 0.72rem;
}

.image-platform-entry__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--image-platform-accent) 58%, var(--pipeline-border));
  border-radius: 6px;
  padding: 0 var(--space-4);
  color: var(--pipeline-text);
  background: color-mix(in srgb, var(--status-info-bg) 72%, transparent);
  font-size: 0.78rem;
  font-weight: 750;
}

.image-platform-entry__action:hover {
  border-color: var(--image-platform-accent);
  color: var(--image-platform-accent);
  background: var(--status-info-bg);
}

.image-platform-entry__action svg {
  width: 16px;
  height: 16px;
}

.image-platform-entry > .production-workshop__error {
  margin: var(--space-4) 0 0;
}

.creative-expansion {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.creative-expansion__heading {
  --pipeline-text: var(--production-studio-text);
  --pipeline-muted: var(--production-studio-muted);
  --pipeline-faint: var(--production-studio-faint);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--pipeline-text);
  text-shadow: var(--production-studio-shadow);
}

.creative-expansion__heading > div {
  min-width: 0;
}

.creative-expansion__heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--pipeline-accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.creative-expansion__heading h2 {
  margin: 0;
  color: var(--pipeline-text);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.creative-expansion__heading > p {
  max-width: 48rem;
  margin: 0;
  color: var(--pipeline-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: right;
}

.creative-expansion__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pipeline-accent) 48%, var(--pipeline-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pipeline-panel-strong) 84%, var(--pipeline-accent-soft));
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 20px 44px rgb(5 8 12 / 18%);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}

.creative-expansion__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--pipeline-border);
}

.creative-expansion__signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--pipeline-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.creative-expansion__signal i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pipeline-accent);
  box-shadow: 0 0 0 3px var(--pipeline-accent-soft);
}

.creative-expansion__intro > strong {
  max-width: 52rem;
  color: var(--pipeline-muted);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.5;
  text-align: right;
}

.creative-expansion__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creative-expansion__feature {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  min-height: 18rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

.creative-expansion__feature + .creative-expansion__feature {
  border-left: 1px solid var(--pipeline-border);
}

.creative-expansion__feature > svg {
  width: 2rem;
  height: 2rem;
  color: var(--pipeline-accent);
}

.creative-expansion__feature h3 {
  margin: 0 0 var(--space-2);
  color: var(--pipeline-text);
  font-size: 1.25rem;
}

.creative-expansion__feature p {
  max-width: 48ch;
  margin: 0;
  color: var(--pipeline-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.creative-expansion__feature ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.creative-expansion__feature li {
  position: relative;
  padding-left: var(--space-4);
  color: var(--pipeline-faint);
  font-size: 0.76rem;
  line-height: 1.45;
}

.creative-expansion__feature li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: '';
  background: var(--pipeline-accent);
}

.creative-expansion__action,
.creative-expansion__planned {
  grid-column: 2;
  align-self: end;
  justify-self: start;
  margin-top: var(--space-5);
}

.creative-expansion__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  border-color: color-mix(in srgb, var(--pipeline-accent) 56%, var(--pipeline-border));
  border-radius: 6px;
  padding: 0 var(--space-4);
  color: var(--pipeline-text);
  background: var(--pipeline-accent-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.creative-expansion__action:hover {
  border-color: var(--pipeline-accent);
  color: var(--pipeline-accent);
  background: color-mix(in srgb, var(--pipeline-accent-soft) 74%, var(--pipeline-panel));
}

.creative-expansion__action svg {
  width: 16px;
  height: 16px;
}

.creative-expansion__planned {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--pipeline-border);
  border-radius: 4px;
  padding: 4px var(--space-3);
  color: var(--pipeline-faint);
  font-size: 0.72rem;
  font-weight: 650;
}

.creative-expansion__panel > .production-workshop__error {
  margin: 0 var(--space-6) var(--space-5);
}

:root[data-theme="light"] .creative-mode-page .hub-brandbar {
  --pipeline-text: var(--text-primary);
  --pipeline-muted: var(--text-secondary);
  --pipeline-faint: var(--text-tertiary);
  background: rgb(249 251 253 / 88%);
  text-shadow: none;
}

:root[data-theme="light"] .creative-mode-page .asset-entry,
:root[data-theme="light"] .creative-mode-page .image-platform-entry,
:root[data-theme="light"] .creative-mode-page .creative-expansion__panel {
  background: color-mix(in srgb, var(--surface-panel) 78%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 18px 44px rgb(32 45 61 / 13%);
}

@media (max-width: 1040px) {
  .asset-entry {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(11rem, auto);
  }

  .asset-entry__meta {
    display: none;
  }

  .creative-expansion__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .creative-expansion__heading > p {
    max-width: 68ch;
    text-align: left;
  }

  .image-platform-entry__body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 760px) {
  .creative-mode-page.page {
    padding: 0;
  }

  .creative-mode-page .hub-brandbar {
    min-height: 58px;
    margin: 0;
    padding: 8px var(--space-4);
  }

  .creative-mode-page__body {
    width: calc(100% - (var(--space-4) * 2));
    padding-top: var(--space-4);
  }

  .creative-mode-page__header {
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-top: var(--space-3);
  }

  .pipeline-adaptations {
    margin-top: var(--space-3);
  }

  .asset-entry {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  .asset-entry__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .asset-entry__action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .creative-expansion {
    margin-top: var(--space-8);
  }

  .image-platform-entry {
    margin-top: var(--space-8);
  }

  .image-platform-entry > header,
  .image-platform-entry > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-platform-entry__body ul {
    grid-template-columns: 1fr;
  }

  .image-platform-entry__body li {
    min-height: 40px;
    justify-items: start;
    text-align: left;
  }

  .image-platform-entry__action {
    width: 100%;
    justify-content: space-between;
  }

  .creative-expansion__intro {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .creative-expansion__intro > strong {
    text-align: left;
  }

  .creative-expansion__features {
    grid-template-columns: 1fr;
  }

  .creative-expansion__feature {
    min-height: 0;
  }

  .creative-expansion__feature + .creative-expansion__feature {
    border-top: 1px solid var(--pipeline-border);
    border-left: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .asset-entry,
  .image-platform-entry,
  .creative-expansion__panel {
    background: var(--production-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Video asset creation mirrors the asset workspace: one compact project bar,
   one production toolbar, and a three-pane workbench that owns the remaining height. */
.video-asset-generation-surface {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-4) clamp(var(--space-3), 2.4vw, var(--space-6));
  overflow: hidden;
}

.video-asset-generation-page {
  --video-panel: var(--project-glass-panel, var(--surface-panel));
  --video-panel-strong: var(--project-glass-strong, var(--surface-subtle));
  --video-border: var(--production-border, var(--border-default));
  --video-text: var(--text-primary);
  --video-muted: var(--text-secondary);
  --video-faint: var(--text-tertiary);
  --video-accent: var(--action-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.video-asset-generation-topbar {
  display: grid;
  flex: 0 0 52px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-medium);
  padding: 7px var(--space-3);
  background: var(--video-panel);
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(124%);
  -webkit-backdrop-filter: blur(22px) saturate(124%);
}

.video-asset-generation-topbar__project {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--video-text);
  font-size: 0.8rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-asset-generation-topbar__project-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.video-asset-generation-topbar__project-id {
  flex: 0 1 auto;
  font-size: 0.68rem;
}

.video-asset-generation-topbar__project-id .project-id-badge__copy {
  width: 24px;
  height: 24px;
}

.video-asset-generation-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.video-asset-generation-toolbar {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-medium);
  padding: var(--space-3) var(--space-4);
  background: var(--video-panel);
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.video-asset-generation-toolbar__actions,
.video-asset-generation-toolbar__title,
.video-asset-generation-toolbar__title > div {
  min-width: 0;
}

.video-asset-generation-toolbar__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.video-asset-generation-toolbar__title > svg {
  flex: 0 0 auto;
  width: 25px;
  color: var(--video-accent);
}

.video-asset-generation-toolbar__title h1,
.video-asset-generation-toolbar__title p {
  margin: 0;
}

.video-asset-generation-toolbar__title h1 {
  color: var(--video-text);
  font-size: 1.15rem;
  line-height: 1.25;
}

.video-asset-generation-toolbar__title p,
.video-asset-generation-toolbar__updated {
  color: var(--video-muted);
  font-size: 0.74rem;
}

.video-asset-generation-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.video-asset-generation-toolbar__updated {
  white-space: nowrap;
}

.video-asset-generation-summary {
  display: flex;
  align-items: stretch;
  border-inline: 1px solid var(--video-border);
}

.video-asset-generation-summary > span {
  display: grid;
  min-width: 64px;
  padding: 3px var(--space-3);
  color: var(--video-faint);
  font-size: 0.68rem;
}

.video-asset-generation-summary > span + span {
  border-left: 1px solid var(--video-border);
}

.video-asset-generation-summary > span strong {
  color: var(--video-text);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.video-asset-generation-summary__active[data-active='true'],
.video-asset-generation-summary__active[data-active='true'] strong {
  color: var(--status-info);
}

.video-asset-generation-mobile-tabs {
  display: none;
  flex: 0 0 auto;
}

.video-asset-generation-workbench {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(232px, 0.75fr) minmax(420px, 1.8fr) minmax(310px, 0.95fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-medium);
  background: var(--video-panel);
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.video-asset-generation-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--video-panel) 90%, transparent);
}

.video-asset-generation-panel + .video-asset-generation-panel {
  border-left: 1px solid var(--video-border);
}

.video-asset-generation-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-4);
  border-bottom: 1px solid var(--video-border);
  background: color-mix(in srgb, var(--video-panel-strong) 70%, transparent);
}

.video-asset-generation-panel h2,
.video-asset-generation-panel h3,
.video-asset-generation-panel p {
  margin: 0;
}

.video-asset-generation-panel h2 {
  color: var(--video-text);
  font-size: 0.92rem;
  line-height: 1.35;
}

.video-asset-generation-panel p {
  margin-top: 3px;
  color: var(--video-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.video-asset-generation-panel__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--video-accent);
  font-size: 0.65rem;
  font-weight: 750;
}

.video-asset-generation-panel__count {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--video-accent) 40%, var(--video-border));
  border-radius: var(--radius-small);
  color: var(--video-accent);
  background: color-mix(in srgb, var(--video-accent) 10%, transparent);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.video-asset-generation-list,
.video-asset-generation-assets {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.video-asset-generation-list {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-3);
}

.video-asset-generation-episode {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.video-asset-generation-episode__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: 10px var(--space-3);
  border: 1px solid color-mix(in srgb, var(--video-accent) 34%, var(--video-border));
  border-radius: var(--radius-small);
  color: var(--video-text);
  background: color-mix(in srgb, var(--video-accent) 10%, var(--video-panel-strong));
  text-align: left;
}

.video-asset-generation-episode__heading:hover {
  border-color: color-mix(in srgb, var(--video-accent) 62%, var(--video-border));
  background: color-mix(in srgb, var(--video-accent) 15%, var(--video-panel-strong));
}

.video-asset-generation-episode__heading strong {
  min-width: 0;
  font-size: 0.88rem;
}

.video-asset-generation-episode__heading small,
.video-asset-generation-episode__heading span {
  color: var(--video-muted);
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
}

.video-asset-generation-segment {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: calc(100% - var(--space-3));
  margin-inline-start: var(--space-3);
  padding: 9px 10px;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  color: var(--video-muted);
  background: color-mix(in srgb, var(--video-panel-strong) 54%, transparent);
  text-align: left;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.video-asset-generation-segment:hover,
.video-asset-generation-segment[data-active='true'] {
  border-color: var(--video-accent);
  color: var(--video-text);
  background: color-mix(in srgb, var(--video-accent) 11%, var(--video-panel));
}

.video-asset-generation-segment:hover {
  transform: translateX(2px);
}

.video-asset-generation-segment span,
.video-asset-generation-segment small {
  color: var(--video-faint);
  font-size: 0.66rem;
}

.video-asset-generation-segment .video-asset-generation-segment__name {
  overflow: hidden;
  color: inherit;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-asset-generation-segment .video-asset-generation-segment__scene {
  overflow: hidden;
  color: var(--video-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-asset-generation-panel--main {
  background: color-mix(in srgb, var(--video-panel-strong) 28%, var(--video-panel));
}

.video-asset-generation-panel--main > header {
  flex: 0 0 auto;
}

.video-asset-generation-main-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  scrollbar-gutter: stable;
}

.video-asset-generation-preview {
  position: relative;
  display: grid;
  width: min(100%, 720px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-height: 220px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
}

.video-asset-generation-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #090b0d;
}

.video-asset-generation-preview__expand {
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  min-height: 32px;
  border-color: rgb(255 255 255 / 26%);
  color: #fff;
  background: rgb(5 8 10 / 62%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.video-asset-generation-preview__empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 0;
  height: 100%;
  padding: var(--space-8);
  color: var(--video-muted);
  text-align: center;
}

.video-asset-generation-preview__empty strong {
  color: var(--video-text);
  font-size: 0.9rem;
}

.video-asset-generation-preview__empty p {
  max-width: 42ch;
  margin: 0;
  color: var(--video-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.video-asset-generation-preview__error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: var(--space-3);
  min-height: 0;
  height: 100%;
  padding: clamp(18px, 4vw, 36px);
  color: var(--video-muted);
  background: color-mix(in srgb, var(--status-danger) 9%, var(--surface-muted));
}

.video-asset-generation-preview__error > svg { width: 22px; color: var(--status-danger); }
.video-asset-generation-preview__error strong { color: var(--video-text); font-size: .86rem; }
.video-asset-generation-preview__error p { margin: 6px 0 0; color: var(--video-text); font-size: .74rem; line-height: 1.6; }
.video-asset-generation-preview__error span { display: block; margin-top: 6px; color: var(--video-muted); font-size: .66rem; line-height: 1.5; }
.video-asset-generation-preview__error dl { display: grid; gap: 4px; margin: 12px 0 0; font-size: .62rem; }
.video-asset-generation-preview__error dl div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
.video-asset-generation-preview__error dt { color: var(--video-faint); }
.video-asset-generation-preview__error dd { margin: 0; overflow-wrap: anywhere; color: var(--video-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.video-asset-generation-preview__submitting { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 0; height: 100%; padding: 28px; color: var(--video-muted); background: color-mix(in srgb, var(--video-accent) 7%, var(--surface-muted)); text-align: left; }
.video-asset-generation-preview__submitting > svg { width: 22px; color: var(--video-accent); animation: video-asset-status-pulse 1.25s ease-in-out infinite; }
.video-asset-generation-preview__submitting strong { display: block; color: var(--video-text); font-size: .82rem; }
.video-asset-generation-preview__submitting p { margin: 5px 0 0; color: var(--video-muted); font-size: .68rem; }
.video-asset-generation-submission-progress { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--video-accent) 28%, var(--video-border)); border-radius: 8px; background: color-mix(in srgb, var(--video-accent) 6%, var(--surface)); color: var(--video-muted); }
.video-asset-generation-submission-progress__header { display: flex; align-items: flex-start; gap: 9px; }
.video-asset-generation-submission-progress__header > svg { width: 17px; flex: 0 0 auto; color: var(--video-accent); animation: video-asset-status-pulse 1.25s ease-in-out infinite; }
.video-asset-generation-submission-progress__header strong { display: block; color: var(--video-text); font-size: .8rem; }
.video-asset-generation-submission-progress__header p { margin: 3px 0 0; font-size: .68rem; line-height: 1.5; }
.video-asset-generation-submission-progress ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.video-asset-generation-submission-progress li { min-width: 0; padding: 6px 8px; border: 1px solid var(--video-border); border-radius: 6px; color: var(--video-faint); font-size: .64rem; text-align: center; }
.video-asset-generation-submission-progress li[data-current='true'] { border-color: color-mix(in srgb, var(--video-accent) 55%, var(--video-border)); color: var(--video-accent); background: color-mix(in srgb, var(--video-accent) 8%, var(--surface)); }
.video-asset-generation-submission-progress li[data-complete='true'] { color: var(--status-success); }
.video-asset-generation-submission-progress__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.video-asset-generation-submission-progress__actions .button { min-height: 30px; font-size: .68rem; }
.video-asset-generation-submission-progress__actions svg { width: 14px; }
.video-asset-generation-submission-progress small { color: var(--video-faint); font-size: .62rem; line-height: 1.45; overflow-wrap: anywhere; }

.video-asset-generation-preview__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--video-accent) 44%, var(--video-border));
  border-radius: 50%;
  color: var(--video-accent);
  background: color-mix(in srgb, var(--video-accent) 12%, transparent);
}

.video-asset-generation-preview__icon svg {
  width: 19px;
  fill: currentColor;
}

.video-asset-generation-preview__meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 5px var(--space-2) 5px var(--space-3);
  color: var(--video-muted);
  background: rgb(8 11 14 / 70%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.video-asset-generation-preview__meta > span {
  color: var(--status-success);
  font-size: 0.68rem;
  font-weight: 750;
}

.video-asset-generation-preview__meta small {
  font-size: 0.66rem;
}

.video-asset-generation-preview__meta .icon-button {
  margin-left: auto;
  width: 28px;
  min-height: 28px;
  border-color: rgb(255 255 255 / 24%);
  color: #fff;
  background: rgb(0 0 0 / 24%);
}

.video-asset-generation-history {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: min(220px, calc(100% - 24px));
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-small);
  color: #fff;
  background: rgb(8 11 14 / 78%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.video-asset-generation-history__heading,
.video-asset-generation-history__item,
.video-asset-generation-history__item > button:first-child {
  display: flex;
  align-items: center;
}

.video-asset-generation-history__heading {
  justify-content: space-between;
  margin-bottom: 5px;
  color: rgb(255 255 255 / 72%);
  font-size: 0.78rem;
  font-weight: 700;
}

.video-asset-generation-history__list {
  display: grid;
  gap: 3px;
  max-height: 168px;
  overflow-y: auto;
}

.video-asset-generation-history__item {
  gap: 4px;
  border-radius: 4px;
}

.video-asset-generation-history__item[data-active='true'] {
  background: rgb(255 255 255 / 12%);
}

.video-asset-generation-history__item > button:first-child {
  flex: 1 1 auto;
  justify-content: space-between;
  min-width: 0;
  min-height: 22px;
  padding: 3px 5px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  line-height: 1.25;
  text-align: left;
}

.video-asset-generation-history__item > button:first-child small {
  color: rgb(255 255 255 / 58%);
  font-size: 0.62rem;
}

.video-asset-generation-history__item .icon-button {
  width: 22px;
  min-height: 22px;
  padding: 3px;
  border-color: rgb(255 255 255 / 15%);
  color: rgb(255 255 255 / 72%);
  background: transparent;
}

.video-asset-generation-history__item .icon-button svg {
  width: 12px;
  height: 12px;
}

.video-asset-generation-enhancement {
  display: grid;
  gap: 4px;
  min-width: min(320px, 100%);
}

.video-asset-generation-enhancement > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--video-text);
  white-space: nowrap;
}

.video-asset-generation-enhancement input {
  width: 16px;
  height: 16px;
  accent-color: var(--video-accent);
}

.video-asset-generation-enhancement select {
  width: 120px;
  min-height: 30px;
  font-size: 0.68rem;
}

.video-asset-generation-enhancement small {
  color: var(--video-faint);
  font-size: 0.64rem;
}

.video-asset-generation-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.video-asset-generation-section-heading > svg {
  width: 17px;
  color: var(--video-accent);
}

.video-asset-generation-whole-project {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  color: var(--video-text);
  background: var(--production-glass-field, var(--surface-panel));
  white-space: nowrap;
}

.video-asset-generation-whole-project input {
  width: 15px;
  height: 15px;
  accent-color: var(--video-accent);
}

.video-asset-generation-whole-project span {
  color: inherit !important;
  font-size: 0.68rem !important;
}

.video-asset-generation-section-heading h3 {
  color: var(--video-text);
  font-size: 0.82rem;
}

.video-asset-generation-config,
.video-asset-generation-prompt-block,
.video-asset-generation-shot-list {
  margin-top: var(--space-4);
  border-top: 1px solid var(--video-border);
  padding-top: var(--space-4);
}

.video-asset-generation-config__summary {
  color: var(--video-text) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.video-asset-generation-config__heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.video-asset-generation-config__heading-actions > .button--primary {
  min-height: 32px;
  padding-inline: var(--space-3);
  font-size: 0.68rem;
  white-space: nowrap;
}

.video-asset-generation-config__rate {
  color: var(--video-accent);
  font-size: 0.66rem;
  font-weight: 750;
  white-space: nowrap;
}

.video-asset-generation-config__toggle {
  min-height: 30px;
  padding-inline: var(--space-2);
  font-size: 0.66rem;
  white-space: nowrap;
}

.video-asset-generation-config__toggle svg {
  width: 14px;
}

.video-asset-generation-config__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.video-asset-generation-config label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.video-asset-generation-config label > span {
  color: var(--video-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.video-asset-generation-config select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  padding: 0 var(--space-2);
  color: var(--video-text);
  background: var(--production-glass-field, var(--surface-panel));
  font: inherit;
  font-size: 0.72rem;
}

.video-asset-generation-config__switch {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.video-asset-generation-config__switch > span {
  grid-column: 1 / -1;
}

.video-asset-generation-config__switch input {
  width: 35px;
  height: 20px;
  accent-color: var(--video-accent);
}

.video-asset-generation-config__switch strong {
  color: var(--video-accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.video-asset-generation-config__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--video-faint);
  font-size: 0.68rem;
}

.video-asset-generation-config__footer .button {
  min-height: 30px;
  padding-inline: var(--space-3);
  font-size: 0.68rem;
}

.video-asset-generation-prompt-block pre {
  max-height: 220px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--video-text);
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.65;
}

.video-asset-generation-shot-list {
  display: grid;
  gap: var(--space-2);
}

.video-asset-generation-shot-list > .video-asset-generation-section-heading {
  margin-bottom: 0;
}

.video-asset-generation-shot-list article {
  padding: var(--space-3);
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--video-panel-strong) 55%, transparent);
}

.video-asset-generation-shot-list article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.video-asset-generation-shot-list article span,
.video-asset-generation-shot-list article small {
  color: var(--video-faint);
  font-size: 0.66rem;
}

.video-asset-generation-shot-list article strong {
  color: var(--video-text);
  font-size: 0.72rem;
}

.video-asset-generation-shot-list article p {
  margin-top: 6px;
  color: var(--video-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.video-asset-generation-shot-list article small {
  display: block;
  margin-top: var(--space-2);
}

.video-asset-generation-assets {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-3);
}

.video-asset-generation-asset-group {
  display: grid;
  gap: var(--space-2);
}

.video-asset-generation-asset-group h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--video-muted);
  font-size: 0.7rem;
}

.video-asset-generation-asset-group h3 svg {
  width: 14px;
  color: var(--video-accent);
}

.video-asset-generation-asset-group h3 span {
  margin-left: auto;
  color: var(--video-faint);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
}

.video-asset-generation-asset {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--video-panel-strong) 62%, transparent);
}

.video-asset-generation-asset[data-muted='true'] {
  opacity: 0.68;
}

.video-asset-generation-asset__media {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  color: var(--video-accent);
  background: var(--surface-muted);
}

.video-asset-generation-asset__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-asset-generation-asset__media svg {
  width: 20px;
}

.video-asset-generation-asset__body {
  min-width: 0;
}

.video-asset-generation-asset__body strong,
.video-asset-generation-asset__body small,
.video-asset-generation-asset__body p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-asset-generation-asset__body strong {
  color: var(--video-text);
  font-size: 0.76rem;
  white-space: nowrap;
}

.video-asset-generation-asset__body small {
  margin-top: 2px;
  color: var(--video-faint);
  font-size: 0.64rem;
  white-space: nowrap;
}

.video-asset-generation-asset__body p {
  margin-top: 5px;
  color: var(--video-muted);
  font-size: 0.68rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video-asset-generation-asset__body audio {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: var(--space-2);
}

.video-asset-generation-asset__unavailable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  color: var(--video-faint);
  font-size: 0.64rem;
}

.video-asset-generation-asset__unavailable svg,
.video-asset-generation-asset__status svg {
  width: 12px;
}

.video-asset-generation-asset__status {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--video-faint);
  font-size: 0.58rem;
}

.video-asset-generation-asset__status[data-called='true'] {
  color: var(--video-accent);
}

.video-asset-generation-asset__status[data-pending='true'] {
  color: var(--status-warning);
}

.video-asset-generation-asset__status svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.video-asset-generation-asset[data-muted='true'] .video-asset-generation-asset__status {
  color: var(--video-faint);
}

.video-asset-generation-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 170px;
  padding: var(--space-4);
  color: var(--video-muted);
  text-align: center;
  font-size: 0.72rem;
}

.video-asset-generation-empty svg {
  width: 22px;
  color: var(--video-faint);
}

.video-asset-generation-empty strong {
  color: var(--video-text);
  font-size: 0.82rem;
}

.video-asset-generation-empty--large {
  min-height: 420px;
}

@media (max-width: 1180px) {
  .video-asset-generation-workbench {
    grid-template-columns: minmax(220px, 0.75fr) minmax(380px, 1.55fr);
  }

  .video-asset-generation-panel--assets {
    grid-column: 1 / -1;
    min-height: 290px;
    border-top: 1px solid var(--video-border);
    border-left: 0;
  }

  .video-asset-generation-assets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-asset-generation-asset-group {
    align-content: start;
  }
}

@media (max-width: 900px) {
  .video-asset-generation-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .video-asset-generation-toolbar__actions {
    display: none;
  }

  .video-asset-generation-config__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .video-asset-generation-surface {
    padding: var(--space-3);
  }

  .video-asset-generation-page {
    gap: var(--space-2);
  }

  .video-asset-generation-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
  }

  .video-asset-generation-topbar__project-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .video-asset-generation-topbar__actions .product-brand {
    display: none;
  }

  .video-asset-generation-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 60px;
    padding: var(--space-2) var(--space-3);
  }

  .video-asset-generation-toolbar__title > svg,
  .video-asset-generation-toolbar__title p {
    display: none;
  }

  .video-asset-generation-toolbar__title h1 {
    font-size: 1rem;
  }

  .video-asset-generation-summary {
    display: block;
    border: 0;
  }

  .video-asset-generation-summary > span {
    display: none;
  }

  .video-asset-generation-summary > .video-asset-generation-summary__active {
    display: grid;
    min-width: 52px;
    padding: 0 var(--space-1);
    text-align: center;
  }

  .video-asset-generation-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid var(--video-border);
    border-radius: var(--radius-small);
    background: var(--video-panel);
  }

  .video-asset-generation-mobile-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 0;
    color: var(--video-muted);
    background: transparent;
    font-size: 0.72rem;
  }

  .video-asset-generation-mobile-tabs button + button {
    border-left: 1px solid var(--video-border);
  }

  .video-asset-generation-mobile-tabs button[aria-selected='true'] {
    color: var(--video-text);
    background: var(--surface-hover);
    box-shadow: inset 0 -2px 0 var(--video-accent);
  }

  .video-asset-generation-workbench {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .video-asset-generation-panel {
    display: none;
    min-height: 620px;
    border: 0;
  }

  .video-asset-generation-panel.is-mobile-visible {
    display: flex;
  }

  .video-asset-generation-panel--assets {
    min-height: 620px;
  }

  .video-asset-generation-main-scroll {
    padding: var(--space-3);
  }

  .video-asset-generation-preview__empty {
    min-height: 210px;
    padding: var(--space-4);
  }

  .video-asset-generation-config__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .video-asset-generation-config__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-asset-generation-config__footer .button {
    width: 100%;
    justify-content: center;
  }

  .video-asset-generation-assets {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .video-asset-generation-topbar,
  .video-asset-generation-toolbar,
  .video-asset-generation-workbench,
  .video-asset-generation-panel > header,
  .video-asset-generation-summary {
    background: var(--production-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.video-asset-generation-live-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  color: var(--video-muted);
  background: color-mix(in srgb, var(--video-panel-strong) 68%, transparent);
  font-size: 0.7rem;
  white-space: nowrap;
}

.video-asset-generation-live-count svg {
  width: 14px;
}

.video-asset-generation-live-count[data-active='true'] {
  border-color: color-mix(in srgb, var(--video-accent) 52%, var(--video-border));
  color: var(--video-accent);
}

.video-asset-generation-live-count[data-active='true'] svg {
  animation: video-asset-spin 1.2s linear infinite;
}

.video-asset-generation-workbench {
  grid-template-columns: minmax(196px, 0.5fr) minmax(720px, 2.65fr) minmax(320px, 0.9fr);
  min-height: 0;
}

.video-asset-generation-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: var(--space-3) var(--space-3) 0;
  min-height: 36px;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  padding: 0 8px;
  color: var(--video-faint);
  background: var(--production-glass-field, var(--surface-panel));
}

.video-asset-generation-search > svg,
.video-asset-generation-search button svg {
  width: 14px;
}

.video-asset-generation-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--video-text);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
}

.video-asset-generation-search button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  color: var(--video-muted);
  background: transparent;
}

.video-asset-generation-list button {
  position: relative;
}

.video-asset-generation-list__activity {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.video-asset-generation-list__activity span {
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: var(--video-accent);
  animation: video-asset-signal 900ms ease-in-out infinite;
}

.video-asset-generation-list__activity span:nth-child(2) { animation-delay: 120ms; }
.video-asset-generation-list__activity span:nth-child(3) { animation-delay: 240ms; }

.video-asset-generation-list__notification {
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 16px);
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--video-accent) 48%, var(--video-border));
  border-radius: 999px;
  color: var(--video-accent);
  background: color-mix(in srgb, var(--video-accent) 12%, var(--video-panel-strong));
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
  font-size: .6rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
}

.video-asset-generation-list__notification svg { width: 12px; height: 12px; flex: 0 0 auto; }
.video-asset-generation-list__notification em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.video-asset-generation-list__notification[data-notification='failed'] { border-color: color-mix(in srgb, var(--status-danger) 52%, var(--video-border)); color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 12%, var(--video-panel-strong)); }
.video-asset-generation-list button[data-notification='completed'] { border-color: color-mix(in srgb, var(--video-accent) 48%, var(--video-border)); background: color-mix(in srgb, var(--video-accent) 7%, var(--video-panel)); }
.video-asset-generation-list button[data-notification='failed'] { border-color: color-mix(in srgb, var(--status-danger) 54%, var(--video-border)); background: color-mix(in srgb, var(--status-danger) 7%, var(--video-panel)); }

.video-asset-generation-section-heading > div > p {
  margin: 3px 0 0;
  color: var(--video-muted);
  font-size: 0.68rem;
}

.video-asset-generation-config input[type='number'],
.video-asset-generation-prompt-editor textarea {
  width: 100%;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  color: var(--video-text);
  background: var(--production-glass-field, var(--surface-panel));
  font: inherit;
}

.video-asset-generation-config input[type='number'] {
  min-height: 36px;
  padding: 0 var(--space-2);
  font-size: 0.72rem;
}

.video-asset-generation-config__footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.video-asset-generation-config__footer > span svg {
  width: 13px;
  color: var(--status-success);
}

.video-asset-generation-config__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
}

.video-asset-generation-config__actions .button {
  min-height: 36px;
  white-space: nowrap;
}

.video-asset-generation-audio-switch {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--video-muted);
  white-space: nowrap;
}

.video-asset-generation-audio-switch input {
  width: 16px;
  height: 16px;
  accent-color: var(--video-accent);
}

.video-asset-generation-audio-switch span {
  color: inherit !important;
  font-size: 0.68rem !important;
}

.video-asset-generation-prompt-actions {
  display: flex;
  gap: var(--space-2);
}

.video-asset-generation-prompt-actions .button {
  min-height: 31px;
  padding-inline: var(--space-3);
  font-size: 0.68rem;
}

.video-asset-generation-prompt-editor {
  position: relative;
}

.video-asset-generation-prompt-editor textarea {
  display: block;
  min-height: clamp(300px, 42vh, 520px);
  resize: vertical;
  padding: var(--space-3);
  font-size: 0.76rem;
  line-height: 1.65;
}

.video-asset-generation-prompt-editor textarea:focus,
.video-asset-generation-search:focus-within,
.video-asset-generation-config select:focus,
.video-asset-generation-config input:focus {
  border-color: var(--video-accent);
  outline: 2px solid color-mix(in srgb, var(--video-accent) 22%, transparent);
  outline-offset: 1px;
}

.video-asset-generation-mentions {
  position: absolute;
  z-index: 30;
  right: var(--space-2);
  bottom: calc(100% + var(--space-2));
  left: var(--space-2);
  display: grid;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  padding: 5px;
  background: color-mix(in srgb, var(--production-panel, var(--surface-panel)) 94%, transparent);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.video-asset-generation-mentions button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  border: 0;
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--video-muted);
  background: transparent;
  text-align: left;
}

.video-asset-generation-mentions button:hover,
.video-asset-generation-mentions button:focus-visible {
  color: var(--video-text);
  background: var(--surface-hover);
}

.video-asset-generation-mentions__media {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 4px;
  color: var(--video-faint);
  background: var(--surface-muted);
}

.video-asset-generation-mentions__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-asset-generation-mentions__media svg {
  width: 17px;
  height: 17px;
}

.video-asset-generation-mentions__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.video-asset-generation-mentions button strong,
.video-asset-generation-mentions button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-asset-generation-mentions button strong {
  color: inherit;
  font-size: 0.72rem;
}

.video-asset-generation-mentions__copy small {
  color: var(--video-accent);
  font-size: 0.62rem;
  font-weight: 800;
}

.video-asset-generation-mentions button small,
.video-asset-generation-mentions p {
  color: var(--video-faint);
  font-size: 0.64rem;
}

.video-asset-generation-mentions p {
  margin: 0;
  padding: var(--space-3);
  text-align: center;
}

.video-asset-generation-running {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  align-items: center;
  gap: clamp(var(--space-4), 4vw, var(--space-8));
  min-height: 0;
  height: 100%;
  padding: clamp(var(--space-4), 5vw, var(--space-8));
  color: var(--video-muted);
  text-align: left;
}

.video-asset-generation-running__film {
  position: relative;
  isolation: isolate;
  width: min(100%, 360px);
  min-height: 126px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--video-accent) 32%, var(--video-border));
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--video-panel-strong) 88%, #050708);
  box-shadow: 0 18px 38px rgb(0 0 0 / 22%);
}

.video-asset-generation-running__rail {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 18px;
  padding-inline: 7px;
  background: color-mix(in srgb, var(--video-panel-strong) 94%, #000);
}

.video-asset-generation-running__rail--top { top: 0; border-bottom: 1px solid var(--video-border); }
.video-asset-generation-running__rail--bottom { bottom: 0; border-top: 1px solid var(--video-border); }

.video-asset-generation-running__rail i {
  width: 10px;
  height: 6px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--video-muted) 44%, transparent);
}

.video-asset-generation-running__frames {
  position: absolute;
  inset: 23px 9px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.video-asset-generation-running__frames > span {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--video-border) 82%, transparent);
  border-radius: 3px;
  color: var(--video-muted);
  background: color-mix(in srgb, var(--video-panel) 76%, #080b0c);
  opacity: 0.34;
  transform: translateY(3px) scale(.97);
  animation: video-asset-frame-expose 2.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.video-asset-generation-running__frames > span:nth-child(2) { animation-delay: 180ms; }
.video-asset-generation-running__frames > span:nth-child(3) { animation-delay: 360ms; }
.video-asset-generation-running__frames > span:nth-child(4) { animation-delay: 540ms; }
.video-asset-generation-running__frames > span:nth-child(5) { animation-delay: 720ms; }

.video-asset-generation-running__frames > span > svg {
  width: 18px;
  height: 18px;
  opacity: .72;
}

.video-asset-generation-running__frames > span > i {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  height: 2px;
  background: color-mix(in srgb, var(--video-accent) 76%, transparent);
  transform: scaleX(.2);
  transform-origin: left;
  animation: video-asset-frame-progress 2.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.video-asset-generation-running__frames > span:nth-child(2) > i { animation-delay: 180ms; }
.video-asset-generation-running__frames > span:nth-child(3) > i { animation-delay: 360ms; }
.video-asset-generation-running__frames > span:nth-child(4) > i { animation-delay: 540ms; }
.video-asset-generation-running__frames > span:nth-child(5) > i { animation-delay: 720ms; }

.video-asset-generation-running[data-task-state='queued'] .video-asset-generation-running__frames > span {
  animation-name: video-asset-frame-wait;
  animation-duration: 3.6s;
}

.video-asset-generation-running[data-task-state='queued'] .video-asset-generation-running__frames > span > i {
  display: none;
}

.video-asset-generation-running__scan {
  position: absolute;
  z-index: 3;
  top: 18px;
  bottom: 18px;
  left: 9px;
  width: 2px;
  background: var(--video-accent);
  box-shadow: 8px 0 18px color-mix(in srgb, var(--video-accent) 30%, transparent);
  transform: translateX(-18px);
  animation: video-asset-detail-scan 2.5s cubic-bezier(.4, 0, .2, 1) infinite;
}

.video-asset-generation-running__copy {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
}

.video-asset-generation-running__label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: var(--video-accent);
  font-size: 0.65rem;
  font-weight: 800;
}

.video-asset-generation-running__label > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: video-asset-status-pulse 1.8s ease-in-out infinite;
}

.video-asset-generation-running strong {
  color: var(--video-text);
  font-size: 0.95rem;
  line-height: 1.35;
}

.video-asset-generation-running p {
  margin: 0;
  max-width: 48ch;
  color: var(--video-muted);
  font-size: 0.7rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.video-asset-generation-running__phases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}

.video-asset-generation-running__phases li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--video-faint);
  font-size: 0.62rem;
  font-weight: 700;
}

.video-asset-generation-running__phases li > i {
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.video-asset-generation-running__phases li[data-current='true'] { color: var(--video-accent); }
.video-asset-generation-running__phases li[data-current='true'] > i { background: currentColor; }

.video-asset-generation-task-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--video-panel-strong) 68%, transparent);
}

.video-asset-generation-task-evidence[data-failed='true'] {
  border-color: color-mix(in srgb, var(--status-danger) 45%, var(--video-border));
}

.video-asset-generation-task-evidence[data-prompt-version='stale'] {
  border-color: color-mix(in srgb, var(--status-warning) 45%, var(--video-border));
  background: color-mix(in srgb, var(--status-warning) 9%, var(--video-panel));
}

.video-asset-generation-task-evidence[data-prompt-version='stale'] > div > strong {
  color: var(--status-warning);
}

.video-asset-generation-task-evidence > div > span {
  color: var(--video-accent);
  font-size: 0.66rem;
  font-weight: 800;
}

.video-asset-generation-task-evidence[data-failed='true'] > div > span {
  color: var(--status-danger);
}

.video-asset-generation-task-evidence > div > strong {
  display: block;
  margin-top: 4px;
  color: var(--video-text);
  font-size: 0.72rem;
  line-height: 1.55;
}

.video-asset-generation-task-evidence dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.video-asset-generation-task-evidence dl > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--space-2);
}

.video-asset-generation-task-evidence dt,
.video-asset-generation-task-evidence dd {
  margin: 0;
  font-size: 0.64rem;
}

.video-asset-generation-task-evidence dt { color: var(--video-faint); }
.video-asset-generation-task-evidence dd { overflow-wrap: anywhere; color: var(--video-muted); font-variant-numeric: tabular-nums; }

.video-asset-generation-alert,
.video-asset-generation-missing-assets {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--status-warning) 45%, var(--video-border));
  border-radius: var(--radius-small);
  padding: var(--space-3);
  color: var(--video-muted);
  background: color-mix(in srgb, var(--status-warning) 9%, var(--video-panel));
}

.video-asset-generation-alert { margin-top: var(--space-3); }
.video-asset-generation-alert > svg,
.video-asset-generation-missing-assets > svg { width: 16px; color: var(--status-warning); }
.video-asset-generation-alert strong,
.video-asset-generation-missing-assets strong { color: var(--video-text); font-size: 0.72rem; }
.video-asset-generation-alert p,
.video-asset-generation-missing-assets p,
.video-asset-generation-missing-assets span { margin: 3px 0 0; color: var(--video-muted); font-size: 0.66rem; line-height: 1.5; }

.video-asset-generation-assets-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  color: var(--video-muted);
  background: color-mix(in srgb, var(--video-panel) 86%, transparent);
  font-size: 0.66rem;
}

.video-asset-generation-assets-loading > svg {
  width: 14px;
  color: var(--video-accent);
  animation: video-asset-spin 1s linear infinite;
}

.video-asset-generation-assets-toolbar {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-3) 0;
}

.video-asset-generation-assets-toolbar .button {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  font-size: 0.7rem;
}

.video-asset-generation-assets-restore {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3) 0;
  color: var(--video-muted);
  font-size: 0.64rem;
  line-height: 1.45;
}

.video-asset-generation-assets-restore .button {
  min-height: 30px;
  font-size: 0.65rem;
}

.video-asset-generation-asset {
  grid-template-columns: 58px minmax(0, 1fr);
  padding: var(--space-2);
}

button.video-asset-generation-asset__media {
  width: 58px;
  height: 58px;
  padding: 0;
  cursor: zoom-in;
}

button.video-asset-generation-asset__media:disabled {
  cursor: default;
}

.video-asset-generation-asset__title {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 0;
}

.video-asset-generation-asset__title strong {
  min-width: 0;
  flex: 1;
}

.video-asset-generation-asset__title > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--video-accent) 38%, var(--video-border));
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--video-accent);
  background: color-mix(in srgb, var(--video-accent) 9%, transparent);
  font-size: 0.58rem;
  font-weight: 800;
}

.video-asset-generation-asset__title > span svg { width: 9px; }

.video-asset-generation-asset__footer {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 22px;
  padding-top: 5px;
  border-top: 1px solid var(--video-border);
  color: var(--video-faint);
  font-size: 0.62rem;
  flex-wrap: nowrap;
}

.video-asset-generation-asset__actions { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; max-width: 100%; margin-left: auto; flex-wrap: wrap; }
.video-asset-generation-asset__footer label { display: inline-flex; align-items: center; gap: 4px; color: var(--video-muted); cursor: pointer; }
.video-asset-generation-asset__footer input { width: 14px; height: 14px; accent-color: var(--video-accent); }
.video-asset-generation-asset__action { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 7px; border: 1px solid var(--video-border); border-radius: 5px; color: var(--video-muted); background: transparent; font: inherit; font-size: 0.61rem; cursor: pointer; }
.video-asset-generation-asset__action svg { width: 12px; height: 12px; }
.video-asset-generation-asset__action:hover,
.video-asset-generation-asset__action:focus-visible { border-color: color-mix(in srgb, var(--video-accent) 48%, var(--video-border)); color: var(--video-text); background: color-mix(in srgb, var(--video-accent) 9%, transparent); }
.video-asset-generation-asset__unbind:hover,
.video-asset-generation-asset__unbind:focus-visible { border-color: color-mix(in srgb, var(--status-warning) 48%, var(--video-border)); color: var(--status-warning); background: color-mix(in srgb, var(--status-warning) 12%, transparent); }
.video-asset-generation-asset__delete { border-color: color-mix(in srgb, var(--status-danger) 38%, var(--video-border)); color: var(--status-danger); }
.video-asset-generation-asset__delete:hover,
.video-asset-generation-asset__delete:focus-visible { border-color: var(--status-danger); color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); }
.video-asset-generation-asset__action:disabled { cursor: wait; opacity: 0.55; }
.video-asset-generation-asset[data-binding-source='manual'] { border-color: color-mix(in srgb, var(--video-accent) 52%, var(--video-border)); }
.video-asset-generation-asset__binding-source { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 6px; border: 1px solid var(--video-border); border-radius: 4px; color: var(--video-muted); background: color-mix(in srgb, var(--video-panel) 78%, transparent); font-size: .58rem; font-weight: 700; white-space: nowrap; }
.video-asset-generation-asset__binding-source[data-source='manual'] { border-color: color-mix(in srgb, var(--video-accent) 50%, var(--video-border)); color: var(--video-accent); background: color-mix(in srgb, var(--video-accent) 10%, transparent); }
.video-asset-generation-asset__correct { color: var(--video-text); }
.video-asset-generation-asset__restore { border-color: color-mix(in srgb, var(--status-info) 42%, var(--video-border)); color: var(--status-info); }
.video-asset-generation-asset__binding-reason { margin-top: 5px !important; padding-left: 8px; border-left: 2px solid color-mix(in srgb, var(--video-accent) 60%, transparent); color: var(--video-muted) !important; font-size: .61rem !important; line-height: 1.45 !important; }

.video-asset-generation-inline-error {
  margin: var(--space-2) 0 0;
  color: var(--status-danger);
  font-size: 0.68rem;
  line-height: 1.5;
}

/* Keep asset media, metadata and state on separate tracks at narrow widths. */
.video-asset-generation-assets article.video-asset-generation-asset {
  box-sizing: border-box;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  min-width: 0;
  overflow: hidden;
}

.video-asset-generation-asset__media {
  flex: 0 0 58px;
  box-sizing: border-box;
}

.video-asset-generation-asset__body {
  display: grid;
  align-content: start;
  min-width: 0;
  overflow: hidden;
}

.video-asset-generation-asset__title {
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
}

.video-asset-generation-asset__title strong {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.35;
}

.video-asset-generation-asset__title > span {
  max-width: 100%;
  white-space: nowrap;
}

.video-asset-generation-asset__body small,
.video-asset-generation-asset__body p {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.video-asset-generation-asset__body audio {
  box-sizing: border-box;
  max-width: 100%;
}

.video-asset-generation-asset__footer {
  width: 100%;
  min-width: 0;
}

.video-asset-generation-asset__footer > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.video-asset-generation-asset__footer > span[data-pending='true'] {
  color: var(--status-warning);
}

@media (max-width: 520px) {
  .video-asset-generation-asset__footer {
    align-items: flex-start;
    gap: var(--space-2);
  }

  .video-asset-generation-asset__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 420px) {
  .video-asset-generation-assets article.video-asset-generation-asset {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  button.video-asset-generation-asset__media {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}

.video-asset-generation-lightbox {
  position: fixed;
  z-index: 600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 58px);
  background: rgb(3 6 8 / 82%);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}

.video-asset-generation-lightbox > .icon-button {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  background: rgb(0 0 0 / 34%);
}

.video-asset-generation-lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-small);
  box-shadow: 0 22px 70px rgb(0 0 0 / 48%);
}

.video-asset-generation-dialog-backdrop {
  position: fixed;
  z-index: 450;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(3 6 8 / 62%);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
}

.video-asset-generation-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 520px);
  max-height: min(720px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--video-panel) 92%, transparent);
  box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
}

.video-asset-generation-dialog--wide { width: min(100%, 860px); grid-template-rows: auto minmax(0, 1fr) auto; }
.video-asset-generation-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--video-border); }
.video-asset-generation-dialog h2 { margin: 0; color: var(--video-text); font-size: .96rem; }
.video-asset-generation-dialog header p { margin: 5px 0 0; color: var(--video-muted); font-size: .7rem; line-height: 1.5; }
.video-asset-generation-source-options { display: grid; gap: 10px; padding: 20px; }
.video-asset-generation-source-options button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 16px; border: 1px solid var(--video-border); border-radius: var(--radius-small); color: var(--video-text); background: color-mix(in srgb, var(--video-panel) 80%, transparent); text-align: left; cursor: pointer; }
.video-asset-generation-source-options button:hover, .video-asset-generation-source-options button:focus-visible { border-color: var(--video-accent); background: color-mix(in srgb, var(--video-accent) 8%, var(--video-panel)); }
.video-asset-generation-source-options button > svg { grid-row: span 2; width: 20px; color: var(--video-accent); }
.video-asset-generation-source-options strong { font-size: .78rem; }
.video-asset-generation-source-options span { color: var(--video-muted); font-size: .66rem; line-height: 1.45; }
.video-asset-generation-picker-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.video-asset-generation-picker-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 14px 20px 0; padding: 0 10px; border: 1px solid var(--video-border); border-radius: var(--radius-small); color: var(--video-faint); background: color-mix(in srgb, var(--video-panel) 82%, transparent); }
.video-asset-generation-picker-search:focus-within { border-color: var(--video-accent); outline: 2px solid color-mix(in srgb, var(--video-accent) 22%, transparent); outline-offset: 1px; }
.video-asset-generation-picker-search > svg { width: 15px; }
.video-asset-generation-picker-search input { min-width: 0; min-height: 34px; border: 0; padding: 0; color: var(--video-text); background: transparent; outline: 0; font-size: .7rem; }
.video-asset-generation-picker-search input::placeholder { color: var(--video-faint); }
.video-asset-generation-picker-search .icon-button { width: 24px; min-height: 24px; padding: 0; }
.video-asset-generation-picker-list { min-height: 0; overflow: auto; padding: 16px 20px; }
.video-asset-generation-picker-list > section + section { margin-top: 18px; }
.video-asset-generation-picker-list h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--video-text); font-size: .72rem; }
.video-asset-generation-picker-list h3 svg { width: 14px; color: var(--video-accent); }
.video-asset-generation-picker-list h3 span { margin-left: auto; color: var(--video-faint); font-size: .62rem; }
.video-asset-generation-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.video-asset-generation-picker-item { display: grid; grid-template-columns: auto 44px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 8px; border: 1px solid var(--video-border); border-radius: var(--radius-small); background: color-mix(in srgb, var(--video-panel) 76%, transparent); cursor: pointer; }
.video-asset-generation-picker-item[data-disabled='true'] { cursor: not-allowed; opacity: .58; }
.video-asset-generation-picker-item > input { width: 14px; height: 14px; accent-color: var(--video-accent); }
.video-asset-generation-picker-item__media { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; padding: 0; border: 0; border-radius: 4px; color: var(--video-faint); background: var(--surface-muted); cursor: zoom-in; }
.video-asset-generation-picker-item__media:disabled { cursor: default; }
.video-asset-generation-picker-item__media img { width: 100%; height: 100%; object-fit: cover; }
.video-asset-generation-picker-item > span { min-width: 0; }
.video-asset-generation-picker-item strong, .video-asset-generation-picker-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-asset-generation-picker-item strong { color: var(--video-text); font-size: .68rem; }
.video-asset-generation-picker-item small { margin-top: 3px; color: var(--video-muted); font-size: .6rem; }
.video-asset-generation-dialog--wide > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--video-border); color: var(--video-muted); font-size: .68rem; }
.video-asset-generation-dialog--wide > footer > div { display: flex; gap: 8px; }

.video-asset-binding-correction-dialog { width: min(100%, 820px); }
.video-asset-binding-correction-dialog__body { display: grid; min-height: 0; overflow: auto; gap: 14px; padding: 16px 20px; }
.video-asset-binding-correction-dialog__notice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--status-warning) 38%, var(--video-border)); border-radius: 6px; color: var(--video-muted); background: color-mix(in srgb, var(--status-warning) 8%, var(--video-panel)); }
.video-asset-binding-correction-dialog__notice > svg { width: 16px; height: 16px; color: var(--status-warning); }
.video-asset-binding-correction-dialog__notice strong { color: var(--video-text); font-size: .72rem; }
.video-asset-binding-correction-dialog__notice p { margin: 3px 0 0; font-size: .65rem; line-height: 1.45; }
.video-asset-binding-correction-dialog__list { display: grid; gap: 8px; }
.video-asset-binding-correction-dialog__item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 9px; border: 1px solid var(--video-border); border-radius: 6px; background: color-mix(in srgb, var(--video-panel) 80%, transparent); }
.video-asset-binding-correction-dialog__item[data-selected='true'] { border-color: color-mix(in srgb, var(--video-accent) 58%, var(--video-border)); background: color-mix(in srgb, var(--video-accent) 8%, var(--video-panel)); }
.video-asset-binding-correction-dialog__media { display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; padding: 0; border: 1px solid var(--video-border); border-radius: 5px; color: var(--video-faint); background: var(--surface-muted); cursor: zoom-in; }
.video-asset-binding-correction-dialog__media:disabled { cursor: default; }
.video-asset-binding-correction-dialog__media img { width: 100%; height: 100%; object-fit: cover; }
.video-asset-binding-correction-dialog__media svg { width: 20px; height: 20px; }
.video-asset-binding-correction-dialog__item > label { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; cursor: pointer; }
.video-asset-binding-correction-dialog__item input { width: 15px; height: 15px; accent-color: var(--video-accent); }
.video-asset-binding-correction-dialog__item label span { display: grid; min-width: 0; gap: 3px; }
.video-asset-binding-correction-dialog__item strong { color: var(--video-text); font-size: .72rem; overflow-wrap: anywhere; }
.video-asset-binding-correction-dialog__item small { color: var(--video-muted); font-size: .64rem; overflow-wrap: anywhere; }
.video-asset-binding-correction-dialog__item code { color: var(--video-faint); font-size: .56rem; overflow-wrap: anywhere; }
.video-asset-binding-correction-dialog__current { padding: 3px 6px; border: 1px solid var(--video-border); border-radius: 4px; color: var(--video-muted); font-size: .58rem; white-space: nowrap; }
.video-asset-binding-correction-dialog__reason { display: grid; gap: 6px; color: var(--video-text); font-size: .68rem; font-weight: 700; }
.video-asset-binding-correction-dialog__reason textarea { box-sizing: border-box; width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--video-border); border-radius: 6px; padding: 9px 10px; color: var(--video-text); background: color-mix(in srgb, var(--video-panel) 84%, transparent); font: inherit; font-size: .7rem; font-weight: 400; line-height: 1.5; }
.video-asset-binding-correction-dialog__reason textarea:focus-visible { border-color: var(--video-accent); outline: 2px solid color-mix(in srgb, var(--video-accent) 24%, transparent); outline-offset: 1px; }
.video-asset-binding-correction-dialog__reason small { color: var(--video-muted); font-size: .6rem; font-weight: 400; text-align: right; }

@media (max-width: 640px) {
  .video-asset-binding-correction-dialog__body { padding: 12px; }
  .video-asset-binding-correction-dialog__item { grid-template-columns: 46px minmax(0, 1fr); }
  .video-asset-binding-correction-dialog__media { width: 46px; height: 46px; }
  .video-asset-binding-correction-dialog__current { grid-column: 2; justify-self: start; }
  .video-asset-generation-dialog--wide > footer { align-items: stretch; flex-direction: column; }
  .video-asset-generation-dialog--wide > footer > div { justify-content: flex-end; }
}

.video-asset-generation-batch-dialog { width: min(100%, 980px); }
.video-asset-generation-batch-list { min-height: 0; overflow: auto; padding: 16px 20px; display: grid; gap: 8px; }
.video-asset-generation-batch-item { display: grid; grid-template-columns: 28px minmax(180px, 1.3fr) minmax(120px, .7fr) minmax(180px, 1fr) 30px; gap: 10px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--video-border); border-radius: var(--radius-small); background: color-mix(in srgb, var(--video-panel) 78%, transparent); }
.video-asset-generation-batch-item__index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--video-muted); background: color-mix(in srgb, var(--video-accent) 12%, var(--video-panel)); font-size: .66rem; font-variant-numeric: tabular-nums; }
.video-asset-generation-batch-item__file { min-width: 0; }
.video-asset-generation-batch-item__file strong, .video-asset-generation-batch-item__file small { display: block; min-width: 0; overflow-wrap: anywhere; }
.video-asset-generation-batch-item__file strong { color: var(--video-text); font-size: .72rem; line-height: 1.35; }
.video-asset-generation-batch-item__file small { margin-top: 3px; color: var(--video-muted); font-size: .6rem; line-height: 1.35; }
.video-asset-generation-batch-item label { display: grid; gap: 4px; min-width: 0; }
.video-asset-generation-batch-item label > span { color: var(--video-muted); font-size: .6rem; }
.video-asset-generation-batch-item select, .video-asset-generation-batch-item input { width: 100%; min-width: 0; min-height: 32px; border: 1px solid var(--video-border); border-radius: 5px; padding: 0 8px; color: var(--video-text); background: color-mix(in srgb, var(--video-panel) 88%, transparent); font: inherit; font-size: .68rem; }
.video-asset-generation-batch-item select:focus-visible, .video-asset-generation-batch-item input:focus-visible { border-color: var(--video-accent); outline: 2px solid color-mix(in srgb, var(--video-accent) 22%, transparent); outline-offset: 1px; }
.video-asset-generation-batch-item > .icon-button { justify-self: end; }

@media (max-width: 640px) {
  .video-asset-generation-picker-grid { grid-template-columns: 1fr; }
  .video-asset-generation-dialog-backdrop { padding: 10px; }
  .video-asset-generation-dialog { max-height: calc(100vh - 20px); }
  .video-asset-generation-batch-item { grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 8px; }
  .video-asset-generation-batch-item__file { grid-column: 2; }
  .video-asset-generation-batch-item label { grid-column: 2 / -1; }
  .video-asset-generation-batch-item > .icon-button { grid-column: 3; grid-row: 1; }
}

.video-asset-generation-video-lightbox {
  position: fixed;
  z-index: 410;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 64px);
  background: rgb(3 6 8 / 88%);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
}

.video-asset-generation-video-lightbox > .icon-button {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  background: rgb(0 0 0 / 42%);
}

.video-asset-generation-video-lightbox video {
  display: block;
  width: min(92vw, 1440px);
  max-width: 100%;
  height: min(82vh, 810px);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-small);
  background: #050607;
  box-shadow: 0 24px 80px rgb(0 0 0 / 54%);
}

@keyframes video-asset-spin { to { transform: rotate(360deg); } }
@keyframes video-asset-signal { 0%, 100% { height: 4px; opacity: .45; } 50% { height: 12px; opacity: 1; } }
@keyframes video-asset-frame-expose {
  0%, 12%, 100% { opacity: .34; transform: translateY(3px) scale(.97); }
  30%, 62% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: .56; transform: translateY(0) scale(1); }
}

@keyframes video-asset-frame-progress {
  0%, 14% { transform: scaleX(.16); opacity: .3; }
  42%, 68% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(.16); opacity: .3; }
}

@keyframes video-asset-frame-wait {
  0%, 100% { opacity: .3; transform: translateY(2px); }
  50% { opacity: .62; transform: translateY(0); }
}

@keyframes video-asset-detail-scan {
  0% { transform: translateX(-18px); opacity: 0; }
  16% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(340px); opacity: 0; }
}

@keyframes video-asset-status-pulse {
  0%, 100% { opacity: .42; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1180px) {
  .video-asset-generation-workbench {
    grid-template-columns: minmax(230px, .72fr) minmax(440px, 1.55fr);
  }

  .video-asset-generation-task-evidence {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .video-asset-generation-config__grid { grid-template-columns: 1fr 1fr; }
  .video-asset-generation-config__actions { width: 100%; align-items: stretch; flex-direction: column; }
  .video-asset-generation-config__actions .button { width: 100%; justify-content: center; }
  .video-asset-generation-prompt-actions { width: 100%; }
  .video-asset-generation-prompt-actions .button { flex: 1; justify-content: center; }
  .video-asset-generation-section-heading { align-items: flex-start; flex-wrap: wrap; }
  .video-asset-generation-config__heading-actions { width: 100%; justify-content: flex-start; }
  .video-asset-generation-config__heading-actions > .button--primary { margin-left: auto; }
  .video-asset-generation-task-evidence dl > div { grid-template-columns: 70px minmax(0, 1fr); }
  .video-asset-generation-mentions button { grid-template-columns: 42px minmax(0, 1fr); }
  .video-asset-generation-mentions__kind { display: none; }
  .video-asset-generation-mentions__copy small { display: block; }
}

/* Keep the video legible while giving task accounting its own stable surface. */
.video-asset-generation-result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(260px, .78fr);
  gap: var(--space-3);
  align-items: stretch;
}

.video-asset-generation-preview {
  width: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.video-asset-generation-preview[data-aspect-ratio='9:16'] {
  width: min(100%, 360px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

.video-asset-generation-preview[data-aspect-ratio='21:9'] {
  aspect-ratio: 21 / 9;
}

.video-asset-generation-result-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--video-border);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--video-panel-strong) 72%, transparent);
}

.video-asset-generation-result-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--video-border);
}

.video-asset-generation-result-panel__heading span {
  color: var(--video-accent);
  font-size: .66rem;
  font-weight: 800;
}

.video-asset-generation-result-panel__heading h3 {
  margin: 3px 0 0;
  color: var(--video-text);
  font-size: .98rem;
}

.video-asset-generation-result-panel__heading p {
  margin: 4px 0 0;
  color: var(--video-muted);
  font-size: .68rem;
  line-height: 1.4;
}

.video-asset-generation-result-panel__heading small {
  color: var(--video-muted);
  font-size: .68rem;
  white-space: nowrap;
}

.video-asset-generation-result-panel__empty {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 180px;
  color: var(--video-muted);
  text-align: center;
}

.video-asset-generation-result-panel__empty svg { color: var(--video-faint); }
.video-asset-generation-result-panel__empty strong { color: var(--video-text); font-size: .82rem; }
.video-asset-generation-result-panel__empty span { font-size: .7rem; line-height: 1.5; }

.video-asset-generation-result-panel .video-asset-generation-history {
  position: static;
  z-index: auto;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--video-text);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.video-asset-generation-result-panel .video-asset-generation-history__heading {
  color: var(--video-muted);
}

.video-asset-generation-result-panel .video-asset-generation-history__item[data-active='true'] {
  background: color-mix(in srgb, var(--video-accent) 12%, transparent);
}

.video-asset-generation-result-panel .video-asset-generation-history__item > button:first-child {
  color: var(--video-text);
}

.video-asset-generation-result-panel .video-asset-generation-history__item > button:first-child small {
  color: var(--video-muted);
}

.video-asset-generation-result-panel .video-asset-generation-task-evidence {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.video-asset-generation-result-panel .video-asset-generation-task-evidence dl {
  margin-top: var(--space-3);
}

@media (max-width: 1180px) {
  .video-asset-generation-result-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .8fr);
  }
}

@media (max-width: 760px) {
  .video-asset-generation-result-layout {
    grid-template-columns: 1fr;
  }

  .video-asset-generation-submission-progress__actions .button {
    flex: 1 1 150px;
    justify-content: center;
  }

  .video-asset-generation-preview[data-aspect-ratio='9:16'] {
    width: min(100%, 320px);
  }

  .video-asset-generation-preview[data-aspect-ratio='21:9'] {
    width: 100%;
  }

  .video-asset-generation-result-panel {
    min-height: 260px;
  }
}
.workflow-start {
  width: min(100%, 1040px);
}

.workflow-revision-bar {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-elevated);
}

.workflow-revision-bar--compact {
  width: auto;
  margin: 0;
  border: 0;
  background: transparent;
}

.workflow-revision-bar--compact .workflow-revision-bar__summary {
  min-height: 0;
  padding: 0;
  gap: 6px;
}

.workflow-revision-bar--compact .workflow-revision-bar__summary > svg,
.workflow-revision-bar--compact .workflow-revision-bar__summary > span:not(.workflow-revision-bar__hint),
.workflow-revision-bar--compact .workflow-revision-bar__hint,
.workflow-revision-bar--compact .workflow-revision-bar__summary > .status-label {
  display: none;
}

.workflow-revision-bar--compact .workflow-revision-bar__actions {
  gap: 5px;
}

.workflow-revision-bar--compact .workflow-revision-bar__actions .button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.72rem;
}

.workflow-revision-bar--compact .workflow-revision-history {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 12;
  width: min(600px, calc(100vw - 32px));
  max-height: min(66vh, 560px);
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-elevated);
  box-shadow: 0 16px 42px rgb(15 23 42 / 18%);
}

.workflow-revision-bar--compact .workflow-revision-dialog {
  position: fixed;
  inset: 72px 24px auto auto;
  z-index: 16;
  width: min(700px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.workflow-revision-bar__summary,
.workflow-revision-history__row,
.workflow-revision-dialog__header,
.workflow-revision-dialog__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.workflow-revision-bar__summary {
  min-height: 54px;
  padding: 10px 14px;
}

.workflow-revision-bar__summary > svg {
  color: var(--accent-primary);
  flex: 0 0 auto;
}

.workflow-revision-bar__summary > span:not(.workflow-revision-bar__hint) {
  display: grid;
  gap: 2px;
  min-width: 150px;
}

.workflow-revision-bar__summary strong,
.workflow-revision-bar__summary b {
  font-size: 0.82rem;
}

.workflow-revision-bar__summary strong {
  color: var(--text-tertiary);
  font-weight: 600;
}

.workflow-revision-bar__summary b {
  color: var(--text-primary);
}

.workflow-revision-bar__hint {
  color: var(--text-secondary);
  font-size: 0.78rem;
  flex: 1 1 auto;
}

.workflow-revision-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.workflow-revision-bar__actions .button,
.workflow-revision-history__row .button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.workflow-revision-bar__actions svg,
.workflow-revision-history__row svg,
.workflow-revision-dialog svg {
  width: 15px;
  height: 15px;
}

.workflow-revision-history {
  border-top: 1px solid var(--border-subtle);
  padding: 6px 14px 10px;
}

.workflow-revision-history__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.workflow-revision-history__toolbar > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workflow-revision-history__toolbar strong {
  color: var(--text-primary);
  font-size: 0.8rem;
}

.workflow-revision-history__toolbar small {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.workflow-revision-history__row {
  min-height: 48px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.workflow-revision-history__row:last-child {
  border-bottom: 0;
}

.workflow-revision-history__row > div {
  display: grid;
  gap: 2px;
  min-width: 190px;
  flex: 1;
}

.workflow-revision-history__row small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-revision-history__actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0 !important;
}

.workflow-revision-history__actions .button--danger-text {
  color: var(--status-danger-text, #b42318);
}

.workflow-revision-diff {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.workflow-revision-diff__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.workflow-revision-diff p,
.workflow-revision-diff ul {
  margin: 0;
}

.workflow-revision-diff ul {
  padding-left: 18px;
}

.workflow-revision-dialog {
  position: absolute;
  inset: calc(100% + 8px) 0 auto;
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-elevated);
  box-shadow: 0 18px 48px rgb(15 23 42 / 18%);
}

.workflow-revision-dialog__header {
  justify-content: space-between;
}

.workflow-revision-dialog__header h2 {
  margin: 3px 0 0;
  font-size: 1.1rem;
}

.workflow-revision-dialog__notice {
  margin: 12px 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.workflow-revision-dialog__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workflow-revision-dialog__form label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.workflow-revision-dialog__form input,
.workflow-revision-dialog__form select,
.workflow-revision-dialog__form textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  background: var(--surface-base);
  font: inherit;
}

.workflow-revision-dialog__wide,
.workflow-revision-dialog__form .checkbox-row {
  grid-column: 1 / -1;
}

.workflow-revision-dialog__form .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-revision-dialog__form .checkbox-row input {
  width: 16px;
  min-height: 16px;
}

.workflow-revision-impact {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 2px 0 var(--accent-primary);
  background: var(--surface-muted);
  font-size: 0.8rem;
}

.workflow-revision-impact > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.workflow-revision-impact__grid {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
}

.workflow-revision-impact__warning,
.workflow-revision-dialog__error {
  margin: 0;
  color: var(--status-warning-text);
}

.workflow-revision-dialog__footer {
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 760px) {
  .workflow-revision-bar__summary {
    flex-wrap: wrap;
  }

  .workflow-revision-bar__hint {
    order: 3;
    flex-basis: 100%;
  }

  .workflow-revision-bar__actions {
    margin-left: auto;
  }

  .workflow-revision-dialog {
    position: fixed;
    inset: 72px 12px auto;
    max-height: calc(100vh - 96px);
    overflow: auto;
  }

  .workflow-revision-history__row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workflow-revision-history__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .workflow-revision-dialog__form {
    grid-template-columns: 1fr;
  }

  .workflow-revision-dialog__wide,
  .workflow-revision-dialog__form .checkbox-row {
    grid-column: auto;
  }

  .workflow-revision-impact > div:first-child {
    display: grid;
  }
}

.workflow-workspace {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1480px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}

.workflow-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
  grid-template-areas:
    "kicker kicker"
    "title title"
    "intro intro"
    "recommend summary"
    "error summary"
    "field summary"
    "mode summary"
    "action summary";
  align-items: start;
  justify-items: start;
  gap: var(--space-4);
  max-width: 1040px;
}

.workflow-start > .page-kicker { grid-area: kicker; }
.workflow-start > h1 { grid-area: title; }
.workflow-start > p:not(.page-kicker, .inline-error, .inline-warning) { grid-area: intro; }
.workflow-start > .workflow-composition-recommendation,
.workflow-start > .inline-warning { grid-area: recommend; }
.workflow-start > .inline-error { grid-area: error; }
.workflow-start > .field { grid-area: field; }
.workflow-start > .workflow-template-summary { grid-area: summary; }
.workflow-start > .workflow-start__mode { grid-area: mode; }
.workflow-start > .button { grid-area: action; }

.workflow-start--monitor {
  grid-template-columns: 1fr;
  grid-template-areas:
    "kicker"
    "title"
    "intro"
    "action";
  max-width: 680px;
}

.workflow-start h1 {
  margin-bottom: 0;
  font-size: 1.75rem;
}

.workflow-topbar {
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.workflow-start > p:not(.page-kicker) {
  color: var(--text-secondary);
}

.workflow-start .field {
  width: 100%;
}

.workflow-composition-recommendation {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.workflow-composition-recommendation__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.workflow-composition-recommendation__heading > svg {
  width: 20px;
  height: 20px;
  color: var(--status-success);
}

.workflow-composition-recommendation__heading > div {
  display: grid;
  gap: var(--space-1);
}

.workflow-composition-recommendation__heading span,
.workflow-composition-recommendation__packs strong {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-composition-recommendation p {
  margin: 0;
  color: var(--text-secondary);
}

.workflow-composition-recommendation__packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.workflow-composition-recommendation__packs span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  font-size: 0.8125rem;
}

.workflow-start__mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.workflow-start__mode span {
  color: var(--text-secondary);
}

.workflow-template-summary {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-color: color-mix(in srgb, var(--action-primary) 42%, var(--border-default));
  border-radius: var(--radius-small);
  background: var(--surface-panel);
}

.workflow-template-summary__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.workflow-template-summary__status {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.workflow-template-summary h2 {
  margin: 0;
  font-size: 1.125rem;
}

.workflow-template-summary p {
  margin: 0;
  color: var(--text-secondary);
}

.workflow-template-summary__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.workflow-template-summary__facts span {
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.workflow-template-summary__facts strong {
  color: var(--text-primary);
  font-size: 0.75rem;
}

.workflow-template-summary__constraint {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  font-size: 0.8125rem;
}

.workflow-template-summary__compatibility {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--status-warning) 38%, transparent);
  border-radius: var(--radius-small);
  background: var(--status-warning-bg);
}

.workflow-template-summary__manual {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--status-info) 38%, transparent);
  border-radius: var(--radius-small);
  background: var(--status-info-bg);
}

.workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 42px;
  margin: 0;
}

.workflow-header__actions {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.workflow-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.workflow-header__title > div:first-child {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}

.workflow-header h1 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.2;
}

.workflow-header__title > div:first-child > span,
.workflow-header__stage {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-header__stage {
  color: var(--action-primary);
}

.workflow-model-control {
  display: grid;
  grid-template-columns: 18px minmax(104px, auto) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
  padding-right: var(--space-2);
  border-right: 1px solid var(--border-default);
}

.workflow-model-control > svg {
  width: 18px;
  height: 18px;
  color: var(--action-primary);
}

.workflow-model-control__current {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.workflow-model-control__current span,
.workflow-model-control__current small,
.workflow-model-control__message,
.workflow-model-control__error {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-model-control__current strong,
.workflow-model-control__current small {
  overflow: hidden;
  max-width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-model-control__current strong {
  font-size: 0.8125rem;
}

.workflow-model-control__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.workflow-model-control__actions select {
  width: clamp(150px, 14vw, 220px);
  min-height: 34px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: var(--space-1) var(--space-2);
  color: var(--text-primary);
  background: var(--surface-panel);
  font-size: 0.75rem;
}

.workflow-model-control__actions .button {
  min-height: 34px;
  white-space: nowrap;
}

.workflow-model-control__message,
.workflow-model-control__error {
  grid-column: 2 / -1;
  max-width: 460px;
  margin: 0;
  overflow-wrap: anywhere;
}

.workflow-model-control__error {
  color: var(--status-danger);
}

.workflow-header__actions .button {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: 0.8125rem;
}

.workflow-mode-lock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 150px;
  padding-right: var(--space-2);
  border-right: 1px solid var(--border-default);
}

.workflow-mode-lock,
.workflow-header__actions > .status-label {
  flex-shrink: 0;
}

.workflow-header__actions > .status-label {
  white-space: nowrap;
}

.workflow-workspace--legacy-storyboard-bridge .workflow-header__actions > .status-label {
  gap: 0;
  padding-inline: 6px;
  font-size: 0.8125rem;
}

.workflow-workspace--legacy-storyboard-bridge .workflow-header__actions > .status-label svg {
  display: none;
}

.workflow-mode-lock > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.workflow-mode-lock > span {
  display: grid;
  gap: 2px;
}

.workflow-mode-lock strong,
.workflow-mode-lock small {
  line-height: 1.25;
}

.workflow-mode-lock small {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-usage-summary {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.workflow-usage-summary__metric {
  display: grid;
  grid-template-columns: 16px minmax(72px, auto);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px var(--space-2);
  min-width: 118px;
  padding: 7px 10px;
}

.workflow-usage-summary__metric + .workflow-usage-summary__metric {
  border-left: 1px solid var(--border-default);
}

.workflow-usage-summary__metric > svg {
  grid-row: 1 / -1;
  width: 16px;
  height: 16px;
  color: var(--action-primary);
}

.workflow-usage-summary__metric > span,
.workflow-usage-summary__metric > small {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.2;
}

.workflow-usage-summary__metric > strong {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.workflow-usage-summary__metric > small {
  display: none;
}

.stage-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-subtle);
  list-style: none;
}

.stage-track-mobile {
  display: none;
}

.stage-track__item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 16px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 4px var(--space-2);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
}

.stage-track__item + .stage-track__item {
  border-left-color: transparent;
}

.stage-track__item:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 4px;
  height: 1px;
  border-radius: 999px;
  background: var(--border-default);
  content: "";
}

.stage-track__item--current {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--action-primary) 34%, var(--border-default));
  background: var(--surface-panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%), 0 5px 14px rgb(15 23 42 / 6%);
}

.stage-track__item--completed svg {
  color: var(--status-success);
}

.stage-track__number {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.stage-track svg {
  width: 15px;
  height: 15px;
}

.stage-track strong,
.stage-track span {
  display: block;
}

.stage-track strong {
  overflow: hidden;
  min-width: 0;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-track__item > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.stage-track div > span {
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 0.6875rem;
  white-space: nowrap;
}

.profile-lock {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.profile-lock > svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.profile-lock__label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.profile-lock p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.workflow-pane-switch {
  display: none;
}

.workflow-monitor-banner {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: var(--status-info-bg);
}

.workflow-monitor-banner > svg {
  width: 18px;
  height: 18px;
  color: var(--status-info);
}

.workflow-monitor-banner > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workflow-monitor-banner > div strong {
  font-size: 0.8125rem;
}

.workflow-monitor-banner > div span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.workflow-production-grid {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) clamp(320px, 27vw, 380px);
  gap: var(--space-3);
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.workflow-conversation-pane,
.workflow-document-pane {
  min-width: 0;
  min-height: 0;
}

.workflow-production-grid .workflow-chat {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.workflow-chat__actionbar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 62px;
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-execution-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.workflow-execution-dock > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workflow-execution-dock > .workflow-execution-dock__status--warning,
.workflow-execution-dock > .workflow-execution-dock__status--danger {
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--status-warning) 36%, var(--border-subtle));
  box-shadow: inset 0 2px 0 var(--status-warning);
  border-radius: var(--radius-small);
  background: var(--status-warning-bg);
}

.workflow-execution-dock > .workflow-execution-dock__status--danger {
  border-color: color-mix(in srgb, var(--status-danger) 36%, var(--border-subtle));
  box-shadow: inset 0 2px 0 var(--status-danger);
  background: var(--status-danger-bg);
}

.workflow-execution-dock__status--warning > :not(.workflow-execution-dock__status-icon),
.workflow-execution-dock__status--danger > :not(.workflow-execution-dock__status-icon) {
  grid-column: 2;
}

.workflow-execution-dock__status-icon {
  grid-row: 1 / span 3;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--status-warning);
}

.workflow-execution-dock__status--danger .workflow-execution-dock__status-icon {
  color: var(--status-danger);
}

.workflow-execution-dock > div strong {
  font-size: 0.8125rem;
}

.workflow-execution-dock > div span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.workflow-storyboard-automation {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  margin-top: var(--space-1);
  cursor: pointer;
  user-select: none;
}

.workflow-storyboard-automation input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.workflow-execution-dock > div .workflow-storyboard-automation > span {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-panel);
  transition: border-color 160ms ease, background 160ms ease;
}

.workflow-storyboard-automation > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-tertiary);
  content: '';
  transition: transform 160ms ease, background 160ms ease;
}

.workflow-storyboard-automation input:checked + span {
  border-color: var(--action-primary);
  background: var(--action-primary);
}

.workflow-storyboard-automation input:checked + span::after {
  background: var(--surface-panel);
  transform: translateX(12px);
}

.workflow-storyboard-automation input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.workflow-storyboard-automation input:disabled + span,
.workflow-storyboard-automation input:disabled ~ strong {
  opacity: 0.55;
}

.workflow-execution-dock > div .workflow-storyboard-automation > strong {
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.workflow-execution-dock > div .workflow-automation-notice {
  max-width: 72ch;
  margin-top: 2px;
  color: var(--status-info);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-automation-confirm-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.workflow-execution-dock > .button {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}

.workflow-execution-dock > .workflow-execution-dock__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.workflow-execution-dock__actions .button {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.workflow-execution-dock > .inline-error,
.workflow-execution-dock > .workflow-execution__notice {
  grid-column: 1 / -1;
  margin: 0;
}

.workflow-document-pane {
  display: grid;
  grid-template-rows: auto 58px 40px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 20px rgb(15 23 42 / 5%);
}

.workflow-document-pane--storyboard {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.workflow-document-pane--storyboard .workflow-document-pane__header {
  min-height: 48px;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  row-gap: 6px;
}

.workflow-document-pane--storyboard .workflow-document-pane__actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
  min-height: 28px;
}

.workflow-document-pane__header > div {
  min-width: 0;
}

.workflow-document-pane__header .page-kicker,
.workflow-document-pane__header h2 {
  overflow-wrap: anywhere;
  white-space: normal;
}

.workflow-sidebar-stage {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-sidebar-stage__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 2px;
}

.workflow-sidebar-stage__heading span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-sidebar-stage__heading strong {
  color: var(--action-primary);
  font-size: 0.75rem;
}

.workflow-outline-status {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--status-success) 8%, var(--surface-panel));
}

.workflow-outline-status > svg {
  width: 16px;
  height: 16px;
  color: var(--status-success);
}

.workflow-outline-status div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workflow-outline-status strong,
.workflow-outline-status span {
  overflow-wrap: anywhere;
}

.workflow-outline-status strong {
  font-size: 0.75rem;
}

.workflow-outline-status span {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.workflow-sidebar-stage .stage-track {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border: 0;
  padding: 0;
  background: transparent;
}

.workflow-sidebar-stage .stage-track__item {
  grid-template-columns: 14px 14px minmax(0, 1fr);
  min-height: 34px;
  padding: 3px 5px;
}

.workflow-sidebar-stage .stage-track__item:not(:last-child)::after {
  display: none;
}

.workflow-sidebar-stage .stage-track__item > div {
  gap: 4px;
}

.workflow-sidebar-stage .stage-track strong {
  font-size: 0.6875rem;
}

.workflow-sidebar-stage .stage-track div > span,
.workflow-sidebar-stage .stage-track__number {
  font-size: 0.625rem;
}

.workflow-sidebar-stage .workflow-pipeline {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.workflow-pipeline {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.workflow-pipeline > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-pipeline > header strong {
  color: var(--text-primary);
  font-size: 0.8125rem;
}

.workflow-pipeline > header span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.workflow-pipeline ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-pipeline__step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.workflow-pipeline__step > svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.workflow-pipeline__step > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workflow-pipeline__step strong,
.workflow-pipeline__step small {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.workflow-pipeline__step strong {
  color: inherit;
  font-size: 0.75rem;
}

.workflow-pipeline__step small {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-pipeline__step--started {
  color: var(--action-primary);
}

.workflow-pipeline__step--completed {
  color: var(--status-success);
}

.workflow-pipeline__step--failed {
  color: var(--status-danger);
}

.workflow-pipeline--compact ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-2);
}

.workflow-pipeline--compact .workflow-pipeline__step {
  padding: 4px 0;
}

.workflow-pipeline--compact .workflow-pipeline__step small {
  display: none;
}

.workflow-document-pane__header {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-document-pane__header > svg {
  width: 18px;
  height: 18px;
  color: var(--action-primary);
}

.workflow-document-pane__header h2 {
  margin: 0;
  font-size: 1rem;
}

.workflow-document-pane__header > span {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-document-pane__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.workflow-document-pane__autosave {
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
}

.workflow-inspector-menu {
  position: relative;
  flex: 0 0 auto;
}

.workflow-inspector-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--surface-panel);
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.workflow-inspector-menu > summary::-webkit-details-marker {
  display: none;
}

.workflow-inspector-menu > summary svg {
  width: 14px;
  height: 14px;
}

.workflow-inspector-menu[open] > summary,
.workflow-inspector-menu > summary:hover {
  color: var(--action-primary);
  border-color: var(--action-primary);
  background: var(--surface-hover);
}

.workflow-inspector-menu__items {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 11;
  display: grid;
  width: 184px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-elevated);
  box-shadow: 0 14px 34px rgb(15 23 42 / 16%);
}

.workflow-inspector-menu__items button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.75rem;
  text-align: left;
}

.workflow-inspector-menu__items button:hover,
.workflow-inspector-menu__items button[aria-selected='true'] {
  color: var(--action-primary);
  background: var(--surface-hover);
}

.workflow-inspector-menu__items button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.workflow-inspector-menu__items button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: auto;
  border-radius: 9px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  font-size: 0.625rem;
  font-weight: 700;
}

.workflow-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-panel);
}

.workflow-inspector-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-inspector-tabs button + button {
  border-left: 1px solid var(--border-default);
}

.workflow-inspector-tabs button[aria-selected='true'] {
  color: var(--action-primary);
  background: var(--surface-hover);
}

.workflow-inspector-tabs svg {
  width: 15px;
  height: 15px;
}

.workflow-inspector-tabs button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 0.625rem;
  font-weight: 700;
}

.workflow-document-preview {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.workflow-chat__knowledge--document {
  flex: 0 0 auto;
  margin: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.workflow-chat__knowledge--document > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.workflow-document-preview .workflow-outputs {
  width: 100%;
  margin: 0;
  padding: var(--space-3);
  border: 0;
}

.workflow-document-preview .workflow-outputs > header {
  display: none;
}

.workflow-document-preview .workflow-output-document__heading {
  padding: var(--space-3);
}

.workflow-document-preview .workflow-output-document pre {
  max-height: none;
  padding: var(--space-3);
  font-size: 0.8125rem;
}

.workflow-asset-catalog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 100%;
  background: var(--surface-panel);
}

.workflow-asset-catalog__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.workflow-asset-catalog__summary > div {
  display: grid;
  gap: 2px;
}

.workflow-asset-catalog__summary strong {
  font-size: 0.875rem;
}

.workflow-asset-catalog__summary span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-asset-catalog__summary > span {
  flex: 0 0 auto;
  color: var(--action-primary);
  font-weight: 700;
}

.workflow-asset-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  overflow-x: auto;
  border-bottom: 1px solid var(--border-default);
  scrollbar-width: thin;
}

.workflow-asset-tabs button {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  text-align: left;
}

.workflow-asset-tabs button + button {
  border-left: 1px solid var(--border-default);
}

.workflow-asset-tabs button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.workflow-asset-tabs button:focus-visible {
  position: relative;
  z-index: 1;
}

.workflow-asset-tabs button[aria-selected='true'] {
  background: var(--surface-hover);
  box-shadow: inset 0 -2px 0 var(--action-primary);
  color: var(--action-primary);
}

.workflow-asset-tabs svg {
  width: 15px;
  height: 15px;
}

.workflow-asset-tabs button > span {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.workflow-asset-tabs button > strong {
  min-width: 18px;
  font-size: 0.6875rem;
  text-align: right;
}

.workflow-asset-panel {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.workflow-asset-list {
  margin: 0;
  padding: 0 var(--space-3);
  list-style: none;
}

.workflow-asset-list > li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

.workflow-asset-list > li > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-asset-list > li > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workflow-asset-list > li > header strong {
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}

.workflow-asset-list > li > header div span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-asset-list > li > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.55;
}

.workflow-asset-list dl {
  display: grid;
  grid-template-columns: minmax(72px, 0.65fr) minmax(96px, 1fr) minmax(112px, 1.2fr);
  gap: var(--space-2);
  margin: 0;
}

.workflow-asset-list dl > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workflow-asset-list dt {
  color: var(--text-secondary);
  font-size: 0.625rem;
  font-weight: 700;
}

.workflow-asset-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-asset-status {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.625rem;
  font-weight: 700;
}

.workflow-asset-status--ready,
.workflow-asset-status--approved {
  color: var(--status-success);
}

.workflow-asset-status--rejected {
  color: var(--status-danger);
}

.workflow-asset-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-asset-pagination > span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-asset-pagination > div {
  display: flex;
  gap: var(--space-1);
}

.workflow-asset-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-panel);
  color: var(--text-primary);
}

.workflow-asset-pagination button:hover:not(:disabled) {
  border-color: var(--action-primary);
  color: var(--action-primary);
}

.workflow-asset-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workflow-asset-pagination svg {
  width: 16px;
  height: 16px;
}

.workflow-asset-catalog__state,
.workflow-asset-catalog__empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 240px;
  padding: var(--space-4);
  text-align: center;
}

.workflow-asset-catalog__state span,
.workflow-asset-catalog__empty span {
  max-width: 42ch;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-asset-catalog__empty svg {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .workflow-asset-catalog__summary {
    align-items: flex-start;
  }

  .workflow-asset-tabs {
    grid-template-columns: repeat(5, minmax(118px, 1fr));
  }

  .workflow-asset-list dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-asset-list dl > div:last-child {
    grid-column: 1 / -1;
  }
}

.workflow-quality-inspector {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: var(--space-3);
}

.workflow-quality-inspector > header {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.workflow-quality-inspector > header svg {
  width: 18px;
  height: 18px;
  color: var(--action-primary);
}

.workflow-quality-inspector > header div {
  display: grid;
  gap: 3px;
}

.workflow-quality-inspector > header strong {
  font-size: 0.875rem;
}

.workflow-quality-inspector > header span,
.workflow-quality-empty span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-quality-empty {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-2);
  text-align: center;
}

.workflow-emotion-list,
.workflow-learning-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-emotion-list > li,
.workflow-learning-list > li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}

.workflow-emotion-list > li > header,
.workflow-learning-list > li > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-emotion-list h3,
.workflow-learning-list p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.workflow-emotion-list h3 {
  color: var(--action-primary);
}

.workflow-emotion-list dl,
.workflow-learning-list dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.workflow-emotion-list dl > div,
.workflow-learning-list dl > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-2);
}

.workflow-emotion-list dt,
.workflow-learning-list dt {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.workflow-emotion-list dd,
.workflow-learning-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  line-height: 1.55;
}

.workflow-governance-empty svg {
  justify-self: center;
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
}

.workflow-governance-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px 0;
  background: var(--border-default);
  list-style: none;
}

.workflow-governance-summary > li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  min-height: 58px;
  padding: 10px var(--space-2);
  background: var(--surface-panel);
}

.workflow-governance-summary > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.workflow-governance-summary > li > svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.workflow-governance-summary > li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workflow-governance-summary span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-governance-summary strong {
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  line-height: 1.35;
}

.workflow-governance-summary .is-success > svg,
.workflow-governance-summary .is-success strong {
  color: var(--status-success);
}

.workflow-governance-summary .is-info > svg,
.workflow-governance-summary .is-info strong {
  color: var(--status-info);
}

.workflow-governance-summary .is-warning > svg,
.workflow-governance-summary .is-warning strong {
  color: var(--status-warning);
}

.workflow-governance-summary .is-danger > svg,
.workflow-governance-summary .is-danger strong {
  color: var(--status-danger);
}

.workflow-governance-summary .is-muted > svg,
.workflow-governance-summary .is-muted strong {
  color: var(--text-secondary);
}

.workflow-final-review {
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
}

.workflow-final-review > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
}

.workflow-final-review > header > div,
.workflow-final-review__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.workflow-final-review > header > div > svg,
.workflow-final-review__status svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.workflow-final-review > header > div > svg {
  color: var(--action-primary);
}

.workflow-final-review > header > div > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workflow-final-review > header strong {
  font-size: 0.8125rem;
}

.workflow-final-review > header span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-final-review__status {
  align-items: center;
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.workflow-final-review__status.is-success {
  color: var(--status-success);
}

.workflow-final-review__status.is-warning {
  color: var(--status-warning);
}

.workflow-final-review__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px 0;
  background: var(--border-default);
  list-style: none;
}

.workflow-final-review__summary > li {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface-panel);
}

.workflow-final-review__summary span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.workflow-final-review__summary strong {
  overflow-wrap: anywhere;
  font-size: 0.75rem;
}

.workflow-final-review__message {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--status-info) 38%, transparent);
  border-radius: var(--radius-small);
  background: var(--surface-subtle);
  font-size: 0.75rem;
  line-height: 1.55;
}

.workflow-final-review__message.is-success {
  border-color: color-mix(in srgb, var(--status-success) 38%, transparent);
}

.workflow-final-review__message.is-warning {
  border-left-color: var(--status-warning);
}

.workflow-final-review__evidence > ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-final-review__evidence > ol > li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--border-default);
}

.workflow-final-review__evidence li > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-final-review__evidence li > header strong {
  font-size: 0.75rem;
}

.workflow-final-review__evidence li > header span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.workflow-final-review__evidence li > header span.is-success {
  color: var(--status-success);
}

.workflow-final-review__evidence li > header span.is-warning {
  color: var(--status-warning);
}

.workflow-final-review__evidence dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.workflow-final-review__evidence dl > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-2);
}

.workflow-final-review__evidence dt {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.workflow-final-review__evidence dd,
.workflow-final-review__evidence p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  line-height: 1.55;
}

.workflow-final-review__attempts {
  background: var(--surface-subtle);
}

.workflow-quality-remediation-log {
  min-width: 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-quality-remediation-log > header,
.workflow-quality-remediation-log > ol > li > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-quality-remediation-log > header {
  padding: var(--space-3) var(--space-2) var(--space-2);
}

.workflow-quality-remediation-log > header > div {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

.workflow-quality-remediation-log > header svg,
.workflow-quality-remediation-log > footer svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.workflow-quality-remediation-log > header > strong {
  flex: 0 0 auto;
  font-size: 0.6875rem;
}

.workflow-quality-remediation-log > header > strong.is-success {
  color: var(--status-success);
}

.workflow-quality-remediation-log > header > strong.is-danger {
  color: var(--status-danger);
}

.workflow-quality-remediation-log > p {
  margin: 0;
  padding: 0 var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-quality-remediation-log > ol {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-2) var(--space-3);
  list-style: none;
}

.workflow-quality-remediation-log > ol > li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-panel);
}

.workflow-quality-remediation-log > ol > li > header strong,
.workflow-quality-remediation-log > ol > li > header span {
  font-size: 0.6875rem;
}

.workflow-quality-remediation-log > ol > li > header span {
  color: var(--status-success);
  font-weight: 700;
}

.workflow-quality-remediation-log dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.workflow-quality-remediation-log dl > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-2);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-quality-remediation-log dt {
  color: var(--text-secondary);
  font-weight: 700;
}

.workflow-quality-remediation-log dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.workflow-quality-remediation-log small {
  color: var(--text-secondary);
  font-size: 0.625rem;
}

.workflow-quality-remediation-log__causes {
  border-top: 1px solid var(--border-default);
}

.workflow-quality-remediation-log__causes > summary {
  padding-top: var(--space-2);
  color: var(--action-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}

.workflow-quality-remediation-log__causes > ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.workflow-quality-remediation-log__causes li {
  display: grid;
  gap: 3px;
  padding-left: var(--space-2);
  border-left: 2px solid var(--status-info);
}

.workflow-quality-remediation-log__causes strong,
.workflow-quality-remediation-log__causes p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
}

.workflow-quality-remediation-log__causes p {
  color: var(--text-secondary);
}

.workflow-quality-remediation-log__causes b {
  color: var(--text-primary);
}

.workflow-quality-remediation-log > footer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-top: 1px solid var(--status-warning);
  color: var(--status-warning);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-periodic-audit {
  min-width: 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.workflow-periodic-audit > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-2);
}

.workflow-periodic-audit__heading {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
}

.workflow-periodic-audit__heading > svg {
  width: 16px;
  height: 16px;
  color: var(--action-primary);
}

.workflow-periodic-audit__heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workflow-periodic-audit__heading strong {
  font-size: 0.8125rem;
}

.workflow-periodic-audit__heading span {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-periodic-audit__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.workflow-periodic-audit__status svg,
.workflow-periodic-audit__outcome svg,
.workflow-periodic-audit__failure > svg {
  width: 14px;
  height: 14px;
}

.workflow-periodic-audit__status.is-success {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.workflow-periodic-audit__status.is-warning {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.workflow-periodic-audit__status.is-danger {
  color: var(--status-danger);
  background: var(--status-danger-bg);
}

.workflow-periodic-audit__failure {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--status-danger);
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.workflow-periodic-audit__failure > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workflow-periodic-audit__failure strong {
  font-size: 0.75rem;
}

.workflow-periodic-audit__failure span {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.workflow-periodic-audit__outcome {
  display: grid;
  gap: 4px;
  padding: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.workflow-periodic-audit__outcome > strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
}

.workflow-periodic-audit__outcome.is-success > strong {
  color: var(--status-success);
}

.workflow-periodic-audit__outcome.is-warning > strong {
  color: var(--status-warning);
}

.workflow-periodic-audit__outcome p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-periodic-remediation {
  display: grid;
  gap: 6px;
  padding: var(--space-2);
  border-top: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-periodic-remediation > header,
.workflow-periodic-remediation > ol > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-periodic-remediation > header > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.workflow-periodic-remediation > header svg {
  width: 14px;
  height: 14px;
}

.workflow-periodic-remediation > header > strong,
.workflow-periodic-remediation > ol strong {
  font-size: 0.6875rem;
}

.workflow-periodic-remediation.is-success > header {
  color: var(--status-success);
}

.workflow-periodic-remediation.is-warning > header {
  color: var(--status-warning);
}

.workflow-periodic-remediation.is-danger > header {
  color: var(--status-danger);
}

.workflow-periodic-remediation > p,
.workflow-periodic-remediation > footer {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.workflow-periodic-remediation > ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-periodic-remediation > ol > li {
  min-height: 28px;
  padding: 4px var(--space-2);
  border-left: 2px solid var(--border-default);
  color: var(--text-primary);
  font-size: 0.6875rem;
}

.workflow-periodic-audit__metrics {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-default);
  list-style: none;
}

.workflow-periodic-audit__metrics > li {
  display: grid;
  gap: 7px;
  min-height: 52px;
  padding: var(--space-2);
}

.workflow-periodic-audit__metrics > li + li {
  border-top: 1px solid var(--border-default);
}

.workflow-periodic-audit__metrics header,
.workflow-periodic-audit__evidence > div > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.workflow-periodic-audit__metrics strong,
.workflow-periodic-audit__evidence strong {
  overflow-wrap: anywhere;
  font-size: 0.75rem;
}

.workflow-periodic-audit__metrics header > span,
.workflow-periodic-audit__evidence header > span {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.workflow-periodic-audit__score {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-muted);
}

.workflow-periodic-audit__score > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--action-primary);
}

.workflow-periodic-audit__details {
  border-top: 1px solid var(--border-default);
  border-bottom: 0;
}

.workflow-periodic-audit__evidence {
  display: grid;
}

.workflow-periodic-audit__evidence > div {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--border-default);
}

.workflow-periodic-audit__evidence ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-periodic-audit__evidence p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-periodic-audit__findings {
  border-top: 1px solid var(--border-default);
}

.workflow-governance-automation {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--border-default);
  background: var(--status-info-bg);
}

.workflow-governance-automation > svg {
  width: 16px;
  height: 16px;
  color: var(--status-info);
}

.workflow-governance-automation > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workflow-governance-automation strong {
  color: var(--text-primary);
  font-size: 0.75rem;
}

.workflow-governance-automation span {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.workflow-governance-details {
  border-bottom: 1px solid var(--border-default);
}

.workflow-governance-details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: var(--space-2);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  list-style-position: inside;
}

.workflow-governance-details > summary:hover {
  background: var(--surface-hover);
}

.workflow-governance-details > summary:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: -2px;
}

.workflow-governance-details > summary > svg {
  width: 16px;
  height: 16px;
  color: var(--action-primary);
}

.workflow-governance-details > summary > .workflow-governance-details__chevron {
  margin-left: auto;
  color: var(--text-secondary);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.workflow-governance-details[open] > summary > .workflow-governance-details__chevron {
  transform: rotate(180deg);
}

.workflow-governance-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-governance-list > li {
  display: grid;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--border-default);
  border-left: 3px solid transparent;
}

.workflow-governance-list > li.is-blocker {
  border-left-color: var(--status-danger);
}

.workflow-governance-list > li.is-warning {
  border-left-color: var(--status-warning);
}

.workflow-governance-list > li.is-info {
  border-left-color: var(--status-info);
}

.workflow-governance-list > li > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-governance-list > li > header > span,
.workflow-governance-list > li > header > small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.workflow-governance-list > li > header svg {
  width: 14px;
  height: 14px;
}

.workflow-governance-list > li.is-blocker > header > span {
  color: var(--status-danger);
}

.workflow-governance-list > li.is-warning > header > span,
.workflow-governance-list > li.is-warning > header > small {
  color: var(--status-warning);
}

.workflow-governance-list > li.is-info > header > span {
  color: var(--status-info);
}

.workflow-governance-list > li > strong {
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.workflow-governance-list > li > p,
.workflow-governance-thread-list > li > span {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.workflow-governance-thread-list > li > header > strong {
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}

.workflow-tool-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-tool-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 47px;
  border: 0;
  border-right: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
}

.workflow-tool-tabs button svg {
  width: 16px;
  height: 16px;
}

.workflow-tool-tabs button[aria-selected='true'] {
  color: var(--action-primary);
  background: var(--surface-panel);
  box-shadow: inset 0 -2px 0 var(--action-primary);
}

.workflow-tool-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.workflow-tool-content > .workflow-outputs,
.workflow-tool-content > .event-history {
  width: 100%;
  margin: 0;
  padding: var(--space-4);
  border-top: 0;
}

.workflow-tool-content .workflow-output-document pre {
  max-height: none;
  min-height: 360px;
}

.workflow-output-document__live-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-output-document__live-status svg {
  width: 16px;
  height: 16px;
}

.workflow-character-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.workflow-character-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.workflow-character-panel h2,
.workflow-character-panel h3 {
  margin: 0;
}

.workflow-character-panel h2 {
  font-size: 1.125rem;
}

.workflow-character-panel .button svg {
  width: 15px;
  height: 15px;
}

.workflow-tool-state {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--text-secondary);
}

.workflow-tool-state strong {
  color: var(--text-primary);
}

.workflow-character-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-character-list > li {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
}

.workflow-character-list > li > header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.workflow-character-list > li > header svg {
  width: 22px;
  height: 22px;
  color: var(--action-primary);
}

.workflow-character-list > li > header span,
.workflow-character-list > li > p,
.workflow-character-list__want {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.workflow-character-list > li > p {
  margin: 0;
}

.workflow-character-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.workflow-character-list dl > div {
  display: grid;
  gap: var(--space-1);
}

.workflow-character-list dt {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-character-list dd {
  margin: 0;
}

.workflow-character-list__tags,
.workflow-character-list__want {
  margin: 0;
}

.segmented-control {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-panel);
}

.segmented-control button {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.segmented-control button + button {
  border-left: 1px solid var(--border-default);
}

.segmented-control button[aria-pressed='true'] {
  color: var(--action-primary-text);
  background: var(--action-primary);
}

.workflow-current {
  display: grid;
  gap: var(--space-6);
  width: min(100%, 820px);
}

.workflow-chat {
  display: flex;
  flex-direction: column;
  height: 620px;
  max-height: 72vh;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-panel);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 20px rgb(15 23 42 / 5%);
}

.workflow-chat__knowledge {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: var(--surface-panel);
}

.workflow-chat__knowledge > svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--status-info);
}

.workflow-chat__knowledge--injected > svg {
  color: var(--status-success);
}

.workflow-chat__knowledge > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--space-2);
  min-width: 0;
}

.workflow-chat__knowledge strong,
.workflow-chat__knowledge span,
.workflow-chat__knowledge small {
  overflow-wrap: anywhere;
}

.workflow-chat__knowledge strong {
  color: var(--text-primary);
  font-size: 0.75rem;
}

.workflow-chat__knowledge span,
.workflow-chat__knowledge small {
  font-size: 0.6875rem;
}

.workflow-chat__knowledge small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-chat__knowledge-details {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.workflow-chat__knowledge-details summary {
  width: fit-content;
  color: var(--status-info);
  font-size: 0.6875rem;
  font-weight: 650;
  cursor: pointer;
}

.workflow-chat__knowledge-details ul {
  display: grid;
  gap: var(--space-2);
  max-height: 168px;
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-1) 0 18px;
  overflow: auto;
}

.workflow-chat__knowledge-details li {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.workflow-chat__knowledge-details li > strong,
.workflow-chat__knowledge-details li > span,
.workflow-chat__knowledge-details li > p {
  display: block;
}

.workflow-chat__knowledge-details li > strong {
  font-size: 0.75rem;
}

.workflow-chat__knowledge-details li > span,
.workflow-chat__knowledge-details li > p,
.workflow-chat__knowledge-conflict {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.workflow-chat__knowledge-conflict {
  color: var(--status-warning);
}

.workflow-chat__knowledge-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.workflow-chat__knowledge-reasons em {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--status-info);
  background: var(--status-info-bg);
  font-size: 0.625rem;
  font-style: normal;
}

.workflow-chat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 66px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-chat__header h2 {
  margin: var(--space-1) 0 0;
  font-size: 1.125rem;
}

.workflow-chat__header > span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.workflow-chat__messages {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--surface-subtle);
  font-size: 0.875rem;
}

.workflow-chat__message {
  display: grid;
  gap: var(--space-2);
  width: fit-content;
  max-width: min(82%, 620px);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-panel);
}

.workflow-chat__message--user {
  margin-left: auto;
  border-color: var(--action-primary);
  background: var(--surface-hover);
}

.workflow-chat__message--artifact {
  width: min(96%, 780px);
  max-width: none;
  border-color: var(--border-strong);
  background: var(--surface-panel);
}

.workflow-chat__message--decision {
  width: min(94%, 720px);
  max-width: 720px;
}

.workflow-chat__decision {
  display: grid;
  gap: var(--space-3);
}

.workflow-chat__assessment {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.6;
}

.workflow-chat__options {
  display: grid;
  gap: var(--space-2);
}

.workflow-chat__option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  min-height: 58px;
  padding: 10px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-panel);
  color: var(--text-primary);
  text-align: left;
}

.workflow-chat__option:not(.is-read-only):hover,
.workflow-chat__option[aria-pressed='true'] {
  border-color: var(--action-primary);
  background: var(--surface-hover);
}

.workflow-chat__option.is-recommended {
  border-color: var(--action-primary);
}

.workflow-chat__option-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-weight: 800;
}

.workflow-chat__option.is-recommended .workflow-chat__option-key {
  background: var(--action-primary);
  color: var(--action-primary-text);
}

.workflow-chat__option > span:last-child {
  display: grid;
  gap: var(--space-1);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.workflow-chat__option strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-chat__option.is-recommended strong {
  color: var(--action-primary);
}

.workflow-chat__option strong svg {
  width: 14px;
  height: 14px;
}

.workflow-chat__question {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  font-size: 0.8125rem;
}

.workflow-chat__question > strong {
  color: var(--action-primary);
  font-size: 0.75rem;
}

.workflow-chat__question small {
  color: var(--text-secondary);
  line-height: 1.5;
}

.workflow-chat__artifact-label {
  margin-left: auto;
  color: var(--action-primary);
  font-weight: 700;
}

.workflow-chat__artifact {
  display: grid;
  gap: var(--space-2);
}

.workflow-chat__artifact > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.workflow-chat__artifact h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.workflow-chat__artifact > div span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-align: right;
}

.workflow-chat__artifact pre {
  max-height: 320px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-subtle);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
}

.workflow-chat__message > header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-chat__message > header svg,
.workflow-chat__typing svg {
  width: 16px;
  height: 16px;
}

.workflow-chat__message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  line-height: 1.6;
}

.workflow-chat__recommendation {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.workflow-chat__recommendation strong {
  color: var(--action-primary);
  font-size: 0.75rem;
}

.workflow-chat__recommendation small {
  color: var(--text-secondary);
  line-height: 1.5;
}

.workflow-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-chat__message-error {
  display: grid;
  gap: var(--space-2);
  color: var(--status-danger);
  font-size: 0.8125rem;
}

.workflow-chat__message-error p,
.workflow-chat__message-error small {
  margin: 0;
}

.workflow-chat__message-error small {
  color: var(--text-secondary);
  line-height: 1.5;
}

.workflow-chat__message-error .button {
  width: fit-content;
  margin-top: var(--space-1);
}

.workflow-chat__retry-message {
  justify-self: end;
  min-height: 30px;
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
}

.workflow-chat__retry-message svg {
  width: 14px;
  height: 14px;
}

.workflow-chat__feedback-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.workflow-chat__feedback-action .button {
  min-height: 30px;
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
}

.workflow-chat__feedback-action svg {
  width: 14px;
  height: 14px;
}

.workflow-chat__feedback-action > span {
  color: var(--status-success);
  font-size: 0.6875rem;
}

.workflow-feedback-editor {
  display: grid;
  gap: var(--space-3);
  width: min(100%, 620px);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.workflow-feedback-editor > header,
.workflow-feedback-editor > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.workflow-feedback-editor > header > div {
  display: grid;
  gap: 3px;
}

.workflow-feedback-editor > header small,
.workflow-feedback-editor > footer span {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.workflow-feedback-editor > header .button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
}

.workflow-feedback-editor > header svg {
  width: 14px;
  height: 14px;
}

.workflow-feedback-editor > label {
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.workflow-feedback-editor select,
.workflow-feedback-editor textarea {
  width: 100%;
  border-radius: 6px;
  font-size: 0.8125rem;
}

.workflow-feedback-editor textarea {
  min-height: 64px;
  max-height: 140px;
  resize: vertical;
}

.workflow-feedback-editor > footer {
  align-items: center;
}

.workflow-feedback-editor > footer .button {
  flex: 0 0 auto;
}

.workflow-chat__composer {
  display: grid;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--surface-panel);
}

.workflow-chat__monitor-footer {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 66px;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--surface-panel);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-chat__monitor-footer > svg {
  width: 18px;
  height: 18px;
  color: var(--action-primary);
}

.workflow-chat__monitor-footer > span {
  display: grid;
  gap: 2px;
}

.workflow-chat__monitor-footer strong {
  color: var(--text-primary);
  font-size: 0.8125rem;
}

.workflow-chat__blocked {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-chat__composer > label {
  font-size: 0.75rem;
  font-weight: 700;
}

.workflow-chat__stopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 36px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.workflow-chat__stopbar > span {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-chat__stopbar .button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

.workflow-chat__stopbar svg {
  width: 14px;
  height: 14px;
}

.workflow-chat__composer > div:not(.workflow-chat__stopbar) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: end;
  gap: var(--space-2);
}

.workflow-chat__composer textarea {
  min-height: 72px;
  max-height: 112px;
  resize: none;
  overflow-y: auto;
  border-radius: 8px;
  font-size: 0.875rem;
}

.workflow-chat__send {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
}

.workflow-chat__send svg {
  width: 18px;
  height: 18px;
}

.workflow-execution {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-default);
}

.workflow-execution > header,
.workflow-outputs > header,
.workflow-output-document__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.workflow-execution h2,
.workflow-outputs h2,
.workflow-output-document h3 {
  margin: 0;
}

.workflow-execution h2,
.workflow-outputs h2 {
  font-size: 1.25rem;
}

.workflow-execution > header > span,
.workflow-outputs > header > span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.workflow-execution > p {
  margin: 0;
  color: var(--text-secondary);
}

.workflow-execution .button {
  justify-self: start;
}

.workflow-execution__notice,
.workflow-execution__complete {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--status-info) 38%, transparent);
  border-radius: var(--radius-small);
  background: var(--status-info-bg);
}

.workflow-execution__managed-recovery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-secondary);
}

.workflow-execution__managed-recovery--reportable {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--status-warning) 42%, transparent);
  border-radius: var(--radius-small);
  background: var(--status-warning-bg);
}

.workflow-live-output {
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-panel);
}

.workflow-live-output > div {
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.workflow-live-output svg {
  width: 17px;
  height: 17px;
  color: var(--action-primary);
}

.workflow-live-output span {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.workflow-live-output pre,
.workflow-output-document pre,
.workflow-output-archive pre,
.workflow-chat__artifact pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.75;
  content-visibility: auto;
  contain-intrinsic-size: 0 480px;
}

.workflow-live-output pre {
  min-height: 194px;
  padding: var(--space-4);
}

.is-spinning {
  animation: workflow-spin 1s linear infinite;
}

@keyframes workflow-spin {
  to { transform: rotate(360deg); }
}

.workflow-outputs {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 820px);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-strong);
}

.workflow-outputs__empty {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--text-secondary);
}

.workflow-outputs__empty strong {
  color: var(--text-primary);
}

.workflow-output-document {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-panel);
}

.workflow-output-deferred {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.workflow-output-deferred > svg {
  width: 18px;
  height: 18px;
  color: var(--action-primary);
}

.workflow-output-deferred > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.workflow-output-deferred > div span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.workflow-output-deferred .button {
  white-space: nowrap;
}

.workflow-output-document__heading {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.workflow-output-document__heading span,
.workflow-output-document time,
.workflow-output-archive time {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.workflow-output-document h3 {
  margin-top: var(--space-1);
  font-size: 1rem;
}

.workflow-output-document pre {
  max-height: 560px;
  padding: var(--space-4);
  overflow: auto;
}

.workflow-output-archive {
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.workflow-output-archive > summary {
  padding: var(--space-3) 0;
  font-weight: 700;
  cursor: pointer;
}

.workflow-output-archive ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-output-archive li {
  border-top: 1px solid var(--border-default);
}

.workflow-output-archive li summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
}

.workflow-output-archive pre {
  max-height: 420px;
  padding: 0 0 var(--space-4);
  overflow: auto;
}

.decision-panel__context {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.decision-panel__context strong {
  color: var(--status-warning);
}

.decision-panel h2 {
  margin-bottom: var(--space-6);
  font-size: 1.375rem;
  line-height: 1.4;
}

.recommendation {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--status-info) 38%, transparent);
  border-radius: var(--radius-small);
  background: var(--status-info-bg);
}

.recommendation__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--status-info);
  font-weight: 700;
}

.recommendation__label svg {
  width: 16px;
  height: 16px;
}

.recommendation > p {
  margin: var(--space-3) 0;
  color: var(--text-primary);
  font-size: 1.0625rem;
}

.recommendation details p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.recommendation summary,
.event-history summary {
  cursor: pointer;
}

.decision-panel__response {
  margin-bottom: var(--space-4);
}

.decision-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.inline-error {
  margin: var(--space-3) 0;
  color: var(--status-danger);
}

.workflow-next-action {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.workflow-next-action > span {
  color: var(--action-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.workflow-next-action h2 {
  margin: var(--space-1) 0;
}

.workflow-next-action p {
  color: var(--text-secondary);
}

.event-history {
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-4);
  color: var(--text-secondary);
}

.event-history ol {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.event-history li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default);
}

.event-history li > div {
  display: grid;
  gap: var(--space-1);
}

.event-history li span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.event-history time {
  flex: 0 0 auto;
  font-size: 0.8125rem;
}

@media (max-width: 760px) {
  .workflow-topbar,
  .workflow-header,
  .workflow-header__title,
  .workflow-header__actions,
  .workflow-model-control__actions {
    width: 100%;
    min-width: 0;
  }

  .workflow-start {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kicker"
      "title"
      "intro"
      "recommend"
      "error"
      "field"
      "mode"
      "action"
      "summary";
  }

  .profile-lock,
  .decision-panel__actions {
    align-items: stretch;
  }

  .decision-panel__actions {
    flex-direction: column;
  }

  .workflow-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    margin: 0;
  }

  .workflow-header__actions {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .workflow-model-control {
    order: 3;
    display: block;
    width: 100%;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border-default);
    border-right: 0;
  }

  .workflow-model-control > svg,
  .workflow-model-control__current {
    display: none;
  }

  .workflow-model-control__actions,
  .workflow-model-control__message,
  .workflow-model-control__error {
    grid-column: 1 / -1;
  }

  .workflow-model-control__actions {
    align-items: stretch;
  }

  .workflow-model-control__actions select {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .workflow-mode-lock {
    min-width: 0;
    margin-right: auto;
    padding-right: 0;
    border-right: 0;
  }

  .workflow-header__title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
  }

  .workflow-header__title > div:first-child {
    align-items: baseline;
    flex-wrap: wrap;
    white-space: normal;
  }

  .workflow-usage-summary {
    width: auto;
  }

  .workflow-usage-summary__metric {
    flex: 1;
    grid-template-columns: 14px minmax(0, 1fr);
    min-width: 0;
    padding: 5px 6px;
  }

  .workflow-usage-summary__metric > svg {
    width: 14px;
    height: 14px;
  }

  .stage-track {
    display: none;
  }

  .stage-track-mobile {
    display: block;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--surface-subtle);
  }

  .stage-track-mobile summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    cursor: pointer;
    list-style: none;
  }

  .stage-track-mobile summary::-webkit-details-marker {
    display: none;
  }

  .stage-track-mobile summary span,
  .stage-track-mobile summary small {
    color: var(--text-secondary);
    font-size: 0.75rem;
  }

  .stage-track-mobile ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stage-track-mobile .stage-track__item {
    min-height: 60px;
    padding: var(--space-2) 0;
  }

  .stage-track-mobile .stage-track__item > div {
    display: grid;
    justify-content: stretch;
    gap: 0;
  }

  .stage-track-mobile .stage-track__item strong {
    overflow: visible;
    white-space: normal;
  }

  .stage-track-mobile .stage-track__item div > span {
    margin-top: var(--space-1);
  }

  .stage-track-mobile .stage-track__item + .stage-track__item {
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }

  .profile-lock {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .decision-panel__actions .button {
    width: 100%;
  }

  .decision-panel__actions .button--primary {
    order: -1;
  }

  .decision-panel h2 {
    margin-bottom: var(--space-4);
    font-size: 1.25rem;
  }

  .recommendation {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
  }

  .decision-panel__response textarea {
    min-height: 84px;
  }

  .event-history li {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .workflow-execution > header,
  .workflow-outputs > header,
  .workflow-output-document__heading {
    flex-direction: column;
    gap: var(--space-2);
  }

  .workflow-execution .button {
    width: 100%;
  }

  .workflow-chat {
    height: 520px;
    max-height: 62vh;
    min-height: 420px;
  }

  .workflow-pane-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-panel);
  }

  .workflow-pane-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .workflow-pane-switch button + button {
    border-left: 1px solid var(--border-default);
  }

  .workflow-pane-switch button[aria-selected='true'] {
    color: var(--action-primary-text);
    background: var(--action-primary);
  }

  .workflow-pane-switch svg {
    width: 16px;
    height: 16px;
  }

  .workflow-production-grid {
    display: block;
    flex: 1 1 0;
    height: 0;
    min-height: 0;
  }

  .workflow-sidebar-stage {
    padding: var(--space-2);
  }

  .workflow-sidebar-stage__heading {
    display: none;
  }

  .workflow-conversation-pane,
  .workflow-document-pane {
    height: 100%;
    min-height: 0;
  }

  .workflow-production-grid .is-mobile-hidden {
    display: none;
  }

  .workflow-production-grid .workflow-chat {
    height: 100%;
    max-height: none;
    min-height: 0;
  }

  .workflow-document-pane--storyboard .workflow-document-pane__header {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    row-gap: 6px;
    padding-block: 10px;
  }

  .workflow-document-pane--storyboard .workflow-document-pane__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 28px;
  }

  .workflow-revision-bar--compact .workflow-revision-history,
  .workflow-revision-bar--compact .workflow-revision-dialog {
    position: fixed;
    inset: 64px 12px auto;
    width: auto;
    max-height: calc(100vh - 88px);
  }

  .workflow-revision-history__toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workflow-revision-history__toolbar .button {
    flex: 0 0 auto;
  }

  .workflow-chat__knowledge--document small {
    display: none;
  }

  .workflow-execution-dock {
    grid-template-columns: 1fr;
    padding: var(--space-1) var(--space-4) 20px;
  }

  .workflow-execution-dock > .button {
    width: 100%;
  }

  .workflow-execution-dock > .workflow-execution-dock__actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    width: 100%;
  }

  .workflow-execution-dock__actions .button {
    width: 100%;
  }

  .workflow-tool-tabs {
    overflow-x: auto;
  }

  .workflow-tool-tabs button {
    flex: 1 0 auto;
    white-space: nowrap;
  }

  .workflow-tool-content .workflow-output-document pre {
    min-height: 300px;
    max-height: none;
  }

  .workflow-periodic-audit > header {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-periodic-audit__status {
    align-self: flex-start;
  }

  .workflow-periodic-audit__metrics header,
  .workflow-periodic-audit__evidence > div > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .workflow-character-panel > header {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-chat__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--space-1);
    min-height: 62px;
  }

  .workflow-monitor-banner {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .workflow-monitor-banner > .status-label {
    grid-column: 2;
    justify-self: start;
  }

  .workflow-chat__header > span {
    overflow-wrap: anywhere;
  }

  .workflow-chat__knowledge > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-chat__knowledge small {
    grid-column: 1;
  }

  .workflow-chat__message {
    max-width: 92%;
  }

  .workflow-chat__message--artifact {
    width: 100%;
    max-width: 100%;
  }

  .workflow-chat__artifact > div {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .workflow-chat__artifact > div span {
    text-align: left;
  }

  .workflow-chat__composer {
    padding: var(--space-3);
  }

  .workflow-chat__stopbar {
    align-items: flex-start;
  }

  .workflow-live-output > div {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .workflow-live-output > div span {
    grid-column: 1 / -1;
  }

  .workflow-output-document pre {
    max-height: min(60vh, 480px);
  }

  .workflow-output-deferred {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .workflow-output-deferred .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .workflow-template-summary__facts {
    grid-template-columns: 1fr;
  }

  .workflow-composition-recommendation__packs {
    grid-template-columns: 1fr;
  }

  .workflow-template-summary__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-template-summary__status {
    justify-content: flex-start;
  }
}
.characters-workspace {
  width: min(100%, 1280px);
}

.characters-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.characters-header h1 {
  margin-bottom: 0;
  font-size: 1.75rem;
}

.characters-header > span {
  color: var(--text-secondary);
}

.characters-layout {
  display: grid;
  grid-template-columns: 196px minmax(420px, 1fr) minmax(180px, 240px);
  gap: var(--space-6);
  align-items: start;
}

.character-list,
.character-versions {
  min-width: 0;
}

.character-list__header,
.character-editor__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.character-list h2,
.character-versions h2,
.character-editor h2 {
  margin: 0;
  font-size: 1rem;
}

.character-list__header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.character-list__header svg,
.character-list__create svg {
  width: 16px;
  height: 16px;
}

.character-list ul,
.character-versions ol {
  margin: var(--space-3) 0;
  padding: 0;
  border-top: 1px solid var(--border-default);
  list-style: none;
}

.character-list li,
.character-versions li {
  border-bottom: 1px solid var(--border-default);
}

.character-list li > button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: var(--space-3) var(--space-2);
  text-align: left;
  background: transparent;
}

.character-list li > button.is-selected {
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.character-list li span {
  grid-row: 1 / span 2;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.character-list li strong {
  overflow-wrap: anywhere;
}

.character-list li small {
  color: var(--text-secondary);
}

.character-list__create {
  width: 100%;
}

.character-editor {
  min-width: 0;
}

.character-editor__title {
  margin-bottom: var(--space-4);
}

.character-editor__title span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.character-field-group {
  border-top: 1px solid var(--border-default);
}

.character-field-group:last-of-type {
  border-bottom: 1px solid var(--border-default);
}

.character-field-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
}

.character-field-group summary::-webkit-details-marker {
  display: none;
}

.character-field-group summary span,
.character-field-group summary small {
  display: block;
}

.character-field-group summary small {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-weight: 400;
}

.character-field-group summary svg {
  width: 17px;
  height: 17px;
  transition: transform 160ms ease;
}

.character-field-group[open] summary svg {
  transform: rotate(180deg);
}

.character-field-group__content {
  padding: 0 0 var(--space-6);
}

.character-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field-with-lock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
}

.field-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 42px;
  color: var(--text-secondary);
}

.field-lock svg {
  width: 15px;
  height: 15px;
}

.string-list {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  padding: 0;
}

.string-list legend {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.string-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.string-list__row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-panel);
}

.string-list__row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.string-list__row svg,
.string-list__add svg {
  width: 15px;
  height: 15px;
}

.string-list__add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.character-form__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-6);
}

.character-versions li {
  padding: var(--space-3) 0;
}

.character-versions li span {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.character-versions li p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.character-empty {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.character-empty p {
  color: var(--text-secondary);
}

@media (max-width: 1080px) {
  .characters-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .character-versions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .characters-layout,
  .character-form__grid {
    grid-template-columns: 1fr;
  }

  .character-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    border-top: 0;
    gap: var(--space-2);
  }

  .character-list li {
    border: 1px solid var(--border-default);
  }

  .character-list li > button.is-selected {
    box-shadow: inset 0 3px 0 var(--action-primary);
  }

  .character-editor,
  .character-versions {
    grid-column: 1;
  }

  .field-with-lock {
    grid-template-columns: 1fr;
  }

  .field-lock {
    justify-self: start;
  }
}
.dialogue-index,
.dialogue-run {
  width: min(100%, 1180px);
}

.workflow-tool-content .dialogue-embedded {
  width: 100%;
  padding: var(--space-4);
}

.workflow-tool-content .dialogue-embedded .dialogue-header {
  margin-bottom: var(--space-4);
}

.workflow-tool-content .dialogue-embedded .dialogue-index__layout,
.workflow-tool-content .dialogue-embedded .dialogue-run__layout,
.workflow-tool-content .dialogue-embedded .review-layout {
  grid-template-columns: 1fr;
}

.workflow-tool-content .dialogue-embedded .run-inspector {
  border-left: 0;
  border-top: 1px solid var(--border-default);
}

.dialogue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dialogue-header h1 {
  margin: 0;
  font-size: 1.75rem;
}

.dialogue-index__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: var(--space-8);
  align-items: start;
}

.run-create,
.run-list {
  min-width: 0;
}

.run-create h2,
.run-list h2,
.run-inspector h2 {
  margin-bottom: var(--space-4);
  font-size: 1rem;
}

.run-create {
  display: grid;
  gap: var(--space-4);
}

.change-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  border: 0;
  padding: 0;
}

.change-options legend {
  grid-column: 1 / -1;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.change-options label,
.llm-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.change-options input,
.llm-switch input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
}

.llm-notice {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--status-warning) 38%, transparent);
  border-radius: var(--radius-small);
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.llm-notice span {
  color: var(--text-secondary);
}

.run-list ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-default);
  list-style: none;
}

.run-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}

.run-list li > div span {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.run-list li > .button {
  grid-column: 2;
}

.dialogue-run__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--space-8);
  align-items: start;
}

.run-main {
  min-width: 0;
}

.run-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 var(--space-6);
  padding: 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  list-style: none;
}

.run-progress li {
  padding: var(--space-3);
  color: var(--text-secondary);
  text-align: center;
}

.run-progress li + li {
  border-left: 1px solid var(--border-default);
}

.run-progress li.is-current {
  color: var(--text-primary);
  background: var(--surface-hover);
  box-shadow: inset 0 3px 0 var(--action-primary);
}

.run-failure {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--status-danger) 38%, transparent);
  border-radius: var(--radius-small);
  color: var(--status-danger);
  background: var(--status-danger-bg);
}

.run-failure h2 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.run-failure p {
  margin-bottom: var(--space-2);
}

.run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.run-inspector {
  min-width: 0;
  padding-left: var(--space-6);
  border-left: 1px solid var(--border-default);
}

.run-inspector dl {
  margin: 0 0 var(--space-6);
}

.run-inspector dl > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default);
}

.run-inspector dt {
  color: var(--text-secondary);
}

.run-inspector dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.run-inspector h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 0.875rem;
}

.run-inspector p {
  color: var(--text-secondary);
}

.risk-capability {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.review-workspace {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-strong);
}

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: var(--space-6);
  align-items: start;
}

.diff-viewer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.diff-viewer__header h2,
.review-reports h2,
.change-summaries h2 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.diff-viewer__header p {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.diff-table-wrap,
.diff-raw {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border-default);
  background: var(--surface-panel);
}

.diff-empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: var(--surface-panel);
}

.diff-raw {
  margin: 0;
  padding: var(--space-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff-viewer {
  --diff-background-color: var(--surface-panel);
  --diff-text-color: var(--text-primary);
  --diff-font-family: "Cascadia Mono", "Noto Sans Mono CJK SC", monospace;
  --diff-gutter-insert-background-color: var(--status-success-bg);
  --diff-gutter-delete-background-color: var(--status-danger-bg);
  --diff-code-insert-background-color: var(--status-success-bg);
  --diff-code-delete-background-color: var(--status-danger-bg);
  --diff-code-insert-edit-background-color: var(--diff-insert-edit);
  --diff-code-delete-edit-background-color: var(--diff-delete-edit);
}

.diff-viewer .diff {
  width: 100%;
  table-layout: fixed;
  font-size: 0.8125rem;
}

.diff-viewer .diff-code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.review-reports {
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-default);
}

.review-report {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);
}

.review-report header {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.review-report header svg {
  width: 17px;
  height: 17px;
}

.review-report.is-passed header {
  color: var(--status-success);
}

.review-report.is-failed header {
  color: var(--status-danger);
}

.review-report p,
.review-report li,
.review-report dl {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.review-report dl > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-2);
}

.review-report dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.change-summaries {
  margin-top: var(--space-4);
}

.change-summaries dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.change-summaries dl > div {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-2);
}

.change-summaries dt {
  color: var(--text-secondary);
}

.change-summaries dd {
  margin: var(--space-1) 0 0;
  font-weight: 700;
}

.version-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.version-actions__primary,
.version-actions__history {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.document-history {
  margin-top: var(--space-6);
}

.document-history summary {
  cursor: pointer;
  font-weight: 700;
}

.document-history ol,
.document-history ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.document-history li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default);
}

.document-history li span,
.document-history li em {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.document-history li em {
  color: var(--status-success);
}

@media (max-width: 900px) {
  .dialogue-index__layout,
  .dialogue-run__layout {
    grid-template-columns: 1fr;
  }

  .review-layout {
    grid-template-columns: 1fr;
  }

  .review-reports {
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }

  .run-inspector {
    padding: var(--space-6) 0 0;
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .dialogue-header,
  .run-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .change-options {
    grid-template-columns: 1fr;
  }

  .run-progress {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .run-progress li {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: var(--space-2) var(--space-1);
    font-size: 0.75rem;
  }

  .run-progress li + li {
    border-top: 0;
    border-left: 1px solid var(--border-default);
  }

  .run-actions .button {
    width: 100%;
  }

  .diff-viewer__header,
  .version-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .diff-viewer__header .segmented-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .change-summaries dl {
    grid-template-columns: 1fr;
  }

  .review-workspace {
    display: flex;
    flex-direction: column;
  }

  .review-workspace > .version-actions {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-6);
  }
}
.admin-shell {
  --admin-glass-panel: var(--production-glass-panel);
  --admin-glass-panel: color-mix(in srgb, var(--production-glass-panel) 92%, transparent);
  --admin-glass-strong: var(--production-glass-strong);
  --admin-glass-strong: color-mix(in srgb, var(--production-glass-strong) 94%, transparent);
  --admin-glass-featured: var(--production-glass-featured);
  --admin-glass-field: var(--production-glass-field);
  --admin-glass-field: color-mix(in srgb, var(--production-glass-field) 94%, transparent);
  --surface-page: transparent;
  --surface-panel: var(--admin-glass-panel);
  --surface-subtle: var(--admin-glass-strong);
  --surface-muted: var(--admin-glass-strong);
  --surface-hover: var(--admin-glass-featured);
  --text-primary: var(--production-text);
  --text-secondary: var(--production-muted);
  --text-tertiary: var(--production-faint);
  --border-default: var(--production-border);
  --border-strong: var(--production-border-strong);
  --shadow-panel: 0 18px 48px rgb(7 12 18 / 22%);
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr);
  grid-template-columns: 240px minmax(0, 1fr);
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--production-text);
  background: transparent;
}

.admin-shell > .production-video-backdrop {
  --production-video-opacity: 1;
  position: fixed;
  z-index: 0;
  inset: 0;
}

.admin-shell > .production-video-backdrop video {
  filter: saturate(0.56) contrast(0.98) brightness(0.86);
}

:root[data-theme="dark"] .admin-shell > .production-video-backdrop video {
  filter: saturate(0.5) contrast(1.06) brightness(0.56);
}

.admin-topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: center;
  position: relative;
  z-index: 30;
  min-width: 0;
  border-bottom: 1px solid var(--production-studio-border);
  color: var(--production-studio-text);
  background: rgb(12 17 23 / 68%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  text-shadow: var(--production-studio-shadow);
}

.admin-topbar > .product-brand {
  height: 100%;
  padding: 0 var(--space-5, 20px);
  border-right: 1px solid var(--production-studio-border);
  color: var(--production-studio-text);
  font-weight: 750;
}

.admin-topbar .product-brand__copy strong,
.admin-topbar .account-summary,
.admin-topbar .preferences-menu__trigger,
.admin-topbar .button--quiet {
  color: var(--production-studio-text);
}

.admin-topbar .product-brand__copy > span,
.admin-topbar .account-summary small {
  color: var(--production-studio-muted);
}

.admin-topbar__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  color: var(--production-studio-text);
}

.admin-topbar__context svg {
  width: 17px;
  height: 17px;
  color: var(--production-studio-muted);
}

.admin-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  padding-right: var(--space-3);
}

.admin-topbar__actions > .button {
  min-height: 40px;
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
  min-height: 0;
  padding: var(--space-6) var(--space-3);
  border-right: 1px solid var(--border-default);
  background: var(--admin-glass-strong);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.admin-sidebar__label {
  margin: 0 var(--space-3) var(--space-2);
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
}

.admin-nav a:hover,
.admin-nav a.active {
  color: var(--text-primary);
  background: var(--admin-glass-featured);
}

.admin-nav a.active {
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.admin-nav svg {
  width: 17px;
  height: 17px;
}

.admin-sidebar__notice {
  display: grid;
  gap: var(--space-1);
  margin-top: auto;
  padding: var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.admin-sidebar__notice strong {
  color: var(--text-primary);
}

.admin-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  padding: var(--space-8) clamp(var(--space-4), 4vw, 56px) 64px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.admin-page {
  width: min(100%, 920px);
}

.admin-page--models {
  width: min(100%, 1120px);
}

.video-settings-page {
  width: min(100%, 1240px);
}

.video-settings-form {
  display: grid;
  gap: var(--space-8);
}

.video-settings-page .settings-panel {
  min-width: 0;
  gap: var(--space-6);
  padding: 28px 32px 32px;
  border-radius: 12px;
  border-color: var(--production-border);
  background: color-mix(in srgb, var(--production-glass-panel) 96%, transparent);
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.video-settings-page .video-settings-row {
  min-width: 0;
  gap: var(--space-6);
  padding: 24px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--production-border) 88%, transparent);
  background: color-mix(in srgb, var(--production-glass-strong) 90%, transparent);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

.video-settings-page .field {
  min-width: 0;
}

.video-settings-page .field input,
.video-settings-page .field select {
  min-width: 0;
  min-height: 42px;
  padding: 10px 13px;
}

.video-settings-page .form-grid {
  gap: 20px 24px;
}

.video-settings-page .field {
  gap: var(--space-2);
  line-height: 1.35;
}

.video-settings-page .field .field-help {
  margin: -2px 0 0;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
}

.video-pricing-grid {
  display: grid;
  grid-template-columns: minmax(72px, .7fr) repeat(2, minmax(120px, 1fr));
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--production-border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--production-glass-field) 50%, transparent);
}

.video-pricing-grid strong,
.video-pricing-grid span {
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
}

.video-pricing-grid input {
  width: 100%;
}

.video-pricing-grid--enhancement {
  grid-template-columns: minmax(112px, .7fr) minmax(120px, 1fr);
}

.video-pricing-matrix-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--production-border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--production-glass-field) 50%, transparent);
}

.video-pricing-matrix {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) repeat(3, minmax(112px, 1fr));
  min-width: 520px;
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
}

.video-pricing-matrix strong,
.video-pricing-matrix span {
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
}

.video-pricing-matrix input {
  width: 100%;
}

.video-settings-page .checkbox {
  display: inline-flex;
  align-items: center;
  align-self: end;
  gap: var(--space-2);
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--production-border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--production-glass-field) 58%, transparent);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.video-settings-page .checkbox input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 auto;
  width: 16px !important;
  min-width: 16px;
  height: 16px !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none !important;
}

.video-settings-page .video-settings-row .form-grid > .checkbox {
  align-self: end;
  min-height: 42px;
}

.video-settings-page .field > .checkbox {
  min-height: 24px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.settings-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.settings-panel__heading > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.settings-panel__heading > div > svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--action-primary);
}

.settings-panel__heading h2,
.settings-panel__heading p {
  margin: 0;
}

.settings-panel__heading p {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.video-settings-row {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
}

.video-settings-page .video-settings-row + .video-settings-row {
  margin-top: 0;
}

.video-settings-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--production-border) 72%, transparent);
}

.video-settings-row__actions .button {
  min-height: 38px;
}

.video-settings-page .settings-panel__heading {
  align-items: center;
  gap: var(--space-6);
  padding-bottom: 20px;
}

.video-settings-page .settings-panel__heading > div {
  gap: 14px;
  min-width: 0;
}

.video-settings-page .settings-panel__heading h2 {
  line-height: 1.3;
}

.video-settings-page .settings-panel__heading p {
  max-width: 70ch;
  line-height: 1.5;
}

.settings-empty {
  margin: 0;
  color: var(--text-secondary);
}

.background-video-settings-page {
  width: min(100%, 1120px);
}

.background-video-settings-page .admin-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.background-video-settings-page .admin-page__header h1 {
  margin: 0;
  color: var(--text-primary);
}

.background-video-settings-page .admin-page__header p:not(.eyebrow) {
  max-width: 74ch;
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.background-video-settings-page__version {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  background: var(--surface-subtle);
}

.background-video-upload-panel,
.background-video-catalog-panel {
  display: grid;
  gap: var(--space-6);
}

.background-video-upload-panel__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.background-video-catalog {
  display: grid;
  gap: var(--space-3);
}

.background-video-item {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
}

.background-video-item__preview {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: #0b1118;
}

.background-video-item__preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.background-video-item__meta,
.background-video-item__title,
.background-video-item__facts {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.background-video-item__title strong {
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.background-video-item__title span,
.background-video-item__facts {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.background-video-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.background-video-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.background-video-item__actions .icon-button {
  color: var(--text-secondary);
  border-radius: var(--radius-small);
}

.background-video-item__actions .icon-button:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.background-video-item__actions .icon-button--danger {
  color: var(--status-danger, #c03434);
}

.background-video-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: 48px 24px;
  text-align: center;
}

.background-video-empty svg {
  width: 28px;
  height: 28px;
  color: var(--text-tertiary);
}

.admin-access-panel {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
}

.admin-access-panel h2,
.admin-access-panel p {
  margin: 0;
}

.background-video-settings-page .spin {
  animation: spin 900ms linear infinite;
}

.field--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.field--inline span {
  white-space: nowrap;
}

.button--danger {
  color: var(--status-danger, #c03434);
}

@media (max-width: 720px) {
  .background-video-settings-page .admin-page__header {
    display: grid;
  }

  .background-video-item {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .background-video-item__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-default);
  }

  .video-settings-page .settings-panel {
    gap: var(--space-5);
    padding: 20px;
  }

  .settings-panel__heading {
    flex-direction: column;
  }

  .video-settings-page .video-settings-row {
    gap: var(--space-5);
    padding: 20px;
  }

  .video-settings-page .form-grid {
    gap: 16px;
  }

  .video-settings-page .settings-panel__heading > div {
    min-width: 0;
  }

  .video-settings-page .settings-panel__heading > .button {
    width: 100%;
  }
}

.admin-page--system {
  width: min(100%, 760px);
}

.system-status-panel {
  display: grid;
  gap: var(--space-5, 20px);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.system-status-panel__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5, 20px);
  border-bottom: 1px solid var(--border-default);
}

.system-status-panel__summary > div {
  display: grid;
  gap: var(--space-1);
}

.system-status-panel__summary strong {
  font-size: 1rem;
}

.system-status-panel__summary small {
  color: var(--text-tertiary);
}

.system-status-panel__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-medium);
  color: var(--action-primary);
  background: var(--status-info-bg);
}

.system-status-panel__icon svg {
  width: 21px;
  height: 21px;
}

.system-maintenance-toggle {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
}

.system-maintenance-note {
  margin: 0;
}

.admin-page--feedback {
  width: min(100%, 1180px);
}

.feedback-review-tabs {
  display: inline-flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
}

.feedback-review-tabs button {
  min-height: 34px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-small) - 2px);
  color: var(--text-secondary);
  background: transparent;
}

.feedback-review-tabs button.is-active {
  color: var(--text-primary);
  background: var(--surface-panel);
  box-shadow: var(--shadow-small);
}

.feedback-review-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  height: min(650px, calc(100vh - 250px));
  min-height: 420px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.feedback-review-list {
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.feedback-review-list > button {
  display: grid;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  text-align: left;
  background: transparent;
}

.feedback-review-list > button:hover,
.feedback-review-list > button.is-selected {
  background: var(--surface-panel);
}

.feedback-review-list > button.is-selected {
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.feedback-review-list > button > span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.feedback-review-list p,
.feedback-review-list small {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.feedback-review-list p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feedback-review-detail {
  min-width: 0;
  padding: var(--space-5, 20px);
  overflow-y: auto;
}

.feedback-review-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.feedback-review-detail h2 {
  margin: var(--space-1) 0 0;
  font-size: 1.125rem;
}

.feedback-review-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5, 20px);
}

.feedback-review-meta div {
  min-width: 0;
}

.feedback-review-meta dt {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.feedback-review-meta dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}

.feedback-review-copy,
.feedback-review-rule,
.feedback-review-history {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.feedback-review-copy h3,
.feedback-review-history h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
}

.feedback-review-copy p,
.feedback-review-rule p,
.feedback-review-history p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.65;
}

.feedback-review-rule {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-small);
  background: var(--status-info-bg);
}

.feedback-review-rule > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--status-info);
}

.feedback-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.feedback-review-history {
  margin-top: var(--space-5, 20px);
  border-bottom: 0;
}

.feedback-review-history h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feedback-review-history h3 svg {
  width: 16px;
  height: 16px;
}

.feedback-review-history > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);
}

.feedback-review-history span {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.admin-page__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.admin-page__heading h1 {
  margin-bottom: var(--space-2);
  font-size: 1.75rem;
  line-height: 1.25;
}

.admin-page__heading p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
}

.connection-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5, 20px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.connection-summary__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-medium);
  color: var(--action-primary);
  background: var(--status-info-bg);
}

.connection-summary__icon svg {
  width: 21px;
  height: 21px;
}

.connection-summary__label {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
}

.connection-summary h2 {
  margin: 2px 0;
  font-size: 1rem;
}

.connection-summary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.connection-summary__meta {
  display: flex;
  gap: var(--space-8);
  margin: 0;
}

.connection-summary__meta div {
  display: grid;
  gap: var(--space-1);
}

.connection-summary__meta dt {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.connection-summary__meta dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 650;
}

.security-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-8);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--status-info) 38%, transparent);
  border-radius: var(--radius-small);
  color: var(--status-info);
  background: var(--status-info-bg);
}

.security-note > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.security-note strong {
  font-size: 0.875rem;
}

.security-note p {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
}

.settings-form {
  border-top: 1px solid var(--border-strong);
}

.settings-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-strong);
}

.settings-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.settings-section h2 {
  margin-bottom: var(--space-1);
  font-size: 1.0625rem;
}

.settings-section header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.settings-version {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.input-with-icon {
  position: relative;
}

.input-with-icon > svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}

.field .input-with-icon input {
  padding-left: 38px;
}

.check-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--status-danger);
  font-size: 0.875rem;
}

.check-field input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.provider-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-default);
  color: var(--text-secondary);
  background: var(--surface-muted);
}

.provider-empty > svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--action-primary);
}

.provider-empty strong {
  color: var(--text-primary);
}

.provider-empty p {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
}

.connection-result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
}

.connection-result > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.connection-result strong {
  font-size: 0.875rem;
}

.connection-result p {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
}

.connection-result--success {
  border-color: var(--status-success);
  color: var(--status-success);
  background: var(--status-success-bg);
}

.connection-result--error {
  border-color: var(--status-danger);
  color: var(--status-danger);
  background: var(--status-danger-bg);
}

.connection-result--warning {
  border-color: var(--status-warning);
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.save-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--status-success);
  font-size: 0.875rem;
  font-weight: 650;
}

.settings-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
}

.settings-error .form-error {
  margin: 0;
}

.settings-error .button {
  flex: 0 0 auto;
}

.save-notice svg {
  width: 17px;
  height: 17px;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.model-management {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.model-directory {
  min-width: 0;
  border-right: 1px solid var(--border-default);
  padding-right: var(--space-5, 20px);
}

.model-directory > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.model-directory h2,
.model-editor__heading h2 {
  margin: 0;
  font-size: 1.0625rem;
}

.model-directory header span {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.button--icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.button--icon svg {
  width: 17px;
  height: 17px;
}

.model-directory ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-directory li > button {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 72px;
  border-color: transparent;
  padding: var(--space-3);
  text-align: left;
  background: transparent;
}

.model-directory li > button:hover,
.model-directory li > button.is-active {
  border-color: var(--border-default);
  background: var(--surface-panel);
}

.model-directory li > button.is-active {
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.model-directory li > button > span:first-child {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.model-directory li strong,
.model-directory li small {
  overflow-wrap: anywhere;
}

.model-directory li small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.model-directory__status {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: var(--space-1);
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.model-directory__status em {
  color: var(--status-info);
  font-style: normal;
  font-weight: 700;
}

.model-directory__empty {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.model-directory__empty strong {
  color: var(--text-primary);
}

.model-editor {
  min-width: 0;
  border-top: 0;
}

.model-editor__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-strong);
}

.model-usage-summary {
  margin-bottom: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.model-usage-summary > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.model-usage-summary > header span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

.model-usage-summary > header svg {
  width: 17px;
  height: 17px;
  color: var(--action-primary);
}

.model-usage-summary > header small,
.model-usage-summary dt {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.model-usage-summary dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.model-usage-summary dl > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.model-usage-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  font-weight: 700;
}

.model-usage-summary__note {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.55;
}

.model-usage-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.model-usage-sources > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  min-width: 0;
}

.model-usage-sources svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--text-secondary);
}

.model-usage-sources > div:first-child svg {
  color: var(--status-success);
}

.model-usage-sources span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.model-usage-sources strong,
.model-usage-breakdown > strong {
  color: var(--text-primary);
  font-size: 0.75rem;
}

.model-usage-sources small {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.model-usage-breakdown {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.model-usage-breakdown__scroll {
  max-height: 168px;
  overflow: auto;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.model-usage-breakdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.model-usage-breakdown th,
.model-usage-breakdown td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  text-align: right;
  white-space: nowrap;
}

.model-usage-breakdown th:first-child,
.model-usage-breakdown td:first-child {
  text-align: left;
}

.model-usage-breakdown tbody tr:last-child td {
  border-bottom: 0;
}

.model-usage-breakdown th {
  position: sticky;
  top: 0;
  background: var(--surface-panel);
  color: var(--text-tertiary);
  font-weight: 650;
}

.toggle-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-default);
}

.toggle-field input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
}

.toggle-field > span {
  display: grid;
  gap: var(--space-1);
}

.toggle-field small {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.settings-actions--models {
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding-top: var(--space-5, 20px);
  border-top: 1px solid var(--border-strong);
}

.settings-actions--models > div {
  display: flex;
  gap: var(--space-3);
}

.delete-confirm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--status-danger);
  background: var(--status-danger-bg);
}

.delete-confirm p {
  margin: 0 auto 0 0;
  color: var(--status-danger);
  font-size: 0.8125rem;
}

.admin-page--knowledge {
  width: min(100%, 1240px);
}

.knowledge-heading {
  margin-bottom: var(--space-5, 20px);
}

.knowledge-heading .button {
  flex: 0 0 auto;
}

.knowledge-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5, 20px);
}

.knowledge-metrics article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-panel);
  box-shadow: var(--shadow-small);
}

.knowledge-metrics svg {
  grid-row: 1 / 4;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--action-primary);
}

.knowledge-metrics span,
.knowledge-metrics small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.knowledge-metrics strong {
  font-size: 1.35rem;
  line-height: 1.2;
}

.knowledge-production-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.45fr) minmax(330px, 0.8fr);
  gap: var(--space-4);
  align-items: start;
}

.knowledge-side-stack {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.knowledge-panel {
  min-width: 0;
  padding: var(--space-5, 20px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.knowledge-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.knowledge-panel h2 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.knowledge-panel header p,
.knowledge-muted {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.knowledge-filters {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(220px, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.knowledge-card-list {
  max-height: min(375px, calc(100vh - 480px));
  min-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
  scrollbar-gutter: stable;
}

.knowledge-card-list article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-panel);
}

.knowledge-card-list article:last-child {
  border-bottom: 0;
}

.knowledge-card-list article.is-selected {
  box-shadow: inset 3px 0 0 var(--action-primary);
  background: var(--surface-hover);
}

.knowledge-card-list label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.knowledge-card-list input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
}

.knowledge-card-list label span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.knowledge-card-list label small,
.knowledge-card-list > article > p,
.knowledge-evidence-list small,
.knowledge-evidence-list footer {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.knowledge-card-list > article > p {
  margin: 0 0 0 28px;
  line-height: 1.55;
}

.knowledge-card-list footer,
.knowledge-evidence-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: 28px;
}

.knowledge-card-list footer span,
.knowledge-evidence-list article > div span {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  font-size: 0.6875rem;
}

.knowledge-governance-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.knowledge-governance-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.knowledge-governance-actions small {
  margin-right: auto;
  color: var(--text-secondary);
}

.knowledge-coverage-list {
  display: grid;
  max-height: 180px;
  overflow-y: auto;
}

.knowledge-coverage-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-default);
  font-size: 0.8125rem;
}

.knowledge-coverage-list strong {
  color: var(--action-primary);
}

.knowledge-diagnostic {
  display: grid;
  gap: var(--space-3);
}

.knowledge-diagnostic > header {
  margin-bottom: 0;
}

.knowledge-diagnostic > .button {
  justify-self: start;
}

.knowledge-evidence-list {
  display: grid;
  max-height: min(340px, calc(100vh - 520px));
  gap: var(--space-2);
  overflow-y: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.knowledge-diagnostic-summary,
.knowledge-evidence-list article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.knowledge-diagnostic-summary span,
.knowledge-evidence-list article > header span {
  color: var(--status-info);
  font-size: 0.75rem;
  font-weight: 700;
}

.knowledge-diagnostic-summary em {
  color: var(--status-warning);
  font-size: 0.75rem;
  font-style: normal;
}

.knowledge-evidence-list article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-muted);
}

.knowledge-evidence-list article p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.knowledge-evidence-list article > div {
  margin-left: 0;
}

.admin-access-gate {
  width: min(100%, 640px);
}

.admin-access-gate .admin-page__heading {
  display: block;
}

.access-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.access-form .button {
  justify-self: start;
}

.admin-page {
  margin-inline: auto;
}

.admin-page__heading,
.system-status-panel,
.connection-summary,
.feedback-review-tabs,
.feedback-review-layout,
.model-directory,
.settings-form,
.knowledge-metrics article,
.knowledge-panel,
.access-form,
.admin-shell .user-create-panel,
.admin-shell .user-management,
.admin-shell .user-audit-table-wrap,
.admin-shell .feedback-state,
.admin-shell .confirm-dialog,
.admin-shell .preferences-menu__panel {
  border-color: var(--production-border);
  background: var(--admin-glass-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.admin-page__heading {
  padding: var(--space-5, 20px) var(--space-6);
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
}

.admin-page__heading h1 {
  color: var(--production-text);
}

.admin-shell .settings-form {
  padding: 0 var(--space-5, 20px) var(--space-5, 20px);
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
}

.admin-shell .model-directory {
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  padding: var(--space-5, 20px);
}

.admin-shell .feedback-review-list,
.admin-shell .user-directory,
.admin-shell .user-editor__tabs,
.admin-shell .model-usage-sources > div,
.admin-shell .provider-empty,
.admin-shell .knowledge-card-list,
.admin-shell .knowledge-evidence-list article {
  background: var(--admin-glass-strong);
}

.admin-shell .feedback-review-detail,
.admin-shell .user-editor,
.admin-shell .knowledge-card-list article {
  background: transparent;
}

.admin-shell .field input,
.admin-shell .field textarea,
.admin-shell .field select,
.admin-shell .user-directory__search input,
.admin-shell .preferences-menu__field select {
  background: var(--admin-glass-field);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.admin-shell select option,
.admin-shell select optgroup {
  color: var(--production-text);
  background: var(--production-panel);
}

.admin-shell .model-usage-breakdown th,
.admin-shell .account-table th {
  background: var(--admin-glass-strong);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.admin-shell .preferences-menu__panel,
.admin-shell .confirm-dialog {
  color: var(--production-text);
  background: var(--admin-glass-strong);
  text-shadow: none;
}

.admin-shell .dialog-backdrop {
  background: rgb(7 10 14 / 52%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-shell :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .admin-shell {
    grid-template-rows: 60px auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
    max-width: 100vw;
  }

  .admin-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 var(--space-3);
  }

  .admin-topbar > .product-brand {
    min-width: 0;
    padding: 0;
    border-right: 0;
  }

  .admin-topbar__context {
    display: none;
  }

  .admin-topbar__actions {
    gap: var(--space-1);
    padding-right: 0;
  }

  .admin-topbar__actions > .button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    min-height: 40px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    color: var(--production-studio-text);
    font-size: 0;
  }

  .admin-shell .admin-topbar__actions .account-summary {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--production-studio-border);
    border-radius: var(--radius-small);
    background: rgb(12 17 23 / 46%);
  }

  .admin-shell .admin-topbar__actions .account-summary > svg {
    display: block;
    color: var(--production-studio-muted);
  }

  .admin-shell .admin-topbar__actions .account-summary > span {
    display: none;
  }

  .admin-topbar__actions > .button svg {
    color: var(--production-studio-muted);
  }

  .admin-sidebar {
    grid-row: 2;
    min-width: 0;
    padding: var(--space-2) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .admin-sidebar__label,
  .admin-sidebar__notice {
    display: none;
  }

  .admin-nav {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .admin-nav a {
    flex: 0 0 auto;
    width: fit-content;
  }

  .admin-nav a.active {
    box-shadow: inset 0 -3px 0 var(--action-primary);
  }

  .admin-main {
    grid-row: 3;
    padding: var(--space-4) var(--space-4) 48px;
  }

  .admin-page__heading {
    padding: var(--space-4);
  }

  .admin-shell .settings-form,
  .admin-shell .model-directory {
    padding-inline: var(--space-4);
  }

  .admin-page__heading,
  .settings-section > header {
    align-items: stretch;
    flex-direction: column;
  }

  .connection-summary {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .connection-summary__meta {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
  }

  .settings-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .settings-actions .button {
    width: 100%;
  }

  .model-management {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .model-usage-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-usage-sources {
    grid-template-columns: 1fr;
  }

  .model-directory {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
    padding: 0 0 var(--space-5, 20px);
  }

  .model-directory ul {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 80%);
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }

  .settings-actions--models {
    align-items: stretch;
  }

  .settings-actions--models > div,
  .delete-confirm {
    align-items: stretch;
    flex-direction: column;
  }

  .delete-confirm p {
    margin: 0 0 var(--space-2);
  }

  .feedback-review-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .feedback-review-list {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .feedback-review-detail {
    max-height: none;
    overflow: visible;
  }

  .feedback-review-meta {
    grid-template-columns: 1fr;
  }

  .feedback-review-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .feedback-review-actions .button {
    width: 100%;
  }

  .knowledge-metrics,
  .knowledge-production-grid,
  .knowledge-filters,
  .knowledge-governance-controls {
    grid-template-columns: 1fr;
  }

  .knowledge-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-card-list,
  .knowledge-evidence-list {
    max-height: 300px;
  }

  .knowledge-quality-score,
  .knowledge-governance-actions {
    grid-column: 1;
  }

  .knowledge-governance-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-governance-actions small {
    margin: 0;
  }

  .knowledge-governance-actions .button,
  .knowledge-heading .button {
    width: 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .admin-shell {
    --admin-glass-panel: var(--production-panel);
    --admin-glass-strong: var(--production-panel-strong);
    --admin-glass-featured: var(--production-featured);
    --admin-glass-field: var(--production-panel);
  }

  .admin-shell > .production-video-backdrop {
    --production-video-opacity: 0.28;
  }

  .admin-topbar {
    background: rgb(12 17 23 / 96%);
  }

  .admin-sidebar,
  .admin-page__heading,
  .system-status-panel,
  .connection-summary,
  .feedback-review-tabs,
  .feedback-review-layout,
  .model-directory,
  .settings-form,
  .knowledge-metrics article,
  .knowledge-panel,
  .access-form,
  .admin-shell .user-create-panel,
  .admin-shell .user-management,
  .admin-shell .user-audit-table-wrap,
  .admin-shell .feedback-state,
  .admin-shell .confirm-dialog,
  .admin-shell .preferences-menu__panel,
  .admin-shell .field input,
  .admin-shell .field textarea,
  .admin-shell .field select,
  .admin-shell .user-directory__search input,
  .admin-shell .preferences-menu__field select,
  .admin-shell .model-usage-breakdown th,
  .admin-shell .account-table th,
  .admin-shell .dialog-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .admin-shell {
    --admin-glass-panel: var(--production-panel);
    --admin-glass-strong: var(--production-panel-strong);
    --admin-glass-featured: var(--production-featured);
    --admin-glass-field: var(--production-panel);
  }
}
.auth-shell {
  --auth-page: var(--production-page);
  --auth-panel: var(--production-glass-panel);
  --auth-field: var(--production-glass-field);
  --auth-text: var(--production-text);
  --auth-muted: var(--production-muted);
  --auth-subtle: var(--production-faint);
  --auth-border: var(--production-border);
  --auth-primary: var(--production-accent);
  --auth-primary-hover: var(--production-accent-hover);
  --auth-accent: var(--production-accent-soft);
  --auth-success-ring: var(--production-accent-soft);
  --auth-shadow: var(--production-shadow);
  --auth-glass-panel: color-mix(in srgb, var(--production-panel) 58%, transparent);
  --auth-glass-border: color-mix(in srgb, var(--production-border-strong) 64%, transparent);
  --auth-glass-shadow: 0 18px 48px rgb(32 45 61 / 16%);
  --auth-preview-opacity: 0.34;
  --auth-video-opacity: 0.76;
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 32px 48px;
  color: var(--auth-text);
  background: var(--auth-page);
  color-scheme: light;
  isolation: isolate;
  transition: color 180ms ease, background-color 180ms ease;
}

.production-video-backdrop {
  --production-video-opacity: 1;
  --production-video-crossfade-duration: 1400ms;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.production-video-backdrop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: saturate(0.82) contrast(1.02);
  transition: opacity var(--production-video-crossfade-duration) linear;
}

.production-video-backdrop video[data-video-status="active"],
.production-video-backdrop video[data-video-status="incoming"] {
  z-index: 2;
  opacity: var(--production-video-opacity);
}

.production-video-backdrop video[data-video-status="outgoing"] {
  z-index: 1;
  opacity: 0;
}

.production-video-backdrop video[data-video-status="standby"] {
  z-index: 0;
  opacity: 0;
  transition: none;
}

.production-video-playback-control {
  position: fixed;
  z-index: 35;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(60px, calc(52px + env(safe-area-inset-bottom)));
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--production-studio-border);
  border-radius: var(--radius-medium);
  padding: 0;
  color: var(--production-studio-text);
  background: rgb(12 17 23 / 68%);
  box-shadow:
    0 12px 28px rgb(5 8 12 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 12%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.production-video-playback-control:hover:not(:disabled) {
  border-color: var(--production-accent);
  background: color-mix(in srgb, rgb(12 17 23 / 68%) 76%, var(--production-accent-soft));
  transform: translateY(-2px);
}

.production-video-playback-control:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.production-video-playback-control:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.production-video-playback-control svg {
  width: 18px;
  height: 18px;
}

.auth-shell[data-theme="dark"] .production-video-backdrop video {
  filter: saturate(0.72) contrast(1.05);
}

.auth-shell[data-theme="dark"] {
  --auth-glass-panel: color-mix(in srgb, var(--production-panel) 72%, transparent);
  --auth-glass-border: color-mix(in srgb, var(--production-border-strong) 68%, transparent);
  --auth-glass-shadow: 0 22px 56px rgb(0 0 0 / 34%);
  --auth-preview-opacity: 0.24;
  --auth-video-opacity: 0.52;
  color-scheme: dark;
}

.home-story-surface {
  display: block;
  padding: 0;
}

.home-topbar {
  --auth-text: var(--production-voyage-text);
  --auth-muted: var(--production-voyage-muted);
  --auth-subtle: var(--production-voyage-faint);
  position: absolute;
  z-index: 3;
  top: 28px;
  right: 48px;
  left: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  pointer-events: none;
}

.home-topbar > * {
  pointer-events: auto;
}

.home-topbar .product-brand,
.home-topbar .product-brand__copy > strong {
  color: var(--auth-text);
}

.home-topbar .product-brand {
  border: 1px solid var(--auth-glass-border);
  border-radius: var(--radius-medium);
  padding: var(--space-2) var(--space-3);
  background: var(--auth-glass-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 8px 28px rgb(24 34 48 / 10%);
  backdrop-filter: blur(24px) saturate(138%);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
}

.home-topbar .product-brand__mark {
  color: inherit;
  background: transparent;
}

.home-topbar .product-brand__tagline,
.home-topbar .product-brand__release {
  color: var(--auth-muted);
}

.home-topbar .theme-toggle {
  border-color: var(--auth-border);
  color: var(--auth-text);
  background: var(--auth-panel);
  backdrop-filter: blur(18px) saturate(128%);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
}

.home-topbar .theme-toggle:hover {
  border-color: var(--auth-primary);
  color: var(--auth-primary);
  background: var(--auth-accent);
}

.home-scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-block: 0;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--auth-primary) transparent;
}

.home-story {
  display: flex;
  width: min(100%, 1560px);
  min-height: 100%;
  align-items: center;
  margin: 0 auto;
  padding: 112px 176px 48px 48px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.home-story__content--overview {
  --auth-text: var(--production-voyage-text);
  --auth-muted: var(--production-voyage-muted);
  --auth-subtle: var(--production-voyage-faint);
  width: min(100%, 820px);
}

.home-overview-card {
  width: 100%;
  border: 1px solid var(--auth-glass-border);
  border-radius: var(--radius-medium);
  padding: clamp(1.5rem, 3.3vw, 2.75rem);
  background: var(--auth-glass-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), var(--auth-glass-shadow);
  backdrop-filter: blur(30px) saturate(142%);
  -webkit-backdrop-filter: blur(30px) saturate(142%);
}

.home-story .auth-title-lockup h1 {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0;
  color: var(--auth-text);
}

.home-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  color: var(--auth-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.home-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.home-trust-line svg {
  width: 15px;
  height: 15px;
  color: var(--auth-primary);
}

.home-overview-pipeline {
  --auth-text: var(--production-voyage-text);
  --auth-muted: var(--production-voyage-muted);
  --auth-subtle: var(--production-voyage-faint);
  position: absolute;
  right: 176px;
  bottom: 34px;
  left: 48px;
}

.home-story-nav {
  --auth-text: var(--production-voyage-text);
  --auth-muted: var(--production-voyage-muted);
  --auth-subtle: var(--production-voyage-faint);
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 48px;
  display: grid;
  width: 120px;
  gap: 5px;
  border: 1px solid var(--auth-glass-border);
  border-radius: var(--radius-medium);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--production-panel) 48%, transparent);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 12px 32px rgb(24 34 48 / 12%);
  backdrop-filter: blur(24px) saturate(138%);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  transform: translateY(-50%);
}

.home-story-nav a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 30px;
  border-right: 2px solid transparent;
  padding: 3px var(--space-2) 3px 0;
  color: var(--auth-muted);
  font-size: 0.7rem;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.home-story-nav a:hover,
.home-story-nav a[aria-current="page"] {
  border-color: var(--auth-primary);
  color: var(--auth-text);
  background: color-mix(in srgb, var(--auth-accent) 50%, transparent);
  transform: translateX(-3px);
}

.home-story-nav a[aria-current="page"] span {
  color: var(--auth-primary);
}

.home-story-nav span {
  font-variant-numeric: tabular-nums;
}

.home-story-nav strong {
  font-weight: 700;
}

.home-mode-panel {
  display: grid;
  width: min(100%, 1120px);
  min-width: 0;
  border: 1px solid var(--auth-glass-border);
  border-radius: 8px;
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  color: var(--auth-text);
  background: var(--auth-glass-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), var(--auth-glass-shadow);
  backdrop-filter: blur(30px) saturate(142%);
  -webkit-backdrop-filter: blur(30px) saturate(142%);
}

.home-mode-panel__header {
  display: grid;
  grid-template-columns: auto 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.home-mode-panel__index {
  color: var(--auth-subtle);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.home-mode-panel__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--auth-primary) 45%, var(--auth-border));
  border-radius: 6px;
  color: var(--auth-primary);
  background: var(--auth-accent);
}

.home-mode-panel__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.home-mode-panel__status {
  justify-self: end;
  color: var(--auth-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.home-mode-panel__intro {
  max-width: 820px;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}

.home-mode-panel__intro > p {
  margin: 0 0 var(--space-2);
  color: var(--auth-primary);
  font-size: 0.72rem;
  font-weight: 750;
}

.home-mode-panel__intro h2 {
  margin: 0 0 var(--space-3);
  color: var(--auth-text);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.08;
}

.home-mode-panel__intro strong {
  display: block;
  max-width: 42rem;
  color: var(--auth-muted);
  font-size: 1rem;
  font-weight: 520;
  line-height: 1.7;
}

.home-mode-panel__highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--auth-border);
  border-bottom: 1px solid var(--auth-border);
}

.home-mode-panel__highlights section {
  min-width: 0;
  padding: var(--space-6) var(--space-8) var(--space-6) 0;
}

.home-mode-panel__highlights section + section {
  padding-left: var(--space-8);
  border-left: 1px solid var(--auth-border);
}

.home-mode-panel__highlights h3 {
  margin: 0 0 var(--space-2);
  color: var(--auth-text);
  font-size: 0.9rem;
}

.home-mode-panel__highlights p {
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

.home-mode-panel footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-5);
}

.home-mode-panel footer > div {
  display: grid;
  max-width: 44rem;
  gap: 3px;
}

.home-mode-panel footer span {
  color: var(--auth-subtle);
  font-size: 0.72rem;
}

.home-mode-panel footer strong {
  color: var(--auth-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.home-mode-panel footer a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  color: var(--auth-text);
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}

.home-mode-panel footer a:hover {
  color: var(--auth-primary);
}

.home-mode-panel footer svg {
  width: 16px;
  height: 16px;
}

.home-mode-panel .home-mode-panel__planned {
  flex: 0 0 auto;
  color: var(--auth-subtle);
  font-weight: 700;
}

.auth-shell__workspace-preview {
  position: absolute;
  z-index: 0;
  bottom: -11%;
  left: -5%;
  width: min(1280px, 82vw);
  max-width: none;
  border: 1px solid var(--auth-border);
  opacity: var(--auth-preview-opacity);
  filter: saturate(0.72) contrast(1.02);
  transform: rotate(-1.2deg);
  transform-origin: center;
  transition: border-color 180ms ease, opacity 180ms ease;
}

.auth-shell__workspace-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--auth-video-opacity);
  filter: saturate(0.78) contrast(1.03);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.auth-preferences-menu {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 48px;
}

.auth-preferences-menu .preferences-menu__trigger {
  border: 1px solid var(--auth-border);
  color: var(--auth-text);
  background: var(--auth-panel);
  box-shadow: 0 1px 3px rgb(23 25 28 / 10%);
}

.auth-preferences-menu .preferences-menu__trigger:hover {
  border-color: var(--auth-primary);
  color: var(--auth-primary);
  background: var(--auth-accent);
}

.auth-intro--home {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 1560px);
  height: 100%;
  min-height: 0;
  flex-direction: column;
  margin: 0 auto;
}

.auth-intro {
  display: flex;
  align-self: stretch;
  min-width: 0;
  flex-direction: column;
}

.auth-intro__brand {
  align-self: flex-start;
  max-width: calc(100% - 56px);
  flex: 0 0 auto;
}

.auth-intro__brand.product-brand,
.auth-intro__brand .product-brand__copy > strong {
  color: var(--auth-text);
}

.auth-intro__brand .product-brand__mark {
  color: inherit;
  background: transparent;
}

.auth-intro__brand .product-brand__tagline,
.auth-intro__brand .product-brand__release {
  color: var(--auth-muted);
}

.auth-intro__copy {
  width: min(100%, 760px);
  margin: auto 0;
}

.auth-intro__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--auth-primary);
  font-size: 0.75rem;
  font-weight: 750;
}

.auth-intro__kicker svg {
  width: 17px;
  height: 17px;
}

.auth-title-lockup {
  position: relative;
  max-width: 760px;
  margin-bottom: var(--space-6);
  padding: 4px 0 4px 24px;
}

.auth-title-lockup::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--auth-primary);
  content: "";
}

.auth-title-lockup::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--auth-primary);
  content: "";
}

.auth-intro h1 {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0;
  color: var(--auth-text);
}

.auth-title-lockup__wordmark {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 0.95;
  white-space: nowrap;
}

.auth-title-lockup__descriptor {
  color: var(--auth-muted);
  font-size: 1.75rem;
  font-weight: 680;
  line-height: 1.2;
}

.auth-intro__lede {
  max-width: 700px;
  margin-bottom: var(--space-6);
  color: var(--auth-muted);
  font-size: 1.125rem;
  line-height: 1.8;
}

.home-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.home-action {
  display: inline-flex;
  min-width: 168px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-medium);
  padding: 0 var(--space-5);
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

.home-action svg {
  width: 17px;
  height: 17px;
}

.home-action:hover {
  transform: translateY(-1px);
}

.home-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--auth-primary) 36%, transparent);
  outline-offset: 3px;
}

.home-action--primary {
  border-color: var(--auth-primary);
  color: var(--production-accent-ink);
  background: var(--auth-primary);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--auth-primary) 26%, transparent);
}

.home-action--primary:hover {
  border-color: var(--auth-primary-hover);
  color: var(--production-accent-ink);
  background: var(--auth-primary-hover);
  box-shadow: 0 11px 28px color-mix(in srgb, var(--auth-primary) 30%, transparent);
}

.home-action--secondary {
  border-color: var(--auth-glass-border);
  color: var(--auth-text);
  background: color-mix(in srgb, var(--production-panel) 42%, transparent);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), 0 6px 18px rgb(24 34 48 / 8%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.home-action--secondary:hover {
  border-color: var(--auth-primary);
  color: var(--auth-primary);
  background: color-mix(in srgb, var(--auth-accent) 62%, var(--auth-glass-panel));
}

.auth-capabilities {
  display: grid;
  max-width: 720px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) 40px;
}

.auth-capability {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.auth-capability__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--auth-primary) 28%, var(--auth-border));
  border-radius: 6px;
  color: var(--auth-primary);
  background: var(--auth-accent);
}

.auth-capability__icon svg {
  width: 17px;
  height: 17px;
}

.auth-capability h2 {
  margin-bottom: var(--space-1);
  color: var(--auth-text);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.auth-capability p {
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.auth-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--auth-border);
  list-style: none;
}

.auth-pipeline li {
  position: relative;
}

.auth-pipeline li::before {
  position: absolute;
  top: -19px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--auth-page);
  border-radius: 50%;
  background: var(--auth-primary);
  box-shadow: 0 0 0 1px var(--auth-primary);
  content: "";
}

.auth-pipeline li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: var(--space-3);
  color: var(--auth-text);
}

.auth-pipeline li + li {
  padding-left: var(--space-3);
  border-left: 1px solid var(--auth-border);
}

.auth-pipeline span {
  color: var(--auth-primary);
  font-size: 0.6875rem;
  font-weight: 750;
}

.auth-pipeline strong {
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  font-weight: 650;
}

.auth-panel {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid var(--auth-glass-border);
  border-radius: var(--radius-medium);
  padding: var(--space-8);
  color: var(--auth-text);
  background: var(--auth-glass-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight), var(--auth-glass-shadow);
  backdrop-filter: blur(30px) saturate(142%);
  -webkit-backdrop-filter: blur(30px) saturate(142%);
  scrollbar-gutter: stable;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.auth-access__content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 1040px);
  align-self: center;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  margin: auto;
  transform: translateY(clamp(-72px, -7vh, -48px));
}

.auth-access__context {
  --auth-text: var(--production-studio-text);
  --auth-muted: var(--production-studio-muted);
  --auth-subtle: var(--production-studio-faint);
  display: flex;
  min-width: 0;
  min-height: 31rem;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4) 0;
  text-shadow: var(--production-studio-shadow);
}

.auth-access__brand {
  align-self: flex-start;
  color: var(--auth-text);
}

.auth-access__brand .product-brand__mark {
  color: inherit;
  background: transparent;
}

.auth-access__brand .product-brand__tagline,
.auth-access__brand .product-brand__release {
  color: var(--auth-muted);
}

.auth-panel--standalone {
  width: 100%;
  max-height: none;
}

.auth-access__route {
  max-width: 32rem;
  margin: auto 0;
}

.auth-access__route h2 {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--auth-text);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.08;
}

.auth-access__route > p:last-child {
  max-width: 33rem;
  margin: 0;
  color: var(--auth-muted);
  line-height: 1.7;
}

.auth-access__stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--production-studio-border);
  list-style: none;
}

.auth-access__stages li {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--auth-text);
}

.auth-access__stages li + li {
  padding-left: var(--space-3);
  border-left: 1px solid var(--production-studio-border);
}

.auth-access__stages span {
  color: var(--auth-primary);
  font-size: 0.68rem;
  font-weight: 750;
}

.auth-access__stages strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 650;
}

.auth-panel--standalone h1 {
  margin-bottom: var(--space-2);
  font-size: 1.75rem;
  line-height: 1.25;
}

.auth-access__home-link {
  align-self: flex-start;
  color: var(--auth-muted);
  font-size: 0.8125rem;
  font-weight: 650;
}

.auth-access__home-link:hover {
  color: var(--auth-primary);
}

.auth-panel__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--auth-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.auth-panel__status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-success);
  box-shadow: 0 0 0 4px var(--auth-success-ring);
}

.auth-panel header {
  margin-bottom: var(--space-6);
}

.auth-panel h2 {
  margin-bottom: var(--space-2);
  font-size: 1.75rem;
  line-height: 1.25;
}

.auth-panel header p:last-child,
.auth-switch {
  color: var(--auth-muted);
}

.auth-shell .page-kicker {
  color: var(--auth-primary);
}

.auth-panel header p:last-child {
  margin-bottom: 0;
  line-height: 1.7;
}

.auth-form {
  display: grid;
  gap: var(--space-4);
}

.auth-form .field > span {
  color: var(--auth-text);
  font-size: 0.8125rem;
}

.auth-form .field input {
  min-height: 46px;
  border-color: var(--auth-border);
  color: var(--auth-text);
  background: var(--auth-field);
}

.auth-form .field input:focus {
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-primary) 15%, transparent);
}

.auth-form .input-with-icon > svg {
  color: var(--auth-subtle);
}

.auth-form .button {
  width: 100%;
  min-height: 46px;
  margin-top: var(--space-2);
}

.auth-form .button--primary {
  border-color: var(--auth-primary);
  color: var(--production-accent-ink);
  background: var(--auth-primary);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--auth-primary) 30%, transparent);
}

.auth-form .button--primary:hover {
  color: var(--production-accent-ink);
  background: var(--auth-primary-hover);
}

.auth-switch {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.auth-switch a {
  margin-left: var(--space-2);
  color: var(--auth-primary);
  font-weight: 700;
}

.auth-panel__footnote {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--auth-border);
  color: var(--auth-subtle);
  font-size: 0.75rem;
  text-align: center;
}

.auth-shell[data-theme="dark"] .form-error {
  color: #ff9494;
}

.account-access {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.account-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}

.account-summary > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.account-summary > span {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.account-summary strong {
  overflow: hidden;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.account-summary small svg {
  width: 12px;
  height: 12px;
}

.admin-entry {
  white-space: nowrap;
}

.account-heading > div > p:last-child {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
}

.account-page {
  width: 100%;
  max-width: none;
}

.account-balance {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-block: 1px solid var(--border-default);
}

.account-balance > div {
  display: grid;
  gap: var(--space-1);
}

.account-balance span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.account-balance strong {
  font-size: 1.5rem;
}

.account-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-default);
}

.account-section > header,
.points-adjustment > header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.account-section > header svg,
.points-adjustment > header svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--action-primary);
}

.account-section h2,
.points-adjustment h3 {
  margin-bottom: var(--space-1);
  font-size: 1.125rem;
}

.account-section header p,
.points-adjustment header p {
  margin: 0;
  color: var(--text-secondary);
}

.account-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-default);
}

.account-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--surface-panel);
}

.account-table th,
.account-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  white-space: nowrap;
}

.account-table th {
  color: var(--text-secondary);
  background: var(--surface-muted);
  font-size: 0.75rem;
}

.account-table tr:last-child td {
  border-bottom: 0;
}

.account-table .is-credit {
  color: var(--status-success);
  font-weight: 700;
}

.account-table .is-debit {
  color: var(--status-danger);
  font-weight: 700;
}

.account-empty {
  margin: 0;
  padding: var(--space-5);
  color: var(--text-secondary);
  background: var(--surface-subtle);
}

.admin-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-4);
}

.user-heading-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-page--users {
  width: 100%;
  max-width: none;
}

.user-create-panel {
  margin-bottom: var(--space-6);
  padding: var(--space-5, 20px) 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.user-create-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5, 20px);
}

.user-create-panel h2 {
  margin: 0;
  font-size: 1.125rem;
}

.user-create-panel > header > p {
  max-width: 440px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.user-create-panel__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-create-panel__actions,
.user-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.user-editor__actions {
  justify-content: space-between;
}

.confirm-dialog > .field {
  margin-top: var(--space-5, 20px);
}

.user-management {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  /* Let the account editor grow with its records. The admin main column is
     the page-level scroll container, so a fixed height here cannot hide the
     pagination and the lower account controls on shorter viewports. */
  height: auto;
  min-height: min(760px, calc(100vh - 300px));
  border: 1px solid var(--border-default);
  overflow: visible;
  background: var(--surface-panel);
}

.user-directory {
  display: grid;
  align-self: start;
  height: min(760px, calc(100vh - 220px));
  max-height: calc(100vh - 220px);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-right: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.user-directory > header {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.user-directory__search {
  position: relative;
  display: block;
}

.user-directory__search > svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}

.user-directory__search input {
  width: 100%;
  min-height: 38px;
  padding-left: 36px;
}

.user-directory h2 {
  margin-bottom: var(--space-1);
  font-size: 1rem;
}

.user-directory header span {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.user-directory__list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  list-style: none;
}

.user-directory__stats {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--text-secondary);
  text-align: right;
}

.user-directory__stats small {
  display: block;
  white-space: nowrap;
}

.user-storage-summary {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: .82rem;
}

.user-storage-note {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: .72rem;
  line-height: 1.45;
}

.user-directory li button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.user-directory li button.is-active {
  box-shadow: inset 3px 0 0 var(--action-primary);
  background: var(--surface-panel);
}

.user-directory li button > span:first-child {
  display: grid;
  min-width: 0;
}

.user-directory li small,
.user-directory li button > span:last-child {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.user-editor {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: visible;
}

.user-editor > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5, 20px) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.user-editor h2 {
  margin: 0;
  font-size: 1.25rem;
}

.user-editor__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}

.user-editor__tabs button {
  min-height: 34px;
  border: 0;
  border-radius: var(--radius-small);
  padding: var(--space-1) var(--space-3);
  color: var(--text-secondary);
  background: transparent;
}

.user-editor__tabs button.is-active {
  color: var(--text-primary);
  background: var(--surface-panel);
  box-shadow: var(--shadow-small);
}

.user-editor__viewport {
  min-height: 0;
  padding: var(--space-5, 20px) var(--space-6);
  overflow: visible;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.user-account-panel {
  height: auto;
  overflow: visible;
  padding-right: var(--space-2);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.user-account-panel > form:first-of-type {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.points-adjustment {
  padding-top: var(--space-6);
}

.user-audit-panel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.user-audit-panel > header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.user-audit-panel > header svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--action-primary);
}

.user-audit-panel h3 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.user-audit-panel header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.user-audit-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border-default);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.user-audit-table-wrap .account-table {
  min-width: 760px;
}

/* Billing is a responsive record table, not a wide audit grid. Keep the
   generic audit-table minimum for other tables without reintroducing page
   overflow in the billing panel. */
.user-audit-table-wrap .billing-records-table {
  min-width: 0;
}

.user-audit-table-wrap thead {
  position: sticky;
  z-index: 1;
  top: 0;
}

.billing-records-panel {
  height: auto;
  min-height: 0;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-default);
}

.billing-records-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.billing-records-panel__header > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.billing-records-panel__header h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.billing-records-panel__header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.billing-records-panel__icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  margin-top: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--action-primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.billing-records-panel__count {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.billing-records-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.billing-records-toolbar label,
.billing-records-custom-date label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 650;
}

.billing-records-toolbar label {
  min-width: 132px;
}

.billing-records-toolbar select,
.billing-records-custom-date input {
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: 0 var(--space-2);
  color: var(--text-primary);
  background: var(--surface-panel);
}

.billing-records-toolbar label:first-child {
  display: inline-grid;
  grid-template-columns: auto auto minmax(130px, 1fr);
  align-items: center;
  gap: 5px;
}

.billing-records-toolbar label:first-child span {
  grid-column: 2;
}

.billing-records-toolbar label:first-child select {
  grid-column: 3;
}

.billing-records-toolbar label:first-child svg {
  grid-column: 1;
  grid-row: 1;
  width: 14px;
  height: 14px;
  color: var(--action-primary);
}

.billing-records-toolbar__reset {
  min-height: 36px;
  margin-left: auto;
}

.billing-records-toolbar__reset svg {
  width: 15px;
  height: 15px;
}

.billing-records-custom-date {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.billing-records-custom-date > span {
  padding-bottom: 9px;
  color: var(--text-secondary);
}

.billing-records-table-wrap {
  max-height: min(620px, 58vh);
}

.billing-records-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.billing-records-table th,
.billing-records-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  white-space: normal !important;
}

.billing-records-table td:last-child button {
  max-width: 100%;
  white-space: normal;
}

.billing-records-table th:nth-child(1),
.billing-records-table td:nth-child(1) { width: 18%; }

.billing-records-table th:nth-child(2),
.billing-records-table td:nth-child(2) { width: 15%; }

.billing-records-table th:nth-child(3),
.billing-records-table td:nth-child(3) { width: 15%; }

.billing-records-table th:nth-child(4),
.billing-records-table td:nth-child(4) { width: 25%; }

.billing-records-table th:nth-child(5),
.billing-records-table td:nth-child(5) { width: 10%; }

.billing-records-table th:nth-child(6),
.billing-records-table td:nth-child(6) { width: 12%; }

.billing-records-table th:nth-child(7),
.billing-records-table td:nth-child(7) { width: 5%; }

.billing-records-table tbody tr.is-expanded td {
  border-bottom-color: transparent;
}

.billing-record-model {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.billing-record-model small {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.billing-record-details-row td {
  padding-top: 0;
  background: var(--surface-subtle);
  white-space: normal;
}

.billing-record-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  width: 100%;
  max-width: 100%;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--border-default);
  white-space: normal;
}

.billing-record-details > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.billing-record-details dt {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.billing-record-details dd {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  color: var(--text-primary);
  font-size: 0.8rem;
}

@media (max-width: 1240px) and (min-width: 901px) {
  .billing-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.billing-record-details dd.is-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
}

.billing-records-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.billing-records-pagination > div {
  display: flex;
  gap: var(--space-2);
}

.legacy-projects {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}

.legacy-projects > header {
  margin-bottom: var(--space-3);
}

.legacy-projects h3 {
  margin-bottom: var(--space-1);
  font-size: 1rem;
}

.legacy-projects header p {
  margin: 0;
  color: var(--text-secondary);
}

.legacy-projects ul {
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-default);
  list-style: none;
}

.legacy-projects li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.legacy-projects li:last-child {
  border-bottom: 0;
}

.legacy-projects li > span {
  display: grid;
  min-width: 0;
}

.legacy-projects li small {
  color: var(--text-secondary);
}

@media (max-width: 1150px) {
  .auth-shell {
    padding: 28px 32px;
  }

  .auth-preferences-menu {
    top: 28px;
    right: 32px;
  }

  .auth-intro h1 {
    gap: var(--space-2);
  }

  .auth-title-lockup__wordmark {
    font-size: 3.4rem;
  }

  .auth-title-lockup__descriptor {
    font-size: 1.625rem;
  }

  .auth-capabilities {
    gap: var(--space-4) var(--space-6);
  }
}

@media (max-width: 900px) {
  .auth-shell {
    overflow-y: auto;
    padding: var(--space-6);
    overscroll-behavior: contain;
  }

  .auth-shell__workspace-preview {
    position: fixed;
    bottom: 4%;
    left: -48%;
    width: 1500px;
    opacity: calc(var(--auth-preview-opacity) * 0.6);
  }

  .auth-intro--home {
    height: auto;
    min-height: 100%;
  }

  .auth-intro__copy {
    margin: 44px 0 0;
  }

  .auth-panel--standalone {
    width: min(100%, 600px);
    max-height: none;
    align-self: center;
  }

  .auth-shell--access .auth-access__content {
    width: min(100%, 600px);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    transform: none;
  }

  .auth-access__context {
    min-height: 0;
    gap: var(--space-4);
    padding: 0;
  }

  .auth-access__route,
  .auth-access__stages {
    display: none;
  }
}

@media (max-width: 520px) {
  .legacy-projects li {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .auth-shell {
    align-items: stretch;
    padding: var(--space-4);
  }

  .auth-preferences-menu {
    top: var(--space-4);
    right: var(--space-4);
  }

  .auth-intro__copy {
    margin-top: 28px;
  }

  .auth-intro__kicker {
    margin-bottom: var(--space-3);
  }

  .auth-intro h1 {
    gap: 6px;
  }

  .auth-title-lockup {
    margin-bottom: var(--space-3);
    padding: 2px 0 2px var(--space-4);
  }

  .auth-title-lockup::after {
    width: 12px;
    height: 12px;
  }

  .auth-title-lockup__wordmark {
    font-size: 2.5rem;
  }

  .auth-title-lockup__descriptor {
    max-width: 320px;
    font-size: 1.375rem;
    line-height: 1.25;
  }

  .auth-intro__lede {
    margin-bottom: var(--space-4);
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .home-action {
    min-width: 0;
    padding-inline: var(--space-3);
  }

  .auth-capabilities {
    gap: var(--space-3) var(--space-4);
  }

  .auth-capability {
    align-items: center;
    gap: var(--space-2);
  }

  .auth-capability__icon {
    width: 30px;
    height: 30px;
  }

  .auth-capability h2 {
    margin: 0;
    font-size: 0.8125rem;
  }

  .auth-capability p,
  .auth-pipeline {
    display: none;
  }

  .auth-panel {
    border-color: var(--auth-border);
    padding: 20px;
    box-shadow: var(--auth-shadow);
  }

  .auth-panel__status {
    margin-bottom: var(--space-3);
  }

  .auth-panel header {
    margin-bottom: var(--space-4);
  }

  .auth-panel h2 {
    font-size: 1.375rem;
  }

  .auth-panel--standalone h1 {
    font-size: 1.375rem;
  }

  .auth-access__content {
    width: 100%;
    gap: var(--space-4);
  }

  .auth-access__brand {
    align-self: flex-start;
    max-width: calc(100% - 56px);
  }

  .auth-panel header p:last-child {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .auth-form {
    gap: var(--space-3);
  }

  .auth-form .field input,
  .auth-form .button {
    min-height: 44px;
  }

  .auth-switch {
    margin-top: var(--space-4);
    font-size: 0.875rem;
  }

  .auth-panel__footnote {
    display: none;
  }

  .workspace-actions .account-summary strong,
  .workspace-actions .account-summary > svg,
  .admin-topbar__actions .account-summary strong,
  .admin-topbar__actions .account-summary > svg {
    display: none;
  }

  .workspace-actions .admin-entry,
  .admin-topbar__actions .admin-entry,
  .hub-brandbar__actions .admin-entry {
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .workspace-actions .admin-entry svg,
  .admin-topbar__actions .admin-entry svg,
  .hub-brandbar__actions .admin-entry svg {
    width: 17px;
    height: 17px;
  }

  .account-balance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .account-balance .status-label {
    justify-self: start;
  }

  .user-management {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .user-heading-actions,
  .user-create-panel > header,
  .user-create-panel__actions,
  .user-editor__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .user-heading-actions .button,
  .user-create-panel__actions .button,
  .user-editor__actions .button {
    width: 100%;
  }

  .user-heading-actions .status-label {
    align-self: flex-start;
  }

  .user-create-panel__grid {
    grid-template-columns: 1fr;
  }

  .user-directory {
    height: 280px;
    max-height: none;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .user-editor {
    min-height: 560px;
  }

  .user-editor > header,
  .user-editor__tabs,
  .user-editor__viewport {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .user-editor__tabs {
    overflow-x: auto;
  }

  .admin-topbar__actions {
    gap: var(--space-1);
    padding-right: 0;
  }

  .admin-topbar__actions .theme-toggle {
    width: 38px;
    height: 38px;
  }

  .admin-topbar__actions > .button {
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  .admin-topbar__actions > .button svg {
    color: var(--text-secondary);
  }
}

@media (max-width: 1150px) {
  .home-topbar {
    right: 32px;
    left: 32px;
  }

  .home-story {
    padding-right: 140px;
    padding-left: 32px;
  }

  .home-overview-pipeline {
    right: 140px;
    left: 32px;
  }

  .home-story-nav {
    right: 32px;
  }
}

@media (max-width: 900px) {
  .home-topbar {
    top: 24px;
    right: 24px;
    left: 24px;
  }

  .home-story-nav {
    display: none;
  }

  .home-story {
    padding: 104px 32px 40px;
  }

  .home-overview-pipeline {
    right: 32px;
    bottom: 28px;
    left: 32px;
  }

  .home-mode-panel {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .production-video-playback-control {
    right: max(4px, env(safe-area-inset-right));
    bottom: max(68px, calc(60px + env(safe-area-inset-bottom)));
    width: 36px;
    height: 36px;
  }

  .home-topbar {
    top: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }

  .home-topbar .product-brand {
    max-width: calc(100% - 56px);
  }

  .home-topbar .product-brand__tagline {
    display: none;
  }

  .home-story {
    min-height: 100%;
    align-items: flex-start;
    padding: 88px var(--space-4) var(--space-6);
  }

  .home-story--overview {
    align-items: center;
  }

  .home-overview-card {
    padding: var(--space-5);
  }

  .home-trust-line {
    display: grid;
    gap: var(--space-2);
  }

  .home-mode-panel {
    padding: var(--space-4);
  }

  .home-mode-panel__intro {
    padding: var(--space-5) 0;
  }

  .home-mode-panel__intro h2 {
    font-size: 2rem;
  }

  .home-mode-panel__intro strong {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .home-mode-panel__highlights {
    grid-template-columns: 1fr;
  }

  .home-mode-panel__highlights section,
  .home-mode-panel__highlights section + section {
    padding: var(--space-3) 0;
    border-left: 0;
  }

  .home-mode-panel__highlights section + section {
    border-top: 1px solid var(--auth-border);
  }

  .home-mode-panel footer {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
  }

  .home-mode-panel footer a {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .auth-panel,
  .home-overview-card,
  .home-mode-panel,
  .home-story-nav,
  .home-topbar .product-brand,
  .home-action--secondary,
  .home-topbar .theme-toggle {
    background: var(--production-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .production-video-playback-control {
    background: var(--production-panel-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-panel,
  .home-overview-card,
  .home-mode-panel,
  .home-story-nav,
  .home-topbar .product-brand,
  .home-action--secondary,
  .home-topbar .theme-toggle {
    background: var(--production-panel);
  }

  .production-video-playback-control {
    background: var(--production-panel-strong);
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .auth-shell--access {
    overflow-y: auto;
  }

  .auth-shell--access .auth-access__content {
    margin-block: 56px 24px;
    transform: none;
  }
}

/* Keep the public home chrome outside the scrollable story track. */
.home-topbar {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  min-height: 72px;
  box-sizing: border-box;
  padding: 16px 48px;
  border-bottom: 1px solid var(--production-border);
  background: var(--production-overlay);
  backdrop-filter: blur(24px) saturate(132%);
  -webkit-backdrop-filter: blur(24px) saturate(132%);
}

.home-scroll {
  scroll-padding-top: 80px;
}

@media (max-width: 1150px) {
  .home-topbar { padding-inline: 32px; }
}

@media (max-width: 900px) {
  .home-topbar {
    min-height: 64px;
    padding: 12px 24px;
  }
}

@media (max-width: 760px) {
  .home-topbar { padding: 12px var(--space-4); }
}

@media (max-width: 760px) {
  .billing-records-panel {
    padding-block: var(--space-5);
  }

  .billing-records-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .billing-records-toolbar label,
  .billing-records-toolbar label:first-child {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .billing-records-toolbar label:first-child span,
  .billing-records-toolbar label:first-child select {
    grid-column: 2;
  }

  .billing-records-toolbar label:first-child svg {
    grid-column: 1;
  }

  .billing-records-toolbar__reset {
    width: 100%;
    margin-left: 0;
  }

  .billing-records-custom-date {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-records-custom-date > span {
    display: none;
  }

  .billing-record-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-records-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-records-pagination > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .billing-records-pagination .button {
    width: 100%;
  }
}
.preferences-menu {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
}

.preferences-menu__trigger,
.preferences-menu__header button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: 0;
  color: var(--text-secondary);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
  cursor: pointer;
}

.preferences-menu__trigger:hover,
.preferences-menu__header button:hover {
  border-color: var(--action-primary);
  color: var(--action-primary);
  background: var(--surface-hover);
}

.preferences-menu__trigger svg,
.preferences-menu__header button svg {
  width: 18px;
  height: 18px;
}

.preferences-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  padding: var(--space-4);
  color: var(--text-primary);
  background: var(--surface-panel);
  box-shadow: var(--shadow-dialog);
}

.preferences-menu__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.preferences-menu__header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.preferences-menu__header strong {
  font-size: 0.9375rem;
}

.preferences-menu__header span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.preferences-menu__header button {
  width: 32px;
  height: 32px;
  border-color: transparent;
  box-shadow: none;
}

.preferences-menu__field,
.preferences-menu__tones {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 650;
}

.preferences-menu__field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: 8px 10px;
  color: var(--text-primary);
  background: var(--surface-muted);
  font: inherit;
  font-weight: 500;
}

.preferences-menu__tones > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.preferences-tone {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: 8px 10px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  cursor: pointer;
}

.preferences-tone:has(input:checked) {
  border-color: var(--action-primary);
  color: var(--text-primary);
  background: var(--surface-hover);
}

.preferences-tone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.preferences-tone:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.preferences-tone__swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: 50%;
  background: #426eab;
}

.preferences-tone[data-tone-option="graphite"] .preferences-tone__swatch {
  background: #5f6875;
}

.preferences-tone[data-tone-option="plum"] .preferences-tone__swatch {
  background: #78668f;
}

.preferences-tone[data-tone-option="coral"] .preferences-tone__swatch {
  background: #a65f5c;
}

.preferences-tone svg {
  width: 15px;
  height: 15px;
  color: var(--action-primary);
}

.preferences-tone .preferences-tone__mode-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .preferences-menu__panel {
    position: fixed;
    top: 68px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}
.platform-frame {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--surface-page);
  isolation: isolate;
}

.platform-frame__content {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.platform-footer {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--border-strong) 58%, transparent);
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--surface-panel) 48%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent),
    0 -10px 28px rgb(32 45 61 / 10%);
  backdrop-filter: blur(24px) saturate(138%);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  font-size: 0.75rem;
  line-height: 1.35;
}

:root[data-theme="light"] .platform-footer {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%),
    0 -10px 28px rgb(32 45 61 / 12%);
}

:root[data-theme="dark"] .platform-footer {
  background: color-mix(in srgb, var(--surface-panel) 66%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 -10px 28px rgb(0 0 0 / 24%);
}

.platform-footer a {
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 140ms ease;
}

.platform-footer a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.platform-footer__separator {
  color: var(--border-strong);
}

@media (max-width: 520px) {
  .platform-footer {
    min-height: 44px;
    flex-wrap: wrap;
    column-gap: var(--space-2);
    row-gap: 0;
    padding-block: 5px;
    text-align: center;
  }

  .platform-footer__separator {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .platform-footer {
    background: var(--surface-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.maintenance-page {
  --maintenance-glass: var(--production-glass-panel);
  --maintenance-glass-strong: var(--production-glass-strong);
  --maintenance-text: var(--production-text);
  --maintenance-muted: var(--production-muted);
  position: relative;
  isolation: isolate;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-6);
  overflow-y: auto;
  padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-8));
  color: var(--maintenance-text);
  background: var(--production-page);
}

.maintenance-page > .production-video-backdrop {
  --production-video-opacity: 1;
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.maintenance-page > .production-video-backdrop video {
  filter: saturate(0.58) contrast(0.98) brightness(0.94);
}

:root[data-theme="dark"] .maintenance-page > .production-video-backdrop video {
  filter: saturate(0.5) contrast(1.04) brightness(0.62);
}

.maintenance-page__brand,
.maintenance-page__content {
  position: relative;
  z-index: 1;
}

.maintenance-page .maintenance-page__brand {
  align-self: start;
  justify-self: center;
  width: min(100%, 1180px);
  min-height: 58px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  background: var(--maintenance-glass);
  box-shadow: var(--production-shadow);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.maintenance-page__brand .product-brand,
.maintenance-page__brand .product-brand__copy strong,
.maintenance-page__brand .preferences-menu__trigger {
  color: var(--maintenance-text);
}

.maintenance-page__brand .product-brand__copy > span,
.maintenance-page__brand small {
  color: var(--maintenance-muted);
}

.maintenance-page__brand-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.maintenance-page__brand-actions small {
  white-space: nowrap;
}

.maintenance-page__content {
  display: grid;
  align-self: center;
  justify-self: center;
  justify-items: start;
  gap: var(--space-4);
  width: min(100%, 640px);
  margin-bottom: 6vh;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border: 1px solid var(--production-border-strong);
  border-radius: var(--radius-medium);
  background: var(--maintenance-glass-strong);
  box-shadow: var(--production-shadow);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}

.maintenance-page__heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.maintenance-page__heading > div:last-child {
  display: grid;
  gap: var(--space-1);
}

.maintenance-page__heading .page-kicker,
.maintenance-page__content h1,
.maintenance-page__message {
  margin: 0;
}

.maintenance-page__content h1 {
  font-size: 2rem;
}

.maintenance-page__message {
  max-width: 56ch;
  color: var(--maintenance-muted);
  line-height: 1.7;
}

.maintenance-page__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--production-border-strong);
  border-radius: var(--radius-medium);
  color: var(--production-accent);
  background: var(--production-accent-soft);
}

.maintenance-page__icon svg {
  width: 24px;
  height: 24px;
}

.maintenance-page__progress {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--production-border);
}

.maintenance-page__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  border-radius: inherit;
  background: var(--production-accent);
  animation: maintenance-progress 1.6s ease-in-out infinite;
}

.maintenance-page__assurance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--maintenance-muted);
  font-size: 0.875rem;
}

.maintenance-page__assurance svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--status-success);
}

.maintenance-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.maintenance-page__actions .button {
  min-height: 40px;
}

.maintenance-page__actions .button svg {
  width: 17px;
  height: 17px;
}

.maintenance-page__content > small {
  color: var(--maintenance-muted);
}

@keyframes maintenance-progress {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(160%); }
  100% { transform: translateX(300%); }
}

@media (max-width: 640px) {
  .maintenance-page {
    gap: var(--space-4);
    padding: var(--space-3);
  }

  .maintenance-page .maintenance-page__brand {
    min-height: 54px;
    padding: var(--space-2) var(--space-3);
  }

  .maintenance-page__brand-actions small,
  .maintenance-page__brand .product-brand__tagline {
    display: none;
  }

  .maintenance-page__content {
    align-self: start;
    gap: var(--space-3);
    margin: clamp(var(--space-4), 8vh, 56px) 0 var(--space-4);
    padding: var(--space-5) var(--space-4);
  }

  .maintenance-page__heading {
    align-items: flex-start;
  }

  .maintenance-page__content h1 {
    font-size: 1.625rem;
  }

  .maintenance-page__actions,
  .maintenance-page__actions .button {
    width: 100%;
  }
}
.asset-creation-surface {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-4) clamp(var(--space-3), 2.4vw, var(--space-6));
  overflow: hidden;
}

.asset-creation-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.asset-creation-page > .asset-creation-workbench {
  flex: 1 1 auto;
}

.asset-workspace-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  padding: var(--space-3) var(--space-4);
  background: var(--project-glass-panel, var(--surface-panel));
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.asset-workspace-title,
.asset-workspace-title > span,
.asset-workspace-tools,
.asset-plan-gate {
  display: flex;
  align-items: center;
}

.asset-workspace-title {
  min-width: 0;
  gap: var(--space-3);
}

.asset-workspace-title > svg {
  flex: 0 0 auto;
  width: 21px;
  color: var(--accent-primary);
}

.asset-workspace-title > span {
  display: block;
  min-width: 0;
}

.asset-workspace-title h1,
.asset-workspace-title p {
  margin: 0;
}

.asset-workspace-title h1 {
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.asset-workspace-title p {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-plan-gate {
  flex: 0 0 auto;
  gap: 5px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--status-warning) 32%, transparent);
  border-radius: var(--radius-small);
  padding: 3px 8px;
  color: var(--status-warning);
  background: var(--status-warning-bg);
  font-size: 0.7rem;
  font-weight: 700;
}

.asset-plan-gate[data-approved='true'] {
  border-color: color-mix(in srgb, var(--status-success) 32%, transparent);
  color: var(--status-success);
  background: var(--status-success-bg);
}

.asset-plan-gate svg {
  width: 14px;
}

.asset-workspace-summary {
  display: flex;
  align-items: stretch;
  border-inline: 1px solid var(--border-default);
}

.asset-workspace-summary span {
  display: grid;
  min-width: 64px;
  padding: 3px var(--space-3);
  color: var(--text-tertiary);
  font-size: 0.68rem;
}

.asset-workspace-summary span + span {
  border-left: 1px solid var(--border-default);
}

.asset-workspace-summary strong {
  color: var(--text-primary);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.asset-workspace-active-count[data-active='true'],
.asset-workspace-active-count[data-active='true'] strong {
  color: var(--status-info);
}

.asset-workspace-tools {
  gap: var(--space-2);
}

.asset-workspace-tools .button {
  min-height: 36px;
  white-space: nowrap;
}

.asset-toolbar-note,
.asset-toolbar-error {
  justify-self: end;
  margin: -4px 0 0;
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.asset-toolbar-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--status-danger);
}

.asset-toolbar-error svg {
  width: 15px;
}

.asset-mobile-tabs {
  display: none;
}

.asset-creation-workbench {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(400px, 1.7fr) minmax(320px, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  background: var(--project-glass-panel, var(--surface-panel));
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.asset-embedded-voice {
  grid-column: 2 / -1;
  grid-template-rows: auto minmax(0, 1fr);
  background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
}

.asset-embedded-voice__heading {
  border-bottom: 1px solid var(--border-default);
}

.asset-embedded-voice__heading > .button {
  flex: 0 0 auto;
}

.asset-embedded-voice__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.78fr);
  min-height: 0;
  overflow: hidden;
}

.asset-embedded-voice__modes,
.asset-embedded-voice__candidate-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.asset-embedded-voice__modes {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.asset-embedded-voice__candidate-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-left: 1px solid var(--border-default);
  background: var(--surface-sunken);
}

.asset-embedded-voice__mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--border-default);
}

.asset-embedded-voice__mode-tabs button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  min-height: 64px;
  border: 0;
  padding: 10px 12px;
  color: var(--text-secondary);
  background: var(--surface-panel);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.asset-embedded-voice__mode-tabs button svg {
  grid-row: 1 / 3;
  width: 18px;
  color: var(--text-tertiary);
}

.asset-embedded-voice__mode-tabs button small {
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 500;
}

.asset-embedded-voice__mode-tabs button[aria-selected='true'] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-primary-soft) 42%, var(--surface-raised));
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}

.asset-embedded-voice__mode-tabs button[aria-selected='true'] svg {
  color: var(--accent-primary);
}

.asset-embedded-voice__context,
.asset-embedded-voice__catalog,
.asset-embedded-voice__generator {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  background: var(--surface-panel);
}

.asset-embedded-voice__context,
.asset-embedded-voice__generator {
  padding: var(--space-3);
}

.asset-embedded-voice__context-head,
.asset-embedded-voice__generator-head,
.asset-embedded-voice__generator-actions,
.asset-embedded-voice__candidate-head,
.asset-embedded-voice__selected-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.asset-embedded-voice__context-head > div,
.asset-embedded-voice__candidate-head > div {
  display: grid;
  gap: 3px;
}

.asset-embedded-voice__context-head strong,
.asset-embedded-voice__candidate-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.86rem;
}

.asset-embedded-voice__profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
}

.asset-embedded-voice__profile-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: 9px 10px;
}

.asset-embedded-voice__profile-grid dt {
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.asset-embedded-voice__profile-grid dd {
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-embedded-voice__hint {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: 0.68rem;
  line-height: 1.55;
}

.asset-embedded-voice__recommendations {
  display: grid;
  gap: 6px;
  margin-top: var(--space-3);
}

.asset-embedded-voice__recommendations > span {
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.asset-embedded-voice__recommendations > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.asset-embedded-voice__recommendations button {
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
}

.asset-embedded-voice__recommendations button[aria-pressed='true'] {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  background: var(--accent-primary-soft);
}

.asset-embedded-voice__catalog {
  min-height: 218px;
  overflow: hidden;
}

.asset-embedded-voice__catalog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.asset-embedded-voice__catalog-tools label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 0 9px;
  color: var(--text-tertiary);
  background: var(--surface-sunken);
}

.asset-embedded-voice__catalog-tools svg {
  width: 15px;
  flex: 0 0 auto;
}

.asset-embedded-voice__catalog-tools input,
.asset-embedded-voice__catalog-tools select {
  min-width: 0;
  height: 34px;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
}

.asset-embedded-voice__template-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 260px;
  overflow-y: auto;
}

.asset-embedded-voice__template-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: 8px 10px;
  color: var(--text-secondary);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.asset-embedded-voice__template-list button:nth-child(2n) {
  border-right: 0;
}

.asset-embedded-voice__template-list button[aria-selected='true'] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-primary-soft) 36%, var(--surface-raised));
}

.asset-embedded-voice__template-list button > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.asset-embedded-voice__template-list strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-embedded-voice__template-list small {
  color: var(--text-tertiary);
  font-size: 0.65rem;
}

.asset-embedded-voice__template-list svg {
  width: 15px;
  flex: 0 0 auto;
  color: var(--accent-primary);
}

.asset-embedded-voice__generator {
  display: grid;
  gap: var(--space-2);
}

.asset-embedded-voice__generator-head span {
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.asset-embedded-voice__generator-head small,
.asset-embedded-voice__generator-actions > span {
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.asset-embedded-voice__generator textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 9px 10px;
  color: var(--text-primary);
  background: var(--surface-sunken);
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.55;
  resize: vertical;
}

.asset-embedded-voice__language-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(150px, 0.75fr);
  gap: var(--space-2);
}

.asset-embedded-voice__language-grid label,
.asset-embedded-voice__prompt-field,
.asset-embedded-voice__script-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 650;
}

.asset-embedded-voice__language-grid label span,
.asset-embedded-voice__prompt-field > span,
.asset-embedded-voice__script-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.asset-embedded-voice__language-grid small,
.asset-embedded-voice__prompt-field small,
.asset-embedded-voice__script-field small {
  color: var(--text-tertiary);
  font-size: 0.64rem;
  font-weight: 500;
}

.asset-embedded-voice__language-grid select,
.asset-embedded-voice__language-grid input {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 0 9px;
  color: var(--text-primary);
  background: var(--surface-sunken);
  font: inherit;
  font-size: 0.72rem;
}

.asset-embedded-voice__compatibility {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--status-success);
  border-radius: 5px;
  padding: 7px 9px;
  background: var(--surface-sunken);
}

.asset-embedded-voice__compatibility.is-experimental {
  border-color: var(--status-warning);
}

.asset-embedded-voice__compatibility span {
  color: var(--text-primary);
  font-size: 0.69rem;
  font-weight: 700;
}

.asset-embedded-voice__compatibility small {
  overflow-wrap: anywhere;
  color: var(--text-tertiary);
  font-size: 0.62rem;
  font-weight: 500;
}

.asset-embedded-voice__prompt-field textarea {
  min-height: 104px;
}

.asset-embedded-voice__script-field textarea {
  min-height: 68px;
}

.asset-embedded-voice__duration {
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 4px 7px;
  color: var(--text-secondary);
  font-size: 0.67rem;
  white-space: nowrap;
}

.asset-embedded-voice__candidate-panel audio {
  width: 100%;
  height: 38px;
}

.asset-embedded-voice__player-empty {
  display: grid;
  min-height: 116px;
  place-items: center;
  gap: 7px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-small);
  color: var(--text-tertiary);
  background: var(--surface-panel);
  font-size: 0.72rem;
}

.asset-embedded-voice__player-empty svg {
  width: 24px;
  color: var(--accent-primary);
}

.asset-embedded-voice__selected-candidate {
  flex-wrap: wrap;
  border-block: 1px solid var(--border-default);
  padding-block: var(--space-2);
}

.asset-embedded-voice__selected-candidate strong {
  color: var(--text-primary);
  font-size: 0.77rem;
}

.asset-embedded-voice__selected-candidate > span {
  margin-right: auto;
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.asset-embedded-voice__candidate-list {
  display: grid;
  gap: 5px;
}

.asset-embedded-voice__candidate-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 8px;
  color: var(--text-secondary);
  background: var(--surface-panel);
  text-align: left;
  cursor: pointer;
}

.asset-embedded-voice__candidate-list button[aria-pressed='true'] {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary-soft) 32%, var(--surface-panel));
}

.asset-embedded-voice__candidate-list span,
.asset-embedded-voice__candidate-list small {
  color: var(--text-tertiary);
  font-size: 0.64rem;
}

.asset-embedded-voice__candidate-list strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-embedded-voice__empty,
.asset-embedded-voice__error {
  margin: 0;
  padding: var(--space-3);
  color: var(--text-tertiary);
  font-size: 0.7rem;
  line-height: 1.5;
}

.asset-embedded-voice__error {
  color: var(--status-danger);
}

@media (max-width: 1060px) {
  .asset-embedded-voice__body { grid-template-columns: 1fr; overflow-y: auto; }
  .asset-embedded-voice__modes,
  .asset-embedded-voice__candidate-panel { overflow: visible; }
  .asset-embedded-voice__candidate-panel { border-top: 1px solid var(--border-default); border-left: 0; }
}

@media (max-width: 760px) {
  .asset-embedded-voice { grid-column: 1; }
  .asset-embedded-voice__mode-tabs,
  .asset-embedded-voice__profile-grid,
  .asset-embedded-voice__template-list { grid-template-columns: 1fr; }
  .asset-embedded-voice__template-list button,
  .asset-embedded-voice__template-list button:nth-child(2n) { border-right: 0; }
  .asset-embedded-voice__catalog-tools { grid-template-columns: 1fr; }
  .asset-embedded-voice__language-grid { grid-template-columns: 1fr; }
  .asset-embedded-voice__context-head,
  .asset-embedded-voice__generator-actions { align-items: stretch; flex-direction: column; }
  .asset-embedded-voice__generator-actions .button { width: 100%; justify-content: center; }
  .asset-embedded-voice__language-grid select,
  .asset-embedded-voice__language-grid input,
  .asset-embedded-voice__generator textarea { font-size: 1rem; }
}

.asset-library,
.asset-reference-canvas,
.asset-prompt-inspector {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.asset-reference-canvas {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
}

.asset-reference-canvas::-webkit-scrollbar {
  display: none;
}

.asset-library {
  border-right: 1px solid var(--border-default);
  scrollbar-width: none;
}

.asset-library::-webkit-scrollbar {
  display: none;
}

.asset-category-tabs {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 58px;
  border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--project-glass-strong, var(--surface-panel)) 90%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.asset-category-tabs button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 7px 2px;
  color: var(--text-tertiary);
  background: transparent;
  font-size: 0.66rem;
}

.asset-category-tabs button + button {
  border-left: 1px solid var(--border-default);
}

.asset-category-tabs button[aria-selected='true'] {
  color: var(--text-primary);
  background: var(--surface-hover);
  box-shadow: inset 0 -2px 0 var(--action-primary);
}

.asset-category-tabs svg {
  width: 15px;
}

.asset-category-tabs strong {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 15px;
  color: var(--text-tertiary);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.asset-entity-list {
  padding-bottom: var(--space-4);
}

.asset-entity-list > .feedback-state {
  min-height: 220px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.asset-entity-group {
  border-bottom: 1px solid var(--border-default);
}

.asset-entity-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
}

.asset-entity-group > header > span:first-child {
  display: grid;
  min-width: 0;
}

.asset-entity-group > header strong,
.asset-entity-group > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-entity-group > header strong {
  font-size: 0.82rem;
}

.asset-entity-group > header small {
  color: var(--text-tertiary);
  font-size: 0.68rem;
}

.asset-entity-group .status-label {
  flex: 0 0 auto;
}

.asset-source-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--space-3) var(--space-2);
}

.asset-source-ledger span,
.asset-source-ledger small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.64rem;
}

.asset-source-ledger span {
  color: var(--text-tertiary);
}

.asset-source-ledger small {
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-secondary);
  background: var(--surface-hover);
}

.asset-entity-stack {
  display: grid;
  gap: 2px;
  padding: 0 var(--space-2) var(--space-3);
}

.asset-entity-node {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 66px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  padding: 5px;
  color: var(--text-primary);
  text-align: left;
  background: transparent;
}

.asset-entity-node:hover {
  background: var(--surface-hover);
}

.asset-entity-node[data-active='true'] {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  box-shadow: inset 3px 0 0 var(--action-primary);
}

.asset-entity-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: calc(var(--radius-small) - 1px);
  color: var(--text-tertiary);
  background: var(--surface-hover);
}

.asset-entity-thumb[data-kind='identity_face_lock'] {
  width: 54px;
  height: 54px;
  margin-inline: 5px;
}

.asset-entity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-entity-thumb[data-kind='character_turnaround'] img,
.asset-entity-thumb[data-kind='scene_turnaround'] img,
.asset-entity-thumb[data-kind='scene_master'] img {
  object-fit: contain;
}

.asset-entity-thumb svg {
  width: 20px;
}

.asset-entity-node__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.asset-entity-node__copy strong,
.asset-entity-node__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-entity-node__copy strong {
  font-size: 0.76rem;
}

.asset-entity-node__copy small {
  color: var(--text-tertiary);
  font-size: 0.68rem;
}

.asset-entity-node[data-status='approved'] .asset-entity-node__copy small {
  color: var(--status-success);
}

.asset-entity-node[data-status='candidate_review'] .asset-entity-node__copy small,
.asset-entity-node[data-status='prompt_ready'] .asset-entity-node__copy small,
.asset-entity-node[data-status='generating'] .asset-entity-node__copy small {
  color: var(--status-info);
}

.asset-entity-node[data-status='failed'] .asset-entity-node__copy small {
  color: var(--status-danger);
}

.asset-reference-canvas {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.asset-reference-canvas {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0;
}

.asset-reference-meta {
  min-width: 0;
  min-height: 0;
}

.asset-reference-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.asset-reference-heading p,
.asset-reference-heading h2,
.asset-reference-heading span {
  margin: 0;
}

.asset-reference-heading p {
  color: var(--accent-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.asset-reference-heading h2 {
  margin-top: 2px;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.asset-reference-heading > div > span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

.asset-inline-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--status-warning) 34%, transparent);
  border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  color: var(--status-warning);
  background: var(--status-warning-bg);
  font-size: 0.74rem;
}

.asset-inline-alert--danger {
  border-color: color-mix(in srgb, var(--status-danger) 34%, transparent);
  color: var(--status-danger);
  background: var(--status-danger-bg);
}

.asset-inline-alert--info {
  border-color: color-mix(in srgb, var(--status-info) 34%, transparent);
  color: var(--status-info);
  background: var(--status-info-bg);
}

.asset-inline-alert svg {
  flex: 0 0 auto;
  width: 15px;
}

.asset-dependency-alert {
  align-items: center;
}

.asset-dependency-alert > span {
  flex: 1 1 auto;
}

.asset-dependency-alert .button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 9px;
  color: currentColor;
}

@media (max-width: 720px) {
  .asset-dependency-alert {
    flex-wrap: wrap;
  }

  .asset-dependency-alert > span {
    flex-basis: calc(100% - 24px);
  }

  .asset-dependency-alert .button {
    margin-left: 23px;
  }
}

.asset-reference-frame {
  position: relative;
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: auto;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-medium);
  background: color-mix(in srgb, var(--surface-hover) 76%, transparent);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
}

.asset-reference-frame[data-kind='identity_face_lock'],
.asset-reference-frame[data-kind='prop_reference'] {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}

.asset-reference-frame[data-kind='scene_master'] {
  aspect-ratio: 16 / 9;
}

.asset-reference-frame[data-kind='character_turnaround'],
.asset-reference-frame[data-kind='scene_turnaround'] {
  aspect-ratio: 16 / 9;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.asset-reference-frame > img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-reference-preview-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.asset-reference-preview-trigger img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-reference-preview-trigger > span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 65%, transparent);
  border-radius: var(--radius-small);
  padding: 5px 8px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  box-shadow: var(--shadow-panel);
  font-size: 0.68rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.asset-reference-preview-trigger:hover > span,
.asset-reference-preview-trigger:focus-visible > span {
  opacity: 1;
  transform: translateY(0);
}

.asset-reference-preview-trigger > span svg {
  width: 14px;
  height: 14px;
}

.asset-reference-download {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--border-strong) 65%, transparent);
  border-radius: var(--radius-small);
  padding: 5px 8px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  box-shadow: var(--shadow-panel);
  font-size: 0.68rem;
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.asset-reference-download:hover,
.asset-reference-download:focus-visible {
  border-color: var(--action-primary);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--action-primary) 16%, var(--surface-panel));
}

.asset-reference-download svg {
  width: 14px;
  height: 14px;
}

.asset-preview-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  background: color-mix(in srgb, #071015 70%, transparent);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.asset-preview-dialog__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 100%);
  height: min(880px, 100%);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  background: var(--project-glass-panel, var(--surface-panel));
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.asset-preview-dialog__panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
}

.asset-preview-dialog__panel > header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.asset-preview-dialog__panel > header > div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.asset-preview-dialog__panel > header > div > span {
  min-width: 48px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.asset-preview-dialog__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--surface-subtle) 72%, transparent);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.asset-preview-dialog__viewport[data-dragging='true'] {
  cursor: grabbing;
}

.asset-preview-dialog__viewport img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  transform-origin: center center;
  transition: transform 100ms ease-out;
  user-select: none;
}

@media (max-height: 760px) and (min-width: 721px) {
  .asset-reference-frame {
    min-height: 0;
    height: 100%;
    max-height: calc(100dvh - 300px);
  }

  .asset-reference-frame[data-kind='identity_face_lock'],
  .asset-reference-frame[data-kind='prop_reference'] {
    width: auto;
  }
}

.asset-reference-empty,
.asset-reference-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 260px;
  color: var(--text-tertiary);
  text-align: center;
}

.asset-reference-empty svg,
.asset-reference-placeholder svg {
  width: 32px;
}

.asset-reference-empty strong {
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.asset-reference-empty span {
  max-width: 34ch;
  font-size: 0.74rem;
}

.asset-candidate-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: min(100%, 900px);
  margin: var(--space-3) auto 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.asset-candidate-strip::-webkit-scrollbar {
  display: none;
}

.asset-candidate-strip button {
  display: grid;
  flex: 0 0 72px;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  padding: 4px;
  color: var(--text-tertiary);
  background: transparent;
  font-size: 0.66rem;
}

.asset-candidate-strip button[data-active='true'] {
  border-color: var(--action-primary);
  color: var(--text-primary);
  background: var(--surface-hover);
}

.asset-candidate-strip button[data-status='approved'] {
  color: var(--status-success);
}

.asset-candidate-strip button[data-status='rejected'] {
  opacity: 0.56;
}

.asset-candidate-strip button > span {
  width: 62px;
  height: 50px;
  overflow: hidden;
  border-radius: calc(var(--radius-small) - 2px);
  background: var(--surface-hover);
}

.asset-candidate-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-canvas-actions {
  position: sticky;
  bottom: calc(-1 * var(--space-4));
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) calc(-1 * var(--space-4)) 0;
  border-top: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: color-mix(in srgb, var(--project-glass-strong, var(--surface-panel)) 92%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.asset-upload-action {
  cursor: pointer;
}

.asset-upload-action[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.56;
}

.asset-review-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 900px);
  margin: 0 auto;
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}

.asset-review-actions > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-right: auto;
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

.asset-review-actions svg,
.asset-canvas-actions svg {
  width: 16px;
}

.asset-prompt-inspector {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--surface-subtle) 34%, transparent);
}

.asset-prompt-inspector > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--project-glass-strong, var(--surface-panel)) 90%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.asset-prompt-inspector > header > div,
.asset-prompt-inspector > header span {
  display: flex;
  align-items: center;
}

.asset-prompt-inspector > header > div {
  gap: var(--space-2);
}

.asset-prompt-prepare {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 8px;
}

.asset-prompt-inspector > header > div > svg {
  width: 17px;
  color: var(--accent-primary);
}

.asset-prompt-inspector > header span {
  align-items: flex-start;
  flex-direction: column;
}

.asset-prompt-inspector > header h2 {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0;
}

.asset-prompt-inspector > header small {
  color: var(--text-tertiary);
  font-size: 0.68rem;
}

.asset-prompt-fields {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.asset-prompt-fields label {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
}

.asset-prompt-fields textarea {
  width: 100%;
  min-height: 0;
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: var(--space-3);
  color: var(--text-primary);
  background: var(--project-glass-field, var(--surface-panel));
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.6;
}

.asset-prompt-fields textarea:focus-visible {
  border-color: var(--action-primary);
  outline: 2px solid color-mix(in srgb, var(--action-primary) 32%, transparent);
  outline-offset: 1px;
}

.asset-prompt-fields > span {
  color: var(--text-tertiary);
  font-size: 0.67rem;
  line-height: 1.45;
}

.asset-inspector-error {
  margin: var(--space-2) var(--space-3) 0;
}

.asset-save-prompt {
  width: calc(100% - 2 * var(--space-3));
  margin: 0 var(--space-3) var(--space-3);
}

.asset-output-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--border-default);
}

.asset-output-spec > div {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
}

.asset-output-spec > div + div {
  border-left: 1px solid var(--border-default);
}

.asset-output-spec dt {
  color: var(--text-tertiary);
  font-size: 0.64rem;
}

.asset-output-spec dd {
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-prompt-disclosure {
  border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--surface-panel) 54%, transparent);
}

.asset-prompt-disclosure > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.asset-prompt-disclosure > summary::-webkit-details-marker {
  display: none;
}

.asset-prompt-disclosure__heading,
.asset-prompt-disclosure__heading > span,
.asset-prompt-disclosure__state {
  display: flex;
  align-items: center;
}

.asset-prompt-disclosure__heading {
  min-width: 0;
  gap: var(--space-2);
}

.asset-prompt-disclosure__heading > svg {
  flex: 0 0 auto;
  width: 16px;
  color: var(--accent-primary);
}

.asset-prompt-disclosure__heading > span {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
}

.asset-prompt-disclosure__heading strong {
  font-size: 0.76rem;
}

.asset-prompt-disclosure__heading small,
.asset-prompt-disclosure__state {
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.asset-prompt-disclosure__state {
  flex: 0 0 auto;
  gap: var(--space-1);
}

.asset-prompt-disclosure__state svg {
  width: 14px;
  transition: transform 160ms ease;
}

.asset-prompt-disclosure[open] .asset-prompt-disclosure__state svg {
  transform: rotate(180deg);
}

.asset-prompt-disclosure__body {
  border-top: 1px solid var(--border-default);
}

.asset-inspector-disclosure {
  border-bottom: 1px solid var(--border-default);
}

.asset-inspector-disclosure summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  font-size: 0.74rem;
}

.asset-inspector-disclosure summary::-webkit-details-marker {
  display: none;
}

.asset-inspector-disclosure summary > svg:first-child {
  width: 16px;
  color: var(--accent-primary);
}

.asset-inspector-disclosure summary > svg:last-child {
  width: 14px;
  transition: transform 160ms ease;
}

.asset-inspector-disclosure[open] summary > svg:last-child {
  transform: rotate(180deg);
}

.asset-inspector-disclosure summary strong {
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.asset-disclosure-body,
.asset-agent-list {
  margin: 0;
  border-top: 1px solid var(--border-default);
  padding: var(--space-3);
}

.asset-disclosure-body dl {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 5px var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 0.7rem;
}

.asset-disclosure-body dt {
  color: var(--text-tertiary);
}

.asset-disclosure-body dd {
  margin: 0;
  color: var(--text-secondary);
}

.asset-disclosure-body ul,
.asset-disclosure-body > p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.5;
}

.asset-disclosure-body ul {
  padding-left: var(--space-4);
}

.asset-segment-evidence {
  display: grid;
  gap: var(--space-2);
}

.asset-segment-evidence article {
  border-left: 2px solid var(--border-strong);
  padding-left: var(--space-2);
}

.asset-segment-evidence strong,
.asset-segment-evidence p {
  margin: 0;
  font-size: 0.7rem;
}

.asset-segment-evidence p {
  margin-top: 2px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.asset-agent-list {
  display: grid;
  gap: 7px;
  list-style: none;
}

.asset-agent-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

.asset-agent-list li > span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.asset-agent-list li[data-complete='true'] {
  color: var(--status-success);
}

.asset-agent-list li[data-complete='true'] > span {
  border-color: var(--status-success);
  background: var(--status-success-bg);
}

.asset-agent-list svg {
  width: 10px;
}



@media (max-width: 1240px) and (min-width: 761px) {
  .asset-creation-workbench {
    grid-template-columns: minmax(230px, 0.72fr) minmax(360px, 1.35fr);
    overflow-y: auto;
  }

  .asset-prompt-inspector {
    grid-column: 1 / -1;
    min-height: 520px;
    overflow: visible;
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .asset-workspace-toolbar,
  .asset-creation-workbench,
  .asset-category-tabs,
  .asset-prompt-inspector > header,
  .asset-canvas-actions {
    background: var(--production-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .asset-workspace-toolbar,
  .asset-creation-workbench,
  .asset-category-tabs,
  .asset-prompt-inspector > header,
  .asset-canvas-actions {
    background: var(--production-panel);
  }
}

@media (max-width: 760px) {
  .asset-creation-surface {
    padding: var(--space-3);
  }

  .asset-creation-page {
    gap: var(--space-2);
  }

  .asset-workspace-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 60px;
    padding: var(--space-2) var(--space-3);
  }

  .asset-workspace-title > svg,
  .asset-workspace-title p,
  .asset-plan-gate,
  .asset-workspace-tools > .icon-button {
    display: none;
  }

  .asset-workspace-summary {
    display: block;
    border: 0;
  }

  .asset-workspace-summary > span {
    display: none;
  }

  .asset-workspace-summary > .asset-workspace-active-count {
    display: grid;
    min-width: 52px;
    padding: 0 var(--space-1);
    text-align: center;
  }

  .asset-workspace-title h1 {
    font-size: 1rem;
  }

  .asset-workspace-tools .button {
    min-height: 34px;
    padding-inline: var(--space-3);
    font-size: 0.72rem;
  }

  .asset-toolbar-note,
  .asset-toolbar-error {
    display: none;
  }

  .asset-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--production-border);
    border-radius: var(--radius-small);
    background: var(--project-glass-panel, var(--surface-panel));
  }

  .asset-mobile-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 0;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.74rem;
  }

  .asset-mobile-tabs button + button {
    border-left: 1px solid var(--border-default);
  }

  .asset-mobile-tabs button[aria-selected='true'] {
    color: var(--text-primary);
    background: var(--surface-hover);
    box-shadow: inset 0 -2px 0 var(--action-primary);
  }

  .asset-creation-workbench {
    display: block;
    overflow: hidden;
  }

  .asset-library,
  .asset-reference-canvas,
  .asset-prompt-inspector {
    display: none;
    height: 100%;
    border: 0;
  }

  .asset-creation-page[data-mobile-pane='library'] .asset-library,
  .asset-creation-page[data-mobile-pane='canvas'] .asset-reference-canvas,
  .asset-creation-page[data-mobile-pane='inspector'] .asset-prompt-inspector {
    display: block;
  }

  .asset-creation-page[data-mobile-pane='canvas'] .asset-reference-canvas {
    display: grid;
  }

  .asset-category-tabs {
    min-height: 52px;
  }

  .asset-entity-node {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .asset-entity-thumb {
    width: 72px;
  }

  .asset-reference-canvas {
    padding: var(--space-3);
  }

.asset-reference-frame {
    min-height: 0;
    max-height: 100%;
    height: 100%;
  }

  .asset-reference-frame[data-kind='character_turnaround'],
  .asset-reference-frame[data-kind='scene_turnaround'] {
    min-height: 0;
  }

  .asset-canvas-actions {
    bottom: calc(-1 * var(--space-3));
    flex-wrap: wrap;
    margin-inline: calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .asset-canvas-actions .button,
  .asset-upload-action {
    flex: 1 1 130px;
    min-width: 0;
  }

  .asset-review-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .asset-review-actions > span {
    flex-basis: 100%;
  }

  .asset-review-actions .button {
    flex: 1;
  }

  .asset-prompt-inspector > header {
    position: sticky;
  }

  .asset-output-spec {
    grid-template-columns: 1fr;
  }

  .asset-output-spec > div + div {
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }
}
.asset-page-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  padding: 7px var(--space-3);
  background: var(--project-glass-panel, var(--surface-panel));
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(124%);
  -webkit-backdrop-filter: blur(22px) saturate(124%);
}

.asset-page-topbar__project {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-page-topbar__project-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.asset-page-topbar__project-id {
  flex: 0 1 auto;
  font-size: 0.68rem;
}

.asset-page-topbar__project-id .project-id-badge__copy {
  width: 24px;
  height: 24px;
}

.asset-page-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.asset-style-lock {
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.asset-style-lock__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  cursor: pointer;
  list-style: none;
}

.asset-style-lock__summary::-webkit-details-marker {
  display: none;
}

.asset-style-lock__digest {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-style-lock__digest[data-locked='true'] {
  color: var(--status-success);
}

.asset-style-lock__chevron {
  width: 15px;
  color: var(--text-tertiary);
  transition: transform 160ms ease;
}

.asset-style-lock[open] .asset-style-lock__chevron {
  transform: rotate(180deg);
}

.asset-style-lock__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  border-top: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
}

.asset-style-lock__content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.asset-style-lock h2,
.asset-style-lock p {
  margin: 0;
}

.asset-style-lock h2 {
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
}

.asset-style-lock__status {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.3;
}

.asset-style-lock__analysis {
  max-height: 6rem;
  overflow-y: auto;
  border-left: 2px solid var(--accent-primary);
  padding-left: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}

.asset-style-lock__analysis strong {
  color: var(--text-primary);
  font-size: 0.74rem;
}

.asset-style-lock__analysis p {
  margin: 4px 0 0;
}

.asset-style-lock__error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--status-danger-text, #f87171);
  font-size: 0.75rem;
}

.asset-style-lock__error svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.asset-style-lock input[type="file"] {
  display: none;
}

.asset-style-lock__controls {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
}

.asset-style-lock__scope-tabs {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-sunken);
}

.asset-style-lock__scope-tabs button {
  border: 0;
  border-right: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  padding: 5px 9px;
  font-size: 0.74rem;
  cursor: pointer;
}

.asset-style-lock__scope-tabs button:last-child {
  border-right: 0;
}

.asset-style-lock__scope-tabs button[aria-selected='true'] {
  background: var(--accent-primary-soft);
  color: var(--text-primary);
}

.asset-agent-assistant {
  display: flex;
  min-height: 360px;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.asset-agent-conversation__messages {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 148px;
  max-height: min(34vh, 320px);
  overflow: auto;
  padding-right: 4px;
}

.asset-agent-message {
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 7px 8px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.asset-agent-message strong { display: block; margin-bottom: 2px; color: var(--text-primary); font-size: 0.7rem; }
.asset-agent-message--user { background: var(--surface-sunken); }
.asset-agent-message--assistant { background: color-mix(in srgb, var(--accent-primary-soft) 45%, var(--surface-raised)); }
.asset-agent-message--status { color: var(--text-muted); }

.asset-agent-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  align-self: stretch;
  padding: var(--space-6) var(--space-3);
  color: var(--text-secondary);
  text-align: center;
}

.asset-agent-empty svg {
  width: 24px;
  color: var(--accent-primary);
}

.asset-agent-empty strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}

.asset-agent-empty span {
  max-width: 34ch;
  font-size: 0.72rem;
  line-height: 1.55;
}

.asset-agent-assistant__notice {
  margin: 0;
  color: var(--status-warning);
  font-size: 0.7rem;
  line-height: 1.45;
}

.asset-agent-composer {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.asset-agent-composer textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: var(--space-3);
  color: var(--text-primary);
  background: var(--project-glass-field, var(--surface-panel));
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.55;
  resize: vertical;
}

.asset-agent-composer textarea:focus-visible {
  border-color: var(--action-primary);
  outline: 2px solid color-mix(in srgb, var(--action-primary) 32%, transparent);
  outline-offset: 1px;
}

.asset-agent-conversation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.asset-agent-draft {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.45;
}

.asset-agent-draft > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.asset-agent-draft > summary::-webkit-details-marker { display: none; }
.asset-agent-draft > summary small { color: var(--text-tertiary); font-size: 0.66rem; }
.asset-agent-draft > summary svg { width: 14px; color: var(--text-tertiary); transition: transform 160ms ease; }
.asset-agent-draft[open] > summary svg { transform: rotate(180deg); }
.asset-agent-draft p { margin: var(--space-2) 0 0; white-space: pre-wrap; }

.asset-source-picker-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--production-overlay, rgb(8 16 22 / 76%));
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.asset-source-picker {
  --asset-picker-surface: var(--production-panel, var(--surface-panel));
  --asset-picker-surface-strong: var(--production-panel-strong, var(--surface-subtle));
  --asset-picker-surface-featured: var(--production-featured, var(--surface-hover));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1240px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--asset-picker-surface) 96%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow:
    0 28px 80px rgb(0 0 0 / 34%),
    inset 0 1px 0 var(--production-glass-highlight, rgb(255 255 255 / 10%));
}

.asset-source-picker__header,
.asset-source-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.asset-source-picker__header h2 {
  margin: 3px 0;
  font-size: 1.05rem;
}

.asset-source-picker__header p,
.asset-source-picker__preview p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.5;
}

.asset-source-picker__body {
  display: grid;
  grid-template-columns: 230px minmax(360px, 1fr) 260px;
  min-height: 0;
}

.asset-source-picker__projects,
.asset-source-picker__assets,
.asset-source-picker__preview {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
}

.asset-source-picker__projects {
  border-right: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--asset-picker-surface-strong) 94%, transparent);
}

.asset-source-picker__assets {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.asset-source-picker__preview {
  border-left: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--asset-picker-surface-strong) 94%, transparent);
}

.asset-source-picker__search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  padding: 0 9px;
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--production-glass-field, var(--surface-panel)) 92%, var(--asset-picker-surface));
}

.asset-source-picker__search:focus-within {
  border-color: var(--action-primary);
  outline: 2px solid color-mix(in srgb, var(--action-primary) 26%, transparent);
  outline-offset: 1px;
}

.asset-source-picker__search svg { width: 15px; flex: 0 0 auto; }
.asset-source-picker__search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
}

.asset-source-picker__project-list,
.asset-source-picker__asset-list {
  display: grid;
  align-content: start;
  gap: 6px;
  margin-top: var(--space-3);
}

.asset-source-picker__project,
.asset-source-picker__asset {
  display: grid;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  color: var(--text-primary);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.asset-source-picker__project {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px;
}

.asset-source-picker__project:hover,
.asset-source-picker__project[data-active='true'] {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--asset-picker-surface) 94%, var(--asset-picker-surface-featured));
}

.asset-source-picker__project svg { width: 16px; margin-top: 2px; color: var(--action-primary); }
.asset-source-picker__project span,
.asset-source-picker__asset-copy { display: grid; min-width: 0; gap: 3px; }
.asset-source-picker__project strong,
.asset-source-picker__asset strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; }
.asset-source-picker__project small,
.asset-source-picker__asset small { color: var(--text-tertiary); font-size: 0.64rem; line-height: 1.35; }

.asset-source-picker__asset-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.asset-source-picker__asset-head > div { display: grid; gap: 3px; min-width: 0; }
.asset-source-picker__asset-head strong { font-size: 0.84rem; }
.asset-source-picker__asset-head small { color: var(--text-tertiary); font-size: 0.66rem; }
.asset-source-picker__asset-head .asset-source-picker__search { width: min(260px, 46%); }

.asset-source-picker__asset {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-color: var(--border-default);
  background: color-mix(in srgb, var(--asset-picker-surface) 94%, var(--asset-picker-surface-strong));
}

.asset-source-picker__asset:hover,
.asset-source-picker__asset[data-active='true'] {
  border-color: var(--action-primary);
  background: color-mix(in srgb, var(--asset-picker-surface) 88%, var(--asset-picker-surface-featured));
}

.asset-source-picker__asset:disabled { opacity: 0.56; cursor: not-allowed; }
.asset-source-picker__thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-small);
  color: var(--text-tertiary);
  background: var(--asset-picker-surface-strong);
}
.asset-source-picker__thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-source-picker__thumb svg { width: 22px; }
.asset-source-picker__asset audio { width: 170px; max-width: 24vw; }

.asset-source-picker__preview h3 { margin: 6px 0 2px; font-size: 0.92rem; }
.asset-source-picker__preview > img {
  display: block;
  width: 100%;
  max-height: 300px;
  margin: var(--space-3) 0;
  object-fit: contain;
  border: 1px solid var(--border-default);
  background: var(--asset-picker-surface);
}
.asset-source-picker__preview > audio { width: 100%; margin: var(--space-3) 0; }
.asset-source-picker__preview dl { display: grid; gap: 9px; margin: var(--space-4) 0 0; }
.asset-source-picker__preview dl div { display: grid; gap: 2px; }
.asset-source-picker__preview dt { color: var(--text-tertiary); font-size: 0.64rem; }
.asset-source-picker__preview dd { margin: 0; color: var(--text-secondary); font-size: 0.7rem; line-height: 1.4; }
.asset-source-picker__preview-empty,
.asset-source-picker__message,
.asset-source-picker__empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 130px;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  text-align: center;
}
.asset-source-picker__preview-empty svg,
.asset-source-picker__message svg { width: 24px; color: var(--action-primary); }
.asset-source-picker__message--error { color: var(--status-danger); }

.asset-source-picker__footer {
  border-top: 1px solid var(--border-default);
  border-bottom: 0;
  color: var(--text-secondary);
  font-size: 0.72rem;
  background: color-mix(in srgb, var(--asset-picker-surface-strong) 94%, transparent);
}
.asset-source-picker__footer > div { display: flex; gap: var(--space-2); }

@media (max-width: 900px) {
  .asset-source-picker__body { grid-template-columns: 190px minmax(0, 1fr); }
  .asset-source-picker__preview { display: none; }
}

@media (max-width: 760px) {
  .asset-page-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
  }

  .asset-page-topbar__project-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .asset-page-topbar__actions .product-brand {
    display: none;
  }

  .asset-style-lock__body {
    grid-template-columns: 1fr;
  }

  .asset-style-lock__body > .button {
    justify-content: center;
  }

  .asset-style-lock__controls { justify-items: stretch; }
  .asset-style-lock__scope-tabs { width: 100%; }
  .asset-style-lock__scope-tabs button { flex: 1; }

  .asset-source-picker-backdrop { padding: 0; }
  .asset-source-picker { width: 100%; max-height: 100vh; border-radius: 0; }
  .asset-source-picker__header,
  .asset-source-picker__footer { padding: var(--space-3); }
  .asset-source-picker__body { grid-template-columns: 1fr; overflow: auto; }
  .asset-source-picker__projects { max-height: 190px; border-right: 0; border-bottom: 1px solid var(--border-default); }
  .asset-source-picker__assets { min-height: 360px; }
  .asset-source-picker__asset-head { align-items: stretch; flex-direction: column; }
  .asset-source-picker__asset-head .asset-source-picker__search { width: 100%; }
  .asset-source-picker__asset { grid-template-columns: 54px minmax(0, 1fr); }
  .asset-source-picker__thumb { width: 54px; height: 50px; }
  .asset-source-picker__asset audio { grid-column: 2; width: 100%; max-width: none; }
  .asset-source-picker__footer { align-items: stretch; flex-direction: column; }
  .asset-source-picker__footer > div { justify-content: end; }
  .asset-embedded-voice__heading { align-items: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-transparency: reduce) {
  .asset-source-picker-backdrop {
    background: var(--production-overlay, rgb(8 16 22 / 88%));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .asset-source-picker,
  .asset-source-picker__projects,
  .asset-source-picker__preview,
  .asset-source-picker__footer {
    background: var(--production-panel, var(--surface-panel));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.project-production-surface {
  --project-glass-panel: var(--production-glass-panel);
  --project-glass-panel: color-mix(in srgb, var(--production-glass-panel) 94%, transparent);
  --project-glass-strong: var(--production-glass-strong);
  --project-glass-strong: color-mix(in srgb, var(--production-glass-strong) 94%, transparent);
  --project-glass-featured: var(--production-glass-featured);
  --project-glass-field: var(--production-glass-field);
  --project-glass-field: color-mix(in srgb, var(--production-glass-field) 92%, transparent);
  --surface-page: transparent;
  --surface-panel: var(--project-glass-panel);
  --surface-subtle: var(--project-glass-strong);
  --surface-muted: var(--project-glass-strong);
  --surface-hover: var(--project-glass-featured);
  --text-primary: var(--production-text);
  --text-secondary: var(--production-muted);
  --text-tertiary: var(--production-faint);
  --border-default: var(--production-border);
  --border-strong: var(--production-border-strong);
  --shadow-panel: 0 16px 42px rgb(7 12 18 / 18%);
  position: relative;
  isolation: isolate;
  color: var(--production-text);
  background: transparent;
}

.project-state-surface {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.project-production-surface > .production-video-backdrop {
  --production-video-opacity: 1;
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.project-production-surface > .production-video-backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.58) contrast(0.96) brightness(0.94);
}

:root[data-theme="dark"] .project-production-surface > .production-video-backdrop video {
  filter: saturate(0.52) contrast(1.06) brightness(0.58);
}

.project-page-surface > .hub-brandbar,
.project-state-surface .hub-brandbar {
  position: sticky;
  z-index: 20;
  top: var(--space-3);
  min-height: 58px;
  border: 1px solid var(--production-studio-border);
  border-radius: var(--radius-medium);
  padding: 10px 12px;
  color: var(--production-studio-text);
  background: rgb(12 17 23 / 68%);
  box-shadow:
    0 14px 36px rgb(5 8 12 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 9%);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  text-shadow: var(--production-studio-shadow);
}

.project-production-surface .hub-brandbar .product-brand,
.project-production-surface .hub-brandbar .product-brand__copy strong,
.project-production-surface .hub-brandbar .account-summary,
.project-production-surface .hub-brandbar .preferences-menu__trigger,
.project-production-surface .hub-brandbar .back-link {
  color: var(--production-studio-text);
}

.project-production-surface .hub-brandbar .product-brand__copy > span,
.project-production-surface .hub-brandbar .account-summary small {
  color: var(--production-studio-muted);
}

.project-page-surface > .page-header {
  color: var(--production-studio-text);
  text-shadow: var(--production-studio-shadow);
}

.project-page-surface > .page-header h1 {
  color: var(--production-studio-text);
}

.project-page-surface > .page-header .page-header__description,
.project-page-surface > .page-header .back-link {
  color: var(--production-studio-muted);
}

.project-page-surface > .page-header .project-mode-back {
  color: var(--production-studio-text);
  font-weight: 650;
  text-shadow: 0 1px 3px rgb(0 0 0 / 82%);
}

.project-page-surface > .form-grid,
.project-page-surface > .project-table,
.project-page-surface > .feedback-state,
.project-state-surface .feedback-state {
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  background: var(--project-glass-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.project-page-surface > .form-grid {
  margin-bottom: var(--space-8);
  padding: var(--space-6);
}

.project-page-surface > .feedback-state,
.project-state-surface .feedback-state {
  min-height: 112px;
  padding: var(--space-6);
}

.project-production-surface .field input,
.project-production-surface .field textarea,
.project-production-surface .field select,
.project-production-surface .production-model-panel__control select {
  background: var(--project-glass-field);
}

.project-production-surface select option,
.project-production-surface select optgroup {
  color: var(--production-text);
  background: var(--production-panel);
}

.project-production-surface .creation-basis-options {
  background: var(--project-glass-strong);
}

.project-production-surface .creation-basis-options label.is-selected {
  background: var(--project-glass-field);
}

.project-production-surface .project-table__heading,
.project-production-surface .project-pagination {
  background: var(--project-glass-strong);
}

.project-production-surface .project-row {
  background: transparent;
}

.project-production-surface .project-row:hover {
  background: var(--project-glass-featured);
}

.project-production-surface .confirm-dialog,
.project-production-surface .preferences-menu__panel {
  background: var(--project-glass-strong);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
}

.workspace--project-surface > .workspace-topbar,
.workspace--project-surface > .workspace-sidebar,
.workspace--project-surface .workspace-drawer {
  background: var(--project-glass-strong);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.workspace--project-surface > .workspace-main {
  position: relative;
  background: transparent;
}

.workspace--project-surface .workspace-main > .feedback-state {
  max-width: 760px;
  min-height: 112px;
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  padding: var(--space-6);
  background: var(--project-glass-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.project-overview-surface {
  display: grid;
  gap: var(--space-4);
}

.project-overview-surface > .overview__header,
.project-overview-surface > .production-model-panel,
.project-overview-surface > .project-outline-panel,
.project-overview-surface > .project-members-panel,
.project-overview-surface > .resume-panel,
.project-overview-surface > .overview-facts {
  margin: 0;
}

.project-overview-surface > .overview__header {
  color: var(--production-studio-text);
  text-shadow: var(--production-studio-shadow);
}

.project-overview-surface .overview__logline {
  color: var(--production-studio-muted);
}

.project-overview-surface > .production-model-panel,
.project-overview-surface > .project-outline-panel,
.project-overview-surface > .project-members-panel,
.project-overview-surface > .resume-panel,
.project-overview-surface > .overview-facts > div {
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  background: var(--project-glass-panel);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.workspace--project-surface .storyboard-workspace__header {
  color: var(--production-studio-text);
  text-shadow: var(--production-studio-shadow);
}

.workspace--project-surface .storyboard-workspace__header .page-kicker {
  color: var(--production-studio-muted);
}

.workspace--project-surface .storyboard-workspace__metrics > span,
.workspace--project-surface .storyboard-stage-strip,
.workspace--project-surface .storyboard-mobile-tabs,
.workspace--project-surface .storyboard-agent-panel,
.workspace--project-surface .storyboard-canvas,
.workspace--project-surface .storyboard-inspector {
  background: var(--project-glass-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.workspace--project-surface .storyboard-agent-panel,
.workspace--project-surface .storyboard-canvas,
.workspace--project-surface .storyboard-inspector {
  border-radius: var(--radius-medium);
}

.workspace--project-surface .storyboard-opening-staging,
.workspace--project-surface .storyboard-shot-list > li,
.workspace--project-surface .storyboard-prompt-preview pre {
  background: var(--project-glass-field);
  box-shadow: inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.workspace--project-surface .project-history-page > header {
  color: var(--production-studio-text);
  text-shadow: var(--production-studio-shadow);
}

.workspace--project-surface .project-history-page > header > p:last-child {
  color: var(--production-studio-muted);
}

.workspace--project-surface .project-document-library,
.workspace--project-surface .project-production-records {
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  padding: var(--space-6);
  background: var(--project-glass-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

/* Primary workspace regions sit directly over the video backdrop. Keep the
   treatment at this level so dense message and form controls stay readable. */
.workspace--project-surface .workflow-topbar,
.workspace--project-surface .workflow-start,
.workspace--project-surface .workflow-chat,
.workspace--project-surface .workflow-document-pane,
.workspace--project-surface .characters-layout,
.workspace--project-surface .dialogue-index__layout,
.workspace--project-surface .dialogue-run__layout,
.workspace--project-surface .review-workspace {
  border: 1px solid var(--production-border);
  border-radius: var(--radius-medium);
  background: var(--project-glass-panel);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.workspace--project-surface .workflow-topbar {
  padding: var(--space-2);
}

.workspace--project-surface .workflow-start,
.workspace--project-surface .characters-layout,
.workspace--project-surface .dialogue-index__layout,
.workspace--project-surface .dialogue-run__layout,
.workspace--project-surface .review-workspace {
  padding: var(--space-6);
}

.project-overview-surface > .production-model-panel,
.project-overview-surface > .project-outline-panel,
.project-overview-surface > .resume-panel {
  padding: var(--space-4);
}

.project-members-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.project-members-panel__header,
.project-members-panel__add,
.project-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.project-members-panel__header {
  justify-content: space-between;
}

.project-members-panel__header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.project-members-panel__header p {
  max-width: 780px;
  margin: var(--space-2) 0 0;
  color: var(--production-studio-muted);
}

.project-members-panel__count,
.project-member-row__role {
  color: var(--production-studio-muted);
  white-space: nowrap;
}

.project-members-panel--locked {
  border-left: 3px solid var(--status-warning, #c27a17);
}

.project-members-panel__hint {
  margin: 0;
  color: var(--production-studio-muted);
  font-size: 0.88rem;
}

.project-members-panel__add {
  align-items: end;
  flex-wrap: wrap;
}

.project-members-panel__search {
  min-width: min(420px, 100%);
  flex: 1 1 360px;
}

.project-members-panel__role {
  min-width: 160px;
}

.project-members-panel__add-button {
  min-height: 42px;
}

.project-members-panel__search-control {
  position: relative;
  display: flex;
  align-items: center;
}

.project-members-panel__search-control > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--production-studio-muted);
  pointer-events: none;
}

.project-members-panel__search-control input {
  width: 100%;
  padding-left: 38px;
}

.project-members-panel__candidates,
.project-members-panel__list {
  display: grid;
  gap: 8px;
}

.project-members-panel__candidates {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.project-member-candidate,
.project-member-row {
  border: 1px solid var(--production-border);
  border-radius: var(--radius-small);
  background: var(--project-glass-field);
}

.project-member-candidate {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: var(--production-studio-text);
  text-align: left;
}

.project-member-candidate span,
.project-member-row__identity span {
  overflow-wrap: anywhere;
  color: var(--production-studio-muted);
  font-size: 0.82rem;
}

.project-member-candidate.is-selected {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.project-member-row {
  padding: 10px 12px;
}

.project-member-row__identity {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 3px;
}

.project-member-row select {
  min-width: 132px;
}

.project-member-row .icon-button {
  flex: 0 0 auto;
}

.project-overview-surface > .overview-facts {
  gap: var(--space-4);
}

.project-overview-surface > .overview-facts > div {
  min-height: 76px;
  align-content: center;
  padding: var(--space-4);
}

@media (max-width: 760px) {
  .project-page-surface,
  .project-state-surface > .page {
    padding-top: var(--space-4);
  }

  .project-page-surface > .hub-brandbar,
  .project-state-surface .hub-brandbar {
    top: var(--space-2);
    min-height: 54px;
    margin-bottom: var(--space-6);
    padding: var(--space-2) var(--space-3);
  }

  .project-page-surface > .form-grid,
  .project-page-surface > .feedback-state,
  .project-state-surface .feedback-state,
  .workspace--project-surface .workspace-main > .feedback-state {
    padding: var(--space-4);
  }

  .project-page-surface > .project-table {
    border-right: 1px solid var(--production-border);
    border-left: 1px solid var(--production-border);
    border-radius: var(--radius-medium);
  }

  .project-overview-surface {
    gap: var(--space-3);
  }

  .project-overview-surface > .production-model-panel,
  .project-overview-surface > .project-outline-panel,
  .project-overview-surface > .project-members-panel,
  .project-overview-surface > .resume-panel,
  .project-overview-surface > .overview-facts > div {
    padding: var(--space-3);
  }

  .workspace--project-surface .project-document-library,
  .workspace--project-surface .project-production-records {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .project-production-surface {
    --project-glass-panel: var(--production-panel);
    --project-glass-strong: var(--production-panel-strong);
    --project-glass-featured: var(--production-featured);
    --project-glass-field: var(--production-panel);
  }

  .project-production-surface > .production-video-backdrop {
    --production-video-opacity: 0.36;
  }

  .project-page-surface > .hub-brandbar,
  .project-state-surface .hub-brandbar,
  .project-page-surface > .form-grid,
  .project-page-surface > .project-table,
  .project-page-surface > .feedback-state,
  .project-state-surface .feedback-state,
  .project-production-surface .confirm-dialog,
  .project-production-surface .preferences-menu__panel,
  .workspace--project-surface > .workspace-topbar,
  .workspace--project-surface > .workspace-sidebar,
  .workspace--project-surface .workspace-drawer,
  .workspace--project-surface .workspace-main > .feedback-state,
  .project-overview-surface > .production-model-panel,
  .project-overview-surface > .project-outline-panel,
  .project-overview-surface > .project-members-panel,
  .project-overview-surface > .resume-panel,
  .project-overview-surface > .overview-facts > div,
  .workspace--project-surface .storyboard-workspace__metrics > span,
  .workspace--project-surface .storyboard-stage-strip,
  .workspace--project-surface .storyboard-mobile-tabs,
  .workspace--project-surface .storyboard-agent-panel,
  .workspace--project-surface .storyboard-canvas,
  .workspace--project-surface .storyboard-inspector,
  .workspace--project-surface .storyboard-opening-staging,
  .workspace--project-surface .storyboard-shot-list > li,
  .workspace--project-surface .storyboard-prompt-preview pre,
  .workspace--project-surface .project-document-library,
  .workspace--project-surface .project-production-records,
  .workspace--project-surface .workflow-topbar,
  .workspace--project-surface .workflow-start,
  .workspace--project-surface .workflow-chat,
  .workspace--project-surface .workflow-document-pane,
  .workspace--project-surface .characters-layout,
  .workspace--project-surface .dialogue-index__layout,
  .workspace--project-surface .dialogue-run__layout,
  .workspace--project-surface .review-workspace {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-production-surface {
    --project-glass-panel: var(--production-panel);
    --project-glass-strong: var(--production-panel-strong);
    --project-glass-featured: var(--production-featured);
    --project-glass-field: var(--production-panel);
  }
}
.data-dashboard-page,
.account-data-page {
  width: 100%;
  max-width: none;
}

.data-dashboard-heading {
  align-items: end;
}

.data-dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: var(--space-3);
}

.field--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 140px;
}

.field--inline span {
  white-space: nowrap;
}

.data-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.data-panel,
.account-data-section {
  margin-top: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-default);
}

.data-panel--exception {
  border-top-color: color-mix(in srgb, var(--status-warning) 60%, var(--border-default));
}

.data-panel__header,
.account-data-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.data-panel__header h2,
.account-data-section h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 1.1rem;
}

.data-panel__header h2 svg,
.account-data-section > header svg {
  width: 19px;
  height: 19px;
  color: var(--action-primary);
}

.data-panel__description {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.5;
}

.data-concurrency-sections,
.data-subpanel {
  display: grid;
  gap: var(--space-3);
}

.data-concurrency-sections {
  grid-template-columns: 1fr;
}

.data-subpanel {
  min-width: 0;
}

.data-subpanel + .data-subpanel {
  margin-top: var(--space-5);
}

.data-concurrency-sections > .data-subpanel + .data-subpanel {
  margin-top: 0;
}

.data-subpanel h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-primary);
  font-size: .92rem;
}

.data-subpanel h3 svg {
  width: 17px;
  height: 17px;
  color: var(--action-primary);
}

.data-updated {
  color: var(--text-tertiary);
  font-size: .78rem;
  white-space: nowrap;
}

.data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-default);
}

.data-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: var(--surface-panel);
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  white-space: nowrap;
  font-size: .8rem;
}

.data-table td strong,
.data-table td small {
  display: block;
}

.table-secondary {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: .72rem;
}

.data-table th {
  color: var(--text-secondary);
  background: var(--surface-muted);
  font-size: .72rem;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-empty {
  padding: 20px !important;
  color: var(--text-secondary);
  text-align: center !important;
  white-space: normal !important;
}

.data-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: .78rem;
}

.data-pagination__actions {
  display: flex;
  gap: var(--space-2);
}

.data-pagination .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.data-pagination .button svg {
  width: 15px;
  height: 15px;
}

.data-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.data-metric-grid--storage {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.data-metric-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  background: var(--surface-muted);
}

.data-metric-grid span,
.data-failure-list > strong {
  color: var(--text-secondary);
  font-size: .78rem;
}

.data-metric-grid strong {
  font-size: 1.05rem;
}

.data-metric-grid small,
.data-explanation {
  color: var(--text-tertiary);
  font-size: .76rem;
  line-height: 1.55;
}

.storage-check-guide {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
  border-left: 3px solid var(--status-info);
  background: var(--surface-muted);
}

.storage-check-guide strong {
  color: var(--text-primary);
}

.data-explanation {
  margin: 0 0 var(--space-4);
  max-width: 110ch;
}

.data-failure-list {
  margin-top: var(--space-4);
}

.data-failure-list ul {
  display: grid;
  gap: 4px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.data-failure-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: .82rem;
}

.data-failure-list li b {
  color: var(--text-primary);
}

.account-data-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-block: 1px solid var(--border-default);
}

.account-data-summary > div,
.account-benefits-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-data-summary span,
.account-benefits-grid span {
  color: var(--text-secondary);
  font-size: .78rem;
}

.account-data-summary strong {
  font-size: 1.25rem;
}

.account-benefits-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 980px) {
  .data-concurrency-sections,
  .data-metric-grid,
  .data-metric-grid--storage {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .account-data-summary,
  .account-benefits-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 640px) {
  .account-data-page .hub-brandbar {
    align-items: center;
    gap: var(--space-2);
  }

  .account-data-page .hub-brandbar .product-brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .account-data-page .hub-brandbar .product-brand__copy {
    min-width: 0;
  }

  .account-data-page .hub-brandbar .product-brand__copy strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-data-page .hub-brandbar__actions {
    flex: 0 0 auto;
    gap: var(--space-1);
  }

  .account-data-page .hub-brandbar__actions .button--quiet {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .account-data-page .hub-brandbar__actions .button--quiet svg {
    width: 17px;
    height: 17px;
  }

  .data-dashboard-heading,
  .data-panel__header,
  .account-data-section > header,
  .account-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-dashboard-controls {
    justify-content: flex-start;
    width: 100%;
  }

  .account-data-summary,
  .account-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-concurrency-sections,
  .data-metric-grid--storage {
    grid-template-columns: 1fr;
  }
}
.creation-topbar {
  position: relative;
  z-index: 50;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--production-border, var(--border-default));
  border-radius: var(--radius-medium);
  padding: 7px var(--space-3);
  color: var(--production-studio-text, var(--text-primary));
  background: var(--project-glass-panel, var(--surface-panel));
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--production-glass-highlight);
  backdrop-filter: blur(22px) saturate(124%);
  -webkit-backdrop-filter: blur(22px) saturate(124%);
}

.creation-topbar__back-group,
.creation-topbar__project-group,
.creation-topbar__actions {
  min-width: 0;
}

.creation-topbar__back-group,
.creation-topbar__project-group,
.creation-topbar__actions,
.creation-topbar__back,
.creation-topbar__brand {
  display: flex;
  align-items: center;
}

.creation-topbar__back-group,
.creation-topbar__project-group {
  gap: var(--space-3);
}

.creation-topbar__back {
  flex: 0 0 auto;
  min-height: 36px;
  color: var(--production-studio-text, var(--text-primary));
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.creation-topbar__back:hover,
.creation-topbar__back:focus-visible {
  color: var(--text-primary);
}

.creation-topbar__back svg {
  width: 16px;
  height: 16px;
}

.creation-topbar__project {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--production-studio-text, var(--text-primary));
  font-size: 0.8rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-topbar__project-id {
  flex: 0 1 auto;
  font-size: 0.68rem;
}

.creation-topbar__project-id .project-id-badge__copy {
  width: 24px;
  height: 24px;
}

.creation-topbar__project-meta {
  flex: 0 0 auto;
  color: var(--production-studio-muted, var(--text-secondary));
  font-size: 0.72rem;
  white-space: nowrap;
}

.creation-topbar__actions {
  justify-content: flex-end;
  gap: var(--space-2);
}

.creation-topbar__brand {
  min-width: 0;
  color: var(--production-studio-text, var(--text-primary));
  text-decoration: none;
}

.creation-topbar__brand .product-brand__copy {
  min-width: 0;
}

.creation-topbar__brand .product-brand__copy strong,
.creation-topbar__brand .product-brand__meta {
  color: inherit;
}

.creation-topbar__brand .product-brand__meta {
  color: var(--production-studio-muted, var(--text-secondary));
}

.creation-topbar.workspace-topbar {
  grid-column: 1 / -1;
  margin: var(--space-4) clamp(var(--space-3), 2.4vw, var(--space-6)) var(--space-3);
}

@media (max-width: 1280px) {
  .creation-topbar__brand .product-brand__tagline {
    display: none;
  }

  .creation-topbar__project-meta {
    display: none;
  }
}

@media (max-width: 1180px) {
  .creation-topbar {
    grid-template-areas:
      "back project actions"
      "project-id project-id project-id";
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px var(--space-2);
    min-height: 0;
  }

  .creation-topbar__back-group {
    grid-area: back;
    gap: var(--space-1);
  }

  .creation-topbar__project-group {
    display: contents;
  }

  .creation-topbar__project {
    grid-area: project;
    max-width: 100%;
    font-size: 0.74rem;
  }

  .creation-topbar__project-id {
    grid-area: project-id;
    width: 100%;
    min-height: 28px;
    flex-wrap: nowrap;
  }

  .creation-topbar__project-id code {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }

  .creation-topbar__actions {
    grid-area: actions;
    gap: 4px;
  }

  .creation-topbar__actions .account-access {
    gap: 4px;
  }

  .creation-topbar__actions .account-summary,
  .creation-topbar__actions .admin-entry {
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
  }

  .creation-topbar__actions .account-summary > span,
  .creation-topbar__actions .admin-entry > span {
    display: none;
  }
}

@media (max-width: 760px) {
  .creation-topbar {
    padding: 6px var(--space-2);
  }

  .creation-topbar__back {
    justify-content: center;
    width: 36px;
    padding: 0;
    font-size: 0;
  }

  .creation-topbar__back span {
    display: none;
  }

  .creation-topbar__brand .product-brand__copy {
    display: none;
  }

  .creation-topbar.workspace-topbar {
    margin: var(--space-3) var(--space-3) var(--space-2);
  }
}