@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);
  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);
}
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-gray-900: oklch(21% .034 264.665);
    --spacing: .25rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  html, body, #root {
    height: 100%;
    min-height: 100vh;
    font-family: var(--font-serif);
    color: var(--color-gray-900);
    background-color: #0000;
    flex-direction: column;
    font-family: Outfit, sans-serif;
    display: flex;
  }

  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Outfit, sans-serif;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse !important;
  }

  .visible {
    visibility: visible !important;
  }

  .absolute {
    position: absolute !important;
  }

  .fixed {
    position: fixed !important;
  }

  .end {
    inset-inline-end: var(--spacing) !important;
  }

  .container {
    width: 100% !important;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem !important;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem !important;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem !important;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem !important;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem !important;
    }
  }

  .block {
    display: block !important;
  }

  .flex {
    display: flex !important;
  }

  .hidden {
    display: none !important;
  }

  .inline {
    display: inline !important;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important;
  }

  .resize {
    resize: both !important;
  }

  .border {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out) !important;
    transition-timing-function: var(--ease-in-out) !important;
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

:root {
  --font-serif: "Outfit", "serif";
}

[role="button"], [onclick]:not(button):not(a) {
  cursor: pointer;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/*
 * 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::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_veo26_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_veo26_8 {
  padding: 0;
}

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

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

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

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

/* Inside the shell, next to the actions (the shell draws the title) */
._pageDescriptionOnly_veo26_44 {
  margin: 0;
}

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

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

._cardBody_veo26_62 {
  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_veo26_71 {
  padding-bottom: var(--spacing-8);
}

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

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

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

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

._cardDescription_veo26_102 {
  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_veo26_111 {
  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_veo26_111:disabled {
  cursor: not-allowed;
}

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

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

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

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

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

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

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

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

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

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

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

/* Disabled (not loading) */
._button_veo26_111:disabled:not([data-loading]) {
  color: var(--color-text-disabled);
}
._primary_veo26_162:disabled:not([data-loading]),
._destructive_veo26_208:disabled:not([data-loading]),
._neutral_veo26_196:disabled:not([data-loading]) {
  background: var(--color-bg-disabled);
}
._secondary_veo26_173:disabled:not([data-loading]),
._neutral_veo26_196:disabled:not([data-loading]),
._destructiveOutline_veo26_219:disabled:not([data-loading]) {
  border-color: var(--color-border-disabled);
}

/* Inline link (Button / Tertiary used inside a sentence or a table cell) */
._link_veo26_247 {
  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_veo26_247:hover:not(:disabled) {
  color: var(--color-text-brand-hover);
  text-decoration: underline;
}
._link_veo26_247:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ── Spinner: Small 16 · Medium 20 · Large 32, 800 ms linear ──────────────── */
._spinner_veo26_268 {
  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_veo26_1 800ms linear infinite;
}
._spinnerSm_veo26_278 {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}
._spinnerLg_veo26_282 {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  border-width: calc(var(--stroke-thick) + var(--stroke-thin));
}
._spinnerBrand_veo26_287 {
  color: var(--color-icon-brand);
}
._spinnerNeutral_veo26_290 {
  color: var(--color-icon-secondary);
}
._spinnerDanger_veo26_293 {
  color: var(--color-icon-danger);
}
._spinnerOnColor_veo26_296 {
  color: var(--color-icon-on-brand);
}

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

/* ── Icon Button: XSmall 24 (row actions, dismiss) · Small 32 · Medium 40 ─── */
._iconButton_veo26_307 {
  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_veo26_321 {
  width: var(--spacing-24);
  height: var(--spacing-24);
  border-radius: var(--radius-sm);
}
._iconButtonMd_veo26_326 {
  width: var(--size-control-md);
  height: var(--size-control-md);
}
._iconButton_veo26_307:disabled {
  cursor: not-allowed;
  color: var(--color-icon-disabled);
}

/* Subtle: tinted row actions */
._iconBrand_veo26_336 {
  background: var(--color-bg-brand-subtle);
  color: var(--color-icon-brand);
}
._iconBrand_veo26_336:hover:not(:disabled) {
  background: var(--color-bg-brand-subtle-hover);
}
._iconPurple_veo26_343 {
  background: var(--color-bg-accent-purple-subtle);
  color: var(--color-icon-accent-purple);
}
._iconPurple_veo26_343:hover:not(:disabled) {
  background: var(--color-bg-accent-purple-subtle-hover);
}
._iconDanger_veo26_350 {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger);
}
._iconDanger_veo26_350:hover:not(:disabled) {
  background: var(--color-bg-danger-subtle-hover);
}
._iconNeutral_veo26_357 {
  background: var(--color-bg-neutral-subtle);
  color: var(--color-icon-secondary);
}
._iconNeutral_veo26_357:hover:not(:disabled) {
  background: var(--color-bg-pressed);
}
._iconBrand_veo26_336:disabled,
._iconPurple_veo26_343:disabled,
._iconDanger_veo26_350:disabled,
._iconNeutral_veo26_357:disabled {
  background: var(--color-bg-disabled);
}

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

/* Outline: neutral bordered (card header, picker trigger, refresh) */
._iconOutline_veo26_383 {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-icon-secondary);
}
._iconOutline_veo26_383:hover:not(:disabled) {
  background: var(--color-bg-hover);
}
._iconOutline_veo26_383:active:not(:disabled) {
  background: var(--color-bg-pressed);
}
._iconOutline_veo26_383: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_veo26_400 {
  display: inline-flex;
}

._tooltip_veo26_400 {
  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_veo26_421 {
  position: absolute;
  width: var(--spacing-8);
  height: var(--spacing-8);
  background: var(--color-bg-inverse);
  transform: translate(-50%, -50%) rotate(45deg);
}
._tooltipArrowBottom_veo26_428 {
  top: 100%;
}
._tooltipArrowTop_veo26_431 {
  top: 0;
}

/* ── Fields: label above, 40 px control, helper / error below ─────────────── */
._field_veo26_436 {
  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_veo26_447 {
  margin-left: var(--spacing-4);
  color: var(--color-text-danger);
}

._input_veo26_452,
._select_veo26_453,
._textarea_veo26_454 {
  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_veo26_452:hover:not(:disabled):not(:focus),
._select_veo26_453:hover:not(:disabled):not(:focus),
._textarea_veo26_454: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_veo26_452:focus,
._select_veo26_453:focus,
._textarea_veo26_454:focus {
  border-color: var(--color-border-focus);
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: calc(var(--stroke-thick) * -1);
}

._input_veo26_452::placeholder,
._textarea_veo26_454::placeholder {
  color: var(--color-text-tertiary);
}

._input_veo26_452:disabled,
._select_veo26_453:disabled,
._textarea_veo26_454:disabled {
  border-color: var(--color-border-disabled);
  background-color: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

._input_veo26_452:read-only:not(:disabled),
._textarea_veo26_454: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_veo26_505,
._inputError_veo26_505:hover:not(:disabled):not(:focus),
._input_veo26_452[aria-invalid='true'],
._select_veo26_453[aria-invalid='true'],
._textarea_veo26_454[aria-invalid='true'] {
  border-color: var(--color-border-danger);
}

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

._hint_veo26_521 {
  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_veo26_529 {
  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_veo26_529 svg {
  flex: 0 0 auto;
  color: var(--color-icon-danger);
}

/* Character counter under a Text Area: right-aligned, Body/Small */
._counter_veo26_544 {
  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_veo26_552 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

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

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

._groupTitle_veo26_569 {
  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_veo26_576 {
  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_veo26_589 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

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

._nowrap_veo26_612 {
  white-space: nowrap;
}

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

/* Alert: inline, persistent. Icon + title, optional description and action */
._alert_veo26_632 {
  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_veo26_642 {
  display: flex;
  flex: 0 0 auto;
  color: var(--color-icon-brand);
}
._alertContent_veo26_647 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}
._alertTitle_veo26_654 {
  margin: 0;
  color: var(--color-text-primary);
}
._alertDescription_veo26_658 {
  margin: 0;
  color: var(--color-text-secondary);
}
/* A note without a title: its text is the message (#298) */
._alertMessage_veo26_663 {
  margin: 0;
  color: var(--color-text-primary);
}
/* Close button of a dismissible alert (`onDismiss`) */
._alertClose_veo26_668 {
  display: flex;
  flex: 0 0 auto;
}
._alertActions_veo26_672 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-top: var(--spacing-4);
}
._alertSuccess_veo26_678 {
  border-color: var(--color-border-success-subtle);
  background: var(--color-bg-success-subtle);
}
._alertSuccess_veo26_678 ._alertIcon_veo26_642 {
  color: var(--color-icon-success);
}
._alertWarning_veo26_685 {
  border-color: var(--color-border-warning-subtle);
  background: var(--color-bg-warning-subtle);
}
._alertWarning_veo26_685 ._alertIcon_veo26_642 {
  color: var(--color-icon-warning);
}
._alertDanger_veo26_692 {
  border-color: var(--color-border-danger-subtle);
  background: var(--color-bg-danger-subtle);
}
._alertDanger_veo26_692 ._alertIcon_veo26_642 {
  color: var(--color-icon-danger);
}

/* Plain table inside a dialog (same header and cell styles as the list table, without a toolbar) */
._plainTable_veo26_701 {
  width: 100%;
  border-collapse: collapse;
}
._plainTable_veo26_701 th,
._plainTable_veo26_701 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_veo26_701 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_veo26_701 td {
  height: calc(var(--size-control-md) + var(--spacing-16));
}
._plainTable_veo26_701 tbody tr:last-child td {
  border-bottom: 0;
}
._plainTable_veo26_701 ._right_veo26_728 {
  text-align: right;
}

/* ── Empty State: icon + title + description + action (Small inside cards and tables) ── */
._emptyState_veo26_733 {
  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_veo26_742 {
  padding: var(--spacing-32) var(--spacing-24);
}
._emptyIcon_veo26_745 {
  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_veo26_756 {
  width: var(--spacing-64);
  height: var(--spacing-64);
}
._emptyIconDanger_veo26_760 {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger);
}
._emptyTitle_veo26_764 {
  margin: 0;
  color: var(--color-text-primary);
}
._emptyDescription_veo26_768 {
  margin: 0;
  max-width: 60ch;
}
._emptyActions_veo26_772 {
  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_veo26_781 {
  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_veo26_1 1.5s linear infinite;
}

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

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

@media (max-width: 767px) {
  ._formGrid_veo26_558,
  ._checkListColumns_veo26_589 {
    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 — 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 — 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 — Card & KPI / KPI Card: outlined card (border/subtle, radius lg), card padding 24 */
._grid_rhpym_2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--layout-gutter);
}

._card_rhpym_8 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--layout-card-padding);
  border: var(--stroke-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

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

/* Icon Tile — Medium 40 (icon 20, radius md) */
._tile_rhpym_25 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-control-md);
  height: var(--size-control-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-subtle);
  color: var(--color-icon-brand);
}

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

._label_rhpym_42 {
  min-width: 0;
  color: var(--color-text-primary);
}

._info_rhpym_47 {
  display: inline-flex;
  margin-left: calc(var(--spacing-4) * -1);
  color: var(--color-icon-secondary);
  cursor: help;
}

._valueRow_rhpym_54 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: var(--spacing-16);
}

._value_rhpym_54 {
  min-width: 0;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Sparkline 96 × 32: the trend's colour (success up, danger down, brand without a trend) */
._sparkline_rhpym_69 {
  flex: 0 0 auto;
  stroke-width: var(--stroke-medium);
  stroke-linecap: round;
  stroke-linejoin: round;
}

._lineUp_rhpym_76 {
  stroke: var(--color-icon-success);
}

._lineDown_rhpym_80 {
  stroke: var(--color-icon-danger);
}

._lineNeutral_rhpym_84 {
  stroke: var(--color-icon-brand);
}

._footer_rhpym_88 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--spacing-24);
  margin-top: var(--spacing-12);
}

/* Change against the previous period: a Badge (Subtle) with the trend arrow */
._delta_rhpym_98 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  height: var(--spacing-24);
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-sm);
  background: var(--color-bg-neutral-subtle);
  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);
  font-variant-numeric: tabular-nums;
}

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

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

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

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

@media (max-width: 767px) {
  ._grid_rhpym_2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/*
 * 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);
  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::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 {
  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;
}
/*
 * Zuu loader — the artwork is the design package's SVG (its own colours: the disc stays white in both themes).
 * The motion below is the package's own \3c style> (web/ZuuLoader.tsx), moved here so a copy adds no text to the
 * page and the rules are written once; every timing is the package's. `--zuu-phase` (set per copy) puts all
 * copies on the same clock. It fades in after 300 ms (Design System · Progress & Loading: no flash on fast responses).
 */
._loader_k9taz_7 {
  display: inline-block;
  flex: none;
  line-height: 0;
  animation: _zuu-loader-appear_k9taz_1 160ms ease-out 300ms both;
}

._loader_k9taz_7 > svg {
  display: block;
}

._instant_k9taz_18 {
  animation: none;
}

@keyframes _zuu-loader-appear_k9taz_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Light field: swells 1 → 1.12 → 1; each light orbits the disc once per loop (the purple one backwards) … */
._sw_k9taz_33,
._o0_k9taz_34,
._o1_k9taz_35,
._o2_k9taz_36,
._o3_k9taz_37 {
  transform-box: view-box;
  transform-origin: 100px 100px;
}

._sw_k9taz_33 {
  animation: _zuu-swell_k9taz_1 4.8s ease-in-out var(--zuu-phase, 0s) infinite;
}

._o0_k9taz_34,
._o1_k9taz_35,
._o3_k9taz_37 {
  animation: _zuu-orbit_k9taz_1 4.8s linear var(--zuu-phase, 0s) infinite;
}

._o2_k9taz_36 {
  animation: _zuu-orbit_k9taz_1 4.8s linear var(--zuu-phase, 0s) infinite reverse;
}

/* … and drifts on its own four-point path */
._a0_k9taz_57 {
  animation: _zuu-drift0_k9taz_1 4.8s ease-in-out var(--zuu-phase, 0s) infinite;
}

._a1_k9taz_61 {
  animation: _zuu-drift1_k9taz_1 4.8s ease-in-out var(--zuu-phase, 0s) infinite;
}

._a2_k9taz_65 {
  animation: _zuu-drift2_k9taz_1 4.8s ease-in-out var(--zuu-phase, 0s) infinite;
}

._a3_k9taz_69 {
  animation: _zuu-drift3_k9taz_1 4.8s ease-in-out var(--zuu-phase, 0s) infinite;
}

@keyframes _zuu-swell_k9taz_1 {
  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.12);
  }
}

@keyframes _zuu-orbit_k9taz_1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes _zuu-drift0_k9taz_1 {
  0%,
  100% {
    transform: translate(-23.2px, -13.92px);
  }

  25% {
    transform: translate(6.96px, -25.52px);
  }

  50% {
    transform: translate(23.2px, 2.32px);
  }

  75% {
    transform: translate(-4.64px, 24.36px);
  }
}

@keyframes _zuu-drift1_k9taz_1 {
  0%,
  100% {
    transform: translate(22.04px, -17.4px);
  }

  25% {
    transform: translate(25.52px, 15.08px);
  }

  50% {
    transform: translate(-5.8px, 25.52px);
  }

  75% {
    transform: translate(-24.36px, -3.48px);
  }
}

@keyframes _zuu-drift2_k9taz_1 {
  0%,
  100% {
    transform: translate(0, 25.52px);
  }

  25% {
    transform: translate(-25.52px, 5.8px);
  }

  50% {
    transform: translate(-10.44px, -23.2px);
  }

  75% {
    transform: translate(22.04px, -8.12px);
  }
}

@keyframes _zuu-drift3_k9taz_1 {
  0%,
  100% {
    transform: translate(17.4px, 20.88px);
  }

  25% {
    transform: translate(-16.24px, 23.2px);
  }

  50% {
    transform: translate(-22.04px, -11.6px);
  }

  75% {
    transform: translate(16.24px, -20.88px);
  }
}

/* Reduced motion: the light field stays on its first frame (the still mark) */
@media (prefers-reduced-motion: reduce) {
  ._sw_k9taz_33,
  ._o0_k9taz_34,
  ._o1_k9taz_35,
  ._o2_k9taz_36,
  ._o3_k9taz_37,
  ._a0_k9taz_57,
  ._a1_k9taz_61,
  ._a2_k9taz_65,
  ._a3_k9taz_69 {
    animation: none;
  }
}
/* 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 — the Zuu loader centred in its area, with the text under it.
 * Only semantic tokens.
 */
._state_crmdc_5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

._content_crmdc_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_crmdc_20 {
  padding: var(--spacing-48) var(--spacing-24);
}

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

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

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

._overlay_crmdc_37 ._content_crmdc_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_crmdc_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);
}
/* 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;
}
/*
 * Top Bar — Figma kütüphanesi "Navigation" 41:137 (Desktop 64) · 41:183 (Tablet) · 41:227 (Mobile 56).
 * Yalnız semantik token; ölçüler token ya da token katı.
 */
._topBar_1wag3_5 {
  position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-12);
  height: var(--layout-topbar-height);
  padding: 0 var(--layout-margin);
  border-bottom: var(--stroke-thin) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

._spacer_1wag3_19 {
  flex: 1 1 0;
  min-width: 0;
}

/* Arama: 360 px (Search Field anatomisi), dar ekranda küçülür */
._search_1wag3_25 {
  position: relative;
  flex: 0 1 calc(var(--spacing-40) * 9);
  min-width: calc(var(--spacing-40) * 4);
}

._search_1wag3_25 > div {
  width: 100%;
}

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

._resultTrail_1wag3_41 {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Çalışma alanı: Logo/Mark 24 + ad; kenarlıklı 40 px kutu */
._workspace_1wag3_51 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-8);
  max-width: calc(var(--spacing-40) * 6);
  height: var(--size-control-md);
  padding: 0 var(--spacing-12) 0 var(--spacing-8);
  border: var(--stroke-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

._workspaceMark_1wag3_64 {
  flex-shrink: 0;
  width: var(--size-avatar-sm);
  height: var(--size-avatar-sm);
  object-fit: contain;
}

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

/* Metinli açılır tetikleyiciler (dil, hesap) */
._trigger_1wag3_81 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-4);
  height: var(--size-control-md);
  padding: 0 var(--spacing-8);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-body-md-line-height);
  cursor: pointer;
}

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

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

._trigger_1wag3_81 svg {
  flex-shrink: 0;
  color: var(--color-icon-secondary);
}

._chevron_1wag3_112 {
  transition: transform 160ms ease;
}

._chevronOpen_1wag3_116 {
  transform: rotate(180deg);
}

._account_1wag3_120 {
  gap: var(--spacing-8);
  padding: 0 var(--spacing-4);
}

._accountName_1wag3_125 {
  max-width: calc(var(--spacing-40) * 5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._divider_1wag3_132 {
  flex-shrink: 0;
  width: var(--stroke-thin);
  height: var(--spacing-24);
  background: var(--color-border-subtle);
}

/* Bildirim: Icon Button / Ghost + 8 px kırmızı nokta (okunmamış varken) */
._bell_1wag3_140 {
  position: relative;
  display: inline-flex;
}

._unreadDot_1wag3_145 {
  position: absolute;
  top: var(--spacing-8);
  left: var(--spacing-24);
  width: var(--spacing-8);
  height: var(--spacing-8);
  border: var(--stroke-medium) solid var(--color-bg-surface);
  border-radius: var(--radius-full);
  background: var(--color-bg-danger);
  box-sizing: content-box;
  pointer-events: none;
}

/* Avatar — Initials / Image, Medium 32 */
._avatar_1wag3_159 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-avatar-md);
  height: var(--size-avatar-md);
  border: var(--stroke-thin) solid var(--color-border-brand-subtle);
  border-radius: var(--radius-full);
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
  font-size: var(--type-body-sm-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-body-sm-line-height);
  overflow: hidden;
}

._avatarLg_1wag3_176 {
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
}

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

._avatarLoading_1wag3_187 {
  opacity: 0.6;
}

/* Hesap menüsünün üst bölümü: avatar + ad + e-posta */
._menuHead_1wag3_192 {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  max-width: calc(var(--spacing-40) * 7);
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-12);
}

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

._menuHeadName_1wag3_206,
._menuHeadEmail_1wag3_207 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._menuHeadName_1wag3_206 {
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-body-md-line-height);
}

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

