/* Shared semantic colors. Artwork, videos and the QR card retain their original colors. */
:root {
  color-scheme: light;
  --theme-canvas: #f1f5f9;
  --theme-surface: #fff;
  --theme-surface-soft: #f5f8fc;
  --theme-surface-raised: #fff;
  --theme-text: #152d49;
  --theme-muted: #526b8b;
  --theme-line: #dce5ee;
  --theme-accent: #275ee8;
  --theme-accent-fill: #245fe5;
  --theme-focus: #457de8;
  --theme-shadow: 0 2px 8px #21437719;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-canvas: #101823;
  --theme-surface: #172331;
  --theme-surface-soft: #1b293b;
  --theme-surface-raised: #22334a;
  --theme-input: #111e2d;
  --theme-text: #e3ecf8;
  --theme-muted: #a7b8cd;
  --theme-line: #33475e;
  --theme-accent: #98bbff;
  --theme-accent-fill: #285fdc;
  --theme-focus: #98bbff;
  --theme-accent-soft: #1c3456;
  --theme-success: #80ddc4;
  --theme-success-bg: #173c35;
  --theme-success-line: #35665a;
  --theme-warning: #edca88;
  --theme-warning-bg: #393122;
  --theme-warning-line: #6b5736;
  --theme-danger: #ffabb4;
  --theme-danger-bg: #432833;
  --theme-danger-line: #744451;
  --theme-shadow: 0 5px 18px #0004;
  --canvas: var(--theme-canvas);
  --paper: var(--theme-surface);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --blue: var(--theme-accent);
  --blue-soft: var(--theme-accent-soft);
  --teal: var(--theme-success);
  --amber: var(--theme-warning);
  --danger: var(--theme-danger);
  --shadow: var(--theme-shadow);
}

/* Blend the monochrome wordmark into its surface without changing its letterforms. */
.brand-logo,
img[src="/assets/fennzo-logo.jpg"] { background: transparent; filter: grayscale(1) contrast(8); mix-blend-mode: multiply; border-radius: 0; }
.auth-story .brand-logo { background: transparent; }
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] img[src="/assets/fennzo-logo.jpg"],
.brand-light .brand-logo,
.brand-light img[src="/assets/fennzo-logo.jpg"] { filter: grayscale(1) contrast(8) invert(1); mix-blend-mode: screen; }

/* The appearance controls are part of the page footer, never a floating overlay. */
.support-widget .appearance-selector { display: flex; flex: 0 0 auto; align-items: center; gap: 13px; color: var(--theme-muted); }
.support-widget .appearance-label { font-size: 13px; font-weight: 700; }
.support-widget .appearance-options { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-surface-soft); }
.support-widget .appearance-option { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 1px solid transparent; border-radius: 10px; color: var(--theme-muted); font-size: 13px; font-weight: 650; line-height: 1.5; background: transparent; white-space: nowrap; }
.support-widget .appearance-option svg { width: 17px; height: 17px; }
.support-widget .appearance-option:hover { background: var(--theme-surface-raised); color: var(--theme-text); }
.support-widget .appearance-option[aria-pressed="true"] { color: #fff; background: var(--theme-accent-fill); border-color: #79a1ff; box-shadow: 0 2px 6px #174aaa33; }
.support-widget .appearance-option:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 3px; }
@media (max-width: 520px) {
  .support-widget .appearance-selector { flex-basis: 100%; justify-content: center; margin-bottom: 6px; gap: 10px; }
  .support-widget .appearance-option { min-height: 40px; padding: 8px 11px; font-size: 12px; }
  .support-widget .appearance-label { font-size: 12px; }
}

