/* Design Tokens */
/* File is autogenerated, do not edit! */
:root {
  /**
  ========================
  Primitives
  ========================
  */
  --wf-bright-cyan-100: #e1f4fd;
  --wf-bright-cyan-200: #bbeafc;
  --wf-bright-cyan-300: #80d9f9;
  --wf-bright-cyan-400: #3ec7f4;
  --wf-bright-cyan-50: #f0faff;
  --wf-bright-cyan-500: #13b0e4;
  --wf-bright-cyan-600: #068ec3;
  --wf-bright-cyan-700: #06719e;
  --wf-bright-cyan-800: #0a5f82;
  --wf-bright-cyan-900: #0e4f6c;
  --wf-bright-cyan-950: #093348;
  --wf-bright-green-100: #cdfaef;
  --wf-bright-green-200: #9bf4e1;
  --wf-bright-green-300: #4ee4c9;
  --wf-bright-green-400: #31d0b8;
  --wf-bright-green-50: #f0fdfa;
  --wf-bright-green-500: #18b49f;
  --wf-bright-green-600: #109183;
  --wf-bright-green-700: #11746a;
  --wf-bright-green-800: #135c56;
  --wf-bright-green-900: #144d48;
  --wf-bright-green-950: #052e2c;
  --wf-bright-purple-100: #f6e8ff;
  --wf-bright-purple-200: #efd4ff;
  --wf-bright-purple-300: #e2b3ff;
  --wf-bright-purple-400: #d182fe;
  --wf-bright-purple-50: #fbf5ff;
  --wf-bright-purple-500: #bf52fa;
  --wf-bright-purple-600: #a823ec;
  --wf-bright-purple-700: #961fd1;
  --wf-bright-purple-800: #7e1faa;
  --wf-bright-purple-900: #671a89;
  --wf-bright-purple-950: #480566;
  --wf-darker-0: rgba(12,17,29,0);
  --wf-darker-10: rgba(12,17,29,0.10196);
  --wf-darker-2: rgba(12,17,29,0.01961);
  --wf-darker-20: rgba(12,17,29,0.2);
  --wf-darker-30: rgba(12,17,29,0.30196);
  --wf-darker-40: rgba(12,17,29,0.4);
  --wf-darker-5: rgba(12,17,29,0.05098);
  --wf-darker-50: rgba(12,17,29,0.50196);
  --wf-darker-60: rgba(12,17,29,0.6);
  --wf-darker-70: rgba(12,17,29,0.70196);
  --wf-darker-80: rgba(12,17,29,0.8);
  --wf-darker-90: rgba(12,17,29,0.90196);
  --wf-darker-95: rgba(12,17,29,0.94902);
  --wf-deep-blue-100: #dfe4ff;
  --wf-deep-blue-200: #c5ceff;
  --wf-deep-blue-300: #a1acff;
  --wf-deep-blue-400: #7c81fd;
  --wf-deep-blue-50: #edf1ff;
  --wf-deep-blue-500: #625df7;
  --wf-deep-blue-600: #523fec;
  --wf-deep-blue-700: #4733d1;
  --wf-deep-blue-800: #382ba8;
  --wf-deep-blue-900: #332a85;
  --wf-deep-blue-950: #1f194d;
  --wf-goldenrod-100: #fff1c6;
  --wf-goldenrod-200: #ffe188;
  --wf-goldenrod-300: #ffd25f;
  --wf-goldenrod-400: #ffb720;
  --wf-goldenrod-50: #fffaeb;
  --wf-goldenrod-500: #f99407;
  --wf-goldenrod-600: #dd6d02;
  --wf-goldenrod-700: #b74b06;
  --wf-goldenrod-800: #94390c;
  --wf-goldenrod-900: #7a300d;
  --wf-goldenrod-950: #461702;
  --wf-green-100: #dcfce8;
  --wf-green-200: #bbf7d1;
  --wf-green-300: #86efad;
  --wf-green-400: #4ade80;
  --wf-green-50: #f0fdf5;
  --wf-green-500: #22c55e;
  --wf-green-600: #16a34a;
  --wf-green-700: #15803c;
  --wf-green-800: #166533;
  --wf-green-900: #14532b;
  --wf-green-950: #052e14;
  --wf-grey-black: #000000;
  --wf-grey-blue-100: #f2f4f7;
  --wf-grey-blue-200: #eaecf0;
  --wf-grey-blue-25: #fcfcfd;
  --wf-grey-blue-300: #d0d5dd;
  --wf-grey-blue-400: #98a2b3;
  --wf-grey-blue-50: #f9fafb;
  --wf-grey-blue-500: #667085;
  --wf-grey-blue-600: #475467;
  --wf-grey-blue-700: #344054;
  --wf-grey-blue-800: #182230;
  --wf-grey-blue-900: #101828;
  --wf-grey-blue-950: #0c111d;
  --wf-grey-white: #ffffff;
  --wf-grey-zinc-100: #f4f4f5;
  --wf-grey-zinc-200: #e4e4e7;
  --wf-grey-zinc-300: #d4d4d8;
  --wf-grey-zinc-400: #a1a1aa;
  --wf-grey-zinc-50: #fafafa;
  --wf-grey-zinc-500: #71717a;
  --wf-grey-zinc-600: #52525b;
  --wf-grey-zinc-700: #3f3f46;
  --wf-grey-zinc-800: #27272a;
  --wf-grey-zinc-900: #18181b;
  --wf-grey-zinc-950: #09090b;
  --wf-light-blue-100: #d9e7ff;
  --wf-light-blue-200: #bcd6ff;
  --wf-light-blue-300: #8ebdff;
  --wf-light-blue-400: #5998ff;
  --wf-light-blue-50: #eef5ff;
  --wf-light-blue-500: #2266ff;
  --wf-light-blue-600: #1b4ff5;
  --wf-light-blue-700: #143be1;
  --wf-light-blue-800: #1731b6;
  --wf-light-blue-900: #192f8f;
  --wf-light-blue-950: #141e57;
  --wf-lighter-0: rgba(255,255,255,0);
  --wf-lighter-10: rgba(255,255,255,0.10196);
  --wf-lighter-2: rgba(255,255,255,0.01961);
  --wf-lighter-20: rgba(255,255,255,0.2);
  --wf-lighter-30: rgba(255,255,255,0.30196);
  --wf-lighter-40: rgba(255,255,255,0.4);
  --wf-lighter-5: rgba(255,255,255,0.05098);
  --wf-lighter-50: rgba(255,255,255,0.50196);
  --wf-lighter-60: rgba(255,255,255,0.6);
  --wf-lighter-70: rgba(255,255,255,0.70196);
  --wf-lighter-80: rgba(255,255,255,0.8);
  --wf-lighter-90: rgba(255,255,255,0.90196);
  --wf-lighter-95: rgba(255,255,255,0.98039);
  --wf-orange-100: #ffe6d5;
  --wf-orange-200: #feccaa;
  --wf-orange-300: #fdac74;
  --wf-orange-400: #fb8a3c;
  --wf-orange-50: #fff4ed;
  --wf-orange-500: #f97316;
  --wf-orange-600: #ea670c;
  --wf-orange-700: #c2570c;
  --wf-orange-800: #9a4a12;
  --wf-orange-900: #7c3d12;
  --wf-orange-950: #432007;
  --wf-red-100: #fee2e2;
  --wf-red-200: #fecaca;
  --wf-red-300: #fca5a5;
  --wf-red-400: #f87171;
  --wf-red-50: #fef2f2;
  --wf-red-500: #ef4444;
  --wf-red-600: #dc2626;
  --wf-red-700: #b91c1c;
  --wf-red-800: #991b1b;
  --wf-red-900: #7f1d1d;
  --wf-red-950: #450a0a;

  /**
  ========================
  Color Mode
  ========================
  */
  --wf-background-accent-five: var(--wf-brand-accent-five);
  --wf-background-accent-four: var(--wf-brand-accent-four);
  --wf-background-accent-one: var(--wf-brand-accent-one);
  --wf-background-accent-six: var(--wf-brand-accent-six);
  --wf-background-accent-three: var(--wf-brand-accent-three);
  --wf-background-accent-two: var(--wf-brand-accent-two);
  --wf-background-brand-primary: var(--wf-brand-primary-500);
  --wf-background-card-document-background: var(--wf-grey-blue-200);
  --wf-background-cards: var(--wf-grey-white);
  --wf-background-feedback-destructive-default: var(--wf-red-500);
  --wf-background-feedback-destructive-disabled: var(--wf-background-quaternary);
  --wf-background-feedback-destructive-hover: var(--wf-red-600);
  --wf-background-feedback-destructive-pressed: var(--wf-red-700);
  --wf-background-feedback-error: var(--wf-red-50);
  --wf-background-feedback-error-1: var(--wf-red-200);
  --wf-background-feedback-error-2: var(--wf-red-600);
  --wf-background-feedback-info: var(--wf-bright-cyan-50);
  --wf-background-feedback-info-1: var(--wf-brand-primary-200);
  --wf-background-feedback-info-2: var(--wf-brand-primary-50);
  --wf-background-feedback-success: var(--wf-green-50);
  --wf-background-feedback-success-2: var(--wf-green-600);
  --wf-background-feedback-warning: var(--wf-orange-50);
  --wf-background-feedback-warning-2: var(--wf-orange-600);
  --wf-background-for-documents: var(--wf-grey-blue-100);
  --wf-background-interactive-hover: var(--wf-darker-5);
  --wf-background-interactive-pressed: var(--wf-darker-10);
  --wf-background-interactive-primary-default: var(--wf-brand-primary-500);
  --wf-background-interactive-primary-disabled: var(--wf-grey-blue-200);
  --wf-background-interactive-primary-focused: var(--wf-brand-primary-50);
  --wf-background-interactive-primary-hover: var(--wf-brand-primary-600);
  --wf-background-interactive-primary-pressed: var(--wf-brand-primary-800);
  --wf-background-interactive-secondary-default: var(--wf-bright-purple-500);
  --wf-background-interactive-secondary-disabled: var(--wf-bright-purple-200);
  --wf-background-interactive-secondary-hover: var(--wf-bright-purple-600);
  --wf-background-interactive-secondary-pressed: var(--wf-bright-purple-800);
  --wf-background-interactive-selected: var(--wf-darker-5);
  --wf-background-inverse-primary: var(--wf-grey-zinc-900);
  --wf-background-inverse-quaternary: var(--wf-grey-zinc-400);
  --wf-background-inverse-secondary: var(--wf-grey-zinc-800);
  --wf-background-inverse-still-primary: var(--wf-grey-blue-900);
  --wf-background-inverse-still-quinary: var(--wf-grey-white);
  --wf-background-inverse-still-secondary: var(--wf-grey-blue-700);
  --wf-background-inverse-tertiary: var(--wf-grey-zinc-600);
  --wf-background-modal: var(--wf-grey-white);
  --wf-background-modal-layer: var(--wf-lighter-0);
  --wf-background-primary: var(--wf-grey-white);
  --wf-background-quaternary: var(--wf-grey-blue-200);
  --wf-background-secondary: var(--wf-grey-blue-50);
  --wf-background-tertiary: var(--wf-grey-blue-100);
  --wf-background-utility-dim: var(--wf-darker-20);
  --wf-background-wflow-special: var(--wf-grey-blue-50);
  --wf-border-divider-primary: var(--wf-grey-blue-200);
  --wf-border-divider-secondary: var(--wf-grey-zinc-100);
  --wf-border-divider-strong: var(--wf-grey-blue-950);
  --wf-border-divider-subtle: var(--wf-grey-zinc-50);
  --wf-border-feedback-info: var(--wf-bright-cyan-400);
  --wf-border-feedback-info-2: var(--wf-brand-primary-200);
  --wf-border-feedback-red: var(--wf-red-400);
  --wf-border-feedback-success: var(--wf-green-400);
  --wf-border-feedback-warning: var(--wf-orange-400);
  --wf-border-interactive-focused: var(--wf-deep-blue-500);
  --wf-border-interactive-focused-2: var(--wf-brand-primary-500);
  --wf-border-interactive-primary-default: var(--wf-brand-primary-500);
  --wf-border-interactive-secondary-default: var(--wf-bright-purple-500);
  --wf-border-inverse-disabled: var(--wf-lighter-10);
  --wf-border-inverse-primary: var(--wf-lighter-90);
  --wf-border-inverse-quaternary: var(--wf-lighter-20);
  --wf-border-inverse-secondary: var(--wf-lighter-60);
  --wf-border-inverse-tertiary: var(--wf-lighter-40);
  --wf-border-primary: var(--wf-grey-blue-900);
  --wf-border-quaternary: var(--wf-grey-blue-200);
  --wf-border-quinary: var(--wf-grey-zinc-100);
  --wf-border-secondary: var(--wf-grey-blue-400);
  --wf-border-senary: var(--wf-grey-zinc-50);
  --wf-border-tertiary: var(--wf-grey-blue-300);
  --wf-border-utility-card: var(--wf-grey-blue-200);
  --wf-border-utility-image: var(--wf-darker-10);
  --wf-border-utility-modal: var(--wf-grey-blue-200);
  --wf-border-utility-modal-2: var(--wf-darker-5);
  --wf-border-utility-workspace-outline: var(--wf-darker-5);
  --wf-figma-page-background: var(--wf-grey-white);
  --wf-figma-page-background-2: var(--wf-grey-blue-100);
  --wf-foreground-accent-five: var(--wf-brand-accent-five);
  --wf-foreground-accent-four: var(--wf-brand-accent-four);
  --wf-foreground-accent-one: var(--wf-brand-accent-one);
  --wf-foreground-accent-six: var(--wf-brand-accent-six);
  --wf-foreground-accent-three: var(--wf-brand-accent-three);
  --wf-foreground-accent-two: var(--wf-brand-accent-two);
  --wf-foreground-feedback-error: var(--wf-red-500);
  --wf-foreground-feedback-info: var(--wf-bright-cyan-500);
  --wf-foreground-feedback-info-2: var(--wf-brand-primary-700);
  --wf-foreground-feedback-success: var(--wf-green-500);
  --wf-foreground-feedback-warning: var(--wf-orange-500);
  --wf-foreground-interactive-primary-default: var(--wf-brand-primary-500);
  --wf-foreground-interactive-primary-disabled: var(--wf-grey-blue-50);
  --wf-foreground-interactive-primary-focused: var(--wf-deep-blue-500);
  --wf-foreground-interactive-primary-hover: var(--wf-brand-primary-600);
  --wf-foreground-interactive-primary-pressed: var(--wf-brand-primary-800);
  --wf-foreground-interactive-secondary-default: var(--wf-bright-purple-500);
  --wf-foreground-interactive-secondary-disabled: var(--wf-bright-purple-200);
  --wf-foreground-interactive-secondary-hover: var(--wf-bright-purple-600);
  --wf-foreground-interactive-secondary-pressed: var(--wf-bright-purple-800);
  --wf-foreground-inverse-disabled: var(--wf-lighter-20);
  --wf-foreground-inverse-primary: var(--wf-lighter-95);
  --wf-foreground-inverse-quaternary: var(--wf-lighter-40);
  --wf-foreground-inverse-secondary: var(--wf-lighter-80);
  --wf-foreground-inverse-still-black-disabled: var(--wf-darker-20);
  --wf-foreground-inverse-still-black-primary: var(--wf-darker-95);
  --wf-foreground-inverse-still-black-quaternary: var(--wf-darker-40);
  --wf-foreground-inverse-still-black-secondary: var(--wf-darker-80);
  --wf-foreground-inverse-still-black-tertiary: var(--wf-darker-60);
  --wf-foreground-inverse-still-disabled: var(--wf-lighter-20);
  --wf-foreground-inverse-still-primary: var(--wf-lighter-95);
  --wf-foreground-inverse-still-quaternary: var(--wf-lighter-40);
  --wf-foreground-inverse-still-secondary: var(--wf-lighter-80);
  --wf-foreground-inverse-still-tertiary: var(--wf-lighter-60);
  --wf-foreground-inverse-tertiary: var(--wf-lighter-60);
  --wf-foreground-primary: var(--wf-grey-blue-900);
  --wf-foreground-quaternary: var(--wf-grey-blue-300);
  --wf-foreground-quinary: var(--wf-grey-blue-200);
  --wf-foreground-secondary: var(--wf-grey-blue-700);
  --wf-foreground-senary: var(--wf-grey-blue-50);
  --wf-foreground-tertiary: var(--wf-grey-blue-500);
  --wf-foreground-toggle-button: var(--wf-grey-white);
  --wf-foreground-toggle-button-disabled: var(--wf-grey-blue-50);
  --wf-layout-guides: rgba(255,0,0,0.07843);
  --wf-mobile-app-bg-primary: var(--wf-grey-white);
  --wf-notes-background: var(--wf-grey-blue-100);
  --wf-notes-outline: var(--wf-darker-5);
  --wf-section-background: var(--wf-grey-blue-100);
  --wf-section-background-2: var(--wf-grey-white);
  --wf-section-background-3: var(--wf-grey-zinc-100);
  --wf-section-outline: var(--wf-darker-10);
  --wf-system-interface: var(--wf-grey-black);
  --wf-system-interface-inverse: var(--wf-grey-white);
  --wf-utility-visibility-in-dark: 0;
  --wf-utility-visibility-in-light: 1;

  /**
  ========================
  Metrics
  ========================
  */
  --wf-border-icon-lg: 2.3299999237060547px;
  --wf-border-icon-md: 1.6699999570846558px;
  --wf-border-icon-sm: 1.3300000429153442px;
  --wf-border-width-2xl: 3px;
  --wf-border-width-lg: 2px;
  --wf-border-width-md: 1.5px;
  --wf-border-width-none: 0px;
  --wf-border-width-sm: 1px;
  --wf-border-width-xl: 2.5px;
  --wf-border-width-xs: 0.5px;
  --wf-gaps-goes-here: var(--wf-spacer-lg);
  --wf-round-corner-2xl: 24px;
  --wf-round-corner-2xs: 4px;
  --wf-round-corner-3xl: 28px;
  --wf-round-corner-3xs: 2px;
  --wf-round-corner-circle: 1000px;
  --wf-round-corner-l: 16px;
  --wf-round-corner-m: 12px;
  --wf-round-corner-none: 0px;
  --wf-round-corner-s: 8px;
  --wf-round-corner-xl: 20px;
  --wf-round-corner-xs: 6px;
  --wf-screen-corners-control: 12px;
  --wf-spacer-2xl: 24px;
  --wf-spacer-2xs: 4px;
  --wf-spacer-3xl: 32px;
  --wf-spacer-3xs: 2px;
  --wf-spacer-4xl: 40px;
  --wf-spacer-5xl: 48px;
  --wf-spacer-6xl: 64px;
  --wf-spacer-7xl: 80px;
  --wf-spacer-lg: 16px;
  --wf-spacer-md: 12px;
  --wf-spacer-none: 0px;
  --wf-spacer-sm: 8px;
  --wf-spacer-xl: 20px;
  --wf-spacer-xs: 6px;

  /**
  ========================
  Brand
  ========================
  */
  --wf-brand-accent-five: var(--wf-deep-blue-700);
  --wf-brand-accent-four: var(--wf-light-blue-500);
  --wf-brand-accent-one: var(--wf-goldenrod-300);
  --wf-brand-accent-six: var(--wf-bright-purple-600);
  --wf-brand-accent-three: var(--wf-bright-cyan-400);
  --wf-brand-accent-two: var(--wf-bright-green-300);
  --wf-brand-primary-100: var(--wf-light-blue-100);
  --wf-brand-primary-200: var(--wf-light-blue-200);
  --wf-brand-primary-300: var(--wf-light-blue-300);
  --wf-brand-primary-400: var(--wf-light-blue-400);
  --wf-brand-primary-50: var(--wf-light-blue-50);
  --wf-brand-primary-500: var(--wf-light-blue-500);
  --wf-brand-primary-600: var(--wf-light-blue-600);
  --wf-brand-primary-700: var(--wf-light-blue-700);
  --wf-brand-primary-800: var(--wf-light-blue-800);
  --wf-brand-primary-900: var(--wf-light-blue-900);
  --wf-brand-primary-950: var(--wf-light-blue-950);
  --wf-company-name: 'Workflow';
  --wf-show-for-layers: 0;
  --wf-show-for-workflow: 1;

  /**
  ========================
  Typography
  ========================
  */
  --wf-2xl-font-size: 2.4rem;
  --wf-2xl-letter-spacing: 0rem;
  --wf-2xl-line-height: 130%;
  --wf-2xs-font-size: 1.1rem;
  --wf-2xs-letter-spacing: 0.011rem;
  --wf-2xs-line-height: 140%;
  --wf-3xl-font-size: 2.8rem;
  --wf-3xl-letter-spacing: -0.056rem;
  --wf-3xl-line-height: 110%;
  --wf-4xl-font-size: 3.2rem;
  --wf-4xl-letter-spacing: -0.064rem;
  --wf-4xl-line-height: 110%;
  --wf-5xl-font-size: 4rem;
  --wf-5xl-letter-spacing: -0.08rem;
  --wf-5xl-line-height: 110%;
  --wf-6xl-font-size: 4.8rem;
  --wf-6xl-letter-spacing: -0.096rem;
  --wf-6xl-line-height: 110%;
  --wf-7xl-font-size: 5.6rem;
  --wf-7xl-letter-spacing: -0.112rem;
  --wf-7xl-line-height: 110%;
  --wf-8xl-font-size: 6.4rem;
  --wf-8xl-letter-spacing: -0.128rem;
  --wf-8xl-line-height: 110%;
  --wf-9xl-font-size: 8rem;
  --wf-9xl-letter-spacing: -0.16rem;
  --wf-9xl-line-height: 110%;
  --wf-base-font-size: 1.6rem;
  --wf-base-letter-spacing: 0rem;
  --wf-base-line-height: 160%;
  --wf-font-weight-demibold: 600;
  --wf-font-weight-medium: 500;
  --wf-font-weight-regular: 400;
  --wf-lg-font-size: 1.8rem;
  --wf-lg-letter-spacing: 0rem;
  --wf-lg-line-height: 160%;
  --wf-sm-font-size: 1.4rem;
  --wf-sm-letter-spacing: 0.007rem;
  --wf-sm-line-height: 160%;
  --wf-utility-button-base-font-size: 1.6rem;
  --wf-utility-button-base-letter-spacing: 0rem;
  --wf-utility-button-base-line-height: 2.4rem;
  --wf-utility-button-lg-font-size: 1.8rem;
  --wf-utility-button-lg-letter-spacing: 0rem;
  --wf-utility-button-lg-line-height: 2.8rem;
  --wf-utility-button-sm-font-size: 1.4rem;
  --wf-utility-button-sm-letter-spacing: 0.007rem;
  --wf-utility-button-sm-line-height: 2rem;
  --wf-utility-button-xs-font-size: 1.2rem;
  --wf-utility-button-xs-letter-spacing: 0.012rem;
  --wf-utility-button-xs-line-height: 1.6rem;
  --wf-utility-font-size: 1.2rem;
  --wf-utility-label-font-size: 1rem;
  --wf-utility-label-letter-spacing: 0.08rem;
  --wf-utility-label-line-height: 100%;
  --wf-utility-letter-spacing: 0.072rem;
  --wf-utility-line-height: 130%;
  --wf-utility-link-base-font-size: 1.6rem;
  --wf-utility-link-base-letter-spacing: 0rem;
  --wf-utility-link-base-line-height: 160%;
  --wf-utility-link-sm-font-size: 1.4rem;
  --wf-utility-link-sm-letter-spacing: 0rem;
  --wf-utility-link-sm-line-height: 160%;
  --wf-xl-font-size: 2rem;
  --wf-xl-letter-spacing: 0rem;
  --wf-xl-line-height: 160%;
  --wf-xs-font-size: 1.2rem;
  --wf-xs-letter-spacing: 0.012rem;
  --wf-xs-line-height: 140%;

  /**
  ========================
  Effects
  ========================
  */
  --wf-shadow-2xl: 0px 8px 8px -4px rgba(12, 17, 29, 0.03), 0px 20px 24px -4px rgba(12, 17, 29, 0.08);
  --wf-shadow-3xl: 0px 24px 48px -12px rgba(12, 17, 29, 0.18);
  --wf-shadow-4xl: 0px 32px 64px -12px rgba(12, 17, 29, 0.14);
  --wf-shadow-lg: 0px 4px 6px -2px rgba(12, 17, 29, 0.03), 0px 12px 16px -4px rgba(12, 17, 29, 0.08);
  --wf-shadow-md: 0px 2px 4px -2px rgba(12, 17, 29, 0.06), 0px 4px 8px -2px rgba(12, 17, 29, 0.1);
  --wf-shadow-sm: 0px 1px 2px 0px rgba(12, 17, 29, 0.06), 0px 1px 3px 0px rgba(12, 17, 29, 0.1);
  --wf-shadow-xl: 0px 8px 8px -4px rgba(12, 17, 29, 0.03), 0px 20px 24px -4px rgba(12, 17, 29, 0.08);
  --wf-shadow-xs: 0px 1px 2px 0px rgba(12, 17, 29, 0.05);
}
[wf-color-mode='dark'] {
  /**
  ========================
  Color Mode
  ========================
  */
  --wf-background-accent-five: var(--wf-brand-accent-five);
  --wf-background-accent-four: var(--wf-brand-accent-four);
  --wf-background-accent-one: var(--wf-brand-accent-one);
  --wf-background-accent-six: var(--wf-brand-accent-six);
  --wf-background-accent-three: var(--wf-brand-accent-three);
  --wf-background-accent-two: var(--wf-brand-accent-two);
  --wf-background-brand-primary: var(--wf-brand-primary-500);
  --wf-background-card-document-background: var(--wf-grey-blue-800);
  --wf-background-cards: var(--wf-grey-zinc-800);
  --wf-background-feedback-destructive-default: var(--wf-red-500);
  --wf-background-feedback-destructive-disabled: var(--wf-background-quaternary);
  --wf-background-feedback-destructive-hover: var(--wf-red-400);
  --wf-background-feedback-destructive-pressed: var(--wf-red-300);
  --wf-background-feedback-error: var(--wf-red-950);
  --wf-background-feedback-error-1: var(--wf-red-900);
  --wf-background-feedback-error-2: var(--wf-red-500);
  --wf-background-feedback-info: var(--wf-bright-cyan-950);
  --wf-background-feedback-info-1: var(--wf-brand-primary-800);
  --wf-background-feedback-info-2: var(--wf-brand-primary-950);
  --wf-background-feedback-success: var(--wf-green-950);
  --wf-background-feedback-success-2: var(--wf-green-600);
  --wf-background-feedback-warning: var(--wf-orange-950);
  --wf-background-feedback-warning-2: var(--wf-orange-600);
  --wf-background-for-documents: var(--wf-grey-zinc-900);
  --wf-background-interactive-hover: var(--wf-lighter-5);
  --wf-background-interactive-pressed: var(--wf-lighter-10);
  --wf-background-interactive-primary-default: var(--wf-brand-primary-500);
  --wf-background-interactive-primary-disabled: var(--wf-grey-zinc-700);
  --wf-background-interactive-primary-focused: var(--wf-brand-primary-950);
  --wf-background-interactive-primary-hover: var(--wf-brand-primary-400);
  --wf-background-interactive-primary-pressed: var(--wf-brand-primary-300);
  --wf-background-interactive-secondary-default: var(--wf-bright-purple-500);
  --wf-background-interactive-secondary-disabled: var(--wf-bright-purple-900);
  --wf-background-interactive-secondary-hover: var(--wf-bright-purple-500);
  --wf-background-interactive-secondary-pressed: var(--wf-bright-purple-700);
  --wf-background-interactive-selected: var(--wf-lighter-5);
  --wf-background-inverse-primary: var(--wf-grey-zinc-100);
  --wf-background-inverse-quaternary: var(--wf-grey-zinc-700);
  --wf-background-inverse-secondary: var(--wf-grey-zinc-300);
  --wf-background-inverse-still-primary: var(--wf-grey-zinc-900);
  --wf-background-inverse-still-quinary: var(--wf-grey-white);
  --wf-background-inverse-still-secondary: var(--wf-grey-zinc-700);
  --wf-background-inverse-tertiary: var(--wf-grey-zinc-500);
  --wf-background-modal: var(--wf-grey-zinc-800);
  --wf-background-modal-layer: var(--wf-lighter-10);
  --wf-background-primary: var(--wf-grey-zinc-900);
  --wf-background-quaternary: var(--wf-grey-zinc-600);
  --wf-background-secondary: var(--wf-grey-zinc-800);
  --wf-background-tertiary: var(--wf-grey-zinc-700);
  --wf-background-utility-dim: var(--wf-lighter-20);
  --wf-background-wflow-special: var(--wf-grey-zinc-900);
  --wf-border-divider-primary: var(--wf-grey-zinc-700);
  --wf-border-divider-secondary: var(--wf-grey-zinc-800);
  --wf-border-divider-strong: var(--wf-grey-zinc-100);
  --wf-border-divider-subtle: var(--wf-grey-zinc-800);
  --wf-border-feedback-info: var(--wf-bright-cyan-600);
  --wf-border-feedback-info-2: var(--wf-brand-primary-800);
  --wf-border-feedback-red: var(--wf-red-600);
  --wf-border-feedback-success: var(--wf-green-600);
  --wf-border-feedback-warning: var(--wf-orange-600);
  --wf-border-interactive-focused: var(--wf-deep-blue-500);
  --wf-border-interactive-focused-2: var(--wf-brand-primary-500);
  --wf-border-interactive-primary-default: var(--wf-brand-primary-500);
  --wf-border-interactive-secondary-default: var(--wf-bright-purple-500);
  --wf-border-inverse-disabled: var(--wf-darker-10);
  --wf-border-inverse-primary: var(--wf-darker-90);
  --wf-border-inverse-quaternary: var(--wf-darker-20);
  --wf-border-inverse-secondary: var(--wf-darker-60);
  --wf-border-inverse-tertiary: var(--wf-darker-40);
  --wf-border-primary: var(--wf-grey-zinc-100);
  --wf-border-quaternary: var(--wf-grey-zinc-700);
  --wf-border-quinary: var(--wf-grey-zinc-800);
  --wf-border-secondary: var(--wf-grey-zinc-500);
  --wf-border-senary: var(--wf-grey-zinc-900);
  --wf-border-tertiary: var(--wf-grey-zinc-600);
  --wf-border-utility-card: var(--wf-grey-zinc-700);
  --wf-border-utility-image: var(--wf-lighter-20);
  --wf-border-utility-modal: var(--wf-grey-zinc-700);
  --wf-border-utility-modal-2: var(--wf-lighter-5);
  --wf-border-utility-workspace-outline: var(--wf-lighter-5);
  --wf-figma-page-background: #2c2c2c;
  --wf-figma-page-background-2: #2c2c2c;
  --wf-foreground-accent-five: var(--wf-brand-accent-five);
  --wf-foreground-accent-four: var(--wf-brand-accent-four);
  --wf-foreground-accent-one: var(--wf-brand-accent-one);
  --wf-foreground-accent-six: var(--wf-brand-accent-six);
  --wf-foreground-accent-three: var(--wf-brand-accent-three);
  --wf-foreground-accent-two: var(--wf-brand-accent-two);
  --wf-foreground-feedback-error: var(--wf-red-400);
  --wf-foreground-feedback-info: var(--wf-bright-cyan-400);
  --wf-foreground-feedback-info-2: var(--wf-brand-primary-300);
  --wf-foreground-feedback-success: var(--wf-green-400);
  --wf-foreground-feedback-warning: var(--wf-orange-400);
  --wf-foreground-interactive-primary-default: var(--wf-brand-primary-400);
  --wf-foreground-interactive-primary-disabled: var(--wf-grey-zinc-500);
  --wf-foreground-interactive-primary-focused: var(--wf-deep-blue-500);
  --wf-foreground-interactive-primary-hover: var(--wf-brand-primary-500);
  --wf-foreground-interactive-primary-pressed: var(--wf-brand-primary-700);
  --wf-foreground-interactive-secondary-default: var(--wf-bright-purple-500);
  --wf-foreground-interactive-secondary-disabled: var(--wf-bright-purple-900);
  --wf-foreground-interactive-secondary-hover: var(--wf-bright-purple-500);
  --wf-foreground-interactive-secondary-pressed: var(--wf-bright-purple-700);
  --wf-foreground-inverse-disabled: var(--wf-darker-20);
  --wf-foreground-inverse-primary: var(--wf-darker-95);
  --wf-foreground-inverse-quaternary: var(--wf-darker-30);
  --wf-foreground-inverse-secondary: var(--wf-darker-70);
  --wf-foreground-inverse-still-black-disabled: var(--wf-darker-20);
  --wf-foreground-inverse-still-black-primary: var(--wf-darker-95);
  --wf-foreground-inverse-still-black-quaternary: var(--wf-darker-40);
  --wf-foreground-inverse-still-black-secondary: var(--wf-darker-80);
  --wf-foreground-inverse-still-black-tertiary: var(--wf-darker-60);
  --wf-foreground-inverse-still-disabled: var(--wf-lighter-20);
  --wf-foreground-inverse-still-primary: var(--wf-lighter-95);
  --wf-foreground-inverse-still-quaternary: var(--wf-lighter-40);
  --wf-foreground-inverse-still-secondary: var(--wf-lighter-80);
  --wf-foreground-inverse-still-tertiary: var(--wf-lighter-60);
  --wf-foreground-inverse-tertiary: var(--wf-darker-50);
  --wf-foreground-primary: var(--wf-grey-zinc-100);
  --wf-foreground-quaternary: var(--wf-grey-zinc-500);
  --wf-foreground-quinary: var(--wf-grey-zinc-700);
  --wf-foreground-secondary: var(--wf-grey-zinc-300);
  --wf-foreground-senary: var(--wf-grey-zinc-500);
  --wf-foreground-tertiary: var(--wf-grey-zinc-400);
  --wf-foreground-toggle-button: var(--wf-grey-blue-100);
  --wf-foreground-toggle-button-disabled: var(--wf-grey-zinc-500);
  --wf-layout-guides: rgba(255,0,0,0.16078);
  --wf-mobile-app-bg-primary: var(--wf-grey-zinc-950);
  --wf-notes-background: var(--wf-grey-blue-900);
  --wf-notes-outline: var(--wf-lighter-5);
  --wf-section-background: #1e1e1e;
  --wf-section-background-2: var(--wf-grey-black);
  --wf-section-background-3: var(--wf-grey-zinc-800);
  --wf-section-outline: var(--wf-lighter-10);
  --wf-system-interface: var(--wf-grey-white);
  --wf-system-interface-inverse: var(--wf-grey-black);
  --wf-utility-visibility-in-dark: 1;
  --wf-utility-visibility-in-light: 0;

  /**
  ========================
  Effects
  ========================
  */
  --wf-shadow-2xl: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-3xl: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-4xl: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-lg: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-md: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-sm: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-xl: 0 0 0 0 var(--wf-background-primary);
  --wf-shadow-xs: 0 0 0 0 var(--wf-background-primary);
}
[wf-brand='layers'] {
  /**
  ========================
  Brand
  ========================
  */
  --wf-brand-accent-five: var(--wf-deep-blue-700);
  --wf-brand-accent-four: var(--wf-light-blue-500);
  --wf-brand-accent-one: var(--wf-goldenrod-300);
  --wf-brand-accent-six: var(--wf-bright-purple-600);
  --wf-brand-accent-three: var(--wf-bright-cyan-400);
  --wf-brand-accent-two: var(--wf-bright-green-300);
  --wf-brand-primary-100: var(--wf-bright-purple-100);
  --wf-brand-primary-200: var(--wf-bright-purple-200);
  --wf-brand-primary-300: var(--wf-bright-purple-300);
  --wf-brand-primary-400: var(--wf-bright-purple-400);
  --wf-brand-primary-50: var(--wf-bright-purple-50);
  --wf-brand-primary-500: var(--wf-bright-purple-500);
  --wf-brand-primary-600: var(--wf-bright-purple-600);
  --wf-brand-primary-700: var(--wf-bright-purple-700);
  --wf-brand-primary-800: var(--wf-bright-purple-800);
  --wf-brand-primary-900: var(--wf-bright-purple-900);
  --wf-brand-primary-950: var(--wf-bright-purple-950);
  --wf-company-name: 'Layers';
  --wf-show-for-layers: 1;
  --wf-show-for-workflow: 0;
}
:root {
  --primary: hsl(216, 85%, 34%);
  --primary-A700: hsl(224, 100%, 58%);
  --primary-900: hsl(224, 100%, 70%);
  --primary-1200: hsl(224, 100%, 90%);
  --primary-1900: hsl(225, 100%, 96%);
  --red: hsl(4, 90%, 58%);
  --orange: hsl(36, 100%, 50%);
  --green: hsl(122, 39%, 49%);
  --yellow: hsl(47, 100%, 50%);
  --black: hsl(0, 0%, 0%);
  --grey-10: hsl(0, 0%, 10%);
  --grey-15: hsl(0, 0%, 15%);
  --grey-20: hsl(0, 0%, 20%);
  --grey-25: hsl(0, 0%, 25%);
  --grey-30: hsl(0, 0%, 30%);
  --grey-35: hsl(0, 0%, 35%);
  --grey-40: hsl(0, 0%, 40%);
  --grey-45: hsl(0, 0%, 45%);
  --grey-50: hsl(0, 0%, 50%);
  --grey-55: hsl(0, 0%, 55%);
  --grey-60: hsl(0, 0%, 60%);
  --grey-65: hsl(0, 0%, 65%);
  --grey-70: hsl(0, 0%, 70%);
  --grey-75: hsl(0, 0%, 75%);
  --grey-80: hsl(0, 0%, 80%);
  --grey-85: hsl(0, 0%, 85%);
  --grey-90: hsl(0, 0%, 90%);
  --grey-95: hsl(0, 0%, 95%);
  --light: hsl(0, 0%, 98%);
  --white: hsl(0, 0%, 100%);
}
/* Base styles */
/* Icon component */
.icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  line-height: 1;
}
.icon__svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Target specific icons by name: .icon__svg--user-01, .icon__svg--check, etc. */
/* Icon size modifiers */
.icon--sm {
  font-size: 16px;
}
.icon--md {
  font-size: 24px;
}
.icon--lg {
  font-size: 32px;
}
.icon--xl {
  font-size: 48px;
}
/* Icon error state */
.icon--error {
  color: hsl(4, 90%, 58%);
  color: var(--red, #ff3834);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Global body styles */
body {
  background-color: transparent;
}
@media (max-width: 767px) {
  .menu {
    text-align: center;
  }

  .menu-logo {
    font-size: 1.2em;
  }

  .menu-item {
    display: none;
  }

  .welcome-block h1 {
    font-size: 2em;
  }
}
@media (min-width: 768px) {
  .menu-item {
    display: block;
  }

  .menu-button {
    display: none;
  }
}
.gravatar-image {
  max-width: none;
}
.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
.welcome-block {
  max-width: 700px;
}
.logo,
.logo:hover {
  color: black;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.mw-100 {
  width: 100%;
}
.flex-box-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-box {
  background-color: #f1f1f1;
  height: auto;
  max-width: 440px;
  width: 100%;
  min-width: 320px;
  min-height: 338px;
  overflow: hidden;
}
.form-inline {
  gap: 4px;
}
/* Margin utility classes */
.col-m-5 { margin: 5px; }
.col-m-10 { margin: 10px; }
.col-m-15 { margin: 15px; }
.col-m-20 { margin: 20px; }
.col-m-25 { margin: 25px; }
.col-m-30 { margin: 30px; }
.col-m-35 { margin: 35px; }
.col-m-40 { margin: 40px; }
.col-m-45 { margin: 45px; }
.col-m-50 { margin: 50px; }
.col-m-b-5 { margin-bottom: 5px; }
.col-m-b-10 { margin-bottom: 10px; }
.col-m-b-15 { margin-bottom: 15px; }
.col-m-b-20 { margin-bottom: 20px; }
.col-m-b-25 { margin-bottom: 25px; }
.col-m-b-30 { margin-bottom: 30px; }
.col-m-b-35 { margin-bottom: 35px; }
.col-m-b-40 { margin-bottom: 40px; }
.col-m-b-45 { margin-bottom: 45px; }
.col-m-b-50 { margin-bottom: 50px; }
.col-m-t-5 { margin-top: 5px; }
.col-m-t-10 { margin-top: 10px; }
.col-m-t-15 { margin-top: 15px; }
.col-m-t-20 { margin-top: 20px; }
.col-m-t-25 { margin-top: 25px; }
.col-m-t-30 { margin-top: 30px; }
.col-m-t-35 { margin-top: 35px; }
.col-m-t-40 { margin-top: 40px; }
.col-m-t-45 { margin-top: 45px; }
.col-m-t-50 { margin-top: 50px; }
.col-m-l-5 { margin-left: 5px; }
.col-m-l-10 { margin-left: 10px; }
.col-m-l-15 { margin-left: 15px; }
.col-m-l-20 { margin-left: 20px; }
.col-m-l-25 { margin-left: 25px; }
.col-m-l-30 { margin-left: 30px; }
.col-m-l-35 { margin-left: 35px; }
.col-m-l-40 { margin-left: 40px; }
.col-m-l-45 { margin-left: 45px; }
.col-m-l-50 { margin-left: 50px; }
.col-m-r-5 { margin-right: 5px; }
.col-m-r-10 { margin-right: 10px; }
.col-m-r-15 { margin-right: 15px; }
.col-m-r-20 { margin-right: 20px; }
.col-m-r-25 { margin-right: 25px; }
.col-m-r-30 { margin-right: 30px; }
.col-m-r-35 { margin-right: 35px; }
.col-m-r-40 { margin-right: 40px; }
.col-m-r-45 { margin-right: 45px; }
.col-m-r-50 { margin-right: 50px; }
/* Padding utility classes */
.col-p-5 { padding: 5px; }
.col-p-10 { padding: 10px; }
.col-p-15 { padding: 15px; }
.col-p-20 { padding: 20px; }
.col-p-25 { padding: 25px; }
.col-p-30 { padding: 30px; }
.col-p-35 { padding: 35px; }
.col-p-40 { padding: 40px; }
.col-p-45 { padding: 45px; }
.col-p-50 { padding: 50px; }
.col-p-b-5 { padding-bottom: 5px; }
.col-p-b-10 { padding-bottom: 10px; }
.col-p-b-15 { padding-bottom: 15px; }
.col-p-b-20 { padding-bottom: 20px; }
.col-p-b-25 { padding-bottom: 25px; }
.col-p-b-30 { padding-bottom: 30px; }
.col-p-b-35 { padding-bottom: 35px; }
.col-p-b-40 { padding-bottom: 40px; }
.col-p-b-45 { padding-bottom: 45px; }
.col-p-b-50 { padding-bottom: 50px; }
.col-p-t-5 { padding-top: 5px; }
.col-p-t-10 { padding-top: 10px; }
.col-p-t-15 { padding-top: 15px; }
.col-p-t-20 { padding-top: 20px; }
.col-p-t-25 { padding-top: 25px; }
.col-p-t-30 { padding-top: 30px; }
.col-p-t-35 { padding-top: 35px; }
.col-p-t-40 { padding-top: 40px; }
.col-p-t-45 { padding-top: 45px; }
.col-p-t-50 { padding-top: 50px; }
.col-p-l-5 { padding-left: 5px; }
.col-p-l-10 { padding-left: 10px; }
.col-p-l-15 { padding-left: 15px; }
.col-p-l-20 { padding-left: 20px; }
.col-p-l-25 { padding-left: 25px; }
.col-p-l-30 { padding-left: 30px; }
.col-p-l-35 { padding-left: 35px; }
.col-p-l-40 { padding-left: 40px; }
.col-p-l-45 { padding-left: 45px; }
.col-p-l-50 { padding-left: 50px; }
.col-p-r-5 { padding-right: 5px; }
.col-p-r-10 { padding-right: 10px; }
.col-p-r-15 { padding-right: 15px; }
.col-p-r-20 { padding-right: 20px; }
.col-p-r-25 { padding-right: 25px; }
.col-p-r-30 { padding-right: 30px; }
.col-p-r-35 { padding-right: 35px; }
.col-p-r-40 { padding-right: 40px; }
.col-p-r-45 { padding-right: 45px; }
.col-p-r-50 { padding-right: 50px; }
.col-form-label {
  text-align: right;
  font-weight: bold;
}
@media (max-width: 575px) {
  .col-form-label {
    text-align: left;
  }
}
/* Navbar */
.navbar-brand > img {
  max-height: 31px;
}
.navbar-brand.logo {
  padding: 10px 10px;
}
.navbar-brand-image-mobile {
  display: none;
}
@media (max-width: 767px) {
  .navbar-brand-image {
    display: none;
  }

  .navbar-brand-image-mobile {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Checkbox */
.switch {
  display: inline-block;
  height: 28px;
  position: relative;
  width: 60px;
  margin-top: 5px;
}
.switch input {
  display: none;
}
.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 20px;
  left: 7px;
  position: absolute;
  transition: .4s;
  width: 20px;
}
input:checked + .slider {
  background-color: #007bff;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/* Radio */
label.radio-img > input {
  visibility: hidden;
  position: absolute;
}
label.radio-img > input + img {
  cursor: pointer;
  border: 2px solid transparent;
}
label.radio-img > input:checked + img {
  background-color: #ffe7ac;
  border-radius: 15px;
}
label.radio-img > input:checked ~ h3,
label.radio-img > input:checked ~ h4 {
  color: #007bff;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
label.radio-img > h3,
label > h4 {
  cursor: pointer;
}
/* Picker */
.picker hr {
  margin-bottom: 5px;
}
.picker .button__add {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  white-space: normal;
  text-transform: none;
}
.picker .button__delete {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  white-space: normal;
  text-transform: none;
}
.picker .button__show-all {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  white-space: normal;
  text-transform: none;
}
.picker .block__buttons__add {
  margin-top: 4px;
}
.picker .search-title {
  color: gray;
  font-size: 12px;
}
/* Toastr */
#toast-container > div {
  opacity: 1;
  filter: alpha(opacity=100);
}
/* Validation Summary */
.validation-summary-errors {
  color: #ff3834;
  border: 1px solid #ffd3d3;
  background: none;
  padding-top: 9px;
  border-radius: 4px;
  margin-bottom: 15px;
  margin-top: 20px;
}
.client {
}
.client .action-butons {
  margin: 20px 0 20px 0;
}
img.logo {
  width: 150px !important;
  margin-right: 24px !important;
  padding-bottom: 10px !important;
}
/* Auth Pages (new design) */
/**
 * Auth Page Layout
 * Split layout matching the logout page pattern
 */
.info-page {
  min-height: 100vh;
  min-height: 100dvh;
}
.auth-page {
  display: block;
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  min-height: 100vh;
  min-height: 100dvh;
}
.auth-page__content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  padding: var(--wf-spacer-2xl);
  margin-right: 390px;
}
.auth-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  gap: var(--wf-spacer-2xl);
  width: 100%;
  max-width: 400px;
}
.auth-page__logo {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border-radius: var(--wf-round-corner-m);
}
.auth-page__text-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  gap: var(--wf-spacer-md);
  text-align: center;
}
.auth-page__image-container {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #2266ff;
  background-color: var(--wf-background-interactive-primary-default);
  height: 100vh;
  height: 100dvh;
  width: 390px;
  overflow: hidden;
  z-index: 0;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  pointer-events: none;
}
.auth-page__image-container img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  padding: 0;

  /* Prevent selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  /* Prevent dragging */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* Footer section */
.auth-page__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  gap: var(--wf-spacer-lg);
  width: 100%;
  margin-top: 16px;
  margin-top: var(--wf-spacer-lg);
}
.auth-page__legal {
  font-size: 1.2rem;
  font-size: var(--wf-xs-font-size);
  line-height: 140%;
  line-height: var(--wf-xs-line-height);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  text-align: center;
}
.auth-page__legal a {
  color: #667085;
  color: var(--wf-foreground-tertiary);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  transition: color 150ms ease-out;
}
.auth-page__legal a:hover {
  color: #344054;
  color: var(--wf-foreground-secondary);
}
/* ========================
   Error Page
   ======================== */
.error-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  gap: var(--wf-spacer-lg);
  text-align: center;
}
.error-page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #fef2f2;
  background-color: var(--wf-background-feedback-error);
  color: #ef4444;
  color: var(--wf-foreground-feedback-error);
}
.error-page__icon .icon {
  font-size: 32px;
}
.error-page__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  width: 100%;
  max-width: 400px;
  padding: 12px;
  padding: var(--wf-spacer-md);
  background-color: #f9fafb;
  background-color: var(--wf-background-secondary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  text-align: left;
}
.error-page__detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  gap: var(--wf-spacer-xs);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
}
.error-page__detail-label {
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.error-page__detail-value {
  font-family: monospace;
  font-size: 1.2rem;
  font-size: var(--wf-xs-font-size);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  word-break: break-all;
}
.error-page__message {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
}
.error-page__message code {
  font-family: monospace;
  font-size: 1.2rem;
  font-size: var(--wf-xs-font-size);
  color: #ef4444;
  color: var(--wf-foreground-feedback-error);
  word-break: break-word;
}
/* Responsive */
@media (max-width: 900px) {
  .auth-page__content-container {
    padding: 24px;
    padding: var(--wf-spacer-2xl);
    margin-right: 0;
  }

  .auth-page__content {
    max-width: 400px;
    width: 100%;
  }

  .auth-page__image-container {
    display: none;
  }
}
@media (max-width: 480px) {
  .auth-page__content {
    gap: 20px;
    gap: var(--wf-spacer-xl);
    max-width: 100%;
  }
}
/**
 * Auth Components
 * Form elements, buttons, links for auth pages
 */
/* ========================
   Typography Utility Classes
   ======================== */
.wf-text-3xl-demibold {
  font-size: 2.8rem;
  font-size: var(--wf-3xl-font-size);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
  line-height: 110%;
  line-height: var(--wf-3xl-line-height);
  letter-spacing: -0.056rem;
  letter-spacing: var(--wf-3xl-letter-spacing);
  color: #101828;
  color: var(--wf-foreground-primary);
}
.wf-text-2xl-demibold {
  font-size: 2.4rem;
  font-size: var(--wf-2xl-font-size);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
  line-height: 130%;
  line-height: var(--wf-2xl-line-height);
  letter-spacing: 0rem;
  letter-spacing: var(--wf-2xl-letter-spacing);
  color: #101828;
  color: var(--wf-foreground-primary);
}
.wf-text-base-regular {
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  font-weight: 400;
  font-weight: var(--wf-font-weight-regular);
  line-height: 160%;
  line-height: var(--wf-base-line-height);
  letter-spacing: 0rem;
  letter-spacing: var(--wf-base-letter-spacing);
  color: #101828;
  color: var(--wf-foreground-primary);
}
.wf-text-sm-medium {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  letter-spacing: 0.007rem;
  letter-spacing: var(--wf-sm-letter-spacing);
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.wf-text-xs-regular {
  font-size: 1.2rem;
  font-size: var(--wf-xs-font-size);
  font-weight: 400;
  font-weight: var(--wf-font-weight-regular);
  line-height: 140%;
  line-height: var(--wf-xs-line-height);
  letter-spacing: 0.012rem;
  letter-spacing: var(--wf-xs-letter-spacing);
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
/* ========================
   Form Container
   ======================== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  gap: var(--wf-spacer-2xs);
  width: 100%;
  max-width: 400px;
}
.auth-form--login {
  gap: 12px;
  gap: var(--wf-spacer-md);
}
/* ========================
   Form Field
   ======================== */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  gap: var(--wf-spacer-2xs);
  width: 100%;
}
.auth-field__label {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
  margin: 0;
}
.auth-field__hint {
  display: flex;
  justify-content: flex-end;
}
.auth-field__hint .auth-link {
  color: #667085;
  color: var(--wf-foreground-tertiary);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
/* ========================
   Text Input
   ======================== */
.auth-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  padding: 0 var(--wf-spacer-md);
  font-family: inherit;
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  font-weight: 400;
  font-weight: var(--wf-font-weight-regular);
  line-height: 160%;
  line-height: var(--wf-base-line-height);
  color: #101828;
  color: var(--wf-foreground-primary);
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.auth-input::-moz-placeholder {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
.auth-input::placeholder {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
.auth-input:hover {
  border-color: #98a2b3;
  border-color: var(--wf-border-secondary);
}
.auth-input:focus {
  border-color: #625df7;
  border-color: var(--wf-border-interactive-focused);
  box-shadow: 0 0 0 3px #eef5ff;
  box-shadow: 0 0 0 3px var(--wf-background-interactive-primary-focused);
}
.auth-input.input-validation-error {
  border-color: #f87171;
  border-color: var(--wf-border-feedback-red);
}
.auth-input:disabled {
  background-color: #eaecf0;
  background-color: var(--wf-background-quaternary);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  cursor: not-allowed;
}
/* Autofill styling */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #101828;
  -webkit-text-fill-color: var(--wf-foreground-primary);
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  -webkit-box-shadow: 0 0 0px 1000px var(--wf-background-primary) inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
/* ========================
   Field Error Message
   ======================== */
.auth-field__error {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #ef4444;
  color: var(--wf-foreground-feedback-error);
}
/* ========================
   Primary Button
   ======================== */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  width: 100%;
  height: 44px;
  padding: 0 20px;
  padding: 0 var(--wf-spacer-xl);
  font-family: inherit;
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 1;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.auth-btn--primary {
  background-color: #2266ff;
  background-color: var(--wf-background-interactive-primary-default);
  color: #ffffff;
  color: var(--wf-foreground-toggle-button);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.auth-btn--primary:hover {
  background-color: #1b4ff5;
  background-color: var(--wf-background-interactive-primary-hover);
  color: #ffffff;
  color: var(--wf-foreground-toggle-button);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.auth-btn--primary:active {
  background-color: #1731b6;
  background-color: var(--wf-background-interactive-primary-pressed);
  color: #ffffff;
  color: var(--wf-foreground-toggle-button);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.auth-btn--primary:focus-visible {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.auth-btn--primary:disabled {
  background-color: #eaecf0;
  background-color: var(--wf-background-interactive-primary-disabled);
  color: #f9fafb;
  color: var(--wf-foreground-interactive-primary-disabled);
  cursor: not-allowed;
}
/* ========================
   Social/Secondary Button
   ======================== */
.auth-btn--social {
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  color: #101828;
  color: var(--wf-foreground-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
}
.auth-btn--social:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
}
.auth-btn--social:active {
  background-color: rgba(12,17,29,0.10196);
  background-color: var(--wf-background-interactive-pressed);
}
.auth-btn--social:focus-visible {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
}
.auth-btn--social:disabled {
  background-color: #eaecf0;
  background-color: var(--wf-background-quaternary);
  border-color: #eaecf0;
  border-color: var(--wf-background-quaternary);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  cursor: not-allowed;
}
.auth-btn--social svg,
.auth-btn--social img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* ========================
   Social Buttons Container
   ======================== */
.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: var(--wf-spacer-md);
  width: 100%;
  max-width: 400px;
}
/* ========================
   Divider with Text
   ======================== */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--wf-spacer-md);
  width: 100%;
  max-width: 400px;
  font-size: 1.2rem;
  font-size: var(--wf-xs-font-size);
  line-height: 140%;
  line-height: var(--wf-xs-line-height);
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #eaecf0;
  background-color: var(--wf-border-divider-primary);
}
/* ========================
   Links
   ======================== */
.auth-link {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #2266ff;
  color: var(--wf-foreground-interactive-primary-default);
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: color 150ms ease-out;
}
.auth-link:hover {
  color: #1b4ff5;
  color: var(--wf-foreground-interactive-primary-hover);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.auth-link:active {
  color: #1731b6;
  color: var(--wf-foreground-interactive-primary-pressed);
}
.auth-link:focus-visible {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
  border-radius: 2px;
}
/* ========================
   Register/Login Link Section
   ======================== */
.auth-register-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  gap: var(--wf-spacer-xs);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.auth-register-link .auth-link {
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
}
.auth-register-link--wrap {
  flex-wrap: wrap;
  text-align: center;
}
/* ========================
   Language Selector
   ======================== */
.auth-language-selector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
  background-color: transparent;
  border: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.auth-language-selector:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
}
.auth-language-selector:focus-visible {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
}
.auth-language-selector__flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.auth-language-selector__chevron {
  width: 16px;
  height: 16px;
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
/* Native select styling for language */
.auth-language-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 8px 32px 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-3xl) var(--wf-spacer-sm) var(--wf-spacer-md);
  font-family: inherit;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-position: right var(--wf-spacer-sm) center;
  border: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.auth-language-select:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
}
.auth-language-select:focus {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
}
/* ========================
   Validation Summary (Errors)
   ======================== */
.auth-errors {
  width: 100%;
  padding: 12px;
  padding: var(--wf-spacer-md);
  background-color: #fef2f2;
  background-color: var(--wf-background-feedback-error);
  border: 1px solid #f87171;
  border: 1px solid var(--wf-border-feedback-red);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
}
.auth-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-errors li {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #ef4444;
  color: var(--wf-foreground-feedback-error);
}
.auth-errors li + li {
  margin-top: 6px;
  margin-top: var(--wf-spacer-xs);
}
/* Hide empty error containers */
.auth-errors:empty,
.auth-errors ul:empty,
.auth-errors.validation-summary-valid {
  display: none;
}
/* ========================
   Checkbox (Remember Me, Terms)
   ======================== */
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  cursor: pointer;
}
.auth-checkbox__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.auth-checkbox__input::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 4px;
  border-radius: var(--wf-round-corner-2xs);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.auth-checkbox__input:hover::before {
  border-color: #98a2b3;
  border-color: var(--wf-border-secondary);
}
.auth-checkbox__input:checked::before {
  background-color: #2266ff;
  background-color: var(--wf-background-interactive-primary-default);
  border-color: #2266ff;
  border-color: var(--wf-background-interactive-primary-default);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.auth-checkbox__input:focus-visible::before {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
}
.auth-checkbox__label {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.auth-checkbox__label a {
  color: #2266ff;
  color: var(--wf-foreground-interactive-primary-default);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.auth-checkbox__label a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
/* ========================
   Form Row (Side-by-Side Fields)
   ======================== */
.auth-form-row {
  display: flex;
  gap: 12px;
  gap: var(--wf-spacer-md);
  width: 100%;
}
.auth-form-row > .auth-field {
  flex: 1;
  min-width: 0;
}
@media (max-width: 480px) {
  .auth-form-row {
    flex-direction: column;
    gap: 4px;
    gap: var(--wf-spacer-2xs);
  }
}
/* ========================
   Phone Input with Country Code
   ======================== */
.auth-phone-input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 44px;
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  overflow: visible;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.auth-phone-input:hover {
  border-color: #98a2b3;
  border-color: var(--wf-border-secondary);
}
.auth-phone-input:focus-within {
  border-color: #625df7;
  border-color: var(--wf-border-interactive-focused);
  box-shadow: 0 0 0 3px #eef5ff;
  box-shadow: 0 0 0 3px var(--wf-background-interactive-primary-focused);
}
.auth-phone-input.input-validation-error {
  border-color: #f87171;
  border-color: var(--wf-border-feedback-red);
}
/* Country selector wrapper */
.auth-phone-input__country {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Country selector button (visible part) */
.auth-phone-input__country-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  gap: var(--wf-spacer-xs);
  padding: 0 12px;
  padding: 0 var(--wf-spacer-md);
  height: 100%;
  background-color: transparent;
  border: none;
  border-right: 1px solid #d0d5dd;
  border-right: 1px solid var(--wf-border-tertiary);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 150ms ease-out;
}
.auth-phone-input__country-trigger:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
}
.auth-phone-input__country-trigger:focus {
  outline: none;
}
/* Country code text (e.g., "CZ") */
.auth-phone-input__country-code {
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #101828;
  color: var(--wf-foreground-primary);
  white-space: nowrap;
}
/* Unknown country code */
.auth-phone-input__country-code--unknown {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
/* Chevron icon */
.auth-phone-input__chevron {
  width: 16px;
  height: 16px;
  color: #667085;
  color: var(--wf-foreground-tertiary);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}
.auth-phone-input--open .auth-phone-input__chevron {
  transform: rotate(180deg);
}
/* Dropdown */
.auth-phone-input__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  margin-top: var(--wf-spacer-xs);
  min-width: 200px;
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  box-shadow: 0px 4px 6px -2px rgba(12, 17, 29, 0.03), 0px 12px 16px -4px rgba(12, 17, 29, 0.08);
  box-shadow: var(--wf-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms ease-out;
  z-index: 1000;
}
.auth-phone-input--open .auth-phone-input__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Search input in dropdown */
.auth-phone-input__search {
  display: block;
  width: 100%;
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  border: none;
  border-bottom: 1px solid #d0d5dd;
  border-bottom: 1px solid var(--wf-border-tertiary);
  background-color: transparent;
  font-family: inherit;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  color: #101828;
  color: var(--wf-foreground-primary);
  outline: none;
}
.auth-phone-input__search::-moz-placeholder {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
.auth-phone-input__search::placeholder {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
/* Options list */
.auth-phone-input__options {
  max-height: 200px;
  overflow-y: auto;
  padding: 6px;
  padding: var(--wf-spacer-xs);
  margin: 0;
  list-style: none;
}
/* Option item */
.auth-phone-input__option {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 400;
  font-weight: var(--wf-font-weight-regular);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #101828;
  color: var(--wf-foreground-primary);
  border-radius: 6px;
  border-radius: var(--wf-round-corner-xs);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.auth-phone-input__option:hover,
.auth-phone-input__option:focus {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
  outline: none;
}
.auth-phone-input__option--selected {
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
}
.auth-phone-input__option--hidden {
  display: none;
}
.auth-phone-input__option-code {
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  min-width: 28px;
}
.auth-phone-input__option-dial {
  color: #667085;
  color: var(--wf-foreground-tertiary);
  flex: 1;
}
.auth-phone-input__check {
  width: 16px;
  height: 16px;
  color: #2266ff;
  color: var(--wf-foreground-interactive-primary-default);
  flex-shrink: 0;
}
/* No results message */
.auth-phone-input__no-results {
  padding: 12px;
  padding: var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  text-align: center;
}
/* Dial code display (e.g., "+420") */
.auth-phone-input__dial-code {
  display: flex;
  align-items: center;
  padding: 0 8px 0 12px;
  padding: 0 var(--wf-spacer-sm) 0 var(--wf-spacer-md);
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Phone number input */
.auth-phone-input__number {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 0;
  padding: 0 var(--wf-spacer-md) 0 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  color: #101828;
  color: var(--wf-foreground-primary);
  outline: none;
}
.auth-phone-input__number::-moz-placeholder {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
.auth-phone-input__number::placeholder {
  color: #667085;
  color: var(--wf-foreground-tertiary);
}
/* Autofill styling for phone input */
.auth-phone-input__number:-webkit-autofill,
.auth-phone-input__number:-webkit-autofill:hover,
.auth-phone-input__number:-webkit-autofill:focus {
  -webkit-text-fill-color: #101828;
  -webkit-text-fill-color: var(--wf-foreground-primary);
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  -webkit-box-shadow: 0 0 0px 1000px var(--wf-background-primary) inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
/* ========================
   Language Selector Dropdown
   ======================== */
.lang-selector {
  position: relative;
  display: inline-block;
}
.lang-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-family: inherit;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
  background-color: transparent;
  border: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.lang-selector__trigger:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
}
.lang-selector__trigger:focus-visible {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
}
.lang-selector__flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(12,17,29,0.10196);
  box-shadow: 0 0 0 1px var(--wf-border-utility-image);
}
.lang-selector__text {
  white-space: nowrap;
}
.lang-selector__chevron {
  width: 16px;
  height: 16px;
  color: #667085;
  color: var(--wf-foreground-tertiary);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}
.lang-selector--open .lang-selector__chevron {
  transform: rotate(180deg);
}
.lang-selector__dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  margin-bottom: var(--wf-spacer-xs);
  min-width: 160px;
  padding: 6px;
  padding: var(--wf-spacer-xs);
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  box-shadow: 0px 4px 6px -2px rgba(12, 17, 29, 0.03), 0px 12px 16px -4px rgba(12, 17, 29, 0.08);
  box-shadow: var(--wf-shadow-lg);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms ease-out;
  z-index: 1000;
}
.lang-selector--open .lang-selector__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.lang-selector__option {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 400;
  font-weight: var(--wf-font-weight-regular);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  color: #101828;
  color: var(--wf-foreground-primary);
  border-radius: 6px;
  border-radius: var(--wf-round-corner-xs);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.lang-selector__option:hover,
.lang-selector__option:focus {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
  outline: none;
}
.lang-selector__option--selected {
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
}
.lang-selector__option-text {
  flex: 1;
  white-space: nowrap;
}
.lang-selector__check {
  width: 16px;
  height: 16px;
  color: #2266ff;
  color: var(--wf-foreground-interactive-primary-default);
  flex-shrink: 0;
}
/* ========================
   Language Selector - Down Modifier
   (Opens dropdown downward for header placement)
   ======================== */
.lang-selector--down .lang-selector__dropdown {
  top: 100%;
  bottom: auto;
  margin-top: 6px;
  margin-top: var(--wf-spacer-xs);
  margin-bottom: 0;
  transform: translateX(-50%) translateY(-8px);
}
.lang-selector--down.lang-selector--open .lang-selector__dropdown {
  transform: translateX(-50%) translateY(0);
}
/* ========================
   Internal Page Layout
   ======================== */
.internal-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
}
/* ========================
   Internal Header
   ======================== */
.internal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  padding: var(--wf-spacer-md) var(--wf-spacer-2xl);
  border-bottom: 1px solid #eaecf0;
  border-bottom: 1px solid var(--wf-border-divider-primary);
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
}
.internal-header__left {
  display: flex;
  align-items: center;
}
.internal-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.internal-header__logo img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border-radius: var(--wf-round-corner-xs);
}
.internal-header__logo-text {
  font-size: 1.8rem;
  font-size: var(--wf-lg-font-size);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
  color: #101828;
  color: var(--wf-foreground-primary);
}
.internal-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  gap: var(--wf-spacer-lg);
}
.internal-header__lang {
  display: flex;
  align-items: center;
}
.internal-header__user {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #344054;
  color: var(--wf-foreground-secondary);
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  transition: background-color 150ms ease-out;
}
.internal-header__user:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.internal-header__user-name {
  white-space: nowrap;
}
.internal-header__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  gap: var(--wf-spacer-xs);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-family: inherit;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #344054;
  color: var(--wf-foreground-secondary);
  background-color: transparent;
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.internal-header__logout:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
  border-color: #98a2b3;
  border-color: var(--wf-border-secondary);
}
.internal-header__logout svg {
  width: 16px;
  height: 16px;
}
.internal-header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-lg);
  font-family: inherit;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #ffffff;
  color: var(--wf-foreground-toggle-button);
  background-color: #2266ff;
  background-color: var(--wf-background-interactive-primary-default);
  border: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.internal-header__login:hover {
  background-color: #1b4ff5;
  background-color: var(--wf-background-interactive-primary-hover);
  color: #ffffff;
  color: var(--wf-foreground-toggle-button);
  -webkit-text-decoration: none;
  text-decoration: none;
}
/* ========================
   Internal Main Content
   ======================== */
.internal-main {
  flex: 1;
  padding: 32px;
  padding: var(--wf-spacer-3xl);
}
/* ========================
   Internal Layout with Sidebar
   ======================== */
.internal-layout {
  display: flex;
  gap: 32px;
  gap: var(--wf-spacer-3xl);
  max-width: 1200px;
  margin: 0 auto;
}
.internal-layout__sidebar {
  flex-shrink: 0;
  width: 200px;
}
.internal-layout__content {
  flex: 1;
  min-width: 0;
  max-width: 600px;
}
/* ========================
   Internal Navigation
   ======================== */
.internal-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  gap: var(--wf-spacer-2xs);
}
.internal-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: var(--wf-spacer-sm);
  padding: 8px 12px;
  padding: var(--wf-spacer-sm) var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #344054;
  color: var(--wf-foreground-secondary);
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.internal-nav__item:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.internal-nav__item--active {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-selected);
  color: #2266ff;
  color: var(--wf-foreground-interactive-primary-default);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
}
.internal-nav__item--active:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-selected);
}
/* ========================
   Internal Content Section
   ======================== */
.internal-section {
  margin-bottom: 32px;
  margin-bottom: var(--wf-spacer-3xl);
}
.internal-section__title {
  font-size: 2.4rem;
  font-size: var(--wf-2xl-font-size);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
  line-height: 130%;
  line-height: var(--wf-2xl-line-height);
  color: #101828;
  color: var(--wf-foreground-primary);
  margin: 0 0 6px 0;
  margin: 0 0 var(--wf-spacer-xs) 0;
}
.internal-section__subtitle {
  font-size: 1.8rem;
  font-size: var(--wf-lg-font-size);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
  line-height: 160%;
  line-height: var(--wf-lg-line-height);
  color: #101828;
  color: var(--wf-foreground-primary);
  margin: 24px 0 12px 0;
  margin: var(--wf-spacer-2xl) 0 var(--wf-spacer-md) 0;
}
.internal-section__divider {
  height: 1px;
  background-color: #eaecf0;
  background-color: var(--wf-border-divider-primary);
  margin: 12px 0 24px 0;
  margin: var(--wf-spacer-md) 0 var(--wf-spacer-2xl) 0;
  border: none;
}
.internal-section__description {
  font-size: 1.6rem;
  font-size: var(--wf-base-font-size);
  line-height: 160%;
  line-height: var(--wf-base-line-height);
  color: #344054;
  color: var(--wf-foreground-secondary);
  margin: 0 0 16px 0;
  margin: 0 0 var(--wf-spacer-lg) 0;
}
/* ========================
   Auth Alerts
   ======================== */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  gap: var(--wf-spacer-md);
  padding: 12px;
  padding: var(--wf-spacer-md);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  margin-bottom: 16px;
  margin-bottom: var(--wf-spacer-lg);
}
.auth-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.auth-alert__content {
  flex: 1;
}
.auth-alert__title {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  font-weight: 600;
  font-weight: var(--wf-font-weight-demibold);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  margin: 0 0 6px 0;
  margin: 0 0 var(--wf-spacer-xs) 0;
}
.auth-alert__text {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  margin: 0;
}
.auth-alert__text a {
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
/* Alert variants */
.auth-alert--success {
  background-color: #f0fdf5;
  background-color: var(--wf-background-feedback-success);
  border: 1px solid #4ade80;
  border: 1px solid var(--wf-border-feedback-success);
}
.auth-alert--success .auth-alert__icon,
.auth-alert--success .auth-alert__title {
  color: #22c55e;
  color: var(--wf-foreground-feedback-success);
}
.auth-alert--success .auth-alert__text {
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.auth-alert--success .auth-alert__text a {
  color: #22c55e;
  color: var(--wf-foreground-feedback-success);
}
.auth-alert--warning {
  background-color: #fff4ed;
  background-color: var(--wf-background-feedback-warning);
  border: 1px solid #fb8a3c;
  border: 1px solid var(--wf-border-feedback-warning);
}
.auth-alert--warning .auth-alert__icon,
.auth-alert--warning .auth-alert__title {
  color: #f97316;
  color: var(--wf-foreground-feedback-warning);
}
.auth-alert--warning .auth-alert__text {
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.auth-alert--warning .auth-alert__text a {
  color: #f97316;
  color: var(--wf-foreground-feedback-warning);
}
.auth-alert--danger {
  background-color: #fef2f2;
  background-color: var(--wf-background-feedback-error);
  border: 1px solid #f87171;
  border: 1px solid var(--wf-border-feedback-red);
}
.auth-alert--danger .auth-alert__icon,
.auth-alert--danger .auth-alert__title {
  color: #ef4444;
  color: var(--wf-foreground-feedback-error);
}
.auth-alert--danger .auth-alert__text {
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.auth-alert--danger .auth-alert__text a {
  color: #ef4444;
  color: var(--wf-foreground-feedback-error);
}
.auth-alert--info {
  background-color: #f0faff;
  background-color: var(--wf-background-feedback-info);
  border: 1px solid #3ec7f4;
  border: 1px solid var(--wf-border-feedback-info);
}
.auth-alert--info .auth-alert__icon,
.auth-alert--info .auth-alert__title {
  color: #13b0e4;
  color: var(--wf-foreground-feedback-info);
}
.auth-alert--info .auth-alert__text {
  color: #344054;
  color: var(--wf-foreground-secondary);
}
.auth-alert--info .auth-alert__text a {
  color: #13b0e4;
  color: var(--wf-foreground-feedback-info);
}
/* ========================
   Danger Button
   ======================== */
.auth-btn--danger {
  background-color: #ef4444;
  background-color: var(--wf-background-feedback-destructive-default);
  color: #ffffff;
  color: var(--wf-foreground-toggle-button);
}
.auth-btn--danger:hover {
  background-color: #dc2626;
  background-color: var(--wf-background-feedback-destructive-hover);
}
.auth-btn--danger:active {
  background-color: #b91c1c;
  background-color: var(--wf-background-feedback-destructive-pressed);
}
.auth-btn--danger:focus-visible {
  outline: 2px solid #f87171;
  outline: 2px solid var(--wf-border-feedback-red);
  outline-offset: 2px;
}
.auth-btn--danger:disabled {
  background-color: #eaecf0;
  background-color: var(--wf-background-feedback-destructive-disabled);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  cursor: not-allowed;
}
/* ========================
   Secondary/Outline Button
   ======================== */
.auth-btn--secondary {
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  color: #101828;
  color: var(--wf-foreground-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
}
.auth-btn--secondary:hover {
  background-color: rgba(12,17,29,0.05098);
  background-color: var(--wf-background-interactive-hover);
  border-color: #98a2b3;
  border-color: var(--wf-border-secondary);
}
.auth-btn--secondary:active {
  background-color: rgba(12,17,29,0.10196);
  background-color: var(--wf-background-interactive-pressed);
}
.auth-btn--secondary:focus-visible {
  outline: 2px solid #625df7;
  outline: 2px solid var(--wf-border-interactive-focused);
  outline-offset: 2px;
}
/* ========================
   Button Size Modifiers
   ======================== */
.auth-btn--auto {
  width: auto;
}
.auth-btn--sm {
  height: 36px;
  padding: 0 12px;
  padding: 0 var(--wf-spacer-md);
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
}
/* ========================
   Auth Table
   ======================== */
.auth-table {
  width: 100%;
  border-collapse: collapse;
}
.auth-table th,
.auth-table td {
  padding: 12px;
  padding: var(--wf-spacer-md);
  text-align: left;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  line-height: 160%;
  line-height: var(--wf-sm-line-height);
  border-bottom: 1px solid #eaecf0;
  border-bottom: 1px solid var(--wf-border-divider-primary);
}
.auth-table th {
  font-weight: 500;
  font-weight: var(--wf-font-weight-medium);
  color: #667085;
  color: var(--wf-foreground-tertiary);
  background-color: #f9fafb;
  background-color: var(--wf-background-secondary);
}
.auth-table td {
  color: #101828;
  color: var(--wf-foreground-primary);
}
.auth-table tr:last-child td {
  border-bottom: none;
}
/* ========================
   Recovery Codes
   ======================== */
.auth-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px 24px;
  grid-gap: var(--wf-spacer-sm) var(--wf-spacer-2xl);
  gap: 8px 24px;
  gap: var(--wf-spacer-sm) var(--wf-spacer-2xl);
  padding: 16px;
  padding: var(--wf-spacer-lg);
  background-color: #f9fafb;
  background-color: var(--wf-background-secondary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.auth-recovery-codes code {
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  color: #101828;
  color: var(--wf-foreground-primary);
  background: none;
  padding: 0;
}
/* ========================
   QR Code Container
   ======================== */
.auth-qr-code {
  display: inline-block;
  padding: 12px;
  padding: var(--wf-spacer-md);
  background-color: #ffffff;
  background-color: var(--wf-background-primary);
  border: 1px solid #d0d5dd;
  border: 1px solid var(--wf-border-tertiary);
  border-radius: 8px;
  border-radius: var(--wf-round-corner-s);
}
/* ========================
   Ordered List Styling
   ======================== */
.auth-list {
  margin: 0;
  padding: 0 0 0 20px;
  padding: 0 0 0 var(--wf-spacer-xl);
  list-style: decimal;
}
.auth-list li {
  margin-bottom: 16px;
  margin-bottom: var(--wf-spacer-lg);
  padding-left: 8px;
  padding-left: var(--wf-spacer-sm);
}
.auth-list li p {
  margin: 0 0 8px 0;
  margin: 0 0 var(--wf-spacer-sm) 0;
}
.auth-list li:last-child {
  margin-bottom: 0;
}
/* ========================
   Code/Key Display
   ======================== */
.auth-code {
  display: inline-block;
  padding: 6px 8px;
  padding: var(--wf-spacer-xs) var(--wf-spacer-sm);
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 1.4rem;
  font-size: var(--wf-sm-font-size);
  color: #101828;
  color: var(--wf-foreground-primary);
  background-color: #f9fafb;
  background-color: var(--wf-background-secondary);
  border-radius: 4px;
  border-radius: var(--wf-round-corner-2xs);
  word-break: break-all;
}
/* ========================
   Button Group
   ======================== */
.auth-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  gap: var(--wf-spacer-md);
  margin-top: 16px;
  margin-top: var(--wf-spacer-lg);
}
/* ========================
   Responsive Internal Layout
   ======================== */
@media (max-width: 768px) {
  .internal-header {
    padding: 12px;
    padding: var(--wf-spacer-md);
  }

  .internal-header__right {
    gap: 8px;
    gap: var(--wf-spacer-sm);
  }

  .internal-header__user-name {
    display: none;
  }

  .internal-header__logout span {
    display: none;
  }

  .internal-main {
    padding: 16px;
    padding: var(--wf-spacer-lg);
  }

  .internal-layout {
    flex-direction: column;
    gap: 16px;
    gap: var(--wf-spacer-lg);
  }

  .internal-layout__sidebar {
    width: 100%;
  }

  .internal-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    gap: var(--wf-spacer-xs);
  }

  .internal-nav__item {
    padding: 6px 8px;
    padding: var(--wf-spacer-xs) var(--wf-spacer-sm);
  }

  .internal-layout__content {
    max-width: 100%;
  }
}
/* Legacy login styles (can be removed after full migration) */
.login-page {
  background-color: hsl(224, 100%, 58%);
  background-color: var(--primary-A700);
  background-color: #0156b1;
  background: linear-gradient(52.75deg, #0045ba 3%, #0250c2 22%, #0058c2 36%, #005fc5 50%, #007ecf);
  background-image: url('/images/background-gradient-light.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: PTRootUIWeb, Roboto, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}
.login-page h1,
.login-page h2,
.login-page h3,
.login-page h4,
.login-page h5,
.login-page h6 {
  text-align: center;
  font-weight: 400;
}
.login-page__body {
  margin: 0 20px;
  color: hsl(0, 0%, 0%);
  color: var(--black);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
.login-page__logo {
  top: 0px;
  position: relative;
  left: 0;
}
.login-page__footer {
  position: relative;
  left: 0;
  margin: 0;
}
.login-page__content {
  max-width: 1380px;
  width: 100%;
  flex-grow: 1;
  margin: 0 auto;
  padding: 40px 0;
  transition: transform 150ms ease-in-out, 300ms 400ms ease-in-out;
}
.login-page__content--loading {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transition: 300ms ease-in-out, transform 300ms ease-in-out;
}
@media (max-width: 548px) {
  .login-page__card {
    padding: 15px;
  }
}
@media (min-width: 548.89px) {
  .login-page__card {
    padding: 40px 80px;
  }
}
.copyright {
  font-size: 12px;
  line-height: 19px;
  letter-spacing: 0.32px;
  padding: 20px 0;
}
.external-logins-label {
  text-align: center;
}
/* Login Page Card */
.card {
  background-color: hsl(0, 0%, 100%);
  background-color: var(--white);
  color: hsl(0, 0%, 0%);
  color: var(--black);
  border-radius: 3px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}
/* Login Page Form */
.w-select {
  border: 0px solid;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}
.w-select option:checked {
  display: none;
}
.w-input {
  margin: 0;
  padding: 10px 20px;
  font: inherit;
  line-height: 26px;
  font-size: 18px;
  width: 100%;
  resize: none;
  outline: none;
  border-radius: 3px;
  border: 2px solid hsl(224, 100%, 90%);
  border: 2px solid var(--primary-1200);
  background-color: hsl(0, 0%, 100%);
  background-color: var(--white);
  transition: all 200ms ease-in-out;
}
.w-input:-internal-autofill-selected {
  transition: background-color 2000s;
}
.w-input:hover {
  border-color: hsl(224, 100%, 70%);
  border-color: var(--primary-900);
}
.w-input:focus {
  border-color: hsl(224, 100%, 70%);
  border-color: var(--primary-900);
}
.w-input.input-validation-error {
  border-color: hsl(4, 90%, 58%);
  border-color: var(--red);
}
.w-form-control {
  position: relative;
}
.w-form-control + .w-form-control {
  margin-top: 10px;
}
.w-form-control__label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  line-height: 26px;
}
.w-form-control__label > * {
  margin: 0;
}
.w-form-control__error-message {
  position: relative;
  bottom: 0;
  left: 0;
  color: hsl(4, 90%, 58%);
  color: var(--red);
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 992.98px) {
  .w-form-controls {
    max-width: 440px;
  }
}
.errors {
  margin: 0;
  padding: 0;
}
.errors ul {
  position: relative;
  background-color: rgb(255, 224, 224);
  color: hsl(4, 90%, 58%);
  color: var(--red);
  border-radius: 3px;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.errors ul li {
  padding: 5px 32px 5px 10px;
  list-style: none;
}
/* Login Page Layout */
.layout {
}
.layout__item--fill {
  flex-shrink: 1;
}
.layout__item--content-size {
  flex-shrink: 0;
}
@media (max-width: 548px) {
  .layout__item {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media (min-width: 548.89px) {
  .layout__item {
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media (min-width: 600.98px) {
  .layout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}
/* Login Page Checkbox */
.check {
  position: relative;
  display: inline-block;
  width: auto;
  margin: 5px 0 8px;
}
.check span.error {
  display: none !important;
}
.check label + span {
  margin-left: 30px;
}
.check input[type="checkbox"],
.check input[type="radio"] {
  visibility: hidden;
  position: absolute;
  left: -1000rem;
}
.check label {
  cursor: pointer;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  margin: 2px 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid hsl(0, 0%, 90%);
  border: 2px solid var(--grey-90);
  transition: all 200ms ease-in-out;
}
.check label:after {
  filter: alpha(opacity=0);
  opacity: 0;
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  background: transparent;
  top: 3px;
  left: 3px;
  border: 2px solid hsl(224, 100%, 58%);
  border: 2px solid var(--primary-A700);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  transition: filter 200ms ease-in-out;
}
.check label:hover {
  background: hsl(0, 0%, 100%);
  background: var(--white);
}
.check label:hover::after {
  filter: alpha(opacity=30);
  opacity: 0.3;
}
.check input[type="checkbox"]:focus + label,
.check input[type="radio"]:focus + label {
  border-color: hsl(224, 100%, 70%);
  border-color: var(--primary-900);
  background: rgba(255, 255, 255, 0.9);
}
.check input[type="checkbox"]:checked + label,
.check input[type="radio"]:checked + label {
  border-color: hsl(224, 100%, 58%);
  border-color: var(--primary-A700);
  background: rgba(255, 255, 255, 0.9);
}
.check input[type="checkbox"]:checked + label:after,
.check input[type="radio"]:checked + label:after {
  filter: alpha(opacity=100);
  opacity: 1;
}
.check input[type="checkbox"] + .error + label,
.check input[type="radio"] + .error + label {
  border-color: hsl(4, 90%, 58%);
  border-color: var(--red);
}
.check input[type="checkbox"]:checked + .error + label,
.check input[type="radio"]:checked + .error + label {
  border-color: hsl(4, 90%, 58%);
  border-color: var(--red);
}
.check input[type="checkbox"]:checked + .error + label:after,
.check input[type="radio"]:checked + .error + label:after {
  filter: alpha(opacity=100);
  opacity: 1;
}
.check__toggle {
  cursor: pointer;
}
/* Login Page Button */
.button {
  color: hsl(224, 100%, 58%);
  color: var(--primary-A700);
  border-color: hsl(224, 100%, 58%);
  border-color: var(--primary-A700);
  background-color: hsl(0, 0%, 100%);
  background-color: var(--white);
  padding: 0.25rem 1rem;
  border-radius: 4px;
  font: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-style: solid;
  border-width: 1px;
  transition: all 200ms ease-in-out;
}
.button:hover,
.button:focus {
  color: hsl(0, 0%, 100%);
  color: var(--white);
  border-color: hsl(224, 100%, 58%);
  border-color: var(--primary-A700);
  background-color: hsl(224, 100%, 58%);
  background-color: var(--primary-A700);
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button--icon > *:not(:first-child) {
  margin-left: 2px;
}
.button--icon > *:not(:last-child) {
  margin-right: 2px;
}
.button--big {
  padding: 0.75rem 2rem;
}
.button--inline_block {
  display: inline-block;
}
.button--fill {
  width: 100%;
}
.button--invert {
  color: hsl(0, 0%, 100%);
  color: var(--white);
  border-color: hsl(0, 0%, 100%);
  border-color: var(--white);
  background-color: transparent;
}
.button--invert:hover,
.button--invert:focus {
  color: hsl(0, 0%, 0%);
  color: var(--black);
  border-color: hsl(0, 0%, 100%);
  border-color: var(--white);
  background-color: hsl(0, 0%, 100%);
  background-color: var(--white);
}
.button--accent {
  color: hsl(0, 0%, 100%);
  color: var(--white);
  border-color: hsl(224, 100%, 58%);
  border-color: var(--primary-A700);
  background-color: hsl(224, 100%, 58%);
  background-color: var(--primary-A700);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.button--yellow {
  padding: 20px;
  color: hsl(0, 0%, 0%);
  color: var(--black);
  border-color: hsl(47, 100%, 50%);
  border-color: var(--yellow);
  background-color: hsl(47, 100%, 50%);
  background-color: var(--yellow);
  box-shadow: 0px 4px 20px rgba(153, 6, 176, 0.05);
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.6px;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
}
.button--yellow:hover,
.button--yellow:focus {
  color: hsl(0, 0%, 0%);
  color: var(--black);
  border-color: hsl(47, 100%, 65%);
  background-color: hsl(47, 100%, 65%);
}
.button--disable,
.button--disable:hover,
.button:disabled {
  border-color: hsl(0, 0%, 50%);
  border-color: var(--grey-50);
  background-color: hsl(0, 0%, 50%);
  background-color: var(--grey-50);
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  cursor: default;
}
.button--light {
  border: none;
  background-color: rgba(255, 255, 255, 0.65);
  color: hsl(224, 100%, 58%) !important;
  color: var(--primary-A700) !important;
}
.button--light-d {
  border: 1px solid hsl(0, 0%, 100%);
  border: 1px solid var(--white);
  background-color: transparent;
  color: hsl(0, 0%, 100%) !important;
  color: var(--white) !important;
}
.button--light-d:hover,
.button--light-d:focus {
  color: hsl(224, 100%, 58%) !important;
  color: var(--primary-A700) !important;
  border: 1px solid transparent;
}
.button--light:hover,
.button--light:focus {
  background-color: hsl(0, 0%, 100%);
  background-color: var(--white);
  -webkit-text-decoration: none;
  text-decoration: none;
  border: 1px solid transparent;
}
@media (max-width: 992px) {
  .button {
    padding: 0.4rem 1rem;
  }
}
/* Login Page Login Links */
.register-link {
  float: right;
}
.login-link {
  text-align: center;
  color: hsl(224, 100%, 90%);
  color: var(--primary-1200);
}
.login-link a {
  position: relative;
  letter-spacing: 0.05px;
  line-height: 20px;
}
.login-link a + a {
  margin-left: 20px;
  padding-left: 20px;
}
.login-link a + a:before {
  content: '|';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.4;
}
.login-link span {
  color: hsl(0, 0%, 0%);
  color: var(--black);
}
@media (max-width: 548px) {
  .login-link {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .login-link a + a {
    margin-left: 0;
    padding-left: 0;
    padding: 10px;
  }

  .login-link a + a:before {
    content: none;
  }
}
@media (min-width: 548.89px) {
  .login-link {
    padding: 20px 20px 0px 20px;
  }

  .register-link {
    padding-bottom: 20px;
  }
}
/* Social Provider Buttons */
.sp-buttons-title {
  font-size: 16px;
}
.sp-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-button {
  flex-basis: calc(50% - 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 8px;
  border-radius: 2px;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.12157);
}
.sp-button:hover,
.sp-button:focus {
  background-color: #fafafa;
}
.sp-button svg {
  font-size: 18px;
  width: 1em;
  height: 1em;
}
.sp-button span {
  font-size: 14px;
  font-family: Roboto-Medium, Roboto, sans-serif;
  font-weight: 700;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.54);
  margin-left: 14px;
  justify-content: center;
  display: flex !important;
}