:root {
  --color-bg: #0a0a0a;
  --color-bg-raised: #111111;
  --color-surface: #171717;
  --color-surface-strong: #202020;
  --color-border: rgba(255, 255, 255, .12);
  --color-text: #f1f1f1;
  --color-text-muted: #a3a3a3;
  --color-text-subtle: #737373;
  --color-brand: #d1d1d1;
  --color-brand-strong: #f2f2f2;
  --color-success: #78d7b8;
  --color-danger: #ee8d9d;
  --color-warning: #eac27c;
  --color-info: #b8b8b8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, .18);
  --shadow-md: 0 14px 42px rgba(0, 0, 0, .32);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, .58);
  --font-title: 22px;
  --font-heading: 15px;
  --font-body: 12px;
  --font-caption: 10px;
  --gradient-brand: linear-gradient(135deg, #8f8f8f 0%, #eeeeee 100%);
  --gradient-brand-glow: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .14), transparent 68%);
  --gradient-success: linear-gradient(135deg, #55cfa9, #78d7b8);
  --gradient-danger: linear-gradient(135deg, #d9788e, #ee8d9d);
  --gradient-warning: linear-gradient(135deg, #d6a85f, #eac27c);
  --gradient-processing: linear-gradient(135deg, #5b5b5b, #a9a9a9);
  --glass-high-bg: rgba(30, 30, 30, .88);
  --glass-medium-bg: rgba(24, 24, 24, .74);
  --glass-low-bg: rgba(14, 14, 14, .56);
  --glass-blur-high: 24px;
  --glass-blur-medium: 16px;
  --glass-blur-low: 10px;
  --glass-border: rgba(255, 255, 255, .14);
  --glow-soft: 0 0 18px rgba(255, 255, 255, .10);
  --glow-medium: 0 0 28px rgba(255, 255, 255, .16);
  --glow-strong: 0 0 42px rgba(255, 255, 255, .22);
  --shadow-depth-card: 0 10px 28px rgba(0, 0, 0, .28);
  --shadow-depth-dialog: 0 24px 72px rgba(0, 0, 0, .48);
  --shadow-depth-nav: 0 8px 26px rgba(0, 0, 0, .24);
  --shadow-depth-float: 0 12px 34px rgba(0, 0, 0, .34);
  --texture-grid: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  --page-glow: radial-gradient(circle at 72% -12%, rgba(255, 255, 255, .07), transparent 42%);
  --motion-fast: 150ms;
  --motion-standard: 200ms;
  --color-brand-ink: #111111;
  --brand-border-soft: rgba(255, 255, 255, .18);
  --brand-border: rgba(255, 255, 255, .26);
  --brand-border-strong: rgba(255, 255, 255, .34);
  --brand-surface-soft: rgba(255, 255, 255, .06);
  --brand-surface: rgba(255, 255, 255, .08);
  --brand-surface-strong: rgba(255, 255, 255, .11);
  --brand-surface-hover: rgba(255, 255, 255, .15);
  --generation-overlay: linear-gradient(180deg, transparent 62%, rgba(4, 7, 10, .3));
  --generation-grid-size: 32px;
  --generation-shimmer: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 48%, transparent 66%);
  --generation-page-glow-opacity: .42;
  --generation-output-shadow: inset 0 0 48px rgba(255, 255, 255, .035);
  --generation-success-glow: 0 0 16px rgba(120, 215, 184, .22);
  --generation-danger-glow: 0 0 16px rgba(238, 141, 157, .24);
  --generation-toolbar-line-opacity: .42;
  --generation-overlay-opacity: .72;
  --generation-hover-brightness: 1.05;
  --generation-hover-scale: 1.02;
  --generation-selected-rise: -2px;
  --generation-hover-rise: -2px;
  --generation-shimmer-duration: 2.8s;
  --generation-submit-brightness: 1.08;
  --generation-submit-rise: -1px;
  --generation-press-scale: .98;
  --state-success-surface: linear-gradient(135deg, rgba(85, 207, 169, .14), rgba(120, 215, 184, .08));
  --state-danger-surface: linear-gradient(135deg, rgba(217, 120, 142, .14), rgba(238, 141, 157, .08));
  --state-processing-surface: linear-gradient(135deg, rgba(120, 120, 120, .18), rgba(210, 210, 210, .08));
  --state-warning-surface: linear-gradient(135deg, rgba(214, 168, 95, .14), rgba(234, 194, 124, .08));
  --state-pulse-duration: 2.4s;
  --generation-separator-opacity: .38;
  --generation-modal-overlay: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .06), transparent 58%), rgba(3, 3, 3, .88);
  --generation-input-bg: rgba(12, 16, 21, .52);
  --generation-toolbar-mode-width: 146px;
  --generation-toolbar-model-width: 188px;
  --generation-toolbar-spec-width: 158px;
  --generation-toolbar-gap: 6px;
  --generation-toolbar-video-mode-width: 116px;
  --generation-toolbar-video-model-width: 160px;
  --generation-toolbar-video-reference-width: 100px;
  --generation-toolbar-video-spec-width: 112px;
  --generation-toolbar-video-duration-width: 58px;
  --generation-toolbar-video-gap: 4px;
  --generation-feed-max-width: 1600px;
  /* Keep consecutive generation records compact without crowding their controls. */
  --generation-task-gap: 24px;
  --generation-result-gap: 8px;
  --generation-reference-size: 44px;
  --generation-reference-width: 48px;
  --generation-reference-height: 64px;
  --generation-reference-overlap: -10px;
  --generation-video-max-height: 43.5vh;
  --generation-result-thumbnail-height: 270px;
  --generation-single-result-max-width: 465px;
  --generation-prompt-preview-width: 1120px;
  --generation-prompt-preview-max-height: 332px;
  --generation-prompt-font-size: 16px;
  --generation-detail-width: 372px;
  --generation-detail-label-width: 112px;
  --generation-detail-row-height: 54px;
  --generation-detail-font-size: 15px;
  --generation-result-action-height: 48px;
  --model-picker-width: 400px;
  --model-picker-row-height: 62px;
  --model-picker-list-max-height: 310px;
  --model-picker-icon-size: 38px;
  --composer-mode-menu-width: 276px;
  --composer-reference-menu-width: 330px;
  --composer-spec-panel-width: 604px;
  --composer-duration-panel-width: 692px;
  --composer-reference-panel-width: 432px;
  --composer-popover-radius: 20px;
  --composer-popover-padding: 20px;
  --composer-popover-control-height: 56px;
  --composer-popover-surface: #242424;
  --composer-popover-control: #2d2d2d;
  --composer-popover-control-active: #3a3b3e;
  --composer-popover-line: rgba(255, 255, 255, .08);
  --generation-composer-surface: #1e1f21;
  --generation-composer-control: #202225;
  --generation-composer-border: rgba(255, 255, 255, .08);
  --generation-composer-control-border: rgba(255, 255, 255, .09);
  --generation-composer-radius: 32px;
  /* A 1024px composer keeps desktop controls readable without spanning the
     entire generation workspace. */
  --generation-composer-max-width: 1024px;
  --generation-composer-responsive-width: calc(100% - 96px);
  /* Normal and compact generation composers share one close-to-edge gutter. */
  --generation-composer-bottom-offset: calc(var(--space-5) / 3);
  --generation-composer-laptop-model-width: 245px;
  --generation-composer-height: 184px;
  --generation-composer-control-height: 48px;
  --generation-composer-reference-width: 56px;
  --generation-composer-reference-height: 72px;
  --generation-composer-editor-min-height: 76px;
  --generation-composer-editor-expanded-height: 252px;
  --generation-composer-editor-max-height: 366px;
  --generation-mode-menu-width: 268px;
  --generation-reference-menu-width: 126px;
  --generation-model-picker-width: 500px;
  --generation-model-picker-row-height: 76px;
  --generation-model-picker-icon-size: 46px;
  --generation-spec-panel-width: 448px;
  --generation-duration-panel-width: 526px;
  --generation-reference-panel-width: 320px;
  --generation-popover-radius: 20px;
  --generation-popover-padding: 20px;
  --generation-popover-control-height: 56px;
  --icon-size-sm: 16px;
  --icon-size-base: 20px;
  --icon-size-lg: 22px;
  --radius-pill: 999px;
  --client-rail-width: 68px;
  --client-conversation-width: 268px;
  --client-create-conversation-width: 216px;
  --client-rail-bg: #191919;
  --client-conversation-bg: #181818;
  --client-sidebar-active: #2c2c2c;
  --client-sidebar-hover: #242424;
  --client-sidebar-line: #272727;
  --client-sidebar-text: #f2f2f2;
  --client-sidebar-active-text: #ffffff;
  --client-sidebar-muted: #8a8a8a;
  --client-sidebar-subtle: #6e6e6e;
  --client-sidebar-scrollbar: #4b4b4b;
  --client-rail-logo-size: 28px;
  --client-rail-nav-icon-size: 20px;
  --client-rail-nav-height: 52px;
  --client-rail-bottom-gap: 14px;
  --client-membership-width: 48px;
  --client-conversation-header-height: 60px;
  --client-conversation-row-height: 36px;
  --client-conversation-thumb-size: 28px;
  --client-conversation-item-gap: 10px;
  --client-conversation-label-top: 9px;
  --client-conversation-title-size: 16px;
  --client-conversation-text-size: 13px;
  --client-content-max: 1440px;
  --client-announcement-height: 40px;
  --client-announcement-inline-gap: 10px;
  --client-nav-group-gap: 4px;
  --client-nav-group-separator-space: 8px;
  --client-card-aspect-ratio: 3 / 4;
  --client-card-hover-rise: -2px;
  --client-card-media-scale: 1.025;
  --client-hero-next-section-peek: 252px;
  --client-hero-min-height: 520px;
  --client-hero-mobile-min-height: 430px;
  --client-support-inspire-mobile-bottom: 124px;
  --client-mobile-tool-safe-top: 76px;
  --control-height-compact: 36px;
  --control-icon-size: 36px;
  --control-icon-size-small: 30px;
  --control-icon-radius: var(--radius-base);
  --media-preview-backdrop: rgba(3, 5, 8, .88);
  --media-control-bg: rgba(11, 15, 20, .68);
  --media-control-bg-hover: rgba(24, 31, 39, .94);
  --media-control-fg: #eef4f7;
  --media-control-accent-bg: rgba(112, 112, 112, .78);
  --media-preview-gap: var(--space-3);
  --page-quiet-background-height: 180px;
  --status-dot-size: 4px;
  --status-dot-ring-width: 2px;

  /* Shared page surfaces. Keep these values calm enough for dense, long-lived
     workspaces while allowing each page to express its own hierarchy. */
  --page-surface-0: #0d0d0d;
  --page-surface-1: #141414;
  --page-surface-2: #1c1c1c;
  --page-surface-3: #262626;
  --page-line-soft: rgba(255, 255, 255, .09);
  --page-line: rgba(255, 255, 255, .15);
  --page-line-strong: rgba(255, 255, 255, .24);
  --page-text: #e8e8e8;
  --page-text-muted: #a0a0a0;
  --page-text-subtle: #777777;
  --page-control-bg: rgba(20, 20, 20, .82);
  --page-control-hover: rgba(255, 255, 255, .08);
  --page-media-bg: #0a0a0a;
  --page-overlay: linear-gradient(180deg, transparent 46%, rgba(5, 8, 12, .86) 100%);
  --page-grid: linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  --page-quiet-background: linear-gradient(180deg, rgba(255, 255, 255, .022) 0, transparent var(--page-quiet-background-height));
  --page-grid-size: 32px;
  --page-focus-ring: 0 0 0 3px rgba(255, 255, 255, .12), var(--glow-soft);
  --page-transition: 180ms;

  /* Admin surfaces deliberately avoid pure black/white contrast. The
     neutral scale is compact so dense tables stay readable without glowing
     white cards or high-contrast headings. */
  --admin-bg: #141414;
  --admin-sidebar: #171717;
  --admin-topbar: rgba(28, 28, 28, .94);
  --admin-surface: #202020;
  --admin-surface-raised: #292929;
  --admin-surface-hover: #323232;
  --admin-input: #1b1b1b;
  --admin-border: rgba(255, 255, 255, .12);
  --admin-border-strong: rgba(255, 255, 255, .2);
  --admin-text: #d1d1d1;
  --admin-text-muted: #999999;
  --admin-text-subtle: #707070;
  --admin-accent: #bcbcbc;
  --admin-accent-strong: #e2e2e2;
  --admin-accent-ink: #111111;
  --admin-brand-gradient: linear-gradient(135deg, #777777 0%, #d0d0d0 100%);
  --admin-brand-glow: 0 0 18px rgba(255, 255, 255, .1);
  --admin-success: #79bda3;
  --admin-danger: #d58996;
  --admin-warning: #c9a66e;
  --admin-info: #aaaaaa;
  --admin-success-surface: rgba(121, 189, 163, .11);
  --admin-danger-surface: rgba(213, 137, 150, .11);
  --admin-warning-surface: rgba(201, 166, 110, .11);
  --admin-info-surface: rgba(255, 255, 255, .08);
  --page-media-shadow: inset 0 0 80px rgba(0, 0, 0, .24);
  --page-success-border: rgba(120, 215, 184, .34);
  --page-warning-border: rgba(234, 194, 124, .34);
  --admin-success-border: rgba(121, 189, 163, .34);
  --admin-danger-border: rgba(213, 137, 150, .34);
  --admin-danger-border-strong: rgba(213, 137, 150, .42);
  --admin-warning-border: rgba(201, 166, 110, .34);
  --admin-sidebar-width: 232px;
  --admin-topbar-height: 72px;
  --admin-control-height: 36px;
  --client-support-safe-bottom: 96px;
  --client-support-create-bottom: 302px;
  --client-support-create-expanded-bottom: 422px;
  --client-secondary-stage-max: 1320px;
  --client-secondary-stage-gutter: 52px;
  --client-secondary-stage-top: 42px;
  --client-secondary-stage-bottom: 100px;
  --client-secondary-heading-gap: 28px;
  --client-secondary-panel-gap: var(--space-4);
  --client-secondary-panel-padding: 18px;
  --client-secondary-price-min-width: 180px;
  --client-secondary-price-max-width: 208px;
  --client-secondary-upload-icon: 40px;
  --client-profile-content-max: 1200px;
  --client-agent-content-max: 1000px;
  --client-agent-model-max-width: 260px;
  --client-dialog-width: 520px;
  --client-dialog-wide-width: 620px;
  --client-library-dialog-width: 920px;
}