/*
 * Platform-wide appearance layer.
 *
 * The original application was authored dark-first with many page-specific
 * colour declarations. This file is loaded last and only activates in light
 * mode, so all existing dark-mode visuals remain untouched.
 */

:root[data-theme="light"] {
  --admin-bg: #f3f5f7;
  --admin-sidebar: #f8f9fa;
  --admin-topbar: rgba(255, 255, 255, .94);
  --admin-surface: #ffffff;
  --admin-surface-raised: #f4f6f8;
  --admin-surface-hover: #e9edf1;
  --admin-input: #ffffff;
  --admin-border: rgba(35, 47, 60, .12);
  --admin-border-strong: rgba(35, 47, 60, .2);
  --admin-text: #1d252d;
  --admin-text-muted: #596772;
  --admin-text-subtle: #6f7c87;
  --admin-accent: #147fa3;
  --admin-accent-strong: #0e6e90;
  --admin-accent-ink: #ffffff;
  --admin-brand-gradient: linear-gradient(135deg, #36a7c8 0%, #5e83bf 100%);
  --admin-brand-glow: 0 0 18px rgba(48, 143, 174, .16);
  --admin-success: #1d7b5e;
  --admin-danger: #b83f52;
  --admin-warning: #9a681d;
  --admin-info: #3b6daf;
  --admin-success-surface: rgba(41, 157, 117, .1);
  --admin-danger-surface: rgba(211, 74, 95, .09);
  --admin-warning-surface: rgba(190, 133, 38, .11);
  --admin-info-surface: rgba(67, 120, 187, .1);
  --admin-success-border: rgba(41, 157, 117, .28);
  --admin-danger-border: rgba(211, 74, 95, .27);
  --admin-danger-border-strong: rgba(211, 74, 95, .38);
  --admin-warning-border: rgba(190, 133, 38, .28);
  --media-preview-backdrop: rgba(224, 229, 233, .92);
  --media-control-bg: rgba(255, 255, 255, .82);
  --media-control-bg-hover: rgba(255, 255, 255, .96);
  --media-control-fg: #1c252d;
  --media-control-accent-bg: rgba(34, 142, 175, .16);
}

/* Shared client pages and overlays */
html[data-theme="light"] body.client-body {
  background: #f3f5f7 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body .studio-shell,
html[data-theme="light"] body.client-body .studio-shell .workspace,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .studio-shell,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .workspace {
  background-color: #f3f5f7 !important;
  background-image: none !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .tool-rail {
  border-right-color: #e1e5e9 !important;
  background: #f8f9fa !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-button {
  color: #66717c !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-button:hover {
  background: #eef1f4 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-button.active {
  background: #e7edf0 !important;
  color: #111519 !important;
}

html[data-theme="light"] body.client-body :is(input, textarea, select) {
  color: #20272d;
  border-color: #d8dfe4;
  background-color: #ffffff;
}

html[data-theme="light"] body.client-body :is(input, textarea, select)::placeholder {
  color: #8b959f;
}

html[data-theme="light"] body.client-body :is(.asset-stage, .profile-stage, .digital-human-stage, .video-enhancer-stage) {
  color: #1b2228;
}

html[data-theme="light"] body.client-body :is(
  .profile-header,
  .profile-panel,
  .profile-metrics article,
  .invite-code-grid article,
  .profile-publication-list > article,
  .digital-human-panel,
  .video-enhancer-panel,
  .video-enhancer-history,
  .video-enhancer-task,
  .publication-detail-panel
) {
  border-color: #dde3e7 !important;
  background: #ffffff !important;
  color: #1b2228 !important;
  box-shadow: 0 8px 24px rgba(25, 35, 45, .07) !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-header,
  .profile-metrics article,
  .invite-code-grid article,
  .profile-publication-list > article,
  .digital-human-panel,
  .video-enhancer-panel,
  .video-enhancer-history,
  .video-enhancer-task
) {
  border-radius: 8px;
}

html[data-theme="light"] body.client-body :is(
  .profile-header p,
  .profile-panel header span,
  .profile-rule,
  .profile-metrics span,
  .profile-publications header span,
  .digital-human-heading p,
  .digital-human-panel header small,
  .digital-human-model-note,
  .video-enhancer-heading p,
  .video-enhancer-panel header small,
  .video-enhancer-provider-note,
  .video-enhancer-estimate,
  .publication-detail-meta,
  .publication-detail-specs
) {
  color: #6b7681 !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-table-wrap th,
  .profile-table-wrap td,
  .digital-human-panel :is(header, footer),
  .video-enhancer-panel :is(header, footer),
  .publication-detail-meta,
  .publication-detail-prompt
) {
  border-color: #e2e7ea !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-table-wrap td,
  .profile-table-wrap strong,
  .digital-human-panel strong,
  .video-enhancer-panel strong,
  .publication-detail-author > strong,
  .publication-detail-prompt p,
  .publication-detail-prompt h3
) {
  color: #20272d !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-panel,
  .digital-human-panel,
  .video-enhancer-panel,
  .publication-detail-panel
) :is(label, legend, dt) {
  color: #5f6b76 !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-metrics strong,
  .invite-code-grid strong,
  .profile-publication-list strong,
  .digital-human-panel output,
  .video-enhancer-panel output
) {
  color: #20272d !important;
}

html[data-theme="light"] body.client-body :is(
  .subtle-button,
  .profile-header .subtle-button,
  .profile-panel .subtle-button
) {
  border-color: #d6dee3 !important;
  background: #f4f6f7 !important;
  color: #334049 !important;
}

html[data-theme="light"] body.client-body :is(
  .subtle-button,
  .profile-header .subtle-button,
  .profile-panel .subtle-button
):hover {
  border-color: #afc0c9 !important;
  background: #e8eef1 !important;
  color: #11191f !important;
}

html[data-theme="light"] body.client-body :is(.digital-human-avatar-card, .digital-human-scene-card, .video-enhancer-dropzone) {
  border-color: #d7dfe4 !important;
  background: #f7f9fa !important;
  color: #263038 !important;
}

html[data-theme="light"] body.client-body :is(.digital-human-avatar-empty, .digital-human-asset-empty, .video-enhancer-empty) {
  border-color: #d1dade !important;
  background: #f7f9fa !important;
  color: #75808a !important;
}

html[data-theme="light"] body.client-body .publication-detail-stage {
  background: #e9edf1 !important;
}

html[data-theme="light"] body.client-body :is(.publication-detail-close, .publication-detail-nav) {
  border-color: #d5dde2 !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #263038 !important;
  box-shadow: 0 5px 18px rgba(25, 35, 45, .12) !important;
}

html[data-theme="light"] body.client-body :is(.publication-follow, .publication-detail-actions button) {
  border-color: #d8e0e4 !important;
  background: #f2f5f7 !important;
  color: #263038 !important;
}

html[data-theme="light"] body.client-body :is(.publication-follow.active, .publication-detail-actions button:hover) {
  border-color: #9dcfdd !important;
  background: #e7f3f6 !important;
  color: #126e8c !important;
}

html[data-theme="light"] body.client-body .modal-backdrop {
  background: rgba(30, 38, 46, .38) !important;
  backdrop-filter: blur(6px);
}

html[data-theme="light"] body.client-body :is(
  .announcement-modal,
  .login-announcement-modal,
  .profile-modal,
  .publish-modal,
  .comments-modal,
  .reference-library-modal,
  .save-asset-modal,
  .agent-skill-editor,
  .recharge-modal,
  .credit-logs-modal,
  .recharge-history-modal,
  .invoice-modal,
  .customer-recharge-modal,
  .membership-contact-modal,
  .video-enhance-modal,
  .enhancement-compare-modal,
  .conversation-dialog,
  .conversation-delete-dialog,
  .table-modal
) {
  border-color: #d8e0e4 !important;
  background: #ffffff !important;
  color: #1c242b !important;
  box-shadow: 0 24px 64px rgba(25, 35, 45, .18) !important;
}

html[data-theme="light"] body.client-body :is(
  .announcement-modal,
  .login-announcement-modal,
  .profile-modal,
  .publish-modal,
  .comments-modal,
  .reference-library-modal,
  .save-asset-modal,
  .agent-skill-editor,
  .recharge-modal,
  .credit-logs-modal,
  .recharge-history-modal,
  .invoice-modal,
  .customer-recharge-modal,
  .membership-contact-modal,
  .video-enhance-modal,
  .enhancement-compare-modal,
  .conversation-dialog,
  .conversation-delete-dialog,
  .table-modal
) :is(header, footer) {
  border-color: #e1e7ea !important;
}

html[data-theme="light"] body.client-body :is(
  .announcement-modal,
  .login-announcement-modal,
  .profile-modal,
  .publish-modal,
  .comments-modal,
  .reference-library-modal,
  .save-asset-modal,
  .agent-skill-editor,
  .recharge-modal,
  .credit-logs-modal,
  .recharge-history-modal,
  .invoice-modal,
  .customer-recharge-modal,
  .membership-contact-modal,
  .video-enhance-modal,
  .enhancement-compare-modal,
  .conversation-dialog,
  .conversation-delete-dialog,
  .table-modal
) :is(h1, h2, h3, strong, label, dt, dd) {
  color: inherit;
}

html[data-theme="light"] body.client-body :is(
  .announcement-modal,
  .login-announcement-modal,
  .profile-modal,
  .publish-modal,
  .comments-modal,
  .reference-library-modal,
  .save-asset-modal,
  .agent-skill-editor,
  .recharge-modal,
  .credit-logs-modal,
  .recharge-history-modal,
  .invoice-modal,
  .customer-recharge-modal,
  .membership-contact-modal,
  .video-enhance-modal,
  .enhancement-compare-modal,
  .conversation-dialog,
  .conversation-delete-dialog,
  .table-modal
) :is(p, small, time, dt) {
  color: #697580 !important;
}

html[data-theme="light"] body.client-body :is(
  .announcement-modal,
  .profile-modal,
  .publish-modal,
  .comments-modal,
  .reference-library-modal,
  .save-asset-modal,
  .agent-skill-editor,
  .recharge-modal,
  .credit-logs-modal,
  .recharge-history-modal,
  .invoice-modal,
  .customer-recharge-modal,
  .membership-contact-modal,
  .video-enhance-modal,
  .conversation-dialog,
  .conversation-delete-dialog,
  .table-modal
) :is(input, textarea, select) {
  border-color: #d6dee3 !important;
  background: #f8fafb !important;
  color: #20272d !important;
}

html[data-theme="light"] body.client-body :is(
  .announcement-item,
  .comment-item,
  .reference-library-item,
  .credit-log-item,
  .recharge-history-item
) {
  border-color: #e0e6ea !important;
  background: #f8fafb !important;
  color: #263038 !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-modal,
  .announcement-modal,
  .login-announcement-modal,
  .reference-library-modal,
  .save-asset-modal,
  .video-enhance-modal,
  .customer-recharge-modal,
  .membership-contact-modal
) :is(footer button, .primary) {
  border-color: #d2dbe0 !important;
  background: #f2f5f7 !important;
  color: #2b343c !important;
}

html[data-theme="light"] body.client-body :is(
  .profile-modal,
  .announcement-modal,
  .login-announcement-modal,
  .reference-library-modal,
  .save-asset-modal,
  .video-enhance-modal,
  .customer-recharge-modal,
  .membership-contact-modal
) :is(footer button, .primary):hover {
  border-color: #abc3ce !important;
  background: #e8eef1 !important;
  color: #11191f !important;
}

html[data-theme="light"] body.client-body :is(.generation-completion-toast, .toast) {
  border-color: #a8d9ca !important;
  background: #edf8f3 !important;
  color: #185944 !important;
  box-shadow: 0 18px 48px rgba(25, 35, 45, .16) !important;
}

html[data-theme="light"] body.client-body :is(.generation-completion-toast, .toast) :is(strong, small) {
  color: inherit !important;
}

html[data-theme="light"] body.client-body :is(
  .task-status,
  .model-success-rate,
  .verification-badge,
  .octo-badge,
  .announcement-red-tag
) {
  text-shadow: none !important;
}

html[data-theme="light"] body.client-body .model-success-rate.good {
  color: #157554 !important;
}

html[data-theme="light"] body.client-body .model-success-rate.warning {
  color: #8a5b12 !important;
}

html[data-theme="light"] body.client-body .model-success-rate.danger {
  color: #aa3146 !important;
}

html[data-theme="light"] body.client-body .model-success-rate.new {
  color: #0b6f8f !important;
}

html[data-theme="light"] body.client-body .octo-badge {
  color: #1d6f9a !important;
}

html[data-theme="light"] body.client-body .asset-library-header nav button {
  color: #626e78 !important;
}

html[data-theme="light"] body.client-body .asset-library-header nav button.active {
  background: #e7edf0 !important;
  color: #172027 !important;
}

html[data-theme="light"] body.client-body .asset-filter-bar button {
  color: #68737d !important;
}

html[data-theme="light"] body.client-body .asset-filter-bar button.active {
  color: #172027 !important;
}

/* Admin console */
html[data-theme="light"] .admin-body {
  color-scheme: light !important;
  background-color: var(--admin-bg) !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body :is(.admin-shell, .admin-main, .admin-content, .admin-page) {
  background-color: transparent !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body .admin-sidebar {
  border-color: var(--admin-border) !important;
  background: var(--admin-sidebar) !important;
  color: var(--admin-text-muted) !important;
  box-shadow: 8px 0 26px rgba(25, 35, 45, .05) !important;
}

html[data-theme="light"] .admin-body .admin-brand {
  border-bottom-color: var(--admin-border) !important;
}

html[data-theme="light"] .admin-body :is(.admin-brand strong, .admin-topbar strong) {
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body :is(.admin-brand small, .admin-topbar small, .admin-topbar > span) {
  color: var(--admin-text-subtle) !important;
}

html[data-theme="light"] .admin-body .admin-topbar {
  border-bottom-color: var(--admin-border) !important;
  background: var(--admin-topbar) !important;
  color: var(--admin-text) !important;
  box-shadow: 0 6px 22px rgba(25, 35, 45, .06) !important;
}

html[data-theme="light"] .admin-body .admin-sidebar nav button,
html[data-theme="light"] .admin-body .admin-sidebar-bottom a,
html[data-theme="light"] .admin-body .admin-sidebar-bottom button {
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] .admin-body .admin-sidebar nav button:hover,
html[data-theme="light"] .admin-body .admin-sidebar-bottom a:hover,
html[data-theme="light"] .admin-body .admin-sidebar-bottom button:hover {
  border-color: var(--admin-border) !important;
  background: var(--admin-surface-hover) !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body .admin-sidebar nav button.active {
  border-color: var(--brand-border-soft) !important;
  background: var(--admin-info-surface) !important;
  color: var(--admin-accent-strong) !important;
}

html[data-theme="light"] .admin-body :is(
  .admin-card,
  .model-admin-card,
  .metric-grid article,
  .admin-modal,
  .inspiration-settings,
  .admin-security-panel,
  .user-detail-modal,
  .detail-section,
  .admin-hero-preview,
  .admin-feature-row,
  .billing-editor,
  .token-pricing-editor,
  .provider-model-details
) {
  border-color: var(--admin-border) !important;
  background: var(--admin-surface) !important;
  color: var(--admin-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

html[data-theme="light"] .admin-body :is(
  .admin-card > header,
  .admin-card > footer,
  .model-admin-card > header,
  .admin-table-wrap th,
  .task-filters,
  .profit-summary,
  .model-batch-bar
) {
  border-color: var(--admin-border) !important;
  background: var(--admin-surface-raised) !important;
}

html[data-theme="light"] .admin-body :is(.admin-table-wrap th, .admin-table-wrap td, .admin-table-wrap tr) {
  border-color: var(--admin-border) !important;
}

html[data-theme="light"] .admin-body .admin-table-wrap th {
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] .admin-body .admin-table-wrap td {
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body .admin-table-wrap tbody tr:hover td,
html[data-theme="light"] .admin-body .admin-table-wrap tbody tr:nth-child(even):hover td {
  background: var(--admin-surface-hover) !important;
}

html[data-theme="light"] .admin-body :is(input, textarea, select),
html[data-theme="light"] .admin-body :is(.admin-search, .profit-filter-bar input) {
  border-color: var(--admin-border-strong) !important;
  background: var(--admin-input) !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body :is(input, textarea, select)::placeholder {
  color: var(--admin-text-subtle) !important;
}

html[data-theme="light"] .admin-body :is(
  .admin-heading button,
  .admin-card button,
  .model-admin-card button,
  .admin-modal button,
  .admin-tabs button,
  .model-category-tabs button,
  .model-provider-tabs button,
  .model-status-tabs button,
  .model-batch-bar button,
  .trend-range-tabs button
) {
  border-color: var(--admin-border-strong) !important;
  background: var(--admin-surface-raised) !important;
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] .admin-body :is(
  .admin-heading button,
  .admin-card button,
  .model-admin-card button,
  .admin-modal button,
  .admin-tabs button,
  .model-category-tabs button,
  .model-provider-tabs button,
  .model-status-tabs button,
  .trend-range-tabs button
):hover {
  border-color: var(--admin-accent) !important;
  background: var(--admin-surface-hover) !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body :is(.admin-primary, .admin-tabs button.active, .admin-login form > button) {
  border-color: transparent !important;
  background: var(--admin-brand-gradient) !important;
  color: var(--admin-accent-ink) !important;
}

html[data-theme="light"] .admin-body .admin-modal-backdrop {
  background: rgba(30, 38, 46, .36) !important;
  backdrop-filter: blur(6px);
}

html[data-theme="light"] .admin-body .admin-modal footer {
  border-color: var(--admin-border) !important;
}

html[data-theme="light"] .admin-body .admin-login {
  background: var(--admin-bg) !important;
}

html[data-theme="light"] .admin-body .admin-login form {
  border-color: var(--admin-border) !important;
  background: var(--admin-surface) !important;
  box-shadow: 0 24px 64px rgba(25, 35, 45, .16) !important;
}

html[data-theme="light"] .admin-body .admin-login :is(h1, label) {
  color: var(--admin-text) !important;
}

html[data-theme="light"] .admin-body .admin-login > form > p {
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] .admin-body .admin-error {
  border-color: var(--admin-danger-border) !important;
  background: var(--admin-danger-surface) !important;
  color: var(--admin-danger) !important;
}

html[data-theme="light"] .admin-body .admin-provider-submission code,
html[data-theme="light"] .admin-body .task-detail-section pre,
html[data-theme="light"] .admin-body .admin-upload-route {
  border-color: var(--admin-border) !important;
  background: var(--admin-surface-raised) !important;
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] .admin-body .metric-grid article.actual-profit,
html[data-theme="light"] .admin-body .profit-positive {
  border-color: var(--admin-success-border) !important;
  background: var(--admin-success-surface) !important;
}

html[data-theme="light"] .admin-body .admin-brand-logo,
html[data-theme="light"] .admin-body .site-media-grid > div,
html[data-theme="light"] .admin-body .site-media-preview,
html[data-theme="light"] .admin-body .admin-recharge-tiers article,
html[data-theme="light"] .admin-body .smtp-test-row button,
html[data-theme="light"] .admin-body .provider-model-list button,
html[data-theme="light"] .admin-body .model-category-empty {
  border-color: var(--admin-border) !important;
  background: var(--admin-surface-raised) !important;
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] .admin-body :is(.admin-primary, .admin-tabs button.active, .admin-login form > button) {
  background-color: #147fa3 !important;
  background-image: var(--admin-brand-gradient) !important;
  color: var(--admin-accent-ink) !important;
}

/* Final light-theme pass for the control-rich creation workspace. Several
   older feature layers use high-specificity dark surfaces after the shared
   preview styles, so these overrides intentionally sit at the end of the
   platform layer. */
html[data-theme="light"],
html[data-theme="light"] body {
  background-color: #f3f5f7 !important;
  color: #1d252d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-toolbar.create-workspace-toolbar {
  border-color: #dfe4e8 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 28px rgba(25, 35, 45, .1) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-toolbar.create-workspace-toolbar::after {
  background: #d9e1e5 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-pill {
  color: #56616c !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-pill .ui-icon {
  color: #6b7680 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-pill:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-pill[aria-expanded="true"] {
  background: #eef2f4 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-pill:hover .ui-icon,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-pill[aria-expanded="true"] .ui-icon {
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-sep {
  background: #dfe5e8 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-search-popover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-menu {
  border-color: #dce3e7 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 46px rgba(25, 35, 45, .16) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-search-popover input {
  color: #20272d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-search-popover input::placeholder {
  color: #8b959f !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-menu-item {
  color: #4e5964 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-menu-item:hover {
  background: #f0f3f5 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .workspace-tool-menu-item.active {
  background: #e8f2f5 !important;
  color: #0e7899 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .generation-primary-actions > button,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-failure-buttons > button,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-more-menu > summary {
  border-color: #d8e0e4 !important;
  background: #f4f6f7 !important;
  color: #3f4b55 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .generation-primary-actions > button:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-failure-buttons > button:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-more-menu > summary:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-more-menu[open] > summary {
  border-color: #b9c8d0 !important;
  background: #e9eef1 !important;
  color: #11191f !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-more-menu > div {
  border-color: #d9e1e5 !important;
  background: #ffffff !important;
  box-shadow: 0 16px 42px rgba(25, 35, 45, .18) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-more-menu > div button {
  background: transparent !important;
  color: #a43a4d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-more-menu > div button:hover {
  background: #fbecef !important;
  color: #7f2436 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-detail-label {
  color: #5f6b75 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-failure-badge {
  border-color: #e7b9c1 !important;
  background: #fceef1 !important;
  color: #a33448 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .task-failure-reason {
  color: #c53048 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-toolbar {
  border-top-color: #e4e9ec !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-options :is(
  .select-chip.custom-select,
  .custom-select-trigger,
  .create-toolbar-pill,
  .home-toolbar-pill
) {
  border-color: #dbe2e6 !important;
  background: #f4f6f7 !important;
  color: #4f5a65 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-options :is(
  .select-chip.custom-select,
  .custom-select-trigger,
  .create-toolbar-pill,
  .home-toolbar-pill
):hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-options :is(
  .custom-select-trigger[aria-expanded="true"],
  .create-toolbar-pill[aria-expanded="true"],
  .create-toolbar-pill[aria-pressed="true"]
) {
  border-color: #afc2cb !important;
  background: #e9eef1 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-options :is(
  .create-pill-label strong,
  .custom-select-trigger-value > span,
  .model-picker-current strong,
  .generation-spec-chip strong,
  .duration-picker-trigger strong
) {
  color: #263038 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-options :is(
  .create-mode-trigger,
  .create-pill-star,
  .mode-icon-glow
) {
  color: #147fa3 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-options :is(
  .create-pill-icon,
  .custom-select-chevron
) {
  color: #71808a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-submit {
  border-left-color: #dfe5e8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-submit .composer-price,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-submit .composer-price-wrap {
  color: #4d5963 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-submit .home-send-circle {
  border-color: #197e9e !important;
  background: #197e9e !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-submit .home-send-circle:hover {
  border-color: #126a87 !important;
  background: #126a87 !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .create-composer-submit .home-send-circle:disabled {
  border-color: #d6dfe3 !important;
  background: #e4e9ec !important;
  color: #83909a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select {
  border-color: #dbe2e6 !important;
  background: #f4f6f7 !important;
  color: #4f5a65 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select .custom-select-trigger {
  border-color: transparent !important;
  background: transparent !important;
  color: #4f5a65 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select .custom-select-trigger:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select .custom-select-trigger[aria-expanded="true"] {
  background: #e9eef1 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select .custom-select-trigger-value > span {
  color: #344049 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select .create-mode-trigger,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .generation-mode-select .create-mode-trigger :is(.mode-icon-glow, .create-pill-star) {
  color: #147fa3 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"]:not(.compact):not(.maximized) .create-composer-submit {
  border-left-color: #dfe5e8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .video-wizard {
  border-color: #d9e2e6 !important;
  background: #f8fafb !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .video-wizard-head h3 {
  color: #20272d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .video-wizard-option {
  border-color: #d8e0e4 !important;
  background: #ffffff !important;
  color: #4f5a65 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .video-wizard-option.is-selected {
  border-color: #71bfd1 !important;
  background: #e8f4f7 !important;
  color: #145e76 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) :is(.video-wizard-select, .video-wizard-textarea) {
  border-color: #d5dee2 !important;
  background: #ffffff !important;
  color: #20272d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) .video-wizard-summary-row {
  color: #53606b !important;
}

html[data-theme="light"] body.client-body .asset-date-groups > section > h2 {
  color: #20272d !important;
}

html[data-theme="light"] body.client-body .asset-duration {
  border: 1px solid rgba(38, 48, 56, .12) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #263038 !important;
}

html[data-theme="light"] body.client-body .digital-human-voice > span,
html[data-theme="light"] body.client-body .video-enhancer-settings > :is(.video-enhancer-resolution, .video-enhancer-cost) > span {
  color: #5b6771 !important;
}

html[data-theme="light"] body.client-body .digital-human-submit:disabled,
html[data-theme="light"] body.client-body .video-enhancer-submit:disabled {
  background: #dce3e7 !important;
  color: #65727d !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.client-body .video-enhancer-resolution button {
  border-color: #d4dde2 !important;
  background: #f4f6f7 !important;
  color: #53606b !important;
}

html[data-theme="light"] body.client-body .video-enhancer-resolution button.active {
  border-color: #75bfd0 !important;
  background: #e8f4f7 !important;
  color: #145e76 !important;
}

html[data-theme="light"] body.client-body .video-enhancer-cost {
  border-color: #d8e0e4 !important;
  background: #f7f9fa !important;
}

html[data-theme="light"] body.client-body .video-enhancer-task-actions button {
  border-color: #d5dee2 !important;
  background: #f4f6f7 !important;
  color: #4e5b66 !important;
}

html[data-theme="light"] body.client-body .video-enhancer-task-actions button:hover {
  border-color: #aec0c9 !important;
  background: #e9eef1 !important;
  color: #171b20 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .announcement-red-tag {
  border-color: #efc7ce !important;
  background: #fceef1 !important;
  color: #a33448 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .composer-price {
  color: #4d5963 !important;
}

html[data-theme="light"] body.client-body .publication-access.paid {
  background: #fff2dc !important;
  color: #8a5b12 !important;
}

html[data-theme="light"] body.client-body .publication-access.free {
  background: #e6f6f0 !important;
  color: #157554 !important;
}

html[data-theme="light"] body.client-body .publication-detail-actions .primary-button,
html[data-theme="light"] body.client-body .publication-detail-actions button.primary-button {
  border-color: transparent !important;
  background: #197e9e !important;
  color: #ffffff !important;
}

html[data-theme="light"] .admin-body small {
  color: var(--admin-text-muted) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card {
  border-color: #e0e5e9 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #263038 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card :is(strong, h3) {
  color: #1c2228 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card :is(p, small) {
  color: #6a7680 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge.badge-thumb {
  background: #edf1f3 !important;
  color: #263038 !important;
}

/* The replica home layer is dark-first and uses !important declarations.
   Keep the light theme genuinely light instead of leaving dark surfaces
   underneath the light text tokens. */
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-stage {
  background: #f3f5f7 !important;
  color: #1d252d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-heading h1 {
  color: #1d252d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .hero-mode-switch {
  color: #0e6e90 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-section > .inspiration-grid > .inspiration-card {
  border-color: #d8e0e4 !important;
  background: #ffffff !important;
  color: #1d252d !important;
  box-shadow: 0 8px 24px rgba(25, 35, 45, .07) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before {
  color: #344049 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before {
  color: #66737d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-agent-mode-trigger,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-toolbar-pill {
  border-color: #d6dee3 !important;
  background: #f4f6f7 !important;
  color: #344049 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-toolbar-pill .ui-icon,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-pill-icon,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .custom-select-chevron {
  color: #5d6a74 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-price {
  color: #52606a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-published-link {
  color: #52606a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button.active {
  background: #e7edf0 !important;
  color: #172027 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search input {
  color: #20272d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search input::placeholder {
  color: #66737d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .asset-empty {
  color: #52606a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card div strong {
  color: #1c2228 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card div p {
  color: #52606a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle {
  border-color: #197e9e !important;
  background: #197e9e !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle:hover {
  border-color: #126a87 !important;
  background: #126a87 !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle:disabled {
  border-color: #d8e0e4 !important;
  background: #e4e9ec !important;
  color: #7b8791 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .hero-mode-switch > span {
  color: #0e6e90 !important;
}

html[data-theme="light"] body.client-body .inspiration-card .inspiration-card-summary small {
  color: #596772 !important;
}

html[data-theme="light"] body.client-body .inspiration-card .publication-access-actions .primary-button {
  border-color: #197e9e !important;
  background: #197e9e !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body .inspiration-card .publication-access-actions .primary-button:hover {
  border-color: #126a87 !important;
  background: #126a87 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-pill-label {
  color: #344049 !important;
}

html[data-theme="light"] body.client-body .profile-header > div > span,
html[data-theme="light"] body.client-body:has(.studio-shell.view-digitalHuman) .digital-human-heading > div > span,
html[data-theme="light"] body.client-body:has(.studio-shell.view-videoEnhancer) .video-enhancer-heading > div > span {
  color: #0e6e90 !important;
}

html[data-theme="light"] body.client-body .asset-empty {
  color: #5f6b75 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-digitalHuman) .digital-human-submit {
  border-color: #197e9e !important;
  background: #197e9e !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-digitalHuman) .digital-human-submit:hover {
  border-color: #126a87 !important;
  background: #126a87 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-digitalHuman) .digital-human-submit:disabled {
  border-color: #d8e0e4 !important;
  background: #e4e9ec !important;
  color: #65727d !important;
}

html[data-theme="light"] .admin-body .admin-home-section > p {
  color: var(--admin-text-muted) !important;
}

@media (max-width: 600px) {
  html[data-theme="light"] body.client-body .mobile-nav-button.active {
    background: #e8f2f5 !important;
    color: #0d7899 !important;
  }

  html[data-theme="light"] body.client-body .home-prompt-composer .attach-button:not(.has-reference) {
    border-color: #cfd7dc !important;
    background: #f4f6f7 !important;
    color: #77828d !important;
  }

  html[data-theme="light"] body.client-body .inspiration-discovery-nav nav button.active {
    background: #e7edf0 !important;
    color: #171b20 !important;
  }

  html[data-theme="light"] body.client-body .customer-service-trigger {
    border-color: #dce2e6 !important;
    background: #ffffff !important;
    color: #67727d !important;
  }

  html[data-theme="light"] body.client-body .home-send-circle {
    border-color: #d8e0e4 !important;
    background: #eef2f4 !important;
    color: #697580 !important;
  }
}

@media (max-width: 820px) {
  html[data-theme="light"] body.client-body .modal-backdrop {
    background: rgba(30, 38, 46, .34) !important;
  }
}

/* Generation composer readability across every responsive state.
   The compact composer previously inherited the dark base surface while the
   light theme changed only its text colour. Keep the surface and text as one
   light-theme pair so the prompt remains legible after theme or layout changes. */
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] {
  border-color: #dfe4e8 !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(25, 35, 45, .13), 0 0 0 1px rgba(24, 127, 162, .08) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] .prompt-rich-editor {
  color: #232a30 !important;
  caret-color: #187fa2 !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] .prompt-rich-editor:empty::before,
html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] .composer-compact-hint {
  color: #66707c !important;
}

/* Readability corrections scoped to the homepage and its sign-in controls. */
body.client-body .auth-login-card .auth-field input::placeholder,
html[data-theme="light"] body.client-body .auth-login-card .auth-field input::placeholder {
  color: #5d6973;
  opacity: 1;
}

body.client-body .auth-login-card .agreement-check { color: #52606a; }
body.client-body .auth-login-card .forgot-link { color: #286575; }

/* Landing media remains dark in both modes; do not put light-theme text on it. */
html[data-theme="light"] body.client-body .auth-landing-command-input {
  background: transparent;
  color: #fff;
}
html[data-theme="light"] body.client-body .auth-landing-command-input::placeholder {
  color: #e0e5e9;
  opacity: 1;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before,
html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search input::placeholder {
  color: #a3aab5 !important;
  opacity: 1;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card div p,
html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) .asset-empty {
  color: #a3aab5 !important;
}

body.client-body:has(.studio-shell.view-inspire) .rail-badge-count {
  background: #545c66 !important;
  color: #fff !important;
}

html[data-theme="dark"] body.client-body .rail-theme-menu :is(header, button) small {
  color: #b0b8c2;
}
html[data-theme="light"] body.client-body .rail-theme-menu :is(header, button) small {
  color: #52606a;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-published-link:hover {
  color: #172027 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-card:hover {
  background: #eef2f4 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge:is(.badge-blue, .badge-cyan) :is(strong, small) {
  color: #fff !important;
}

body.client-body:has(.studio-shell.view-inspire) .home-feature-badge.badge-blue {
  background: #1558b0 !important;
}
body.client-body:has(.studio-shell.view-inspire) .home-feature-badge.badge-cyan {
  background: #8235ac !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-brand-spark img {
  filter: drop-shadow(0 0 7px rgba(174, 112, 8, .22)) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-headset-circle {
  background: #fff !important;
  border-color: #d8e0e4 !important;
  color: #52606a !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer :is(.create-mode-trigger, .create-mode-trigger span, .create-mode-trigger .ui-icon) {
  color: #176b9e !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm.home-prompt-composer .create-mention-pill {
  color: #344049 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) {
  --home-text: #1d252d;
  --home-text-muted: #52606a;
  --home-text-subtle: #5d6973;
  --home-surface-page: #f3f5f7;
  --home-surface-card: #ffffff;
  --home-surface-control: #f0f3f5;
  --page-surface-3: #e4ebef;
  --home-line: #d8e0e4;
  --home-line-soft: rgba(35, 47, 60, .12);
  --home-brand: #176b9e;
  --composer-popover-surface: #ffffff;
  --composer-popover-control: #f0f3f5;
  --composer-popover-control-active: #e4ebef;
  --composer-popover-line: #d8e0e4;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) {
  --home-text-subtle: #a3aab5;
}

/* White announcement text needs a consistently dark backdrop. */
body.client-body:has(.studio-shell.view-inspire) .platform-announcement-bar {
  background: #1558a0 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm .model-picker-menu {
  background: #fff !important;
  border-color: #d8e0e4 !important;
  box-shadow: 0 16px 42px rgba(25, 35, 45, .16) !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm .custom-select-option.active {
  color: #1d252d !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm .custom-select-option.active :is(span, .ui-icon) {
  color: #1d252d !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm :is(.generation-spec-panel, .custom-select-menu) {
  box-shadow: 0 16px 42px rgba(25, 35, 45, .16) !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm .model-picker-menu :is(.model-picker-category-tabs button.active, .model-picker-option.selected, .model-picker-option:hover) {
  background: #e4ebef !important;
  color: #1d252d !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm .model-picker-menu :is(.model-picker-category-tabs, .model-picker-list, .model-picker-option) {
  border-color: #d8e0e4 !important;
}
body.client-body:has(.studio-shell.view-inspire) #app #taskForm .model-picker-category-tabs button small {
  opacity: 1;
}
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app #taskForm .model-success-rate.muted {
  color: #52606a !important;
}

/* Homepage chrome uses one neutral palette; media keeps its original colors. */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) {
  --home-brand: #d1d1d1;
  --home-line-strong: #62666d;
  --color-brand-ink: #17191c;
  --home-ui-text: #e8e8e8;
  --home-ui-muted: #a3aab5;
  --home-ui-action: #dedede;
  --home-ui-action-hover: #ffffff;
  --home-ui-action-ink: #17191c;
  --home-ui-accent-surface: #34373b;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) {
  --home-brand: #344049;
  --home-line-strong: #737d85;
  --color-brand-ink: #ffffff;
  --home-ui-text: #1d252d;
  --home-ui-muted: #52606a;
  --home-ui-action: #344049;
  --home-ui-action-hover: #20272d;
  --home-ui-action-ink: #ffffff;
  --home-ui-accent-surface: #e4ebef;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-bar {
  background: #34373b !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) :is(.hero-mode-switch, .hero-mode-switch > span, .hero-mode-arrow, .octo-badge) {
  color: var(--home-ui-text) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) #app #taskForm.home-prompt-composer :is(
  .create-mode-trigger, .create-mode-trigger span, .create-mode-trigger .ui-icon,
  .mode-icon-glow, .create-pill-star, .custom-select-option-check,
  .create-optimize-pill.is-active, .create-optimize-pill.is-active .create-pill-label
) {
  color: var(--home-ui-text) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) #app #taskForm.home-prompt-composer .create-optimize-pill.is-active {
  background: var(--home-ui-accent-surface) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle:not(:disabled) {
  background: var(--home-ui-action) !important;
  border-color: var(--home-ui-action) !important;
  color: var(--home-ui-action-ink) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle:not(:disabled):hover {
  background: var(--home-ui-action-hover) !important;
  border-color: var(--home-ui-action-hover) !important;
  color: var(--home-ui-action-ink) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge:is(.badge-blue, .badge-cyan) {
  background: var(--home-ui-action) !important;
}
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge:is(.badge-blue, .badge-cyan) :is(strong, small) {
  color: var(--home-ui-action-ink) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-theme-menu > button > i {
  color: var(--home-ui-text);
}
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge.badge-thumb img {
  filter: grayscale(1);
}

/* Shared light tokens apply to every client route, not only the homepage.
   Media surfaces and their overlays keep their independent contrast pairs. */
html[data-theme="light"] body.client-body:has(.studio-shell) {
  color-scheme: light;
  --color-bg: #f3f5f7;
  --color-bg-raised: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-strong: #e9edf0;
  --color-border: #d8dfe4;
  --color-text: #20272d;
  --color-text-muted: #52606a;
  --color-text-subtle: #5d6973;
  --color-brand: #344049;
  --color-brand-strong: #20272d;
  --color-brand-ink: #ffffff;
  --color-success: #187352;
  --color-danger: #b03246;
  --color-warning: #865a16;
  --color-info: #52606a;
  --brand-border-soft: #d8dfe4;
  --brand-border: #aeb9c1;
  --brand-border-strong: #737d85;
  --brand-surface-soft: #f4f6f7;
  --brand-surface: #e9edf0;
  --brand-surface-strong: #e0e6ea;
  --brand-surface-hover: #d8dfe4;
  --gradient-brand: linear-gradient(135deg, #52606a, #344049);
  --glass-high-bg: rgba(255, 255, 255, .96);
  --glass-medium-bg: rgba(248, 249, 250, .94);
  --glass-low-bg: rgba(243, 245, 247, .9);
  --glass-border: #d8dfe4;
  --shadow-sm: 0 4px 18px rgba(25, 35, 45, .08);
  --shadow-md: 0 14px 42px rgba(25, 35, 45, .12);
  --shadow-lg: 0 28px 90px rgba(25, 35, 45, .18);
  --shadow-depth-card: var(--shadow-sm);
  --shadow-depth-dialog: var(--shadow-lg);
  --shadow-depth-nav: var(--shadow-sm);
  --shadow-depth-float: var(--shadow-md);
  --page-surface-0: #f3f5f7;
  --page-surface-1: #ffffff;
  --page-surface-2: #f0f3f5;
  --page-surface-3: #e4ebef;
  --page-line-soft: rgba(35, 47, 60, .1);
  --page-line: #d8dfe4;
  --page-line-strong: #aeb9c1;
  --page-text: #20272d;
  --page-text-muted: #52606a;
  --page-text-subtle: #5d6973;
  --page-control-bg: #f4f6f7;
  --page-control-hover: #e4ebef;
  --page-focus-ring: 0 0 0 3px rgba(52, 64, 73, .16);
  --page-grid: none;
  --page-quiet-background: none;
  --page-glow: none;
  --texture-grid: none;
  --client-rail-bg: #f8f9fa;
  --client-conversation-bg: #f8f9fa;
  --client-sidebar-active: #e4ebef;
  --client-sidebar-hover: #eef1f4;
  --client-sidebar-line: #d8dfe4;
  --client-sidebar-text: #344049;
  --client-sidebar-active-text: #20272d;
  --client-sidebar-muted: #52606a;
  --client-sidebar-subtle: #5d6973;
  --client-sidebar-scrollbar: #aeb9c1;
  --composer-popover-surface: #ffffff;
  --composer-popover-control: #f0f3f5;
  --composer-popover-control-active: #e4ebef;
  --composer-popover-line: #d8dfe4;
  --generation-composer-surface: #ffffff;
  --generation-composer-control: #f0f3f5;
  --generation-composer-border: #d8dfe4;
  --generation-composer-control-border: #d8dfe4;
  --generation-input-bg: #f4f6f7;
  --panel-bg: #ffffff;
  --text-primary: #20272d;
  --border-color: #d8dfe4;
}

html[data-theme="light"] body.client-body #app :is(.tool-rail, .conversation-sidebar) {
  background: #f8f9fa !important;
  border-color: #d8dfe4 !important;
  color: #344049 !important;
}
html[data-theme="light"] body.client-body #app .rail-brand-spark img {
  filter: drop-shadow(0 0 7px rgba(174, 112, 8, .22)) !important;
}
html[data-theme="light"] body.client-body #app :is(
  .rail-button, .rail-notification-button, .rail-3d-button, .rail-theme-button
) {
  color: #52606a !important;
}
html[data-theme="light"] body.client-body #app :is(.rail-button, .rail-3d-button, .rail-theme-button):hover {
  background: #eef1f4 !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app .rail-button.active {
  background: #e4ebef !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app .rail-member-pill {
  background: #ffffff !important;
  border-color: #d8dfe4 !important;
  box-shadow: 0 3px 10px rgba(25, 35, 45, .08) !important;
}
html[data-theme="light"] body.client-body #app :is(.member-credit-row, .credit-sparkle, .member-tag-text) {
  color: #344049 !important;
}
html[data-theme="light"] body.client-body #app .member-rank-title { color: #52606a !important; }
html[data-theme="light"] body.client-body #app .rail-badge-count {
  background: #545c66 !important;
  color: #ffffff !important;
}
html[data-theme="light"] body.client-body #app .home-avatar-button {
  border-color: #c9d2d9 !important;
}
html[data-theme="light"] body.client-body #app :is(.new-chat, .new-chat-icon, .conversation-thumb.empty, .icon-button#collapseSidebar) {
  background: #eef1f4 !important;
  border-color: #d8dfe4 !important;
  color: #344049 !important;
}
html[data-theme="light"] body.client-body #app :is(.default-chat, .conversation-item) {
  background: transparent !important;
  color: #344049 !important;
}
html[data-theme="light"] body.client-body #app :is(.default-chat, .conversation-item):is(.active, :hover) {
  background: #e4ebef !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app :is(.conversation-label, .conversation-count) {
  color: #5d6973 !important;
}
html[data-theme="light"] body.client-body #app .home-headset-circle {
  background: #ffffff !important;
  border-color: #d8dfe4 !important;
  color: #52606a !important;
}

html[data-theme="light"] body.client-body #app .task-prompt-clamped { color: #344049 !important; }
html[data-theme="light"] body.client-body #app .task-failure-badge b {
  background: #b03246 !important;
  color: #ffffff !important;
}
html[data-theme="light"] body.client-body #app :is(#taskForm, #agentTaskForm) :is(
  .attach-button:not(.has-reference), .composer-upgrade, .generation-mode-select, .agent-model-select
) {
  background: #f0f3f5 !important;
  border-color: #d8dfe4 !important;
  color: #344049 !important;
}
html[data-theme="light"] body.client-body #app :is(#taskForm, #agentTaskForm) :is(
  .create-pill-label, .create-pill-label strong, .create-mention-pill, .composer-price,
  .composer-price-wrap, .create-pill-icon, .custom-select-chevron
) {
  color: #52606a !important;
}
html[data-theme="light"] body.client-body #app :is(#taskForm, #agentTaskForm) :is(
  .model-picker-menu, .generation-spec-panel, .custom-select-menu, .prompt-preset-menu,
  .seed-audio-settings-panel
) {
  background: #ffffff !important;
  border-color: #d8dfe4 !important;
  color: #20272d !important;
  box-shadow: 0 16px 42px rgba(25, 35, 45, .14) !important;
}
html[data-theme="light"] body.client-body #app :is(#taskForm, #agentTaskForm) :is(
  .model-picker-category-tabs, .model-picker-list, .model-picker-option
) { border-color: #d8dfe4 !important; }
html[data-theme="light"] body.client-body #app :is(#taskForm, #agentTaskForm) :is(
  .model-picker-category-tabs button.active, .model-picker-option.selected,
  .model-picker-option:hover, .custom-select-option.active, .custom-select-option:hover
) {
  background: #e4ebef !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app :is(#taskForm, #agentTaskForm) .custom-select-option.active :is(span, .ui-icon) {
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app .model-picker-category-tabs button small { opacity: 1; }
html[data-theme="light"] body.client-body #app .model-success-rate.muted { color: #52606a !important; }

html[data-theme="light"] body.client-body #app #agentTaskForm {
  background: #ffffff !important;
  border-color: #d8dfe4 !important;
  color: #20272d !important;
  box-shadow: 0 18px 44px rgba(25, 35, 45, .13) !important;
}
html[data-theme="light"] body.client-body #app #agentTaskForm .prompt-rich-editor {
  color: #20272d !important;
  caret-color: #344049 !important;
}
html[data-theme="light"] body.client-body #app #agentTaskForm .prompt-rich-editor:empty::before {
  color: #5d6973 !important;
}
html[data-theme="light"] body.client-body #app :is(.agent-chat-avatar, .agent-chat-bubble) {
  background: #e9edf0 !important;
  border-color: #d8dfe4 !important;
  color: #344049 !important;
}
html[data-theme="light"] body.client-body #app :is(.agent-chat-body > header strong, .agent-response-copy, .agent-chat-empty strong) {
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app :is(
  .agent-chat-body > header time, .agent-response-status, .agent-response-meta,
  .agent-chat-usage, .agent-loaded-skill, .agent-message-skill-line,
  .agent-skill-retention-hint, .agent-skill-retention-hint button,
  .agent-chat-thinking, .agent-chat-thinking strong, .agent-chat-thinking small
) { color: #5d6973 !important; }
html[data-theme="light"] body.client-body #app :is(.agent-response-status.is-error, .agent-chat-message.is-failed .agent-response-copy) {
  color: #b03246 !important;
}
html[data-theme="light"] body.client-body #app :is(.agent-response-action, .agent-response-more > summary, .agent-response-more > div) {
  background: #ffffff !important;
  border-color: #d8dfe4 !important;
  color: #52606a !important;
}
html[data-theme="light"] body.client-body #app .agent-response-more > div button { color: #344049 !important; }
html[data-theme="light"] body.client-body #app :is(
  .agent-response-action:hover, .agent-response-more > summary:hover,
  .agent-response-more[open] > summary, .agent-response-more > div button:hover
) { background: #e4ebef !important; color: #20272d !important; }

html[data-theme="light"] body.client-body #app .asset-stage { background: #f3f5f7 !important; }
html[data-theme="light"] body.client-body #app :is(.asset-library-header nav button, .asset-filter-bar button):hover {
  color: #20272d !important;
  background: #e4ebef !important;
}
html[data-theme="light"] body.client-body #app .asset-selection-entry.active {
  background: #e4ebef !important;
  border-color: #737d85 !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app .asset-gallery-item { background: #e9edf0; }
