@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');


/*
 * Zuzzuu Dashboard 2027 — global styles. Import ONCE at the entry of an app that uses `@shared/ds2027`:
 *   import '@shared/ds2027/styles/global.css';
 * Tokens are vendored unchanged from @zuzzuu/design-system v1.4.5 (see ../README.md).
 * Theme: set <html data-theme="light"> in index.html — without it the tokens follow the OS dark theme —
 * and call `syncShellTheme()` at app start: inside the product shell the panel then follows the shell's
 * light / dark switch (#343). `data-theme="light"` on an element keeps that part light (light-scope.css).
 */
/* Zuzzuu Design System tokens v1.4.5
 * Generated from the Figma library (1tZxFi4mcDqfAAsWpxUQyS). Do not edit by hand:
 * change the Figma variables, then regenerate.
 * Themes: light (default) | dark via [data-theme="dark"] on <html>, or the OS setting when no data-theme is set.
 * Breakpoints: desktop >= 1280px, tablet 768-1279px, mobile <= 767px.
 */
:root {
  /* Primitive palette: use semantic tokens in components, never these directly */
  --color-neutral-50: #F8FAFC;
  --color-neutral-100: #EFF3F7;
  --color-neutral-200: #E1E6EC;
  --color-neutral-300: #CCD1D8;
  --color-neutral-400: #8C9198;
  --color-neutral-500: #6E737A;
  --color-neutral-600: #565B62;
  --color-neutral-700: #41454B;
  --color-neutral-800: #2F3337;
  --color-neutral-900: #1C1C1D;
  --color-neutral-950: #0D0E11;
  --color-blue-50: #EAF8FF;
  --color-blue-100: #D5EEFF;
  --color-blue-200: #B6DCFF;
  --color-blue-300: #8AC4FF;
  --color-blue-400: #4FA5FF;
  --color-blue-500: #0085FF;
  --color-blue-600: #0076E5;
  --color-blue-700: #0068CB;
  --color-blue-800: #0055A8;
  --color-blue-900: #003F82;
  --color-blue-950: #002B5E;
  --color-cyan-50: #DEF9FF;
  --color-cyan-100: #D3F5FF;
  --color-cyan-200: #AAEBFF;
  --color-cyan-300: #71DAFA;
  --color-cyan-400: #0BC3EC;
  --color-cyan-500: #00A8D0;
  --color-cyan-600: #008BAF;
  --color-cyan-700: #007190;
  --color-cyan-800: #005973;
  --color-cyan-900: #004258;
  --color-cyan-950: #002F40;
  --color-purple-50: #F3EFFF;
  --color-purple-100: #E6E4FF;
  --color-purple-200: #D1CCFF;
  --color-purple-300: #B6ACFF;
  --color-purple-400: #9982FF;
  --color-purple-500: #7E5CF8;
  --color-purple-600: #6A43DE;
  --color-purple-700: #5832BF;
  --color-purple-800: #47279C;
  --color-purple-900: #361E7A;
  --color-purple-950: #28155E;
  --color-magenta-50: #FFE9F7;
  --color-magenta-100: #FFDEF2;
  --color-magenta-200: #FFC5E5;
  --color-magenta-300: #FF9FD2;
  --color-magenta-400: #FF65BC;
  --color-magenta-500: #FF00A6;
  --color-magenta-600: #DA008B;
  --color-magenta-700: #B40071;
  --color-magenta-800: #900059;
  --color-magenta-900: #6F0043;
  --color-magenta-950: #510030;
  --color-green-50: #EBFEF1;
  --color-green-100: #D6FBE1;
  --color-green-200: #ACF5C3;
  --color-green-300: #76EA9A;
  --color-green-400: #40D872;
  --color-green-500: #2ABE5A;
  --color-green-600: #15863C;
  --color-green-700: #127235;
  --color-green-800: #115C2E;
  --color-green-900: #0D4623;
  --color-green-950: #053017;
  --color-amber-50: #FFF9E4;
  --color-amber-100: #FFF0C5;
  --color-amber-200: #FFE18D;
  --color-amber-300: #FFCB3F;
  --color-amber-400: #FFB707;
  --color-amber-500: #EA9800;
  --color-amber-600: #C47600;
  --color-amber-700: #98570D;
  --color-amber-800: #78440D;
  --color-amber-900: #5B3309;
  --color-amber-950: #3F2205;
  --color-red-50: #FFF5F6;
  --color-red-100: #FFE9EC;
  --color-red-200: #FED3D8;
  --color-red-300: #FEB3BD;
  --color-red-400: #FE8DA0;
  --color-red-500: #FD5B81;
  --color-red-600: #D00C55;
  --color-red-700: #B20947;
  --color-red-800: #900538;
  --color-red-900: #70032A;
  --color-red-950: #51021C;
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;
  --color-alpha-black-4: rgb(0 0 0 / 0.039);
  --color-alpha-white-4: rgb(255 255 255 / 0.039);
  --color-alpha-black-8: rgb(0 0 0 / 0.078);
  --color-alpha-white-8: rgb(255 255 255 / 0.078);
  --color-alpha-black-12: rgb(0 0 0 / 0.122);
  --color-alpha-white-12: rgb(255 255 255 / 0.122);
  --color-alpha-black-16: rgb(0 0 0 / 0.161);
  --color-alpha-white-16: rgb(255 255 255 / 0.161);
  --color-alpha-black-24: rgb(0 0 0 / 0.239);
  --color-alpha-white-24: rgb(255 255 255 / 0.239);
  --color-alpha-black-40: rgb(0 0 0 / 0.4);
  --color-alpha-white-40: rgb(255 255 255 / 0.4);
  --color-alpha-black-60: rgb(0 0 0 / 0.6);
  --color-alpha-white-60: rgb(255 255 255 / 0.6);
  --color-alpha-black-80: rgb(0 0 0 / 0.8);
  --color-alpha-white-80: rgb(255 255 255 / 0.8);
  --color-alpha-blue-12: rgb(0 133 255 / 0.122);
  --color-alpha-blue-24: rgb(0 133 255 / 0.239);
  --color-neutral-550: #62676E;
  --color-neutral-350: #9DA2A9;

  /* Font */
  --font-family-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Dimension: spacing, radius, sizes, stroke */
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-icon-xs: 12px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-avatar-sm: 24px;
  --size-avatar-md: 32px;
  --size-avatar-lg: 40px;
  --stroke-thin: 1px;
  --stroke-medium: 1.5px;
  --stroke-thick: 2px;
  --stroke-icon-sm: 1.25px;
  --size-icon-xl: 32px;
  --size-icon-2xl: 48px;

  /* Semantic colours: light theme */
  --color-bg-canvas: var(--color-neutral-100);
  --color-bg-surface: var(--color-base-white);
  --color-bg-surface-raised: var(--color-base-white);
  --color-bg-surface-sunken: var(--color-neutral-50);
  --color-bg-subtle: var(--color-neutral-200);
  --color-bg-hover: var(--color-neutral-50);
  --color-bg-pressed: var(--color-neutral-200);
  --color-bg-selected: var(--color-blue-50);
  --color-bg-disabled: var(--color-neutral-100);
  --color-bg-inverse: var(--color-neutral-900);
  --color-bg-overlay: var(--color-alpha-black-40);
  --color-bg-brand: var(--color-blue-500);
  --color-bg-brand-hover: var(--color-blue-600);
  --color-bg-brand-pressed: var(--color-blue-700);
  --color-bg-brand-subtle: var(--color-blue-50);
  --color-bg-brand-subtle-hover: var(--color-blue-100);
  --color-bg-success: var(--color-green-600);
  --color-bg-success-subtle: var(--color-green-50);
  --color-bg-warning: var(--color-amber-400);
  --color-bg-warning-subtle: var(--color-amber-50);
  --color-bg-danger: var(--color-red-600);
  --color-bg-danger-hover: var(--color-red-700);
  --color-bg-danger-pressed: var(--color-red-800);
  --color-bg-danger-subtle: var(--color-red-50);
  --color-bg-danger-subtle-hover: var(--color-red-100);
  --color-bg-neutral-subtle: var(--color-neutral-100);
  --color-bg-accent-purple-subtle: var(--color-purple-50);
  --color-bg-channel-mobile-subtle: var(--color-cyan-50);
  --color-bg-channel-web-subtle: var(--color-purple-50);
  --color-bg-channel-store-subtle: var(--color-magenta-50);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-550);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-base-white);
  --color-text-on-brand: var(--color-base-white);
  --color-text-on-warning: var(--color-neutral-900);
  --color-text-brand: var(--color-blue-500);
  --color-text-brand-hover: var(--color-blue-600);
  --color-text-success: var(--color-green-700);
  --color-text-warning: var(--color-amber-700);
  --color-text-danger: var(--color-red-600);
  --color-text-accent-purple: var(--color-purple-600);
  --color-text-channel-mobile: var(--color-cyan-700);
  --color-text-channel-web: var(--color-purple-500);
  --color-text-channel-store: var(--color-magenta-500);
  --color-icon-primary: var(--color-neutral-900);
  --color-icon-secondary: var(--color-neutral-600);
  --color-icon-tertiary: var(--color-neutral-500);
  --color-icon-disabled: var(--color-neutral-400);
  --color-icon-inverse: var(--color-base-white);
  --color-icon-on-brand: var(--color-base-white);
  --color-icon-brand: var(--color-blue-500);
  --color-icon-success: var(--color-green-600);
  --color-icon-warning: var(--color-amber-600);
  --color-icon-danger: var(--color-red-600);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);
  --color-border-disabled: var(--color-neutral-200);
  --color-border-brand: var(--color-blue-500);
  --color-border-focus: var(--color-blue-500);
  --color-border-success: var(--color-green-600);
  --color-border-warning: var(--color-amber-600);
  --color-border-danger: var(--color-red-600);
  --color-border-accent-purple: var(--color-purple-500);
  --color-border-channel-mobile: var(--color-cyan-400);
  --color-border-channel-web: var(--color-purple-500);
  --color-border-channel-store: var(--color-magenta-500);
  --color-channel-mobile: var(--color-cyan-400);
  --color-channel-web: var(--color-purple-500);
  --color-channel-store: var(--color-magenta-500);
  --color-chart-series-1: var(--color-blue-500);
  --color-chart-series-2: var(--color-purple-500);
  --color-chart-series-3: var(--color-magenta-500);
  --color-chart-series-4: var(--color-cyan-400);
  --color-chart-series-5: var(--color-green-500);
  --color-chart-series-6: var(--color-amber-400);
  --color-chart-grid: var(--color-neutral-200);
  --color-chart-axis: var(--color-neutral-500);
  --color-chart-comparison: var(--color-neutral-300);
  --color-focus-ring: var(--color-alpha-blue-24);
  --color-shadow-default: var(--color-alpha-black-8);
  --color-shadow-strong: var(--color-alpha-black-16);
  --color-shadow-subtle: var(--color-alpha-black-4);
  --color-border-hover: var(--color-neutral-500);
  --color-bg-control: var(--color-neutral-300);
  --color-bg-knob: var(--color-base-white);
  --color-bg-accent-purple-subtle-hover: var(--color-purple-100);
  --color-bg-success-subtle-hover: var(--color-green-100);
  --color-bg-skeleton: var(--color-neutral-200);
  --color-bg-control-hover: var(--color-neutral-400);
  --color-bg-accent-purple: var(--color-purple-600);
  --color-bg-inset: var(--color-neutral-100);
  --color-border-brand-subtle: var(--color-blue-200);
  --color-border-success-subtle: var(--color-green-200);
  --color-border-warning-subtle: var(--color-amber-200);
  --color-border-danger-subtle: var(--color-red-200);
  --color-bg-accent-cyan-subtle: var(--color-cyan-50);
  --color-bg-accent-magenta-subtle: var(--color-magenta-50);
  --color-icon-accent-purple: var(--color-purple-600);
  --color-icon-accent-cyan: var(--color-cyan-700);
  --color-icon-accent-magenta: var(--color-magenta-600);

  /* Responsive (desktop values; overridden below for tablet and mobile) */
  --type-display-size: 40px;
  --type-display-line-height: 48px;
  --type-h1-size: 32px;
  --type-h1-line-height: 40px;
  --type-h2-size: 24px;
  --type-h2-line-height: 32px;
  --type-h3-size: 20px;
  --type-h3-line-height: 28px;
  --type-h4-size: 16px;
  --type-h4-line-height: 24px;
  --type-body-lg-size: 16px;
  --type-body-lg-line-height: 24px;
  --type-body-md-size: 14px;
  --type-body-md-line-height: 20px;
  --type-body-sm-size: 12px;
  --type-body-sm-line-height: 16px;
  --type-overline-size: 12px;
  --type-overline-line-height: 16px;
  --layout-margin: 32px;
  --layout-gutter: 24px;
  --layout-columns: 12;
  --layout-sidebar-width: 264px;
  --layout-topbar-height: 64px;
  --layout-section-gap: 24px;
  --layout-card-padding: 24px;

  /* Elevation (shadow colours follow the theme) */
  --shadow-elevation-1: 0px 1px 2px 0px var(--color-shadow-default);  /* Elevation/1 – Control: Inputs, buttons on canvas, small chips. */
  --shadow-elevation-2: 0px 1px 2px 0px var(--color-shadow-subtle), 0px 10px 15px -3px var(--color-shadow-default);  /* Elevation/2 – Card: Cards, panels, table containers, sidebar. */
  --shadow-elevation-3: 0px 4px 8px -2px var(--color-shadow-default), 0px 12px 24px -4px var(--color-shadow-strong);  /* Elevation/3 – Overlay: Dropdown menus, popovers, tooltips, toasts. */
  --shadow-elevation-4: 0px 8px 16px -4px var(--color-shadow-default), 0px 24px 48px -12px var(--color-shadow-strong);  /* Elevation/4 – Modal: Modals and drawers. */

  /* Gradients */
  --gradient-brand: linear-gradient(to bottom right, #29D7FF 0%, #3CBFFF 14%, #7083FF 42%, #C123FF 83%, #E000FF 100%);
  --gradient-brand-horizontal: linear-gradient(to right, #29D7FF 0%, #3CBFFF 14%, #7083FF 42%, #C123FF 83%, #E000FF 100%);
  --gradient-chart-area: linear-gradient(to bottom, rgb(0 133 255 / 0.22) 0%, rgb(0 133 255 / 0) 100%);

  /* Focus ring (Figma: 2 px border/focus ring, 2 px outside the control) */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-border-focus);

  color-scheme: light;
}
/* Dark theme: explicit */
[data-theme="dark"] {
  --color-bg-canvas: var(--color-neutral-950);
  --color-bg-surface: var(--color-neutral-900);
  --color-bg-surface-raised: var(--color-neutral-800);
  --color-bg-surface-sunken: var(--color-neutral-950);
  --color-bg-subtle: var(--color-neutral-800);
  --color-bg-hover: var(--color-alpha-white-4);
  --color-bg-pressed: var(--color-alpha-white-8);
  --color-bg-selected: var(--color-blue-950);
  --color-bg-disabled: var(--color-neutral-800);
  --color-bg-inverse: var(--color-neutral-50);
  --color-bg-overlay: var(--color-alpha-black-60);
  --color-bg-brand-subtle: var(--color-blue-950);
  --color-bg-brand-subtle-hover: var(--color-blue-900);
  --color-bg-success-subtle: var(--color-green-950);
  --color-bg-warning-subtle: var(--color-amber-950);
  --color-bg-danger-subtle: var(--color-red-950);
  --color-bg-danger-subtle-hover: var(--color-red-900);
  --color-bg-neutral-subtle: var(--color-neutral-800);
  --color-bg-accent-purple-subtle: var(--color-purple-950);
  --color-bg-channel-mobile-subtle: var(--color-cyan-950);
  --color-bg-channel-web-subtle: var(--color-purple-950);
  --color-bg-channel-store-subtle: var(--color-magenta-950);
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-tertiary: var(--color-neutral-350);
  --color-text-disabled: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-900);
  --color-text-success: var(--color-green-400);
  --color-text-warning: var(--color-amber-300);
  --color-text-danger: var(--color-red-400);
  --color-text-accent-purple: var(--color-purple-300);
  --color-text-channel-mobile: var(--color-cyan-400);
  --color-text-channel-web: var(--color-purple-400);
  --color-text-channel-store: var(--color-magenta-400);
  --color-icon-primary: var(--color-neutral-50);
  --color-icon-secondary: var(--color-neutral-300);
  --color-icon-tertiary: var(--color-neutral-400);
  --color-icon-disabled: var(--color-neutral-600);
  --color-icon-inverse: var(--color-neutral-900);
  --color-icon-success: var(--color-green-400);
  --color-icon-warning: var(--color-amber-400);
  --color-icon-danger: var(--color-red-400);
  --color-border-subtle: var(--color-neutral-800);
  --color-border-default: var(--color-neutral-700);
  --color-border-strong: var(--color-neutral-500);
  --color-border-disabled: var(--color-neutral-800);
  --color-border-success: var(--color-green-400);
  --color-border-warning: var(--color-amber-400);
  --color-border-danger: var(--color-red-400);
  --color-border-accent-purple: var(--color-purple-400);
  --color-border-channel-web: var(--color-purple-400);
  --color-border-channel-store: var(--color-magenta-400);
  --color-channel-web: var(--color-purple-400);
  --color-channel-store: var(--color-magenta-400);
  --color-chart-series-2: var(--color-purple-400);
  --color-chart-series-3: var(--color-magenta-400);
  --color-chart-series-5: var(--color-green-400);
  --color-chart-grid: var(--color-neutral-800);
  --color-chart-axis: var(--color-neutral-400);
  --color-chart-comparison: var(--color-neutral-600);
  --color-shadow-default: var(--color-alpha-black-40);
  --color-shadow-strong: var(--color-alpha-black-60);
  --color-shadow-subtle: var(--color-alpha-black-24);
  --color-border-hover: var(--color-neutral-400);
  --color-bg-control: var(--color-neutral-600);
  --color-bg-accent-purple-subtle-hover: var(--color-purple-900);
  --color-bg-success-subtle-hover: var(--color-green-900);
  --color-bg-skeleton: var(--color-neutral-800);
  --color-bg-control-hover: var(--color-neutral-500);
  --color-bg-inset: var(--color-neutral-950);
  --color-border-brand-subtle: var(--color-blue-800);
  --color-border-success-subtle: var(--color-green-800);
  --color-border-warning-subtle: var(--color-amber-800);
  --color-border-danger-subtle: var(--color-red-800);
  --color-bg-accent-cyan-subtle: var(--color-cyan-950);
  --color-bg-accent-magenta-subtle: var(--color-magenta-950);
  --color-icon-accent-purple: var(--color-purple-300);
  --color-icon-accent-cyan: var(--color-cyan-400);
  --color-icon-accent-magenta: var(--color-magenta-400);
  color-scheme: dark;
}
/* Dark theme: follow the OS when the app has not set a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: var(--color-neutral-950);
    --color-bg-surface: var(--color-neutral-900);
    --color-bg-surface-raised: var(--color-neutral-800);
    --color-bg-surface-sunken: var(--color-neutral-950);
    --color-bg-subtle: var(--color-neutral-800);
    --color-bg-hover: var(--color-alpha-white-4);
    --color-bg-pressed: var(--color-alpha-white-8);
    --color-bg-selected: var(--color-blue-950);
    --color-bg-disabled: var(--color-neutral-800);
    --color-bg-inverse: var(--color-neutral-50);
    --color-bg-overlay: var(--color-alpha-black-60);
    --color-bg-brand-subtle: var(--color-blue-950);
    --color-bg-brand-subtle-hover: var(--color-blue-900);
    --color-bg-success-subtle: var(--color-green-950);
    --color-bg-warning-subtle: var(--color-amber-950);
    --color-bg-danger-subtle: var(--color-red-950);
    --color-bg-danger-subtle-hover: var(--color-red-900);
    --color-bg-neutral-subtle: var(--color-neutral-800);
    --color-bg-accent-purple-subtle: var(--color-purple-950);
    --color-bg-channel-mobile-subtle: var(--color-cyan-950);
    --color-bg-channel-web-subtle: var(--color-purple-950);
    --color-bg-channel-store-subtle: var(--color-magenta-950);
    --color-text-primary: var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-tertiary: var(--color-neutral-350);
    --color-text-disabled: var(--color-neutral-500);
    --color-text-inverse: var(--color-neutral-900);
    --color-text-success: var(--color-green-400);
    --color-text-warning: var(--color-amber-300);
    --color-text-danger: var(--color-red-400);
    --color-text-accent-purple: var(--color-purple-300);
    --color-text-channel-mobile: var(--color-cyan-400);
    --color-text-channel-web: var(--color-purple-400);
    --color-text-channel-store: var(--color-magenta-400);
    --color-icon-primary: var(--color-neutral-50);
    --color-icon-secondary: var(--color-neutral-300);
    --color-icon-tertiary: var(--color-neutral-400);
    --color-icon-disabled: var(--color-neutral-600);
    --color-icon-inverse: var(--color-neutral-900);
    --color-icon-success: var(--color-green-400);
    --color-icon-warning: var(--color-amber-400);
    --color-icon-danger: var(--color-red-400);
    --color-border-subtle: var(--color-neutral-800);
    --color-border-default: var(--color-neutral-700);
    --color-border-strong: var(--color-neutral-500);
    --color-border-disabled: var(--color-neutral-800);
    --color-border-success: var(--color-green-400);
    --color-border-warning: var(--color-amber-400);
    --color-border-danger: var(--color-red-400);
    --color-border-accent-purple: var(--color-purple-400);
    --color-border-channel-web: var(--color-purple-400);
    --color-border-channel-store: var(--color-magenta-400);
    --color-channel-web: var(--color-purple-400);
    --color-channel-store: var(--color-magenta-400);
    --color-chart-series-2: var(--color-purple-400);
    --color-chart-series-3: var(--color-magenta-400);
    --color-chart-series-5: var(--color-green-400);
    --color-chart-grid: var(--color-neutral-800);
    --color-chart-axis: var(--color-neutral-400);
    --color-chart-comparison: var(--color-neutral-600);
    --color-shadow-default: var(--color-alpha-black-40);
    --color-shadow-strong: var(--color-alpha-black-60);
    --color-shadow-subtle: var(--color-alpha-black-24);
    --color-border-hover: var(--color-neutral-400);
    --color-bg-control: var(--color-neutral-600);
    --color-bg-accent-purple-subtle-hover: var(--color-purple-900);
    --color-bg-success-subtle-hover: var(--color-green-900);
    --color-bg-skeleton: var(--color-neutral-800);
    --color-bg-control-hover: var(--color-neutral-500);
    --color-bg-inset: var(--color-neutral-950);
    --color-border-brand-subtle: var(--color-blue-800);
    --color-border-success-subtle: var(--color-green-800);
    --color-border-warning-subtle: var(--color-amber-800);
    --color-border-danger-subtle: var(--color-red-800);
    --color-bg-accent-cyan-subtle: var(--color-cyan-950);
    --color-bg-accent-magenta-subtle: var(--color-magenta-950);
    --color-icon-accent-purple: var(--color-purple-300);
    --color-icon-accent-cyan: var(--color-cyan-400);
    --color-icon-accent-magenta: var(--color-magenta-400);
    color-scheme: dark;
  }
}
/* Tablet */
@media (max-width: 1279px) {
  :root {
    --type-display-size: 32px;
    --type-display-line-height: 40px;
    --layout-margin: 24px;
    --layout-gutter: 16px;
    --layout-columns: 8;
    --layout-sidebar-width: 72px;
    --layout-section-gap: 20px;
    --layout-card-padding: 20px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  :root {
    --type-h1-size: 24px;
    --type-h1-line-height: 32px;
    --type-h2-size: 20px;
    --type-h2-line-height: 28px;
    --layout-margin: 16px;
    --layout-columns: 4;
    --layout-sidebar-width: 280px;
    --layout-topbar-height: 56px;
    --layout-section-gap: 16px;
    --layout-card-padding: 16px;
  }
}
/* Zuzzuu base styles v1.4.5: load after zuzzuu-tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Zuzzuu typography v1.4.5: one class per Figma text style. Sizes follow the responsive tokens. */
.text-display {  /* Display: Large KPI values on dashboard cards. */
  font-family: var(--font-family-sans);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.text-h1 {  /* Heading/H1: Top-level heading for wizard or onboarding screens. */
  font-family: var(--font-family-sans);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
}
.text-h2 {  /* Heading/H2: Page title (e.g. Customers, Overview). */
  font-family: var(--font-family-sans);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line-height);
  font-weight: var(--font-weight-semibold);
}
.text-h3 {  /* Heading/H3: Section titles, modal and drawer titles. */
  font-family: var(--font-family-sans);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  font-weight: var(--font-weight-semibold);
}
.text-h4 {  /* Heading/H4: Card titles and form section titles. */
  font-family: var(--font-family-sans);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
  font-weight: var(--font-weight-semibold);
}
.text-body-large {  /* Body/Large: Lead paragraphs and descriptions under page titles. */
  font-family: var(--font-family-sans);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
  font-weight: var(--font-weight-regular);
}
.text-body-medium {  /* Body/Medium: Default UI text: table cells, form values, descriptions. */
  font-family: var(--font-family-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
}
.text-body-medium-strong {  /* Body/Medium Strong: Emphasis inside Body/Medium, table primary column. */
  font-family: var(--font-family-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-semibold);
}
.text-body-small {  /* Body/Small: Helper text, captions, metadata, chart axis labels. */
  font-family: var(--font-family-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-regular);
}
.text-label-medium {  /* Label/Medium: Button labels, form labels, navigation items, table headers. */
  font-family: var(--font-family-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
}
.text-label-small {  /* Label/Small: Small buttons, badges, chips, tags. */
  font-family: var(--font-family-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
}
.text-overline {  /* Overline: Section eyebrow labels and grouped navigation headers. */
  font-family: var(--font-family-sans);
  font-size: var(--type-overline-size);
  line-height: var(--type-overline-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/*
 * Light scope (#343): a part of the page that keeps the light theme when the panel is dark — message
 * previews, phone frames, the in-game ad view. Put `data-theme="light"` on its container (the page root is
 * left to zuzzuu-tokens.css, so a light page does not change at all). The values are
 * the light ones of zuzzuu-tokens.css for every token the dark theme changes (generated from that file:
 * regenerate when the tokens change; lightScope.test.js checks they match). The tokens built from other
 * tokens (shadows, focus ring) are declared again so they take the light values inside the scope.
 * `:where` keeps the rule at zero specificity: the container's own classes still set its colours.
 */
:where([data-theme="light"]:not(:root)) {
  --color-bg-canvas: var(--color-neutral-100);
  --color-bg-surface: var(--color-base-white);
  --color-bg-surface-raised: var(--color-base-white);
  --color-bg-surface-sunken: var(--color-neutral-50);
  --color-bg-subtle: var(--color-neutral-200);
  --color-bg-hover: var(--color-neutral-50);
  --color-bg-pressed: var(--color-neutral-200);
  --color-bg-selected: var(--color-blue-50);
  --color-bg-disabled: var(--color-neutral-100);
  --color-bg-inverse: var(--color-neutral-900);
  --color-bg-overlay: var(--color-alpha-black-40);
  --color-bg-brand-subtle: var(--color-blue-50);
  --color-bg-brand-subtle-hover: var(--color-blue-100);
  --color-bg-success-subtle: var(--color-green-50);
  --color-bg-warning-subtle: var(--color-amber-50);
  --color-bg-danger-subtle: var(--color-red-50);
  --color-bg-danger-subtle-hover: var(--color-red-100);
  --color-bg-neutral-subtle: var(--color-neutral-100);
  --color-bg-accent-purple-subtle: var(--color-purple-50);
  --color-bg-channel-mobile-subtle: var(--color-cyan-50);
  --color-bg-channel-web-subtle: var(--color-purple-50);
  --color-bg-channel-store-subtle: var(--color-magenta-50);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-550);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-base-white);
  --color-text-success: var(--color-green-700);
  --color-text-warning: var(--color-amber-700);
  --color-text-danger: var(--color-red-600);
  --color-text-accent-purple: var(--color-purple-600);
  --color-text-channel-mobile: var(--color-cyan-700);
  --color-text-channel-web: var(--color-purple-500);
  --color-text-channel-store: var(--color-magenta-500);
  --color-icon-primary: var(--color-neutral-900);
  --color-icon-secondary: var(--color-neutral-600);
  --color-icon-tertiary: var(--color-neutral-500);
  --color-icon-disabled: var(--color-neutral-400);
  --color-icon-inverse: var(--color-base-white);
  --color-icon-success: var(--color-green-600);
  --color-icon-warning: var(--color-amber-600);
  --color-icon-danger: var(--color-red-600);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);
  --color-border-disabled: var(--color-neutral-200);
  --color-border-success: var(--color-green-600);
  --color-border-warning: var(--color-amber-600);
  --color-border-danger: var(--color-red-600);
  --color-border-accent-purple: var(--color-purple-500);
  --color-border-channel-web: var(--color-purple-500);
  --color-border-channel-store: var(--color-magenta-500);
  --color-channel-web: var(--color-purple-500);
  --color-channel-store: var(--color-magenta-500);
  --color-chart-series-2: var(--color-purple-500);
  --color-chart-series-3: var(--color-magenta-500);
  --color-chart-series-5: var(--color-green-500);
  --color-chart-grid: var(--color-neutral-200);
  --color-chart-axis: var(--color-neutral-500);
  --color-chart-comparison: var(--color-neutral-300);
  --color-shadow-default: var(--color-alpha-black-8);
  --color-shadow-strong: var(--color-alpha-black-16);
  --color-shadow-subtle: var(--color-alpha-black-4);
  --color-border-hover: var(--color-neutral-500);
  --color-bg-control: var(--color-neutral-300);
  --color-bg-accent-purple-subtle-hover: var(--color-purple-100);
  --color-bg-success-subtle-hover: var(--color-green-100);
  --color-bg-skeleton: var(--color-neutral-200);
  --color-bg-control-hover: var(--color-neutral-400);
  --color-bg-inset: var(--color-neutral-100);
  --color-border-brand-subtle: var(--color-blue-200);
  --color-border-success-subtle: var(--color-green-200);
  --color-border-warning-subtle: var(--color-amber-200);
  --color-border-danger-subtle: var(--color-red-200);
  --color-bg-accent-cyan-subtle: var(--color-cyan-50);
  --color-bg-accent-magenta-subtle: var(--color-magenta-50);
  --color-icon-accent-purple: var(--color-purple-600);
  --color-icon-accent-cyan: var(--color-cyan-700);
  --color-icon-accent-magenta: var(--color-magenta-600);
  --shadow-elevation-1: 0px 1px 2px 0px var(--color-shadow-default);
  --shadow-elevation-2: 0px 1px 2px 0px var(--color-shadow-subtle), 0px 10px 15px -3px var(--color-shadow-default);
  --shadow-elevation-3: 0px 4px 8px -2px var(--color-shadow-default), 0px 12px 24px -4px var(--color-shadow-strong);
  --shadow-elevation-4: 0px 8px 16px -4px var(--color-shadow-default), 0px 24px 48px -12px var(--color-shadow-strong);
  --focus-ring-color: var(--color-border-focus);
  color-scheme: light;
  color: var(--color-text-primary);
}
button,
input,
select,
textarea {
  font-family: inherit;
}
/*
 * Page scrollbar — the kit's Table / Horizontal scrollbar (Figma 149:148) for the page itself: 6 px
 * track (bg/subtle) and thumb (icon/tertiary), radius 3, no arrow buttons. Firefox: thin standard one.
 */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#root::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#root::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 7px;
  background-clip: padding-box;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#root::-webkit-scrollbar-track {
  background-color: var(--color-bg-subtle);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#root::-webkit-scrollbar-thumb {
  background-color: var(--color-icon-tertiary);
}
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
#root::-webkit-scrollbar-button {
  display: none;
}
@supports not selector(::-webkit-scrollbar) {
  html,
  body,
  #root {
    scrollbar-width: thin;
    scrollbar-color: var(--color-icon-tertiary) var(--color-bg-subtle);
  }
}
/*
 * Select arrow — Design System "Select": chevron-down, icon 20, 12 from the right edge like every
 * trailing field icon. The native arrow is replaced by the same chevron drawn from two strokes:
 * the icon's chevron is half the icon wide and a quarter high, with the Medium icon stroke.
 * Drawn with gradients so that it takes its colour from a token (an SVG data URI cannot read one).
 */