/* Bildirim paneli: boş durum */
._panel_1wag3_227 {
  width: calc(var(--spacing-40) * 8);
  padding: var(--spacing-8);
}

._panelTitle_1wag3_232 {
  padding: var(--spacing-4) var(--spacing-8) var(--spacing-8);
  color: var(--color-text-primary);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-body-md-line-height);
}

._mobileLogo_1wag3_240 {
  display: none;
  height: calc(var(--spacing-20));
  width: auto;
}

/* Tablet: tam ekran ve kullanıcı adı gizli (Figma Device=Tablet) */
@media (max-width: 1279px) {
  ._hideTablet_1wag3_248 {
    display: none;
  }
}

/* Mobil 56: menü, logo, bildirim, hesap */
@media (max-width: 767px) {
  ._topBar_1wag3_5 {
    height: calc(var(--spacing-48) + var(--spacing-8));
    padding: 0 var(--spacing-8) 0 var(--spacing-4);
  }

  ._hideMobile_1wag3_260 {
    display: none;
  }

  ._mobileLogo_1wag3_240 {
    display: block;
  }
}
/*
 * App Footer — Figma kütüphanesi "Navigation" 133:1263: 48 px, beyaz yüzey, 1 px üst çizgi,
 * Body/Small text/tertiary; solda ©YIL ✦ ZUZZUU®, sağda sürüm.
 */
