/* Desktop Account shell — layout and interaction geometry. Visual ownership: design-system/adapters/account-page-theme.css. */ /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Shared runtime subscription visual contract for Account + Payments. */ body[data-page="account"] .aidc-subscription-summary, body[data-page="payments"] .aidc-subscription-summary{background:var(--aidc-bg-elevated)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-text-secondary)!important} body[data-page="account"] .aidc-subscription-heading, body[data-page="payments"] .aidc-subscription-heading, body[data-page="account"] .aidc-subscription-text, body[data-page="payments"] .aidc-subscription-text{color:var(--aidc-text-primary)!important} body[data-page="account"] .aidc-subscription-label, body[data-page="payments"] .aidc-subscription-label{color:var(--aidc-text-muted)!important} body[data-page="account"] .aidc-subscription-notice--warning, body[data-page="payments"] .aidc-subscription-notice--warning{background:var(--aidc-status-warning-bg)!important;border-color:var(--aidc-status-warning-border)!important;color:var(--aidc-status-warning-text)!important} body[data-page="account"] .aidc-subscription-notice--warning *, body[data-page="payments"] .aidc-subscription-notice--warning *{color:inherit!important} body[data-page="account"] .aidc-subscription-notice--success, body[data-page="payments"] .aidc-subscription-notice--success{background:var(--aidc-status-success-bg)!important;border-color:var(--aidc-status-success-border)!important;color:var(--aidc-status-success)!important} body[data-page="account"] .aidc-subscription-notice--success *, body[data-page="payments"] .aidc-subscription-notice--success *{color:inherit!important} body[data-page="account"] .aidc-subscription-notice--danger, body[data-page="payments"] .aidc-subscription-notice--danger{background:var(--aidc-status-danger-bg)!important;border-color:var(--aidc-action-danger-border)!important;color:var(--aidc-red-500)!important} body[data-page="account"] .aidc-subscription-notice--neutral, body[data-page="payments"] .aidc-subscription-notice--neutral{background:var(--aidc-btn-secondary-bg)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-text-secondary)!important} body[data-page="account"] .aidc-subscription-referral, body[data-page="payments"] .aidc-subscription-referral{background:color-mix(in srgb,var(--aidc-violet-500) 8%,var(--aidc-bg-card) 92%)!important;border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent)!important;color:var(--aidc-text-secondary)!important} body[data-page="account"] .aidc-subscription-referral *, body[data-page="payments"] .aidc-subscription-referral *{color:inherit!important} body[data-page="account"] .aidc-subscription-action--secondary, body[data-page="payments"] .aidc-subscription-action--secondary{background:var(--aidc-btn-secondary-bg)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-text-primary)!important} body[data-page="account"] .aidc-subscription-action--secondary:hover, body[data-page="payments"] .aidc-subscription-action--secondary:hover{background:var(--aidc-btn-secondary-bg-hover)!important;border-color:var(--aidc-border-strong)!important} body:has(.account-layout) .section-card details, body:has(.account-layout) .section-card details > summary{color:var(--aidc-text-secondary)!important} body:has(.account-layout) .section-card details > summary:hover, body:has(.account-layout) .section-card details[open] > summary{color:var(--aidc-text-primary)!important} /* The bridge cannot reliably classify every legacy inline fragment because old account builds used several literal variants. Root-scoped light rules make the entire runtime subscription block safe even when a new literal appears. */ html[data-aidc-color-mode="light"] body[data-page="account"] :is([data-subscription-panel],#pay-subscription-block), html[data-aidc-color-mode="light"] body[data-page="payments"] :is([data-subscription-panel],#pay-subscription-block){ background:var(--aidc-bg-card)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important; box-shadow:none!important } html[data-aidc-color-mode="light"] body[data-page="account"] :is([data-subscription-panel],#pay-subscription-block) :where(p,span,div,small,li):not(.aidc-subscription-notice--warning *):not(.aidc-subscription-notice--success *), html[data-aidc-color-mode="light"] body[data-page="payments"] :is([data-subscription-panel],#pay-subscription-block) :where(p,span,div,small,li):not(.aidc-subscription-notice--warning *):not(.aidc-subscription-notice--success *){ color:var(--aidc-text-secondary)!important } html[data-aidc-color-mode="light"] body[data-page="account"] :is([data-subscription-panel],#pay-subscription-block) :where(b,strong,h2,h3,h4), html[data-aidc-color-mode="light"] body[data-page="payments"] :is([data-subscription-panel],#pay-subscription-block) :where(b,strong,h2,h3,h4){color:var(--aidc-text-primary)!important} html[data-aidc-color-mode="light"] body[data-page="account"] :is([data-subscription-panel],#pay-subscription-block) :where(a,button):not(.btn-danger-outline), html[data-aidc-color-mode="light"] body[data-page="payments"] :is([data-subscription-panel],#pay-subscription-block) :where(a,button):not(.btn-danger-outline){ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:none!important } /* Desktop Account visual adapter. */ body:has(.account-layout){ background:var(--aidc-bg-account-page)!important; color:var(--aidc-text-primary)!important } body:has(.account-layout) .panel{ background:var(--aidc-bg-panel)!important; border-color:var(--aidc-border-default)!important; box-shadow:none!important } body:has(.account-layout) .section-card, body:has(.account-layout) .session-card, body:has(.account-layout) .user-card{ background:var(--aidc-bg-card)!important; border-color:var(--aidc-border-default)!important; box-shadow:none!important } body:has(.account-layout) .account-layout>section.panel{ background:transparent!important; border-color:transparent!important; box-shadow:none!important } body:has(.account-layout) .account-layout.account-layout--wrapped>section.panel.account-route-panel{ background:var(--aidc-bg-panel)!important; border-color:var(--aidc-border-default)!important; box-shadow:none!important } body:has(.account-layout) .panel h2, body:has(.account-layout) .section-card h3, body:has(.account-layout) .auth-status, body:has(.account-layout) .sessions-title, body:has(.account-layout) .user-name{ color:var(--aidc-text-primary)!important } body:has(.account-layout) .panel p, body:has(.account-layout) .muted, body:has(.account-layout) .auth-hint, body:has(.account-layout) .auth-meta, body:has(.account-layout) .sessions-sub, body:has(.account-layout) .sessions-group__title, body:has(.account-layout) .session-meta, body:has(.account-layout) .sessions-empty, body:has(.account-layout) .field label, body:has(.account-layout) .user-meta, body:has(.account-layout) .note{ color:var(--aidc-text-muted)!important } body:has(.account-layout) .side-nav .nav-item{color:var(--aidc-text-secondary)!important} body:has(.account-layout) .side-nav .nav-item:hover, body:has(.account-layout) .side-nav .nav-item:focus-visible{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important; outline:none } body:has(.account-layout) .side-nav .nav-item.active, body:has(.account-layout) .side-nav .nav-item.is-active{ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-text-primary)!important } body:has(.account-layout) .nav-icon{color:var(--aidc-text-muted)!important} body:has(.account-layout) .nav-item.active .nav-icon, body:has(.account-layout) .nav-item.is-active .nav-icon{color:var(--aidc-action-primary-from)!important} body:has(.account-layout) .account-layout *{scrollbar-color:var(--aidc-scrollbar-thumb) transparent!important} body:has(.account-layout) .account-layout *::-webkit-scrollbar-track{background:transparent!important} body:has(.account-layout) .account-layout *::-webkit-scrollbar-thumb{background:var(--aidc-scrollbar-thumb)!important} body[data-page="account"]{scrollbar-width:thin;scrollbar-color:var(--aidc-scrollbar-thumb) var(--aidc-bg-page)} body[data-page="account"]::-webkit-scrollbar{width:8px} body[data-page="account"]::-webkit-scrollbar-track{background:var(--aidc-bg-page)} body[data-page="account"]::-webkit-scrollbar-thumb{background:var(--aidc-scrollbar-thumb);border:2px solid var(--aidc-bg-page);border-radius:var(--aidc-radius-pill)} body:has(.account-layout) .avatar-lg, body:has(.account-layout) .auth-avatar{background:var(--aidc-bg-elevated)!important;color:var(--aidc-text-primary)!important;box-shadow:0 0 0 2px var(--aidc-border-default)!important} body:has(.account-layout) .pill, body:has(.account-layout) .auth-client, body:has(.account-layout) .session-badge{background:var(--aidc-btn-secondary-bg)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-text-secondary)!important} body:has(.account-layout) .input{background:var(--aidc-bg-elevated)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-text-primary)!important} body:has(.account-layout) .input:focus{border-color:var(--aidc-action-focus)!important;box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important} body:has(.account-layout) .btn-primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important; border:1px solid transparent!important; color:var(--aidc-text-inverse)!important; box-shadow:0 0 18px var(--aidc-action-primary-glow)!important } body:has(.account-layout) .btn-primary:hover, body:has(.account-layout) .btn-primary:focus-visible{filter:brightness(1.08)!important;box-shadow:0 0 24px var(--aidc-action-primary-glow)!important;outline:none} body:has(.account-layout) .btn-ghost{background:var(--aidc-btn-secondary-bg)!important;border-color:var(--aidc-border-default)!important;color:var(--aidc-text-secondary)!important} body:has(.account-layout) .btn-ghost:hover, body:has(.account-layout) .btn-ghost:focus-visible{background:var(--aidc-btn-secondary-bg-hover)!important;border-color:var(--aidc-border-strong)!important;color:var(--aidc-text-primary)!important;outline:none} body:has(.account-layout) .btn-danger-outline{background:var(--aidc-status-danger-bg)!important;border-color:var(--aidc-action-danger-border)!important;color:var(--aidc-red-500)!important} body:has(.account-layout) .btn-danger-outline:hover, body:has(.account-layout) .btn-danger-outline:focus-visible{background:color-mix(in srgb,var(--aidc-red-500) 16%,transparent)!important;border-color:var(--aidc-red-500)!important;outline:none} body:has(.account-layout) .auth-row, body:has(.account-layout) .session-card{color:var(--aidc-text-secondary)!important} body:has(.account-layout) .session-current{color:var(--aidc-green-500)!important} body:has(.account-layout) .user-card{background:color-mix(in srgb,var(--aidc-violet-500) 6%,var(--aidc-bg-card) 94%)!important} body:has(.account-layout) .user-card:hover{border-color:color-mix(in srgb,var(--aidc-cyan-500) 45%,transparent)!important;box-shadow:none!important} body[data-page="account"] .toggle{background:var(--aidc-btn-secondary-bg-hover)!important;border:1px solid var(--aidc-border-default)!important} body[data-page="account"] .toggle::after{background:var(--aidc-text-primary)!important} body[data-page="account"] .toggle.on{background:color-mix(in srgb,var(--aidc-action-primary-from) 16%,var(--aidc-bg-card))!important;border-color:var(--aidc-workspace-selection-border)!important} body[data-page="account"] [data-pwa-install-card]{background:color-mix(in srgb,var(--aidc-cyan-500) 6%,var(--aidc-bg-card) 94%)!important;border-color:color-mix(in srgb,var(--aidc-cyan-500) 22%,transparent)!important} /* Light account hierarchy: the route canvas is visibly grey, content cards are lighter, and secondary copy stays readable instead of fading toward white. */ html[data-aidc-color-mode="light"] body:has(.account-layout) .account-layout.account-layout--wrapped>section.panel.account-route-panel{ background:color-mix(in srgb,var(--aidc-bg-page) 72%,var(--aidc-bg-elevated) 28%)!important; border-color:var(--aidc-border-default)!important } html[data-aidc-color-mode="light"] body:has(.account-layout) .panel{ background:color-mix(in srgb,var(--aidc-bg-panel) 62%,var(--aidc-bg-elevated) 38%)!important } html[data-aidc-color-mode="light"] body:has(.account-layout) .section-card, html[data-aidc-color-mode="light"] body:has(.account-layout) .session-card, html[data-aidc-color-mode="light"] body:has(.account-layout) .user-card{ background:var(--aidc-bg-card)!important; border-color:var(--aidc-border-default)!important } html[data-aidc-color-mode="light"] body:has(.account-layout) :where(.panel p,.muted,.auth-hint,.auth-meta,.sessions-sub,.sessions-group__title,.session-meta,.sessions-empty,.field label,.user-meta,.note){ color:var(--aidc-text-secondary)!important } html[data-aidc-color-mode="light"] body:has(.account-layout) .btn-primary{ background:color-mix(in srgb,var(--aidc-action-primary-from) 9%,var(--aidc-bg-card) 91%)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 58%,transparent)!important; color:var(--aidc-action-primary-to)!important; box-shadow:none!important; filter:none!important } html[data-aidc-color-mode="light"] body:has(.account-layout) .btn-primary:hover, html[data-aidc-color-mode="light"] body:has(.account-layout) .btn-primary:focus-visible{ background:color-mix(in srgb,var(--aidc-action-primary-from) 15%,var(--aidc-bg-card) 85%)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 74%,transparent)!important; color:var(--aidc-action-primary-to)!important; box-shadow:none!important; filter:none!important } /* Route visuals migrated from assets/css/account-shell.css; geometry remains in that stylesheet. */ body:has(.account-layout) .account-layout.account-layout--wrapped>section.panel.account-route-panel { background:var(--aidc-bg-panel)!important; box-shadow:var(--aidc-shadow-popover)!important; } body.admin-dashboard-page .account-route-panel>.wrap>.panel { background:var(--aidc-bg-panel)!important; box-shadow:none!important; } body.admin-dashboard-page .account-route-panel>.wrap>.panel .card { background:var(--aidc-bg-card)!important; } /* A quieter account hierarchy: the route content is the primary surface; nested sections must not all compete with equal borders and shadows. */ body[data-page="account"] .account-route-panel .section-card { box-shadow:none!important; } /* Account home: use a concise dashboard hierarchy instead of a tall stack of unrelated full-width slabs. */ @media(min-width:1100px) { body[data-page="account"] .account-layout>section.panel:has([data-auth-card]) { background:transparent!important; box-shadow:none!important; } } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Shared light-mode contract for every desktop Account route. Route-specific adapters may add status semantics but should not need to restate basic text, field and primary-action contrast. */ html[data-aidc-color-mode="light"] body:has(.account-layout) { color: var(--aidc-text-primary) !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where( .panel-title,.section-title,.page-title,.card-title,.sessions-title, h1,h2,h3,h4,legend ) { color: var(--aidc-text-primary) !important; opacity: 1 !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where( .panel-sub,.muted,.note,.hint,.helper-text,.field-hint,.description,.caption, .auth-hint,.auth-meta,.session-meta,.sessions-sub,.sessions-group__title, .user-meta,.ref-note,.ref-form-label,.ref-stat__label,.tok-stat__label, .tok-balance-bar__label,.pay-empty,.pay-card__exp, .stat-label,.lock-note,.storage-panel__desc,.storage-panel__list li, .connected-row .label,.field .hint,.team-section-title,.team-seat-billing__hint, .aidc-seat-modal__text,.aidc-seat-modal__grid label,.aidc-seat-modal__field, .aidc-seat-modal__quote,.aidc-seat-quote__row,.member-card__email, .member-card__row,.plan-gate__subtitle,.plan-gate__note,.pending-invite .invite-meta, .transfer-date ) { color: var(--aidc-text-secondary) !important; opacity: 1 !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where(label,th) { color: var(--aidc-text-secondary) !important; opacity: 1 !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where( input,textarea,select,.input ) { background: var(--aidc-bg-elevated) !important; border-color: var(--aidc-border-strong) !important; color: var(--aidc-text-primary) !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where(input,textarea)::placeholder { color: var(--aidc-text-muted) !important; opacity: 1 !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where( .btn-primary,.button.primary,.pill-btn.primary,.plan-gate__cta, .ref-copy-btn,.ref-generate-btn,.ref-withdraw-btn,.ref-auth-action ):not(.btn-danger):not(.danger) { background: var(--aidc-btn-primary-bg) !important; border: 1px solid var(--aidc-btn-primary-border) !important; color: var(--aidc-btn-primary-text) !important; box-shadow: var(--aidc-btn-primary-shadow) !important; filter: none !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where( .btn-primary,.button.primary,.pill-btn.primary,.plan-gate__cta, .ref-copy-btn,.ref-generate-btn,.ref-withdraw-btn,.ref-auth-action ):not(.btn-danger):not(.danger):hover:not(:disabled), html[data-aidc-color-mode="light"] body:has(.account-layout) :where( .btn-primary,.button.primary,.pill-btn.primary,.plan-gate__cta, .ref-copy-btn,.ref-generate-btn,.ref-withdraw-btn,.ref-auth-action ):not(.btn-danger):not(.danger):focus-visible { background: var(--aidc-btn-primary-bg-hover) !important; border-color: var(--aidc-btn-primary-border-hover) !important; color: var(--aidc-btn-primary-text) !important; box-shadow: none !important; filter: none !important; outline: none !important; } html[data-aidc-color-mode="light"] body:has(.account-layout) :where(.panel,.section-card,.card) { border-color: var(--aidc-border-default) !important; box-shadow: none !important; } /* Do not blend danger text toward white on light Account surfaces. The route adapters still own danger backgrounds/borders; this only guarantees readable foreground text if a legacy rule uses a dark-theme white mix. */ html[data-aidc-color-mode="light"] body:has(.account-layout) .btn-danger { color: var(--aidc-red-500) !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Shared site footer visual contract. Layout remains core-owned. */ .footer{ color:var(--aidc-text-muted) } .footer__legal a, .footer__phone a{ color:var(--aidc-violet-500) } .footer__legal a{ text-decoration-color:color-mix(in srgb,var(--aidc-violet-500) 35%,transparent) } .footer__legal a:hover, .footer__phone a:hover{ color:var(--aidc-pink-500) } /* Hide legacy route markup until account-nav.js has built the shared shell. */ body:not(.aidc-account-shell-ready){visibility:hidden} body.aidc-account-shell-ready{visibility:visible} body:has(.account-layout) #app, body:has(.account-layout) #app>.shell{ min-height:calc(100vh / var(--zoom-real, var(--zoom, 1))) } body:has(.account-layout) #app>.shell{ display:grid; grid-template-rows:auto minmax(0,1fr) auto } body:has(.account-layout) .account-layout.account-layout--wrapped>section.panel.account-route-panel{ border:1px solid var(--aidc-border-subtle)!important;} body.admin-dashboard-page .account-route-panel>.wrap>.panel{ border:1px solid var(--aidc-border-subtle)!important;} body.admin-dashboard-page .account-route-panel>.wrap>.panel .card{ border:1px solid var(--aidc-border-subtle)!important } body:has(.account-layout) .account-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:14px; margin-top:10px; min-height:0 } @media(max-width:1000px){ body:has(.account-layout) .account-layout{grid-template-columns:1fr} } body:has(.account-layout) .panel{ border-radius:16px; padding:16px } body:has(.account-layout) .account-layout>section.panel{ padding:0 } body:has(.account-layout) .account-layout--wrapped{ width:100%; padding:0 18px; box-sizing:border-box } body:has(.account-layout) .account-layout--wrapped>.account-route-panel>main{ max-width:none; width:100%; box-sizing:border-box } body.admin-dashboard-page .account-layout--wrapped>.account-route-panel>.wrap{ margin-top:0; padding-top:0 } body:has(.account-layout) .panel h2{ margin:0 0 10px; font-size:15px; letter-spacing:.08em; text-transform:uppercase } body:has(.account-layout) .panel p{ margin:6px 0 12px; font-size:14px } body:has(.account-layout) .side-nav .nav-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; cursor:pointer } body:has(.account-layout) .side-nav a.nav-item{text-decoration:none} body:has(.account-layout) .nav-icon{ width:16px; height:16px; flex-shrink:0 } body:has(.account-layout) .account-layout *{ scrollbar-width:thin } body:has(.account-layout) .account-layout *::-webkit-scrollbar{ width:8px!important; height:8px!important } body:has(.account-layout) .account-layout *::-webkit-scrollbar-track{ border-radius:10px } body:has(.account-layout) .account-layout *::-webkit-scrollbar-thumb{ border-radius:10px; border:2px solid transparent; background-clip:content-box } body:has(.account-layout) .section-card{ border-radius:14px; padding:14px; margin-bottom:10px } /* A quieter account hierarchy: the route content is the primary surface; nested sections must not all compete with equal borders and shadows. */ body[data-page="account"] .account-route-panel .section-card{} body[data-page="account"] .account-route-panel>.row, body[data-page="account"] .account-main-panel>.row{gap:8px!important} /* Account home: use a concise dashboard hierarchy instead of a tall stack of unrelated full-width slabs. */ @media(min-width:1100px){ body[data-page="account"] .account-layout>section.panel:has([data-auth-card]){ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:start; gap:10px; border:0!important;} body[data-page="account"] .account-layout>section.panel:has([data-auth-card])>[data-auth-card], body[data-page="account"] .account-layout>section.panel:has([data-auth-card])>[data-pwa-install-card], body[data-page="account"] .account-layout>section.panel:has([data-auth-card])>[data-tg-channel-banner], body[data-page="account"] .account-layout>section.panel:has([data-auth-card])>[data-notify-channels]{ grid-column:1/-1 } } body[data-page="account"] .account-layout>section.panel:has([data-auth-card])>.section-card{ margin:0!important; padding:12px 14px!important; min-height:0 } body[data-page="account"] #app>.shell>[data-include*="footer"], body[data-page="account"] #app>.shell>footer{ margin-top:auto; flex:0 0 auto; position:relative; z-index:2 } body:has(.account-layout) .section-card h3{ margin:0 0 6px; font-size:16px; letter-spacing:.05em } body:has(.account-layout) .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center } body:has(.account-layout) .muted{font-size:13px} body:has(.account-layout) .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px } body:has(.account-layout) .field label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase } body:has(.account-layout) .input{ border-radius:12px; padding:10px 12px; font-size:14px; outline:none } body:has(.account-layout) .btn{ border-radius:12px; padding:11px 14px; font-size:14px; font-weight:650; cursor:pointer; transition:.12s ease } body:has(.account-layout) .is-hidden{display:none!important}