/* Desktop visual test only. Original forms, controls, media, ordering and
   geometry remain owned by the application. The full canvas/director iframe
   has a separate document and is deliberately outside this stylesheet. */

/* Flat content surfaces replace legacy gold/purple glass themes. */
html.fy-ui-shell:not(.mobile-variant) body #root :is(.card, .surface-card, .workspace-card, .model-card, .quick-card, .metric-card, .showcase-card, .guide-card, .workflow-step, .style-preset, .source-ingest-card, .reference-route-card, .reference-resource-card) {
  color: var(--fy-ui-text, #ececec) !important;
  background: var(--fy-ui-panel, #1c1c1c) !important;
  border-color: var(--fy-ui-line, #333) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .card::before {
  background: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.page-header h1, .page-header h2, .section-title h3, .workspace-body h3, .studio-project-copy h2) {
  color: var(--fy-ui-text, #ececec) !important;
  text-shadow: none !important;
  letter-spacing: -.025em;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.page-header p, .section-title p, .workspace-body > p, .workspace-meta, .settings-hint, .credit-note, .credit-empty, .project-empty p, .price-empty) {
  color: var(--fy-ui-muted, #a3a3a3) !important;
  line-height: 1.65;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.workspace-card:hover, .model-card:hover, .quick-card:hover, .workflow-step:hover, .style-preset:hover) {
  border-color: #4a4a4a !important;
  background: #202020 !important;
  box-shadow: none !important;
  transform: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.workspace-card.current, .style-preset.active, .workflow-step.active) {
  border-color: var(--fy-ui-accent, #00a3ff) !important;
  box-shadow: inset 0 0 0 1px #00a3ff26 !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.project-library-toolbar, .credit-ledger-toolbar, .generation-settings-heading, .story-toolbar, .workspace-actions, .model-card-footer) {
  border-color: var(--fy-ui-line, #333) !important;
}

/* Generation feed and composer. No changes to height, anchoring, scroll logic
   or menus positioned by JS. In particular .reference-mention-menu.above keeps
   its functional translateY(-100%) from the original stylesheet. */
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-page, .custom-chat-feed, .custom-generation-main, .custom-generation-page) {
  background: var(--fy-ui-bg, #141414) !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-result-bubble, .custom-generation-workspace, .custom-result-item) {
  color: var(--fy-ui-text, #ececec) !important;
  background: var(--fy-ui-panel, #1c1c1c) !important;
  border: 1px solid var(--fy-ui-line, #333) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-user-bubble {
  background: #192630 !important;
  border-color: #27445a !important;
  border-radius: 12px 4px 12px 12px !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-user-bubble p, .custom-chat-result-bubble > header b) {
  color: var(--fy-ui-text, #ececec) !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-user-bubble small, .custom-chat-result-bubble > header span, .custom-chat-result-bubble > header time, .custom-shortcut, .custom-drag-tip, .custom-result-copy p) {
  color: var(--fy-ui-muted, #a3a3a3) !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-result-bubble > header {
  background: #202020 !important;
  border-bottom-color: var(--fy-ui-line, #333) !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-welcome {
  color: var(--fy-ui-muted, #a3a3a3) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-welcome > span {
  color: var(--fy-ui-accent, #00a3ff) !important;
  background: #19242c !important;
  border-color: #294355 !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-welcome p {
  color: var(--fy-ui-muted, #a3a3a3) !important;
  font-size: 13px;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell {
  background: var(--fy-ui-bg, #141414) !important;
  border-top-color: #262626 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell .custom-composer {
  background: var(--fy-ui-panel, #1c1c1c) !important;
  border-color: #3a3a3a !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px #0000001f !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell .custom-composer:focus-within {
  border-color: #587586 !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell .custom-composer.drag-active {
  border-color: var(--fy-ui-accent, #00a3ff) !important;
  box-shadow: 0 0 0 2px #00a3ff26 !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-composer-parameters {
  background: #191919 !important;
  border-bottom-color: var(--fy-ui-line, #333) !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-composer-parameters label, .generation-model-picker) {
  background: #242424 !important;
  border-color: #353535 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-composer-parameters label:focus-within, .generation-model-picker:focus-within) {
  background: #292929 !important;
  border-color: var(--fy-ui-accent, #00a3ff) !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.generation-model-picker-label, .custom-composer-parameters label > span) {
  color: var(--fy-ui-muted, #a3a3a3) !important;
  font-size: 10px;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.generation-model-picker-name, .custom-composer-parameters select) {
  color: var(--fy-ui-text, #ececec) !important;
  font-size: 12px;
  font-weight: 600;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell .custom-cost {
  color: #83ccf5 !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell .reference-prompt-editor,
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-composer-shell .reference-prompt-editor:focus {
  color: var(--fy-ui-text, #ececec) !important;
  background: transparent !important;
  outline: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .reference-prompt-editor:empty::before {
  color: #858585 !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-attachment {
  background: #242424 !important;
  border-color: #383838 !important;
  border-radius: 7px;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-attachment b { color: #dedede !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-attachment small { color: #a3a3a3; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-attachment > span { color: #8bcfff; background: #191919; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-attachment > button { color: #aaa; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-attachment > button:hover { color: #ff9ba7; }
html.fy-ui-shell:not(.mobile-variant) body #root .reference-prompt-chip {
  color: #d9e6ee !important;
  background: #26343f !important;
  border-color: #3c5568 !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .reference-prompt-chip.video { background: #1f3041 !important; border-color: #355d82 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .reference-prompt-chip.audio { background: #302b3e !important; border-color: #5b506f !important; }

/* Portaled model and reference menus keep existing geometry and stacking. */
html.fy-ui-shell:not(.mobile-variant) body :is(.generation-model-picker-menu, .reference-mention-menu) {
  color: var(--fy-ui-text, #ececec) !important;
  background: #202020 !important;
  border: 1px solid #404040 !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 48px #0006 !important;
  backdrop-filter: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.generation-model-picker-group + .generation-model-picker-group, .reference-mention-menu > header) {
  background: transparent !important;
  border-color: var(--fy-ui-line, #333) !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.generation-model-picker-group > div > button, .reference-mention-groups button) {
  color: var(--fy-ui-text, #ececec) !important;
  background: #262626 !important;
  border-color: #353535 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.generation-model-picker-group > div > button:hover, .reference-mention-groups button:hover) {
  background: #303030 !important;
  border-color: #505050 !important;
  transform: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body .generation-model-picker-group > div > button.selected {
  background: #1b3443 !important;
  border-color: var(--fy-ui-accent, #00a3ff) !important;
  box-shadow: inset 3px 0 var(--fy-ui-accent, #00a3ff) !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.generation-model-option-main b, .generation-model-picker-group > header b, .reference-mention-menu > header b) { color: #e4e4e4 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.generation-model-picker-group > header span, .generation-model-picker-group-toggle span, .reference-mention-menu > header span, .reference-mention-groups section > span, .reference-mention-groups button small) { color: #a3a3a3 !important; }
html.fy-ui-shell:not(.mobile-variant) body .generation-model-picker-group > header > .generation-model-picker-group-toggle { background: transparent !important; border-color: transparent !important; }
html.fy-ui-shell:not(.mobile-variant) body .generation-model-picker-group > header > .generation-model-picker-group-toggle:hover { background: #292929 !important; }

/* Form surfaces, not layout or validation logic. Hidden file inputs stay hidden. */
html.fy-ui-shell:not(.mobile-variant) body :is(.field, .mini-field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
html.fy-ui-shell:not(.mobile-variant) body :is(.project-search input, .profile-name-field input, .fy-auth-field input, .fy-redeem-input, .fy-motion-settings select, .story-toolbar select) {
  color: var(--fy-ui-text, #ececec) !important;
  background: #151515 !important;
  border-color: #3a3a3a !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.field, .mini-field, .profile-name-field, .fy-auth-field) > span,
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-field label { color: #c3c3c3 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.field, .mini-field, .fy-auth-field, .profile-name-field) :is(input, textarea)::placeholder { color: #818181 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.field, .mini-field, .profile-name-field, .fy-auth-field) :is(input, textarea, select):focus,
html.fy-ui-shell:not(.mobile-variant) body .fy-redeem-input:focus {
  border-color: var(--fy-ui-accent, #00a3ff) !important;
  box-shadow: 0 0 0 3px #00a3ff1a !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.custom-composer-parameters, .field, .mini-field, .fy-motion-settings) :is(option, optgroup) { color: #e6e6e6 !important; background: #242424 !important; }

/* Page tabs remain neutral except the existing selected state. */
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-mode-switch, .segmented, .reference-type-tabs, .shot-filter-tabs, .custom-chat-mode-tabs) {
  background: #191919 !important;
  border-color: #353535 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-mode-switch, .segmented, .reference-type-tabs, .shot-filter-tabs, .custom-chat-mode-tabs) button {
  color: #a3a3a3 !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-mode-switch, .segmented, .reference-type-tabs, .shot-filter-tabs, .custom-chat-mode-tabs) button.active {
  color: #ececec !important; background: #303030 !important; border-color: #484848 !important; box-shadow: inset 0 -2px var(--fy-ui-accent, #00a3ff) !important;
}

/* Account, ledger, pricing and checkout. Amounts/statuses are never hidden;
   QR images keep their original white backgrounds and rendering untouched. */
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-balance-card, .credit-account-card, .credit-ledger-card, .recharge-checkout-card, .recharge-orders-card, .price-group, .video-price-group) {
  background: var(--fy-ui-panel, #1c1c1c) !important;
  border-color: var(--fy-ui-line, #333) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .credit-balance-card > strong { color: #f4f4f4 !important; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-balance-card > span, .credit-account-card span, .recharge-section-heading small, .recharge-order-item small, .credit-table-row small) { color: #a3a3a3 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-table-head, .job-table-head) { background: #242424 !important; color: #b5b5b5 !important; border-color: #353535 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-table-row, .job-table-row, .price-model, .video-price-model, .price-group > header, .video-price-group > header) { border-color: #303030 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-table-row:hover, .job-table-row:hover, .price-model:hover, .video-price-model:hover) { background: #232323 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-table-row > span, .price-model small, .video-price-model small) { color: #b1b1b1 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.price-resolution, .video-price-resolution) { color: #bdbdbd !important; background: #242424 !important; border-color: #3b3b3b !important; border-radius: 7px !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.price-resolution > b, .video-price-resolution > b) { color: #8ed1f6 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-security-note { background: #1c2824 !important; border-color: #355247 !important; border-radius: 9px !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-security-note > strong { color: #82d6b2 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-security-note > span { color: #e4ece8 !important; letter-spacing: normal; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.recharge-plan-card, .recharge-channel-list button, .recharge-order-item) {
  color: #dedede !important; background: #242424 !important; border-color: #3a3a3a !important; border-radius: 9px !important; box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.recharge-plan-card:hover, .recharge-channel-list button:hover) { background: #2a2a2a !important; border-color: #555 !important; transform: none !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.recharge-plan-card.selected, .recharge-channel-list button.selected) {
  color: #e4f3ff !important; background: #1a3241 !important; border-color: var(--fy-ui-accent, #00a3ff) !important; box-shadow: inset 0 0 0 1px #00a3ff33 !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.recharge-plan-card.selected, .recharge-channel-list button.selected) * { color: #e4f3ff !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-plan-card :is(strong, b) { color: #f0f0f0 !important; font-variant-numeric: tabular-nums; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-plan-card :is(span, i) { color: #b5b5b5 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-plan-card em { color: #83ddba !important; border-color: #3c6656 !important; background: #1e332b !important; border-radius: 5px; }
html.fy-ui-shell:not(.mobile-variant) body #root .recharge-submit-panel { background: #191919 !important; border-color: #383838 !important; border-radius: 9px !important; }

/* Shared dialogs, profile and software settings. Retain sizes, positioning,
   close controls, content order and all original open/closed state behavior. */
html.fy-ui-shell:not(.mobile-variant) body :is(.reference-modal-backdrop, .modal-backdrop, .app-dialog-backdrop, .platform-dialog-backdrop, .task-error-dialog-backdrop, .recharge-payment-overlay, .fy-redeem-modal) {
  background: #0000009e !important;
  backdrop-filter: blur(4px) !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.reference-modal, .confirm-modal, .app-confirm-dialog, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .task-error-dialog, .recharge-payment-dialog, .fy-redeem-card) {
  color: var(--fy-ui-text, #ececec) !important;
  background: #1c1c1c !important;
  border: 1px solid #414141 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 64px #0008 !important;
  backdrop-filter: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.media-settings-modal, .profile-settings-modal, .platform-dialog) > :is(header, footer) { background: transparent !important; border-color: #333 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.media-settings-modal, .profile-settings-modal, .platform-dialog) :is(h2, h3),
html.fy-ui-shell:not(.mobile-variant) body :is(.reference-modal-header h3, .app-confirm-dialog h3, .fy-redeem-head h3, .recharge-payment-dialog h2) { color: #ededed !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.media-settings-modal > header span, .profile-settings-modal > header span, .platform-dialog > header small, .recharge-payment-kicker) { color: #79c9f9 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.media-settings-modal > header p, .profile-settings-modal > header p, .media-settings-tip, .profile-name-field small, .fy-motion-settings small, .fy-motion-settings p, .reference-modal-header p, .app-confirm-dialog > p, .fy-redeem-head p, .fy-redeem-hint, .recharge-payment-hint) { color: #ababab !important; line-height: 1.65; }
html.fy-ui-shell:not(.mobile-variant) body :is(.software-project-location, .media-update-row, .fy-motion-settings, .fy-redeem-user, .recharge-payment-summary span) { background: #242424 !important; border-color: #383838 !important; border-radius: 9px !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.software-project-location b, .fy-motion-settings b, .media-update-row b) { color: #e5e5e5 !important; }
html.fy-ui-shell:not(.mobile-variant) body .software-project-location small { color: #aaa !important; }
html.fy-ui-shell:not(.mobile-variant) body .profile-avatar-picker { color: #86d0fd !important; background: #263039 !important; border-color: #4c616f !important; box-shadow: none !important; }
html.fy-ui-shell:not(.mobile-variant) body .profile-avatar-picker span { color: #f0f0f0 !important; background: #000b !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.reference-modal-header > button, .profile-settings-modal > header > button, .media-settings-modal > header > button, .platform-dialog > header > button, .recharge-payment-close, .fy-redeem-close) {
  color: #bcbcbc !important; background: #262626 !important; border-color: #414141 !important; border-radius: 8px !important; box-shadow: none !important;
}

/* Login and redemption use the same graphite surfaces. Original branding and
   CAPTCHA/QR/avatar images are never recolored, cropped or resized here. */
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-shell { color: #ececec !important; background: #141414 !important; }
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-brand { background: #1c1c1c !important; border-color: #333 !important; }
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-panel { background: #141414 !important; }
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-card { color: #ececec !important; background: #1c1c1c !important; border-color: #3b3b3b !important; border-radius: 12px !important; box-shadow: 0 16px 48px #0004 !important; }
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-features > span { background: #242424 !important; border-color: #383838 !important; border-radius: 9px !important; box-shadow: none !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.desktop-login-brand h1, .desktop-login-copy h2, .desktop-login-heading b, .desktop-login-features b) { color: #ececec !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.desktop-login-brand > p, .desktop-login-copy p, .desktop-login-heading span, .desktop-login-features small) { color: #aaa !important; }
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-features i { color: #80cfff !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-overlay { background: #141414 !important; color: #ececec !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-overlay::before { background: none !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-shell { background: #1c1c1c !important; border-color: #3b3b3b !important; border-radius: 16px !important; box-shadow: 0 24px 72px #0005 !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-brand { background: #202020 !important; border-right-color: #333 !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-brand::after { color: #ffffff03 !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-main { background: #1c1c1c !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-main h2, .fy-auth-brand h1) { color: #ededed !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-subtitle, .fy-auth-brand-copy > p:last-of-type, .fy-auth-feature, .fy-auth-field-help, .fy-auth-remember, .fy-auth-link, .fy-auth-logo-row span) { color: #aaa !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-eyebrow, .fy-auth-link:hover) { color: #7acbf8 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-tabs, .fy-auth-register-guide, .fy-auth-captcha-image) { background: #151515 !important; border-color: #383838 !important; box-shadow: none !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-tab { color: #a3a3a3 !important; background: transparent !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-auth-tab.is-active { color: #f0f0f0 !important; background: #303030 !important; box-shadow: inset 0 -2px var(--fy-ui-accent, #00a3ff) !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-submit, .fy-redeem-submit),
html.fy-ui-shell:not(.mobile-variant) body #root .custom-send-button {
  color: #fff !important; background: #0079bf !important; border-color: #00a3ff !important; box-shadow: none !important; border-radius: 9px !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-submit:hover:not(:disabled), .fy-redeem-submit:hover:not(:disabled)),
html.fy-ui-shell:not(.mobile-variant) body #root .custom-send-button:hover:not(:disabled) { background: #0876b8 !important; filter: none !important; transform: none !important; }
html.fy-ui-shell:not(.mobile-variant) body .fy-code-button { color: #9bd8ff !important; background: #1b303e !important; border-color: #345c77 !important; }

/* Actions are scoped to page/dialog content, never the application shell.
   Keep primary, neutral and destructive actions visually distinguishable. */
html.fy-ui-shell:not(.mobile-variant) body :is(.page-header, .card, .workspace-card, .project-library, .custom-chat-page, .custom-generation-page, .desktop-login-card, .reference-modal, .confirm-modal, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .recharge-payment-dialog) :is(.button, button.primary, button.secondary),
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-task-actions, .custom-upload-actions) > button {
  color: #dedede !important;
  background: #282828 !important;
  border-color: #444 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.page-header, .card, .workspace-card, .project-library, .custom-chat-page, .custom-generation-page, .desktop-login-card, .reference-modal, .confirm-modal, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .recharge-payment-dialog) :is(.button, button.primary, button.secondary):hover:not(:disabled),
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-task-actions, .custom-upload-actions) > button:hover:not(:disabled) {
  color: #f4f4f4 !important; background: #333 !important; border-color: #626262 !important; transform: none !important; scale: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.page-header, .card, .workspace-card, .project-library, .custom-chat-page, .custom-generation-page, .desktop-login-card, .reference-modal, .confirm-modal, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .recharge-payment-dialog) :is(.button.primary, button.primary):not(.danger) {
  color: #fff !important; background: #0079bf !important; border-color: #00a3ff !important; box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.page-header, .card, .workspace-card, .project-library, .custom-chat-page, .custom-generation-page, .desktop-login-card, .reference-modal, .confirm-modal, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .recharge-payment-dialog) :is(.button.primary, button.primary):not(.danger):hover:not(:disabled) {
  color: #fff !important; background: #0876b8 !important; border-color: #52c0ff !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.page-header, .card, .workspace-card, .project-library, .custom-chat-page, .custom-generation-page, .desktop-login-card, .reference-modal, .confirm-modal, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .recharge-payment-dialog) .button.danger,
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-task-actions > button:not([class]) {
  color: #ffadb5 !important; background: #3a2228 !important; border-color: #76444d !important; box-shadow: none !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.page-header, .card, .workspace-card, .project-library, .custom-chat-page, .custom-generation-page, .desktop-login-card, .reference-modal, .confirm-modal, .project-create-modal, .resource-editor-modal, .media-settings-modal, .profile-settings-modal, .platform-dialog, .recharge-payment-dialog) .button.danger:hover:not(:disabled),
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-task-actions > button:not([class]):hover:not(:disabled) {
  color: #ffdce0 !important; background: #502c34 !important; border-color: #bb6b79 !important;
}

/* Remove the final gold generation accents while retaining billing text and
   capability labels. The original SVG was globally hidden by legacy CSS. */
html.fy-ui-shell:not(.mobile-variant) body .generation-billing-badge.per-use { color: #9bd8ff !important; background: #1b303e !important; border-color: #345c77 !important; box-shadow: none !important; }
html.fy-ui-shell:not(.mobile-variant) body .generation-billing-badge.per-second { color: #91dfc7 !important; background: #1e332b !important; border-color: #3c6656 !important; box-shadow: none !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-composer-toolbar { border-top-color: #333 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-welcome > span > .pixel-icon {
  display: inline-block !important; width: 22px !important; height: 22px !important; color: #80cfff !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-welcome > span > .pixel-icon svg {
  display: block !important; width: 100% !important; height: 100% !important; filter: none !important;
}

/* Semantic colors intentionally follow surface overrides so danger, success,
   credit changes and validation do not get flattened into neutral gray. */
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-positive, .completed, .custom-chat-result-bubble > footer span.completed) { color: #76d9b0 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root :is(.credit-negative, .failed, .form-error, .custom-chat-failure b, .custom-chat-result-bubble > footer span.failed) { color: #ff96a3 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-result-bubble.failed { border-color: #68343c !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-failure p { color: #dba2aa !important; overflow-wrap: anywhere; }
html.fy-ui-shell:not(.mobile-variant) body :is(.custom-composer-error, .cloud-feedback.error, .profile-settings-error, .media-settings-error, .reference-modal-error, .fy-auth-message.is-error, .fy-redeem-result.is-error, .task-error-dialog-message, .recharge-payment-status.failed) { color: #ff9ba8 !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.custom-composer-error, .cloud-feedback.error, .media-settings-error, .fy-auth-message.is-error, .fy-redeem-result.is-error) { background: #382127 !important; border-color: #71404a !important; }
html.fy-ui-shell:not(.mobile-variant) body .desktop-login-error { color: #ff9ba8 !important; background: #382127 !important; border-color: #71404a !important; }
html.fy-ui-shell:not(.mobile-variant) body :is(.cloud-feedback.success, .fy-auth-message.is-success, .fy-redeem-result.is-success, .fy-auth-captcha-passed) { color: #8be1bb !important; background: #20362b !important; border-color: #3b654f !important; }
html.fy-ui-shell:not(.mobile-variant) body .task-error-dialog-sigil { color: #ff8f9c !important; background: #38252a !important; border-color: #76444d !important; box-shadow: none !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-progress > div { color: #b9b9b9 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-progress > div b { color: #e1e1e1 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-progress > i { background: #353535 !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-progress > i u { background: var(--fy-ui-accent, #00a3ff) !important; background-image: none !important; }
html.fy-ui-shell:not(.mobile-variant) body #root .custom-chat-progress.is-video-pulsing > div b::before { background: var(--fy-ui-accent, #00a3ff) !important; box-shadow: none !important; }

/* Keyboard focus and restrained feedback. Never disable pointer events or
   animate layout/size/position. Existing model-arrow and menu placement remain. */
html.fy-ui-shell:not(.mobile-variant) body :is(.custom-chat-page, .card, .page-header, .project-library, .reference-modal, .profile-settings-modal, .media-settings-modal, .platform-dialog, .desktop-login-shell, .fy-auth-overlay, .fy-redeem-modal, .recharge-payment-dialog, .generation-model-picker-menu, .reference-mention-menu) :is(button, input, textarea, select, a, [contenteditable="true"]):focus-visible {
  outline: 2px solid #57bdff !important;
  outline-offset: 2px !important;
}
html.fy-ui-shell:not(.mobile-variant) body :is(.custom-chat-page, .card, .page-header, .project-library, .reference-modal, .profile-settings-modal, .media-settings-modal, .platform-dialog, .desktop-login-shell, .fy-auth-overlay, .fy-redeem-modal, .recharge-payment-dialog) :is(button, input, textarea, select):disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-task-actions > button, .custom-upload-button, .recharge-plan-card, .workspace-card),
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-submit, .fy-redeem-submit, .generation-model-picker-group > div > button) {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}
html.fy-ui-shell:not(.mobile-variant) body #root :is(.custom-chat-task-actions > button, .custom-upload-button, .recharge-plan-card, .workspace-card):is(:hover, :active),
html.fy-ui-shell:not(.mobile-variant) body :is(.fy-auth-submit, .fy-redeem-submit, .generation-model-picker-group > div > button):is(:hover, :active) {
  transform: none !important;
  scale: none !important;
}

/* Project storage location controls. The native layer validates and persists
   the selected folder; this surface only exposes the narrow choose/reset APIs. */
.software-settings-modal .fy-project-location-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -5px 2px 1px;
  color: #9d9d9d;
  font-size: 11px;
  line-height: 1.55;
}
.software-settings-modal .fy-project-location-detail > p {
  min-width: 0;
  margin: 0;
}
.software-settings-modal .fy-project-location-detail[data-state="error"] > p {
  color: #ff9ba8;
}
.software-settings-modal .fy-project-location-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}
.software-settings-modal .fy-project-location-meta > b {
  color: #7ccfff;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.software-settings-modal .fy-project-location-reset {
  appearance: none;
  border: 0;
  padding: 0;
  color: #a9dfff;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.software-settings-modal .fy-project-location-reset:hover:not(:disabled) {
  color: #e4f6ff;
}
.software-settings-modal .fy-project-location-reset[hidden] {
  display: none !important;
}
@media (max-width: 620px) {
  .software-settings-modal .software-project-location {
    gap: 10px;
  }
  .software-settings-modal .software-project-location small {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .software-settings-modal .fy-project-location-detail {
    align-items: flex-start;
    flex-direction: column;
  }
  .software-settings-modal .fy-project-location-meta {
    width: 100%;
    justify-content: space-between;
  }
}