select:not([multiple]) {
  --select-chevron: calc(var(--size-icon-md) / 4);
  --select-chevron-start: calc(50% - var(--stroke-medium) / 2);
  --select-chevron-end: calc(50% + var(--stroke-medium) / 2);
  --select-chevron-color: var(--color-icon-secondary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: calc(var(--spacing-12) + var(--size-icon-md) + var(--spacing-8));
  background-image:
    linear-gradient(
      45deg,
      transparent var(--select-chevron-start),
      var(--select-chevron-color) var(--select-chevron-start),
      var(--select-chevron-color) var(--select-chevron-end),
      transparent var(--select-chevron-end)
    ),
    linear-gradient(
      -45deg,
      transparent var(--select-chevron-start),
      var(--select-chevron-color) var(--select-chevron-start),
      var(--select-chevron-color) var(--select-chevron-end),
      transparent var(--select-chevron-end)
    );
  background-repeat: no-repeat;
  background-size: var(--select-chevron) var(--select-chevron);
  background-position:
    right calc(var(--spacing-12) + var(--select-chevron) * 2) center,
    right calc(var(--spacing-12) + var(--select-chevron)) center;
}
select:not([multiple]):disabled {
  --select-chevron-color: var(--color-icon-disabled);
}
/*
 * Design System — Menu (Select & Menu page): surface-raised, Elevation/3, radius lg, 4 px inset.
 * Menu Item 36 px; selected = brand subtle + brand label + check; destructive last, after a divider.
 */
._menu_w5z6n_5 {
  position: fixed;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  min-width: calc(var(--size-control-md) * 5);
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface-raised);
  box-shadow: var(--shadow-elevation-3);
  overflow: hidden;
}