._footer_h5hn9_5 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  height: var(--spacing-48);
  padding: 0 var(--layout-margin);
  border-top: var(--stroke-thin) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  color: var(--color-text-tertiary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._footer_h5hn9_5 p {
  margin: 0;
  white-space: nowrap;
}
/* Gömülü modül çerçevesi: alanı doldurur; yükleniyor (Zuu yükleyicisi) ve hata (Error State) üstte. */
._frame_2r6xu_2 {
  position: relative;
  width: 100%;
  height: 100%;
}

._fullscreen_2r6xu_8 {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  height: 100vh;
}

/* Yükleyici, modülün kendi sayfa yükleyicisiyle (LoadingState page: üstteki %60'ın ortası) aynı yerde
   durur; iframe açılıp modül kendi yükleyicisini gösterince yerinden sıçramaz. */
._loading_2r6xu_18 {
  position: absolute;
  inset: 0 0 auto;
  height: 60%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

._error_2r6xu_29 {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
._fullScreen_1416m_1 {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-canvas);
}
/* Dar menü (ray) alt menü paneli — kütüphane Menu yüzeyi; sidebar'ın sağında açılır. */
._panel_k8n1x_2 {
  z-index: 9999;
  max-width: calc(var(--spacing-40) * 7);
  animation: _popoverIn_k8n1x_1 160ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top left;
  pointer-events: auto;
}

._nested_k8n1x_10 {
  z-index: 10000;
}

._title_k8n1x_14 {
  margin: 0;
  padding-bottom: 0;
}

._item_k8n1x_19 {
  justify-content: space-between;
  text-decoration: none; /* sayfası olan öğe bağlantıdır (#330) */
}

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

@keyframes _popoverIn_k8n1x_1 {
  from {
    opacity: 0;
    transform: translateX(calc(var(--spacing-6) * -1));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._panel_k8n1x_2 {
    animation: none;
  }
}
/*
 * Page Header — Figma kütüphanesi "Navigation" 41:296 (Type=Breadcrumb) + Breadcrumb 37:47:
 * yol satırı (2. seviyeden itibaren) → 16 → başlık H1 32/40 SemiBold.
 * Breadcrumb Item: Label/Medium 14/20, 2 × 4 iç boşluk, radius sm; üst öğeler text/secondary
 * (bağlantı), son öğe düz metin text/primary; ayraç chevron-right 16.
 */
._pageHeader_cw5m1_7 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

._breadcrumb_cw5m1_14 {
  min-width: 0;
}

._trail_cw5m1_18 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

._crumb_cw5m1_28 {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  min-width: 0;
}

._item_cw5m1_35 {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-body-md-line-height);
  text-decoration: none;
  white-space: nowrap;
}

a._item_cw5m1_35:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

a._item_cw5m1_35:focus-visible {
  outline: var(--stroke-thick) solid var(--color-border-focus);
  outline-offset: 0;
}

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

._separator_cw5m1_62 {
  display: inline-flex;
  color: var(--color-icon-tertiary);
}

._title_cw5m1_67 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--type-h1-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-h1-line-height);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

/* Başlık + açıklama (Figma Page Header "Titles": başlık 40 → 4 → açıklama Body/Medium 14/20
   text/secondary). Açıklamayı içerikteki modül gönderir (kit PageHeader, #356 G-05). */
._titles_cw5m1_79 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

._description_cw5m1_86 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-md-line-height);
  overflow-wrap: anywhere;
}
/*
 * App Shell — Zuzzuu Dashboard 2027 (kütüphane "App Shell" + "Navigation"): Sidebar 264
 * (dar ray 72, mobil çekmece 280) · Top Bar 64 · içerik: Page Header (yol satırı + başlık)
 * ve sayfa, kenar boşluğu layout/margin · App Footer 48. Zemin bg/canvas.
 */
