:root {
  color-scheme: light;
  --cc-brand-static: #1a73e8;
  --cc-brand-on: #ffffff;
  --cc-brand-deep: #0b3a8c;
  --cc-brand-deeper: #0f2c63;
  --cc-brand-strong: #0b57d0;
  --cc-brand-tint: #7cacf8;
  --cc-brand-shadow: #061a3a;
  --cc-font-sans: "Google Sans Flex", "Google Sans", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-font-mono: "Google Sans Code", "Roboto Mono", ui-monospace, "SF Mono", monospace;
  --cc-radius-xs: 4px;
  --cc-radius-sm: 8px;
  --cc-radius-md: 12px;
  --cc-radius-lg: 16px;
  --cc-radius-xl: 20px;
  --cc-radius-xl2: 20px;
  --cc-radius-2xl: 28px;
  --cc-radius-3xl: 32px;
  --cc-radius-pill: 999px;
  --cc-focus-width: 2px;
  --cc-focus-offset: 2px;
  --cc-focus-color: var(--cc-color-primary);
  --cc-state-hover: 8%;
  --cc-state-focus: 10%;
  --cc-state-pressed: 10%;
  --cc-state-dragged: 16%;
  --cc-state-disabled: 38%;
  --cc-state-disabled-container: 12%;
  --cc-blur-sm: 4px;
  --cc-blur-md: 12px;
  --cc-blur-lg: 24px;
  --cc-glass-blur: 12px;
  --cc-glass-bg-opaque: var(--cc-color-surface-1);
  --cc-glass-inverse: color-mix(in srgb, var(--cc-color-inverse-surface) 85%, transparent);
  --cc-hairline-gradient: linear-gradient(var(--cc-motif-angle, 135deg), var(--cc-hairline-from), var(--cc-hairline-to));
  --cc-motif-angle: 135deg;
  --cc-motif-arrow: polygon(0% 0%, 42% 0%, 100% 50%, 42% 100%, 0% 100%, 58% 50%);
  --cc-space-0: 0;
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-5: 20px;
  --cc-space-6: 24px;
  --cc-space-7: 32px;
  --cc-space-8: 40px;
  --cc-space-9: 48px;
  --cc-space-10: 64px;
  --cc-space-11: 80px;
  --cc-space-12: 96px;
  --cc-space-05: 2px;
  --cc-nav-height: 64px;
  --cc-topbar-height: 64px;
  --cc-sidebar-width: 264px;
  --cc-sidebar-width-collapsed: 76px;
  --cc-type-display-lg-size: 3.5rem;
  --cc-type-display-lg-line: 4rem;
  --cc-type-display-lg-weight: 400;
  --cc-type-display-lg-tracking: -0.025em;
  --cc-type-display-lg-emphasized-size: 3.5rem;
  --cc-type-display-lg-emphasized-line: 4rem;
  --cc-type-display-lg-emphasized-weight: 700;
  --cc-type-display-lg-emphasized-tracking: -0.03em;
  --cc-type-display-md-size: 2.8125rem;
  --cc-type-display-md-line: 3.25rem;
  --cc-type-display-md-weight: 400;
  --cc-type-display-md-tracking: -0.01em;
  --cc-type-display-md-emphasized-size: 2.8125rem;
  --cc-type-display-md-emphasized-line: 3.25rem;
  --cc-type-display-md-emphasized-weight: 700;
  --cc-type-display-md-emphasized-tracking: -0.015em;
  --cc-type-display-sm-size: 2.25rem;
  --cc-type-display-sm-line: 2.75rem;
  --cc-type-display-sm-weight: 400;
  --cc-type-display-sm-tracking: -0.01em;
  --cc-type-display-sm-emphasized-size: 2.25rem;
  --cc-type-display-sm-emphasized-line: 2.75rem;
  --cc-type-display-sm-emphasized-weight: 700;
  --cc-type-display-sm-emphasized-tracking: -0.015em;
  --cc-type-headline-lg-size: 2rem;
  --cc-type-headline-lg-line: 2.5rem;
  --cc-type-headline-lg-weight: 500;
  --cc-type-headline-lg-tracking: -0.01em;
  --cc-type-headline-lg-emphasized-size: 2rem;
  --cc-type-headline-lg-emphasized-line: 2.5rem;
  --cc-type-headline-lg-emphasized-weight: 700;
  --cc-type-headline-lg-emphasized-tracking: -0.015em;
  --cc-type-headline-md-size: 1.75rem;
  --cc-type-headline-md-line: 2.25rem;
  --cc-type-headline-md-weight: 500;
  --cc-type-headline-md-tracking: -0.005em;
  --cc-type-headline-md-emphasized-size: 1.75rem;
  --cc-type-headline-md-emphasized-line: 2.25rem;
  --cc-type-headline-md-emphasized-weight: 700;
  --cc-type-headline-md-emphasized-tracking: -0.01em;
  --cc-type-headline-sm-size: 1.5rem;
  --cc-type-headline-sm-line: 2rem;
  --cc-type-headline-sm-weight: 500;
  --cc-type-headline-sm-tracking: 0;
  --cc-type-headline-sm-emphasized-size: 1.5rem;
  --cc-type-headline-sm-emphasized-line: 2rem;
  --cc-type-headline-sm-emphasized-weight: 700;
  --cc-type-headline-sm-emphasized-tracking: -0.005em;
  --cc-type-title-lg-size: 1.375rem;
  --cc-type-title-lg-line: 1.75rem;
  --cc-type-title-lg-weight: 500;
  --cc-type-title-lg-tracking: 0;
  --cc-type-title-lg-emphasized-size: 1.375rem;
  --cc-type-title-lg-emphasized-line: 1.75rem;
  --cc-type-title-lg-emphasized-weight: 700;
  --cc-type-title-lg-emphasized-tracking: -0.004em;
  --cc-type-title-md-size: 1rem;
  --cc-type-title-md-line: 1.5rem;
  --cc-type-title-md-weight: 500;
  --cc-type-title-md-tracking: 0.005em;
  --cc-type-title-md-emphasized-size: 1rem;
  --cc-type-title-md-emphasized-line: 1.5rem;
  --cc-type-title-md-emphasized-weight: 700;
  --cc-type-title-md-emphasized-tracking: 0.002em;
  --cc-type-title-sm-size: 0.875rem;
  --cc-type-title-sm-line: 1.25rem;
  --cc-type-title-sm-weight: 500;
  --cc-type-title-sm-tracking: 0.006em;
  --cc-type-title-sm-emphasized-size: 0.875rem;
  --cc-type-title-sm-emphasized-line: 1.25rem;
  --cc-type-title-sm-emphasized-weight: 700;
  --cc-type-title-sm-emphasized-tracking: 0.003em;
  --cc-type-body-lg-size: 1rem;
  --cc-type-body-lg-line: 1.5rem;
  --cc-type-body-lg-weight: 400;
  --cc-type-body-lg-tracking: 0.003em;
  --cc-type-body-lg-emphasized-size: 1rem;
  --cc-type-body-lg-emphasized-line: 1.5rem;
  --cc-type-body-lg-emphasized-weight: 700;
  --cc-type-body-lg-emphasized-tracking: 0;
  --cc-type-body-md-size: 0.875rem;
  --cc-type-body-md-line: 1.25rem;
  --cc-type-body-md-weight: 400;
  --cc-type-body-md-tracking: 0.016em;
  --cc-type-body-md-emphasized-size: 0.875rem;
  --cc-type-body-md-emphasized-line: 1.25rem;
  --cc-type-body-md-emphasized-weight: 700;
  --cc-type-body-md-emphasized-tracking: 0.012em;
  --cc-type-body-sm-size: 0.75rem;
  --cc-type-body-sm-line: 1rem;
  --cc-type-body-sm-weight: 400;
  --cc-type-body-sm-tracking: 0.03em;
  --cc-type-body-sm-emphasized-size: 0.75rem;
  --cc-type-body-sm-emphasized-line: 1rem;
  --cc-type-body-sm-emphasized-weight: 700;
  --cc-type-body-sm-emphasized-tracking: 0.025em;
  --cc-type-label-lg-size: 0.875rem;
  --cc-type-label-lg-line: 1.25rem;
  --cc-type-label-lg-weight: 500;
  --cc-type-label-lg-tracking: 0.006em;
  --cc-type-label-lg-emphasized-size: 0.875rem;
  --cc-type-label-lg-emphasized-line: 1.25rem;
  --cc-type-label-lg-emphasized-weight: 700;
  --cc-type-label-lg-emphasized-tracking: 0.003em;
  --cc-type-label-md-size: 0.75rem;
  --cc-type-label-md-line: 1rem;
  --cc-type-label-md-weight: 500;
  --cc-type-label-md-tracking: 0.03em;
  --cc-type-label-md-emphasized-size: 0.75rem;
  --cc-type-label-md-emphasized-line: 1rem;
  --cc-type-label-md-emphasized-weight: 700;
  --cc-type-label-md-emphasized-tracking: 0.025em;
  --cc-type-label-sm-size: 0.6875rem;
  --cc-type-label-sm-line: 1rem;
  --cc-type-label-sm-weight: 500;
  --cc-type-label-sm-tracking: 0.03em;
  --cc-type-label-sm-emphasized-size: 0.6875rem;
  --cc-type-label-sm-emphasized-line: 1rem;
  --cc-type-label-sm-emphasized-weight: 700;
  --cc-type-label-sm-emphasized-tracking: 0.025em;
  --cc-motion-dur-1: 50ms;
  --cc-motion-dur-2: 100ms;
  --cc-motion-dur-3: 150ms;
  --cc-motion-dur-4: 200ms;
  --cc-motion-dur-5: 250ms;
  --cc-motion-dur-6: 300ms;
  --cc-motion-dur-7: 400ms;
  --cc-motion-dur-8: 500ms;
  --cc-motion-dur-9: 700ms;
  --cc-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cc-motion-ease-decel: cubic-bezier(0, 0, 0, 1);
  --cc-motion-ease-accel: cubic-bezier(0.3, 0, 1, 1);
  --cc-motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --cc-motion-ease-overshoot: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --cc-motion-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --cc-spring-spatial-fast: linear(0, 0.242, 0.594, 0.8343, 0.9549, 1.0005, 1.011, 1.0091, 1.0051, 1.0022, 1.0007, 1, 0.9999, 0.9999, 0.9999, 1, 1, 1, 1);
  --cc-spring-spatial-default: linear(0, 0.0972, 0.2998, 0.5176, 0.705, 0.8454, 0.9392, 0.9945, 1.0218, 1.031, 1.0301, 1.0244, 1.0175, 1.0112, 1.0062, 1.0028, 1.0007, 0.9995, 0.9991, 0.999, 0.9992, 0.9994, 0.9996, 0.9998, 1);
  --cc-spring-spatial-slow: linear(0, 0.0392, 0.1357, 0.2633, 0.4022, 0.5384, 0.6628, 0.7703, 0.8586, 0.9277, 0.979, 1.0146, 1.0372, 1.0495, 1.0541, 1.0531, 1.0486, 1.042, 1.0346, 1.0271, 1.0201, 1.014, 1.0089, 1.0049, 1.0018, 0.9997, 0.9983, 0.9975, 0.9971, 0.9971, 1);
  --cc-breakpoint-sm: 600px;
  --cc-breakpoint-md: 840px;
  --cc-breakpoint-lg: 1200px;
  --cc-breakpoint-xl: 1600px;
  --cc-z-base: 0;
  --cc-z-sticky: 1020;
  --cc-z-fab: 1030;
  --cc-z-drawer: 1055;
  --cc-z-backdrop: 1050;
  --cc-z-modal: 1060;
  --cc-z-dropdown: 1065;
  --cc-z-menu: 1065;
  --cc-z-popover: 1070;
  --cc-z-toast: 1080;
  --cc-z-tooltip: 1090;
  --cc-z-screenshot: 1100;
  --cc-print-bg: #ffffff;
  --cc-print-fg: #000000;
  --cc-print-rule: #999999;

  --cc-color-primary: #1a73e8;
  --cc-color-primary-text: #0b57d0;
  --cc-color-on-primary: #ffffff;
  --cc-color-primary-container: #ddebfb;
  --cc-color-on-primary-container: #0f2c63;
  --cc-color-on-primary-container-variant: color-mix(in srgb, var(--cc-color-on-primary-container) 94%, var(--cc-color-primary-container));
  --cc-color-on-primary-container-muted: color-mix(in srgb, var(--cc-color-on-primary-container) 86%, var(--cc-color-primary-container));
  --cc-color-primary-hover: #1552b0;
  --cc-color-secondary: #52606f;
  --cc-color-on-secondary: #ffffff;
  --cc-color-secondary-container: #d9e2ee;
  --cc-color-on-secondary-container: #26303b;
  --cc-color-background: #ffffff;
  --cc-color-surface: #ffffff;
  --cc-color-surface-1: #f8f9fc;
  --cc-color-surface-2: #f1f3f9;
  --cc-color-surface-3: #e9ecf4;
  --cc-color-surface-variant: #f1f3f9;
  --cc-color-on-surface: #1a1c20;
  --cc-color-on-surface-variant: #44474f;
  --cc-color-on-surface-muted: #5f6368;
  --cc-color-outline: #74777f;
  --cc-color-outline-variant: #e1e3ea;
  --cc-color-inverse-surface: #1a1c20;
  --cc-color-inverse-on-surface: #f8f9fc;
  --cc-color-inverse-primary: #93bef4;
  --cc-color-tertiary: #00796b;
  --cc-color-on-tertiary: #ffffff;
  --cc-color-tertiary-container: #d0f5ef;
  --cc-color-on-tertiary-container: #00332c;
  --cc-color-success: #188038;
  --cc-color-on-success: #ffffff;
  --cc-color-success-container: #e6f4ea;
  --cc-color-on-success-container: #0b5522;
  --cc-color-warning: #f9ab00;
  --cc-color-warning-text: #8a5a00;
  --cc-color-on-warning: #1a1c20;
  --cc-color-warning-container: #fef3d7;
  --cc-color-on-warning-container: #6b4a00;
  --cc-color-error: #d93025;
  --cc-color-on-error: #ffffff;
  --cc-color-error-container: #fce8e6;
  --cc-color-on-error-container: #7a140c;
  --cc-color-info: #0076b0;
  --cc-color-on-info: #ffffff;
  --cc-color-info-container: #cbeaf5;
  --cc-color-on-info-container: #06364a;
  --cc-color-link: #0b57d0;
  --cc-color-link-hover: #0f2c63;
  --cc-color-scrim: rgba(0, 0, 0, 0.4);
  --cc-code-key: #1552b0;
  --cc-code-str: #00796b;
  --cc-code-num: #036696;
  --cc-code-fn: #0b57d0;
  --cc-code-punct: #44474f;
  --cc-code-com: #5f6368;
  --cc-dataviz-1: #1a73e8;
  --cc-dataviz-2: #079e88;
  --cc-dataviz-3: #036696;
  --cc-dataviz-4: #0ca5a7;
  --cc-dataviz-5: #2b50c6;
  --cc-dataviz-6: #0a8d83;
  --cc-dataviz-7: #035798;
  --cc-dataviz-8: #0092a2;
  --cc-glass-surface: color-mix(in srgb, var(--cc-color-surface-1) 78%, transparent);
  --cc-glass-surface-strong: color-mix(in srgb, var(--cc-color-surface-1) 85%, transparent);
  --cc-glass-border: color-mix(in srgb, var(--cc-color-primary) 28%, transparent);
  --cc-elevation-0: none;
  --cc-elevation-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --cc-elevation-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 8px rgba(16, 24, 40, 0.08);
  --cc-elevation-3: 0 4px 8px rgba(16, 24, 40, 0.06), 0 8px 16px rgba(16, 24, 40, 0.10);
  --cc-elevation-4: 0 8px 16px rgba(16, 24, 40, 0.08), 0 16px 32px rgba(16, 24, 40, 0.12);
  --cc-elevation-5: 0 12px 24px rgba(16, 24, 40, 0.10), 0 24px 48px rgba(16, 24, 40, 0.16);
  --cc-hairline-from: color-mix(in srgb, var(--cc-color-primary) 78%, #000);
  --cc-hairline-to: color-mix(in srgb, var(--cc-color-primary) 35%, #fff);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cc-color-primary: #93bef4;
  --cc-color-primary-text: #93bef4;
  --cc-color-on-primary: #0f2c63;
  --cc-color-primary-container: #1552b0;
  --cc-color-on-primary-container: #ddebfb;
  --cc-color-on-primary-container-variant: color-mix(in srgb, var(--cc-color-on-primary-container) 94%, var(--cc-color-primary-container));
  --cc-color-on-primary-container-muted: color-mix(in srgb, var(--cc-color-on-primary-container) 86%, var(--cc-color-primary-container));
  --cc-color-primary-hover: #bbd6f8;
  --cc-color-secondary: #bcc8d8;
  --cc-color-on-secondary: #26303b;
  --cc-color-secondary-container: #3b4756;
  --cc-color-on-secondary-container: #d9e2ee;
  --cc-color-background: #121316;
  --cc-color-surface: #121316;
  --cc-color-surface-1: #1e1f24;
  --cc-color-surface-2: #24262b;
  --cc-color-surface-3: #2a2c32;
  --cc-color-surface-variant: #303237;
  --cc-color-on-surface: #e1e3ea;
  --cc-color-on-surface-variant: #c4c6cf;
  --cc-color-on-surface-muted: #9ea1a9;
  --cc-color-outline: #74777f;
  --cc-color-outline-variant: #44474f;
  --cc-color-inverse-surface: #e1e3ea;
  --cc-color-inverse-on-surface: #1a1c20;
  --cc-color-inverse-primary: #1552b0;
  --cc-color-tertiary: #77d9cb;
  --cc-color-on-tertiary: #00332c;
  --cc-color-tertiary-container: #00332c;
  --cc-color-on-tertiary-container: #d0f5ef;
  --cc-color-success: #a8d5b5;
  --cc-color-on-success: #0b5522;
  --cc-color-success-container: #0b5522;
  --cc-color-on-success-container: #e6f4ea;
  --cc-color-warning: #f5d573;
  --cc-color-warning-text: #f5d573;
  --cc-color-on-warning: #6b4a00;
  --cc-color-warning-container: #6b4a00;
  --cc-color-on-warning-container: #fef3d7;
  --cc-color-error: #f2a9a3;
  --cc-color-on-error: #7a140c;
  --cc-color-error-container: #7a140c;
  --cc-color-on-error-container: #fce8e6;
  --cc-color-info: #6fc3dc;
  --cc-color-on-info: #06364a;
  --cc-color-info-container: #0e5a76;
  --cc-color-on-info-container: #cbeaf5;
  --cc-color-link: #93bef4;
  --cc-color-link-hover: #bbd6f8;
  --cc-color-scrim: rgba(0, 0, 0, 0.6);
  --cc-code-key: #8ab4f8;
  --cc-code-str: #77d9cb;
  --cc-code-num: #30b4ff;
  --cc-code-fn: #93bef4;
  --cc-code-punct: #c4c6cf;
  --cc-code-com: #9ea1a9;
  --cc-dataviz-1: #0a72f0;
  --cc-dataviz-2: #0ca38c;
  --cc-dataviz-3: #30b4ff;
  --cc-dataviz-4: #099192;
  --cc-dataviz-5: #608cff;
  --cc-dataviz-6: #04cabc;
  --cc-dataviz-7: #0574c7;
  --cc-dataviz-8: #0eadbf;
  --cc-glass-surface: color-mix(in srgb, var(--cc-color-surface-1) 82%, transparent);
  --cc-glass-surface-strong: color-mix(in srgb, var(--cc-color-surface-1) 85%, transparent);
  --cc-glass-border: color-mix(in srgb, var(--cc-color-primary) 28%, transparent);
  --cc-elevation-0: none;
  --cc-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36);
  --cc-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 4px 8px rgba(0, 0, 0, 0.40);
  --cc-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.34), 0 8px 16px rgba(0, 0, 0, 0.44);
  --cc-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.38), 0 16px 32px rgba(0, 0, 0, 0.48);
  --cc-elevation-5: 0 12px 24px rgba(0, 0, 0, 0.42), 0 24px 48px rgba(0, 0, 0, 0.54);
  --cc-hairline-from: color-mix(in srgb, var(--cc-color-primary) 30%, transparent);
  --cc-hairline-to: color-mix(in srgb, var(--cc-color-primary) 85%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cc-color-primary: #93bef4;
    --cc-color-primary-text: #93bef4;
    --cc-color-on-primary: #0f2c63;
    --cc-color-primary-container: #1552b0;
    --cc-color-on-primary-container: #ddebfb;
    --cc-color-on-primary-container-variant: color-mix(in srgb, var(--cc-color-on-primary-container) 94%, var(--cc-color-primary-container));
    --cc-color-on-primary-container-muted: color-mix(in srgb, var(--cc-color-on-primary-container) 86%, var(--cc-color-primary-container));
    --cc-color-primary-hover: #bbd6f8;
    --cc-color-secondary: #bcc8d8;
    --cc-color-on-secondary: #26303b;
    --cc-color-secondary-container: #3b4756;
    --cc-color-on-secondary-container: #d9e2ee;
    --cc-color-background: #121316;
    --cc-color-surface: #121316;
    --cc-color-surface-1: #1e1f24;
    --cc-color-surface-2: #24262b;
    --cc-color-surface-3: #2a2c32;
    --cc-color-surface-variant: #303237;
    --cc-color-on-surface: #e1e3ea;
    --cc-color-on-surface-variant: #c4c6cf;
    --cc-color-on-surface-muted: #9ea1a9;
    --cc-color-outline: #74777f;
    --cc-color-outline-variant: #44474f;
    --cc-color-inverse-surface: #e1e3ea;
    --cc-color-inverse-on-surface: #1a1c20;
    --cc-color-inverse-primary: #1552b0;
    --cc-color-tertiary: #77d9cb;
    --cc-color-on-tertiary: #00332c;
    --cc-color-tertiary-container: #00332c;
    --cc-color-on-tertiary-container: #d0f5ef;
    --cc-color-success: #a8d5b5;
    --cc-color-on-success: #0b5522;
    --cc-color-success-container: #0b5522;
    --cc-color-on-success-container: #e6f4ea;
    --cc-color-warning: #f5d573;
    --cc-color-warning-text: #f5d573;
    --cc-color-on-warning: #6b4a00;
    --cc-color-warning-container: #6b4a00;
    --cc-color-on-warning-container: #fef3d7;
    --cc-color-error: #f2a9a3;
    --cc-color-on-error: #7a140c;
    --cc-color-error-container: #7a140c;
    --cc-color-on-error-container: #fce8e6;
    --cc-color-info: #6fc3dc;
    --cc-color-on-info: #06364a;
    --cc-color-info-container: #0e5a76;
    --cc-color-on-info-container: #cbeaf5;
    --cc-color-link: #93bef4;
    --cc-color-link-hover: #bbd6f8;
    --cc-color-scrim: rgba(0, 0, 0, 0.6);
    --cc-code-key: #8ab4f8;
    --cc-code-str: #77d9cb;
    --cc-code-num: #30b4ff;
    --cc-code-fn: #93bef4;
    --cc-code-punct: #c4c6cf;
    --cc-code-com: #9ea1a9;
    --cc-dataviz-1: #0a72f0;
    --cc-dataviz-2: #0ca38c;
    --cc-dataviz-3: #30b4ff;
    --cc-dataviz-4: #099192;
    --cc-dataviz-5: #608cff;
    --cc-dataviz-6: #04cabc;
    --cc-dataviz-7: #0574c7;
    --cc-dataviz-8: #0eadbf;
    --cc-glass-surface: color-mix(in srgb, var(--cc-color-surface-1) 82%, transparent);
    --cc-glass-surface-strong: color-mix(in srgb, var(--cc-color-surface-1) 85%, transparent);
    --cc-glass-border: color-mix(in srgb, var(--cc-color-primary) 28%, transparent);
    --cc-elevation-0: none;
    --cc-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36);
    --cc-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 4px 8px rgba(0, 0, 0, 0.40);
    --cc-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.34), 0 8px 16px rgba(0, 0, 0, 0.44);
    --cc-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.38), 0 16px 32px rgba(0, 0, 0, 0.48);
    --cc-elevation-5: 0 12px 24px rgba(0, 0, 0, 0.42), 0 24px 48px rgba(0, 0, 0, 0.54);
    --cc-hairline-from: color-mix(in srgb, var(--cc-color-primary) 30%, transparent);
    --cc-hairline-to: color-mix(in srgb, var(--cc-color-primary) 85%, transparent);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: none;
}