html[data-theme="light"] body.client-body #app .asset-gallery-media {
  background: #e9edf0;
  color: #344049;
}
html[data-theme="light"] body.client-body #app .asset-gallery-item.selected { background: #e4ebef; }
html[data-theme="light"] body.client-body #app .asset-unavailable-notice {
  background: #fff5df;
  border-color: #e4c68a;
  color: #795116;
}
html[data-theme="light"] body.client-body #app .asset-unavailable-notice :is(p, .ui-icon) { color: #795116; }
html[data-theme="light"] body.client-body #app .asset-unavailable-notice button {
  background: #ffedc6;
  border-color: #cfa965;
  color: #795116;
}
html[data-theme="light"] body.client-body #app .asset-unavailable-notice button:hover { background: #ffe3a8; }

html[data-theme="light"] body.client-body :is(input, textarea, select)::placeholder {
  color: #5d6973;
  opacity: 1;
}
html[data-theme="light"] body.client-body:has(.studio-shell) #app :is(#taskForm, #agentTaskForm) :is(
  .attach-tile-caption, .create-mention-pill, .create-toolbar-pill > span, .home-toolbar-pill,
  .generation-mode-select .custom-select-trigger-value > span
) { color: #52606a !important; }
html[data-theme="light"] body.client-body #app :is(
  .asset-batch-toolbar strong, .conversation-sidebar header > div > span,
  .conversation-item strong, .conversation-item span, .default-chat > span
) { color: #344049 !important; }
html[data-theme="light"] body.client-body #app :is(.asset-filter-bar button, .asset-sort-hint) {
  color: #52606a !important;
}
html[data-theme="light"] body.client-body #app .asset-filter-bar button.active { color: #20272d !important; }
html[data-theme="light"] body.client-body #app :is(
  .workspace-toolbar, .profile-stage, .digital-human-empty
) {
  background: #f3f5f7 !important;
  border-color: #d8dfe4 !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body #app :is(
  .invite-code-grid span, .profile-table-wrap th, .profile-publications header span,
  .video-enhancer-heading p, .video-enhancer-dropzone small, .video-enhancer-estimate,
  .video-enhancer-empty, .digital-human-empty p
) { color: #5d6973 !important; }
html[data-theme="light"] body.client-body :is(.save-asset-modal, .publish-modal) :is(header > div > span, footer > span) {
  color: #52606a !important;
}
html[data-theme="light"] body.client-body .seed-voice-library {
  --page-panel-bg: #ffffff;
  background: #ffffff;
  color: #20272d;
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] body.client-body .seed-voice-library :is(nav button, .seed-voice-name small, .seed-voice-selected small, footer > span, .seed-voice-empty) {
  opacity: 1;
  color: #52606a;
}
html[data-theme="light"] body.client-body .seed-voice-row .favorite { color: #865a16; }

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app #taskForm.prompt-composer[data-composer-surface="create"]:not(.compact):not(.maximized) .create-toolbar-pill.create-mention-pill {
  color: #52606a !important;
}
html[data-theme="light"] body.client-body #app .digital-human-empty strong { color: #20272d !important; }

html[data-theme="light"] body.client-body:has(.studio-shell) #app .reference-library-modal .reference-library-filters button,
html[data-theme="light"] body.client-body:has(.studio-shell) #app .reference-library-modal > footer > span {
  color: #52606a !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell) #app .reference-library-modal .reference-library-filters button small {
  color: #52606a !important;
  opacity: 1 !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell) #app .reference-library-modal .reference-library-filters button.active {
  background: #e4ebef !important;
  color: #20272d !important;
}
html[data-theme="light"] body.client-body:has(.studio-shell) #app .reference-library-modal .icon-button {
  color: #52606a !important;
}

