/* ═══════════════════════════════════════════════════════════════════════════
   AGONE DESIGN SYSTEM - CSS Framework
   Version: 1.0.0
   
   A centralized CSS design system for all your Blazor WebAssembly products.
   Just add class names - no components needed!
   
   Usage: <link href="_content/AgoneDesignSystem.Styles/css/agone.css" rel="stylesheet" />
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   
   ═══════════════════════════════════════════════════════════════════════════ */

/* AG-ONE Design System — color tokens (from Figma) */
:root {

    /* ─────────────────────────────────────────────────────────────────────────
     Neutral colors 
     ───────────────────────────────────────────────────────────────────────── */
	--color-neutral-lightest: #F5F7F9;
	--color-neutral-25: #EFF2F5;
	--color-neutral-50: #E5E8F0;
	--color-neutral-100: #D6DBE6;
	--color-neutral-200: #B5C1D3;
	--color-neutral-300: #9FAEC6;
	--color-neutral-400: #8C9EBB;
	--color-neutral-500: #7288AC;
	--color-neutral-600: #556C91;
	--color-neutral-700: #3C4C67;
	--color-neutral-800: #283243;
	--color-neutral-900: #171D27;
   /* ─────────────────────────────────────────────────────────────────────────
    White colors 
    ───────────────────────────────────────────────────────────────────────── */
	--color-white-0: #FFFFFF · 0%;
	--color-white-5: #FFFFFF · 5%;
	--color-white-10: #FFFFFF · 10%;
	--color-white-20: #FFFFFF · 20%;
	--color-white-30: #FFFFFF · 30%;
	--color-white-40: #FFFFFF · 40%;
	--color-white-50: #FFFFFF · 50%;
	--color-white-60: #FFFFFF · 60%;
	--color-white-70: #FFFFFF · 70%;
	--color-white-80: #FFFFFF · 80%;
	--color-white-90: #FFFFFF · 90%;
	--color-white-100: #FFFFFF;
    /* ─────────────────────────────────────────────────────────────────────────
    Primary colors 
    ───────────────────────────────────────────────────────────────────────── */
    
    --color-primary-lightest: #F5FAFF;
    --color-primary-25: #EBF3FF;
    --color-primary-50: #D8E7FE;
    --color-primary-100: #C4DAFD;
    --color-primary-200: #9CC2FC;
    --color-primary-300: #74A9FB;
    --color-primary-400: #4D91FA;
    --color-primary-500: #296DF5;
    --color-primary-600: #0A50DC;
    --color-primary-700: #083DA6;
    --color-primary-800: #052970;
    --color-primary-900: #041A49;
    /* ─────────────────────────────────────────────────────────────────────────
    Secondary colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-secondary-lightest: #F7F4FF;
    --color-secondary-25: #EFE9FF;
    --color-secondary-50: #E4D9FF;
    --color-secondary-100: #CCB8FF;
    --color-secondary-200: #BA9FFF;
    --color-secondary-300: #A785FF;
    --color-secondary-400: #8E62FF;
    --color-secondary-500: #7742FF;
    --color-secondary-600: #630AFF;
    --color-secondary-700: #4C00D1;
    --color-secondary-800: #380099;
    --color-secondary-900: #230061;
    /* ─────────────────────────────────────────────────────────────────────────
    Purple colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-purple-lightest: #FBF6FE;
    --color-purple-25: #F6E9FE;
    --color-purple-50: #F1DDFD;
    --color-purple-100: #DDA3FA;
    --color-purple-200: #D295F9;
    --color-purple-300: #C472F7;
    --color-purple-400: #B650F1;
    --color-purple-500: #AB39F3;
    --color-purple-600: #892EC2;
    --color-purple-700: #672292;
    --color-purple-800: #441761;
    --color-purple-900: #2D0447;
    /* ─────────────────────────────────────────────────────────────────────────
    Cyan colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-cyan-lightest: #F5FEFF;
    --color-cyan-25: #EBFDFE;
    --color-cyan-50: #DCFCFE;
    --color-cyan-100: #BFFAFD;
    --color-cyan-200: #84F4FB;
    --color-cyan-300: #08E1ED;
    --color-cyan-400: #08C9D4;
    --color-cyan-500: #06AFB8;
    --color-cyan-600: #008FA0;
    --color-cyan-700: #007388;
    --color-cyan-800: #005363;
    --color-cyan-900: #012A2D;
    /* ─────────────────────────────────────────────────────────────────────────
    Green colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-green-lightest: #F4FFF8;
    --color-green-25: #E1FEEF;
    --color-green-50: #C5FCDF;
    --color-green-100: #9DFBCA;
    --color-green-200: #4CFA9F;
    --color-green-300: #0EE775;
    --color-green-400: #0CD46C;
    --color-green-500: #0AA956;
    --color-green-600: #099049;
    --color-green-700: #007535;
    --color-green-800: #054D27;
    --color-green-900: #032B16;
    /* ─────────────────────────────────────────────────────────────────────────
    Lime colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-lime-lightest: #FDFFF0;
    --color-lime-25: #F8FEDB;
    --color-lime-50: #EEFBA7;
    --color-lime-100: #E2F76E;
    --color-lime-200: #D9F53D;
    --color-lime-300: #C7E80C;
    --color-lime-400: #BADA0C;
    --color-lime-500: #9EB80A;
    --color-lime-600: #849A09;
    --color-lime-700: #687E07;
    --color-lime-800: #4C5903;
    --color-lime-900: #2A3201;
    /* ─────────────────────────────────────────────────────────────────────────
    Yellow colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-yellow-lightest: #FFFCEB;
    --color-yellow-25: #FFF8D6;
    --color-yellow-50: #FFF3B8;
    --color-yellow-100: #FFF0A3;
    --color-yellow-200: #FEE97A;
    --color-yellow-300: #FEE252;
    --color-yellow-400: #FFD829;
    --color-yellow-500: #FAD000;
    --color-yellow-600: #EBB600;
    --color-yellow-700: #CC9500;
    --color-yellow-800: #856100;
    --color-yellow-900: #3D3200;
    /* ─────────────────────────────────────────────────────────────────────────
    Orange colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-orange-lightest: #FFF6F0;
    --color-orange-25: #FFE8DB;
    --color-orange-50: #FFDABD;
    --color-orange-100: #FFBE89;
    --color-orange-200: #FFAB5F;
    --color-orange-300: #FF9450;
    --color-orange-400: #FF7E42;
    --color-orange-500: #FF6733;
    --color-orange-600: #F24A1C;
    --color-orange-700: #D44116;
    --color-orange-800: #9D2E0B;
    --color-orange-900: #571905;
    /* ─────────────────────────────────────────────────────────────────────────
    Red colors 
    ───────────────────────────────────────────────────────────────────────── */
    --color-red-lightest: #FFF5F5;
    --color-red-25: #FFEBEB;
    --color-red-50: #FFD6D6;
    --color-red-100: #FFB8B8;
    --color-red-200: #FF9999;
    --color-red-300: #FF7575;
    --color-red-400: #FF4D4D;
    --color-red-500: #FF0505;
    --color-red-600: #E40101;
    --color-red-700: #AD0000;
    --color-red-800: #800000;
    --color-red-900: #420000;
    /* ─────────────────────────────────────────────────────────────────────────
    General Gradient 
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-background-color: linear-gradient(180deg, #F5F7FF 15.31%, #EFF3FF 100%);
   --gradient-ai-color-135: linear-gradient(135deg, #9CC2FC 0%, #957DF6 50%, #AB39F3 100%);
   --gradient-p500-s500-135: linear-gradient(135deg, #296DF5 0%, #7742FF 100%);
   --gradient-p500-s500-180: linear-gradient(180deg, #296DF5 0%, #7742FF 100%);
   --gradient-p500-s400-225: linear-gradient(225deg, #8E62FF 0%, #296DF5 100%);
   --gradient-s400-p400-90: linear-gradient(90deg, #8E62FF 0%, #4D91FA 100%);
   --gradient-p300-p400-180: linear-gradient(180deg, #74A9FB 0%, #4D91FA 100%);
   --gradient-p50-s50-180: linear-gradient(180deg, var(--color-primary-50, #D8E7FE) 0%, var(--color-secondary-50, #E4D9FF) 100%);
   --gradient-p50-s50-90: linear-gradient(90deg, var(--color-primary-50, #D8E7FE) 0%, var(--color-secondary-50, #E4D9FF) 100%);
   --gradient-p25-white-180: linear-gradient(180deg, var(--color-primary-25, #EBF3FF) 0%, var(--color-white-100, #FFF) 100%);
   --gradient-s25-white-180: linear-gradient(180deg, var(--color-secondary-25, #EFE9FF) 0%, var(--color-white-100, #FFF) 100%);
   --gradient-n25-white-180: linear-gradient(180deg, var(--color-neutral-25, #EFF2F5) 0%, var(--color-white-100, #FFF) 100%);
   --gradient-p500-purple400-135: linear-gradient(135deg, #296DF5 0%, #B650F1 100%);
   --gradient-purple400-p500-135: linear-gradient(135deg, #B650F1 0%, #296DF5 100%);
   --gradient-cyan200-s200-135: linear-gradient(135deg, #84F4FB 0%, #BA9FFF 100%);
   --gradient-s200-cyan200-135: linear-gradient(135deg, #BA9FFF 0%, #84F4FB 100%);
   --gradient-l300-c300-135: linear-gradient(135deg, #C7E80C 0%, #08E1ED 100%);
   --gradient-c300-l300-135: linear-gradient(135deg, #08E1ED 0%, #C7E80C 100%);
   --gradient-l300-c300-50-135: linear-gradient(135deg, rgba(199, 232, 12, 0.60) 0%, rgba(8, 225, 237, 0.60) 100%);
   --gradient-o500-r600-135: linear-gradient(135deg, #FF6733 0%, #E40101 100%);
   --gradient-r600-o500-135: linear-gradient(135deg, #E40101 0%, #FF6733 100%);
   --gradient-o500-r600-50-135: linear-gradient(135deg, rgba(255, 103, 51, 0.50) 0%, rgba(228, 1, 1, 0.50) 100%);
   --gradient-product-dropdown: linear-gradient(180deg, var(--color-white-100, #FFF) -6.87%, var(--color-primary-25, #EBF3FF) 46.56%, var(--color-secondary-25, #EFE9FF) 100%);
   --gradient-menu-icon: linear-gradient(148deg, #DEEEFF 26.06%, #4779F7 94.92%);
   --gradient-ai-color: linear-gradient(301deg, #B650F1 17.05%, #976FFF 53.27%, #84A8FA 96.97%);
   /* ─────────────────────────────────────────────────────────────────────────
    Menu Gradient 
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-navigation-menu-active-267: linear-gradient(267deg, rgba(74, 122, 255, 0.50) 11.41%, rgba(0, 29, 107, 0.30) 127.13%);
   --gradient-navigation-menu-hover-267: linear-gradient(267deg, rgba(74, 122, 255, 0.17) -13.45%, rgba(23, 30, 58, 0.35) 158.15%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Primary
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-primary-01: linear-gradient(180deg, #9CC2FC 0%, #296DF5 100%);
   --gradient-primary-02: linear-gradient(90deg, #9CC2FC 0%, #296DF5 100%);
   --gradient-primary-03: linear-gradient(270deg, #9CC2FC 0%, #296DF5 100%);
   --gradient-primary-04: linear-gradient(225deg, #74A9FB 0%, #0A50DC 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Secondary
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-secondary-01: linear-gradient(180deg, #CCB8FF 0%, #7742FF 100%);
   --gradient-secondary-02: linear-gradient(90deg,  #CCB8FF 0%, #7742FF 100%);
   --gradient-secondary-03: linear-gradient(270deg, #CCB8FF 0%, #7742FF 100%);
   --gradient-secondary-04: linear-gradient(225deg, #A785FF 0%, #630AFF 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Neutral
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-neutral-01: linear-gradient(135deg, #D6DBE6 0%, #9FAEC6 100%);
   --gradient-neutral-02: linear-gradient(135deg, #B5C1D3 0%, #8C9EBB 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Green
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-green-01: linear-gradient(180deg, #0EE775 0%, #0AA956 100%);
   --gradient-green-02: linear-gradient(90deg,  #0EE775 0%, #0AA956 100%);
   --gradient-green-03: linear-gradient(270deg, #0EE775 0%, #0AA956 100%);
   --gradient-green-04: linear-gradient(225deg, #0EE775 0%, #099049 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Lime
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-lime-04: linear-gradient(225deg, var(--color-lime-300, #C7E80C) 0%, var(--color-lime-600, #849A09) 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Cyan
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-cyan-04: linear-gradient(225deg, #08E1ED 0%, #008FA0 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Red
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-red-01: linear-gradient(180deg, #FF4D4D 0%, #E40101 100%);
   --gradient-red-02: linear-gradient(90deg,  #FF4D4D 0%, #E40101 100%);
   --gradient-red-03: linear-gradient(270deg, #FF4D4D 0%, #E40101 100%);
   --gradient-red-04: linear-gradient(225deg, #FF7575 0%, #E40101 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Pink
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-pink-04: linear-gradient(225deg, #FFB8B8 0%, #FF7575 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Orange
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-orange-04: linear-gradient(225deg, #FF9450 0%, #F24A1C 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Gradient Yellow
    ───────────────────────────────────────────────────────────────────────── */
   --gradient-yellow-01: linear-gradient(180deg, #FFE252 0%, #FAD000 100%);
   --gradient-yellow-02: linear-gradient(90deg,  #FFE252 0%, #FAD000 100%);
   --gradient-yellow-03: linear-gradient(270deg, #FFE252 0%, #FAD000 100%);
   --gradient-yellow-04: linear-gradient(225deg, #FFE252 0%, #FAD000 100%);
   /* ─────────────────────────────────────────────────────────────────────────
    Neutral Text Variables
    ───────────────────────────────────────────────────────────────────────── */
   --text-neutral-title: var(--color-neutral-900);
   --text-neutral-bodytext: var(--color-neutral-800);
   --text-neutral-subtext-dark: var(--color-neutral-700);
   --text-neutral-subtext-light: var(--color-neutral-400);
   --text-neutral-disabled: var(--color-neutral-200);
   --text-neutral-disabled-light: var(--color-neutral-50);
   --text-neutral-negative: var(--color-white-100);
   /* ─────────────────────────────────────────────────────────────────────────
    Primary Text Variables
    ───────────────────────────────────────────────────────────────────────── */
   --text-primary-subtle: var(--color-primary-25);
   --text-primary-lighter: var(--color-primary-100);
   --text-primary-medium: var(--color-primary-300);
   --text-primary-default: var(--color-primary-500);
   --text-primary-darker: var(--color-primary-800);
   /* ─────────────────────────────────────────────────────────────────────────
    Success Text Variables
    ───────────────────────────────────────────────────────────────────────── */
   --text-success-default: var(--color-green-600);
   --text-success-darker: var(--color-green-800);
   /* ─────────────────────────────────────────────────────────────────────────
    Error Text Variables
    ───────────────────────────────────────────────────────────────────────── */
   --text-error-default: var(--color-red-600);
   --text-error-disabled: var(--color-red-200);
   --text-error-darker: var(--color-red-800);
   /* ─────────────────────────────────────────────────────────────────────────
    Warning Text Variables
    ───────────────────────────────────────────────────────────────────────── */
   --text-warning-default: var(--color-yellow-700);
   /* ─────────────────────────────────────────────────────────────────────────
    Surface Variables
    ───────────────────────────────────────────────────────────────────────── */
   /* Neutral surfaces */
   --surface-neutral-lightest: var(--color-neutral-lightest);
   --surface-neutral-subtle: var(--color-neutral-50);
   --surface-neutral-lighter: var(--color-neutral-100);
   --surface-neutral-medium: var(--color-neutral-200);
   --surface-neutral-default: var(--color-neutral-500);
   --surface-neutral-darker: var(--color-neutral-800);
   --surface-neutral-disabled: var(--color-neutral-200);
   --surface-neutral-disabled-light: var(--color-neutral-50);
   --surface-neutral-negative: var(--color-white-100);
   /* Primary surfaces */
   --surface-primary-lightest: var(--color-primary-lightest);
   --surface-primary-subtle: var(--color-primary-25);
   --surface-primary-lighter: var(--color-primary-100);
   --surface-primary-medium: var(--color-primary-200);
   --surface-primary-default: var(--color-primary-500);
   --surface-primary-dropdown: #DEEEFF 40%;
   /* Secondary surfaces */
   --surface-secondary-lightest: var(--color-secondary-lightest);
   --surface-secondary-subtle: var(--color-secondary-25);
   /* Success surfaces */
   --surface-success-lightest: var(--color-green-lightest);
   /* Error surfaces */
   --surface-error-lightest: var(--color-red-lightest);
   --surface-error-subtle: var(--color-red-50);
   --surface-error-lighter: var(--color-red-100);
   --surface-error-disabled-light: var(--color-red-50);
   /* Warning surfaces */
   --surface-warning-lightest: var(--color-yellow-lightest);
   /* ─────────────────────────────────────────────────────────────────────────
    Border Variables
    ───────────────────────────────────────────────────────────────────────── */
   /* Neutral Variables */
   --border-neutral-subtle-light: var(--color-neutral-50);
   --border-neutral-subtle: var(--color-neutral-100);
   --border-neutral-lighter: var(--color-neutral-300);
   --border-neutral-default: var(--color-neutral-600);
   --border-neutral-disabled: var(--color-neutral-200);
   --border-neutral-separator: var(--color-neutral-50);
   --border-neutral-negative: var(--color-white-100);
   /* Primary Variables */
   --border-primary-subtle-light: var(--color-primary-50);
   --border-primary-subtle: var(--color-primary-100);
   --border-primary-lighter: var(--color-primary-300);
   --border-primary-default: var(--color-primary-500);
   /* success Variables */
   --border-success-subtle-light: var(--color-green-50);
   --border-success-subtle: var(--color-green-100);
   --border-success-lighter: var(--color-green-400);
   --border-success-default: var(--color-green-500);
   /* Error Variables */
   --border-error-subtle-light: var(--color-red-50);
   --border-error-subtle: var(--color-red-100);
   --border-error-lighter: var(--color-red-300);
   --border-error-default: var(--color-red-500);
   --border-error-disabled: var(--color-red-200);
   /* Warning Variables */
   --border-warning-subtle-light: var(--color-yellow-50);
   --border-warning-subtle: var(--color-yellow-100);
   --border-warning-lighter: var(--color-yellow-300);
   --border-warning-default: var(--color-yellow-500);
   /* Secondary Variables */
   --border-secondary-subtle: var(--color-secondary-100);
   --border-secondary-lighter: var(--color-secondary-300);
   /* Icon Variables */
   /* Neutral Variables */
   --icon-neutral-subtle: var(--color-neutral-100);
   --icon-neutral-lighter: var(--color-neutral-400);
   --icon-neutral-default: var(--color-neutral-700);
   --icon-neutral-disabled: var(--color-neutral-200);
   --icon-neutral-disabled-light: var(--color-neutral-50);
   --icon-neutral-negative: var(--color-white-100);
   /* Primary Variables */
   --icon-primary-subtle: var(--color-primary-25);
   --icon-primary-lighter: var(--color-primary-100);
   --icon-primary-default: var(--color-primary-500);
   /* Success Variables */
   --icon-success-default: var(--color-green-500);
   /* Destructive Variables */
   --icon-destructive-default: var(--color-red-500);
   --icon-destructive-disabled: var(--color-red-200);
   /* Warning Variables */
   --icon-warning-default: var(--color-yellow-700);
   /* Button Variables */
   /* Primary Variables */
   --button-primary-text: var(--text-neutral-negative);
   --button-primary-text-disabled: var(--color-neutral-300);
   --button-primary-surface-default: var(--color-primary-300);
   --button-primary-surface-hover: var(--color-primary-400);
   --button-primary-surface-pressed: var(--color-primary-500);
   --button-primary-surface-disabled: var(--color-neutral-100);
   /* Secondary Variables */
   --button-secondary-text-default: var(--color-primary-500);
   --button-secondary-text-hover: var(--color-primary-600);
   --button-secondary-text-pressed: var(--color-primary-700);
   --button-secondary-text-disabled: var(--color-neutral-300);
   --button-secondary-surface-hover: #DEEEFF 30%;
   --button-secondary-surface-pressed: #DEEEFF 60%;
   --button-secondary-border-disabled: var(--color-neutral-100);
   --button-secondary-dark-border-disabled: var(--color-neutral-300);
   --button-secondary-text: var(--text-neutral-negative);
   /* Tertiary Variables */
   --button-tertiary-text-default: var(--color-neutral-700);
   --button-tertiary-text-hover: var(--color-neutral-800);
   --button-tertiary-text-pressed: var(--color-neutral-800);
   --button-tertiary-text-disabled: var(--color-neutral-300);
   --button-tertiary-border-subtle: var(--color-neutral-100);
   --button-tertiary-border-default: var(--color-neutral-300);
   --button-tertiary-border-disabled: var(--color-neutral-100);
   --button-tertiary-surface-hover: var(--color-neutral-25);
   --button-tertiary-surface-pressed: var(--color-neutral-100);
   /* Success Variables */
   --button-success-text: var(--color-cyan-900);
   --button-success-text-disabled: #003F4D 40%;
   /* Destructive Variables */
   --button-destructive-text: var(--text-neutral-negative);
   --button-destructive-text-default: var(--color-red-600);
   --button-destructive-text-hover: var(--color-red-700);
   --button-destructive-text-pressed: var(--color-red-700);
   --button-destructive-hover: #FFEBEB 50%;
   --button-destructive-pressed: #FFCCCC 50%;
   --button-destructive-text-disabled: var(--color-red-200);
   --button-destructive-border-disabled: var(--color-red-200);
   /* Text Button Variables */
   --button-text-button-text-primary-default: var(--color-primary-500);
   --button-text-button-text-primary-hover: var(--color-primary-700);
   --button-text-button-surface-primary-hover: #A2BFFC 20%;
   --button-text-button-text-primary-pressed: var(--color-primary-800);
   --button-text-button-surface-primary-pressed: #A2BFFC 30%;
   --button-text-button-border-primary: var(--color-primary-50);
   --button-text-button-text-primary-disabled: var(--color-primary-200);
   --button-text-button-text-neutral-default: var(--color-neutral-700);
   --button-text-button-text-neutral-hover: var(--color-neutral-800);
   --button-text-button-text-neutral-pressed: var(--color-neutral-900);
   --button-text-button-surface-neutral-hover: var(--color-neutral-100);
   --button-text-button-surface-neutral-pressed: #B1BDD1 50%;
   --button-text-button-border-neutral: var(--color-neutral-100);
   --button-text-button-text-neutral-disabled: var(--color-neutral-200);
   /* Link Button Variables */
   --button-link-button-text-default: var(--color-primary-500);
   --button-link-button-text-hover: var(--color-primary-700);
   --button-link-button-text-pressed: var(--color-primary-800);
   --button-link-button-text-disabled: var(--color-neutral-300);
   /* Hyperlink Variables */
   --hyperlink-primary-default: var(--color-primary-500);
   --hyperlink-primary-hover: var(--color-primary-700);
   --hyperlink-primary-pressed: var(--color-primary-800);
   --hyperlink-neutral-default: var(--color-neutral-600);
   --hyperlink-neutral-hover: var(--color-neutral-700);
   --hyperlink-neutral-pressed: var(--color-neutral-800);
   --hyperlink-disabled: var(--color-neutral-200);
   /* Numbers Variables */
   --number-0: 0;
   --number-2: 2;
   --number-4: 4;
   --number-6: 6;
   --number-8: 8;
   --number-10: 10;
   --number-12: 12;
   --number-16: 16;
   --number-20: 20;
   --number-24: 24;
   --number-32: 32;
   --number-40: 40;
   --number-60: 60;
   --number-80: 80;
   /* Typography Variables */
   --font-family: 'Noto Sans';
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   /* Shadow Variables */
  /* Percentage converted to hex alpha 20% is 33,35% is 59,40% is 66,50% is 80,25% is 40, 15% is 26 */
  --small-shadow: 0px 2px 15px 2px #8E929833;
  --medium-shadow: 0px 2px 30px 5px #8E929859;
  --large-shadow: 0px 2px 50px 8px #8E929880;
  --active-shadow: 0px 0px 4px 0px var(--color-primary-200);
  --error-shadow: 0px 0px 4px 0px var(--color-red-400);
  --dropdown-shadow: 0px 5px 15px 2px #899BB666;
  --card-shadow: 0px 0px 20px 5px #454A9233;
  --glass-effect-shadow: 0px 10px 30px 5px #454A9233;
  --toggle-shadow: 0px 2px 4px 0px #00000040;
  --table-shadow: 0px 5px 20px 0px #00000080;
  --progress-bar-shadow: 0px 0px 8px 0px #066DFC80;
  --dropdown-menu-shadow: 0px 0px 16px 6px var(--color-primary-200);
  --drawer-shadow-right: 10px 0px 25px 0px #00000066;
  --focus-ring-pressed: inset 0px 250px 0px 0px #001D6826;
  --focus-ring-4px-red200: 0px 0px 0px 4px var(--color-red-200);
  --focus-ring-4px-primary100: 0px 0px 0px 4px var(--color-primary-100);
  --focus-ring-4px-lime200: 0px 0px 0px 4px var(--color-lime-200);
  --focus-ring-2px-primary100: 0px 0px 0px 2px var(--color-primary-100);

}
   /* H1 Headline */
.h1-headline {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 61.04px;
   font-style: normal;
   font-weight: 700;
   line-height: 124%; /* 75.69px */
   }

   /* H2 Headline */ 
.h2-headline {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 48.83px;
   font-style: normal;
   font-weight: 700;
   line-height: 124%; /* 60.549px */
}
.h3-headline {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 39.06px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 54.684px */
}
.h4-headline {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 31.25px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 43.75px */
}
.subtitle-extra-large-bold{
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 25px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 35px */
}
.subtitle-large-bold{
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 28px */
}
.subtitle-medium-bold{
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 22.4px */
}
.subtitle-small-bold{
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%; /* 19.6px */
}
.subtitle-extra-large-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 25px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}
.subtitle-large-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}
.subtitle-medium-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}
.subtitle-small-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}
.subtitle-xs-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}
.subtitle-xxs-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 10px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
}
.subtitle-extra-large-medium {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 25px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}
.subtitle-large-medium {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}
.subtitle-medium-medium {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}
.subtitle-small-medium {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}
.subtitle-xs-medium {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}
.subtitle-xxs-medium {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 10px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}
.body-text-large-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
}
.body-text-medium-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
}
.body-text-small-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
}
.body-text-xs-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
}
.body-text-xxs-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
}
.link-underlined-medium-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-small-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-xs-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-xxs-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 10px;
   font-style: normal;
   font-weight: 600;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-medium-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-small-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-xs-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.link-underlined-xxs-regular {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%; /* 14px */
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-skip-ink: none;
   text-decoration-thickness: auto;
   text-underline-offset: auto;
   text-underline-position: from-font;
}
.numbering-badge-xs-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%;
}
.numbering-badge-xxs-semibold {
   color: var(--Text-Neutral-Title, #171D27);
   font-family: "Noto Sans";
   font-size: 10px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%;
}
.numbering-badge-xxxs-semibold {
  color: var(--Text-Neutral-Title, #171D27);
  font-family: "Noto Sans";
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}
/* ─────────────────────────────────────────────────────────────────────────
                           Centralized FOOTER Design 
   ───────────────────────────────────────────────────────────────────────── */
.agone-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 32px;
  padding: 0 24px;
  /* margin: 0 auto 10px; */
  margin: 0;
  background: var(--color-white-100, #FFF);
}

.agone-footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 100%;
  max-width: 700px; */
  text-align: center;
  margin: 0;
}

.agone-footer-text {
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: var(--text-neutral-subtext-light, #8C9EBB);
}
/* ─────────────────────────────────────────────────────────────────────────
                           End of Centralized FOOTER Design 
   ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
                           Centralized HEADER Design
   ───────────────────────────────────────────────────────────────────────── */
.agone-header {
  width: 100%;
  height: 65px;
  align-self: stretch;
  background: var(--surface-neutral-negative, #FFF);
  border-bottom: 0.5px solid var(--border-neutral-subtle-light, #E5E8F0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--number-0, 0) var(--number-24, 24px);
  /* margin: 0 auto; */
  /* flex-shrink: 0; */
  gap: 24px;
}
.agone-header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.agone-header-icon-btn {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  /* display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-neutral-default);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s; */
}

.agone-header-icon-btn:hover {
  background: var(--color-neutral-50);
}

.agone-header-icon-btn:active {
  background: var(--color-neutral-100); 
}

.agone-header-notification {
  width: 16px;
  height: 20px;
  flex-shrink: 0;
  fill: var(--icon-neutral-default, #3C4C67);
}

.agone-header-notification-badge {
  display: flex;
  width: 16px;
  height: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--color-red-500);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.agone-header-logo {
  width: 150px;
  height: 32px;
  padding-right: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 25/6;
  flex-shrink: 0;
}

/* User profile (MainLayout: user-profile-wrapper, user-profile-btn) */
/* .user-profile-wrapper, */
.agone-user-profile-wrapper {
  position: relative;
}

/* .user-profile-btn, */
.agone-user-profile-btn {
  display: flex;
  align-items: center;
  gap: var(--number-8, 8px);
  /* padding: var(--number-4, 4px); */
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  flex-direction: column;
}

/* .user-profile-btn:hover, */
.agone-user-profile-btn:hover {
  background: var(--surface-neutral-lighter, var(--color-neutral-100));
}

.agone-header-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agone-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agone-header-avatar .avatar-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  /* color: var(--color-neutral-600); */
  color: var(--text-neutral-negative, #FFFFFF);
  /* background: var(--color-neutral-100); */
  background: linear-gradient(135deg, #296DF5 0%, #7742FF 100%);

}

/* ─────────────────────────────────────────────────────────────────────────
                           End of Centralized HEADER Design 
   ───────────────────────────────────────────────────────────────────────── */

   
/* ─────────────────────────────────────────────────────────────────────────
                           Centralized SIDEBAR Design (MainLayout: .sidebar)
   ───────────────────────────────────────────────────────────────────────── */

.agone-sidebar-component-wrapper {
    height: 100vh;
    transition: width 0.3s ease;
    position: relative;
    flex-shrink: 0;
    z-index: 100;
}

/* Floating: narrow layout column; expanded panel paints past the spacer (overlay). */
.agone-sidebar-component-wrapper.layout-floating {
    overflow: visible;
}

.agone-sidebar-component-wrapper.layout-floating .agone-sidebar-container {
    z-index: 200;
}

/* When floating (unpinned), we add a shadow so it looks like an overlay */
.agone-sidebar-container.floating {
    box-shadow: 10px 0 25px rgba(180, 180, 180, 0.5);
}

/* When pinned, we might want a subtle border instead of a heavy shadow */
.agone-sidebar-container.pinned {
    box-shadow: none;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.agone-sidebar-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: #05153D;
    transition: width 0.3s ease, box-shadow 0.3s ease;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
}

.agone-sidebar-main {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-right: 1px solid var(--Neutral-Palette-Border-Disabled-Light, #E4E4E6);
    background: var(--Menu-Dark, #05153D);
}

.agone-sidebar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.agone-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

.agone-logo-wrapper img, .agone-mini-logo {
    height: 1.5rem; /* 24px */
}

.agone-mini-logo {
    margin: 0 auto;
}

.agone-toggle-btn {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0.25rem !important; /* 4px */
}

.agone-sidebar-content {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.agone-nav-rail {
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-top: 1.25rem; /* 20px */
    z-index: 30;
}

.agone-nav-divider {
    height: 0.125rem;
    background: #083DA6;
    margin: 0.625rem auto;
    opacity: 0.5;
    border-radius: 12;
}

.agone-menu-item {
    padding: 0.75rem 1.5rem; /* 12px 24px */
    margin: 0.25rem 0; /* 4px */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    transition: all 0.2s;
    color: rgba(255, 255, 255, 0.6);
}

.agone-menu-item.centered {
    justify-content: center;
    padding: 0.75rem;
}

.agone-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.agone-menu-item.selected {
    background: linear-gradient(
    267.3deg, 
    rgba(74, 122, 255, 0.5) 11.41%, 
    rgba(0, 29, 107, 0.3) 127.13%
    );
    color: #84F4FB;
}

.agone-menu-item.selected:not(.centered) {
    border-right: 0.1875rem solid #64D2FF; /* 3px */
}

.agone-menu-label {
    font-size: 0.875rem; /* 14px */
    white-space: nowrap;
    color: #ffffff

}

/* Sub-menu Flyout */
.agone-sub-menu-flyout {
    width: 15rem; /* 240px */
    z-index: 20;
    animation: slideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.agone-sub-menu-header {
    background: rgba(101, 50, 231, 0.2);
    padding: 0 1.5rem;
    color: #CCB8FF;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    height: 2.75rem;
    align-content: center;
}

.agone-sub-menu-item {
    padding: 1rem 1.5rem; /* 16px 24px */
    font-size: 0.875rem; /* 14px */
    cursor: pointer;
    font-weight: 600;
    color: #ffffff
}

.agone-sub-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.agone-sidebar-footer{
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 0 1rem;
    position: relative;
    z-index: 2;
}

.agone-footer-title{
    font-size: 0.875rem;
    white-space: nowrap;
    color: #ffffff;
}
.agone-footer-sub-title{
    font-size: 0.625rem;
    white-space: nowrap;
    color: #ffffff;
}

.agone-section-header {
    font-size: 0.875rem; /* 14px */
    white-space: nowrap;
    padding: 0 1rem; /* 24px */
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.5rem;
}

.agone-my-gradient-box {
    position: absolute; /* Pulls it out of the layout flow */
    top: 85%;           /* Adjust positioning as needed */
    left: 85%;
    z-index: 0;         /* Puts it behind the text/icons */
    
    /* Dimensions from your Figma shot */
    width: 470px;
    height: 293px;
    
    /* Using conic-gradient for "Angular" look */
    background: conic-gradient(
        from 180deg, 
        #2962F5, 
        #B650F1, 
        #39CBD0, 
        #2962F5
    );

    /* Rotation and Blur */
    transform: translate(-50%, -50%) rotate(-139.32deg);
    filter: blur(83.4px);
    
    /* Optimization for high blur */
    will-change: filter;
    pointer-events: none; /* User can click "through" the gradient to buttons */
}

/* ===== Product Switcher Dropdown ===== */
.agone-product-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.agone-product-dropdown-panel {
    position: absolute;
    top: 3rem;
    left: 6rem;
    width: 24rem;
    background: #F5F6FA;
    border-radius: 1.25rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 1.75rem 1.5rem 1.5rem;
    overflow: hidden;
    animation: dropdownFadeIn 0.22s ease-out;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.agone-product-dropdown-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    padding-top: 0.5rem;
}

.agone-product-dropdown-logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    transition: background 0.15s ease;
}

.agone-product-dropdown-logo:hover {
    background: rgba(26, 92, 255, 0.07);
}

.agone-product-dropdown-ag-icon {
    height: 1.8rem;
}

.agone-product-dropdown-one-text {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0D3B8F;
    letter-spacing: 0.02em;
}

.agone-product-dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.agone-product-card {
    text-decoration: none;
    display: block;
    /* Each card takes exactly 1/3 of the row width minus its share of the two column gaps.
       2 gaps × 0.75rem / 3 items = 0.5rem per item */
    flex: 0 0 calc(33.333% - 0.5rem);
    border-radius: 0.875rem;
    background: #FFFFFF;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 0.85;
}

.agone-product-card:hover {
    box-shadow: 0 4px 20px rgba(41, 98, 245, 0.18), 0 0 0 1px rgba(41, 98, 245, 0.12);
    transform: translateY(-2px);
}

.agone-product-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    height: 100%;
    gap: 0.25rem;
}

.agone-product-card-logo-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.agone-product-card-ag-icon {
    height: 1rem;
}

.agone-product-card-one {
    font-size: 1.1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1A5CFF, #00C4D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
}

.agone-product-card-label {
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #1A5CFF, #00C4D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 2px;
    line-height: 1.3;
    border-bottom: 2px solid;
    border-image: linear-gradient(135deg, #1A5CFF, #00C4D4) 1;
}

.agone-product-dropdown-gradient-bg {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    width: 20rem;
    height: 10rem;
    background: conic-gradient(
        from 180deg,
        rgba(41, 98, 245, 0.25),
        rgba(182, 80, 241, 0.2),
        rgba(57, 203, 208, 0.15),
        rgba(41, 98, 245, 0.25)
    );
    transform: translateX(-50%);
    filter: blur(50px);
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}

.agone-sidebar-footer-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 480px; 
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.agone-sidebar-footer-gradient img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    mix-blend-mode: screen;
}

/* Recruit Flow Modal - Overlay */
.agone-recruit-flow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Recruit Flow Modal - Content Container */
.agone-recruit-flow-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    padding: 32px;
}

/* Recruit Flow Modal - Header */
.agone-recruit-flow-header {
    margin-bottom: 32px;
}

.agone-recruit-flow-title {
    font-size: 24px;
    font-weight: 600;
    color: rgb(17, 24, 39);
    margin-bottom: 12px;
}

.agone-recruit-flow-description {
    font-size: 14px;
    color: rgb(107, 114, 128);
    line-height: 1.6;
}

/* Recruit Flow Modal - Options */
.agone-recruit-flow-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.agone-recruit-flow-option {
    border: 2px solid rgb(229, 231, 235);
    border-radius: 12px;
    padding: 24px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.agone-recruit-flow-option:hover {
    border-color: rgb(191, 219, 254);
    background: rgb(249, 250, 251);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.agone-recruit-flow-option-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.agone-recruit-flow-option-icon.integrated {
    background: rgb(59, 130, 246);
}

.agone-recruit-flow-option-icon.manual {
    background: rgb(249, 115, 22);
}

.agone-recruit-flow-option-icon svg {
    stroke: white;
}

.agone-recruit-flow-option-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(17, 24, 39);
    margin-bottom: 8px;
}

.agone-recruit-flow-option-description {
    font-size: 13px;
    color: rgb(107, 114, 128);
    line-height: 1.5;
}

/* Recruit Flow Modal - Responsive */
@media (max-width: 768px) {
    .recruit-flow-options {
        grid-template-columns: 1fr;
    }
    
    .recruit-flow-content {
        padding: 24px;
    }
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */

/* ─────────────────────────────────────────────────────────────────────────
                           End of Centralized SIDEBAR Design 
   ───────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
   PROFILE DROPDOWN (MainLayout classes — AG-ONE Design)
   ───────────────────────────────────────────────────────────────────────── */

/* 

@keyframes agone-dropdown-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 */
.agone-profile-dropdown {
  position: absolute;
  /* top: calc(100% + var(--number-8, 8px)); */
  right: 0;
  width: 250px;
  padding: 16px 0;
  gap: 16px;
  background: var(--surface-neutral-negative, #FFF);
  /* border: 1px solid var(--border-neutral-subtle-light, #E5E8F0); */
  border: 1px solid var(--border-neutral-subtle-light, #E5E8F0) !important;
  /* border-radius: var(--number-12, 12px); */
  border-radius: 12px !important;
  /* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); */
  box-shadow: 0 5px 15px 2px rgba(137, 155, 182, 0.40) !important;
  z-index: 1000;
  overflow: hidden;
  animation: agone-dropdown-slide 0.15s ease-out;
}

.agone-profile-dropdown-header {
  display: flex;
  align-items: center;
  /* gap: 12px;
  padding: 20px; */
  padding: 0 16px;
  padding-bottom: 16px;
}
.agone-profile-dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background: var(--color-neutral-100);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}
.agone-profile-dropdown-info {
  display: flex;
  flex-direction: column;
  /* gap: 2px; */
  gap: 0px;
  min-width: 0;
  padding-left: 12px;
}
.agone-profile-dropdown-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agone-profile-dropdown-avatar .avatar-fallback-large {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  /* color: var(--color-neutral-600); */
  color: var(--text-neutral-negative, #FFFFFF);
  /* background: var(--color-neutral-100); */
  background: linear-gradient(135deg, #296DF5 0%, #7742FF 100%);
}

.agone-profile-dropdown-menu {
  /* padding: var(--number-8, 8px) var(--number-16, 16px);
  display: flex;
  gap: 8px;
  min-width: 100px;
  align-items: center;
  align-self: stretch;
  background: var(--surface-neutral-negative, #FFF); */
  display: flex;
  flex-direction: column;
  padding: var(--Number-8, 8px) var(--Number-16, 16px);
  gap: 8px;
  align-self: stretch;
} 
.agone-profile-dropdown-name {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: var(--text-neutral-title, #171D27);
  line-height: 140%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  align-self: stretch;
}
.agone-profile-dropdown-role {
    font-size: 10px;
    color: var(--text-neutral-subtext-dark, #3C4C67);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    align-self: stretch;
    font-family: "Noto Sans";
    font-style: normal;
    line-height: 140%;
}
.agone-profile-dropdown-email {
    font-size: 10px;
    color: var(--text-neutral-subtext-dark, #3C4C67);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    align-self: stretch;
    font-family: "Noto Sans";
    font-style: normal;
    line-height: 140%;
}
.profile-dropdown-myprofile-signout-text {
    flex: 1 0 0;
    color: var(--text-neutral-bodytext, #283243);
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
}

.agone-profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--number-8, 8px);
  min-width: 100px;
  padding: var(--number-8, 8px) var(--number-16, 16px);
  background: transparent;
  border: none;
  border-radius: var(--number-8, 8px);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  justify-content: flex-start;
  align-self: stretch;
  font-style: normal;
  line-height: 140%;
  transition: background 0.15s;
  flex: 1 0 0;
}

.agone-profile-dropdown-item svg {
  color: var(--icon-neutral-default);
  flex-shrink: 0;
  margin-right: 8px;
}
.agone-profile-dropdown-item:hover {
  background: var(--surface-neutral-subtle, #E5E8F0);
}

.profile-dropdown-item-my-profile {
  color: var(--text-neutral-bodytext, #283243);
  background: var(--surface-neutral-negative, #FFF);
}

/* .profile-dropdown-item-my-profile:hover {
  background: var(--surface-neutral-lighter, #D6DBE6);
} */

.profile-dropdown-item-sign-out {
  color: var(--text-neutral-bodytext, #283243);
  background: var(--surface-neutral-negative, #FFF);
}

/* .profile-dropdown-item-sign-out:hover {
  background: var(--surface-neutral-lighter, #D6DBE6);
} */

.profile-dropdown-item-sign-out svg {
  color: var(--icon-neutral-default, #3C4C67);
}
/* ─────────────────────────────────────────────────────────────────────────
                           End of PROFILE DROPDOWN Design 
   ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
                           CENTRALIZED BUTTON Design 
   ───────────────────────────────────────────────────────────────────────── */
/*Design of Button Groups*/
.agone-btn-group-align{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;
}
.right{
    justify-content: flex-end;
}
.center{
    justify-content: flex-center;
}
.left{
    justify-content: flex-start;
}
/*End of Design of Button Groups*/
/*Example Usage is Cancel Button*/
.agone-btn-tertiary-medium{
    color: var(--button-tertiary-text-default) !important;
    background: var(--surface-neutral-negative, #FFF) !important;
    border: 1px solid var(--button-tertiary-border-default, #9FAEC6);
    border-radius: 6px !important;
    display: flex;
    height: 38px;
    min-width: 100px;
    padding: var(--number-0, 0) var(--number-16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--number-0, 0);
    text-transform: none !important;
    box-shadow: none !important;   
}
.agone-btn-tertiary-medium-text{
    color: var(--button-tertiary-text-default, #3C4C67);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; 
    padding-left: 16px;
    padding-right: 16px;
}
.agone-btn-tertiary-medium:hover{
    color: var(--button-tertiary-text-hover) !important;
    background: var(--button-tertiary-surface-hover) !important;
    border: 1px solid var(--button-tertiary-border-default) !important;
}
.agone-btn-tertiary-medium:active{
    color: var(--button-tertiary-text-pressed) !important;
    background: var(--button-tertiary-surface-pressed) !important;
    border: 1px solid var(--button-tertiary-border-default) !important;
}
/*End of Cancel Button Design*/
/*Example Usage is Save Button Design*/
.agone-btn-primary-medium{
    color: var(--button-primary-text, #FFFFFF) !important;
    background: var(--gradient-p500-s500-135);
    border-radius: 6px !important;
    display: flex;
    height: 38px;
    min-width: 100px;
    padding: var(--number-0, 0) var(--number-16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--number-0, 0);
    text-transform: none !important;
    box-shadow: none !important;
}
.agone-btn-primary-medium-text{
    color: var(--button-primary-text, #FFFFFF);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; 
    padding-left: 16px;
    padding-right: 16px;
}
.agone-btn-primary-medium:hover{
    background: var(--gradient-s400-p400-90) !important;
}
.agone-btn-primary-medium:active{
    background: var(--gradient-p500-s500-135) !important;
    box-shadow: 0 250px 0 0 rgba(0, 29, 104, 0.15) inset;
}

/*End of Save Button Design*/
/*Example Usage is Delete Button Design*/
.agone-btn-destructive-medium{
    color: var(--button-destructive-text) !important;
    background: var(--gradient-o500-r600-135) !important;
    border-radius: 6px !important;
    display: flex;
    height: 38px;
    min-width: 100px;
    padding: var(--number-0, 0) var(--number-16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--number-0, 0);  
}
.agone-btn-destructive-medium-text{
    color: var(--button-destructive-text, #FFFFFF);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; 
    padding-left: 16px;
    padding-right: 16px;
}
.agone-btn-destructive-medium:hover{
    background: var(--gradient-r600-o500-135) !important;
}
.agone-btn-destructive-medium:active{
    background: var(--gradient-r600-o500-135) !important;
}
.fill{
    flex: 1 0 0;
}
/*End of Delete Button Design*/
.agone-btn-secondary-medium{
    color: var(--button-secondary-text-default, #296DF5);
    background: var(--surface-neutral-negative, #FFF);
    border-radius: 6px !important;
    border: 1px solid var(--gradient-p-500-purple-400135, #296DF5);
    display: flex;
    height: 38px;
    min-width: 100px;
    padding: var(--number-0, 0) var(--number-16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--number-0, 0);  
    flex: 1 0 0;
}
.agone-btn-secondary-medium-text{
    color: var(--button-secondary-text-default, #296DF5);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; 
    padding-left: 16px;
    padding-right: 16px;
}
.agone-btn-secondary-medium:hover{
    background: var(--button-secondary-surface-hover, rgba(222, 238, 255, 0.30));
}
.agone-btn-secondary-medium:active{
    background: var(--button-secondary-surface-pressed, rgba(222, 238, 255, 0.60));
}

.agone-btn-primary {
  color: white;
  background-color: #2563eb;
  border-color: #2563eb;
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  transition: all 150ms ease;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.agone-btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.agone-btn-primary:active {
  background-color: #1e40af;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────
                           END OF CENTRALIZED BUTTON Design 
   ───────────────────────────────────────────────────────────────────────── */
/* Max Testing */
/* Base State: Vibrant Lime (Top-Left) to Clear Cyan (Bottom-Right) */
    .agone-btn-activate-custom {
        /* Exact vibrant hex codes from your screenshot */
        background: linear-gradient(135deg, #D4F05A 0%, #48D391 50%, #5CE9E9 100%) !important;
        
        color: #1A302E !important;
        font-weight: 500 !important;
        font-size: 0.875rem !important;
        height: 36px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        text-transform: none !important;
        transition: all 0.5s ease-in-out !important;
        border: none !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
 
    /* Hover State: Diagonal Swap (Cyan to Lime) */
    .agone-btn-activate-custom:hover {
        background: linear-gradient(135deg, #5CE9E9 0%, #48D391 50%, #D4F05A 100%) !important;
    }
 
    /* Icon styling with a more subtle dark teal filter */
    .agone-activate-icon-style {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        filter: brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1200%) hue-rotate(125deg);
    }


        /* ─────────────────────────────────────────────────────────────────────────
                                       End of AG-ONE Design System 
            ───────────────────────────────────────────────────────────────────────── */