legend {
  padding: 0;
  display: table;
}

textarea {
  field-sizing: content;
}

input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
}

dialog {
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
}

dialog:not([open]) {
  display: none;
}

dialog::backdrop {
  background: var(--cc-color-scrim);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

:target {
  scroll-margin-top: calc(var(--cc-topbar-height) + var(--cc-space-4));
}

:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

@media (forced-colors: active) {
  :focus-visible {
    outline: var(--cc-focus-width) solid Highlight;
    outline-offset: var(--cc-focus-offset);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-family: var(--cc-font-sans);
  color: var(--cc-color-on-surface);
  background: var(--cc-color-background);
  color-scheme: light dark;
  accent-color: var(--cc-color-primary);
}

body {
  font-size: var(--cc-type-body-md-size);
  line-height: var(--cc-type-body-md-line);
  letter-spacing: var(--cc-type-body-md-tracking);
  color: var(--cc-color-on-surface);
  background: var(--cc-color-background);
}

h1,
.cc-display-lg {
  font-size: var(--cc-type-display-lg-size);
  line-height: var(--cc-type-display-lg-line);
  font-weight: var(--cc-type-display-lg-weight);
  letter-spacing: var(--cc-type-display-lg-tracking);
}

.cc-display-lg--emphasized {
  font-weight: var(--cc-type-display-lg-emphasized-weight);
  letter-spacing: var(--cc-type-display-lg-emphasized-tracking);
}

.cc-display-md {
  font-size: var(--cc-type-display-md-size);
  line-height: var(--cc-type-display-md-line);
  font-weight: var(--cc-type-display-md-weight);
  letter-spacing: var(--cc-type-display-md-tracking);
}

.cc-display-md--emphasized {
  font-weight: var(--cc-type-display-md-emphasized-weight);
  letter-spacing: var(--cc-type-display-md-emphasized-tracking);
}

.cc-display-sm {
  font-size: var(--cc-type-display-sm-size);
  line-height: var(--cc-type-display-sm-line);
  font-weight: var(--cc-type-display-sm-weight);
  letter-spacing: var(--cc-type-display-sm-tracking);
}

.cc-display-sm--emphasized {
  font-weight: var(--cc-type-display-sm-emphasized-weight);
  letter-spacing: var(--cc-type-display-sm-emphasized-tracking);
}

h2,
.cc-headline-lg {
  font-size: var(--cc-type-headline-lg-size);
  line-height: var(--cc-type-headline-lg-line);
  font-weight: var(--cc-type-headline-lg-weight);
  letter-spacing: var(--cc-type-headline-lg-tracking);
}

.cc-headline-lg--emphasized {
  font-weight: var(--cc-type-headline-lg-emphasized-weight);
  letter-spacing: var(--cc-type-headline-lg-emphasized-tracking);
}

.cc-headline-md {
  font-size: var(--cc-type-headline-md-size);
  line-height: var(--cc-type-headline-md-line);
  font-weight: var(--cc-type-headline-md-weight);
  letter-spacing: var(--cc-type-headline-md-tracking);
}

.cc-headline-md--emphasized {
  font-weight: var(--cc-type-headline-md-emphasized-weight);
  letter-spacing: var(--cc-type-headline-md-emphasized-tracking);
}

h3,
.cc-headline-sm {
  font-size: var(--cc-type-headline-sm-size);
  line-height: var(--cc-type-headline-sm-line);
  font-weight: var(--cc-type-headline-sm-weight);
}

.cc-headline-sm--emphasized {
  font-weight: var(--cc-type-headline-sm-emphasized-weight);
  letter-spacing: var(--cc-type-headline-sm-emphasized-tracking);
}

h4,
.cc-title-lg {
  font-size: var(--cc-type-title-lg-size);
  line-height: var(--cc-type-title-lg-line);
  font-weight: var(--cc-type-title-lg-weight);
}

.cc-title-lg--emphasized {
  font-weight: var(--cc-type-title-lg-emphasized-weight);
  letter-spacing: var(--cc-type-title-lg-emphasized-tracking);
}

h5,
.cc-title-md {
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
  font-weight: var(--cc-type-title-md-weight);
}

.cc-title-md--emphasized {
  font-weight: var(--cc-type-title-md-emphasized-weight);
  letter-spacing: var(--cc-type-title-md-emphasized-tracking);
}

.cc-title-sm {
  font-size: var(--cc-type-title-sm-size);
  line-height: var(--cc-type-title-sm-line);
  font-weight: var(--cc-type-title-sm-weight);
  letter-spacing: var(--cc-type-title-sm-tracking);
}

.cc-title-sm--emphasized {
  font-weight: var(--cc-type-title-sm-emphasized-weight);
  letter-spacing: var(--cc-type-title-sm-emphasized-tracking);
}

.cc-body-lg {
  font-size: var(--cc-type-body-lg-size);
  line-height: var(--cc-type-body-lg-line);
}

.cc-body-lg--emphasized {
  font-weight: var(--cc-type-body-lg-emphasized-weight);
  letter-spacing: var(--cc-type-body-lg-emphasized-tracking);
}

.cc-body-md {
  font-size: var(--cc-type-body-md-size);
  line-height: var(--cc-type-body-md-line);
  letter-spacing: var(--cc-type-body-md-tracking);
}

.cc-body-md--emphasized {
  font-weight: var(--cc-type-body-md-emphasized-weight);
  letter-spacing: var(--cc-type-body-md-emphasized-tracking);
}

.cc-body-sm {
  font-size: var(--cc-type-body-sm-size);
  line-height: var(--cc-type-body-sm-line);
}

.cc-body-sm--emphasized {
  font-weight: var(--cc-type-body-sm-emphasized-weight);
  letter-spacing: var(--cc-type-body-sm-emphasized-tracking);
}

.cc-label,
.cc-label-lg {
  font-size: var(--cc-type-label-lg-size);
  line-height: var(--cc-type-label-lg-line);
  font-weight: var(--cc-type-label-lg-weight);
  letter-spacing: var(--cc-type-label-lg-tracking);
}

.cc-label--emphasized,
.cc-label-lg--emphasized {
  font-weight: var(--cc-type-label-lg-emphasized-weight);
  letter-spacing: var(--cc-type-label-lg-emphasized-tracking);
}

.cc-label-md {
  font-size: var(--cc-type-label-md-size);
  line-height: var(--cc-type-label-md-line);
  font-weight: var(--cc-type-label-md-weight);
  letter-spacing: var(--cc-type-label-md-tracking);
}

.cc-label-md--emphasized {
  font-weight: var(--cc-type-label-md-emphasized-weight);
  letter-spacing: var(--cc-type-label-md-emphasized-tracking);
}

.cc-label-sm {
  font-size: var(--cc-type-label-sm-size);
  line-height: var(--cc-type-label-sm-line);
  font-weight: var(--cc-type-label-sm-weight);
  letter-spacing: var(--cc-type-label-sm-tracking);
}

.cc-label-sm--emphasized {
  font-weight: var(--cc-type-label-sm-emphasized-weight);
  letter-spacing: var(--cc-type-label-sm-emphasized-tracking);
}

code,
kbd,
pre,
.cc-mono {
  font-family: var(--cc-font-mono);
  font-size: 0.875em;
}

.cc-muted {
  color: var(--cc-color-on-surface-variant);
}

.cc-faint {
  color: var(--cc-color-on-surface-muted);
}

a.cc-link {
  color: var(--cc-color-link);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--cc-radius-xs);
}

a.cc-link:hover {
  color: var(--cc-color-link-hover);
  background: color-mix(in srgb, var(--cc-color-link) var(--cc-state-hover), transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-color-link) var(--cc-state-hover), transparent);
}

a.cc-link:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
  background: color-mix(in srgb, var(--cc-color-link) var(--cc-state-focus), transparent);
}

hr,
.cc-divider {
  border: none;
  border-top: 1px solid var(--cc-color-outline-variant);
  margin: 0;
}

::selection {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}

* {
  scrollbar-color: var(--cc-color-outline) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--cc-color-outline);
  border-radius: var(--cc-radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

.cc-container {
  width: 100%;
  max-width: var(--cc-breakpoint-lg);
  margin-inline: auto;
  padding-inline: var(--cc-space-4);
}

.cc-container--fluid {
  max-width: none;
}

.cc-grid {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cc-col-3 {
  grid-column: span 3;
}
.cc-col-4 {
  grid-column: span 4;
}
.cc-col-6 {
  grid-column: span 6;
}
.cc-col-8 {
  grid-column: span 8;
}
.cc-col-12 {
  grid-column: span 12;
}

.cc-auto-grid {
  display: grid;
  gap: var(--cc-space-4);

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.cc-grid > *,
.cc-auto-grid > *,
.cc-kpi-stack > * {
  container: cc-cell / inline-size;
}

@media (max-width: 839px) {
  .cc-col-3,
  .cc-col-4 {
    grid-column: span 6;
  }
  .cc-col-6,
  .cc-col-8 {
    grid-column: span 12;
  }
}

@media (max-width: 599px) {
  .cc-col-3,
  .cc-col-4,
  .cc-col-6,
  .cc-col-8 {
    grid-column: span 12;
  }
}

.cc-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
}

.cc-shell__sidebar {
  grid-area: sidebar;
}
.cc-shell__topbar {
  grid-area: topbar;
  min-width: 0;
}
.cc-shell__main {
  grid-area: main;
  min-width: 0;
  padding: var(--cc-space-6);
  overflow: auto;
}

.cc-shell__main--flush {
  padding: 0;
}

.cc-shell--viewport {
  height: 100vh;
  height: 100dvh;
}

.cc-shell[data-collapsed="true"] .cc-sidebar {
  width: var(--cc-sidebar-width-collapsed);
}

@media (max-width: 1240px) {
  .cc-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }
  .cc-shell__sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline: 0 auto;
    z-index: var(--cc-z-drawer);
    transform: translateX(-100%);
    transition: transform var(--cc-motion-dur-4) var(--cc-motion-ease-emphasized);
  }
  [dir="rtl"] .cc-shell__sidebar {
    transform: translateX(100%);
  }
  .cc-shell__main {
    padding: var(--cc-space-4);
    padding-bottom: calc(var(--cc-nav-height) + var(--cc-space-4) + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1241px) {
  .cc-shell--sticky-nav > .cc-shell__sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-shell__sidebar {
    transition: none;
  }
}

.cc-stack {
  display: flex;
  flex-direction: column;
}
.cc-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cc-wrap {
  flex-wrap: wrap;
}
.cc-center {
  align-items: center;
  justify-content: center;
}
.cc-between {
  justify-content: space-between;
}
.cc-end {
  justify-content: flex-end;
}
.cc-start {
  align-items: flex-start;
}
.cc-items-end {
  align-items: flex-end;
}
.cc-grow {
  flex: 1 1 auto;
  min-width: 0;
}
.cc-none {
  flex: none;
}

.cc-gap-1 {
  gap: var(--cc-space-1);
}
.cc-gap-2 {
  gap: var(--cc-space-2);
}
.cc-gap-3 {
  gap: var(--cc-space-3);
}
.cc-gap-4 {
  gap: var(--cc-space-4);
}
.cc-gap-5 {
  gap: var(--cc-space-5);
}
.cc-gap-6 {
  gap: var(--cc-space-6);
}

.cc-p-3 {
  padding: var(--cc-space-3);
}
.cc-p-4 {
  padding: var(--cc-space-4);
}
.cc-p-6 {
  padding: var(--cc-space-6);
}
.cc-mt-2 {
  margin-top: var(--cc-space-2);
}
.cc-mt-3 {
  margin-top: var(--cc-space-3);
}
.cc-mt-4 {
  margin-top: var(--cc-space-4);
}
.cc-mt-6 {
  margin-top: var(--cc-space-6);
}
.cc-mb-2 {
  margin-bottom: var(--cc-space-2);
}
.cc-mb-3 {
  margin-bottom: var(--cc-space-3);
}
.cc-mb-4 {
  margin-bottom: var(--cc-space-4);
}
.cc-mb-5 {
  margin-bottom: var(--cc-space-5);
}
.cc-mb-6 {
  margin-bottom: var(--cc-space-6);
}

.cc-text-center {
  text-align: center;
}
.cc-text-end {
  text-align: end;
}
.cc-text-start {
  text-align: start;
}
.cc-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-hidden {
  display: none !important;
}
.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc-full {
  width: 100%;
}
.cc-fit {
  width: fit-content;
}

.cc-measure {
  max-width: 68ch;
}
.cc-measure--sm {
  max-width: 44ch;
}
.cc-measure--lg {
  max-width: 80ch;
}
.cc-measure--center {
  margin-inline: auto;
}

@media (max-width: 839px) {
  .cc-hide-md-down {
    display: none !important;
  }
}
@media (min-width: 840px) {
  .cc-hide-md-up {
    display: none !important;
  }
}

@container cc-cell (max-width: 320px) {
  .cc-card {
    padding: var(--cc-space-4);
  }
  .cc-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cc-space-2);
    margin-bottom: var(--cc-space-3);
  }
  .cc-stat {
    padding: var(--cc-space-4);
  }
  .cc-stat__icon {
    width: 36px;
    height: 36px;
  }
  .cc-stat__value {
    font-size: var(--cc-type-title-lg-size);
    line-height: var(--cc-type-title-lg-line);
  }
  .cc-kpi-tile {
    padding: var(--cc-space-4);
  }
  .cc-kpi-tile__badge {
    width: 32px;
    height: 32px;
  }
  .cc-kpi-tile__value {
    font-size: var(--cc-type-title-lg-size);
    line-height: var(--cc-type-title-lg-line);
  }
  .cc-kpi-tile--compact {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cc-space-3);
  }
  .cc-kpi-tile--compact .cc-kpi-tile__spark {
    width: 100%;
  }
  .cc-chart {
    padding: var(--cc-space-4);
    gap: var(--cc-space-3);
  }
  .cc-chart__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .cc-chart__actions {
    width: 100%;
  }
  .cc-chart__body {
    min-height: 160px;
  }
  .cc-file-row {
    flex-wrap: wrap;
  }
  .cc-file-row__thumb {
    width: 36px;
    height: 36px;
  }
  .cc-form-section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cc-space-3);
  }
  .cc-form-section__control {
    justify-self: stretch;
  }
}

@container cc-cell (max-width: 220px) {
  .cc-card,
  .cc-stat,
  .cc-kpi-tile {
    padding: var(--cc-space-3);
  }
  .cc-stat__icon,
  .cc-kpi-tile__badge {
    display: none;
  }
  .cc-chart {
    padding: var(--cc-space-3);
  }
  .cc-chart__legend {
    gap: var(--cc-space-1) var(--cc-space-2);
  }
  .cc-file-row__thumb {
    display: none;
  }
}