._shell_jpqja_6 {
  display: flex;
  width: 100%;
  height: 100vh;
  background: var(--color-bg-canvas);
}

._sidebar_jpqja_13 {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  transition: width 300ms ease;
}

._sidebarExpanded_jpqja_22 {
  width: calc(var(--spacing-24) * 11);
}

._sidebarRail_jpqja_26 {
  width: calc(var(--spacing-24) * 3);
}

._sidebarDrawer_jpqja_30 {
  width: calc(var(--spacing-40) * 7);
}

._sidebarHidden_jpqja_34 {
  width: 0;
}

/* Mobil çekmece açıkken içeriğin üstündeki örtü */
._scrim_jpqja_39 {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--color-bg-overlay);
}

._column_jpqja_46 {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}

._main_jpqja_54 {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-bg-canvas);
}

._pageHeader_jpqja_63 {
  flex-shrink: 0;
  padding: var(--layout-margin) var(--layout-margin) 0;
}

._pageHeader_jpqja_63:empty {
  display: none;
}

._content_jpqja_72 {
  position: relative;
  flex: 1 1 0;
  min-height: calc(var(--spacing-40) * 10);
  padding: var(--layout-section-gap) var(--layout-margin) var(--layout-margin);
}

/* Modül diyaloğu açıkken (#356 G-06): örtü tüm kabuğu (sidebar 40, üst çubuk, sayfa başlığı,
   altbilgi) kaplar ve tıklamaları yutar; içerik iframe'i örtünün üstünde kalır — onu modülün kendi
   örtüsü karartır. Login'in tam ekran iframe'i (50) bunun da üstünde. */