/* Homepage detail-color pass.
   The shell stays charcoal/white; color is reserved for hierarchy, status,
   and small interaction cues so the page feels designed without becoming loud. */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-inspire) {
  --home-accent-cyan: #78d9e8;
  --home-accent-blue: #8faeff;
  --home-accent-violet: #c6a8ff;
  --home-accent-amber: #f1c978;
  --home-accent-green: #7bd8b4;
  --home-accent-coral: #efaa91;
  --home-accent-muted: #8e9ca9;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) {
  --home-accent-cyan: #167e9d;
  --home-accent-blue: #3868ba;
  --home-accent-violet: #7650a7;
  --home-accent-amber: #9a6818;
  --home-accent-green: #217b5d;
  --home-accent-coral: #b8573d;
  --home-accent-muted: #63727d;
}

/* Promotion strip: keep the neutral bar, then let each message carry its
   own meaning through a small accent rather than a full-color banner. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-bar {
  background: #20252b !important;
  border-bottom: 1px solid rgba(120, 217, 232, .18) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-referral-segment .announcement-red-tag {
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-recharge-text {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-box {
  border: 1px solid rgba(241, 201, 120, .28) !important;
  background: rgba(241, 201, 120, .12) !important;
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-colon,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-arrow {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-dismiss {
  color: var(--home-accent-muted) !important;
}

/* Rail accents stay quiet at rest and become clearer on hover/selection. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button:nth-child(1) > .ui-icon {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button:nth-child(2) > .ui-icon {
  color: var(--home-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button:nth-child(3) > .ui-icon {
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button:nth-child(4) > .ui-icon {
  color: var(--home-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button:hover,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button.active {
  background: rgba(120, 217, 232, .08) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button.active > span:last-child {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-button-octo .octo-icon-box {
  border-color: var(--home-accent-violet) !important;
  box-shadow: 0 0 0 3px rgba(198, 168, 255, .08) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-button-octo .octo-circle-inner,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-button-octo .octo-badge {
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-button-octo .octo-circle-inner {
  background: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-member-pill {
  border-color: rgba(241, 201, 120, .24) !important;
  background: rgba(241, 201, 120, .08) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-member-pill .member-tag-text,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-member-pill .credit-sparkle {
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-member-pill .credit-num {
  color: var(--home-ui-text) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-notification-button:hover,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-theme-button:hover {
  background: rgba(120, 217, 232, .08) !important;
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .rail-badge-count {
  border: 2px solid var(--home-surface-page) !important;
  background: var(--home-accent-coral) !important;
  color: #fff !important;
}

/* Heading and composer: the first reading path uses cyan, while the
   controls use restrained role colors to make the dense toolbar scannable. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-heading h1 {
  color: var(--home-ui-text) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .hero-mode-switch,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .hero-mode-switch > span {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .hero-mode-switch:hover {
  color: var(--home-accent-cyan) !important;
  text-shadow: 0 0 18px rgba(120, 217, 232, .24) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
  border-color: rgba(120, 217, 232, .18) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation:focus-within {
  border-color: rgba(120, 217, 232, .42) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24), 0 0 0 3px rgba(120, 217, 232, .08) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor {
  color: var(--home-ui-text) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .prompt-rich-editor:empty::before {
  color: var(--home-accent-muted) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference) {
  border-color: rgba(120, 217, 232, .3) !important;
  background: rgba(120, 217, 232, .06) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference) .ui-icon,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference)::after {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference):hover {
  border-color: var(--home-accent-cyan) !important;
  background: rgba(120, 217, 232, .12) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-options > .generation-mode-select .custom-select-trigger,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-mode-trigger {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .generation-mode-select .custom-select-trigger .ui-icon,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-mode-trigger .ui-icon,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .mode-icon-glow,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-pill-star {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .model-picker-trigger .model-picker-glyph,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-model-pill .create-pill-icon {
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .model-picker-current strong,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-model-pill .create-pill-label strong {
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .generation-spec-chip .create-pill-icon,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .generation-spec-chip strong {
  color: var(--home-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .duration-picker-trigger strong,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .duration-picker-trigger > span {
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .home-mention-button,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .create-mention-pill {
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-price strong,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-price em {
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle:not(:disabled) {
  background: linear-gradient(135deg, var(--home-accent-blue), var(--home-accent-cyan)) !important;
  border-color: transparent !important;
  color: #102027 !important;
  box-shadow: 0 6px 18px rgba(120, 217, 232, .18) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .composer-submit .home-send-circle:not(:disabled):hover {
  filter: saturate(1.08) brightness(1.06) !important;
  box-shadow: 0 8px 22px rgba(120, 217, 232, .28) !important;
}

/* Four feature cards each get one restrained identity color. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card {
  position: relative !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 16px !important;
  left: 16px !important;
  height: 2px !important;
  border-radius: 0 0 2px 2px !important;
  opacity: .9 !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, var(--home-accent-blue), transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, var(--home-accent-violet), transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, var(--home-accent-green), transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, var(--home-accent-coral), transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(1) > .home-feature-badge {
  background: rgba(143, 174, 255, .18) !important;
  color: var(--home-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(2) > .home-feature-badge {
  background: rgba(198, 168, 255, .18) !important;
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(3) > .home-feature-badge {
  background: rgba(123, 216, 180, .16) !important;
  color: var(--home-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(4) > .home-feature-badge {
  background: rgba(239, 170, 145, .16) !important;
  color: var(--home-accent-coral) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card .badge-thumb img {
  filter: saturate(1.05) contrast(1.04) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(1) p {
  color: var(--home-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(2) p {
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(3) p {
  color: var(--home-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(4) p {
  color: var(--home-accent-coral) !important;
}

/* Discovery controls: make the active tab and small metadata feel alive. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button.active {
  background: rgba(120, 217, 232, .11) !important;
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button:hover:not(.active) {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav .nav-btn-skills .tab-flame {
  color: var(--home-accent-amber) !important;
  filter: saturate(1.1) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button:nth-child(3) {
  color: var(--home-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button:nth-child(4) {
  color: var(--home-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button.active {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search:focus-within {
  border-color: rgba(120, 217, 232, .5) !important;
  box-shadow: 0 0 0 3px rgba(120, 217, 232, .1) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search > .ui-icon {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-published-link {
  color: var(--home-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-published-link:hover {
  color: var(--home-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-card-summary small {
  color: var(--home-accent-muted) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-card .social-actions button:hover,
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-card .social-actions button.active {
  color: var(--home-accent-coral) !important;
}

/* Light mode uses pale accent surfaces instead of importing the dark glow. */
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-bar {
  background: #eef4f6 !important;
  border-bottom-color: #cfe1e5 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-content,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-segment,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .platform-announcement-dismiss {
  color: #44545e !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .announcement-referral-segment .announcement-red-tag {
  border: 1px solid #ead39b !important;
  border-radius: 999px !important;
  background: #fff8e9 !important;
  color: #8a5b12 !important;
  padding: 3px 8px !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-box {
  background: #fff7e5 !important;
  border-color: #e7cc8c !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-member-pill {
  background: #fff8e9 !important;
  border-color: #ead39b !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button:hover,
html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .rail-navigation > .rail-button.active {
  background: rgba(22, 126, 157, .08) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation {
  border-color: #c9e0e5 !important;
  box-shadow: 0 10px 28px rgba(25, 35, 45, .08), 0 0 0 1px rgba(22, 126, 157, .04) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-home-generation:focus-within {
  border-color: #83bdc9 !important;
  box-shadow: 0 12px 30px rgba(25, 35, 45, .1), 0 0 0 3px rgba(22, 126, 157, .1) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference) {
  border-color: #9fcbd3 !important;
  background: #eff8f9 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-prompt-composer .attach-button:not(.has-reference):hover {
  background: #e3f3f5 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card {
  border-color: #d7e1e5 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(1) > .home-feature-badge {
  background: #e8f0ff !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(2) > .home-feature-badge {
  background: #f1eafd !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(3) > .home-feature-badge {
  background: #e7f6ef !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:nth-child(4) > .home-feature-badge {
  background: #fff0eb !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge.badge-blue :is(strong, small) {
  color: var(--home-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .home-feature-badge.badge-cyan :is(strong, small) {
  color: var(--home-accent-violet) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .inspiration-discovery-nav nav button.active {
  background: #e4f2f4 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .home-discovery-search:focus-within {
  border-color: #83bdc9 !important;
  box-shadow: 0 0 0 3px rgba(22, 126, 157, .1) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) #app .rail-badge-count {
  background: #b8573d !important;
  color: #ffffff !important;
}

/* Shared detail palette for the create, assets, and digital-human workspaces. */
html[data-theme="dark"] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) {
  --studio-accent-cyan: #78d9e8;
  --studio-accent-blue: #8faeff;
  --studio-accent-violet: #c6a8ff;
  --studio-accent-amber: #f1c978;
  --studio-accent-green: #7bd8b4;
  --studio-accent-coral: #efaa91;
  --studio-accent-muted: #99a4b0;
  --studio-rail-bg: #15191e;
  --studio-rail-line: rgba(214, 224, 232, .13);
  --studio-rail-text: #97a1ac;
  --studio-rail-hover: rgba(120, 217, 232, .08);
  --studio-rail-active: rgba(120, 217, 232, .13);
}

html[data-theme="light"] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) {
  --studio-accent-cyan: #167e9d;
  --studio-accent-blue: #3868ba;
  --studio-accent-violet: #7650a7;
  --studio-accent-amber: #9a6818;
  --studio-accent-green: #217b5d;
  --studio-accent-coral: #b8573d;
  --studio-accent-muted: #63727d;
  --studio-rail-bg: #f8f9fa;
  --studio-rail-line: #dce3e7;
  --studio-rail-text: #63727d;
  --studio-rail-hover: #eff5f6;
  --studio-rail-active: #e4f2f4;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .studio-shell > .tool-rail {
  box-sizing: border-box !important;
  width: 68px !important;
  min-width: 68px !important;
  padding: 20px 8px 16px !important;
  border-right: 1px solid var(--studio-rail-line) !important;
  background: var(--studio-rail-bg) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .studio-shell > .tool-rail .rail-logo {
  height: 78px !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .studio-shell > .tool-rail .rail-brand-spark img {
  filter: drop-shadow(0 0 7px rgba(174, 112, 8, .22)) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  gap: 3px !important;
  border-radius: 12px !important;
  color: var(--studio-rail-text) !important;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button > .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button > span:last-child {
  font-size: 11px !important;
  font-weight: 500 !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(1) > .ui-icon,
html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(1) > span:last-child {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(2) > .ui-icon,
html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(2) > span:last-child {
  color: var(--studio-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(3) > .ui-icon,
html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(3) > span:last-child {
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(4) > .ui-icon,
html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:nth-child(4) > span:last-child {
  color: var(--studio-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button:hover {
  background: var(--studio-rail-hover) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button.active {
  background: var(--studio-rail-active) !important;
  box-shadow: inset 0 0 0 1px rgba(22, 126, 157, .12) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button.active::before {
  display: none !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button.active:not(.rail-button-octo) > .ui-icon,
html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button.active:not(.rail-button-octo) > span:last-child {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button-octo .octo-icon-box {
  border-color: var(--studio-accent-violet) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-accent-violet) 10%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button-octo .octo-circle-inner {
  background: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button-octo .octo-badge {
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button-octo.active {
  background: var(--studio-rail-active) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-navigation > .rail-button-octo.active > span:not(.octo-circle-inner) {
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-member-pill {
  border-color: color-mix(in srgb, var(--studio-accent-amber) 25%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-amber) 8%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-member-pill :is(.member-tag-text, .credit-sparkle) {
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell:is(.view-create, .view-assets, .view-digitalHuman)) .rail-badge-count {
  background: var(--studio-accent-coral) !important;
  color: #fff !important;
}

/* The generation page keeps color in small controls, metadata, and states. */
html[data-theme] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] :is(.create-mode-trigger, .mode-icon-glow, .create-pill-star) {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] :is(.create-model-pill .create-pill-icon, .create-model-pill .create-pill-label strong) {
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] :is(.create-spec-pill .create-pill-icon, .create-spec-pill strong) {
  color: var(--studio-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] :is(.create-count-pill .create-pill-icon, .create-count-pill strong, .create-optimize-pill .ui-icon) {
  color: var(--studio-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] :is(.create-preset-pill .ui-icon, .composer-price, .composer-price-wrap) {
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app #taskForm[data-composer-surface="create"] :is(.create-mention-pill, .create-mention-pill .ui-icon) {
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app :is(.task-detail-label .ui-icon, .task-inline-meta .ui-icon) {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-create) #app :is(.task-inline-meta, .generation-meta small) {
  color: var(--studio-accent-muted) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app .task-status.processing {
  border-color: color-mix(in srgb, var(--studio-accent-cyan) 32%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-cyan) 10%, transparent) !important;
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app .task-status.completed {
  border-color: color-mix(in srgb, var(--studio-accent-green) 34%, transparent) !important;
  color: var(--studio-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-create) #app :is(.task-status.failed, .task-failure-badge) {
  border-color: color-mix(in srgb, var(--studio-accent-coral) 34%, transparent) !important;
  color: var(--studio-accent-coral) !important;
}

/* Asset navigation and filters share the same cool active state as the rail. */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-assets) #app :is(.asset-library-header nav button, .asset-filter-bar button) {
  color: #a0a9b3 !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-assets) #app .asset-library-header nav button.active {
  background: color-mix(in srgb, var(--studio-accent-cyan) 13%, transparent) !important;
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-assets) #app .asset-filter-bar button.active {
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--studio-accent-cyan) 10%, transparent) !important;
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-assets) #app .asset-header-actions .asset-search-field:focus-within {
  border-color: color-mix(in srgb, var(--studio-accent-cyan) 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-accent-cyan) 10%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-assets) #app .asset-date-groups section > h2::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 16px;
  margin: 0 9px 1px 0;
  border-radius: 3px;
  background: var(--studio-accent-cyan);
  vertical-align: middle;
}

html[data-theme] body.client-body:has(.studio-shell.view-assets) #app .asset-gallery-item.selected {
  box-shadow: inset 0 0 0 2px var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-assets) #app .asset-selection-entry.active {
  border-color: color-mix(in srgb, var(--studio-accent-cyan) 42%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-cyan) 12%, transparent) !important;
  color: var(--studio-accent-cyan) !important;
}

/* Digital-human panels use color only for step numbers and key information. */
html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-heading > div > span {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-price {
  border-left-color: color-mix(in srgb, var(--studio-accent-amber) 32%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-price strong {
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-workspace > .digital-human-panel:nth-child(1) > header > span {
  border-color: color-mix(in srgb, var(--studio-accent-blue) 46%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-blue) 10%, transparent) !important;
  color: var(--studio-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-workspace > .digital-human-panel:nth-child(2) > header > span {
  border-color: color-mix(in srgb, var(--studio-accent-violet) 46%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-violet) 10%, transparent) !important;
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-workspace > .digital-human-panel:nth-child(3) > header > span {
  border-color: color-mix(in srgb, var(--studio-accent-amber) 46%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-amber) 10%, transparent) !important;
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-script-meta strong {
  color: var(--studio-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-reference-target button.active {
  border-color: color-mix(in srgb, var(--studio-accent-cyan) 56%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-cyan) 12%, transparent) !important;
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-model-note strong {
  color: var(--studio-accent-violet) !important;
}

html[data-theme="dark"] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-model-note {
  border-top-color: color-mix(in srgb, var(--studio-accent-violet) 24%, transparent) !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-assets) #app :is(.asset-sort-hint, .asset-gallery-caption small) {
  color: #63727d !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-digitalHuman) #app .digital-human-price small {
  color: #7b6a49 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-create) #app :is(.task-inline-meta, .generation-meta small) {
  color: #63727d !important;
}

/* Keep the canvas library rail aligned with the other studio pages without
   touching the full-screen canvas editor. */
html[data-theme="dark"] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) {
  --studio-accent-cyan: #78d9e8;
  --studio-accent-blue: #8faeff;
  --studio-accent-violet: #c6a8ff;
  --studio-accent-amber: #f1c978;
  --studio-accent-green: #7bd8b4;
  --studio-accent-coral: #efaa91;
  --studio-accent-muted: #99a4b0;
  --studio-rail-bg: #15191e;
  --studio-rail-line: rgba(214, 224, 232, .13);
  --studio-rail-text: #97a1ac;
  --studio-rail-hover: rgba(120, 217, 232, .08);
  --studio-rail-active: rgba(120, 217, 232, .13);
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) {
  --studio-accent-cyan: #167e9d;
  --studio-accent-blue: #3868ba;
  --studio-accent-violet: #7650a7;
  --studio-accent-amber: #9a6818;
  --studio-accent-green: #217b5d;
  --studio-accent-coral: #b8573d;
  --studio-accent-muted: #63727d;
  --studio-rail-bg: #f8f9fa;
  --studio-rail-line: #dce3e7;
  --studio-rail-text: #63727d;
  --studio-rail-hover: #eff5f6;
  --studio-rail-active: #e4f2f4;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .studio-shell > .tool-rail {
  box-sizing: border-box !important;
  width: 68px !important;
  min-width: 68px !important;
  padding: 20px 8px 16px !important;
  border-right: 1px solid var(--studio-rail-line) !important;
  background: var(--studio-rail-bg) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .studio-shell > .tool-rail .rail-logo {
  height: 78px !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .studio-shell > .tool-rail .rail-brand-spark img {
  filter: drop-shadow(0 0 7px rgba(174, 112, 8, .22)) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  gap: 3px !important;
  border-radius: 12px !important;
  color: var(--studio-rail-text) !important;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button > .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button > span:last-child {
  font-size: 11px !important;
  font-weight: 500 !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button:nth-child(1) > :is(.ui-icon, span:last-child) {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button:nth-child(2) > :is(.ui-icon, span:last-child) {
  color: var(--studio-accent-blue) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button:nth-child(3) > :is(.ui-icon, span:last-child) {
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button:nth-child(4) > :is(.ui-icon, span:last-child) {
  color: var(--studio-accent-green) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button:hover {
  background: var(--studio-rail-hover) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button.active {
  background: var(--studio-rail-active) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--studio-accent-cyan) 22%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button.active::before {
  display: none !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button.active:not(.rail-button-octo) > :is(.ui-icon, span:last-child) {
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button-octo .octo-icon-box {
  border-color: var(--studio-accent-violet) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-accent-violet) 10%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button-octo .octo-circle-inner {
  background: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button-octo .octo-badge {
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-navigation > .rail-button-octo.active > span:not(.octo-circle-inner) {
  color: var(--studio-accent-violet) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-member-pill {
  border-color: color-mix(in srgb, var(--studio-accent-amber) 25%, transparent) !important;
  background: color-mix(in srgb, var(--studio-accent-amber) 8%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-member-pill :is(.member-tag-text, .credit-sparkle) {
  color: var(--studio-accent-amber) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .rail-badge-count {
  background: var(--studio-accent-coral) !important;
  color: #fff !important;
}

/* The canvas library's search toolbar belongs to the host shell. */
html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .workspace-toolbar {
  border-color: color-mix(in srgb, var(--studio-accent-cyan) 18%, var(--studio-rail-line)) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .workspace-toolbar .search-box:focus-within {
  border-color: color-mix(in srgb, var(--studio-accent-cyan) 55%, transparent) !important;
  color: var(--studio-accent-cyan) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .workspace-toolbar .search-box:focus-within input {
  color: var(--studio-rail-text) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .workspace-toolbar .toolbar-select:hover {
  background: color-mix(in srgb, var(--studio-accent-cyan) 9%, transparent) !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-canvas:not(.canvas-editor-active)) .workspace-toolbar .toolbar-select:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--studio-accent-cyan) 45%, transparent) !important;
}

/* Keep every product rail on one geometry and color system. The inspiration
   page used to carry a wider 72px rail with shorter buttons, which made the
   same navigation look like a separate component. */
html[data-theme="dark"] body.client-body:has(.studio-shell:not(.canvas-editor-active)) {
  --unified-rail-bg: #15191e;
  --unified-rail-line: rgba(214, 224, 232, .13);
  --unified-rail-text: #97a1ac;
  --unified-rail-hover: rgba(120, 217, 232, .08);
  --unified-rail-active: rgba(120, 217, 232, .13);
  --unified-rail-cyan: #78d9e8;
  --unified-rail-blue: #8faeff;
  --unified-rail-violet: #c6a8ff;
  --unified-rail-amber: #f1c978;
  --unified-rail-green: #7bd8b4;
  --unified-rail-coral: #efaa91;
}

html[data-theme="light"] body.client-body:has(.studio-shell:not(.canvas-editor-active)) {
  --unified-rail-bg: #f8f9fa;
  --unified-rail-line: #dce3e7;
  --unified-rail-text: #63727d;
  --unified-rail-hover: #eff5f6;
  --unified-rail-active: #e4f2f4;
  --unified-rail-cyan: #167e9d;
  --unified-rail-blue: #3868ba;
  --unified-rail-violet: #7650a7;
  --unified-rail-amber: #9a6818;
  --unified-rail-green: #217b5d;
  --unified-rail-coral: #b8573d;
}

html[data-theme] body.client-body .studio-shell.view-inspire {
  grid-template-columns: var(--client-rail-width) 0 minmax(0, 1fr) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) > .tool-rail {
  box-sizing: border-box !important;
  width: var(--client-rail-width) !important;
  min-width: var(--client-rail-width) !important;
  padding: 20px 8px 16px !important;
  border-right: 1px solid var(--unified-rail-line) !important;
  background: var(--unified-rail-bg) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) > .tool-rail .rail-logo {
  height: 78px !important;
}

html[data-theme] body.client-body #app .studio-shell:not(.canvas-editor-active) > .tool-rail .rail-brand-spark img {
  width: 52px !important;
  height: 36px !important;
  object-fit: contain !important;
}

html[data-theme="dark"] body.client-body #app .studio-shell:not(.canvas-editor-active) > .tool-rail .rail-brand-spark img {
  filter: drop-shadow(0 0 8px rgba(246, 190, 72, .34)) !important;
}

html[data-theme="light"] body.client-body #app .studio-shell:not(.canvas-editor-active) > .tool-rail .rail-brand-spark img {
  filter: drop-shadow(0 1px 2px rgba(126, 78, 0, .28)) drop-shadow(0 0 7px rgba(174, 112, 8, .22)) saturate(1.08) brightness(.94) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  gap: 3px !important;
  border-radius: 12px !important;
  color: var(--unified-rail-text) !important;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button > .ui-icon {
  width: 20px !important;
  height: 20px !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button > span:last-child {
  font-size: 11px !important;
  font-weight: 500 !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button[data-view="inspire"] > :is(.ui-icon, span:last-child) {
  color: var(--unified-rail-cyan) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button[data-view="create"] > :is(.ui-icon, span:last-child) {
  color: var(--unified-rail-blue) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button[data-view="music"] > :is(.ui-icon, span:last-child) {
  color: var(--unified-rail-coral) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button[data-view="assets"] > :is(.ui-icon, span:last-child) {
  color: var(--unified-rail-amber) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button[data-view="canvas"] > :is(.ui-icon, span:last-child) {
  color: var(--unified-rail-green) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button:hover {
  background: var(--unified-rail-hover) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button.active {
  background: var(--unified-rail-active) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--unified-rail-cyan) 22%, transparent) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button.active::before {
  display: none !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button.active:not(.rail-button-octo) > :is(.ui-icon, span:last-child) {
  color: var(--unified-rail-cyan) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button-octo .octo-icon-box {
  border-color: var(--unified-rail-violet) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--unified-rail-violet) 10%, transparent) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button-octo .octo-circle-inner {
  background: var(--unified-rail-violet) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button-octo .octo-badge {
  color: var(--unified-rail-violet) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button-octo.active {
  background: var(--unified-rail-active) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-navigation > .rail-button-octo.active > span:not(.octo-circle-inner) {
  color: var(--unified-rail-violet) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-member-pill {
  border-color: color-mix(in srgb, var(--unified-rail-amber) 25%, transparent) !important;
  background: color-mix(in srgb, var(--unified-rail-amber) 8%, transparent) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-member-pill :is(.member-tag-text, .credit-sparkle) {
  color: var(--unified-rail-amber) !important;
}

html[data-theme] body.client-body .studio-shell:not(.canvas-editor-active) .rail-badge-count {
  background: var(--unified-rail-coral) !important;
  color: #fff !important;
}

@media (max-width: 820px) and (min-width: 601px) {
  html[data-theme] body.client-body .studio-shell.view-inspire {
    grid-template-columns: var(--client-rail-width) minmax(0, 1fr) !important;
  }
}

/* Deep Sea Blue brand refresh for the light theme only. The dark theme keeps
   its existing gold mark and neutral navigation palette unchanged. */
@media (max-width: 600px) {
  html[data-theme] body.client-body .studio-shell.view-inspire {
    grid-template-columns: 1fr !important;
  }
}

html[data-theme="light"] body.client-body:has(.studio-shell) {
  --color-brand: #0b6fa4;
  --color-brand-strong: #075d8c;
  --color-brand-ink: #ffffff;
  --brand-border-soft: rgba(11, 111, 164, .18);
  --brand-border: rgba(11, 111, 164, .38);
  --brand-border-strong: rgba(11, 111, 164, .56);
  --brand-surface-soft: #e8f6fa;
  --brand-surface: #d9f0f5;
  --brand-surface-strong: #c9e8ef;
  --brand-surface-hover: #dceff4;
  --gradient-brand: linear-gradient(135deg, #0b6fa4, #23b5c9);
  --gradient-brand-glow: linear-gradient(135deg, rgba(11, 111, 164, .18), rgba(35, 181, 201, .14));
  --page-focus-ring: 0 0 0 3px rgba(11, 111, 164, .14);
  --client-sidebar-active: #e8f6fa;
  --client-sidebar-hover: #eff7f9;
  --client-sidebar-line: #d6e6eb;
  --client-sidebar-text: #6b7a86;
  --client-sidebar-active-text: #0b6fa4;
  --unified-rail-bg: #f8fbfc;
  --unified-rail-line: #d9e7eb;
  --unified-rail-text: #6b7a86;
  --unified-rail-hover: #eff7f9;
  --unified-rail-active: #e8f6fa;
  --unified-rail-cyan: #0b6fa4;
  --unified-rail-blue: #0b6fa4;
  --unified-rail-violet: #0b6fa4;
  --unified-rail-amber: #d98d2b;
  --unified-rail-green: #0b6fa4;
  --unified-rail-coral: #c65e4a;
  --studio-accent-cyan: #0b6fa4;
  --studio-accent-blue: #0b6fa4;
  --studio-accent-violet: #0b6fa4;
  --studio-accent-amber: #d98d2b;
  --studio-accent-green: #0b6fa4;
  --studio-accent-coral: #c65e4a;
  --studio-rail-bg: #f8fbfc;
  --studio-rail-line: #d9e7eb;
  --studio-rail-text: #6b7a86;
  --studio-rail-hover: #eff7f9;
  --studio-rail-active: #e8f6fa;
  --home-brand: #0b6fa4;
  --home-ui-action: #0b6fa4;
  --home-ui-action-hover: #075d8c;
  --home-ui-accent-surface: #e8f6fa;
  --home-accent-cyan: #0b6fa4;
  --home-accent-blue: #0b6fa4;
  --home-accent-violet: #0b6fa4;
  --home-accent-green: #0b6fa4;
}

html[data-theme="light"] body.client-body .rail-brand-spark .rail-logo-theme-dark {
  display: none !important;
}

html[data-theme="light"] body.client-body .rail-brand-spark .rail-logo-theme-light {
  display: block !important;
  filter: drop-shadow(0 2px 7px rgba(11, 111, 164, .2)) !important;
}

html[data-theme="dark"] body.client-body .rail-brand-spark .rail-logo-theme-light {
  display: none !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button {
  background: transparent !important;
  color: #6b7a86 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button > :is(.ui-icon, span:last-child) {
  color: #6b7a86 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button:hover {
  background: #eff7f9 !important;
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button:hover > :is(.ui-icon, span:last-child) {
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button.active {
  background: #e8f6fa !important;
  box-shadow: inset 0 0 0 1px rgba(11, 111, 164, .16) !important;
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button.active > :is(.ui-icon, span:last-child) {
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button .octo-icon-box {
  border-color: #0b6fa4 !important;
  box-shadow: 0 0 0 3px rgba(11, 111, 164, .09) !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button .octo-circle-inner {
  background: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button .octo-badge,
html[data-theme="light"] body.client-body #app .rail-navigation > .rail-button-octo.active > span:not(.octo-circle-inner) {
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-member-pill {
  border-color: rgba(217, 141, 43, .34) !important;
  background: #fff8e9 !important;
}

html[data-theme="light"] body.client-body #app .rail-member-pill :is(.member-tag-text, .credit-sparkle) {
  color: #d98d2b !important;
}

html[data-theme="light"] body.client-body #app .rail-theme-menu > button.active {
  background: #e8f6fa !important;
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app .rail-theme-menu > button > i {
  color: #0b6fa4 !important;
}

html[data-theme="light"] body.client-body #app :is(
  .send-button,
  .composer-compact-submit,
  .home-send-circle:not(:disabled),
  .primary-button,
  button.primary
) {
  border-color: #0b6fa4 !important;
  background: linear-gradient(135deg, #0b6fa4, #23b5c9) !important;
  color: #ffffff !important;
}

html[data-theme="light"] body.client-body #app :is(
  .send-button,
  .composer-compact-submit,
  .home-send-circle:not(:disabled),
  .primary-button,
  button.primary
):hover {
  border-color: #075d8c !important;
  background: linear-gradient(135deg, #075d8c, #168fa9) !important;
}

html[data-theme="light"] body.client-body #app :is(input, textarea, select):focus-visible {
  border-color: #0b6fa4 !important;
  box-shadow: 0 0 0 3px rgba(11, 111, 164, .14) !important;
}

/* Keep the invitation copy yellow and reserve red for its countdown. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-referral-segment .announcement-red-tag {
  color: #f1c978 !important;
  font-weight: 650 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .announcement-referral-segment .announcement-red-tag {
  border-color: #ead39b !important;
  background: #fff8e9 !important;
  color: #9a6818 !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-box {
  border-color: rgba(230, 0, 18, .42) !important;
  background: rgba(230, 0, 18, .1) !important;
  color: #e60012 !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-colon {
  color: #e60012 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-box {
  border-color: #f0c5c8 !important;
  background: #ffffff !important;
  color: #e60012 !important;
}

html[data-theme="light"] body.client-body:has(.studio-shell.view-inspire) .announcement-countdown .cd-colon {
  color: #e60012 !important;
}

/* Model badges use their own filled brand colors so the version numbers stay
   legible instead of inheriting the low-contrast translucent card accents. */
html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card.home-card-seedance:nth-child(1) > .home-feature-badge {
  background: linear-gradient(135deg, #2563eb, #22b8cf) !important;
  color: #ffffff !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card.home-card-imagepro:nth-child(2) > .home-feature-badge {
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  color: #ffffff !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card:is(
  .home-card-seedance,
  .home-card-imagepro
) > .home-feature-badge :is(strong, small) {
  color: #ffffff !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card.home-card-suno:nth-child(4) > .home-feature-badge {
  background: linear-gradient(135deg, #f97316, #db2777) !important;
  color: #ffffff !important;
}

html[data-theme] body.client-body:has(.studio-shell.view-inspire) .inspiration-feature-grid .home-feature-card.home-card-suno:nth-child(4) > .home-feature-badge .ui-icon {
  width: 20px !important;
  height: 20px !important;
}