@media print {

  .cc-sidebar,
  .cc-shell__sidebar,
  .cc-rail,
  .cc-topbar,
  .cc-navbar,
  .cc-bottom-nav,
  .cc-bottom-appbar,
  .cc-toaster,
  .cc-back-to-top,
  .cc-fab,
  .cc-fab-menu,
  .cc-toolbar--floating,
  .cc-selection-bar,
  .cc-checklist,
  .cc-shot-help-btn,
  .cc-backdrop,
  .cc-cmdk,
  .cc-searchview,
  .cc-drawer,
  .cc-sheet,
  .cc-tooltip,
  .cc-coach,
  .cc-coach__callout,
  .cc-appearance,
  .cc-datatable__toolbar,
  .cc-page-header__actions,
  .cc-row-actions,
  .cc-context-menu,
  .cc-menubar,
  .cc-copy-button,
  .cc-filter-bar,
  .cc-column-picker,
  .cc-daterange__panel,
  .cc-multiselect__panel,
  .cc-chart__tooltip,
  .cc-resizable-split__handle {
    display: none !important;
  }

  :root {
    --cc-elevation-0: none;
    --cc-elevation-1: none;
    --cc-elevation-2: none;
    --cc-elevation-3: none;
    --cc-elevation-4: none;
    --cc-elevation-5: none;
    --cc-glass-blur: 0px;
  }

  html,
  body {
    background: var(--cc-print-bg);
    color: var(--cc-print-fg);
  }

  .cc-shell {
    display: block;
    min-height: 0;
  }

  .cc-shell__main {
    padding: 0;
    overflow: visible;
  }

  .cc-glass,
  .cc-hero,
  .cc-hero--mesh,
  .cc-hero--duo,
  .cc-card--tonal,
  .cc-surface-wash,
  .cc-blog-hero__cover,
  .cc-blog-cover,
  .cc-balance-card__hero,
  .cc-auth__aside {
    background: none !important;
    background-image: none !important;
    color: var(--cc-print-fg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .cc-card,
  .cc-stat,
  .cc-kpi-tile,
  .cc-alert,
  .cc-table-wrap,
  .cc-modal__panel,
  .cc-popover {
    box-shadow: none !important;
    border: 1px solid var(--cc-print-rule);
  }

  .cc-table-wrap,
  .cc-table-wrap--scroll {
    max-height: none;
    overflow: visible;
  }

  .cc-card,
  .cc-stat,
  .cc-kpi-tile,
  .cc-alert,
  .cc-choice,
  .cc-blog-card,
  .cc-flowform__summary-block,
  .cc-table tr,
  .cc-list__item,
  .cc-ranktable__row {
    break-inside: avoid;
  }

  h1,
  h2,
  h3,
  .cc-card__title,
  .cc-page-header__title {
    break-after: avoid;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  .cc-table thead th {
    position: static;
    background: none;
    color: var(--cc-print-fg);
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  a[href^="http"].cc-btn::after,
  a[href^="http"].cc-icon-btn::after,
  a[href^="http"].cc-nav-item::after,
  a[href^="http"][aria-hidden="true"]::after {
    content: "";
  }

  .cc-modal,
  .cc-modal__panel {
    position: static;
    max-height: none;
    transform: none;
    opacity: 1;
  }

  .cc-accordion__panel {
    grid-template-rows: 1fr;
  }
}

@page {
  margin: 15mm;
}

.cc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  height: 40px;
  padding-inline: var(--cc-space-5);
  border-radius: var(--cc-radius-sm);
  font-size: var(--cc-type-label-lg-size);
  font-weight: var(--cc-type-label-lg-weight);
  letter-spacing: var(--cc-type-label-lg-tracking);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  color: var(--cc-color-on-primary);
  background: var(--cc-color-primary);
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    box-shadow var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    border-color var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    transform var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}

.cc-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
  pointer-events: none;
}

.cc-btn:hover::after {
  opacity: var(--cc-state-hover);
}
.cc-btn:active::after {
  opacity: var(--cc-state-pressed);
}
.cc-btn:active {
  transform: scale(0.98);
}

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

.cc-btn:disabled,
.cc-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--cc-state-disabled);
  pointer-events: none;
}

.cc-btn--tonal {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}

.cc-btn--outlined {
  background: transparent;
  color: var(--cc-color-primary-text);
  border-color: var(--cc-color-outline);
}

.cc-btn--text {
  background: transparent;
  color: var(--cc-color-primary-text);
  padding-inline: var(--cc-space-3);
}

.cc-btn--elevated {
  background: var(--cc-color-surface);
  color: var(--cc-color-primary-text);
  box-shadow: var(--cc-elevation-1);
}

.cc-btn--elevated:hover {
  box-shadow: var(--cc-elevation-2);
}

.cc-btn--danger {
  background: var(--cc-color-error);
  color: var(--cc-color-on-error);
}

.cc-btn--danger.cc-btn--outlined {
  background: transparent;
  color: var(--cc-color-error);
  border-color: var(--cc-color-error);
}

.cc-btn--pill {
  border-radius: var(--cc-radius-pill);
}
.cc-btn--xs {
  height: 28px;
  padding-inline: var(--cc-space-3);
  font-size: var(--cc-type-label-md-size);
}
.cc-btn--sm {
  height: 32px;
  padding-inline: var(--cc-space-4);
}
.cc-btn--lg {
  height: 48px;
  padding-inline: var(--cc-space-6);
  font-size: var(--cc-type-title-md-size);
}
.cc-btn--xl {
  height: 56px;
  padding-inline: var(--cc-space-8);
  font-size: var(--cc-type-title-lg-size);
  border-radius: var(--cc-radius-lg);
}
.cc-btn--block {
  display: flex;
  width: 100%;
}

.cc-btn .cc-icon {
  width: 1.15em;
  height: 1.15em;
}

.cc-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cc-radius-pill);
  color: var(--cc-color-on-surface-variant);
  background: transparent;
  cursor: pointer;
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    color var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-icon-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
  pointer-events: none;
}

.cc-icon-btn:hover::after {
  opacity: var(--cc-state-hover);
}
.cc-icon-btn:active::after {
  opacity: var(--cc-state-pressed);
}
.cc-icon-btn:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}
.cc-icon-btn--sm {
  width: 32px;
  height: 32px;
}
.cc-icon-btn--lg {
  width: 48px;
  height: 48px;
}
.cc-icon-btn .cc-icon {
  width: 1.35em;
  height: 1.35em;
}

.cc-icon-btn--filled {
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
}
.cc-icon-btn--tonal {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}
.cc-icon-btn--outlined {
  border: 1px solid var(--cc-color-outline);
  color: var(--cc-color-on-surface-variant);
}
.cc-icon-btn--toggle[aria-pressed="true"],
.cc-icon-btn--toggle.cc-icon-btn--tonal[aria-pressed="true"] {
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
  border-color: transparent;
}
.cc-icon-btn:disabled,
.cc-icon-btn[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.cc-btn-group {
  display: inline-flex;
  border-radius: var(--cc-radius-sm);
  overflow: hidden;
  border: 1px solid var(--cc-color-outline);
}

.cc-btn-group .cc-btn {
  border-radius: 0;
  border: none;
  border-inline-end: 1px solid var(--cc-color-outline);
}

.cc-btn-group .cc-btn:last-child {
  border-inline-end: none;
}

.cc-btn-group .cc-btn:focus-visible {
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  height: 56px;
  min-width: 56px;
  padding-inline: var(--cc-space-5);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
  box-shadow: var(--cc-elevation-3);
  cursor: pointer;
  font-weight: var(--cc-type-label-lg-weight);
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    box-shadow var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    transform var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}

.cc-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
  pointer-events: none;
}

.cc-fab:hover::after {
  opacity: var(--cc-state-hover);
}
.cc-fab:active::after {
  opacity: var(--cc-state-pressed);
}
.cc-fab:active {
  transform: scale(0.98);
}
.cc-fab:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

.cc-fab .cc-icon {
  width: 1.5em;
  height: 1.5em;
}
.cc-fab:hover {
  box-shadow: var(--cc-elevation-4);
}

.cc-fab--sm {
  height: 40px;
  min-width: 40px;
  width: 40px;
  padding-inline: 0;
  border-radius: var(--cc-radius-md);
}
.cc-fab--sm .cc-icon {
  width: 1.35em;
  height: 1.35em;
}

.cc-fab--lg {
  height: 96px;
  min-width: 96px;
  width: 96px;
  padding-inline: 0;
  border-radius: var(--cc-radius-xl2);
}
.cc-fab--lg .cc-icon {
  width: 2.25em;
  height: 2.25em;
}

.cc-fab--extended {
  min-width: 80px;
  padding-inline: var(--cc-space-5);
  width: auto;
}
.cc-fab--primary {
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
}
.cc-fab--surface {
  background: var(--cc-color-surface);
  color: var(--cc-color-primary-text);
}
.cc-fab--tertiary {
  background: var(--cc-color-tertiary-container);
  color: var(--cc-color-on-tertiary-container);
}
.cc-fab:disabled,
.cc-fab[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: var(--cc-elevation-1);
}

@media (prefers-reduced-motion: reduce) {
  .cc-btn,
  .cc-icon-btn,
  .cc-fab {
    transition: none;
  }
  .cc-btn:active,
  .cc-fab:active {
    transform: none;
  }
}

.cc-field {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}

.cc-field__label {
  font-size: var(--cc-type-label-lg-size);
  font-weight: var(--cc-type-label-lg-weight);
  letter-spacing: var(--cc-type-label-lg-tracking);
  color: var(--cc-color-on-surface);
}

.cc-field__label .cc-req {
  color: var(--cc-color-error);
}

.cc-field__hint {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
}

.cc-field__error {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-error);
}

.cc-form-summary__title {
  font-weight: 600;
}
.cc-form-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-1);
  margin: var(--cc-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.cc-form-summary__item {
  display: flex;
  gap: var(--cc-space-2);
  font-size: var(--cc-type-body-md-size);
}
.cc-form-summary__item::before {
  content: "";
  flex: none;
  width: 4px;
  align-self: stretch;
  border-radius: var(--cc-radius-pill);
  background: currentcolor;
  opacity: 0.4;
}
.cc-form-summary__link {
  color: inherit;
  font-weight: 500;
  border-radius: var(--cc-radius-xs);
}
.cc-form-summary__link:hover {
  background: color-mix(in srgb, currentcolor var(--cc-state-hover), transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentcolor var(--cc-state-hover), transparent);
}
.cc-form-summary__link:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

.cc-input,
.cc-textarea,
.cc-select {
  width: 100%;
  min-height: 44px;
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  border: 1px solid var(--cc-color-outline);
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-body-md-size);
  transition:
    border-color var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    box-shadow var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-textarea {
  min-height: 96px;
  resize: vertical;
}

.cc-input::placeholder,
.cc-textarea::placeholder {
  color: var(--cc-color-on-surface-muted);
}

.cc-input:hover,
.cc-textarea:hover,
.cc-select:hover {
  border-color: var(--cc-color-on-surface-variant);
}

.cc-input:focus,
.cc-textarea:focus,
.cc-select:focus {
  border-color: var(--cc-color-primary);
}

.cc-input:focus-visible,
.cc-textarea:focus-visible,
.cc-select:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

.cc-field[data-invalid="true"] .cc-input,
.cc-field[data-invalid="true"] .cc-textarea,
.cc-field[data-invalid="true"] .cc-select,
.cc-input[aria-invalid="true"] {
  border-color: var(--cc-color-error);
}

.cc-input:disabled,
.cc-textarea:disabled,
.cc-select:disabled {
  background: var(--cc-color-surface-1);
  color: var(--cc-color-on-surface-muted);
  cursor: not-allowed;
}

.cc-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cc-color-on-surface-variant) 50%),
    linear-gradient(135deg, var(--cc-color-on-surface-variant) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) center,
    calc(100% - 14px) center;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--cc-space-8);
}

[dir="rtl"] .cc-select {
  background-position:
    20px center,
    14px center;
}

.cc-input-group {
  display: flex;
  align-items: center;
  border-radius: var(--cc-radius-md);
  border: 1px solid var(--cc-color-outline);
  background: var(--cc-color-surface);
  overflow: hidden;
}

.cc-input-group:focus-within {
  border-color: var(--cc-color-primary);
}

.cc-input-group:has(:focus-visible) {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

.cc-input-group .cc-input {
  border: none;
  box-shadow: none;
  background: transparent;
}

.cc-input-group .cc-input:focus-visible {
  outline: none;
}

.cc-input-group:has(:disabled),
.cc-input-group[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
}

.cc-input-group__addon {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--cc-space-3);
  color: var(--cc-color-on-surface-variant);
}

.cc-checkbox,
.cc-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  cursor: pointer;
  font-size: var(--cc-type-body-md-size);
}

.cc-checkbox input,
.cc-radio input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--cc-color-outline);
  background: var(--cc-color-surface);
  display: grid;
  place-content: center;
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    border-color var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-checkbox input {
  border-radius: var(--cc-radius-xs);
}
.cc-radio input {
  border-radius: var(--cc-radius-pill);
}

.cc-checkbox input::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--cc-color-on-primary);
  border-bottom: 2px solid var(--cc-color-on-primary);
  transform: rotate(-45deg) translateY(-1px) scale(0);
  transition: transform var(--cc-motion-dur-3) var(--cc-spring-spatial-default);
}

.cc-radio input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-color-on-primary);
  transform: scale(0);
  transition: transform var(--cc-motion-dur-3) var(--cc-spring-spatial-default);
}

.cc-checkbox input:checked,
.cc-radio input:checked {
  background: var(--cc-color-primary);
  border-color: var(--cc-color-primary);
}

.cc-checkbox input:checked::before,
.cc-radio input:checked::before {
  transform: rotate(-45deg) translateY(-1px) scale(1);
}
.cc-radio input:checked::before {
  transform: scale(1);
}

.cc-checkbox:has(input:disabled),
.cc-radio:has(input:disabled),
.cc-switch:has(input:disabled) {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
}

.cc-checkbox input:disabled,
.cc-radio input:disabled,
.cc-switch input:disabled {
  cursor: not-allowed;
}

.cc-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  cursor: pointer;
}

.cc-switch input {
  appearance: none;
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-2);
  border: 2px solid var(--cc-color-outline);
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    border-color var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-switch input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cc-color-outline);
  transform: translateY(-50%);
  transition:
    transform var(--cc-motion-dur-4) var(--cc-spring-spatial-default),
    width var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-switch input:checked {
  background: var(--cc-color-primary);
  border-color: var(--cc-color-primary);
}

.cc-switch input:checked::before {
  background: var(--cc-color-on-primary);
  width: 22px;
  transform: translate(18px, -50%);
}

[dir="rtl"] .cc-switch input::before {
  left: auto;
  right: 6px;
}
[dir="rtl"] .cc-switch input:checked::before {
  transform: translate(-18px, -50%);
}

.cc-slider {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-3);
}

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

.cc-slider:disabled {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
}

.cc-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cc-color-primary);
  cursor: pointer;
  border: 3px solid var(--cc-color-surface);
  box-shadow: var(--cc-elevation-1);
}

.cc-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-color-primary) 30%, transparent);
}

.cc-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-color-primary) 30%, transparent);
}

.cc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cc-color-primary);
  cursor: pointer;
  border: 3px solid var(--cc-color-surface);
}

.cc-input--filled,
.cc-textarea--filled,
.cc-select--filled {
  border: none;
  border-radius: var(--cc-radius-sm) var(--cc-radius-sm) 0 0;
  background: var(--cc-color-surface-2);
  box-shadow: inset 0 -1px 0 var(--cc-color-outline);
}

.cc-input--filled:hover,
.cc-textarea--filled:hover,
.cc-select--filled:hover {
  background: var(--cc-color-surface-3);
  box-shadow: inset 0 -1px 0 var(--cc-color-on-surface-variant);
}

.cc-input--filled:focus,
.cc-textarea--filled:focus,
.cc-select--filled:focus {
  box-shadow: inset 0 -2px 0 var(--cc-color-primary);
}

.cc-field[data-invalid="true"] .cc-input--filled,
.cc-field[data-invalid="true"] .cc-textarea--filled,
.cc-input--filled[aria-invalid="true"] {
  box-shadow: inset 0 -2px 0 var(--cc-color-error);
}

.cc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cc-input-wrap .cc-input {
  width: 100%;
}

.cc-input-wrap__icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  color: var(--cc-color-on-surface-variant);
  pointer-events: none;
}

.cc-input-wrap__icon--leading {
  inset-inline-start: var(--cc-space-3);
}
.cc-input-wrap__icon--trailing {
  inset-inline-end: var(--cc-space-3);
}

.cc-input-wrap:has(.cc-input-wrap__icon--leading) .cc-input {
  padding-inline-start: var(--cc-space-9);
}
.cc-input-wrap:has(.cc-input-wrap__icon--trailing) .cc-input {
  padding-inline-end: var(--cc-space-9);
}

.cc-input-wrap__icon--action {
  pointer-events: auto;
  cursor: pointer;
  border-radius: var(--cc-radius-pill);
}
.cc-input-wrap__icon--action:hover {
  color: var(--cc-color-on-surface);
}

.cc-field__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cc-space-3);
}

.cc-field__counter {
  flex: none;
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.cc-field[data-invalid="true"] .cc-field__counter {
  color: var(--cc-color-error);
}

.cc-checkbox input:indeterminate {
  background: var(--cc-color-primary);
  border-color: var(--cc-color-primary);
}

.cc-checkbox input:indeterminate::before {
  content: "";
  width: 10px;
  height: 2px;
  border: none;
  border-radius: 1px;
  background: var(--cc-color-on-primary);
  transform: none;
}

.cc-slider__wrap {
  position: relative;
}

.cc-slider__value {
  position: absolute;
  top: -34px;
  left: var(--cc-slider-pos, 0%);
  transform: translateX(-50%);
  padding: var(--cc-space-05) var(--cc-space-2);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-color-inverse-surface);
  color: var(--cc-color-inverse-on-surface);
  font-size: var(--cc-type-label-sm-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}

.cc-slider__wrap:hover .cc-slider__value,
.cc-slider__wrap:focus-within .cc-slider__value {
  opacity: 1;
}

.cc-slider--discrete {
  --cc-tick-dir: to right;
  background-image: repeating-linear-gradient(
    var(--cc-tick-dir),
    var(--cc-color-surface) 0,
    var(--cc-color-surface) 1px,
    transparent 1px,
    transparent var(--cc-slider-step, 10%)
  );
}

[dir="rtl"] .cc-slider--discrete {
  --cc-tick-dir: to left;
}

.cc-slider__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--cc-space-1);
}

.cc-slider__ticks span {
  font-size: var(--cc-type-label-sm-size);
  color: var(--cc-color-on-surface-muted);
}

.cc-slider-range {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
}

.cc-slider-range__track {
  position: absolute;
  inset-inline: 0;
  height: 6px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-3);
}

.cc-slider-range__fill {
  position: absolute;
  height: 6px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-primary);
  inset-inline-start: var(--cc-range-min, 0%);
  inset-inline-end: calc(100% - var(--cc-range-max, 100%));
}

.cc-slider-range input[type="range"] {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  background: none;
  pointer-events: none;
}

.cc-slider-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cc-color-primary);
  cursor: pointer;
  border: 3px solid var(--cc-color-surface);
  box-shadow: var(--cc-elevation-1);
}

.cc-slider-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cc-color-primary);
  cursor: pointer;
  border: 3px solid var(--cc-color-surface);
}

.cc-slider-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-color-primary) 30%, transparent);
}

.cc-otp {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.cc-otp__input {
  width: 48px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--cc-color-outline);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-type-headline-sm-size);
  line-height: 1;
  text-align: center;
  caret-color: var(--cc-color-primary);
  transition:
    border-color var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    box-shadow var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-otp__input::-webkit-outer-spin-button,
.cc-otp__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.cc-otp__input:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
  border-color: var(--cc-color-primary);
}
.cc-otp__input[data-filled="true"] {
  border-color: var(--cc-color-primary);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}
.cc-otp__sep {
  width: 12px;
  height: 1px;
  background: var(--cc-color-outline-variant);
}
.cc-otp--error .cc-otp__input {
  border-color: var(--cc-color-error);
}
.cc-otp--sm .cc-otp__input {
  width: 40px;
  height: 48px;
  font-size: var(--cc-type-title-lg-size);
}

.cc-stepper-input {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: var(--cc-space-1);
  border: 1px solid var(--cc-color-outline);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface);
}
.cc-stepper-input:focus-within {
  border-color: var(--cc-color-primary);
}

.cc-stepper-input:has(:focus-visible) {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}
.cc-stepper-input__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--cc-color-on-surface-variant);
  cursor: pointer;
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-stepper-input__btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-hover), transparent);
}
.cc-stepper-input__btn:disabled {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
}
.cc-stepper-input__btn .cc-icon {
  width: 1.1em;
  height: 1.1em;
}
.cc-stepper-input__field {
  width: var(--cc-stepper-width, 56px);
  border: none;
  background: none;
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-body-lg-size);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cc-stepper-input__field:focus-visible {
  outline: none;
}
.cc-stepper-input__field::-webkit-outer-spin-button,
.cc-stepper-input__field::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.cc-stepper-input__field[type="number"] {
  -moz-appearance: textfield;
}