._list_w5z6n_18 {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--spacing-4);
  overflow-y: auto;
  list-style: none;
}

._list_w5z6n_18:focus {
  outline: none;
}

._item_w5z6n_31 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  min-height: calc(var(--size-control-md) - var(--spacing-4));
  padding: var(--spacing-6) var(--spacing-8);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
  text-align: left;
  cursor: pointer;
}

._item_w5z6n_31 svg {
  flex: 0 0 auto;
  color: var(--color-icon-secondary);
}

._itemText_w5z6n_54 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

._itemDescription_w5z6n_61 {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._item_w5z6n_31:hover:not([aria-disabled='true']),
._itemActive_w5z6n_68:not([aria-disabled='true']) {
  background: var(--color-bg-hover);
}

/* Keyboard focus = 2 px brand ring inside the item */
._itemActive_w5z6n_68 {
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._itemSelected_w5z6n_78,
._itemSelected_w5z6n_78:hover:not([aria-disabled='true']) {
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-medium);
}

._itemSelected_w5z6n_78 svg {
  color: var(--color-icon-brand);
}

._check_w5z6n_89 {
  margin-left: auto;
}

._itemDestructive_w5z6n_93,
._itemDestructive_w5z6n_93 svg {
  color: var(--color-text-danger);
}

._itemDestructive_w5z6n_93:hover:not([aria-disabled='true']) {
  background: var(--color-bg-danger-subtle);
}

._item_w5z6n_31[aria-disabled='true'] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._item_w5z6n_31[aria-disabled='true'] svg {
  color: var(--color-icon-disabled);
}

/* Group label (used with the text-overline class) and Divider */
._groupLabel_w5z6n_112 {
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-4);
  color: var(--color-text-secondary);
}

._divider_w5z6n_117 {
  height: var(--stroke-thin);
  margin: var(--spacing-4) calc(var(--spacing-4) * -1);
  background: var(--color-border-subtle);
}

._empty_w5z6n_123 {
  padding: var(--spacing-8);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

/* Multi select menu: search on top, Clear / Apply at the bottom */
._search_w5z6n_131 {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-4);
}

._searchIcon_w5z6n_138 {
  position: absolute;
  left: var(--spacing-20);
  display: flex;
  color: var(--color-icon-secondary);
  pointer-events: none;
}

._searchInput_w5z6n_146 {
  width: 100%;
  height: var(--size-control-sm);
  padding: 0 var(--spacing-12) 0 var(--spacing-40);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

._searchInput_w5z6n_146:focus {
  border-color: var(--color-border-focus);
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._searchInput_w5z6n_146::-moz-placeholder {
  color: var(--color-text-tertiary);
}

._searchInput_w5z6n_146::placeholder {
  color: var(--color-text-tertiary);
}

._footer_w5z6n_168 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  border-top: var(--stroke-thin) solid var(--color-border-subtle);
}

/* Checkbox of a multi select item (20 px, as Checkbox) */
._box_w5z6n_178 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border: var(--stroke-medium) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
}

._box_w5z6n_178 svg {
  color: var(--color-icon-on-brand);
}

._boxChecked_w5z6n_194 {
  border-color: var(--color-border-brand);
  background: var(--color-bg-brand);
}

._item_w5z6n_31[aria-disabled='true'] ._box_w5z6n_178 {
  border-color: var(--color-border-disabled);
  background: var(--color-bg-disabled);
}
/*
 * Shared page, form and component styles — Zuzzuu Dashboard 2027.
 * Each block follows the component of the same name in the Zuzzuu Design System library.
 * Only semantic design tokens; no colour or size literals (hairlines use --stroke-thin).
 */

/* ── Page ─────────────────────────────────────────────────────────────────── */
._page_1uq7k_8 {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
  padding: var(--layout-margin);
}

/* Inside the product shell the page margin comes from the shell */
:root[data-embedded] ._page_1uq7k_8 {
  padding: 0;
}

/* Page Header: title (Heading/H1) + description (Body/Medium), page actions on the right */
._pageHeader_1uq7k_21 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

._pageHeaderActionsOnly_1uq7k_29 {
  justify-content: flex-end;
}

._pageTitle_1uq7k_33 {
  margin: 0;
  color: var(--color-text-primary);
}

._pageDescription_1uq7k_38 {
  margin: var(--spacing-4) 0 0;
  color: var(--color-text-secondary);
}

._pageActions_1uq7k_43 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

/* ── Card: outlined (border/subtle, radius lg), no shadow ─────────────────── */
._card_1uq7k_50 {
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
}

._cardBody_1uq7k_57 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--layout-card-padding);
}

/* Card header: title (Heading/H4) + supporting description (Body/Small), optional action */
/* A card header above a table: the toolbar of the table brings its own 16 px padding */
._cardHeader_1uq7k_66 {
  padding-bottom: var(--spacing-8);
}

/* Card header inside a padded card */
._cardHeaderPlain_1uq7k_71 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

._cardHeaderRow_1uq7k_77 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}

._cardHeaderText_1uq7k_85 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

._cardTitle_1uq7k_92 {
  margin: 0;
  color: var(--color-text-primary);
}

._cardDescription_1uq7k_97 {
  margin: 0;
  max-width: 72ch;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

/* ── Button: Medium 40 (padding 16, gap 8, icon 20) · Small 32 (padding 12, gap 6, icon 16) ── */
._button_1uq7k_106 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  height: var(--size-control-md);
  padding: 0 var(--spacing-16);
  border: var(--stroke-thin) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

._button_1uq7k_106:disabled {
  cursor: not-allowed;
}

._button_1uq7k_106[data-loading] {
  cursor: progress;
}

._buttonSm_1uq7k_132 {
  height: var(--size-control-sm);
  padding: 0 var(--spacing-12);
  gap: var(--spacing-6);
}

._buttonContent_1uq7k_138 {
  display: inline-flex;
  align-items: center;
  gap: inherit;
}

/* Loading keeps the width: the label is hidden and the spinner is centred */
._buttonContentHidden_1uq7k_145 {
  visibility: hidden;
}

._buttonSpinner_1uq7k_149 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

._primary_1uq7k_157 {
  background: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}
._primary_1uq7k_157:hover:not(:disabled) {
  background: var(--color-bg-brand-hover);
}
._primary_1uq7k_157:active:not(:disabled) {
  background: var(--color-bg-brand-pressed);
}

._secondary_1uq7k_168 {
  background: var(--color-bg-surface);
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
}
._secondary_1uq7k_168:hover:not(:disabled) {
  background: var(--color-bg-brand-subtle);
}
._secondary_1uq7k_168:active:not(:disabled) {
  background: var(--color-bg-brand-subtle-hover);
}

._tertiary_1uq7k_180 {
  background: transparent;
  color: var(--color-text-brand);
}
._tertiary_1uq7k_180:hover:not(:disabled) {
  background: var(--color-bg-brand-subtle);
}
._tertiary_1uq7k_180:active:not(:disabled) {
  background: var(--color-bg-brand-subtle-hover);
}

._neutral_1uq7k_191 {
  background: var(--color-bg-surface);
  border-color: var(--color-border-default);
  color: var(--color-text-brand);
}
._neutral_1uq7k_191:hover:not(:disabled) {
  background: var(--color-bg-hover);
}
._neutral_1uq7k_191:active:not(:disabled) {
  background: var(--color-bg-pressed);
}

._destructive_1uq7k_203 {
  background: var(--color-bg-danger);
  color: var(--color-text-on-brand);
}
._destructive_1uq7k_203:hover:not(:disabled) {
  background: var(--color-bg-danger-hover);
}
._destructive_1uq7k_203:active:not(:disabled) {
  background: var(--color-bg-danger-pressed);
}

._destructiveOutline_1uq7k_214 {
  background: var(--color-bg-surface);
  border-color: var(--color-border-danger);
  color: var(--color-text-danger);
}
._destructiveOutline_1uq7k_214:hover:not(:disabled) {
  background: var(--color-bg-danger-subtle);
}
._destructiveOutline_1uq7k_214:active:not(:disabled) {
  background: var(--color-bg-danger-subtle-hover);
}

/* Disabled (not loading) */
._button_1uq7k_106:disabled:not([data-loading]) {
  color: var(--color-text-disabled);
}
._primary_1uq7k_157:disabled:not([data-loading]),
._destructive_1uq7k_203:disabled:not([data-loading]),
._neutral_1uq7k_191:disabled:not([data-loading]) {
  background: var(--color-bg-disabled);
}
._secondary_1uq7k_168:disabled:not([data-loading]),
._neutral_1uq7k_191:disabled:not([data-loading]),
._destructiveOutline_1uq7k_214:disabled:not([data-loading]) {
  border-color: var(--color-border-disabled);
}

/* Inline link (Button / Tertiary used inside a sentence or a table cell) */
._link_1uq7k_242 {
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-brand);
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
._link_1uq7k_242:hover:not(:disabled) {
  color: var(--color-text-brand-hover);
  text-decoration: underline;
}
._link_1uq7k_242:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ── Spinner: Small 16 · Medium 20 · Large 32, 800 ms linear ──────────────── */
._spinner_1uq7k_263 {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border: var(--stroke-thick) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: _ui-spin_1uq7k_1 800ms linear infinite;
}
._spinnerSm_1uq7k_273 {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
._spinnerLg_1uq7k_277 {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  border-width: calc(var(--stroke-thick) + var(--stroke-thin));
}
._spinnerBrand_1uq7k_282 {
  color: var(--color-icon-brand);
}
._spinnerNeutral_1uq7k_285 {
  color: var(--color-icon-secondary);
}
._spinnerDanger_1uq7k_288 {
  color: var(--color-icon-danger);
}
._spinnerOnColor_1uq7k_291 {
  color: var(--color-icon-on-brand);
}

@keyframes _ui-spin_1uq7k_1 {
  to {
    transform: rotate(360deg);
  }
}

/* ── Icon Button: XSmall 24 (row actions, dismiss) · Small 32 · Medium 40 ─── */
._iconButton_1uq7k_302 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
  border: var(--stroke-thin) solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
._iconButtonXs_1uq7k_316 {
  width: var(--spacing-24);
  height: var(--spacing-24);
  border-radius: var(--radius-sm);
}
._iconButtonMd_1uq7k_321 {
  width: var(--size-control-md);
  height: var(--size-control-md);
}
._iconButton_1uq7k_302:disabled {
  cursor: not-allowed;
  color: var(--color-icon-disabled);
}

/* Subtle: tinted row actions */
._iconBrand_1uq7k_331 {
  background: var(--color-bg-brand-subtle);
  color: var(--color-icon-brand);
}
._iconBrand_1uq7k_331:hover:not(:disabled) {
  background: var(--color-bg-brand-subtle-hover);
}
._iconPurple_1uq7k_338 {
  background: var(--color-bg-accent-purple-subtle);
  color: var(--color-icon-accent-purple);
}
._iconPurple_1uq7k_338:hover:not(:disabled) {
  background: var(--color-bg-accent-purple-subtle-hover);
}
._iconDanger_1uq7k_345 {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger);
}
._iconDanger_1uq7k_345:hover:not(:disabled) {
  background: var(--color-bg-danger-subtle-hover);
}
._iconNeutral_1uq7k_352 {
  background: var(--color-bg-neutral-subtle);
  color: var(--color-icon-secondary);
}
._iconNeutral_1uq7k_352:hover:not(:disabled) {
  background: var(--color-bg-pressed);
}
._iconBrand_1uq7k_331:disabled,
._iconPurple_1uq7k_338:disabled,
._iconDanger_1uq7k_345:disabled,
._iconNeutral_1uq7k_352:disabled {
  background: var(--color-bg-disabled);
}

/* Ghost: borderless (close buttons, inline actions) */
._iconGhost_1uq7k_367 {
  color: var(--color-icon-secondary);
}
._iconGhost_1uq7k_367:hover:not(:disabled) {
  background: var(--color-bg-hover);
}
._iconGhost_1uq7k_367:active:not(:disabled) {
  background: var(--color-bg-pressed);
}

/* Outline: neutral bordered (card header, picker trigger, refresh) */
._iconOutline_1uq7k_378 {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-icon-secondary);
}
._iconOutline_1uq7k_378:hover:not(:disabled) {
  background: var(--color-bg-hover);
}
._iconOutline_1uq7k_378:active:not(:disabled) {
  background: var(--color-bg-pressed);
}
._iconOutline_1uq7k_378:disabled {
  border-color: var(--color-border-disabled);
  background: var(--color-bg-disabled);
}