/* Shared inputs, account screens, and the project workspace. */
:root[data-theme="dark"] body { color: var(--theme-text); background: var(--theme-canvas); }
:root[data-theme="dark"] :is(input, textarea, select) { color: var(--theme-text); background: var(--theme-input); border-color: var(--theme-line); }
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: #91a4bd; opacity: 1; }
:root[data-theme="dark"] :is(input, textarea, select):focus { border-color: var(--theme-focus); box-shadow: 0 0 0 3px #98bbff22; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--theme-focus); }
:root[data-theme="dark"] :is(.button, .studio-header, .panel, .account-dialog) { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-line); }
:root[data-theme="dark"] .button:hover:not(:disabled) { background: var(--theme-surface-raised); border-color: #547297; }
:root[data-theme="dark"] .button.primary { background: var(--theme-accent-fill); color: #fff; border-color: var(--theme-accent-fill); }
:root[data-theme="dark"] .button.primary:hover:not(:disabled) { background: #376fe8; border-color: #376fe8; }
:root[data-theme="dark"] .button.subtle { background: transparent; border-color: transparent; color: var(--theme-muted); }
:root[data-theme="dark"] .button.subtle:hover:not(:disabled) { background: var(--theme-surface-raised); color: var(--theme-text); }
:root[data-theme="dark"] .button.danger { color: var(--theme-danger); }
:root[data-theme="dark"] .auth-story { background: #102a46; }
:root[data-theme="dark"] .auth-panel { background: radial-gradient(ellipse at 100% 0%, #223d6338, transparent 60%), var(--theme-canvas); }
:root[data-theme="dark"] .project-sidebar { background: #14202e; }
:root[data-theme="dark"] .project-item:hover { background: var(--theme-surface-raised); }
:root[data-theme="dark"] .project-item.active { background: var(--theme-accent-soft); color: var(--theme-accent); border-color: #375e91; }
:root[data-theme="dark"] .project-title { background: transparent; border-color: transparent; }
:root[data-theme="dark"] .project-title:focus { background: var(--theme-input); border-color: var(--theme-focus); }
:root[data-theme="dark"] .editor-field { border-color: var(--theme-line); }
:root[data-theme="dark"] .editor-field textarea { background: var(--theme-input); }
:root[data-theme="dark"] .generation-panel { background: #18283d; border-color: #37506f; }
:root[data-theme="dark"] .progress-track { background: var(--theme-line); }
:root[data-theme="dark"] .candidate-panel { border-color: #476e9f; }
:root[data-theme="dark"] .candidate-banner { color: var(--theme-accent); background: var(--theme-accent-soft); }
:root[data-theme="dark"] .candidate-field pre { background: var(--theme-input); }
:root[data-theme="dark"] .status-pill { background: var(--theme-surface-raised); color: var(--theme-muted); }
:root[data-theme="dark"] .status-pill.succeeded { background: var(--theme-success-bg); color: var(--theme-success); }
:root[data-theme="dark"] :is(.status-pill.failed, .status-pill.unknown) { background: var(--theme-danger-bg); color: var(--theme-danger); }
:root[data-theme="dark"] :is(.status-pill.running, .status-pill.queued) { background: var(--theme-accent-soft); color: var(--theme-accent); }
:root[data-theme="dark"] .workspace-alert { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
:root[data-theme="dark"] .studio-footnote { color: var(--theme-muted); }
:root[data-theme="dark"] .toast { color: var(--theme-text); background: #263b55; border: 1px solid #47658a; }
:root[data-theme="dark"] .toast-error { background: var(--theme-danger-bg); border-color: var(--theme-danger-line); }
:root[data-theme="dark"] dialog::backdrop { background: #020911ad; }

/* Homepage controls adapt independently from the original anime artwork. */
:root[data-theme="dark"] .home-app { --home-bg: var(--theme-canvas); --home-ink: var(--theme-text); --home-muted: var(--theme-muted); --home-primary: #91d9f7; --home-line: var(--theme-line); }
:root[data-theme="dark"] .home-app .home-nav { background: #14202eed; border-color: var(--theme-line); }
:root[data-theme="dark"] .home-app :is(.home-brand, .home-quick-card form > label, .home-editor-top h3, .home-label-row label, .home-manual-heading h4, .home-field-heading label, .home-result-top h3, .home-result-empty h4, .home-guide-grid h3, .home-faq-list summary) { color: var(--theme-text); }
:root[data-theme="dark"] .home-app :is(.home-nav-links a, .home-account-name, .home-nav-admin, .home-tiny-label, .home-quick-card form > label span, .home-quick-bottom > span, .home-quick-note, .home-section-heading > p:last-child, .home-editor-top p, .home-label-row > span, .home-examples, .home-format-row label, .home-manual-heading p, .home-lock, .home-editor-footer > p, .home-result-empty > p, .home-result-empty li, .home-result-empty li span, .home-result-note, .home-video-copy > p:not(.home-eyebrow), .home-video-points, .home-video-copy > small, .home-board-heading > span:last-child, .home-filmstrip > div > span, .home-board-bottom, .home-guide-grid p, .home-faq-section > div:first-child > p:last-child, .home-faq-list details p, .home-footer-inner > div > p, .home-footer-links, .home-footer-bottom) { color: var(--theme-muted); }
:root[data-theme="dark"] .home-app :is(.home-example-link, .home-reference-link, .home-board-bottom button, .home-guide-grid a, .home-guide-grid button, .home-eyebrow) { color: #8ecfe7; }
:root[data-theme="dark"] .home-app :is(.home-nav-links a:hover, .home-nav-admin:hover) { color: #a8e5ff; }
:root[data-theme="dark"] .home-app :is(.home-account, .home-editor-top, .home-input-area, .home-editor-footer, .home-result-empty li, .home-guide-grid, .home-guide-grid article, .home-faq-list, .home-faq-list details, .home-footer, .home-footer-bottom) { border-color: var(--theme-line); }
:root[data-theme="dark"] .home-app :is(.home-quick-card, .home-editor, .home-reference-board, .home-guide-grid, .home-footer) { background: var(--theme-surface); border-color: var(--theme-line); box-shadow: none; }
:root[data-theme="dark"] .home-app :is(.home-quick-card textarea, .home-input-area > textarea, .home-field textarea, .home-format-row select) { background: var(--theme-input); color: var(--theme-text); border-color: var(--theme-line); }
:root[data-theme="dark"] .home-app textarea::placeholder { color: #93a6bd; }
:root[data-theme="dark"] .home-app :is(.home-element-strip, .home-editor-footer, .home-engine, .home-filmstrip > div, .home-filmstrip > div:nth-of-type(2), .home-filmstrip > div:nth-of-type(3)) { background: var(--theme-surface-soft); border-color: var(--theme-line); color: var(--theme-muted); }
:root[data-theme="dark"] .home-app :is(.home-examples button, .home-button, .home-button--quiet) { color: var(--theme-text); background: var(--theme-surface-raised); border-color: #435d7b; }
:root[data-theme="dark"] .home-app :is(.home-examples button:hover, .home-button:hover:not(:disabled)) { color: #fff; background: #29425f; border-color: #6286b2; }
:root[data-theme="dark"] .home-app .home-button--nav { background: var(--theme-accent-soft); color: #b8d6ff; border-color: #416599; }
:root[data-theme="dark"] .home-app .home-button--primary { background: #216ac7; border-color: #4386db; color: #fff; }
:root[data-theme="dark"] .home-app .home-button--primary:hover:not(:disabled) { background: #2879dc; border-color: #78acf0; }
:root[data-theme="dark"] .home-app .home-button--generate { background: linear-gradient(110deg, #9be4f9, #39c7ef 68%, #16b7e6); color: #06435d; border-color: transparent; }
:root[data-theme="dark"] .home-app :is(.home-hero .home-button--primary, .home-final-cta .home-button) { background: #8ce8ff; border-color: #8ce8ff; color: #092d54; }
:root[data-theme="dark"] .home-app :is(.home-hero .home-button--primary:hover, .home-final-cta .home-button:hover) { background: #bbf2ff; border-color: #bbf2ff; color: #092d54; }
:root[data-theme="dark"] .home-app .home-local-tag { color: var(--theme-success); background: var(--theme-success-bg); }
:root[data-theme="dark"] .home-app .home-lock.is-locked { color: var(--theme-success); }
:root[data-theme="dark"] .home-app .home-engine button { color: var(--theme-muted); }
:root[data-theme="dark"] .home-app .home-engine button.is-active { background: #294360; color: #c3eaff; box-shadow: none; }
:root[data-theme="dark"] .home-app :is(.home-field-heading label > span, .home-preview-tag, .home-guide-icon) { color: #a6d8ef; background: #203b50; border-color: #35576e; }
:root[data-theme="dark"] .home-app .home-result-panel { background: linear-gradient(145deg, #1b2d40, #172331); border-color: var(--theme-line); }
:root[data-theme="dark"] .home-app .home-result-symbol { background: #1e3a50; color: #a0d6ed; border-color: #365d77; box-shadow: 0 0 0 9px #1b2c3e; }
:root[data-theme="dark"] .home-app :is(.home-result-empty li i, .home-filmstrip i, .home-element-strip i) { background: #395a74; }
:root[data-theme="dark"] .home-app .home-result-text { color: var(--theme-text); background: var(--theme-input); border-color: var(--theme-line); }
:root[data-theme="dark"] .home-app .home-stale-note { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
:root[data-theme="dark"] .home-app .home-restored-note { color: #aedaff; background: #20384e; border-color: #446681; }
:root[data-theme="dark"] .home-app :is(.home-error, .home-editor-footer > .home-error) { color: var(--theme-danger); background: var(--theme-danger-bg); border-color: var(--theme-danger-line); }
:root[data-theme="dark"] .home-app .home-video-section { background: radial-gradient(ellipse at 100% 40%, #1c3b503d, transparent 65%), #14212f; border-color: var(--theme-line); }
:root[data-theme="dark"] .home-app .home-guide-number { color: #58738d; }
:root[data-theme="dark"] .home-app .home-guide-section > .home-section-heading > p:last-child { color: #d1e2f4; }
:root[data-theme="dark"] .home-app .home-guide-section > .home-section-heading .home-eyebrow { color: #9feaff; }
:root[data-theme="dark"] .home-app .home-final-cta .home-tiny-label { color: #a1e5ff; }

/* Administration: tables, charts, route cards, dialogs and connection-test states. */
:root[data-theme="dark"] .admin-app { --adm-canvas: var(--theme-canvas); --adm-ink: var(--theme-text); --adm-muted: var(--theme-muted); --adm-line: var(--theme-line); --adm-blue: var(--theme-accent); --adm-teal: var(--theme-success); --adm-amber: var(--theme-warning); --adm-red: var(--theme-danger); }
:root[data-theme="dark"] .admin-app .adm-sidebar { background: #102035; border-right: 1px solid var(--theme-line); }
:root[data-theme="dark"] .admin-app .adm-header { background: #172331ed; }
:root[data-theme="dark"] .admin-app :is(.adm-stat, .adm-panel, .adm-error-panel, .adm-dialog, .adm-route-model, .adm-route-symbol, .adm-btn, .adm-tag--outline) { background: var(--theme-surface); border-color: var(--theme-line); color: var(--theme-text); }
:root[data-theme="dark"] .admin-app :is(.adm-stat--blue, .adm-notice, .adm-model-test-result) { background: var(--theme-accent-soft); color: var(--theme-accent); border-color: #3c5e88; }
:root[data-theme="dark"] .admin-app :is(.adm-table th, .adm-segmented, .adm-control-icon, .adm-route-provider, .adm-route-model.is-disabled, .adm-empty-icon, .adm-person-avatar, .adm-check-field, .adm-dialog-footer, .adm-search) { background: var(--theme-surface-soft); border-color: var(--theme-line); color: var(--theme-muted); }
:root[data-theme="dark"] .admin-app :is(.adm-field input, .adm-field select, .adm-usage-filters input, .adm-usage-filters select, .adm-filter-inline select, .adm-page-size select) { background: var(--theme-input); border-color: var(--theme-line); color: var(--theme-text); }
:root[data-theme="dark"] .admin-app .adm-search input { background: transparent; }
:root[data-theme="dark"] .admin-app :is(.adm-field input::placeholder, .adm-search input::placeholder) { color: #94a8c1; }
:root[data-theme="dark"] .admin-app :is(.adm-btn:hover:not(:disabled), .adm-route-model:hover, .adm-table tbody tr:hover, .adm-icon-btn:hover, .adm-segmented .is-selected) { background: var(--theme-surface-raised); color: var(--theme-text); border-color: #547297; }
:root[data-theme="dark"] .admin-app .adm-btn--primary { background: var(--theme-accent-fill); border-color: var(--theme-accent-fill); color: #fff; }
:root[data-theme="dark"] .admin-app .adm-btn--primary:hover:not(:disabled) { background: #376fe8; border-color: #376fe8; color: #fff; }
:root[data-theme="dark"] .admin-app .adm-btn--danger { background: #a63549; border-color: #cf6b7b; color: #fff; }
:root[data-theme="dark"] .admin-app .adm-btn--danger:hover:not(:disabled) { background: #bc3d53; border-color: #e38a98; color: #fff; }
:root[data-theme="dark"] .admin-app .adm-btn--ghost { background: transparent; border-color: transparent; color: var(--theme-accent); }
:root[data-theme="dark"] .admin-app .adm-btn--ghost:hover:not(:disabled) { background: var(--theme-accent-soft); border-color: transparent; color: var(--theme-accent); }
:root[data-theme="dark"] .admin-app .adm-btn--sidebar { background: transparent; border-color: #34506e; color: #bed0e4; }
:root[data-theme="dark"] .admin-app :is(.adm-page-eyebrow, .adm-stat-detail, .adm-chart-details > summary, .adm-control-state, .adm-control-note, .adm-route-labels, .adm-route-provider code, .adm-route-provider small, .adm-route-model small, .adm-route-add, .adm-empty p, .adm-cell-note, .adm-cell-sub, .adm-subtle, .adm-summary-strip, .adm-person small, .adm-table-footer, .adm-footnote, .adm-notice p, .adm-endpoint, .adm-key-hint, .adm-usage-filters > label, .adm-filter-caption, .adm-page-size, .adm-summary-empty, .adm-audit-target, .adm-page-footer, .adm-loading, .adm-dialog-head p, .adm-field, .adm-field small, .adm-required, .adm-check-field small, .adm-dialog-save-note, .adm-confirm-text, .adm-detail-list dt, .adm-detail-list dd, .adm-model-test > p) { color: var(--theme-muted); }
:root[data-theme="dark"] .admin-app :is(.adm-field > span:first-child, .adm-check-field strong, .adm-model-test-head h3) { color: var(--theme-text); }
:root[data-theme="dark"] .admin-app :is(.adm-control-row, .adm-table td, .adm-table-footer, .adm-dialog-head, .adm-dialog-footer, .adm-detail-list > div, .adm-model-test) { border-color: var(--theme-line); }
:root[data-theme="dark"] .admin-app .adm-route-provider { border-left-color: var(--theme-success); }
:root[data-theme="dark"] .admin-app .adm-route-provider.is-disabled { border-left-color: #738399; }
:root[data-theme="dark"] .admin-app .adm-route-provider.is-disabled small span { color: var(--theme-muted); }
:root[data-theme="dark"] .admin-app .adm-route-add { border-color: #49627f; }
:root[data-theme="dark"] .admin-app .adm-tag { background: var(--theme-surface-raised); color: var(--theme-muted); }
:root[data-theme="dark"] .admin-app :is(.adm-tag--green, .adm-control-icon.is-ready, .adm-model-test-result[data-status="succeeded"]) { background: var(--theme-success-bg); color: var(--theme-success); border-color: var(--theme-success-line); }
:root[data-theme="dark"] .admin-app :is(.adm-tag--blue, .adm-vision-label, .adm-self-label, .adm-user-avatar) { background: var(--theme-accent-soft); color: var(--theme-accent); }
:root[data-theme="dark"] .admin-app :is(.adm-tag--red, .adm-form-error, .adm-model-test-result[data-status="failed"]) { background: var(--theme-danger-bg); color: var(--theme-danger); border-color: var(--theme-danger-line); }
:root[data-theme="dark"] .admin-app :is(.adm-tag--amber, .adm-notice--amber, .adm-model-test-result[data-status="unknown"]) { background: var(--theme-warning-bg); color: var(--theme-warning); border-color: var(--theme-warning-line); }
:root[data-theme="dark"] .admin-app .adm-notice--amber p { color: #d4b982; }
:root[data-theme="dark"] .admin-app :is(.adm-row-actions button, .adm-model-test-head .adm-btn) { color: var(--theme-accent); }
:root[data-theme="dark"] .admin-app .adm-model-test-head .adm-btn { background: var(--theme-accent-soft); border-color: #446896; }
:root[data-theme="dark"] .admin-app .adm-row-actions .adm-text-danger { color: var(--theme-danger); }
:root[data-theme="dark"] .admin-app .adm-control-state.is-ready { color: var(--theme-success); }
:root[data-theme="dark"] .admin-app .adm-chart-grid { stroke: var(--theme-line); }
:root[data-theme="dark"] .admin-app .adm-chart-label { fill: var(--theme-muted); }
:root[data-theme="dark"] .admin-app .adm-chart-bar:hover { fill: var(--theme-success); }
:root[data-theme="dark"] .admin-app .adm-period-separator { background: var(--theme-line); }
:root[data-theme="dark"] .admin-app .adm-dialog::backdrop { background: #020911ad; }

/* Shared footer and support dialog. Keep the original QR image on its white card. */
:root[data-theme="dark"] .support-widget { --support-ink: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-line); }
:root[data-theme="dark"] .support-widget .support-credit { color: #b3a4ff; }
:root[data-theme="dark"] .support-widget :is(.support-dialog, .support-dialog-header) { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-line); }
:root[data-theme="dark"] .support-widget .support-dialog-header h2 { color: var(--theme-text); }
:root[data-theme="dark"] .support-widget :is(.support-dialog-header > p, .support-image-error) { color: var(--theme-muted); }
:root[data-theme="dark"] .support-widget .support-close { color: var(--theme-text); background: var(--theme-surface-raised); border-color: #59738f; }
:root[data-theme="dark"] .support-widget .support-close:hover { background: #304865; border-color: #90acd0; }
:root[data-theme="dark"] .support-widget .support-dialog-symbol { background: #2b2956; color: #baaeff; }
:root[data-theme="dark"] .support-widget .support-qr-stage { background: var(--theme-input); border-color: var(--theme-line); }
:root[data-theme="dark"] .support-widget .support-copy-box { background: #232440; border-color: #46416d; }
:root[data-theme="dark"] .support-widget .support-handle-wrap label { color: #bdb2ff; }
:root[data-theme="dark"] .support-widget .support-handle { color: #d6cdff; background: transparent; }
:root[data-theme="dark"] .support-widget .support-handle:focus { background: #39315d; }
:root[data-theme="dark"] .support-widget .support-copy-status { color: var(--theme-success); }
:root[data-theme="dark"] .support-widget .support-copy-status--manual { color: var(--theme-warning); }
:root[data-theme="dark"] .support-widget .support-dialog::backdrop { background: #020911bd; }