.cc-pwstrength {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}
.cc-pwstrength__track {
  display: flex;
  gap: var(--cc-space-1);
}
.cc-pwstrength__seg {
  flex: 1;
  height: 4px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-2);
  transition: background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-pwstrength__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  font-size: var(--cc-type-label-md-size);
}
.cc-pwstrength__label {
  font-weight: 500;
}
.cc-pwstrength__hint {
  color: var(--cc-color-on-surface-muted);
}
.cc-pwstrength[data-score="1"] .cc-pwstrength__seg[data-on] {
  background: var(--cc-color-error);
}
.cc-pwstrength[data-score="1"] .cc-pwstrength__label {
  color: var(--cc-color-error);
}
.cc-pwstrength[data-score="2"] .cc-pwstrength__seg[data-on] {
  background: var(--cc-color-warning);
}
.cc-pwstrength[data-score="2"] .cc-pwstrength__label {
  color: var(--cc-color-on-warning-container);
}
.cc-pwstrength[data-score="3"] .cc-pwstrength__seg[data-on] {
  background: var(--cc-color-primary);
}
.cc-pwstrength[data-score="3"] .cc-pwstrength__label {
  color: var(--cc-color-primary-text);
}
.cc-pwstrength[data-score="4"] .cc-pwstrength__seg[data-on] {
  background: var(--cc-color-success);
}
.cc-pwstrength[data-score="4"] .cc-pwstrength__label {
  color: var(--cc-color-on-success-container);
}
@media (prefers-reduced-motion: reduce) {
  .cc-pwstrength__seg {
    transition: none;
  }
  .cc-checkbox input::before,
  .cc-radio input::before,
  .cc-switch input::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cc-input:focus-visible,
  .cc-textarea:focus-visible,
  .cc-select:focus-visible,
  .cc-otp__input:focus-visible,
  .cc-slider:focus-visible,
  .cc-input-group:has(:focus-visible),
  .cc-stepper-input:has(:focus-visible) {
    outline: var(--cc-focus-width) solid Highlight;
    outline-offset: var(--cc-focus-offset);
  }
  .cc-switch input,
  .cc-checkbox input,
  .cc-radio input {
    forced-color-adjust: none;
  }
  .cc-switch input:checked,
  .cc-checkbox input:checked,
  .cc-radio input:checked {
    background: Highlight;
    border-color: Highlight;
  }
  .cc-checkbox input::before {
    border-color: HighlightText;
  }
  .cc-radio input::before,
  .cc-switch input:checked::before {
    background: HighlightText;
  }
  .cc-switch input::before {
    background: CanvasText;
  }
  .cc-pwstrength__seg {
    forced-color-adjust: none;
  }
}

.cc-card {
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-6);
}

.cc-card--elevated {
  border-color: transparent;
  box-shadow: var(--cc-elevation-1);
}

.cc-card--flat {
  background: var(--cc-color-surface-1);
  border-color: transparent;
}
.cc-card--pad-0 {
  padding: 0;
}

.cc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-4);
  margin-bottom: var(--cc-space-4);
}

.cc-card__title {
  font-size: var(--cc-type-title-lg-size);
  line-height: var(--cc-type-title-lg-line);
  font-weight: var(--cc-type-title-lg-weight);
}

.cc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-5);
}

.cc-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}

.cc-stat__icon .cc-icon {
  width: 1.5em;
  height: 1.5em;
}
.cc-stat__value {
  font-size: var(--cc-type-headline-md-size);
  font-weight: 600;
  line-height: 1.1;
}
.cc-stat__label {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
}

.cc-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  font-size: var(--cc-type-label-md-size);
  font-weight: 500;
}
.cc-trend--up,
.cc-trend--daling-gunstig {
  color: var(--cc-color-success);
}
.cc-trend--down {
  color: var(--cc-color-error);
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: var(--cc-space-05) var(--cc-space-2);
  border-radius: var(--cc-radius-pill);
  font-size: var(--cc-type-label-md-size);
  font-weight: 500;
  background: var(--cc-color-surface-2);
  color: var(--cc-color-on-surface-variant);
  line-height: 1.4;
}

.cc-badge--primary {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}
.cc-badge--success {
  background: var(--cc-color-success-container);
  color: var(--cc-color-on-success-container);
}
.cc-badge--warning {
  background: var(--cc-color-warning-container);
  color: var(--cc-color-on-warning-container);
}
.cc-badge--error {
  background: var(--cc-color-error-container);
  color: var(--cc-color-on-error-container);
}

.cc-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  height: 32px;
  padding-inline: var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-color-outline);
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-label-lg-size);
  cursor: pointer;
  transition: background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-chip:hover {
  background: var(--cc-color-surface-1);
}
.cc-chip[aria-pressed="true"],
.cc-chip--selected {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
  border-color: transparent;
}

.cc-chip .cc-icon,
.cc-chip__icon .cc-icon {
  width: 18px;
  height: 18px;
}

.cc-chip__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline-start: calc(-1 * var(--cc-space-1));
}

.cc-chip--elevated {
  border-color: transparent;
  background: var(--cc-color-surface-1);
  box-shadow: var(--cc-elevation-1);
}

.cc-chip--suggestion {
  background: var(--cc-color-surface-1);
}

.cc-chip--filter[aria-pressed="true"]::before,
.cc-chip--filter.cc-chip--selected::before {
  content: "";
  width: 11px;
  height: 6px;
  flex: none;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.cc-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-end: calc(-1 * var(--cc-space-1));
  border-radius: 50%;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition:
    opacity var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-chip__remove:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor var(--cc-state-dragged), transparent);
}
.cc-chip__remove .cc-icon {
  width: 16px;
  height: 16px;
}

.cc-chip:disabled,
.cc-chip[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.cc-chip:focus-visible,
.cc-chip__remove:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

.cc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  flex: none;
}

.cc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}
.cc-avatar--lg {
  width: 56px;
  height: 56px;
}

.cc-avatar-group {
  display: inline-flex;
}
.cc-avatar-group .cc-avatar {
  border: 2px solid var(--cc-color-surface);
  margin-inline-start: -10px;
}
.cc-avatar-group .cc-avatar:first-child {
  margin-inline-start: 0;
}

.cc-alert {
  display: flex;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface-1);
  color: var(--cc-color-on-surface);
}

.cc-alert__icon {
  flex: none;
  color: var(--cc-color-on-surface-variant);
}
.cc-alert__title {
  font-weight: 600;
}
.cc-alert--info {
  background: var(--cc-color-info-container);
  color: var(--cc-color-on-info-container);
  border-color: transparent;
}
.cc-alert--success {
  background: var(--cc-color-success-container);
  color: var(--cc-color-on-success-container);
  border-color: transparent;
}
.cc-alert--warning {
  background: var(--cc-color-warning-container);
  color: var(--cc-color-on-warning-container);
  border-color: transparent;
}
.cc-alert--error {
  background: var(--cc-color-error-container);
  color: var(--cc-color-on-error-container);
  border-color: transparent;
}
.cc-alert--info .cc-alert__icon,
.cc-alert--success .cc-alert__icon,
.cc-alert--warning .cc-alert__icon,
.cc-alert--error .cc-alert__icon {
  color: inherit;
}

.cc-list {
  display: flex;
  flex-direction: column;
}
.cc-list__item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) var(--cc-space-2);
  border-radius: var(--cc-radius-sm);
  transition: background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-list__item + .cc-list__item {
  border-top: 1px solid var(--cc-color-outline-variant);
}
.cc-list--hover .cc-list__item:hover {
  background: var(--cc-color-surface-1);
  cursor: pointer;
}
.cc-list__title {
  font-weight: 500;
}
.cc-list__sub {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
}

.cc-list__item[aria-disabled="true"],
.cc-list__item:disabled,
.cc-card[aria-disabled="true"],
.cc-stat[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.cc-list--hover .cc-list__item:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

@media (prefers-reduced-motion: reduce) {
  .cc-chip,
  .cc-chip__remove,
  .cc-list__item {
    transition: none;
  }
}

.cc-navbar {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  height: var(--cc-topbar-height);
  padding-inline: var(--cc-space-5);
  background: var(--cc-color-surface);
  border-bottom: 1px solid var(--cc-color-outline-variant);
}

.cc-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  font-weight: 600;
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
}

.cc-navbar__search {
  max-width: 420px;
  height: 40px;
  border: 1px solid var(--cc-color-outline);
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface-muted);
  text-align: start;
}

.cc-navbar__search .cc-cmdk__key {
  margin-inline-end: var(--cc-space-3);
}

.cc-navbar__trail {
  margin-inline-start: auto;
  align-items: center;
}

@media (max-width: 599px) {
  .cc-navbar {
    padding-inline: var(--cc-space-3);
    gap: var(--cc-space-2);
  }
  .cc-navbar .cc-input-group {
    display: none;
  }
}

.cc-navbar__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
  display: grid;
  place-content: center;
}

.cc-sidebar {
  width: var(--cc-sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-1);
  padding: var(--cc-space-4);
  background: var(--cc-color-surface);
  border-inline-end: 1px solid var(--cc-color-outline-variant);
  overflow: auto;
  transition: width var(--cc-motion-dur-4) var(--cc-motion-ease-emphasized);
}

.cc-sidebar--semi-dark {
  --cc-color-surface: var(--cc-color-inverse-surface);
  --cc-color-on-surface: var(--cc-color-inverse-on-surface);
  --cc-color-on-surface-variant: color-mix(in srgb, var(--cc-color-inverse-on-surface) 74%, transparent);
  --cc-color-on-surface-muted: color-mix(in srgb, var(--cc-color-inverse-on-surface) 68%, transparent);
  --cc-color-outline-variant: color-mix(in srgb, var(--cc-color-inverse-on-surface) 16%, transparent);
  --cc-color-surface-1: color-mix(in srgb, var(--cc-color-inverse-on-surface) 10%, var(--cc-color-inverse-surface));
  background: var(--cc-color-inverse-surface);
  color: var(--cc-color-inverse-on-surface);
}

.cc-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) var(--cc-space-3);
  margin-bottom: var(--cc-space-3);
  font-weight: 600;
}

.cc-sidebar__section {
  font-size: var(--cc-type-label-sm-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-color-on-surface-muted);
  padding: var(--cc-space-4) var(--cc-space-3) var(--cc-space-2);
}

.cc-nav-item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3);
  border-radius: var(--cc-radius-md);
  color: var(--cc-color-on-surface-variant);
  font-size: var(--cc-type-label-lg-size);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    color var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-nav-item:hover {
  background: var(--cc-color-surface-1);
  color: var(--cc-color-on-surface);
}
.cc-nav-item .cc-icon {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}
.cc-nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-nav-item[aria-current="page"],
.cc-nav-item--active {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}

.cc-sidebar[data-collapsed="true"] {
  width: var(--cc-sidebar-width-collapsed);
}
.cc-sidebar[data-collapsed="true"] .cc-nav-item__label,
.cc-sidebar[data-collapsed="true"] .cc-sidebar__section,
.cc-sidebar[data-collapsed="true"] .cc-sidebar__brand span {
  display: none;
}
.cc-sidebar[data-collapsed="true"] .cc-nav-item {
  justify-content: center;
}
.cc-sidebar[data-collapsed="true"] .cc-nav-item .cc-badge {
  display: none;
}
.cc-sidebar[data-collapsed="true"] .cc-sidebar__filter {
  display: none;
}

.cc-sidebar__filter {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--cc-space-2);
}
.cc-sidebar__filter .cc-icon {
  position: absolute;
  inset-inline-start: var(--cc-space-3);
  width: 1.15em;
  height: 1.15em;
  color: var(--cc-color-on-surface-muted);
  pointer-events: none;
}
.cc-sidebar__filter-input {
  width: 100%;
  height: 40px;
  padding-block: 0;
  padding-inline: calc(var(--cc-space-6) + var(--cc-space-1)) var(--cc-space-3);
  border-radius: var(--cc-radius-md);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface-1);
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-body-md-size);
  font-family: inherit;
}
.cc-sidebar__filter-input::placeholder {
  color: var(--cc-color-on-surface-muted);
}
.cc-sidebar__filter-input:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
  border-color: transparent;
}
.cc-nav-item[hidden],
.cc-sidebar__section[hidden] {
  display: none;
}
.cc-sidebar__empty {
  padding: var(--cc-space-4) var(--cc-space-3);
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-muted);
  text-align: center;
}
.cc-sidebar__empty[hidden] {
  display: none;
}

.cc-nav-item__new {
  flex: none;
  padding: var(--cc-space-05) var(--cc-space-2);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-tertiary-container);
  color: var(--cc-color-on-tertiary-container);
  font-size: var(--cc-type-label-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cc-sidebar[data-collapsed="true"] .cc-nav-item__new {
  display: none;
}

.cc-nav-collapse-btn .cc-icon {
  transition: transform var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-nav-collapse-btn[aria-expanded="false"] .cc-icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .cc-sidebar {
    transition: none;
  }
  .cc-nav-collapse-btn .cc-icon {
    transition: none;
  }
}

.cc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
}

.cc-breadcrumb a:hover {
  color: var(--cc-color-primary-text);
}
.cc-breadcrumb__sep {
  color: var(--cc-color-on-surface-muted);
}
.cc-breadcrumb [aria-current="page"] {
  color: var(--cc-color-on-surface);
  font-weight: 500;
}

.cc-tabs {
  display: flex;
  gap: var(--cc-space-1);
  border-bottom: 1px solid var(--cc-color-outline-variant);
}

.cc-tab {
  position: relative;
  padding: var(--cc-space-3) var(--cc-space-4);
  color: var(--cc-color-on-surface-variant);
  font-weight: 500;
  font-size: var(--cc-type-label-lg-size);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    border-color var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-tab:hover {
  color: var(--cc-color-on-surface);
}
.cc-tab[aria-selected="true"] {
  color: var(--cc-color-primary-text);
  border-bottom-color: var(--cc-color-primary);
}

.cc-tabs--pills {
  border-bottom: none;
  gap: var(--cc-space-2);
}
.cc-tabs--pills .cc-tab {
  border: none;
  border-radius: var(--cc-radius-pill);
  margin-bottom: 0;
}
.cc-tabs--pills .cc-tab[aria-selected="true"] {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}

.cc-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
}
.cc-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--cc-space-2);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-color-on-surface-variant);
  font-weight: 500;
  cursor: pointer;
}
.cc-pagination__item:hover {
  background: var(--cc-color-surface-1);
}
.cc-pagination__item[aria-current="page"] {
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
}
.cc-pagination__item[aria-disabled="true"],
.cc-pagination__item[aria-hidden="true"] {
  opacity: var(--cc-state-disabled);
  pointer-events: none;
}

.cc-menu {
  min-width: 200px;
  padding: var(--cc-space-2);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-md);
  box-shadow: var(--cc-elevation-3);
}

.cc-menu__item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-body-md-size);
  cursor: pointer;
}
.cc-menu__item:hover {
  background: var(--cc-color-surface-1);
}
.cc-menu__item .cc-icon {
  color: var(--cc-color-on-surface-variant);
}
.cc-menu__item--danger {
  color: var(--cc-color-error);
}
.cc-menu__sep {
  height: 1px;
  background: var(--cc-color-outline-variant);
  margin: var(--cc-space-2) 0;
}

.cc-bottom-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--cc-z-sticky);
  display: none;
  align-items: center;
  justify-content: space-around;
  height: auto;
  min-height: var(--cc-nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cc-color-surface);
  border-top: 1px solid var(--cc-color-outline-variant);
}

.cc-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-05);
  flex: 1;
  color: var(--cc-color-on-surface-variant);
  font-size: var(--cc-type-label-sm-size);
  cursor: pointer;
}
.cc-bottom-nav__item .cc-icon {
  width: 1.5em;
  height: 1.5em;
}
.cc-bottom-nav__item[aria-current="page"] {
  color: var(--cc-color-primary-text);
}

@media (max-width: 839px) {
  .cc-bottom-nav {
    display: flex;
  }
}

.cc-bottom-appbar {
  display: flex;
  align-items: center;
  gap: var(--cc-space-1);
  height: 72px;
  padding-inline: var(--cc-space-2);
  background: var(--cc-color-surface-2);
  border-top: 1px solid var(--cc-color-outline-variant);
}
.cc-bottom-appbar--sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--cc-z-sticky);
  padding-bottom: env(safe-area-inset-bottom);
}
.cc-bottom-appbar__spacer {
  flex: 1 1 auto;
}
.cc-bottom-appbar .cc-fab {
  margin-inline-start: var(--cc-space-2);
}

.cc-lang {
  position: relative;
  display: inline-flex;
}
.cc-lang__current {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  height: 40px;
  padding-inline: var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  border: 1px solid var(--cc-color-outline);
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface);
  cursor: pointer;
  font-weight: 500;
}
.cc-lang__current:hover {
  background: var(--cc-color-surface-1);
}
.cc-lang__flag {
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}

.cc-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-2);
  width: var(--cc-rail-width, 80px);
  padding: var(--cc-space-3) var(--cc-space-2);
  background: var(--cc-color-surface);
  border-inline-end: 1px solid var(--cc-color-outline-variant);
}
.cc-rail__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-3);
  padding-bottom: var(--cc-space-2);
}
.cc-rail__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-1);
  width: 100%;
}
.cc-rail__spacer {
  flex: 1;
}
.cc-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-1);
  width: 100%;
  padding: var(--cc-space-1) 0 var(--cc-space-2);
  background: none;
  color: var(--cc-color-on-surface-variant);
  cursor: pointer;
  text-decoration: none;
}
.cc-rail__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  border-radius: var(--cc-radius-pill);
  transition: background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-rail__icon .cc-icon {
  width: 1.5em;
  height: 1.5em;
}
.cc-rail__label {
  font-size: var(--cc-type-label-md-size);
  line-height: var(--cc-type-label-md-line);
  font-weight: var(--cc-type-label-md-weight);
  text-align: center;
}
.cc-rail__item:hover .cc-rail__icon {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-hover), transparent);
}
.cc-rail__item--active {
  color: var(--cc-color-on-surface);
}
.cc-rail__item--active .cc-rail__icon {
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}
.cc-rail__item:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
  border-radius: var(--cc-radius-sm);
}
.cc-rail__badge {
  position: absolute;
  top: calc(-1 * var(--cc-space-05));
  inset-inline-end: 10px;
  min-width: 16px;
  height: 16px;
  padding-inline: var(--cc-space-1);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-error);
  color: var(--cc-color-on-error);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .cc-rail__icon {
    transition: none;
  }
}

.cc-menu__item--sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
}
.cc-menu__item--sub > .cc-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--cc-color-on-surface-muted);
}
.cc-submenu {
  position: relative;
}
.cc-submenu__panel {
  position: absolute;
  top: calc(-1 * var(--cc-space-2));
  inset-inline-start: 100%;
  z-index: var(--cc-z-menu);
  min-width: 180px;
  margin-inline-start: var(--cc-space-1);
  padding: var(--cc-space-2);
  border-radius: var(--cc-radius-md);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-3);
}
.cc-submenu__panel[hidden] {
  display: none;
}
.cc-submenu__panel--flip {
  inset-inline-start: auto;
  inset-inline-end: 100%;
  margin-inline-start: 0;
  margin-inline-end: var(--cc-space-1);
}