/* ── Tooltip: bg/inverse, Body/Small, max width 240, 6 px arrow, 8 px from the target ── */
._tooltipAnchor_1uq7k_395 {
  display: inline-flex;
}

._tooltip_1uq7k_395 {
  position: fixed;
  z-index: 1400;
  max-width: calc(var(--size-control-md) * 6);
  padding: var(--spacing-6) var(--spacing-8);
  border-radius: var(--radius-sm);
  background: var(--color-bg-inverse);
  box-shadow: var(--shadow-elevation-3);
  color: var(--color-text-inverse);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-regular);
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

._tooltipArrow_1uq7k_416 {
  position: absolute;
  width: var(--spacing-8);
  height: var(--spacing-8);
  background: var(--color-bg-inverse);
  transform: translate(-50%, -50%) rotate(45deg);
}
._tooltipArrowBottom_1uq7k_423 {
  top: 100%;
}
._tooltipArrowTop_1uq7k_426 {
  top: 0;
}

/* ── Fields: label above, 40 px control, helper / error below ─────────────── */
._field_1uq7k_431 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
}

._required_1uq7k_442 {
  margin-left: var(--spacing-4);
  color: var(--color-text-danger);
}

._input_1uq7k_447,
._select_1uq7k_448,
._textarea_1uq7k_449 {
  width: 100%;
  max-width: 100%;
  height: var(--size-control-md);
  padding: 0 var(--spacing-12);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
  transition: border-color 120ms ease;
}

._input_1uq7k_447:hover:not(:disabled):not(:focus),
._select_1uq7k_448:hover:not(:disabled):not(:focus),
._textarea_1uq7k_449:hover:not(:disabled):not(:focus) {
  border-color: var(--color-border-hover);
}

/* Focused = 2 px brand border, drawn inside the field so the layout does not move */
._input_1uq7k_447:focus,
._select_1uq7k_448:focus,
._textarea_1uq7k_449:focus {
  border-color: var(--color-border-focus);
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._input_1uq7k_447::-moz-placeholder, ._textarea_1uq7k_449::-moz-placeholder {
  color: var(--color-text-tertiary);
}

._input_1uq7k_447::placeholder,
._textarea_1uq7k_449::placeholder {
  color: var(--color-text-tertiary);
}

._input_1uq7k_447:disabled,
._select_1uq7k_448:disabled,
._textarea_1uq7k_449:disabled {
  border-color: var(--color-border-disabled);
  background-color: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._input_1uq7k_447:-moz-read-only:not(:disabled), ._textarea_1uq7k_449:-moz-read-only:not(:disabled) {
  border-color: var(--color-border-subtle);
  background-color: var(--color-bg-surface-sunken);
}

._input_1uq7k_447:read-only:not(:disabled),
._textarea_1uq7k_449:read-only:not(:disabled) {
  border-color: var(--color-border-subtle);
  background-color: var(--color-bg-surface-sunken);
}

/* Error = danger border + message with an icon under the field */
._inputError_1uq7k_500,
._inputError_1uq7k_500:hover:not(:disabled):not(:focus),
._input_1uq7k_447[aria-invalid='true'],
._select_1uq7k_448[aria-invalid='true'],
._textarea_1uq7k_449[aria-invalid='true'] {
  border-color: var(--color-border-danger);
}

/* Text Area: default height 120 */
._textarea_1uq7k_449 {
  height: auto;
  min-height: calc(var(--size-control-md) * 3);
  padding: var(--spacing-8) var(--spacing-12);
  resize: vertical;
}

._hint_1uq7k_516 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-regular);
}

._errorText_1uq7k_524 {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  color: var(--color-text-danger);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-regular);
}
._errorText_1uq7k_524 svg {
  flex: 0 0 auto;
  color: var(--color-icon-danger);
}

/* Character counter under a Text Area: right-aligned, Body/Small */
._counter_1uq7k_539 {
  color: var(--color-text-tertiary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-regular);
  font-variant-numeric: tabular-nums;
}

._formStack_1uq7k_547 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

._formGrid_1uq7k_553 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16) var(--spacing-24);
  align-items: start;
}

._gridFull_1uq7k_560 {
  grid-column: 1 / -1;
}

._groupTitle_1uq7k_564 {
  margin: var(--spacing-8) 0 0;
  padding-top: var(--spacing-16);
  border-top: var(--stroke-thin) solid var(--color-border-subtle);
  color: var(--color-text-primary);
}

._checkList_1uq7k_571 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  max-height: calc(var(--size-control-md) * 4.5);
  overflow-y: auto;
  padding: var(--spacing-12);
  border: var(--stroke-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-weight: var(--font-weight-regular);
}

._checkListColumns_1uq7k_584 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

._inlineRow_1uq7k_589 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12) var(--spacing-24);
}

/* ── Data display ─────────────────────────────────────────────────────────── */
._muted_1uq7k_597 {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._numeric_1uq7k_603 {
  font-variant-numeric: tabular-nums;
}

._nowrap_1uq7k_607 {
  white-space: nowrap;
}

._detailList_1uq7k_611 {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--spacing-8) var(--spacing-24);
  margin: 0;
}
._detailList_1uq7k_611 dt {
  color: var(--color-text-secondary);
}
._detailList_1uq7k_611 dd {
  margin: 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Alert: inline, persistent. Icon + title, optional description and action */
._alert_1uq7k_627 {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--stroke-thin) solid var(--color-border-brand-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-primary);
}
._alertIcon_1uq7k_637 {
  display: flex;
  flex: 0 0 auto;
  color: var(--color-icon-brand);
}
._alertContent_1uq7k_642 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}
._alertTitle_1uq7k_649 {
  margin: 0;
  color: var(--color-text-primary);
}
._alertDescription_1uq7k_653 {
  margin: 0;
  color: var(--color-text-secondary);
}
/* A note without a title: its text is the message (#298) */
._alertMessage_1uq7k_658 {
  margin: 0;
  color: var(--color-text-primary);
}
/* Close button of a dismissible alert (`onDismiss`) */
._alertClose_1uq7k_663 {
  display: flex;
  flex: 0 0 auto;
}
._alertActions_1uq7k_667 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-top: var(--spacing-4);
}
._alertSuccess_1uq7k_673 {
  border-color: var(--color-border-success-subtle);
  background: var(--color-bg-success-subtle);
}
._alertSuccess_1uq7k_673 ._alertIcon_1uq7k_637 {
  color: var(--color-icon-success);
}
._alertWarning_1uq7k_680 {
  border-color: var(--color-border-warning-subtle);
  background: var(--color-bg-warning-subtle);
}
._alertWarning_1uq7k_680 ._alertIcon_1uq7k_637 {
  color: var(--color-icon-warning);
}
._alertDanger_1uq7k_687 {
  border-color: var(--color-border-danger-subtle);
  background: var(--color-bg-danger-subtle);
}
._alertDanger_1uq7k_687 ._alertIcon_1uq7k_637 {
  color: var(--color-icon-danger);
}

/* Plain table inside a dialog (same header and cell styles as the list table, without a toolbar) */
._plainTable_1uq7k_696 {
  width: 100%;
  border-collapse: collapse;
}
._plainTable_1uq7k_696 th,
._plainTable_1uq7k_696 td {
  padding: var(--spacing-8) var(--spacing-16);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--stroke-thin) solid var(--color-border-subtle);
}
._plainTable_1uq7k_696 th {
  height: calc(var(--size-control-md) + var(--spacing-4));
  background: var(--color-bg-surface-sunken);
  border-bottom: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
._plainTable_1uq7k_696 td {
  height: calc(var(--size-control-md) + var(--spacing-16));
}
._plainTable_1uq7k_696 tbody tr:last-child td {
  border-bottom: 0;
}
._plainTable_1uq7k_696 ._right_1uq7k_723 {
  text-align: right;
}

/* ── Empty State: icon + title + description + action (Small inside cards and tables) ── */
._emptyState_1uq7k_728 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-48) var(--spacing-24);
  text-align: center;
  color: var(--color-text-secondary);
}
._emptyStateSm_1uq7k_737 {
  padding: var(--spacing-32) var(--spacing-24);
}
._emptyIcon_1uq7k_740 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-48);
  height: var(--spacing-48);
  margin-bottom: var(--spacing-8);
  border-radius: var(--radius-full);
  background: var(--color-bg-neutral-subtle);
  color: var(--color-icon-secondary);
}
._emptyIconLg_1uq7k_751 {
  width: var(--spacing-64);
  height: var(--spacing-64);
}
._emptyIconDanger_1uq7k_755 {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger);
}
._emptyTitle_1uq7k_759 {
  margin: 0;
  color: var(--color-text-primary);
}
._emptyDescription_1uq7k_763 {
  margin: 0;
  max-width: 60ch;
}
._emptyActions_1uq7k_767 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
  margin-top: var(--spacing-16);
}

/* ── Skeleton: placeholder while content loads, 1.5 s shimmer ─────────────── */
._skeleton_1uq7k_776 {
  display: block;
  width: 60%;
  height: var(--type-body-sm-size);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-skeleton) 25%,
    var(--color-bg-hover) 50%,
    var(--color-bg-skeleton) 75%
  );
  background-size: 200% 100%;
  animation: _ui-shimmer_1uq7k_1 1.5s linear infinite;
}

@keyframes _ui-shimmer_1uq7k_1 {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

._srOnly_1uq7k_800 {
  position: absolute;
  width: var(--stroke-thin);
  height: var(--stroke-thin);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 767px) {
  ._formGrid_1uq7k_553,
  ._checkListColumns_1uq7k_584 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Design System — Badge · Subtle · 24 px · radius/sm */
._badge_1c7zp_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  height: var(--spacing-24);
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

._dot_1c7zp_15 {
  width: var(--spacing-6);
  height: var(--spacing-6);
  border-radius: var(--radius-full);
  background: currentColor;
  flex: 0 0 auto;
}

._neutral_1c7zp_23 {
  background: var(--color-bg-neutral-subtle);
  color: var(--color-text-secondary);
}

._brand_1c7zp_28 {
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
}

._success_1c7zp_33 {
  background: var(--color-bg-success-subtle);
  color: var(--color-text-success);
}

._warning_1c7zp_38 {
  background: var(--color-bg-warning-subtle);
  color: var(--color-text-warning);
}

._danger_1c7zp_43 {
  background: var(--color-bg-danger-subtle);
  color: var(--color-text-danger);
}

._purple_1c7zp_48 {
  background: var(--color-bg-accent-purple-subtle);
  color: var(--color-text-accent-purple);
}

/* Solid: one high-emphasis status per view */
._solid_1c7zp_54._neutral_1c7zp_23 {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

._solid_1c7zp_54._brand_1c7zp_28 {
  background: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}

._solid_1c7zp_54._success_1c7zp_33 {
  background: var(--color-bg-success);
  color: var(--color-text-on-brand);
}

._solid_1c7zp_54._warning_1c7zp_38 {
  background: var(--color-bg-warning);
  color: var(--color-text-on-warning);
}

._solid_1c7zp_54._danger_1c7zp_43 {
  background: var(--color-bg-danger);
  color: var(--color-text-on-brand);
}

._solid_1c7zp_54._purple_1c7zp_48 {
  background: var(--color-bg-accent-purple);
  color: var(--color-text-on-brand);
}
/*
 * Design System — Calendar (month view, Mon–Sun, 6 weeks) and the Date & time footer of Date Field.
 * Day cell 36 px, radius md; today = brand label, selected = brand fill, outside = tertiary text.
 */
._calendar_ajcqr_5 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-12);
}

._header_ajcqr_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}

