/* Shared night palette. This layer deliberately owns color, not page geometry.
   Important declarations in a named layer precede legacy unlayered !important
   rules, including lazy Vue styles. Media pixels and editor color values are
   excluded: QR codes, pictures, videos, masks and user artwork keep their color. */
@layer night-theme {
  html[data-theme="dark"] {
    color-scheme: dark !important;
    --night-ground: #080a0e;
    --night-surface: #20252e;
    --night-raised: #2b3340;
    --night-inset: #161b22;
    --night-hover: #364253;
    --night-line: #485568;
    --night-control-line: #748399;
    --night-ink: #f2f4f8;
    --night-soft: #d1d8e3;
    --night-muted: #b0bccd;
    --night-accent: #ed985e;
    --night-accent-hover: #ffb27c;
    --night-on-accent: #24170e;
    --night-accent-soft: #403024;
    --night-success: #85dfb5;
    --night-success-bg: #173b30;
    --night-danger: #ffacb5;
    --night-danger-bg: #45252e;
    --night-warning: #f6d38b;
    --night-warning-bg: #3d3120;
    --night-info: #acd2ff;
    --night-info-bg: #233b57;
    background: var(--night-ground) !important;
  }

  html[data-theme="dark"],
  html[data-theme="dark"] body {
    --main-bg: var(--night-ground) !important;
    --main-surface: var(--night-surface) !important;
    --main-surface-soft: var(--night-raised) !important;
    --panel-bg: var(--night-surface) !important;
    --panel-muted: var(--night-raised) !important;
    --panel-inset: var(--night-inset) !important;
    --card-bg: var(--night-surface) !important;
    --bg: var(--night-ground) !important;
    --surface: var(--night-surface) !important;
    --subtle: var(--night-raised) !important;
    --text: var(--night-ink) !important;
    --text-main: var(--night-ink) !important;
    --text-soft: var(--night-soft) !important;
    --text-muted: var(--night-muted) !important;
    --ink: var(--night-ink) !important;
    --soft: var(--night-soft) !important;
    --muted: var(--night-muted) !important;
    --line: var(--night-line) !important;
    --line-strong: var(--night-control-line) !important;
    --border: var(--night-line) !important;
    --primary: var(--night-accent) !important;
    --primary-dark: var(--night-accent-hover) !important;
    --primary-light: var(--night-accent-hover) !important;
    --primary-hover: var(--night-accent-hover) !important;
    --primary-soft: var(--night-accent-soft) !important;
    --primary-glow: #ed985e24 !important;
    --success: var(--night-success) !important;
    --success-soft: var(--night-success-bg) !important;
    --warning: var(--night-warning) !important;
    --warning-soft: var(--night-warning-bg) !important;
    --danger: var(--night-danger) !important;
    --danger-soft: var(--night-danger-bg) !important;
    --notice-bg: var(--night-raised) !important;
    --notice-border: var(--night-line) !important;
    --sidebar-bg: #181d25 !important;
    --sidebar-surface: var(--night-raised) !important;
    --sidebar-border: var(--night-line) !important;
    --sidebar-text: var(--night-muted) !important;
    --sidebar-text-hover: var(--night-ink) !important;
    --sidebar-text-active: var(--night-accent-hover) !important;
    --sidebar-accent: var(--night-accent) !important;
    --sidebar-accent-glow: var(--night-accent-soft) !important;
    --cxai-ink: var(--night-ink) !important;
    --cxai-line: var(--night-line) !important;
    --cxai-surface: var(--night-surface) !important;
    --cxai-accent: var(--night-accent) !important;
    --shadow-card: 0 1px 0 #ffffff0a, 0 8px 24px #00000035 !important;
    --shadow: 0 8px 28px #00000040 !important;
    --shadow-lg: 0 18px 48px #00000066 !important;
    color-scheme: dark !important;
    color: var(--night-ink) !important;
  }

  html[data-theme="dark"] body,
  html[data-theme="dark"] .main-area {
    background: var(--night-ground) !important;
  }
  html[data-theme="dark"] body::before,
  html[data-theme="dark"] body::after { background: none !important; }
  html[data-theme="dark"] body.page-app .main-area { background: transparent !important; }

  /* Existing outer containers stay in their original position and dimensions. */
  html[data-theme="dark"] body:is(.page-shop, .page-ucenter, .page-records, .page-gallery,
    .page-invite, .page-credits, .page-earnings, .page-api-tokens, .page-agent-platform,
    .page-tenant-console, .page-agent-cards, .page-card-products) .main-area > main,
  html[data-theme="dark"] body:is(.page-shop, .page-ucenter, .page-records, .page-gallery,
    .page-invite, .page-credits, .page-earnings, .page-api-tokens, .page-agent-platform,
    .page-tenant-console, .page-agent-cards, .page-card-products) .main-area > [data-frontend-entry] > main {
    background: #181d25 !important;
    border-color: var(--night-line) !important;
    color: var(--night-ink) !important;
    backdrop-filter: none !important;
  }

  /* Content panels: one step above the page, with a visible edge. */
  html[data-theme="dark"] :is(.card-v3, .page-hd, .stat-card, .media-card,
    .package-card, .credits-stat, .credits-item, .table-wrap, .empty-state,
    .cxai-native-item, .cxai-native-balance, .home-console, .home-project-thread,
    .home-feature-card, .home-workflow-card, .home-workflow-copy,
    .home-showcase-main, .home-public-gallery-card, .home-featured-orbit-card,
    .feedback-form, .feedback-policy, .feedback-item, .feedback-detail-main,
    .feedback-message, .feedback-supplement, .agent-project-card, .agent-project-bar,
    .agent-project-dialog-card, .agent-workspace-nav, .uc-hero, .uc-card, .uc-panel,
    .uc-section, .uc-stat-card, .uc-overview-card, .uc-profile-card,
    .card-product-card, .card-product-manager-agent, .shop-package, .shop-panel,
    .shop-card, .shop-section, .shop-card-product, .shop-storage-card,
    .api-test-card, .creation-sidebar, .creation-topbar, .creation-message > div,
    .chat-main, .chat-sidebar, .chat-topbar, .chat-input-area, .chat-msg-body,
    .video-native-reference, .audio-result, .video-result) {
    background: var(--night-surface) !important;
    color: var(--night-ink) !important;
    border-color: var(--night-line) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="dark"] :is(.home-workflow-copy, .card-v3-body, .record-dialog-body,
    .redeem-form, .creation-main, .creation-thread, .chat-messages) {
    color: var(--night-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] :is(.card-v3-head, .record-dialog-head, .record-dialog-foot,
    .home-console-head, .redeem-head, .table-v3 th, .table-wrap th,
    .media-card-body, .record-list-header, .home-public-gallery-card-footer,
    .home-public-gallery-card-meta, .agent-project-info, .feedback-tabs,
    .uc-section-head, .uc-card-head, .uc-profile-form, .uc-field-row) {
    background: var(--night-raised) !important;
    border-color: var(--night-line) !important;
    color: var(--night-soft) !important;
  }

  /* The homepage title and mode picker float separately above the prompt card. */
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-console-head {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Only the body paints the composer card; the outer wrapper is structural. */
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-console {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-console-body {
    background: var(--night-surface) !important;
    box-shadow: var(--shadow-card) !important;
    isolation: isolate;
  }
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-console-body::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: transparent;
    box-shadow:
      -22px -7px 42px -8px #68bbdf4a,
      24px -10px 44px -9px #ed985e47,
      0 17px 38px -10px #ed985e29;
    opacity: .4;
    animation: home-composer-breathe 6s ease-in-out infinite alternate;
  }
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-console:focus-within .home-console-body::before {
    animation-play-state: paused;
  }
  @media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] body.page-app:not(.page-admin):has(.home-atmosphere[data-paused="true"]) .home-console-body::before {
      animation-play-state: paused;
    }
  }
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-prompt-shell {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body.page-app:not(.page-admin) .home-prompt-shell:focus-within {
    box-shadow: 0 0 0 2px #ed985e24 !important;
  }
  html[data-theme="dark"] body.page-app:not(.page-admin) #homePrompt {
    background: transparent !important;
  }

  /* A 40 x 26px disclosure pill sits below the Logo inside its click target. */
  html[data-theme="dark"] body.has-unified-workbench .home-logo-navigation {
    --home-logo-menu-offset: calc(var(--home-logo-mark-size) + 42px);
    height: calc(var(--home-logo-mark-size) + 34px) !important;
  }
  html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-toggle {
    box-sizing: border-box;
    height: calc(var(--home-logo-mark-size) + 34px) !important;
    padding: 0 0 34px !important;
  }
  html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-mark::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: calc(100% + 4px);
    left: calc(50% - 20px);
    z-index: 0;
    width: 40px;
    height: 26px;
    border: 1px solid #ed985e78;
    border-radius: 999px;
    background: var(--night-raised);
    box-shadow: 0 0 12px #ed985e36;
    opacity: .72;
    animation: home-logo-disclosure-breathe 3.2s ease-in-out infinite alternate;
  }
  html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-chevron {
    top: calc(100% + 4px) !important;
    left: calc(50% - 13px) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1;
    width: 26px !important;
    height: 26px !important;
    padding: 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--night-accent-hover) !important;
    stroke-width: 2.4;
    opacity: .72;
    animation: home-logo-disclosure-breathe 3.2s ease-in-out infinite alternate;
  }
  html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-panel {
    top: var(--home-logo-menu-offset) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - var(--home-logo-menu-offset) - 16px) !important;
  }
  @media (max-width: 720px) {
    html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-panel {
      max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - var(--home-logo-menu-offset) - 84px - env(safe-area-inset-bottom)) !important;
    }
  }
  @keyframes home-logo-disclosure-breathe {
    from { opacity: .65; }
    to { opacity: 1; }
  }
  @keyframes home-composer-breathe {
    from { opacity: .32; }
    to { opacity: .64; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-mark::after,
    html[data-theme="dark"] body.has-unified-workbench .home-logo-nav-chevron,
    html[data-theme="dark"] body.page-app:not(.page-admin) .home-console-body::before {
      animation: none !important;
    }
  }

  /* Form controls remain visibly separate from both the panel and page. */
  html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
    background: var(--night-inset) !important;
    color: var(--night-ink) !important;
    border-color: var(--night-control-line) !important;
    caret-color: var(--night-accent) !important;
    color-scheme: dark !important;
  }
  html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--night-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme="dark"] :is(select option, select optgroup) {
    background: var(--night-inset) !important;
    color: var(--night-ink) !important;
  }
  html[data-theme="dark"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--night-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--night-inset) inset !important;
  }
  html[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--night-accent) !important;
  }
  html[data-theme="dark"] :is(.home-prompt-shell, .chat-input-wrap, .record-full-prompt,
    .record-detail-grid > div, .record-error, .content-slot, .history-empty-inline,
    .edit-upload-box, .feedback-file, .creation-history-item, .home-capability-group,
    .home-model-menu-option, .api-test-result, .api-test-models span,
    .agent-project-document-cover, .agent-project-stats-cover, .agent-project-status,
    .uc-form, .uc-form-row, .uc-info-row, .uc-security-item, .uc-social-item) {
    background: var(--night-inset) !important;
    color: var(--night-soft) !important;
    border-color: var(--night-line) !important;
  }
  html[data-theme="dark"] :is(.home-prompt-shell, .chat-input-wrap) {
    border: 1px solid var(--night-control-line) !important;
  }
  html[data-theme="dark"] :is(.home-prompt-shell, .chat-input-wrap, .home-console):focus-within {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px #ed985e24 !important;
  }

  /* Floating surfaces have their own opaque plane; dimming belongs to backdrops. */
  html[data-theme="dark"] :is(.record-dialog-panel, .redeem-panel, .jpt-layer-panel,
    .jpt-toast, .home-contact-dialog, .home-article-panel, .home-prompt-modal-panel,
    .home-tool-popover, .home-mode-picker-menu, .home-model-menu,
    .creation-history-menu, .record-action-dropdown, .theme-menu, .home-logo-nav-panel,
    .native-auth-panel, .agent-project-card-menu, .agent-project-more > div,
    .designer-modal-panel, .canvas-modal-panel, .cxai-modal-panel,
    .confirm-dialog, .card-product-dialog, .shop-dialog, .site-auth-panel) {
    background: var(--night-raised) !important;
    color: var(--night-ink) !important;
    border: 1px solid var(--night-control-line) !important;
    box-shadow: 0 24px 80px #000000a6 !important;
    backdrop-filter: none !important;
  }
  html[data-theme="dark"] :is(.native-auth-modal, .home-contact-backdrop, .modal-backdrop,
    .record-dialog-overlay, .jpt-layer-mask, .designer-modal-backdrop, .cxai-modal-backdrop) {
    background: #040609b8 !important;
  }
  html[data-theme="dark"] dialog::backdrop { background: #040609b8 !important; }

  /* Neutral and primary actions have different fills and legible labels. */
  html[data-theme="dark"] :is(.btn, .home-mode-tabs button, .home-compact-tool-button,
    .home-file-tool, .home-prompt-expand, .home-prompt-polish, .home-mode-picker-trigger,
    .home-cost-hint, .home-prompt-resize-handle, .home-featured-orbit-arrow,
    .home-marketplace-type-nav button, .home-gallery-tag-nav button,
    .home-contact-details button, .home-contact-close, .record-dialog-close,
    .record-action-trigger, .creation-history-menu button, .record-action-dropdown button,
    .chat-model-pill, .chat-suggestion, .site-auth-close, .native-auth-social button,
    .native-auth-code-row button, .uc-btn, .uc-btn-secondary, .api-test-copy,
    .agent-workspace-nav-item, .agent-project-actions a, .agent-project-dialog-card button) {
    background: var(--night-raised) !important;
    color: var(--night-soft) !important;
    border-color: var(--night-control-line) !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] :is(.btn-primary, .home-prompt-send, .chat-send-btn,
    .native-auth-primary, .uc-btn-primary, .agent-project-create,
    .agent-project-dialog-card .is-primary, .feedback-submit-actions button,
    .feedback-supplement button, .shop-purchase-btn, .shop-buy-btn) {
    background: var(--night-accent) !important;
    color: var(--night-on-accent) !important;
    border-color: var(--night-accent) !important;
    text-shadow: none !important;
  }
  html[data-theme="dark"] :is(.btn-primary, .home-prompt-send, .chat-send-btn,
    .native-auth-primary, .uc-btn-primary) :is(span, svg, strong) { color: inherit !important; }
  html[data-theme="dark"] :is(.btn-primary, .home-prompt-send, .chat-send-btn,
    .native-auth-primary, .uc-btn-primary):hover:not(:disabled) {
    background: var(--night-accent-hover) !important;
  }
  html[data-theme="dark"] :is(.home-mode-tabs button.active, .home-model-menu-option.is-selected,
    .home-marketplace-type-nav button.active, .home-gallery-tag-nav button.active,
    .chat-model-pill.active, .agent-workspace-nav-item.active, .feedback-tabs .is-active) {
    background: var(--night-accent-soft) !important;
    color: var(--night-accent-hover) !important;
    border-color: var(--night-accent) !important;
  }
  html[data-theme="dark"] :is(.btn, .uc-btn, .home-compact-tool-button,
    .home-file-tool, .home-featured-orbit-arrow):hover:not(:disabled):not(.btn-primary):not(.uc-btn-primary) {
    background: var(--night-hover) !important;
    color: var(--night-ink) !important;
  }
  html[data-theme="dark"] :is(button, input, select, textarea, a, summary):focus-visible {
    outline: 2px solid var(--night-accent-hover) !important;
    outline-offset: 3px !important;
  }

  /* Text that was painted directly onto the previous white surfaces. */
  html[data-theme="dark"] :is(.page-hd, .card-v3, .home-contact-dialog, .native-auth-panel,
    .home-article-panel, .record-dialog-panel, .uc-page, .feedback-page,
    .cxai-native-page, .home-console, .home-workflow-copy, .home-section-title,
    .creation-topbar, .creation-message, .chat-main, .shop-page, .page-admin) :is(h1, h2, h3, h4, legend) {
    color: var(--night-ink) !important;
    text-shadow: none !important;
  }
  html[data-theme="dark"] .sidebar-nav-section {
    color: var(--night-muted) !important;
  }
  html[data-theme="dark"] :is(.uc-avatar, .uc-avatar-preview, .uc-action-primary,
    .uc-action-primary .uc-action-icon, .home-prompt-send, #homeGenerateButton,
    #homeGenerateButton.home-prompt-send) {
    background: var(--night-accent) !important;
    color: var(--night-on-accent) !important;
    border-color: var(--night-accent) !important;
  }
  html[data-theme="dark"] :is(.uc-avatar, .uc-avatar-preview, .uc-action-primary,
    .uc-action-primary .uc-action-icon, .home-prompt-send, #homeGenerateButton,
    #homeGenerateButton.home-prompt-send) :is(span, svg) {
    color: var(--night-on-accent) !important;
  }
  html[data-theme="dark"] :is(.uc-status, .uc-bind-state.is-bound, .uc-social-state.is-bound) {
    background: var(--night-success-bg) !important;
    color: var(--night-success) !important;
    border-color: #3c8869 !important;
  }
  html[data-theme="dark"] :is(.uc-balance-icon, .uc-balance-icon.invite) {
    background: var(--night-info-bg) !important;
    color: var(--night-info) !important;
  }
  html[data-theme="dark"] :is(.home-public-gallery-media, .gallery-card-media,
    .media-placeholder, .home-gallery-native-media) {
    background: var(--night-inset) !important;
    color: var(--night-muted) !important;
  }
  html[data-theme="dark"] body.page-creation .creation-workspace {
    background: var(--night-ground) !important;
    color: var(--night-ink) !important;
    border-color: var(--night-line) !important;
  }
  html[data-theme="dark"] body.page-creation :is(.creation-type-badge,
    .creation-history-entry .creation-history-item, .creation-room-heading,
    .creation-history-title-line) {
    color: var(--night-soft) !important;
    border-color: var(--night-line) !important;
  }
  html[data-theme="dark"] body.page-creation .creation-type-badge {
    background: var(--night-info-bg) !important;
    color: var(--night-info) !important;
  }
  html[data-theme="dark"] body.page-creation :is(.creation-sidebar-head a,
    .creation-sidebar-head button, .creation-sidebar-head .btn) {
    background: var(--night-raised) !important;
    color: var(--night-soft) !important;
    border-color: var(--night-control-line) !important;
  }
  html[data-theme="dark"] body.page-creation #homePromptSend,
  html[data-theme="dark"] body.page-creation #homeGenerateButton,
  html[data-theme="dark"] body.page-creation .home-prompt-send {
    background: var(--night-accent) !important;
    color: var(--night-on-accent) !important;
    border-color: var(--night-accent) !important;
  }
  html[data-theme="dark"] body.page-creation #homePromptSend :is(span, svg),
  html[data-theme="dark"] body.page-creation #homeGenerateButton :is(span, svg),
  html[data-theme="dark"] body.page-creation .home-prompt-send :is(span, svg) {
    color: var(--night-on-accent) !important;
  }
  html[data-theme="dark"] :is(.sub, .hint, .field-hint, .field > label, .field > span,
    .cxai-native-field, .cxai-creation-controls label, .home-tool-popover-head,
    .home-capability-group-head, .home-model-fields label, .home-console-footer,
    .home-feature-card small, .home-workflow-copy > span, .home-feature-kicker,
    .home-contact-lead, .home-contact-qr-caption, .home-contact-details strong,
    .home-contact-call, .home-contact-empty, .native-auth-head p, .native-auth-form label,
    .native-auth-social > span, .native-auth-switch, .record-detail-grid dt,
    .home-public-gallery-state, .home-featured-orbit-state) {
    color: var(--night-muted) !important;
    text-shadow: none !important;
  }
  html[data-theme="dark"] :is(.home-contact-details > a, .home-contact-details > div) {
    background: var(--night-surface) !important;
    border-color: var(--night-line) !important;
    color: var(--night-ink) !important;
  }
  html[data-theme="dark"] :is(.wechat-contact) {
    background: linear-gradient(135deg, #1b332d, #202a34) !important;
    border-color: #3c8068 !important;
    color: var(--night-ink) !important;
    box-shadow: var(--shadow-card) !important;
  }
  html[data-theme="dark"] :is(.wechat-contact-copy .eyebrow, .wechat-contact-copy strong,
    .wechat-contact-copy p, .wechat-contact-copy p span, .wechat-contact-phone,
    .wechat-contact-code, .external-card-shop-mark) {
    color: var(--night-soft) !important;
  }
  html[data-theme="dark"] :is(.wechat-contact-code, .wechat-contact-phone) {
    background: var(--night-inset) !important;
    border-color: #3c8068 !important;
  }
  html[data-theme="dark"] :is(.wechat-contact-button) {
    background: #2cad6a !important;
    border-color: #2cad6a !important;
    color: #07170e !important;
  }
  html[data-theme="dark"] :is(.wechat-contact--auth) {
    background: linear-gradient(135deg, #102a25, #182a37) !important;
  }
  html[data-theme="dark"] :is(.pkg-promotion, .shop-promotion, .promotion-badge) {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger) !important;
    border-color: #a45867 !important;
  }
  html[data-theme="dark"] :is(.native-auth-links button, .native-auth-switch button,
    .native-auth-head > span, .home-workflow-copy > strong, .home-feature-card strong) {
    color: var(--night-accent-hover) !important;
  }
  html[data-theme="dark"] :is(.native-auth-links button, .native-auth-switch button) { background: transparent !important; }

  /* Agent catalog, introduction, history and all task workspaces share the palette. */
  html[data-theme="dark"] :is(.ag-center, .af-workspace, .cxai-agent-workbench,
    .eis-workspace, .story-workspace, .asset-workspace, .video-cleaner-workbench,
    .video-prompt-workbench, .viral-video-workbench) {
    --af-ink: var(--night-ink) !important;
    --af-muted: var(--night-muted) !important;
    --af-edge: var(--night-line) !important;
    --af-panel: var(--night-surface) !important;
    --ag-border: var(--night-line) !important;
    --ag-muted: var(--night-muted) !important;
    --cxai-ink: var(--night-ink) !important;
    --cxai-line: var(--night-line) !important;
    --cxai-surface: var(--night-surface) !important;
    --eis-border: var(--night-line) !important;
    --eis-text: var(--night-ink) !important;
    --eis-muted: var(--night-muted) !important;
    color: var(--night-ink) !important;
    background-color: var(--night-ground) !important;
  }
  html[data-theme="dark"] .af-ambience { background: var(--night-ground) !important; }
  html[data-theme="dark"] :is(.cxai-agent-catalog, .cxai-agent-catalog-card,
    .cxai-agent-introduction, .cxai-agent-project-bar, .cxai-agent-project-card,
    .cxai-agent-tool-panel, .workspace-panel, .workspace-band, .storyboard-workbench,
    .storyboard-panel, .eis-band, .eis-submit-band, .video-cleaner-panel,
    .video-prompt-panel, .viral-panel, .cxai-agent-file-slot,
    .cxai-agent-file-list article, .cxai-agent-choice-field, .cxai-agent-check-field,
    .eis-asset, .eis-presets > button, .asset-card, .result-card, .queue-card,
    .af-catalog-card, .af-project-card, .af-project-create, .af-intro-card) {
    background: var(--night-surface) !important;
    color: var(--night-ink) !important;
    border-color: var(--night-line) !important;
    box-shadow: var(--shadow-card) !important;
  }
  html[data-theme="dark"] .ag-center :is(h1, h2, h3, h4, h5, strong, legend,
    .cxai-agent-project-agent-name, .cxai-agent-project-status) { color: var(--night-ink) !important; }
  html[data-theme="dark"] .ag-center :is(p, small, dt, label, li,
    .field-label, .field > span, .eis-field > span) { color: var(--night-muted) !important; }
  html[data-theme="dark"] :is(.cxai-agent-dropzone, .document-upload, .eis-upload-button,
    .video-cleaner-empty, .video-prompt-empty, .viral-video-empty, .output-empty,
    .cxai-agent-result-empty, .cxai-agent-choice-field label, .cxai-agent-check-field label,
    .cxai-agent-stage-list li, .flow-steps li, .video-cleaner-agent-rail b,
    .video-prompt-agent-rail b, .viral-agent-rail b) {
    background: var(--night-inset) !important;
    color: var(--night-muted) !important;
    border-color: var(--night-control-line) !important;
  }
  html[data-theme="dark"] .ag-center :is(button, .eis-upload-button,
    .video-cleaner-upload-button span, .video-prompt-upload-button span, .viral-video-upload span) {
    background: var(--night-raised) !important;
    color: var(--night-soft) !important;
    border-color: var(--night-control-line) !important;
  }
  html[data-theme="dark"] .ag-center :is(button, .eis-upload-button):hover:not(:disabled) {
    background: var(--night-hover) !important;
    color: var(--night-ink) !important;
  }
  html[data-theme="dark"] .ag-center :is(.cxai-button, .primary-button, .eis-button-primary,
    .video-cleaner-submit, .smart-tool-submit, .smart-tool-actions .primary,
    .af-primary, .cxai-agent-section-create, .cxai-agent-project-create) {
    background: var(--night-accent) !important;
    color: var(--night-on-accent) !important;
    border-color: var(--night-accent) !important;
  }
  html[data-theme="dark"] .ag-center :is(.flow-steps li.active,
    .video-prompt-agent-rail .is-active b, .video-cleaner-agent-rail .is-active b,
    .viral-agent-rail .is-active b, .cxai-agent-stage-list b, button.is-selected) {
    background: var(--night-accent-soft) !important;
    color: var(--night-accent-hover) !important;
    border-color: var(--night-accent) !important;
  }

  /* Canvas UI panels only. No rule targets canvas pixels, media or text artwork. */
  html[data-theme="dark"] :is(.designer-canvas-stage, .designer-canvas-viewport) {
    background-color: var(--night-ground) !important;
  }
  html[data-theme="dark"] :is(.designer-topbar, .designer-toolbar, .designer-tools,
    .designer-inspector, .designer-panel, .designer-context-menu, .designer-project-panel,
    .designer-project-gate, .designer-project-dialog, .designer-auxiliary-panel,
    .designer-assistant-panel, .designer-templates-panel, .designer-inspiration-panel,
    .designer-node-card:not(.is-media-presentation-node), .designer-generation-workbench,
    .designer-text-workbench, .designer-selection-toolbar, .designer-media-node-toolbar,
    .designer-reference-picker, .designer-model-menu, .designer-node-preset-menu,
    .canvas-panel, .canvas-toolbar, .canvas-context-menu) {
    color: var(--night-ink) !important;
    background: var(--night-surface) !important;
    border-color: var(--night-control-line) !important;
    box-shadow: var(--shadow-lg) !important;
  }

  /* Public documentation and setup bypass the shared PHP shell. */
  html[data-theme="dark"] :is(.docs-topbar, .docs-sidebar, .docs-sidebar-footer,
    .docs-callout, .docs-endpoint, .docs-steps li > span, .docs-tags span,
    .docs-table th, .docs-search kbd, .docs-menu-button, .box) {
    background: var(--night-surface) !important;
    color: var(--night-soft) !important;
    border-color: var(--night-line) !important;
  }
  html[data-theme="dark"] :is(.docs-content, .docs-brand-link, .docs-content h1,
    .docs-content h2, .docs-steps strong, .docs-billing strong) { color: var(--night-ink) !important; }
  html[data-theme="dark"] :is(.docs-base code, .docs-action-link, .docs-nav-group a,
    .docs-model-id code, .docs-table td, .docs-table code, .docs-endpoint code,
    .docs-nav-group h2, .docs-nav-group a code, .docs-copy-button, .box p) { color: var(--night-muted) !important; }
  html[data-theme="dark"] :is(.docs-nav-group a.active, .docs-nav-group a:hover) {
    background: var(--night-accent-soft) !important;
    color: var(--night-accent-hover) !important;
  }
  html[data-theme="dark"] :is(.docs-model-meta span, .docs-endpoint > span) {
    background: var(--night-info-bg) !important;
    color: var(--night-info) !important;
  }

  /* State colors use dark tints and bright text, never pale notification blocks. */
  html[data-theme="dark"] :is(.alert, .generation-notice, .cost-hint,
    .api-test-state, .status-badge, .feedback-status, .native-auth-message,
    .badge-balance, .home-gallery-refreshing span) {
    background: var(--night-raised) !important;
    color: var(--night-soft) !important;
    border-color: var(--night-line) !important;
  }
  html[data-theme="dark"] :is(.alert-success, .cxai-native-success,
    .status-badge.succeeded, .status-badge.completed, .status-badge.active,
    .feedback-status.is-adopted, .api-test-state.is-success, .agent-project-status.is-completed,
    .agent-project-status.is-running, .docs-callout.success, .uc-status-ok, .uc-badge-success,
    .uc-profile-progress) {
    background: var(--night-success-bg) !important;
    color: var(--night-success) !important;
    border-color: #3c8869 !important;
  }
  html[data-theme="dark"] :is(.alert-danger, .alert-error, .status-badge.failed,
    .api-test-state.is-error, .native-auth-message.is-error, .agent-project-status.is-failed) {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger) !important;
    border-color: #a45867 !important;
  }
  html[data-theme="dark"] :is(.alert-warning, .status-badge.queued,
    .status-badge.pending, .docs-callout.warning, .agent-project-status.is-draft) {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning) !important;
    border-color: #8f713b !important;
  }
  html[data-theme="dark"] :is(.alert-info, .status-badge.running,
    .api-test-state.is-running, .feedback-status.is-received) {
    background: var(--night-info-bg) !important;
    color: var(--night-info) !important;
    border-color: #4d7caa !important;
  }
  html[data-theme="dark"] :is(.btn-danger, .is-danger, .text-danger, .required,
    .agent-project-expiry-warning, .agent-project-retention.is-urgent) { color: var(--night-danger) !important; }
  html[data-theme="dark"] :is(.btn-danger) { background: var(--night-danger-bg) !important; }
  html[data-theme="dark"] :is(button, input, select, textarea):disabled {
    color: #a0adbf !important;
    border-color: var(--night-line) !important;
    opacity: .7 !important;
  }
  html[data-theme="dark"] :is(.btn-primary, .home-prompt-send, .chat-send-btn,
    .native-auth-primary, .uc-btn-primary):disabled {
    background: var(--night-raised) !important;
  }
  html[data-theme="dark"] body :is(#homeGenerateButton, #homePromptSend, .home-prompt-send):disabled {
    background: var(--night-raised) !important;
    color: #a0adbf !important;
    border-color: var(--night-line) !important;
  }
  html[data-theme="dark"] body :is(#homeGenerateButton, #homePromptSend, .home-prompt-send):disabled :is(span, svg) {
    color: #a0adbf !important;
  }
  html[data-theme="dark"] :is(.designer-project-gate-empty, .designer-project-gate-head span) {
    color: var(--night-muted) !important;
  }
  html[data-theme="dark"] .home-gallery-refreshing { background: #101216b3 !important; }
  html[data-theme="dark"] .mobile-bottom-nav {
    background: var(--night-surface) !important;
    border-color: var(--night-control-line) !important;
    box-shadow: 0 -6px 24px #00000050 !important;
  }
}