.cc-sidebar__foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: var(--cc-space-2);
  background: var(--cc-color-surface);
}
.cc-profile-mini {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  width: 100%;
  padding: var(--cc-space-2) var(--cc-space-3);
  border-radius: var(--cc-radius-md);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: start;
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-profile-mini:hover {
  background: color-mix(in srgb, currentColor var(--cc-state-hover), transparent);
}
.cc-profile-mini__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-05);
}
.cc-profile-mini__name {
  font-size: var(--cc-type-label-lg-size);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-profile-mini__meta {
  font-size: var(--cc-type-label-sm-size);
  color: color-mix(in srgb, currentcolor 74%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-profile-mini__chevron {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .cc-profile-mini {
    transition: none;
  }
}

.cc-nav-item:focus-visible,
.cc-tab:focus-visible,
.cc-menu__item:focus-visible,
.cc-pagination__item:focus-visible,
.cc-bottom-nav__item:focus-visible,
.cc-lang__current:focus-visible,
.cc-profile-mini:focus-visible,
.cc-breadcrumb a:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
  border-radius: var(--cc-radius-sm);
}

.cc-nav-item:disabled,
.cc-nav-item[aria-disabled="true"],
.cc-tab:disabled,
.cc-tab[aria-disabled="true"],
.cc-menu__item:disabled,
.cc-menu__item[aria-disabled="true"],
.cc-lang__current:disabled,
.cc-lang__current[aria-disabled="true"],
.cc-bottom-nav__item[aria-disabled="true"],
.cc-rail__item[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

[dir="rtl"] .cc-nav-collapse-btn .cc-icon {
  transform: rotate(180deg);
}
[dir="rtl"] .cc-nav-collapse-btn[aria-expanded="false"] .cc-icon {
  transform: none;
}

@media (forced-colors: active) {
  .cc-nav-item[aria-current="page"],
  .cc-nav-item--active,
  .cc-tab[aria-selected="true"],
  .cc-pagination__item[aria-current="page"],
  .cc-rail__item--active .cc-rail__icon {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .cc-rail__badge {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

.cc-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cc-space-1);
  width: 232px;
  padding: var(--cc-space-2);
}

.cc-apps-grid[hidden] {
  display: none;
}
.cc-apps-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-4) var(--cc-space-2);
  border-radius: var(--cc-radius-md);
  color: var(--cc-color-on-surface);
  text-align: center;
  font-size: var(--cc-type-body-sm-size);
  cursor: pointer;
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-apps-grid__item:hover {
  background: var(--cc-color-surface-1);
}
.cc-apps-grid__item:focus-visible,
.cc-cart-row:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}
.cc-apps-grid__icon {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
}
.cc-apps-grid__icon .cc-icon {
  width: 1.4em;
  height: 1.4em;
}

.cc-cart-panel {
  width: min(340px, 92vw);
}
.cc-cart-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-4) var(--cc-space-3);
}
.cc-cart-panel__list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: auto;
  padding: 0 var(--cc-space-2);
}
.cc-cart-row {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) var(--cc-space-2);
  border-radius: var(--cc-radius-md);
}
.cc-cart-row:hover {
  background: var(--cc-color-surface-1);
}
.cc-cart-row__thumb {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface-2);
  color: var(--cc-color-on-surface-variant);
}
.cc-cart-row__thumb.cc-icon {
  width: 40px;
  height: 40px;
}
.cc-cart-row__thumb.cc-icon svg {
  width: 1.3em;
  height: 1.3em;
}
.cc-cart-row__main {
  min-width: 0;
  flex: 1;
}
.cc-cart-row__name {
  font-size: var(--cc-type-body-md-size);
  color: var(--cc-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-cart-row__meta {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-muted);
}
.cc-cart-row__price {
  flex: none;
  font-weight: 600;
  color: var(--cc-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.cc-cart-panel__foot {
  padding: var(--cc-space-3) var(--cc-space-4) var(--cc-space-4);
  border-top: 1px solid var(--cc-color-outline-variant);
  margin-top: var(--cc-space-2);
}
.cc-cart-panel__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--cc-space-3);
}
.cc-cart-panel__subtotal strong {
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .cc-apps-grid__item {
    transition: none;
  }
}

.cc-searchbar {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  width: 100%;
  max-width: 720px;
  height: 48px;
  padding-inline: var(--cc-space-4);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-2);
  color: var(--cc-color-on-surface);
  border: 1px solid transparent;
  transition:
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    border-color var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    box-shadow var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-searchbar:focus-within {
  background: var(--cc-color-surface);
  border-color: var(--cc-color-outline-variant);
  box-shadow: var(--cc-elevation-1);
}

.cc-searchbar__icon {
  flex: none;
  display: inline-flex;
  color: var(--cc-color-on-surface-variant);
}

.cc-searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: var(--cc-type-body-lg-size);
}

.cc-searchbar__input:focus-visible {
  outline: none;
}
.cc-searchbar:has(:focus-visible) {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

.cc-searchbar__input::placeholder {
  color: var(--cc-color-on-surface-muted);
}
.cc-searchbar .cc-icon {
  width: 1.35em;
  height: 1.35em;
}

.cc-searchview {
  position: fixed;
  inset: 0;
  z-index: var(--cc-z-modal);
  display: flex;
  flex-direction: column;
  background: var(--cc-color-surface);
}

.cc-searchview[hidden] {
  display: none;
}

.cc-searchview__head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  height: var(--cc-nav-height);
  padding-inline: var(--cc-space-4);
  border-bottom: 1px solid var(--cc-color-outline-variant);
}

.cc-searchview__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
}

.cc-searchview__input:focus-visible {
  outline: none;
}
.cc-searchview__head:has(:focus-visible) {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-searchview__input::placeholder {
  color: var(--cc-color-on-surface-muted);
}

.cc-searchview__results {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--cc-space-2);
}

.cc-searchview__section {
  padding: var(--cc-space-3) var(--cc-space-4) var(--cc-space-1);
  color: var(--cc-color-on-surface-muted);
  font-size: var(--cc-type-label-sm-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cc-searchview__item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  color: var(--cc-color-on-surface);
}

.cc-searchview__item:hover,
.cc-searchview__item[aria-selected="true"] {
  background: var(--cc-color-surface-1);
}
.cc-searchview__item .cc-icon {
  color: var(--cc-color-on-surface-variant);
}

.cc-autocomplete {
  position: relative;
  display: block;
}
.cc-autocomplete__list {
  position: absolute;
  top: calc(100% + var(--cc-space-2));
  inset-inline: 0;
  z-index: var(--cc-z-popover);
  max-height: var(--cc-autocomplete-max, 320px);
  margin: 0;
  padding: var(--cc-space-2);
  overflow-y: auto;
  list-style: none;
  border-radius: var(--cc-radius-md);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-3);
}
.cc-autocomplete__list[hidden] {
  display: none;
}
.cc-autocomplete__option {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-color-on-surface);
  cursor: pointer;
}
.cc-autocomplete__option[aria-selected="true"],
.cc-autocomplete__option:hover {
  background: color-mix(in srgb, var(--cc-color-primary) var(--cc-state-hover), transparent);
}
.cc-autocomplete__option:focus-visible,
.cc-searchview__item:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}
.cc-autocomplete__option .cc-icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--cc-color-on-surface-variant);
}
.cc-autocomplete__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-autocomplete__label mark {
  background: none;
  color: var(--cc-color-primary-text);
  font-weight: 600;
}
.cc-autocomplete__meta {
  flex: none;
  font-size: var(--cc-type-label-md-size);
  color: var(--cc-color-on-surface-muted);
}
.cc-autocomplete__empty {
  padding: var(--cc-space-4);
  color: var(--cc-color-on-surface-muted);
  font-size: var(--cc-type-body-md-size);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .cc-searchbar {
    transition: none;
  }
}

.cc-choices {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(var(--cc-choice-min, 220px), 1fr));
}

.cc-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  padding: var(--cc-space-5);
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface);
  cursor: pointer;
  transition:
    border-color var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    background var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    box-shadow var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-choice:hover {
  border-color: var(--cc-color-outline);
}
.cc-choice:has(input:focus-visible) {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}
.cc-choice__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cc-choice__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cc-space-3);
}
.cc-choice__title {
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
  font-weight: 500;
  color: var(--cc-color-on-surface);
}
.cc-choice__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cc-color-outline);
  transition:
    border-color var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-choice__mark::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-color-on-primary);
  transform: scale(0);
  transition: transform var(--cc-motion-dur-2) var(--cc-spring-spatial-fast);
}
.cc-choice__price {
  font-size: var(--cc-type-headline-sm-size);
  line-height: 1.1;
  font-weight: 600;
  color: var(--cc-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.cc-choice__price small {
  font-size: var(--cc-type-body-sm-size);
  font-weight: 400;
  color: var(--cc-color-on-surface-muted);
}
.cc-choice__body {
  font-size: var(--cc-type-body-md-size);
  line-height: var(--cc-type-body-md-line);
  color: var(--cc-color-on-surface-variant);
}
.cc-choice__list {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cc-type-body-md-size);
  color: var(--cc-color-on-surface-variant);
}
.cc-choice__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-2);
}
.cc-choice__list .cc-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  color: var(--cc-color-primary-text);
}
.cc-choice__note {
  font-size: var(--cc-type-label-md-size);
  color: var(--cc-color-on-surface-muted);
}

.cc-choice:has(input:checked) {
  border-color: var(--cc-color-primary);
  background: var(--cc-color-primary-container);
  box-shadow: 0 0 0 1px var(--cc-color-primary);
  --cc-color-on-surface: var(--cc-color-on-primary-container);
  --cc-color-on-surface-variant: var(--cc-color-on-primary-container-variant);
  --cc-color-on-surface-muted: var(--cc-color-on-primary-container-muted);
  --cc-color-primary-text: var(--cc-color-on-primary-container);
}
.cc-choice:has(input:checked) .cc-choice__mark {
  border-color: var(--cc-color-primary);
  background: var(--cc-color-primary);
}
.cc-choice:has(input:checked) .cc-choice__mark::after {
  transform: scale(1);
}
.cc-choice:has(input:checked) .cc-choice__title,
.cc-choice:has(input:checked) .cc-choice__price {
  color: var(--cc-color-on-primary-container);
}
.cc-choice:has(input:checked) .cc-choice__body,
.cc-choice:has(input:checked) .cc-choice__list {
  color: color-mix(in srgb, var(--cc-color-on-primary-container) 84%, transparent);
}
.cc-choice:has(input:checked) .cc-choice__note {
  color: color-mix(in srgb, var(--cc-color-on-primary-container) 88%, transparent);
}
.cc-choice:has(input:disabled) {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
}
.cc-choice:has(input:disabled) .cc-choice__mark {
  border-color: var(--cc-color-outline-variant);
}

.cc-choice--recommended {
  border-color: var(--cc-color-primary);
}
.cc-choice__flag {
  position: absolute;
  top: 0;
  inset-inline-end: var(--cc-space-5);
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .cc-choice,
  .cc-choice__mark,
  .cc-choice__mark::after {
    transition: none;
  }
}

.cc-checklist {
  position: fixed;
  inset-inline-end: var(--cc-space-5);
  bottom: calc(var(--cc-space-5) + env(safe-area-inset-bottom));
  z-index: var(--cc-z-fab);
  width: min(320px, calc(100vw - var(--cc-space-8)));
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-3);
  overflow: hidden;
}
.cc-checklist[hidden] {
  display: none;
}
.cc-checklist__toggle {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  width: 100%;
  padding: var(--cc-space-4);
  background: none;
  color: var(--cc-color-on-surface);
  cursor: pointer;
  text-align: start;
}
.cc-checklist__toggle:hover {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-hover), transparent);
}
.cc-checklist__title {
  flex: 1;
  min-width: 0;
  font-size: var(--cc-type-title-sm-size);
  font-weight: 500;
}
.cc-checklist__count {
  font-size: var(--cc-type-label-md-size);
  color: var(--cc-color-on-surface-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-checklist__chevron {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  color: var(--cc-color-on-surface-variant);
  transition: transform var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-checklist[data-open="true"] .cc-checklist__chevron {
  transform: rotate(180deg);
}
.cc-checklist__progress {
  height: 3px;
  background: var(--cc-color-surface-2);
}
.cc-checklist__bar {
  height: 100%;
  width: 0;
  background: var(--cc-color-primary);
  transition: width var(--cc-motion-dur-4) var(--cc-motion-ease-emphasized);
}
.cc-checklist__items {
  display: flex;
  flex-direction: column;
  padding: var(--cc-space-2);
  gap: var(--cc-space-05);
}
.cc-checklist__items[hidden] {
  display: none;
}
.cc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: start;
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-checklist__item:hover {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-hover), transparent);
}
.cc-checklist__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--cc-color-outline);
  color: transparent;
}
.cc-checklist__check .cc-icon {
  width: 0.8em;
  height: 0.8em;
}
.cc-checklist__item[data-done="true"] .cc-checklist__check {
  border-color: var(--cc-color-success);
  background: var(--cc-color-success);
  color: var(--cc-color-on-success);
}
.cc-checklist__item[data-done="true"] .cc-checklist__text {
  color: var(--cc-color-on-surface-muted);
  text-decoration: line-through;
}
.cc-checklist__text {
  flex: 1;
  min-width: 0;
  font-size: var(--cc-type-body-md-size);
  line-height: var(--cc-type-body-md-line);
}
.cc-checklist__desc {
  display: block;
  font-size: var(--cc-type-label-md-size);
  color: var(--cc-color-on-surface-muted);
  text-decoration: none;
}
.cc-checklist__dismiss {
  display: block;
  width: 100%;
  padding: var(--cc-space-3);
  border-top: 1px solid var(--cc-color-outline-variant);
  background: none;
  color: var(--cc-color-on-surface-muted);
  font-size: var(--cc-type-label-md-size);
  cursor: pointer;
}
.cc-checklist__dismiss:hover {
  color: var(--cc-color-on-surface);
}
@media (max-width: 839px) {
  .cc-checklist {
    bottom: calc(var(--cc-nav-height) + var(--cc-space-3) + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-checklist__chevron,
  .cc-checklist__bar,
  .cc-checklist__item {
    transition: none;
  }
}

.cc-checklist__toggle:focus-visible,
.cc-checklist__item:focus-visible,
.cc-checklist__dismiss:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-checklist__item[aria-disabled="true"],
.cc-checklist__item:disabled {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

@media (forced-colors: active) {
  .cc-choice:has(input:checked) {
    outline: var(--cc-focus-width) solid Highlight;
  }
  .cc-checklist__bar {
    forced-color-adjust: none;
    background: Highlight;
  }
}

.cc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-1) var(--cc-space-3);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
  font-size: var(--cc-type-label-sm-size);
  line-height: var(--cc-type-label-sm-line);
  font-weight: var(--cc-type-label-sm-weight);
  letter-spacing: var(--cc-type-label-sm-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.cc-eyebrow[hidden] {
  display: none;
}

.cc-eyebrow .cc-icon {
  width: 1em;
  height: 1em;
  flex: none;
}
.cc-eyebrow--neutral {
  background: var(--cc-color-surface-2);
  color: var(--cc-color-on-surface-variant);
}
.cc-eyebrow--success {
  background: var(--cc-color-success-container);
  color: var(--cc-color-on-success-container);
}
.cc-eyebrow--verified .cc-icon {
  color: var(--cc-color-primary-text);
}

.cc-insight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cc-space-3);
  padding: var(--cc-space-6);
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface);
}
.cc-insight__lede {
  margin: 0;
  font-size: var(--cc-type-title-lg-size);
  line-height: var(--cc-type-title-lg-line);
  font-weight: 500;
  color: var(--cc-color-on-surface);
  text-wrap: balance;
}
.cc-insight__body {
  margin: 0;
  font-size: var(--cc-type-body-md-size);
  line-height: var(--cc-type-body-md-line);
  color: var(--cc-color-on-surface-variant);
}
.cc-insight__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-1);
}

.cc-insight--tonal {
  border-color: transparent;
  background: var(--cc-color-primary-container);
  --cc-color-on-surface: var(--cc-color-on-primary-container);
  --cc-color-on-surface-variant: var(--cc-color-on-primary-container-variant);
  --cc-color-on-surface-muted: var(--cc-color-on-primary-container-muted);
  --cc-color-primary-text: var(--cc-color-on-primary-container);
}
.cc-insight--tonal .cc-insight__lede {
  color: var(--cc-color-on-primary-container);
}
.cc-insight--tonal .cc-insight__body {
  color: color-mix(in srgb, var(--cc-color-on-primary-container) 92%, transparent);
}

.cc-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cc-space-2);
  box-sizing: border-box;
  width: var(--cc-status-width, 108px);
  padding: var(--cc-space-1) var(--cc-space-3);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-2);
  color: var(--cc-color-on-surface-variant);
  font-size: var(--cc-type-label-md-size);
  line-height: var(--cc-type-label-md-line);
  font-weight: var(--cc-type-label-md-weight);
  white-space: nowrap;
}
.cc-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.cc-status__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-status--success {
  background: var(--cc-color-success-container);
  color: var(--cc-color-on-success-container);
}
.cc-status--warning {
  background: var(--cc-color-warning-container);
  color: var(--cc-color-on-warning-container);
}
.cc-status--error {
  background: var(--cc-color-error-container);
  color: var(--cc-color-on-error-container);
}
.cc-status--info {
  background: var(--cc-color-info-container);
  color: var(--cc-color-on-info-container);
}

.cc-cell-truncate {
  display: block;
  max-width: var(--cc-cell-max, 22ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  opacity: 0;
  transition: opacity var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
tr:hover .cc-row-actions,
tr:focus-within .cc-row-actions,
.cc-row:hover .cc-row-actions,
.cc-row:focus-within .cc-row-actions,
.cc-row-actions:focus-within {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .cc-row-actions {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-row-actions {
    transition: none;
  }
}

.cc-heatmap {
  display: grid;
  gap: var(--cc-space-1);
  grid-template-columns: auto repeat(var(--cc-heatmap-cols, 24), 1fr);
  align-items: center;
}
.cc-heatmap__label {
  padding-inline-end: var(--cc-space-2);
  font-size: var(--cc-type-label-sm-size);
  color: var(--cc-color-on-surface-muted);
  text-align: end;
  white-space: nowrap;
}
.cc-heatmap__cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 12px;
  border-radius: var(--cc-radius-xs);
  background: color-mix(in srgb, var(--cc-color-primary) calc(var(--cc-heat, 0) * 1%), var(--cc-color-surface-2));
  cursor: default;
}
.cc-heatmap__cell:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}
.cc-heatmap__legend {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-type-label-sm-size);
  color: var(--cc-color-on-surface-muted);
}
.cc-heatmap__scale {
  display: flex;
  gap: var(--cc-space-05);
}
.cc-heatmap__scale span {
  width: 12px;
  height: 12px;
  border-radius: var(--cc-radius-xs);
  background: color-mix(in srgb, var(--cc-color-primary) calc(var(--cc-heat, 0) * 1%), var(--cc-color-surface-2));
}

.cc-score {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-2);
}
.cc-score__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cc-score-size, 120px);
  height: var(--cc-score-size, 120px);
  border-radius: 50%;
  background: conic-gradient(var(--cc-color-primary) calc(var(--cc-score, 0) * 1%), var(--cc-color-surface-2) 0);
}
.cc-score__ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--cc-color-surface);
}
.cc-score__value {
  position: relative;
  font-size: var(--cc-type-headline-sm-size);
  line-height: 1;
  font-weight: 600;
  color: var(--cc-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.cc-score__label {
  font-size: var(--cc-type-label-md-size);
  color: var(--cc-color-on-surface-variant);
}
.cc-score--success .cc-score__ring {
  background: conic-gradient(var(--cc-color-success) calc(var(--cc-score, 0) * 1%), var(--cc-color-surface-2) 0);
}
.cc-score--warning .cc-score__ring {
  background: conic-gradient(var(--cc-color-warning) calc(var(--cc-score, 0) * 1%), var(--cc-color-surface-2) 0);
}

.cc-sparkline {
  display: block;
  width: 100%;
  height: var(--cc-sparkline-height, 32px);
  overflow: visible;
}
.cc-sparkline__line {
  fill: none;
  stroke: var(--cc-color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cc-sparkline__area {
  fill: color-mix(in srgb, var(--cc-color-primary) 14%, transparent);
  stroke: none;
}
.cc-sparkline__dot {
  fill: var(--cc-color-primary);
  stroke: var(--cc-color-surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cc-sparkline--success .cc-sparkline__line {
  stroke: var(--cc-color-success);
}
.cc-sparkline--success .cc-sparkline__area {
  fill: color-mix(in srgb, var(--cc-color-success) 14%, transparent);
}
.cc-sparkline--success .cc-sparkline__dot {
  fill: var(--cc-color-success);
}
.cc-sparkline--error .cc-sparkline__line {
  stroke: var(--cc-color-error);
}
.cc-sparkline--error .cc-sparkline__area {
  fill: color-mix(in srgb, var(--cc-color-error) 14%, transparent);
}
.cc-sparkline--error .cc-sparkline__dot {
  fill: var(--cc-color-error);
}

.cc-selection-bar {
  position: fixed;
  bottom: calc(var(--cc-space-6) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--cc-z-fab);
  display: flex;
  align-items: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-pill);
  border: 1px solid transparent;
  background: var(--cc-color-inverse-surface);
  color: var(--cc-color-inverse-on-surface);
  box-shadow: var(--cc-elevation-4);
  animation: cc-selection-in var(--cc-motion-dur-4) var(--cc-motion-ease-emphasized);
}
.cc-selection-bar[hidden] {
  display: none;
}
.cc-selection-bar__count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-selection-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-1);
}
.cc-selection-bar .cc-btn--text {
  color: var(--cc-color-inverse-primary);
}
@media (max-width: 839px) {
  .cc-selection-bar {
    bottom: calc(var(--cc-nav-height) + var(--cc-space-4) + env(safe-area-inset-bottom));
    width: calc(100% - var(--cc-space-8));
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cc-space-2);
  }
  .cc-selection-bar__count {
    min-width: 0;
  }
  .cc-selection-bar__actions {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@keyframes cc-selection-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-selection-bar {
    animation: none;
  }
}

@media (forced-colors: active) {
  .cc-score__ring,
  .cc-heatmap__cell,
  .cc-heatmap__scale span,
  .cc-sparkline__line,
  .cc-sparkline__area,
  .cc-sparkline__dot {
    forced-color-adjust: none;
  }
  .cc-score__ring {
    background: conic-gradient(Highlight calc(var(--cc-score, 0) * 1%), Canvas 0);
    border: 1px solid CanvasText;
  }
  .cc-score__ring::before {
    background: Canvas;
  }
  .cc-heatmap__cell,
  .cc-heatmap__scale span {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .cc-sparkline__line {
    stroke: CanvasText;
  }
  .cc-sparkline__area {
    fill: Canvas;
  }
  .cc-sparkline__dot {
    fill: Highlight;
    stroke: Canvas;
  }
}

.cc-kpi-tile {
  --cc-kpi-accent: var(--cc-color-primary);
  --cc-kpi-badge-bg: var(--cc-color-primary-container);
  --cc-kpi-badge-fg: var(--cc-color-on-primary-container);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  padding: var(--cc-space-5);
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface);
}
.cc-kpi-tile--success {
  --cc-kpi-badge-bg: var(--cc-color-success-container);
  --cc-kpi-badge-fg: var(--cc-color-on-success-container);
}
.cc-kpi-tile--warning {
  --cc-kpi-badge-bg: var(--cc-color-warning-container);
  --cc-kpi-badge-fg: var(--cc-color-on-warning-container);
}
.cc-kpi-tile--info {
  --cc-kpi-badge-bg: var(--cc-color-info-container);
  --cc-kpi-badge-fg: var(--cc-color-on-info-container);
}
.cc-kpi-tile--tertiary {
  --cc-kpi-badge-bg: var(--cc-color-tertiary-container);
  --cc-kpi-badge-fg: var(--cc-color-on-tertiary-container);
}
.cc-kpi-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
}
.cc-kpi-tile__badge {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--cc-radius-md);
  background: var(--cc-kpi-badge-bg);
  color: var(--cc-kpi-badge-fg);
}
.cc-kpi-tile__badge .cc-icon {
  width: 1.4em;
  height: 1.4em;
}
.cc-kpi-tile__value {
  font-size: var(--cc-type-headline-md-size);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cc-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.cc-kpi-tile__label {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
}
.cc-kpi-tile__spark {
  margin-top: var(--cc-space-2);
}
.cc-kpi-tile__spark .cc-sparkline {
  --cc-sparkline-height: 40px;
  height: 40px;
}

.cc-kpi-tile--compact {
  flex-direction: row;
  align-items: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-4);
  align-self: start;
}

.cc-kpi-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-4);
}
.cc-kpi-stack .cc-kpi-tile--compact {
  flex: 1;
  align-self: stretch;
}
.cc-kpi-tile--compact .cc-kpi-tile__main {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-05);
  min-width: 0;
  flex: 1;
}
.cc-kpi-tile--compact .cc-kpi-tile__value {
  font-size: var(--cc-type-title-lg-size);
  line-height: var(--cc-type-title-lg-line);
}
.cc-kpi-tile--compact .cc-kpi-tile__spark {
  margin-top: 0;
  width: 96px;
  flex: none;
}
.cc-kpi-tile--compact .cc-kpi-tile__spark .cc-sparkline {
  --cc-sparkline-height: 32px;
  height: 32px;
}