._month_ajcqr_19 {
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

._grid_ajcqr_27 {
  display: grid;
  grid-template-columns: repeat(7, calc(var(--size-control-md) - var(--spacing-4)));
  gap: var(--spacing-2);
}

._grid_ajcqr_27:focus {
  outline: none;
}

._weekday_ajcqr_37 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--spacing-24);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

._day_ajcqr_49 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--size-control-md) - var(--spacing-4));
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

._day_ajcqr_49:hover:not(:disabled):not(._selected_ajcqr_65) {
  background: var(--color-bg-hover);
}

._outside_ajcqr_69 {
  color: var(--color-text-tertiary);
}

._today_ajcqr_73 {
  color: var(--color-text-brand);
  font-weight: var(--font-weight-semibold);
}

._selected_ajcqr_65,
._selected_ajcqr_65:hover {
  background: var(--color-bg-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--font-weight-medium);
}

/* The keyboard position shows only while the grid has the focus */
._grid_ajcqr_27:focus ._focused_ajcqr_86 {
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._day_ajcqr_49:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._time_ajcqr_96 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-12);
  border-top: var(--stroke-thin) solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

._timeInput_ajcqr_108 {
  width: calc(var(--size-control-md) * 3);
  height: var(--size-control-sm);
}

._footer_ajcqr_113 {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
}
/* Design System — Checkbox: control 20 px (= the line height of Body/Medium), label on the right */
._root_14bwz_2 {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}

._disabled_14bwz_13 {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* The native input stays in the page for the keyboard and screen readers; the box is what is seen */
._input_14bwz_19 {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

._box_14bwz_25 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border: var(--stroke-medium) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-icon-on-brand);
  transition: background-color 120ms ease, border-color 120ms ease;
}

._root_14bwz_2:hover ._input_14bwz_19:not(:disabled) + ._box_14bwz_25 {
  border-color: var(--color-border-hover);
}

._input_14bwz_19:checked + ._box_14bwz_25,
._input_14bwz_19[data-mixed] + ._box_14bwz_25 {
  border-color: var(--color-border-brand);
  background: var(--color-bg-brand);
}

._root_14bwz_2:hover ._input_14bwz_19:checked:not(:disabled) + ._box_14bwz_25,
._root_14bwz_2:hover ._input_14bwz_19[data-mixed]:not(:disabled) + ._box_14bwz_25 {
  border-color: var(--color-bg-brand-hover);
  background: var(--color-bg-brand-hover);
}

._input_14bwz_19:focus-visible + ._box_14bwz_25 {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

._input_14bwz_19:disabled + ._box_14bwz_25 {
  border-color: var(--color-border-disabled);
  background: var(--color-bg-disabled);
}

._input_14bwz_19:disabled:checked + ._box_14bwz_25,
._input_14bwz_19:disabled[data-mixed] + ._box_14bwz_25 {
  border-color: var(--color-bg-control);
  background: var(--color-bg-control);
}
/*
 * Design System — Text Field anatomy shared by Text Field, Text Area, Select, Multi Select and
 * Date Field: label above (with an optional action on the right), 40 px control, helper or error below.
 */
._labelRow_me721_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}

._labelAction_me721_12 {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-brand);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

._labelAction_me721_12:hover {
  color: var(--color-text-brand-hover);
  text-decoration: underline;
}

._below_me721_28 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
}

._below_me721_28 > :last-child:not(:first-child) {
  margin-left: auto;
}

/* Control with a leading and / or a trailing icon */
._control_me721_40 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

._leading_me721_47,
._trailing_me721_48 {
  position: absolute;
  display: flex;
  color: var(--color-icon-secondary);
  pointer-events: none;
}

._leading_me721_47 {
  left: var(--spacing-12);
}

._trailing_me721_48 {
  right: var(--spacing-12);
}

._withLeading_me721_63 {
  padding-left: var(--spacing-40);
}

._withTrailing_me721_67 {
  padding-right: var(--spacing-40);
}

/* Select / Multi Select trigger: looks like an input, chevron on the right */
._trigger_me721_72 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  height: var(--size-control-md);
  padding: 0 var(--spacing-12);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease;
}

._trigger_me721_72:hover:not([aria-disabled='true']):not(:focus) {
  border-color: var(--color-border-hover);
}

._trigger_me721_72:focus,
._triggerOpen_me721_96 {
  border-color: var(--color-border-focus);
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._trigger_me721_72[aria-invalid='true'] {
  border-color: var(--color-border-danger);
}

._trigger_me721_72[aria-disabled='true'] {
  border-color: var(--color-border-disabled);
  background: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._trigger_me721_72 > svg {
  flex: 0 0 auto;
  color: var(--color-icon-secondary);
}

._trigger_me721_72[aria-disabled='true'] > svg {
  color: var(--color-icon-disabled);
}

._value_me721_122 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._placeholder_me721_130 {
  color: var(--color-text-tertiary);
}

/* Date Field `clearable`: the clear action inside the right edge of the 40 px field, as in the Search Field */
._dateClear_me721_135 {
  position: absolute;
  top: calc((var(--size-control-md) - var(--spacing-24)) / 2);
  right: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-24);
  height: var(--spacing-24);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-icon-secondary);
  cursor: pointer;
}

._dateClear_me721_135:hover {
  background: var(--color-bg-hover);
  color: var(--color-icon-primary);
}

._dateClear_me721_135:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._trigger_me721_72[aria-disabled='true'] ._placeholder_me721_130 {
  color: var(--color-text-disabled);
}

/* Multi Select: at most two Tags then "+N", on one line */
._tags_me721_167 {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--spacing-4);
  min-width: 0;
  overflow: hidden;
}

._overflow_me721_176 {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
}

/* Native date / time inputs: the calendar icon of the browser stays, coloured like the icons */
._dateInput_me721_185::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

._dateInput_me721_185:disabled::-webkit-calendar-picker-indicator {
  cursor: not-allowed;
}
/* Design System — Tag: interactive chip for filters, segments and multi-select values;
   24 px, radius sm, Label/Small — the same height and radius as Badge and Channel Tag */
._tag_t489s_3 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--spacing-4);
  max-width: 100%;
  height: var(--spacing-24);
  padding: 0 var(--spacing-8);
  border: var(--stroke-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

._removable_t489s_21 {
  padding-right: var(--spacing-4);
}

._label_t489s_25 {
  overflow: hidden;
  text-overflow: ellipsis;
}

._clickable_t489s_30 {
  cursor: pointer;
}

._clickable_t489s_30:hover:not(._disabled_t489s_34),
._tag_t489s_3:has(._remove_t489s_35:hover):not(._disabled_t489s_34) {
  border-color: var(--color-border-strong);
  background: var(--color-bg-hover);
}

._clickable_t489s_30:focus-visible {
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._selected_t489s_45 {
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
}

/* A chosen value that is no longer valid (deleted / inactive) */
._danger_t489s_51 {
  border-color: var(--color-border-danger);
  background: var(--color-bg-danger-subtle);
  color: var(--color-text-danger);
}

._danger_t489s_51 svg {
  color: var(--color-icon-danger);
}

._disabled_t489s_34 {
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._tag_t489s_3 svg {
  flex: 0 0 auto;
  color: var(--color-icon-secondary);
}

._selected_t489s_45 svg {
  color: var(--color-icon-brand);
}

._disabled_t489s_34 svg {
  color: var(--color-icon-disabled);
}

._remove_t489s_35 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

._remove_t489s_35:focus-visible {
  outline: var(--stroke-thick) solid var(--color-border-focus);
}

._remove_t489s_35:disabled {
  cursor: not-allowed;
}
/* Design System — Counter: 20 px high, min width = height, Label/Small */
._counter_1fhlb_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-icon-md);
  height: var(--size-icon-md);
  padding: 0 var(--spacing-6);
  border-radius: var(--radius-full);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

._brand_1fhlb_16 {
  background: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}

._neutral_1fhlb_21 {
  background: var(--color-bg-neutral-subtle);
  color: var(--color-text-secondary);
}

._danger_1fhlb_26 {
  background: var(--color-bg-danger);
  color: var(--color-text-on-brand);
}

._inverse_1fhlb_31 {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
/*
 * Design System — Modal & Confirm Dialog: centred on the scrim (bg/overlay), radius lg, Elevation/4,
 * 24 px padding, max height 85 vh with a scrolling body, actions at the bottom right.
 */
._overlay_1d19a_5 {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
  background: var(--color-bg-overlay);
}

/* Medium 560: forms */
._panel_1d19a_17 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--size-control-md) * 14);
  max-height: 85vh;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface-raised);
  box-shadow: var(--shadow-elevation-4);
}

._panel_1d19a_17:focus {
  outline: none;
}

/* Small 400: confirmations */
._panelSm_1d19a_33 {
  max-width: calc(var(--size-control-md) * 10);
}

/* Not a library size: a dialog whose content is a table */
._panelLg_1d19a_38 {
  max-width: calc(var(--size-control-md) * 24);
}

._header_1d19a_42 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-24) 0;
}

._headerText_1d19a_50 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

._title_1d19a_57 {
  margin: 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

._description_1d19a_63 {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Confirm Dialog: tinted icon above the title */
._icon_1d19a_69 {
  padding: var(--spacing-24) var(--spacing-24) 0;
}

._icon_1d19a_69 + ._header_1d19a_42 {
  padding-top: var(--spacing-16);
}

/* Confirm Dialog: title (Heading/H4) and the consequence 8 apart */
._icon_1d19a_69 + ._header_1d19a_42 ._headerText_1d19a_50 {
  gap: var(--spacing-8);
}

/* Icon badge: 48 px circle with a 24 px icon */
._iconTile_1d19a_83 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-2xl);
  height: var(--size-icon-2xl);
  border-radius: var(--radius-full);
  background: var(--color-bg-brand-subtle);
  color: var(--color-icon-brand);
}

._iconTileSuccess_1d19a_94 {
  background: var(--color-bg-success-subtle);
  color: var(--color-icon-success);
}

._iconTileDanger_1d19a_99 {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger);
}

/* Message Dialog · warning */
._iconTileWarning_1d19a_105 {
  background: var(--color-bg-warning-subtle);
  color: var(--color-icon-warning);
}

._form_1d19a_110 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._body_1d19a_116 {
  padding: var(--spacing-24) var(--spacing-24) 0;
  overflow-y: auto;
  color: var(--color-text-primary);
}

._footer_1d19a_122 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-12);
  padding: var(--spacing-24);
}

@media (max-width: 767px) {
  ._overlay_1d19a_5 {
    padding: var(--spacing-16);
  }
}
/*
 * Design System — Image Picker: a field-wide box (border default, radius md, 16 padding).
 * Empty: placeholder thumbnail + "Choose Image" (Secondary). Filled: 64 thumbnail, file name,
 * details (type · size) and the remove action on the right.
 */
._box_1wswn_6 {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

._box_1wswn_6[aria-invalid='true'] {
  border-color: var(--color-border-danger);
}

._disabled_1wswn_21 {
  border-color: var(--color-border-disabled);
  background: var(--color-bg-disabled);
}

._thumb_1wswn_26 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--spacing-32) * 2);
  height: calc(var(--spacing-32) * 2);
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface-sunken);
  color: var(--color-icon-tertiary);
  overflow: hidden;
}

._thumb_1wswn_26 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._meta_1wswn_46 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-2);
  min-width: 0;
}

._name_1wswn_54 {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._details_1wswn_64 {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._input_1wswn_70 {
  position: absolute;
  width: var(--stroke-thin);
  height: var(--stroke-thin);
  opacity: 0;
  pointer-events: none;
}
/*
 * Design System — Table inside a card: toolbar (16 px padding), header 44 on bg/surface-sunken,
 * rows 56 with 16 px cell padding and a border/subtle divider, footer with range and Pagination.
 */
._toolbar_1nfka_5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

._toolbarStart_1nfka_14,
._toolbarEnd_1nfka_15 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12);
}

/* Search Field: same anatomy as Text Field — 40 px, radius md, default width 320 */
._search_1nfka_23 {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(var(--size-control-md) * 8);
  max-width: 100%;
}

._searchIcon_1nfka_31 {
  position: absolute;
  left: var(--spacing-12);
  display: flex;
  color: var(--color-icon-secondary);
  pointer-events: none;
}

._searchInput_1nfka_39 {
  width: 100%;
  height: var(--size-control-md);
  padding: 0 var(--spacing-40);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color 120ms ease;
}
._searchInput_1nfka_39:hover:not(:focus) {
  border-color: var(--color-border-hover);
}
._searchInput_1nfka_39:focus {
  border-color: var(--color-border-focus);
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}
._searchInput_1nfka_39::-moz-placeholder {
  color: var(--color-text-tertiary);
}
._searchInput_1nfka_39::placeholder {
  color: var(--color-text-tertiary);
}
/* The clear action of the design replaces the one of the browser */
._searchInput_1nfka_39::-webkit-search-cancel-button,
._searchInput_1nfka_39::-webkit-search-decoration {
  -webkit-appearance: none;
          appearance: none;
}

._searchClear_1nfka_69 {
  position: absolute;
  right: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-24);
  height: var(--spacing-24);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-icon-secondary);
  cursor: pointer;
}
._searchClear_1nfka_69:hover {
  background: var(--color-bg-hover);
  color: var(--color-icon-primary);
}

._scroll_1nfka_89 {
  overflow-x: auto;
}

/*
 * Table / Horizontal scrollbar (Figma 149:148): a 14 px band, 6 px track (bg/subtle) and thumb
 * (icon/tertiary), radius 3, 8 px in from the sides, no arrow buttons. The vertical one matches it.
 * Chrome / Edge / Safari draw it through ::-webkit-scrollbar; Firefox gets the thin standard one.
 */