._modalDim_jpqja_82 {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--color-bg-overlay);
  pointer-events: auto;
}

._modalOpen_jpqja_90 ._content_jpqja_72 iframe {
  position: relative;
  z-index: 46;
}

@media (max-width: 767px) {
  ._sidebar_jpqja_13 {
    position: fixed;
    inset: 0 auto 0 0;
  }

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

  ._content_jpqja_72 {
    padding: var(--spacing-16);
  }
}
/* 404 — Dashboard 2027 Empty State (Large) bir kartın ortasında; istenen adres altında. */
._card_7ldju_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--spacing-40) * 12);
}

._requested_7ldju_9 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  max-width: 100%;
  margin: var(--spacing-16) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

._requested_7ldju_9 code {
  overflow: hidden;
  padding: var(--spacing-2) var(--spacing-8);
  border-radius: var(--radius-sm);
  background: var(--color-bg-inset);
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._note_7ldju_32 {
  margin: var(--spacing-16) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  text-align: center;
}
/*
 * Hesap sayfaları (Profil · Şifre değiştir · Giriş kayıtları) — Dashboard 2027.
 * Figma'da kişisel profil ekranı yok: sekmeler + kartlar "Security · Settings" (89:3341),
 * tablo "Security · Login activity" (89:3865) düzeninde. Yalnız semantik token.
 */
._page_1y2sh_6 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}

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