.cc-winloss {
  display: flex;
  align-items: flex-end;
  gap: var(--cc-space-05);
  height: 40px;
}
.cc-winloss__bar {
  flex: 1;
  min-width: 3px;
  border-radius: var(--cc-radius-xs);
  align-self: center;
  height: 45%;
  background: var(--cc-color-surface-3);
}
.cc-winloss__bar--win {
  align-self: flex-start;
  height: var(--cc-winloss-h, 70%);
  background: var(--cc-color-success);
}
.cc-winloss__bar--loss {
  align-self: flex-end;
  height: var(--cc-winloss-h, 55%);
  background: var(--cc-color-error);
}

@media (forced-colors: active) {
  .cc-winloss__bar {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
  .cc-winloss__bar--win {
    background: Highlight;
  }
  .cc-winloss__bar--loss {
    background: Canvas;
  }
}

.cc-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
  padding: var(--cc-space-3);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
}

.cc-filter-bar--flat {
  border-color: transparent;
  background: var(--cc-color-surface-1);
}

.cc-filter-bar__search {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  padding-inline: var(--cc-space-3);
  border: 1px solid var(--cc-color-outline);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface);
}

.cc-filter-bar__search:focus-within {
  border-color: var(--cc-color-primary);
}
.cc-filter-bar__search:has(:focus-visible) {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}
.cc-filter-bar__search .cc-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--cc-color-on-surface-variant);
}

.cc-filter-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--cc-color-on-surface);
  font: inherit;
  font-size: var(--cc-type-body-md-size);
}
.cc-filter-bar__input::placeholder {
  color: var(--cc-color-on-surface-muted);
}
.cc-filter-bar__input:focus-visible {
  outline: none;
}

.cc-filter-bar__chips {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.cc-filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  flex-wrap: wrap;
}

.cc-filter-bar__count {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: var(--cc-space-05) var(--cc-space-2);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
  font-size: var(--cc-type-label-md-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cc-filter-bar__count[data-count="0"] {
  display: none;
}

.cc-filter-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: var(--cc-space-1) var(--cc-space-2);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-color-primary-text);
  font-size: var(--cc-type-label-md-size);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-filter-bar__clear:hover {
  background: color-mix(in srgb, var(--cc-color-primary) var(--cc-state-hover), transparent);
}
.cc-filter-bar__clear:active {
  background: color-mix(in srgb, var(--cc-color-primary) var(--cc-state-pressed), transparent);
}
.cc-filter-bar__clear .cc-icon {
  width: 1.05em;
  height: 1.05em;
}
.cc-filter-bar__clear[aria-disabled="true"],
.cc-filter-bar__clear:disabled {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.cc-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin-inline-start: auto;
  flex: none;
}

.cc-filter-bar__sep {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  background: var(--cc-color-outline-variant);
}

.cc-column-picker {
  width: min(288px, 92vw);
  display: flex;
  flex-direction: column;
  max-height: 380px;
  padding: 0;
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-3);
  overflow: hidden;
}

.cc-column-picker[hidden] {
  display: none;
}

.cc-column-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) var(--cc-space-4);
  border-bottom: 1px solid var(--cc-color-outline-variant);
  font-size: var(--cc-type-title-sm-size);
  font-weight: 600;
  color: var(--cc-color-on-surface);
}

.cc-column-picker__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--cc-space-1);
  margin: 0;
  list-style: none;
}

.cc-column-picker__item {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-color-on-surface);
  font-size: var(--cc-type-body-md-size);
  cursor: pointer;
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}

.cc-column-picker__item:hover {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-hover), transparent);
}
.cc-column-picker__item[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.cc-column-picker__item[data-dragging="true"] {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-dragged), transparent);
}

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

.cc-column-picker__handle {
  flex: none;
  display: inline-flex;
  color: var(--cc-color-on-surface-muted);
  cursor: grab;
}
.cc-column-picker__handle .cc-icon {
  width: 1.15em;
  height: 1.15em;
}
.cc-column-picker__handle:active {
  cursor: grabbing;
}

.cc-column-picker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) var(--cc-space-3);
  border-top: 1px solid var(--cc-color-outline-variant);
  background: var(--cc-color-surface-1);
}

.cc-table--dense th,
.cc-table--dense td {
  padding: var(--cc-space-1) var(--cc-space-3);
  font-size: var(--cc-type-body-sm-size);
}
.cc-table--dense thead th {
  font-size: var(--cc-type-label-sm-size);
}
.cc-table--dense .cc-avatar {
  width: 24px;
  height: 24px;
  font-size: var(--cc-type-label-sm-size);
}
.cc-table--dense .cc-chip {
  height: 24px;
  padding-inline: var(--cc-space-2);
}

.cc-table--sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cc-color-surface-1);
}

.cc-table--pin-first tbody th:first-child,
.cc-table--pin-first td:first-child,
.cc-table--pin-first thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--cc-color-surface);
}

.cc-table--pin-first thead th:first-child {
  z-index: 3;
  background: var(--cc-color-surface-1);
}

.cc-table--pin-first tbody th:first-child::after,
.cc-table--pin-first td:first-child::after,
.cc-table--pin-first thead th:first-child::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 1px;
  background: var(--cc-color-outline-variant);
}

.cc-table--pin-first.cc-table--striped tbody tr:nth-child(even) td:first-child,
.cc-table--pin-first.cc-table--striped tbody tr:nth-child(even) th:first-child {
  background: var(--cc-color-surface-1);
}

.cc-table--pin-first.cc-table--hover tbody tr:hover td:first-child,
.cc-table--pin-first.cc-table--hover tbody tr:hover th:first-child {
  background: var(--cc-color-surface-1);
}

.cc-table--resizable thead th {
  position: relative;
}

.cc-th-resize {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(-1 * var(--cc-space-05));
  width: var(--cc-space-2);
  cursor: col-resize;
  touch-action: none;
  background: none;
  border: none;
  padding: 0;
  z-index: 4;
}

.cc-th-resize::before {
  content: "";
  position: absolute;
  inset-block: var(--cc-space-2);
  inset-inline-start: 50%;
  width: 2px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-outline-variant);
  transform: translateX(-50%);
  transition: background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}

.cc-th-resize:hover::before,
.cc-th-resize[data-resizing="true"]::before {
  background: var(--cc-color-primary);
}
.cc-th-resize[data-resizing="true"] {
  cursor: col-resize;
}

.cc-th-resize:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-row-expand__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cc-radius-pill);
  color: var(--cc-color-on-surface-variant);
  cursor: pointer;
  transition:
    background var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    transform var(--cc-motion-dur-3) var(--cc-motion-ease-emphasized);
}

.cc-row-expand__btn:hover {
  background: color-mix(in srgb, var(--cc-color-on-surface) var(--cc-state-hover), transparent);
  color: var(--cc-color-on-surface);
}
.cc-row-expand__btn .cc-icon {
  width: 1.2em;
  height: 1.2em;
}
.cc-row-expand__btn[aria-expanded="true"] {
  transform: rotate(90deg);
}
[dir="rtl"] .cc-row-expand__btn .cc-icon {
  transform: scaleX(-1);
}
.cc-row-expand__btn[aria-disabled="true"],
.cc-row-expand__btn:disabled {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.cc-row-expand[aria-expanded="true"] > td,
.cc-table tbody tr.cc-row-expand--open > td {
  background: color-mix(in srgb, var(--cc-color-primary) var(--cc-state-hover), transparent);
}

.cc-row-detail[hidden] {
  display: none;
}
.cc-row-detail > td {
  padding: 0;
  background: var(--cc-color-surface-1);
  border-bottom: 1px solid var(--cc-color-outline-variant);
}

.cc-row-detail__inner {
  padding: var(--cc-space-4) var(--cc-space-5);
  white-space: normal;
}

.cc-row-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--cc-space-4);
}

.cc-row-detail__label {
  font-size: var(--cc-type-label-md-size);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cc-color-on-surface-muted);
}

.cc-row-detail__value {
  font-size: var(--cc-type-body-md-size);
  color: var(--cc-color-on-surface);
}

.cc-row-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  flex-wrap: wrap;
  margin-top: var(--cc-space-4);
}

.cc-filter-bar__clear:focus-visible,
.cc-column-picker__item:focus-visible,
.cc-column-picker__handle:focus-visible,
.cc-row-expand__btn:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

@media (max-width: 599px) {
  .cc-filter-bar {
    padding: var(--cc-space-2);
  }
  .cc-filter-bar__actions {
    margin-inline-start: 0;
    width: 100%;
    justify-content: flex-end;
  }
  .cc-row-detail__inner {
    padding: var(--cc-space-3);
  }
}

@media (pointer: coarse) {
  .cc-column-picker__item {
    min-height: 44px;
  }
  .cc-filter-bar__clear {
    min-height: 44px;
  }
  .cc-row-expand__btn {
    min-width: 44px;
    min-height: 44px;
  }
  .cc-th-resize {
    width: var(--cc-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-filter-bar__clear,
  .cc-column-picker__item,
  .cc-th-resize::before,
  .cc-row-expand__btn {
    transition: none;
  }
  .cc-row-expand__btn[aria-expanded="true"] {
    transform: none;
  }
}

@media (forced-colors: active) {
  .cc-filter-bar,
  .cc-column-picker {
    border: 1px solid CanvasText;
  }
  .cc-filter-bar__count {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .cc-th-resize::before {
    background: CanvasText;
  }
  .cc-table--pin-first tbody th:first-child::after,
  .cc-table--pin-first td:first-child::after,
  .cc-table--pin-first thead th:first-child::after {
    background: CanvasText;
  }
}

@media print {
  .cc-filter-bar,
  .cc-column-picker,
  .cc-th-resize,
  .cc-row-expand__btn {
    display: none !important;
  }
  .cc-row-detail {
    display: table-row !important;
  }
  .cc-table--pin-first tbody th:first-child,
  .cc-table--pin-first td:first-child,
  .cc-table--pin-first thead th:first-child,
  .cc-table--sticky-head thead th {
    position: static;
  }
}

.cc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-lg);
}

.cc-table-wrap--scroll {
  max-height: var(--cc-table-max-h, 60vh);
  overflow-y: auto;
}

.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cc-type-body-md-size);
}

.cc-table th,
.cc-table td {
  padding: var(--cc-space-3) var(--cc-space-4);
  text-align: start;
  white-space: nowrap;
}

.cc-table thead th {
  font-size: var(--cc-type-label-md-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-color-on-surface-variant);
  background: var(--cc-color-surface-1);
  border-bottom: 1px solid var(--cc-color-outline-variant);
  position: sticky;
  top: 0;
}

.cc-table tbody tr {
  border-bottom: 1px solid var(--cc-color-outline-variant);
}
.cc-table tbody tr:last-child {
  border-bottom: none;
}
.cc-table--hover tbody tr:hover {
  background: var(--cc-color-surface-1);
}
.cc-table--striped tbody tr:nth-child(even) {
  background: var(--cc-color-surface-1);
}

.cc-th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  cursor: pointer;
  user-select: none;
}
.cc-th-sort .cc-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  color: currentColor;
}
.cc-th-sort[data-sort="asc"] .cc-icon,
.cc-th-sort[data-sort="desc"] .cc-icon {
  opacity: 1;
  color: var(--cc-color-primary-text);
}
.cc-th-sort:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
  border-radius: var(--cc-radius-xs);
}

.cc-datatable__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--cc-space-4);
}
.cc-datatable__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
  margin-top: var(--cc-space-4);
}

.cc-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface-3);
  overflow: hidden;
}
.cc-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--cc-color-primary);
  transition: width var(--cc-motion-dur-5) var(--cc-motion-ease-standard);
}
.cc-progress--indeterminate .cc-progress__bar {
  width: 40%;
  animation: cc-progress-slide 1.2s var(--cc-motion-ease-standard) infinite;
}

.cc-progress--over {
  background: var(--cc-color-error-container);
}
.cc-progress--over .cc-progress__bar {
  background: var(--cc-color-error);
}
.cc-budget {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}
.cc-budget__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-3);
}
.cc-budget__label {
  font-weight: 500;
  color: var(--cc-color-on-surface);
}
.cc-budget__amount {
  font-variant-numeric: tabular-nums;
  color: var(--cc-color-on-surface-variant);
}
.cc-budget__amount strong {
  color: var(--cc-color-on-surface);
}
.cc-budget__warn {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-error);
}
.cc-budget__warn .cc-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
@keyframes cc-progress-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}

.cc-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--cc-color-surface-3);
  border-top-color: var(--cc-color-primary);
  animation: cc-spin 0.7s linear infinite;
}
.cc-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.cc-spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}
@keyframes cc-spin {
  to {
    transform: rotate(360deg);
  }
}

.cc-circular-progress {
  --cc-progress-value: 0;
  --cc-progress-size: 48px;
  --cc-progress-thickness: 5px;
  position: relative;
  width: var(--cc-progress-size);
  height: var(--cc-progress-size);
  border-radius: 50%;
  display: grid;
  place-content: center;
  flex: none;
}
.cc-circular-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--cc-color-primary) calc(var(--cc-progress-value) * 1%), var(--cc-color-surface-3) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--cc-progress-thickness)), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--cc-progress-thickness)), #000 0);
  transition: background var(--cc-motion-dur-5) var(--cc-motion-ease-standard);
}
.cc-circular-progress__label {
  position: relative;
  font-size: var(--cc-type-label-md-size);
  font-weight: 600;
  color: var(--cc-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.cc-circular-progress--sm {
  --cc-progress-size: 32px;
  --cc-progress-thickness: 4px;
}
.cc-circular-progress--sm .cc-circular-progress__label {
  font-size: var(--cc-type-label-sm-size);
}
.cc-circular-progress--lg {
  --cc-progress-size: 64px;
  --cc-progress-thickness: 6px;
}

.cc-skeleton {
  background: linear-gradient(
    90deg,
    var(--cc-color-surface-2) 25%,
    var(--cc-color-surface-3) 37%,
    var(--cc-color-surface-2) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--cc-radius-sm);
  animation: cc-skeleton 1.4s ease infinite;
}
.cc-skeleton--text {
  height: 0.8em;
  margin: 0.2em 0;
}
.cc-skeleton--circle {
  border-radius: 50%;
}
@keyframes cc-skeleton {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.cc-timeline {
  position: relative;
  padding-inline-start: var(--cc-space-6);
}
.cc-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--cc-color-outline-variant);
}
.cc-timeline__item {
  position: relative;
  padding-bottom: var(--cc-space-5);
}
.cc-timeline__dot {
  position: absolute;
  inset-inline-start: calc(-1 * var(--cc-space-6) + var(--cc-space-05));
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cc-color-primary);
  border: 2px solid var(--cc-color-surface);
}
.cc-timeline__time {
  font-size: var(--cc-type-body-sm-size);
  color: var(--cc-color-on-surface-variant);
}

.cc-tree {
  font-size: var(--cc-type-body-md-size);
}
.cc-tree__node {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-2) var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
}
.cc-tree__node:hover {
  background: var(--cc-color-surface-1);
}
.cc-tree__children {
  padding-inline-start: var(--cc-space-5);
}
.cc-tree__toggle {
  transition: transform var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-tree__node[aria-expanded="true"] .cc-tree__toggle {
  transform: rotate(90deg);
}
[dir="rtl"] .cc-tree__toggle {
  transform: rotate(180deg);
}
[dir="rtl"] .cc-tree__node[aria-expanded="true"] .cc-tree__toggle {
  transform: rotate(90deg);
}

.cc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-9) var(--cc-space-4);
  color: var(--cc-color-on-surface-variant);
}
.cc-empty__icon {
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-surface-1);
  color: var(--cc-color-on-surface-muted);
}
.cc-empty__icon .cc-icon {
  width: 2em;
  height: 2em;
}
.cc-empty__title {
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
  font-weight: 500;
  color: var(--cc-color-on-surface);
}

@media (prefers-reduced-motion: reduce) {
  .cc-progress--indeterminate .cc-progress__bar {
    animation: none;
  }
  .cc-skeleton {
    animation: none;
  }
}

.cc-row--success > td {
  background: color-mix(in srgb, var(--cc-color-success-container) 42%, transparent);
}
.cc-row--warning > td {
  background: color-mix(in srgb, var(--cc-color-warning-container) 42%, transparent);
}
.cc-cell-stack {
  display: inline-flex;
  flex-direction: column;
  gap: var(--cc-space-05);
}
.cc-cell-stack small {
  color: var(--cc-color-on-surface-variant);
  font-size: var(--cc-type-body-sm-size);
}
.cc-cell-file .cc-icon {
  width: 20px;
  height: 20px;
  color: var(--cc-color-error);
}

.cc-tree__node[aria-disabled="true"],
.cc-list__item[aria-disabled="true"],
.cc-th-sort[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

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

@media (forced-colors: active) {
  .cc-circular-progress::before,
  .cc-progress,
  .cc-progress__bar,
  .cc-spinner {
    forced-color-adjust: none;
  }
  .cc-circular-progress::before {
    background: conic-gradient(Highlight calc(var(--cc-progress-value) * 1%), Canvas 0);
    border: 1px solid CanvasText;
    border-radius: 50%;
  }
  .cc-progress {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .cc-progress__bar {
    background: Highlight;
  }
  .cc-spinner {
    border-color: CanvasText;
    border-top-color: Highlight;
  }
  .cc-skeleton {
    forced-color-adjust: none;
    background: Canvas;
    border: 1px solid GrayText;
  }
}

.cc-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--cc-z-backdrop);
  background: var(--cc-color-scrim);
  opacity: 0;
  transition: opacity var(--cc-motion-dur-4) var(--cc-motion-ease-standard);
}

.cc-backdrop[data-open="true"] {
  opacity: 1;
}
.cc-backdrop[hidden] {
  display: none;
}

.cc-modal {
  position: fixed;
  z-index: var(--cc-z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--cc-space-4);
  pointer-events: none;
}