._scroll_1nfka_89::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
._scroll_1nfka_89::-webkit-scrollbar-track,
._scroll_1nfka_89::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 7px;
  background-clip: padding-box;
}
._scroll_1nfka_89::-webkit-scrollbar-track:horizontal,
._scroll_1nfka_89::-webkit-scrollbar-thumb:horizontal {
  border-left-width: 8px;
  border-right-width: 8px;
}
._scroll_1nfka_89::-webkit-scrollbar-track:vertical,
._scroll_1nfka_89::-webkit-scrollbar-thumb:vertical {
  border-top-width: 8px;
  border-bottom-width: 8px;
}
._scroll_1nfka_89::-webkit-scrollbar-track {
  background-color: var(--color-bg-subtle);
}
._scroll_1nfka_89::-webkit-scrollbar-thumb {
  background-color: var(--color-icon-tertiary);
}
._scroll_1nfka_89::-webkit-scrollbar-button {
  display: none;
}
._scroll_1nfka_89::-webkit-scrollbar-corner {
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  ._scroll_1nfka_89 {
    scrollbar-width: thin;
    scrollbar-color: var(--color-icon-tertiary) var(--color-bg-subtle);
  }
}

._table_1nfka_137 {
  width: 100%;
  border-collapse: collapse;
}

._th_1nfka_142 {
  height: calc(var(--size-control-md) + var(--spacing-4));
  padding: 0 var(--spacing-16);
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  text-align: left;
  white-space: nowrap;
}

._td_1nfka_154 {
  height: calc(var(--size-control-md) + var(--spacing-16));
  padding: var(--spacing-8) var(--spacing-16);
  border-bottom: var(--stroke-thin) solid var(--color-border-subtle);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  vertical-align: middle;
}

._row_1nfka_164:last-child ._td_1nfka_154 {
  border-bottom: 0;
}

._row_1nfka_164:hover ._td_1nfka_154 {
  background: var(--color-bg-hover);
}

/* Sortable header: the whole label is the button; the icon of an unsorted column shows on hover */
._sortButton_1nfka_173 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

._sortButton_1nfka_173 svg {
  color: var(--color-icon-tertiary);
  opacity: 0;
}

._sortButton_1nfka_173:hover svg,
._sortButton_1nfka_173:focus-visible svg,
._sorted_1nfka_192 svg {
  opacity: 1;
}

._sorted_1nfka_192 {
  color: var(--color-text-primary);
}

._sorted_1nfka_192 svg {
  color: var(--color-icon-brand);
}

._right_1nfka_204 ._sortButton_1nfka_173 {
  flex-direction: row-reverse;
}

/* Numbers, currency and percentages are right-aligned, header included */
._right_1nfka_204 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._actions_1nfka_214 {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-8);
}

._state_1nfka_220 {
  padding: 0;
}

._footer_1nfka_224 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

/* Compact footer: ‹ range › on the right */
._footerCompact_1nfka_237 {
  justify-content: flex-end;
  gap: var(--spacing-4);
}

._footerStart_1nfka_242 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16);
}

._perPage_1nfka_249 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* Page-size Select (Figma "page-size Select"): the kit Select at 72 × 40, its Menu opens on click (#324) */
._rowsField_1nfka_256 {
  flex: 0 0 auto;
  width: 72px;
}

._pagination_1nfka_261 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* Page Item: 40 × 40 min, radius md — the same height as the page-size Select beside it */
._pageItem_1nfka_268 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-md);
  height: var(--size-control-md);
  padding: 0 var(--spacing-8);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
._pageItem_1nfka_268:hover:not(:disabled):not(._pageSelected_1nfka_285):not(._pageGap_1nfka_285) {
  background: var(--color-bg-hover);
}
._pageItem_1nfka_268:disabled {
  color: var(--color-icon-disabled);
  cursor: not-allowed;
}

._pageSelected_1nfka_285 {
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-medium);
  cursor: default;
}

._pageGap_1nfka_285 {
  color: var(--color-text-secondary);
  cursor: default;
}
/*
 * Design System — Pagination without a table. The bar and the Page Items come from the table footer
 * (TableList.module.css: .pagination, .pageItem …); this file only places the bar and styles the
 * "Page 1 of 25" text of the Compact type.
 */
._end_1k0kc_6 {
  justify-content: flex-end;
}

._center_1k0kc_10 {
  justify-content: center;
}

/* Compact: "Page 1 of 25" between Previous and Next */
._info_1k0kc_15 {
  padding: 0 var(--spacing-8);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Design System — Switch: track 40 × 24, knob 20; optional label on the right, Body/Medium */
._root_1pilb_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  cursor: pointer;
}

._root_1pilb_2:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._track_1pilb_23 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: var(--size-control-md);
  height: var(--spacing-24);
  padding: var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-control);
  transition: background-color 120ms ease;
}

._root_1pilb_2:hover:not(:disabled) ._track_1pilb_23 {
  background: var(--color-bg-control-hover);
}

._knob_1pilb_39 {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border-radius: var(--radius-full);
  background: var(--color-bg-knob);
  box-shadow: var(--shadow-elevation-1);
  transition: transform 120ms ease;
}

/* On = brand */
._on_1pilb_49 ._track_1pilb_23 {
  background: var(--color-bg-brand);
}

._on_1pilb_49:hover:not(:disabled) ._track_1pilb_23 {
  background: var(--color-bg-brand-hover);
}

._on_1pilb_49 ._knob_1pilb_39 {
  transform: translateX(var(--spacing-16));
}

._root_1pilb_2:disabled ._track_1pilb_23 {
  background: var(--color-bg-disabled);
}
/* Design System — Tabs: line tab bar, 1 px baseline, gap 24; Tab 40 px with a 2 px indicator */
._tabs_12tie_2 {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
  border-bottom: var(--stroke-thin) solid var(--color-border-subtle);
  overflow-x: auto;
  white-space: nowrap;
}

._tab_12tie_2 {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--spacing-6);
  height: var(--size-control-md);
  padding: 0 var(--spacing-4);
  border: 0;
  border-bottom: var(--stroke-thick) solid transparent;
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

/* Hover shows a neutral indicator */
._tab_12tie_2:hover:not(:disabled) {
  border-bottom-color: var(--color-border-default);
  color: var(--color-text-primary);
}

/* The ring stays inside the tab so the scrolling tab row does not clip it */
._tab_12tie_2:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

/* Selected = brand label + brand indicator */
._active_12tie_41,
._active_12tie_41:hover {
  border-bottom-color: var(--color-border-brand);
  color: var(--color-text-brand);
}

/* Disabled tab (e.g. a step that opens once the record is saved): dimmed, no hover indicator */
._tab_12tie_2:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
/*
 * Loading state — Design System Spinner (Progress & Loading) centred in its area, with the text under it.
 * Only semantic tokens.
 */
._state_1hngm_5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

._content_1hngm_12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
}

/* A card or a part of the page: the padding of the Empty State, so loading → empty does not jump */
._section_1hngm_20 {
  padding: var(--spacing-48) var(--spacing-24);
}

/* First load of a page: keeps most of the viewport */
._page_1hngm_25 {
  min-height: 60vh;
  padding: var(--spacing-48) var(--spacing-24);
}

/* Small area (an empty table body, a field): one control high */
._inline_1hngm_31 {
  min-height: var(--size-control-md);
  padding: var(--spacing-8);
}

/* Covers the panel while a global operation runs: the Modal scrim, the spinner on a raised surface */
._overlay_1hngm_37 {
  position: fixed;
  inset: 0;
  z-index: 1500;
  padding: var(--spacing-24);
  background: var(--color-bg-overlay);
}

._overlay_1hngm_37 ._content_1hngm_12 {
  padding: var(--spacing-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface-raised);
  box-shadow: var(--shadow-elevation-3);
}

/* Body/Medium (class text-body-medium), text/secondary — as the Empty State description */
._label_1hngm_53 {
  max-width: calc(var(--size-control-md) * 8);
  color: var(--color-text-secondary);
  text-align: center;
}
/* Error state of a whole page (authentication, session): the error Empty State in the middle of the page,
 * at the place of the page loading state */
._page_1mz9x_3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--layout-margin);
}
/* Detail list — the label / value rows live in ui.module.css (.detailList); only the empty mark here */
._empty_1xs4u_2 {
  color: var(--color-text-tertiary);
}
/* Row actions: Icon Buttons (XSmall 24) 8 apart, at the end of the row */
._actions_qisp4_2 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
}
/* Info icon after a label or a title: 4 after the text, centred on the line, icon/secondary */
._root_sf1we_2 {
  display: inline-flex;
  flex: 0 0 auto;
  margin-inline-start: var(--spacing-4);
  vertical-align: middle;
}

._info_sf1we_9 {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-icon-secondary);
  cursor: help;
}

._info_sf1we_9:hover,
._info_sf1we_9:focus-visible {
  color: var(--color-icon-brand);
}

._info_sf1we_9:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
/*
 * Dashboard 2027 — create / edit page body (Figma Create SMS · push · web push · email): one card,
 * form column 600 (15 × 40) + live preview filling the rest, 48 apart; one column below 1100 px.
 * Without a preview the form is alone, at most 800 (20 × 40) wide. Only semantic tokens.
 */
._root_1oc98_6 {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
  min-width: 0;
}

/* The card does not clip: a sticky preview needs an ancestor that is not a scroll container */
._root_1oc98_6 ._card_1oc98_14 {
  overflow: visible;
}

._grid_1oc98_18 {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--size-control-md) * 15)) minmax(0, 1fr);
  gap: var(--spacing-48);
  align-items: start;
}

._single_1oc98_25 {
  grid-template-columns: minmax(0, calc(var(--size-control-md) * 20));
}

/* Sections 32 apart; a section keeps its fields 16 apart */
._form_1oc98_30 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  min-width: 0;
  margin: 0;
}

/* Actions under the form, on the right */
._actions_1oc98_39 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-12);
}

/* Preview column: centred heading, the preview centred under it */
._preview_1oc98_47 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  min-width: 0;
}

._sticky_1oc98_55 {
  position: sticky;
  top: var(--spacing-24);
}

._previewHeading_1oc98_60 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  text-align: center;
}

._previewTitle_1oc98_68 {
  margin: 0;
  color: var(--color-text-primary);
}

._previewDescription_1oc98_73 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._previewBody_1oc98_80 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* Section: title (+ description) then the fields, 16 apart */
._section_1oc98_89 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

._sectionHead_1oc98_96 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

._sectionTitle_1oc98_102 {
  margin: 0;
  color: var(--color-text-primary);
}

._sectionDescription_1oc98_107 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

/* Loading of the record: Spinner / Large in the middle of the card */
._loading_1oc98_115 {
  display: flex;
  justify-content: center;
  padding: var(--spacing-48) var(--spacing-24);
}

@media (max-width: 1100px) {
  ._grid_1oc98_18 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._sticky_1oc98_55 {
    position: static;
  }
}
/* Collapsible form section: heading button (chevron 20 + Heading/H4, 32 px hit area), fields 16 under it */
._section_pekb7_2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

._head_pekb7_9 {
  display: flex;
  align-items: center;
}

._heading_pekb7_14 {
  margin: 0;
  font: inherit;
}

._trigger_pekb7_19 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

._trigger_pekb7_19 svg {
  flex: 0 0 auto;
  color: var(--color-icon-secondary);
}

._trigger_pekb7_19:hover svg {
  color: var(--color-icon-primary);
}

._trigger_pekb7_19:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

._content_pekb7_47 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

/* With `meta`: the heading row is full width, a long title wraps onto more lines (never cut) and the meta
   sits at the right end */
._withMeta_pekb7_56 {
  align-items: flex-start;
  gap: var(--spacing-12);
}
/* Chevron and meta line up with the first line of a wrapped title */
._withMeta_pekb7_56 ._trigger_pekb7_19 {
  align-items: flex-start;
}
._withMeta_pekb7_56 ._trigger_pekb7_19 svg {
  margin-top: calc((var(--type-h4-line-height) - var(--size-icon-md)) / 2);
}
._withMeta_pekb7_56 ._heading_pekb7_14 {
  flex: 1 1 auto;
  min-width: 0;
}
._withMeta_pekb7_56 ._trigger_pekb7_19 {
  display: flex;
  width: 100%;
  min-width: 0;
}
._titleText_pekb7_76 {
  min-width: 0;
  overflow-wrap: anywhere;
}
._meta_pekb7_80 {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: var(--type-h4-line-height);
  display: flex;
  align-items: center;
}
/* Secret field: the show / hide button (32) sits inside the 40 px field, 4 from the right edge;
   the value keeps clear of it (element + class: wins over the field padding whatever the CSS order) */
input._input_qimb3_3 {
  padding-right: calc(var(--size-control-sm) + var(--spacing-8));
}

._toggle_qimb3_7 {
  position: absolute;
  right: var(--spacing-4);
  display: flex;
}
/*
 * Design System — DataGrid: the table of TableList (header 44 on bg/surface-sunken, rows 56, 16 px cell
 * padding, border/subtle dividers) with pinned columns, a sticky header and a height-capped scroll area
 * (moved from the CDP panel, #298). The footer is TableList's (TableList.module.css).
 */
._wrap_6khlq_6 {
  position: relative;
}

._scroll_6khlq_10 {
  position: relative;
  overflow: auto;
}

/*
 * Table / Horizontal scrollbar (Figma 149:148): a 14 px band, 6 px track (bg/subtle) and thumb
 * (icon/tertiary), radius 3, 8 px in from the sides, no arrow buttons. The vertical one matches it.
 * Chrome / Edge / Safari draw it through ::-webkit-scrollbar; Firefox gets the thin standard one.
 */
._scroll_6khlq_10::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
._scroll_6khlq_10::-webkit-scrollbar-track,
._scroll_6khlq_10::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 7px;
  background-clip: padding-box;
}
._scroll_6khlq_10::-webkit-scrollbar-track:horizontal,
._scroll_6khlq_10::-webkit-scrollbar-thumb:horizontal {
  border-left-width: 8px;
  border-right-width: 8px;
}
._scroll_6khlq_10::-webkit-scrollbar-track:vertical,
._scroll_6khlq_10::-webkit-scrollbar-thumb:vertical {
  border-top-width: 8px;
  border-bottom-width: 8px;
}
._scroll_6khlq_10::-webkit-scrollbar-track {
  background-color: var(--color-bg-subtle);
}
._scroll_6khlq_10::-webkit-scrollbar-thumb {
  background-color: var(--color-icon-tertiary);
}
._scroll_6khlq_10::-webkit-scrollbar-button {
  display: none;
}
._scroll_6khlq_10::-webkit-scrollbar-corner {
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  ._scroll_6khlq_10 {
    scrollbar-width: thin;
    scrollbar-color: var(--color-icon-tertiary) var(--color-bg-subtle);
  }
}