._fields_1y2sh_19 {
  margin-top: var(--spacing-24);
}

._passwordFields_1y2sh_23 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: calc(var(--spacing-40) * 12);
}

._actions_1y2sh_30 {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-12);
  margin-top: var(--spacing-24);
}

._photoRow_1y2sh_37 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
}

/* Üst çubuktaki avatarın büyüğü (TopBar.module.css .avatar) */
._avatar_1y2sh_45 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--size-avatar-lg) * 2);
  height: calc(var(--size-avatar-lg) * 2);
  overflow: hidden;
  border: var(--stroke-thin) solid var(--color-border-brand-subtle);
  border-radius: var(--radius-full);
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-brand);
  font-size: var(--type-h4-size);
  font-weight: var(--font-weight-semibold);
}

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

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

._filter_1y2sh_74 {
  width: calc(var(--spacing-40) * 5);
}

._statusCell_1y2sh_78 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
}

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

._mono_1y2sh_90 {
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--type-body-sm-size);
}

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

@media (max-width: 767px) {
  ._kpis_1y2sh_68 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Yetki / menü durum kartları: kartın ortasında Empty State (Large). */
._card_1l8s3_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--spacing-40) * 10);
}
/* "Yapım aşamasında" sayfası: kartın ortasında Empty State (Large) + "Yakında" rozeti. */
._card_qda94_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--spacing-40) * 12);
}

._badge_qda94_9 {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-12);
}

._note_qda94_15 {
  margin: var(--spacing-16) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  text-align: center;
}