.cc-modal__panel {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--cc-space-8));
  max-height: calc(100dvh - var(--cc-space-8));
  overflow: auto;
  background: var(--cc-color-surface);
  border-radius: var(--cc-radius-2xl);
  box-shadow: var(--cc-elevation-5);
  padding: var(--cc-space-6);
  pointer-events: auto;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition:
    transform var(--cc-motion-dur-5) var(--cc-motion-ease-emphasized),
    opacity var(--cc-motion-dur-4) var(--cc-motion-ease-standard);
}

.cc-modal[data-open="true"] .cc-modal__panel {
  transform: none;
  opacity: 1;
}
.cc-modal[hidden] {
  display: none;
}

.cc-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cc-space-4);
  margin-bottom: var(--cc-space-4);
}

.cc-modal__title {
  font-size: var(--cc-type-title-lg-size);
  line-height: var(--cc-type-title-lg-line);
  font-weight: var(--cc-type-title-lg-weight);
}
.cc-modal__body {
  color: var(--cc-color-on-surface-variant);
  font-size: var(--cc-type-body-md-size);
  line-height: 1.5;
}
.cc-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cc-space-3);
  margin-top: var(--cc-space-6);
}

.cc-modal--sm .cc-modal__panel {
  max-width: 400px;
}
.cc-modal--lg .cc-modal__panel {
  max-width: 760px;
}

.cc-drawer {
  position: fixed;
  z-index: var(--cc-z-modal);
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100vw);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-5);
  padding: var(--cc-space-6);
  overflow: auto;
  transform: translateX(100%);
  transition: transform var(--cc-motion-dur-5) var(--cc-motion-ease-emphasized);
}

.cc-drawer[data-open="true"] {
  transform: none;
}
.cc-drawer[hidden] {
  display: none;
}
.cc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  margin-bottom: var(--cc-space-4);
}
.cc-drawer--left {
  inset-inline: 0 auto;
  transform: translateX(-100%);
}
.cc-drawer--left[data-open="true"] {
  transform: none;
}
[dir="rtl"] .cc-drawer {
  transform: translateX(-100%);
}
[dir="rtl"] .cc-drawer--left {
  transform: translateX(100%);
}
[dir="rtl"] .cc-drawer[data-open="true"],
[dir="rtl"] .cc-drawer--left[data-open="true"] {
  transform: none;
}

.cc-sheet {
  position: fixed;
  z-index: var(--cc-z-modal);
  inset: auto 0 0;
  background: var(--cc-color-surface);
  border-radius: var(--cc-radius-2xl) var(--cc-radius-2xl) 0 0;
  box-shadow: var(--cc-elevation-5);
  padding: var(--cc-space-6);
  max-height: 85vh;
  max-height: 85dvh;
  overflow: auto;
  transform: translateY(100%);
  transition: transform var(--cc-motion-dur-5) var(--cc-motion-ease-emphasized);
}
.cc-sheet[data-open="true"] {
  transform: none;
}
.cc-sheet[hidden] {
  display: none;
}
.cc-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-outline);
  margin: 0 auto var(--cc-space-4);
}

.cc-profile-drawer {
  padding: var(--cc-space-5);
}
.cc-profile-drawer__head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding-bottom: var(--cc-space-4);
  margin-bottom: var(--cc-space-3);
  border-bottom: 1px solid var(--cc-color-outline-variant);
}
.cc-profile-drawer__id {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-05);
  min-width: 0;
  flex: 1 1 auto;
}
.cc-profile-drawer__id strong {
  font-size: var(--cc-type-title-md-size);
  line-height: var(--cc-type-title-md-line);
}
.cc-profile-drawer__id span {
  color: var(--cc-color-on-surface-variant);
  font-size: var(--cc-type-body-sm-size);
}
.cc-profile-drawer__email {
  color: var(--cc-color-on-surface-muted) !important;
}
.cc-profile-drawer__menu {
  border: none;
  box-shadow: none;
  padding: 0;
}

.cc-tooltip {
  position: absolute;
  z-index: var(--cc-z-tooltip);
  padding: var(--cc-space-2) var(--cc-space-3);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-color-inverse-surface);
  color: var(--cc-color-inverse-on-surface);
  font-size: var(--cc-type-body-sm-size);
  max-width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--cc-motion-dur-3) var(--cc-motion-ease-standard),
    transform var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
.cc-tooltip[data-open="true"] {
  opacity: 1;
  transform: none;
}

.cc-popover {
  position: absolute;
  z-index: var(--cc-z-popover);
  min-width: 200px;
  padding: var(--cc-space-4);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-md);
  box-shadow: var(--cc-elevation-3);
}

.cc-toaster {
  position: fixed;
  z-index: var(--cc-z-toast);
  bottom: var(--cc-space-5);
  inset-inline-end: var(--cc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  width: min(380px, calc(100vw - var(--cc-space-8)));
}
.cc-toaster--top {
  bottom: auto;
  top: var(--cc-space-5);
}
.cc-toaster--left {
  inset-inline: var(--cc-space-5) auto;
}

.cc-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  border: 1px solid transparent;
  background: var(--cc-color-inverse-surface);
  color: var(--cc-color-inverse-on-surface);
  box-shadow: var(--cc-elevation-3);
  --cc-toast-x: 24px;
  animation: cc-toast-in var(--cc-motion-dur-5) var(--cc-motion-ease-emphasized);
}

[dir="rtl"] .cc-toast {
  --cc-toast-x: -24px;
}

.cc-toast::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--cc-hairline-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cc-toast__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-toast__icon .cc-icon {
  width: 1.25em;
  height: 1.25em;
}
.cc-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}
.cc-toast__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-block: calc(-1 * var(--cc-space-1));
  margin-inline: 0 calc(-1 * var(--cc-space-1));
  border-radius: var(--cc-radius-sm);
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  transition:
    opacity var(--cc-motion-dur-2) var(--cc-motion-ease-standard),
    background var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}
.cc-toast__close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor var(--cc-state-hover), transparent);
}
.cc-toast__close .cc-icon {
  width: 1.15em;
  height: 1.15em;
}
.cc-toast__action {
  flex: none;
  font-weight: 600;
  color: var(--cc-color-inverse-primary);
  text-transform: uppercase;
  font-size: var(--cc-type-label-md-size);
  letter-spacing: 0.04em;
  padding: var(--cc-space-1) var(--cc-space-2);
  border-radius: var(--cc-radius-xs);
  cursor: pointer;
  opacity: 0.95;
}
.cc-toast__action:hover {
  background: color-mix(in srgb, var(--cc-color-inverse-primary) var(--cc-state-hover), transparent);
}
.cc-toast--success .cc-toast__icon,
.cc-toast--error .cc-toast__icon,
.cc-toast--warning .cc-toast__icon,
.cc-toast--info .cc-toast__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--cc-radius-pill);
}
.cc-toast--success .cc-toast__icon {
  background: var(--cc-color-success-container);
  color: var(--cc-color-on-success-container);
}
.cc-toast--error .cc-toast__icon {
  background: var(--cc-color-error-container);
  color: var(--cc-color-on-error-container);
}
.cc-toast--warning .cc-toast__icon {
  background: var(--cc-color-warning-container);
  color: var(--cc-color-on-warning-container);
}
.cc-toast--info .cc-toast__icon {
  background: var(--cc-color-info-container);
  color: var(--cc-color-on-info-container);
}
.cc-toast--success .cc-toast__icon .cc-icon,
.cc-toast--error .cc-toast__icon .cc-icon,
.cc-toast--warning .cc-toast__icon .cc-icon,
.cc-toast--info .cc-toast__icon .cc-icon {
  width: 1.1em;
  height: 1.1em;
}
.cc-toast[data-leaving="true"] {
  animation: cc-toast-out var(--cc-motion-dur-4) var(--cc-motion-ease-accel) forwards;
}

@keyframes cc-toast-in {
  from {
    opacity: 0;
    transform: translateX(var(--cc-toast-x, 24px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cc-toast-out {
  to {
    opacity: 0;
    transform: translateX(var(--cc-toast-x, 24px));
  }
}

@media (max-width: 599px) {
  .cc-toaster {
    inset-inline: var(--cc-space-4);
    bottom: calc(var(--cc-nav-height) + var(--cc-space-4));
    width: auto;
  }
}

.cc-modal--fullscreen {
  padding: 0;
}
.cc-modal--fullscreen .cc-modal__panel {
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  transform: translateY(2%);
}
.cc-modal--fullscreen[data-open="true"] .cc-modal__panel {
  transform: none;
}
.cc-modal--fullscreen .cc-modal__header {
  position: sticky;
  top: 0;
  align-items: center;
  margin: 0;
  padding: var(--cc-space-3) var(--cc-space-4);
  background: var(--cc-color-surface);
  border-bottom: 1px solid var(--cc-color-outline-variant);
}
.cc-modal--fullscreen .cc-modal__body {
  flex: 1 1 auto;
  padding: var(--cc-space-5);
  overflow: auto;
}
.cc-modal--fullscreen .cc-modal__footer {
  margin: 0;
  padding: var(--cc-space-4);
  border-top: 1px solid var(--cc-color-outline-variant);
}

.cc-tooltip--rich {
  max-width: 320px;
  padding: var(--cc-space-4);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface);
  border: 1px solid var(--cc-color-outline-variant);
  box-shadow: var(--cc-elevation-3);
  font-size: var(--cc-type-body-sm-size);
  text-align: start;
  pointer-events: auto;
}
.cc-tooltip__title {
  font-weight: 600;
  font-size: var(--cc-type-title-sm-size);
  color: var(--cc-color-on-surface);
  margin-bottom: var(--cc-space-1);
}
.cc-tooltip__body {
  color: var(--cc-color-on-surface-variant);
  line-height: 1.45;
}
.cc-tooltip__actions {
  display: flex;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-3);
}

.cc-toast__close:focus-visible,
.cc-toast__action:focus-visible,
.cc-sheet__grip:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: var(--cc-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .cc-backdrop,
  .cc-modal__panel,
  .cc-drawer,
  .cc-sheet,
  .cc-tooltip,
  .cc-toast__close {
    transition: none;
  }
  .cc-modal__panel,
  .cc-tooltip {
    transform: none;
  }
  .cc-toast {
    animation: none;
  }
  .cc-toast[data-leaving="true"] {
    animation: cc-toast-fade-out var(--cc-motion-dur-4) var(--cc-motion-ease-accel) forwards;
  }
}

@keyframes cc-toast-fade-out {
  to {
    opacity: 0;
  }
}

@media (forced-colors: active) {
  .cc-modal__panel,
  .cc-drawer,
  .cc-sheet,
  .cc-popover,
  .cc-toast,
  .cc-tooltip {
    border: 1px solid CanvasText;
  }
  .cc-backdrop {
    background: Canvas;
    opacity: 0.85;
  }
}

.cc-accordion {
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
}

.cc-accordion__item + .cc-accordion__item {
  border-top: 1px solid var(--cc-color-outline-variant);
}

.cc-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  width: 100%;
  padding: var(--cc-space-4);
  font-weight: 500;
  cursor: pointer;
  text-align: start;
  transition: background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}

.cc-accordion__header:hover {
  background: var(--cc-color-surface-1);
}
.cc-accordion__chevron {
  transition: transform var(--cc-motion-dur-4) var(--cc-motion-ease-emphasized);
  color: var(--cc-color-on-surface-variant);
}
.cc-accordion__header[aria-expanded="true"] .cc-accordion__chevron {
  transform: rotate(180deg);
}

.cc-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cc-motion-dur-5) var(--cc-motion-ease-emphasized);
}
.cc-accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}
.cc-accordion__panel > div {
  overflow: hidden;
}
.cc-accordion__body {
  padding: 0 var(--cc-space-4) var(--cc-space-4);
  color: var(--cc-color-on-surface-variant);
}

.cc-segmented {
  display: inline-flex;
  padding: var(--cc-space-1);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-color-surface-2);
  gap: var(--cc-space-1);
}
.cc-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-2) var(--cc-space-4);
  border-radius: calc(var(--cc-radius-sm) - var(--cc-space-05));
  font-size: var(--cc-type-label-lg-size);
  font-weight: 500;
  color: var(--cc-color-on-surface-variant);
  cursor: pointer;
}
.cc-segmented__item:disabled,
.cc-segmented__item[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.cc-segmented__item[aria-pressed="true"] {
  background: var(--cc-color-surface);
  color: var(--cc-color-on-surface);
  box-shadow: var(--cc-elevation-1);
}

.cc-divider-text {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  color: var(--cc-color-on-surface-muted);
  font-size: var(--cc-type-label-md-size);
}
.cc-divider-text::before,
.cc-divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cc-color-outline-variant);
}

.cc-accordion__header:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-segmented__item:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-accordion__header:disabled,
.cc-accordion__header[aria-disabled="true"] {
  opacity: var(--cc-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cc-accordion__header,
  .cc-accordion__chevron,
  .cc-accordion__panel {
    transition: none;
  }
}

.cc-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.cc-auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--cc-space-9);
  color: var(--cc-brand-on);
  background: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-brand-static),
    color-mix(in srgb, var(--cc-brand-static) 60%, var(--cc-brand-shadow))
  );
  overflow: hidden;
}
.cc-auth__aside h2 {
  font-size: var(--cc-type-display-md-size);
  line-height: 1.1;
}

.cc-auth__lede {
  color: color-mix(in srgb, var(--cc-brand-on) 88%, transparent);
}
.cc-auth__legal {
  color: color-mix(in srgb, var(--cc-brand-on) 75%, transparent);
}
.cc-auth__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-6);
  background: var(--cc-color-background);
}
.cc-auth__card {
  width: 100%;
  max-width: 400px;
}
.cc-auth__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  font-weight: 600;
  font-size: var(--cc-type-title-lg-size);
  line-height: var(--cc-type-title-lg-line);
}
@media (max-width: 839px) {
  .cc-auth {
    grid-template-columns: 1fr;
  }
  .cc-auth__aside {
    display: none;
  }
}

.cc-mail {
  display: grid;
  grid-template-columns: 240px 340px 1fr;
  height: calc(100vh - var(--cc-topbar-height) - 2 * var(--cc-space-6));
  height: calc(100dvh - var(--cc-topbar-height) - 2 * var(--cc-space-6));
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  background: var(--cc-color-surface);
}
.cc-mail__folders {
  border-inline-end: 1px solid var(--cc-color-outline-variant);
  padding: var(--cc-space-4);
  overflow: auto;
}
.cc-mail__pane {
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--cc-color-outline-variant);
  overflow: hidden;
  padding: var(--cc-space-3);
}
.cc-mail__pane .cc-input-group {
  flex: none;
}
.cc-mail__list {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0 calc(-1 * var(--cc-space-3)) calc(-1 * var(--cc-space-3));
}
.cc-mail__item {
  padding: var(--cc-space-3) var(--cc-space-4);
  border-bottom: 1px solid var(--cc-color-outline-variant);
  cursor: pointer;
  display: flex;
  gap: var(--cc-space-3);
  align-items: flex-start;
}
.cc-mail__star {
  flex: none;
  color: var(--cc-color-outline);
  cursor: pointer;
}
.cc-mail__star--on {
  color: var(--cc-color-warning-text);
}
.cc-mail__label {
  font-size: var(--cc-type-label-sm-size);
  padding-inline: var(--cc-space-2);
  border-radius: var(--cc-radius-xs);
  background: var(--cc-color-surface-2);
  color: var(--cc-color-on-surface-variant);
}
.cc-mail__mini-cal {
  margin-top: var(--cc-space-5);
  font-size: var(--cc-type-body-sm-size);
}
.cc-mail__mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--cc-space-05);
  text-align: center;
}
.cc-mail__mini-cal-grid span {
  padding: var(--cc-space-1) 0;
  border-radius: var(--cc-radius-xs);
}
.cc-mail__mini-cal-grid .today {
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
}
.cc-mail__mini-cal-grid .head {
  color: var(--cc-color-on-surface-muted);
  font-weight: 500;
}
.cc-mail__item:hover {
  background: var(--cc-color-surface-1);
}

.cc-mail__item[aria-selected="true"] {
  background: var(--cc-color-primary-container);
  --cc-color-on-surface: var(--cc-color-on-primary-container);
  --cc-color-on-surface-variant: var(--cc-color-on-primary-container-variant);
  --cc-color-on-surface-muted: var(--cc-color-on-primary-container-muted);
  --cc-color-primary-text: var(--cc-color-on-primary-container);
}
.cc-mail__item--unread .cc-mail__subject {
  font-weight: 600;
}
.cc-mail__reading {
  padding: var(--cc-space-6);
  overflow: auto;
}
@media (max-width: 1199px) {
  .cc-mail {
    grid-template-columns: 300px 1fr;
  }
  .cc-mail__folders {
    display: none;
  }
}
@media (max-width: 839px) {
  .cc-mail {
    grid-template-columns: 1fr;
    height: auto;
  }
  .cc-mail__reading {
    display: none;
  }
}

.cc-kanban {
  display: flex;
  gap: var(--cc-space-4);
  overflow-x: auto;
  padding-bottom: var(--cc-space-4);
  align-items: flex-start;
}
.cc-kanban__col {
  flex: 0 0 300px;
  background: var(--cc-color-surface-1);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-3);
}
.cc-kanban__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cc-space-2) var(--cc-space-2) var(--cc-space-3);
  font-weight: 600;
}
.cc-kanban__card {
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-md);
  padding: var(--cc-space-4);
  margin-bottom: var(--cc-space-3);
  box-shadow: var(--cc-elevation-1);
  cursor: grab;
  touch-action: none;
}
.cc-kanban__card:last-child {
  margin-bottom: 0;
}
.cc-kanban__col-body {
  min-height: 40px;
}
.cc-kanban__col-body .cc-kanban__card {
  margin-bottom: 0;
}
.cc-kanban__col--over {
  outline: 2px dashed var(--cc-color-primary);
  outline-offset: -3px;
}
.cc-kanban__card--dragging {
  opacity: 0.4;
}
.cc-kanban__card--ghost {
  position: fixed;
  pointer-events: none;
  z-index: var(--cc-z-modal);
  box-shadow: var(--cc-elevation-4);
  opacity: 0.95;
  transform: rotate(2deg);
  margin: 0 !important;
}

.cc-chat {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - var(--cc-topbar-height) - 2 * var(--cc-space-6));
  height: calc(100dvh - var(--cc-topbar-height) - 2 * var(--cc-space-6));
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  background: var(--cc-color-surface);
}
.cc-chat__list {
  border-inline-end: 1px solid var(--cc-color-outline-variant);
  overflow: auto;
}
.cc-chat__conv {
  display: flex;
  flex-direction: column;
}
.cc-chat__messages {
  flex: 1;
  overflow: auto;
  padding: var(--cc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
}
.cc-bubble {
  max-width: 70%;
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-surface-2);
}
.cc-bubble--me {
  align-self: flex-end;
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
}
.cc-bubble__time {
  display: block;
  font-size: var(--cc-type-body-sm-size);
  opacity: 0.7;
  margin-top: var(--cc-space-05);
}
.cc-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: var(--cc-space-1);
  padding: var(--cc-space-3) var(--cc-space-4);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-surface-2);
}
.cc-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cc-color-on-surface-variant);
  animation: cc-typing 1s infinite;
}
.cc-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.cc-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes cc-typing {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.cc-chat__composer {
  display: flex;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4);
  border-top: 1px solid var(--cc-color-outline-variant);
}
@media (max-width: 839px) {
  .cc-chat {
    grid-template-columns: 1fr;
    height: auto;
  }
  .cc-chat__list {
    display: none;
  }
}

.cc-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--cc-color-outline-variant);
  border: 1px solid var(--cc-color-outline-variant);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
}
.cc-calendar__head {
  background: var(--cc-color-surface-1);
  padding: var(--cc-space-3);
  text-align: center;
  font-size: var(--cc-type-label-md-size);
  font-weight: 600;
  color: var(--cc-color-on-surface-variant);
}
.cc-calendar__day {
  background: var(--cc-color-surface);
  min-height: 104px;
  padding: var(--cc-space-2);
}
.cc-calendar__day--muted {
  color: var(--cc-color-on-surface-muted);
  background: var(--cc-color-surface-1);
}
.cc-calendar__date {
  font-size: var(--cc-type-label-md-size);
  font-weight: 600;
}
.cc-calendar__event {
  margin-top: var(--cc-space-1);
  font-size: var(--cc-type-body-sm-size);
  padding: var(--cc-space-05) var(--cc-space-2);
  border-radius: var(--cc-radius-xs);
  background: var(--cc-color-primary-container);
  color: var(--cc-color-on-primary-container);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cc-space-5);
}
.cc-price-card {
  text-align: center;
}
.cc-price-card--featured {
  border-color: var(--cc-color-primary);
  box-shadow: var(--cc-elevation-2);
  position: relative;
}
.cc-price-card__amount {
  font-size: var(--cc-type-display-md-size);
  line-height: var(--cc-type-display-md-line);
  font-weight: 600;
}
.cc-price-card__list {
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  margin: var(--cc-space-5) 0;
}
.cc-price-card__list li {
  display: flex;
  gap: var(--cc-space-2);
  align-items: center;
}
.cc-price-card__list .cc-icon {
  color: var(--cc-color-success);
}