/* Fixed layout: the column widths are binding, a long value never widens its column */
._table_6khlq_60 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

._th_6khlq_67 {
  position: sticky;
  top: 0;
  z-index: 2;
  height: calc(var(--size-control-md) + var(--spacing-4));
  padding: 0 var(--spacing-16);
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--font-weight-medium);
  text-align: left;
  vertical-align: middle;
}

._thDisplay_6khlq_82 {
  padding: 0 var(--spacing-12);
  white-space: nowrap;
}

._td_6khlq_87 {
  height: calc(var(--size-control-md) + var(--spacing-16));
  padding: var(--spacing-8) var(--spacing-16);
  border-bottom: var(--stroke-thin) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  vertical-align: middle;
  overflow: hidden;
}

/* One line per text cell, cut with "…" (Figma Customer List 5:3); blocks inside (lists, chips) keep their layout */
._cellText_6khlq_100 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._row_6khlq_107:hover ._td_6khlq_87 {
  background: var(--color-bg-hover);
}

/* Pinned columns stay in place; the edge facing the scrolling columns is a thin divider (Figma: the
   Actions column of Customer List 5:3). An inset shadow, because borders do not stick with the cell */
._pinned_6khlq_113 {
  position: sticky;
  z-index: 1;
}

._th_6khlq_67._pinned_6khlq_113 {
  z-index: 3;
}

._shadowRight_6khlq_122 {
  box-shadow: inset calc(var(--stroke-thin) * -1) 0 0 var(--color-border-subtle);
}

._shadowLeft_6khlq_126 {
  box-shadow: inset var(--stroke-thin) 0 0 var(--color-border-subtle);
}

/* Header: label (the sort button when the column sorts), drag handle and column menu */
._head_6khlq_131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-width: 0;
}

._headLabel_6khlq_139 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._headWrap_6khlq_146 {
  white-space: normal;
}

._sortButton_6khlq_150 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

._sortButton_6khlq_150 svg {
  flex: 0 0 auto;
  color: var(--color-icon-tertiary);
  opacity: 0;
}

._sortButton_6khlq_150:hover svg,
._sortButton_6khlq_150:focus-visible svg,
._sorted_6khlq_173 svg {
  opacity: 1;
}

._sorted_6khlq_173 {
  color: var(--color-text-primary);
}

._sorted_6khlq_173 svg {
  color: var(--color-icon-brand);
}

/* The drag handle and the menu show on hover and keyboard focus, like the sort icon. They lie over the
   end of the header instead of taking its width, so a narrow column still shows its whole label */
._headTools_6khlq_187 {
  position: absolute;
  top: 50%;
  right: var(--spacing-8);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-left: var(--spacing-4);
  background: var(--color-bg-surface-sunken);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

._th_6khlq_67:hover ._headTools_6khlq_187,
._th_6khlq_67:focus-within ._headTools_6khlq_187 {
  opacity: 1;
  pointer-events: auto;
}

._grab_6khlq_208 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-tertiary);
  cursor: grab;
}

._grab_6khlq_208:hover {
  color: var(--color-icon-primary);
}

/* Figma (Customer List, Segments · List): the icons start under the "Actions" header */
._actions_6khlq_221 {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-8);
}

/* Expand arrows */
._rowOpen_6khlq_228 svg,
._allOpen_6khlq_229 svg,
._allClosed_6khlq_230 svg {
  transition: transform 150ms ease;
}

._rowOpen_6khlq_228 svg {
  transform: rotate(180deg);
}

._allClosed_6khlq_230 svg {
  transform: rotate(90deg);
}

._allOpen_6khlq_229 svg {
  transform: rotate(-90deg);
}

/* Drag and drop */
._dragging_6khlq_247 {
  opacity: 0.5;
}

._dropRow_6khlq_251 ._td_6khlq_87 {
  border-top: var(--stroke-thick) dashed var(--color-border-brand);
}

._dropColumn_6khlq_255 {
  outline: var(--stroke-thick) dashed var(--color-border-brand);
  outline-offset: calc(var(--stroke-thick) * -1);
}

/* Detail panel under an opened row */
._detailCell_6khlq_261 {
  padding: var(--spacing-16);
  border-bottom: var(--stroke-thin) solid var(--color-border-subtle);
  background: var(--color-bg-surface-sunken);
}

/* The panel stays in view while the table is scrolled sideways */
._detailContent_6khlq_268 {
  position: sticky;
  left: var(--spacing-16);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

._state_6khlq_275 {
  padding: 0;
}

/* Loading: skeleton rows under a translucent layer with the spinner */
._overlay_6khlq_280 {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-bg-surface) 50%, transparent);
}

/* `align: 'right'` columns (numbers): the title and the values share the right edge. The hover tools
   move to the left edge so they do not cover the end of a right-aligned title */
._alignRight_6khlq_292 {
  text-align: right;
}

._alignRight_6khlq_292 ._head_6khlq_131 {
  justify-content: flex-end;
}

._alignRight_6khlq_292 ._headTools_6khlq_187 {
  right: auto;
  left: var(--spacing-8);
  padding-left: 0;
  padding-right: var(--spacing-4);
}
/* Design System — Progress & Loading · linear progress: 8 high track on bg/neutral-subtle, brand fill */
._track_jmjxc_2 {
  width: 100%;
  height: var(--spacing-8);
  border-radius: var(--radius-full);
  background: var(--color-bg-neutral-subtle);
  overflow: hidden;
}

._fill_jmjxc_10 {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-bg-brand);
  transition: width 200ms ease;
}


html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: 'Outfit', sans-serif;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* iframe icinde calisiyoruz: yukseklik parent'tan gelir, kaydirma iceride olur.
   Eskiden min-height + overflow:visible ile icerik disari tasip parent'a
   "beni buyut" mesaji gonderiliyordu; bu cift kaydirma cubugu yaratiyordu. */
/* Kabuk (spine) iframe'i zaten 30px boşlukla çevreliyor; burada ikinci bir
   boşluk içeriği daraltıyordu. */
.games-container {
  padding: 0;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow-y: auto;
}
/*
 * Dashboard 2027 — Games › Game list (Figma us1bYjswCaYb9IHzQZlHmk 44:19 · 44:798 · 44:1336).
 * Only semantic tokens; the kit sizes (card 176, logo 136 × 124) are written from spacing tokens.
 */

._filters_1bmu6_6 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Group / … : outlined card, padding 24, header and cards 20 apart */
._group_1bmu6_13 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-24);
}

._groupHeader_1bmu6_20 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

._groupTitle_1bmu6_26 {
  margin: 0;
  color: var(--color-text-primary);
}

._grid_1bmu6_31 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-24);
}

/* ── Game Card (Figma 43:744): 176 artwork + title, 12 apart ─────────────── */
._tile_1bmu6_39 {
  --tile-size: calc(var(--spacing-16) * 11);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  width: var(--tile-size);
}

._artwork_1bmu6_48 {
  position: relative;
  width: var(--tile-size);
  height: var(--tile-size);
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
  cursor: pointer;
}

._artwork_1bmu6_48._selectedCard_1bmu6_59 {
  cursor: default;
}

._artwork_1bmu6_48._locked_1bmu6_63 {
  cursor: not-allowed;
}

/* Hover (and the selected card): 2 px brand border */
._artwork_1bmu6_48:hover,
._artwork_1bmu6_48:focus-within,
._artwork_1bmu6_48._selectedCard_1bmu6_59 {
  border: var(--stroke-thick) solid var(--color-border-brand);
}

/* The locked card keeps its thin border on hover; only the demo action shows */
._artwork_1bmu6_48._locked_1bmu6_63:hover,
._artwork_1bmu6_48._locked_1bmu6_63:focus-within {
  border: var(--stroke-thin) solid var(--color-border-subtle);
}

/* Logo layer: 136 × 124 at (20, 36), fit inside */
._logo_1bmu6_81 {
  position: absolute;
  left: var(--spacing-20);
  top: calc(var(--spacing-32) + var(--spacing-4));
  width: calc(var(--spacing-8) * 17);
  height: calc(var(--spacing-4) * 31);
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

/* The 2 px border of hover must not move the logo and the tags */
._artwork_1bmu6_48:hover ._logo_1bmu6_81,
._artwork_1bmu6_48:focus-within ._logo_1bmu6_81,
._artwork_1bmu6_48._selectedCard_1bmu6_59 ._logo_1bmu6_81 {
  left: calc(var(--spacing-20) - var(--stroke-thin));
  top: calc(var(--spacing-32) + var(--spacing-4) - var(--stroke-thin));
}

._tags_1bmu6_99 {
  position: absolute;
  top: var(--spacing-12);
  left: var(--spacing-12);
  z-index: 2;
  display: flex;
  gap: var(--spacing-4);
}

._artwork_1bmu6_48:hover ._tags_1bmu6_99,
._artwork_1bmu6_48:focus-within ._tags_1bmu6_99,
._artwork_1bmu6_48._selectedCard_1bmu6_59 ._tags_1bmu6_99 {
  top: calc(var(--spacing-12) - var(--stroke-thin));
  left: calc(var(--spacing-12) - var(--stroke-thin));
}

/* Locked: a surface over the artwork with the lock tile (warning) and "Not in your plan" */
._lock_1bmu6_63 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}

._lockTile_1bmu6_130 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--radius-lg);
  background: var(--color-bg-warning-subtle);
  color: var(--color-icon-warning);
}

/* Actions on hover: brand-subtle panel with the 136 wide Small buttons, 8 apart */
._actions_1bmu6_142 {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  border-radius: var(--radius-lg);
  background: var(--color-bg-brand-subtle);
  opacity: 0;
  pointer-events: none;
}

._artwork_1bmu6_48:hover ._actions_1bmu6_142,
._artwork_1bmu6_48:focus-within ._actions_1bmu6_142 {
  opacity: 1;
  pointer-events: auto;
}

._actionButton_1bmu6_163 {
  width: calc(var(--spacing-8) * 17);
}

._title_1bmu6_167 {
  margin: 0;
  max-width: 100%;
  text-align: center;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

._titleLocked_1bmu6_175 {
  color: var(--color-text-tertiary);
}

/* ── Game links popover (no frame: library surface, fields and icon buttons) ── */
._popover_1bmu6_180 {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: calc(var(--spacing-40) * 10);
  max-width: calc(100vw - var(--spacing-32));
  padding: var(--spacing-16);
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface-raised);
  box-shadow: var(--shadow-elevation-3);
}

._popoverCentered_1bmu6_195 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

._popoverState_1bmu6_201 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-text-secondary);
}

._popoverError_1bmu6_208 {
  color: var(--color-text-danger);
}

._linkRow_1bmu6_212 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
}

._linkName_1bmu6_219 {
  flex: 0 0 auto;
  width: calc(var(--spacing-4) * 25);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Read-only link: the sunken Text Field look, the text cut with an ellipsis */
._linkValue_1bmu6_227 {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--size-control-md);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-12);
  border: var(--stroke-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-primary);
}

._linkText_1bmu6_240 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._linkCopied_1bmu6_246 {
  color: var(--color-text-success);
}

._linkFailed_1bmu6_250 {
  color: var(--color-text-danger);
}

/* Dashboard 2027 — Kuponlar sekmesi, kupon formu, kupon yükleme ve kampanya kartı (yalnızca semantik token'lar) */

/* ----------------------------- Kuponlar sekmesi ----------------------------- */

._tab_z1l5m_5 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* Tema / bölge süzgeçleri solda, dışa aktar / oluştur sağda (TableList araç çubuğu düzeni) */
._toolbar_z1l5m_12 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

._filters_z1l5m_21 {
  display: grid;
  /* Tarihli Kuponlar süzgeçleriyle aynı genişlik ve aralık */
  grid-template-columns: repeat(2, minmax(0, calc(var(--spacing-64) * 3 + var(--spacing-32))));
  gap: var(--spacing-12);
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 600px) {
  ._filters_z1l5m_21 {
    grid-template-columns: minmax(0, 1fr);
  }
}

._toolbarActions_z1l5m_36 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

._notice_z1l5m_42 {
  padding: 0 var(--spacing-16) var(--spacing-16);
}

._cellMuted_z1l5m_46 {
  color: var(--color-text-secondary);
}

/* Kalan kupon: çubuk + "kalan / toplam" */
._remaining_z1l5m_51 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
}

._remainingBar_z1l5m_58 {
  flex: 0 0 calc(var(--spacing-64) + var(--spacing-16));
}

._remainingText_z1l5m_62 {
  color: var(--color-text-primary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ----------------------------- Kupon formu ----------------------------- */

._form_z1l5m_72 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

._formGrid_z1l5m_78 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20);
}

@media (max-width: 600px) {
  ._formGrid_z1l5m_78 {
    grid-template-columns: minmax(0, 1fr);
  }
}

._checkGroup_z1l5m_90 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
}

._campaignField_z1l5m_97 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

._groupLabel_z1l5m_103 {
  color: var(--color-text-primary);
}

._campaignRow_z1l5m_107 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

._languageSelect_z1l5m_113 {
  flex: 0 0 calc(var(--spacing-64) * 2 + var(--spacing-24));
  min-width: 0;
}

._campaignText_z1l5m_118 {
  flex: 1 1 auto;
  min-width: 0;
}

/* ----------------------------- Kupon yükleme ----------------------------- */

._fileRow_z1l5m_125 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

._fileName_z1l5m_131 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

._fileChosen_z1l5m_142 {
  color: var(--color-text-primary);
}

._hint_z1l5m_146 {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._hiddenInput_z1l5m_153 {
  display: none;
}

/* ----------------------------- Kampanya kartı ----------------------------- */

._campaignCard_z1l5m_159 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

._cardFilters_z1l5m_165 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}

._cardDates_z1l5m_171 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc(var(--spacing-64) * 4)));
  gap: var(--spacing-16);
}

._cardUsage_z1l5m_177 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}

@media (max-width: 900px) {
  ._cardFilters_z1l5m_165,
  ._cardUsage_z1l5m_177 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  ._cardFilters_z1l5m_165,
  ._cardDates_z1l5m_171,
  ._cardUsage_z1l5m_177 {
    grid-template-columns: minmax(0, 1fr);
  }
}

._chartSection_z1l5m_198 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
}

._chartTotal_z1l5m_205 {
  margin: 0;
  color: var(--color-text-primary);
  text-align: center;
}

/* Google Charts pastası 300 × 300 çizilir */
._chart_z1l5m_198 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-64) * 4 + var(--spacing-40) + var(--spacing-4));
  height: calc(var(--spacing-64) * 4 + var(--spacing-40) + var(--spacing-4));
}