.cc-error {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-6);
}
.cc-error__code {
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cc-color-primary-text);
}

.cc-profile-header {
  display: flex;
  align-items: center;
  gap: var(--cc-space-5);
  flex-wrap: wrap;
}
.cc-profile-header .cc-avatar {
  width: 88px;
  height: 88px;
  font-size: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .cc-typing span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .cc-kanban__card--ghost {
    transform: none;
  }
}

.cc-mail__item:focus-visible,
.cc-mail__star:focus-visible,
.cc-kanban__card:focus-visible,
.cc-calendar__day:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}

.cc-motif-arrow {
  display: inline-block;
  flex: none;
  inline-size: 0.72em;
  block-size: 0.72em;
  background: currentColor;
  clip-path: var(--cc-motif-arrow);
}

.cc-motif-arrow--sm {
  inline-size: 0.6em;
  block-size: 0.6em;
}
.cc-motif-arrow--lg {
  inline-size: 1em;
  block-size: 1em;
}

.cc-list-motif {
  list-style: none;
  padding-inline-start: var(--cc-space-5);
  margin: 0;
}
.cc-list-motif > li {
  position: relative;
}
.cc-list-motif > li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--cc-space-5));
  inset-block-start: 0.45em;
  inline-size: 0.6em;
  block-size: 0.6em;
  background: var(--cc-color-primary);
  clip-path: var(--cc-motif-arrow);
}

.cc-glass {
  background: var(--cc-glass-bg-opaque);
}

.cc-modal__panel--glass,
.cc-drawer--glass,
.cc-sheet--glass {
  background: var(--cc-glass-bg-opaque);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and
  (background-color: color-mix(in srgb, red 50%, transparent)) {
  .cc-glass {
    background: var(--cc-glass-surface);
    -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    border: 1px solid var(--cc-glass-border);
  }

  .cc-modal__panel--glass,
  .cc-drawer--glass,
  .cc-sheet--glass {
    background: var(--cc-glass-surface-strong);
    -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    border-color: var(--cc-glass-border);
  }

  [data-m3="expressive"] .cc-backdrop {
    -webkit-backdrop-filter: blur(var(--cc-blur-sm));
    backdrop-filter: blur(var(--cc-blur-sm));
  }

  [data-m3="expressive"] .cc-cmdk__panel,
  [data-m3="expressive"] .cc-drawer {
    background: var(--cc-glass-surface-strong);
    -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
  }

  [data-m3="expressive"] .cc-popover,
  [data-m3="expressive"] .cc-menu,
  [data-m3="expressive"] .cc-submenu__panel,
  [data-m3="expressive"] .cc-autocomplete__list {
    background: var(--cc-glass-surface-strong);
    -webkit-backdrop-filter: blur(var(--cc-blur-sm)) saturate(1.4);
    backdrop-filter: blur(var(--cc-blur-sm)) saturate(1.4);
  }

  [data-m3="expressive"] .cc-cmdk--terminal .cc-cmdk__panel,
  [data-m3="expressive"] .cc-sidebar--semi-dark .cc-menu,
  [data-m3="expressive"] .cc-sidebar--semi-dark .cc-popover {
    background: var(--cc-glass-inverse);
  }

  [data-m3="expressive"] .cc-modal__panel {
    background: var(--cc-glass-surface-strong);
    -webkit-backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--cc-glass-blur)) saturate(1.4);
    border: 1px solid var(--cc-glass-border);
  }

  [data-m3="expressive"] .cc-modal--fullscreen .cc-modal__panel {
    background: var(--cc-color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
  }

  [data-m3="expressive"] .cc-toast,
  [data-m3="expressive"] .cc-tooltip {
    background: var(--cc-glass-inverse);
    -webkit-backdrop-filter: blur(var(--cc-blur-sm)) saturate(1.4);
    backdrop-filter: blur(var(--cc-blur-sm)) saturate(1.4);
  }

  [data-m3="expressive"] .cc-modal__panel--glass .cc-popover,
  [data-m3="expressive"] .cc-modal__panel--glass .cc-menu,
  [data-m3="expressive"] .cc-modal__panel--glass .cc-toast,
  [data-m3="expressive"] .cc-modal__panel--glass .cc-tooltip,
  [data-m3="expressive"] .cc-drawer--glass .cc-popover,
  [data-m3="expressive"] .cc-drawer--glass .cc-menu,
  [data-m3="expressive"] .cc-drawer--glass .cc-toast,
  [data-m3="expressive"] .cc-drawer--glass .cc-tooltip,
  [data-m3="expressive"] .cc-sheet--glass .cc-popover,
  [data-m3="expressive"] .cc-sheet--glass .cc-menu,
  [data-m3="expressive"] .cc-sheet--glass .cc-toast,
  [data-m3="expressive"] .cc-sheet--glass .cc-tooltip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  [data-m3="expressive"] .cc-modal__panel--glass .cc-popover,
  [data-m3="expressive"] .cc-modal__panel--glass .cc-menu,
  [data-m3="expressive"] .cc-drawer--glass .cc-popover,
  [data-m3="expressive"] .cc-drawer--glass .cc-menu,
  [data-m3="expressive"] .cc-sheet--glass .cc-popover,
  [data-m3="expressive"] .cc-sheet--glass .cc-menu {
    background: var(--cc-color-surface);
  }

  [data-m3="expressive"] .cc-modal__panel--glass .cc-toast,
  [data-m3="expressive"] .cc-modal__panel--glass .cc-tooltip,
  [data-m3="expressive"] .cc-drawer--glass .cc-toast,
  [data-m3="expressive"] .cc-drawer--glass .cc-tooltip,
  [data-m3="expressive"] .cc-sheet--glass .cc-toast,
  [data-m3="expressive"] .cc-sheet--glass .cc-tooltip {
    background: var(--cc-color-inverse-surface);
  }
}

:root[data-glass="on"][data-glass-opacity] {
  --cc-glass-surface: color-mix(in srgb, var(--cc-color-surface-1) var(--cc-glass-opacity, 82%), transparent);
  --cc-glass-surface-strong: color-mix(in srgb, var(--cc-color-surface-1) var(--cc-glass-opacity, 82%), transparent);
}

[data-glass="off"] {
  --cc-glass-surface: var(--cc-glass-bg-opaque);
  --cc-glass-surface-strong: var(--cc-glass-bg-opaque);
  --cc-glass-inverse: var(--cc-color-inverse-surface);
  --cc-glass-blur: 0px;
}

[data-glass="off"] .cc-backdrop,
[data-glass="off"] .cc-cmdk__panel,
[data-glass="off"] .cc-popover,
[data-glass="off"] .cc-menu,
[data-glass="off"] .cc-submenu__panel,
[data-glass="off"] .cc-autocomplete__list,
[data-glass="off"] .cc-toast,
[data-glass="off"] .cc-tooltip,
[data-glass="off"] .cc-drawer,
[data-glass="off"] .cc-glass,
[data-glass="off"] .cc-modal__panel,
[data-glass="off"] .cc-modal__panel--glass,
[data-glass="off"] .cc-drawer--glass,
[data-glass="off"] .cc-sheet--glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-glass="off"] .cc-popover,
[data-glass="off"] .cc-menu,
[data-glass="off"] .cc-submenu__panel,
[data-glass="off"] .cc-autocomplete__list,
[data-glass="off"] .cc-cmdk__panel,
[data-glass="off"] .cc-modal__panel {
  background: var(--cc-color-surface);
}

[data-glass="off"] .cc-toast,
[data-glass="off"] .cc-tooltip,
[data-glass="off"] .cc-cmdk--terminal .cc-cmdk__panel,
[data-glass="off"] .cc-sidebar--semi-dark .cc-menu,
[data-glass="off"] .cc-sidebar--semi-dark .cc-popover {
  background: var(--cc-color-inverse-surface);
}

.cc-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cc-space-5);
  margin-bottom: var(--cc-space-6);
}
.cc-page-header__lead {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}
.cc-page-header__title {
  margin: 0;
  font-size: var(--cc-type-headline-md-size);
  line-height: var(--cc-type-headline-md-line);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cc-color-on-surface);
}
.cc-page-header__subtitle {
  margin: 0;
  font-size: var(--cc-type-body-md-size);
  line-height: var(--cc-type-body-md-line);
  color: var(--cc-color-on-surface-variant);
}
.cc-page-header__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-6);
  margin-top: var(--cc-space-2);
}
.cc-page-header__stat {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-05);
}
.cc-page-header__stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cc-space-2);
  font-size: var(--cc-type-title-lg-size);
  line-height: 1.1;
  font-weight: 600;
  color: var(--cc-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.cc-page-header__stat-label {
  font-size: var(--cc-type-label-sm-size);
  letter-spacing: 0.02em;
  color: var(--cc-color-on-surface-muted);
}
.cc-page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
}
@media (max-width: 599px) {
  .cc-page-header__actions {
    width: 100%;
  }
}

@property --cc-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --cc-gradient-brand: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-color-primary) 0%,
    color-mix(in srgb, var(--cc-color-primary), #000 34%) 100%
  );
  --cc-gradient-hero: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-brand-static) 0%,
    var(--cc-brand-deep) 100%
  );
  --cc-gradient-hero-safe: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-brand-static) 0%,
    var(--cc-brand-deeper) 100%
  );
  --cc-gradient-duo: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-brand-strong) 0%,
    var(--cc-brand-tint) 100%
  );
  --cc-gradient-duo-text: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-brand-strong) 0%,
    var(--cc-brand-static) 100%
  );
  --cc-gradient-surface-wash: linear-gradient(
    180deg,
    var(--cc-color-surface-1) 0%,
    var(--cc-color-primary-container) 100%
  );
  --cc-gradient-tonal-card: linear-gradient(
    var(--cc-motif-angle, 135deg),
    var(--cc-color-primary-container) 0%,
    color-mix(in srgb, var(--cc-color-primary-container), var(--cc-brand-tint) 34%) 100%
  );
  --cc-gradient-btn-sheen: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cc-color-primary) 86%, var(--cc-brand-on)) 0%,
    var(--cc-color-primary) 100%
  );
  --cc-gradient-divider: linear-gradient(90deg, transparent 0%, var(--cc-color-outline-variant) 50%, transparent 100%);
  --cc-gradient-ring: conic-gradient(
    from var(--cc-ring-angle, 0deg),
    transparent 0%,
    var(--cc-color-primary) 55%,
    color-mix(in srgb, var(--cc-color-primary), var(--cc-brand-tint) 42%) 100%
  );
  --cc-gradient-mesh:
    radial-gradient(at 12% 18%, color-mix(in srgb, var(--cc-color-primary) 22%, transparent) 0px, transparent 55%),
    radial-gradient(at 85% 12%, color-mix(in srgb, var(--cc-brand-strong) 20%, transparent) 0px, transparent 50%),
    radial-gradient(at 75% 88%, color-mix(in srgb, var(--cc-color-primary) 18%, transparent) 0px, transparent 55%);
  --cc-spring-spatial: var(--cc-spring-spatial-default);
}

.cc-text-gradient {
  background: var(--cc-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cc-color-primary-text);
  -webkit-text-fill-color: transparent;
}

.cc-hero {
  position: relative;
  color: var(--cc-brand-on);
  background: var(--cc-gradient-hero-safe);
  border-radius: var(--cc-radius-3xl);
  padding: var(--cc-space-9) var(--cc-space-7);
  overflow: hidden;
}
.cc-hero--mesh {
  background-color: var(--cc-color-surface);
  background-image: var(--cc-gradient-mesh);
  color: var(--cc-color-on-surface);
}
.cc-hero--duo {
  background: var(--cc-gradient-duo-text);
  color: var(--cc-brand-on);
}

.cc-hero__accent {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cc-brand-on) 90%, transparent),
    color-mix(in srgb, var(--cc-brand-on) 35%, transparent)
  );
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 calc(100% - 1px);
  padding-bottom: 2px;
}

.cc-btn--inverse {
  background: var(--cc-brand-on);
  color: var(--cc-brand-static);
}

.cc-hero:not(.cc-hero--mesh) .cc-btn--text {
  color: var(--cc-brand-on);
}
.cc-hero:not(.cc-hero--mesh) .cc-btn--text:hover {
  background: color-mix(in srgb, var(--cc-brand-on) var(--cc-state-hover), transparent);
}

.cc-surface-wash {
  background: var(--cc-gradient-surface-wash);
}

.cc-card--tonal {
  background: var(--cc-gradient-tonal-card);
  color: var(--cc-color-on-primary-container);
  border-color: transparent;
}

.cc-divider--gradient {
  border: none;
  height: 1px;
  background: var(--cc-gradient-divider);
}

.cc-hairline-ring::before,
.cc-btn--hairline::before,
.cc-card--hairline::before,
.cc-card--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--cc-hairline-gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cc-btn--hairline {
  background: var(--cc-color-surface);
  color: var(--cc-color-primary-text);
}
.cc-card--hairline,
.cc-card--feature {
  position: relative;
  border-color: transparent;
}

.cc-spinner--gradient {
  border: none;
  background: var(--cc-gradient-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: cc-spin 900ms linear infinite;
}

.cc-btn--loading {
  position: relative;
  pointer-events: none;
}
.cc-btn--loading::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  padding: 2px;
  background: var(--cc-gradient-ring);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: cc-ring-rotate 1200ms linear infinite;
}
@keyframes cc-ring-rotate {
  to {
    --cc-ring-angle: 1turn;
  }
}

.cc-split-btn {
  display: inline-flex;
}
.cc-split-btn > .cc-btn:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.cc-split-btn > .cc-btn + .cc-btn {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  padding-inline: var(--cc-space-3);
  margin-inline-start: 1px;
}

.cc-btn-group--segmented {
  display: inline-flex;
  border-radius: var(--cc-radius-pill);
  overflow: hidden;
  border: 1px solid var(--cc-color-outline-variant);
}
.cc-btn-group--segmented .cc-btn-group__item {
  padding: var(--cc-space-2) var(--cc-space-4);
  font-weight: 500;
  color: var(--cc-color-on-surface-variant);
  cursor: pointer;
  background: var(--cc-color-surface);
}
.cc-btn-group--segmented .cc-btn-group__item + .cc-btn-group__item {
  border-inline-start: 1px solid var(--cc-color-outline-variant);
}
.cc-btn-group--segmented .cc-btn-group__item:focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-focus-color);
  outline-offset: calc(-1 * var(--cc-focus-width));
}
.cc-btn-group--segmented .cc-btn-group__item[aria-pressed="true"] {
  background: var(--cc-color-primary);
  color: var(--cc-color-on-primary);
}

.cc-fab-menu {
  position: relative;
  display: inline-flex;
}
.cc-fab-menu__items {
  position: absolute;
  bottom: calc(100% + var(--cc-space-3));
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  align-items: flex-end;
}
.cc-fab-menu__items[hidden] {
  display: none;
}
.cc-fab-menu__item {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-3);
  padding: var(--cc-space-2) var(--cc-space-4);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-3);
  font-weight: 500;
  cursor: pointer;
  animation: cc-fab-item-in var(--cc-motion-dur-4) var(--cc-spring-spatial-fast) both;
}

.cc-progress--wavy {
  background: transparent;
  height: 14px;
  overflow: hidden;
}
.cc-progress--wavy .cc-progress__bar {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--cc-color-primary) 0 6px, transparent 6px 12px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 7 Q6 1 12 7 T24 7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E")
    repeat-x center / 24px 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 7 Q6 1 12 7 T24 7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E")
    repeat-x center / 24px 14px;
  animation: cc-wavy 1s linear infinite;
}
@keyframes cc-wavy {
  to {
    -webkit-mask-position: 24px center;
    mask-position: 24px center;
  }
}
@keyframes cc-fab-item-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cc-toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  padding: var(--cc-space-2);
  border-radius: var(--cc-radius-pill);
  background: var(--cc-color-surface);
  box-shadow: var(--cc-elevation-3);
}
.cc-toolbar--floating {
  position: fixed;
  bottom: calc(var(--cc-space-6) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--cc-z-fab);
}
@media (max-width: 839px) {
  .cc-toolbar--floating {
    bottom: calc(var(--cc-nav-height) + var(--cc-space-4) + env(safe-area-inset-bottom));
  }
}

[data-m3="expressive"]
  .cc-btn:not(.cc-btn--outlined):not(.cc-btn--text):not(.cc-btn--tonal):not(.cc-btn--hairline):not(.cc-btn--inverse) {
  background-image: var(--cc-gradient-btn-sheen);
}
[data-m3="expressive"] .cc-btn:active,
[data-m3="expressive"] .cc-icon-btn:active,
[data-m3="expressive"] .cc-fab:active {
  transform: scale(0.96);
}
[data-m3="expressive"] .cc-btn,
[data-m3="expressive"] .cc-icon-btn,
[data-m3="expressive"] .cc-chip {
  transition:
    transform var(--cc-motion-dur-4) var(--cc-spring-spatial-fast),
    background var(--cc-motion-dur-3) var(--cc-motion-ease-standard);
}
[data-m3="expressive"] .cc-fab {
  border-radius: var(--cc-radius-lg);
}
[data-m3="expressive"] .cc-spinner {
  border: none;
  background: var(--cc-gradient-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
[data-m3="expressive"] .cc-card--feature {
  background: var(--cc-color-surface);
}

@media (prefers-reduced-motion: reduce) {
  .cc-spinner--gradient,
  .cc-btn--loading::before,
  .cc-progress--wavy .cc-progress__bar {
    animation: none;
  }
  .cc-btn--loading::before {
    opacity: 0.9;
  }
  [data-m3="expressive"] .cc-btn:active,
  [data-m3="expressive"] .cc-icon-btn:active,
  [data-m3="expressive"] .cc-fab:active {
    transform: none;
  }
}

.cc-tap-safe {
  position: relative;
}
.cc-tap-safe::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

@media (pointer: coarse) {
  .cc-icon-btn,
  .cc-pagination__item,
  .cc-swatch,
  .cc-btn--xs,
  .cc-icon-btn--sm,
  .cc-chip,
  .cc-stepper-input__btn,
  .cc-segmented__item,
  .cc-bottom-nav__item {
    min-width: 44px;
    min-height: 44px;
  }
  .cc-checkbox,
  .cc-radio {
    min-height: 44px;
  }
  .cc-cal__day {
    min-height: 44px;
  }
  .cc-datepicker__grid button {
    display: grid;
    place-content: center;
    min-height: 44px;
  }
  .cc-toast__close,
  .cc-chip__remove,
  .cc-noti__dismiss,
  .cc-banner__close,
  .cc-tags__remove,
  .cc-mail__star {
    position: relative;
  }
  .cc-shot-thumb__remove::before,
  .cc-toast__close::before,
  .cc-chip__remove::before,
  .cc-noti__dismiss::before,
  .cc-banner__close::before,
  .cc-tags__remove::before,
  .cc-mail__star::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

.demo-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  min-height: 52px;
  padding: var(--cc-space-1) var(--cc-space-4);
  background: #1a73e8;
  color: #ffffff;
  font-size: var(--cc-type-label-lg-size);
  line-height: 1.25;
}

.demo-band__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--cc-space-3);
  border-radius: var(--cc-radius-pill);
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--cc-motion-dur-2) var(--cc-motion-ease-standard);
}

.demo-band__link--back {
  margin-inline-start: calc(var(--cc-space-3) * -1);
}

.demo-band__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-band__icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.demo-band__link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.demo-band__link:active {
  background: rgba(255, 255, 255, 0.22);
}

.demo-band__link--cta {
  flex: none;
  padding-inline: var(--cc-space-4);
  background: #ffffff;
  color: #0b57d0;
}

.demo-band__link--cta:hover {
  background: #e8f0fe;
}

.demo-band__link--cta:active {
  background: #d2e3fc;
}

.demo-band__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 479px) {
  .demo-band__pre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .demo-band__text::first-letter {
    text-transform: uppercase;
  }
}