/* ----------------------------- Kampanya dışa aktarma ----------------------------- */

._exportToolbar_z1l5m_223 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);
}

._exportButtons_z1l5m_232 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

._exportTable_z1l5m_238 {
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

._numericCell_z1l5m_244 {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._detailLines_z1l5m_250 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._detailUrl_z1l5m_260 {
  word-break: break-all;
}

._emptyRow_z1l5m_264 {
  padding: var(--spacing-40) var(--spacing-16);
  color: var(--color-text-secondary);
  text-align: center;
}
/* Dashboard 2027 — oyun ayarları sayfası (çerçeve, Ayarlar / Kelimeler / Kelime Grupları sekmeleri).
   Yalnızca semantik token'lar. Figma çerçevesi yok: Oyun Oynama Frekansı ekranlarının düzeni izlenir. */

/* Sekme içeriği: sekme çizgisinin altında 24 px */
._tabBody_l8bex_5 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-top: var(--spacing-24);
  min-width: 0;
}

/* Ayarlar sekmesindeki bölümler (Game Center, linkler, kampanyalar, ayar tablosu) */
._sections_l8bex_14 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}

/* Bölüm başlığı + içeriği (kampanya kartı kendi kartını çizer) */
._section_l8bex_14 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

._sectionTitle_l8bex_29 {
  margin: 0;
  color: var(--color-text-primary);
}

/* Game Center: soru solda, anahtar sağda */
._statusRow_l8bex_35 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

._statusQuestion_l8bex_43 {
  margin: 0;
  color: var(--color-text-primary);
}

._errorText_l8bex_48 {
  margin: 0;
  color: var(--color-text-danger);
}

._mutedText_l8bex_53 {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Oyun linkleri */
._links_l8bex_59 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

._linkRow_l8bex_65 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  min-width: 0;
}

._linkName_l8bex_73 {
  flex: 0 0 auto;
  width: calc(var(--spacing-4) * 30);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Salt okunur link: Text Field'ın gömük görünümü; metne tıklamak linki kopyalar (eski satır gibi) */
._linkValue_l8bex_81 {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--size-control-md);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-12);
  border: var(--stroke-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

._linkValue_l8bex_81:focus-visible {
  outline: var(--stroke-medium) solid var(--color-border-focus);
  outline-offset: var(--stroke-thin);
}

._linkText_l8bex_102 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._linkCopied_l8bex_108 {
  color: var(--color-text-success);
}

._linkFailed_l8bex_112 {
  color: var(--color-text-danger);
}

/* Tablo kartının başlığı: araç çubuğuyla aynı yan boşluk, altında araç çubuğu (boşluk ona ait) */
._cardHeader_l8bex_117 {
  padding: var(--spacing-16) var(--spacing-16) 0;
}

/* Liste araç çubuğu: solda arama, sağda Ekle (Oyun Oynama Frekansı listesiyle aynı) */
._listToolbar_l8bex_122 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

._toolbarEnd_l8bex_131 {
  margin-left: auto;
}

._tableAlert_l8bex_135 {
  padding: 0 var(--spacing-16) var(--spacing-16);
}

._formBody_l8bex_139 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

._field_l8bex_145 {
  width: 100%;
}

/* Satır detayı: tablonun görünmeyen alanları */
._detailList_l8bex_150 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
}

._detailLabel_l8bex_157 {
  margin: 0;
  color: var(--color-text-secondary);
}

._detailValue_l8bex_162 {
  margin: var(--spacing-4) 0 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
/* Dashboard 2027 — Tarihli Kuponlar sekmesi ve formu (#306; yalnızca semantik token'lar) */

/* Liste araç çubuğu (TableList düzeni, Kuponlar sekmesiyle aynı): solda tema / bölge süzgeçleri ve
   arama, sağda Ekle. Etiketli seçim alanları ile etiketsiz arama alt kenardan hizalanır. */
._toolbar_1edmq_5 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

._toolbarStart_1edmq_14 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-12);
  min-width: 0;
}

._filterField_1edmq_22 {
  width: calc(var(--spacing-64) * 3 + var(--spacing-32));
  max-width: 100%;
}

._field_1edmq_27 {
  width: 100%;
}

._numericCell_1edmq_31 {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._link_1edmq_37 {
  color: var(--color-text-brand);
  text-decoration: underline;
}

._link_1edmq_37:hover {
  color: var(--color-text-brand-hover);
}

._remaining_1edmq_46 {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

._remainingRate_1edmq_52 {
  color: var(--color-text-secondary);
}

._thumb_1edmq_56 {
  display: block;
  width: var(--spacing-32);
  height: var(--spacing-32);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-sm);
}

._muted_1edmq_64 {
  color: var(--color-text-tertiary);
}

/* Satır ayrıntısı (eski genişletilen satır paneli) */
._details_1edmq_69 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-16) var(--spacing-24);
  margin: 0;
}

@media (max-width: 900px) {
  ._details_1edmq_69 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

._detail_1edmq_69 {
  min-width: 0;
}

._detailLabel_1edmq_86 {
  margin: 0 0 var(--spacing-4);
  color: var(--color-text-secondary);
}

._detailValue_1edmq_91 {
  margin: 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
  white-space: normal;
}

/* ----------------------------------- Form ----------------------------------- */

._form_1edmq_100 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

._grid_1edmq_106 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20) var(--spacing-24);
}

@media (max-width: 768px) {
  ._grid_1edmq_106 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Onay kutuları alanlarla aynı hizada: etiket yerine boşluk, kutu alanın ortasında */
._checkboxCell_1edmq_119 {
  display: flex;
  align-items: flex-end;
  min-height: var(--size-control-md);
}

._campaigns_1edmq_125 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

._campaignRow_1edmq_131 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  align-items: end;
  gap: var(--spacing-12);
}

._campaignButtons_1edmq_138 {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--size-control-md);
}

/* Hatalı alan, imleç üzerindeyken de kırmızı kenarlığını korur (Oyun Oynama Frekansı formuyla aynı) */
._field_1edmq_27 [aria-invalid='true']:hover:not([aria-disabled='true']):not(:disabled):not(:focus) {
  border-color: var(--color-border-danger);
}
/* Dashboard 2027 — Oyun Oynama Frekansı ekranları (yalnızca semantik token'lar) */

/* Sayfa çerçevesi kütüphanenin `ui.page`'i (CDP paneliyle aynı): kabuğun içinde kenar boşluğunu
   kabuk verir, kart sayfa başlığıyla aynı hizada başlar. */

/* Liste araç çubuğu: TableList / CDP tablolarının düzeni — solda arama, sağda Ekle, 16 px iç boşluk */
._listToolbar_13afe_7 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

/* Sayı hücreleri sağa yaslı */
._numericCell_13afe_17 {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._formBody_13afe_23 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-top: var(--spacing-24);
}

/* İki sütunlu form: frekans tek başına bir satırda, tarihler yan yana */
._grid_13afe_31 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20) var(--spacing-32);
  max-width: calc(var(--spacing-64) * 15);
}

._gridSpacer_13afe_38 {
  display: block;
}

@media (max-width: 900px) {
  ._grid_13afe_31 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._gridSpacer_13afe_38 {
    display: none;
  }
}

._field_13afe_52 {
  width: 100%;
}

/* Hatalı alan, imleç üzerindeyken de kırmızı kenarlığını korur (kütüphanenin `.inputError` kuralı
   gibi). Kütüphanede tarih/seçim alanının üzerine gelme kuralı (:hover:not(…):not(:focus)) hata
   kuralından daha belirgin olduğu için imleç alanın üzerindeyken kenarlık griye dönüyordu. */
._field_13afe_52 [aria-invalid='true']:hover:not([aria-disabled='true']):not(:disabled):not(:focus) {
  border-color: var(--color-border-danger);
}

._actions_13afe_63 {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-12);
  max-width: calc(var(--spacing-64) * 15);
}

/* Etiket + "*" + bilgi simgesi */
._label_13afe_71 {
  display: inline-flex;
  align-items: center;
}

/* ----------------------------- Kampanyalar ----------------------------- */

._campaigns_13afe_78 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding-top: var(--spacing-24);
}

._toolbar_13afe_85 {
  display: flex;
  justify-content: flex-end;
}

._campaignBody_13afe_90 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

._details_13afe_96 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16) var(--spacing-24);
  margin: 0;
}

@media (max-width: 900px) {
  ._details_13afe_96 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  ._details_13afe_96 {
    grid-template-columns: minmax(0, 1fr);
  }
}

._detail_13afe_96 {
  min-width: 0;
}

._detailLabel_13afe_119 {
  margin: 0 0 var(--spacing-4);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._detailValue_13afe_126 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

._campaignActions_13afe_135 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

/* ----------------------------- Kupon yükleme ----------------------------- */

._dialogBody_13afe_143 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

._muted_13afe_149 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

._fileRow_13afe_156 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

._fileName_13afe_162 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
}

._fileChosen_13afe_173 {
  color: var(--color-text-primary);
}

._hint_13afe_177 {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._hiddenInput_13afe_184 {
  display: none;
}

._templateRow_13afe_188 {
  display: flex;
}
/* Dashboard 2027 — Skorlar ve Olay Raporu sekmeleri (yalnızca semantik token'lar).
   Figma çerçevesi yok: Oyun Oynama Frekansı listesi ve game_ads_panel rapor ekranlarının düzeni izlenir. */

._report_13t77_4 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}

/* Rapor filtreleri: başlangıç, bitiş, karşılaştırma tipi yan yana, sabit genişlikte (game_ads_panel
   rapor filtreleri gibi 192 px); dar ekranda alt satıra geçer */
._filters_13t77_13 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-16);
}

._field_13t77_20 {
  width: calc(var(--spacing-48) * 4);
  max-width: 100%;
}

/* Liste araç çubuğu: solda arama, sağda Excel'e Aktar (Oyun Oynama Frekansı listesiyle aynı) */
._listToolbar_13t77_26 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

._toolbarEnd_13t77_35 {
  margin-left: auto;
}

/* Sayı hücreleri sağa yaslı */
._numericCell_13t77_40 {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

._strong_13t77_46 {
  font-weight: var(--font-weight-medium);
}

/* Skor: eski tablodaki kalın yeşil değer */
._score_13t77_51 {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-success);
  font-variant-numeric: tabular-nums;
}

._muted_13t77_57 {
  color: var(--color-text-tertiary);
}

._dateCell_13t77_61 {
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

/* Olay açıklaması: ad + alt satırda açıklama (hücre tek satıra kırpılmaz) */
._description_13t77_68 {
  white-space: normal;
  padding: var(--spacing-2) 0;
}

._descriptionLabel_13t77_73 {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

._descriptionText_13t77_78 {
  margin-top: var(--spacing-2);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  white-space: normal;
}

/* Başlıktaki açıklamalı kolon adı (ipucu var) */
._hintHeader_13t77_87 {
  border-bottom: var(--stroke-thin) dotted currentColor;
  cursor: help;
}

/* Karşılaştırma: yön simgesi + fark + yüzde, sağa yaslı */
._trend_13t77_93 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-4);
}

._trendIcon_13t77_100 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-20);
  height: var(--spacing-20);
  border-radius: var(--radius-full);
}

._trendValues_13t77_109 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._trendDifference_13t77_117 {
  font-weight: var(--font-weight-medium);
}

._trendPercentage_13t77_121 {
  opacity: 0.8;
}

._trendUp_13t77_125 {
  color: var(--color-text-success);
}

._trendUp_13t77_125 ._trendIcon_13t77_100 {
  background: var(--color-bg-success-subtle);
}

._trendDown_13t77_133 {
  color: var(--color-text-danger);
}

._trendDown_13t77_133 ._trendIcon_13t77_100 {
  background: var(--color-bg-danger-subtle);
}

._trendFlat_13t77_141 {
  color: var(--color-text-warning);
}

._trendFlat_13t77_141 ._trendIcon_13t77_100 {
  background: var(--color-bg-warning-subtle);
}
/*
 * Dashboard 2027 — Games › Game ads (Figma us1bYjswCaYb9IHzQZlHmk 47:4219 list · 47:4926 video ·
 * 47:5474 image). Only semantic tokens.
 */

/* Table toolbar: search on the left, Create Ad on the right (16 px padding, as TableList) */
._toolbar_fsp6e_7 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

._toolbarStart_fsp6e_16 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12);
}

._alert_fsp6e_23 {
  padding: 0 var(--spacing-16) var(--spacing-16);
}

/* Media cell: 40 thumbnail (radius md, border subtle) + name and type, 12 apart */
._media_fsp6e_28 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 0;
}

._thumb_fsp6e_35 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-icon-tertiary);
  overflow: hidden;
}

._thumb_fsp6e_35 img,
._thumb_fsp6e_35 video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._mediaText_fsp6e_56 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._mediaName_fsp6e_62 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

._mediaMeta_fsp6e_69 {
  color: var(--color-text-secondary);
}

._numeric_fsp6e_73 {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Create / edit form ──────────────────────────────────────────────────── */
._twoColumns_fsp6e_80 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-20);
}

@media (max-width: 640px) {
  ._twoColumns_fsp6e_80 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ad media picker: the Image Picker box, with a video thumbnail for videos */
._mediaBox_fsp6e_93 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: calc(var(--size-control-md) * 2);
  padding: var(--spacing-12);
  border: var(--stroke-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

._mediaBox_fsp6e_93[aria-invalid='true'] {
  border-color: var(--color-border-danger);
}

._mediaThumb_fsp6e_108 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-icon-tertiary);
  overflow: hidden;
}

._mediaThumb_fsp6e_108 img,
._mediaThumb_fsp6e_108 video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

._mediaInfo_fsp6e_128 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._fileInput_fsp6e_135 {
  display: none;
}

/* Preview: a phone with the chosen media in the middle of the screen */
._phone_fsp6e_140 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-40) * 6);
  aspect-ratio: 9 / 18.5;
  padding: var(--spacing-8);
  border: calc(var(--stroke-thick) * 3) solid var(--color-bg-inverse);
  border-radius: calc(var(--radius-lg) * 3);
  background: var(--color-bg-inverse);
  overflow: hidden;
}

._screen_fsp6e_153 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  width: 100%;
  height: 100%;
  padding: var(--spacing-16);
  border-radius: calc(var(--radius-lg) * 2);
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  text-align: center;
}

._screen_fsp6e_153 img,
._screen_fsp6e_153 video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  -o-object-fit: contain;
     object-fit: contain;
}