:root {
	--colorText: #0e0d1be0;
	--colorTextSecondary: #0e0d1ba6;
	--colorTextTertiary: #0e0d1b73;
	--colorTextQuaternary: #0e0d1b40;
	--colorTextLightSolid: #ffff;
	--colorTextOnPrimary: #ffff;
	--colorTextHeading: var(--colorText);
	--colorTextLabel: var(--colorTextSecondary);
	--colorTextDescription: var(--colorTextTertiary);
	--colorTextDisabled: var(--colorTextQuaternary);
	--colorTextPlaceholder: var(--colorTextQuaternary);
	--colorIcon: var(--colorText);
	--colorIconHover: var(--colorTextSecondary);
	--colorIconSecondary: var(--colorText);
	--colorIconOnPrimary: var(--colorTextOnPrimary);
	--colorIconDisabled: var(--colorTextDisabled);
	--colorBgContainer: var(--colorBgBase);
	--colorBgElevated: var(--colorBgBase);
	--colorBgNavigation: var(--colorBgBase);
	--colorBgLayout: #f5f5f5ff;
	--colorBgMask: #0e0d1b73;
	--colorBgSpotlight: #0e0d1bd9;
	--colorBgSpotlightSecondary: #0e0d1b1f;
	--colorBgSpotlightTerciary: #0e0d1b14;
	--colorBgSpotlightQuaternary: #0e0d1b0a;
	--colorBorder: #d9d9d9ff;
	--colorBorderSecondary: #f0f0f0ff;
	--colorFill: #0e0d1b26;
	--colorFillSecondary: #0e0d1b0f;
	--colorFillTertiary: #0e0d1b0a;
	--colorFillQuaternary: #0e0d1b05;
	--colorWhite: #ffff;
	--colorBgBase: #ffff;
	--colorTextBase: #0e0d1bff;
	--colorBgContainerDisabled: var(--colorFillTertiary);
	--colorBorderBold: #0e0d1bff;
	--colorBgTextActive: var(--colorFill);
	--colorBgTextHover: var(--colorFillSecondary);
	--colorBorderBg: var(--colorBgContainer);
	--colorFillContent: var(--colorFillSecondary);
	--colorFillContentHover: var(--colorFill);
	--colorFillAlter: var(--colorFillQuaternary);
	--colorFillAlterSolid: #fafafaff;
	--transparent: #0e0d1b00;
	--colorSplit: #0e0d1b0f;
	--primary-1: #ff905cff;
	--primary-2: #ff702eff;
	--primary-3: #ff5100ff;
	--primary-4: #d04202ff;
	--primary-5: #a13303ff;
	--colorPrimaryBg: #ff702e3d;
	--colorPrimaryBgHover: #ff702e52;
	--colorPrimaryBorder: var(--primary-1);
	--colorPrimaryBorderHover: var(--primary-2);
	--colorPrimaryHover: var(--primary-3);
	--colorPrimary: var(--primary-3);
	--colorPrimaryActive: var(--primary-3);
	--colorPrimaryTextHover: var(--primary-4);
	--colorPrimaryText: var(--primary-3);
	--colorPrimaryTextActive: var(--primary-4);
	--secondary-1: #83d4fcff;
	--secondary-2: #2eb4f5ff;
	--secondary-3: #0ea1e7ff;
	--secondary-4: #0e84b9ff;
	--secondary-5: #15417eff;
	--colorSecondaryBg: #2eb4f53d;
	--colorSecondaryBgHover: #2eb4f552;
	--colorSecondaryBorder: var(--secondary-1);
	--colorSecondaryBorderHover: var(--secondary-2);
	--colorSecondaryHover: var(--secondary-2);
	--colorSecondary: var(--secondary-3);
	--colorSecondaryActive: var(--secondary-2);
	--colorSecondaryTextHover: var(--secondary-2);
	--colorSecondaryText: var(--secondary-3);
	--colorSecondaryTextActive: var(--secondary-2);
	--colorSuccessBg: #d9f6daff;
	--colorSuccessBgHover: #b6eebaff;
	--colorSuccessBorder: #93e79cff;
	--colorSuccessBorderHover: #70e07fff;
	--colorSuccessHover: #70e07fff;
	--colorSuccess: #52c41aff;
	--colorSuccessActive: #28a13aff;
	--colorSuccessTextHover: #4cd964ff;
	--colorSuccessText: #52c41aff;
	--colorSuccessTextActive: #28a13aff;
	--colorWarningBg: #fffbe6ff;
	--colorWarningBgHover: #fff1b8ff;
	--colorWarningBorder: #ffe58fff;
	--colorWarningBorderHover: #ffd666ff;
	--colorWarningHover: #ffd666ff;
	--colorWarning: #faad14ff;
	--colorWarningActive: #d48806ff;
	--colorWarningTextHover: #ffc53dff;
	--colorWarningText: #faad14ff;
	--colorWarningTextActive: #d48806ff;
	--colorWarningOutline: #ffd7051a;
	--colorErrorBg: #fff2f0ff;
	--colorErrorBgHover: #fff1f0ff;
	--colorErrorBorder: #ffccc7ff;
	--colorErrorBorderHover: #ffa39eff;
	--colorError: #ff4d4fff;
	--colorErrorHover: #ff7875ff;
	--colorErrorActive: #d9363eff;
	--colorErrorTextHover: #ff7875ff;
	--colorErrorText: #ff4d4fff;
	--colorErrorTextActive: #d9363eff;
	--colorErrorOutline: #ff26060f;
	--colorPrizeBg: #fffbe6ff;
	--colorPrizeBgHover: #fff1b8ff;
	--colorPrizeBorder: #ffe58fff;
	--colorPrizeBorderHover: #ffd666ff;
	--colorPrizeHover: #ffd666ff;
	--colorPrize: #faad14ff;
	--colorPrizeActive: #d48806ff;
	--colorPrizeTextHover: #ffc53dff;
	--colorPrizeText: #faad14ff;
	--colorPrizeTextActive: #d48806ff;
	--colorPrizeOutline: #ffd7051a;
	--brand-1: #ff905cff;
	--brand-2: #ff702eff;
	--brand-3: #ff5100ff;
	--brand-4: #d04202ff;
	--brand-5: #a13303ff;
	--colorPrimaryBg: #ff702e3d;
	--colorPrimaryBgHover: #ff702e52;
	--colorPrimaryBorder: var(--brand-1);
	--colorPrimaryBorderHover: var(--brand-2);
	--colorPrimaryHover: var(--brand-3);
	--colorPrimary: var(--brand-3);
	--colorPrimaryActive: var(--brand-3);
	--colorPrimaryTextHover: var(--brand-4);
	--colorPrimaryText: var(--brand-3);
	--colorPrimaryTextActive: var(--brand-4);
	--colorInfoBg: var(--colorPrimaryBg);
	--colorInfoBgHover: var(--colorPrimaryBgHover);
	--colorInfoBorder: var(--colorPrimaryBorder);
	--colorInfoBorderHover: var(--colorPrimaryBorderHover);
	--colorInfoHover: var(--colorPrimaryHover);
	--colorInfo: var(--colorPrimary);
	--colorInfoActive: var(--colorPrimaryActive);
	--colorInfoTextHover: var(--colorPrimaryTextHover);
	--colorInfoText: var(--colorPrimaryText);
	--colorInfoTextActive: var(--colorPrimaryTextActive);
	--controlOutline: #0591ff1a;
	--controlItemBgActive: #461602;
	--skeletonStart: #f2f4f7;
	--skeletonEnd: #d0d5dd;

	/* 2. Dimensions - Default */
	--sizeStep: 4px;
	--sizeUnit: 4px;
	--controlInteractiveSize: 16px;
	--sizePopupArrow: 16px;
	--sizeXXS: 4px;
	--sizeXS: 8px;
	--sizeSM: 12px;
	--size: 16px;
	--sizeMS: 16px;
	--sizeMD: 20px;
	--sizeLG: 24px;
	--sizeXL: 32px;
	--sizeXXL: 48px;
	--controlHeight: 32px;
	--controlHeightLG: 40px;
	--controlHeightSM: 24px;
	--controlHeightXS: 16px;
	--onlyIconSizeSM: 14px;
	--onlyIconSizeLG: 18px;
	--onlyIconSize: 16px;
	--lineWidth: 1px;
	--lineWidthBold: 2px;
	--lineWidthFocus: 4px;
	--controlOutlineWidth: 2px;
	--screenLG: 992px;
	--screenLGMax: 1199px;
	--screenLGMin: var(--screenLG);
	--screenMD: 768px;
	--screenMDMax: 991px;
	--screenMDMin: var(--screenMD);
	--screenSM: 576px;
	--screenSMMax: 767px;
	--screenSMMin: var(--screenSM);
	--screenXL: 1200px;
	--screenXLMax: 1599px;
	--screenXLMin: var(--screenXL);
	--screenXS: 480px;
	--screenXSMax: 575px;
	--screenXSMin: var(--screenXS);
	--screenXXL: 1600px;
	--screenXXLMin: var(--screenXXL);
	--margin: var(--size);
	--marginLG: var(--sizeLG);
	--marginMD: var(--sizeMD);
	--marginSM: var(--sizeSM);
	--marginXL: var(--sizeXL);
	--marginXS: var(--sizeXS);
	--marginXXL: var(--sizeXXL);
	--marginXXS: var(--sizeXXS);
	--padding: var(--size);
	--paddingLG: var(--sizeLG);
	--paddingMD: var(--sizeMD);
	--paddingSM: var(--sizeSM);
	--paddingXL: var(--sizeXL);
	--paddingXS: var(--sizeXS);
	--paddingXXS: var(--sizeXXS);
	--paddingInline: 11px;
	--paddingContentHorizontal: var(--sizeMS);
	--paddingContentHorizontalLG: var(--sizeLG);
	--paddingContentHorizontalSM: var(--size);
	--paddingContentVertical: var(--sizeSM);
	--paddingContentVerticalLG: var(--sizeMS);
	--paddingContentVerticalSM: var(--sizeXS);
	--controlPaddingHorizontal: 12px;
	--controlPaddingHorizontalSM: 8px;
	--borderRadius: 6px;
	--borderRadiusLG: 8px;
	--borderRadiusSM: 4px;
	--borderRadiusXS: 2px;

	/* 3. Typography - Default */
	--fontFamily: 'Inter', sans-serif;
	--fontFamilyCode: 'Courier Prime', monospace;
	--fontWeightNormal: 400;
	--fontWeightMedium: 500;
	--fontWeightSemiBold: 600;
	--fontWeightBold: 700;
	--fontWeightExtraBold: 800;
	--fontSizeXL: 20px;
	--fontSizeIcon: 12px;
	--fontSize: 14px;
	--lineHeight: 22px;
	--fontSizeSM: 12px;
	--lineHeightSM: 20px;
	--fontSizeLG: 16px;
	--lineHeightLG: 24px;
	--fontSizeHeading1: 38px;
	--lineHeightHeading1: 46px;
	--fontSizeHeading2: 30px;
	--lineHeightHeading2: 38px;
	--fontSizeHeading3: 24px;
	--lineHeightHeading3: 32px;
	--fontSizeHeading4: 20px;
	--lineHeightHeading4: 28px;
	--fontSizeHeading5: 16px;
	--lineHeightHeading5: 24px;
	--lineHeightXS: 16px;
}

.compact {
	/* 2. Dimensions - Compact */
	--sizeStep: 2px;
	--sizeUnit: 4px;
	--controlInteractiveSize: 14px;
	--sizePopupArrow: 16px;
	--sizeXXS: 4px;
	--sizeXS: 4px;
	--sizeSM: 8px;
	--size: 8px;
	--sizeMS: 12px;
	--sizeMD: 16px;
	--sizeLG: 16px;
	--sizeXL: 32px;
	--sizeXXL: 48px;
	--controlHeight: 28px;
	--controlHeightLG: 35px;
	--controlHeightSM: 21px;
	--controlHeightXS: 14px;
	--lineWidth: 1px;
	--lineWidthBold: 2px;
	--lineWidthFocus: 4px;
	--controlOutlineWidth: 2px;
	--screenLG: 992px;
	--screenLGMax: 1199px;
	--screenLGMin: var(--screenLG);
	--screenMD: 768px;
	--screenMDMax: 991px;
	--screenMDMin: var(--screenMD);
	--screenSM: 576px;
	--screenSMMax: 767px;
	--screenSMMin: var(--screenSM);
	--screenXL: 1200px;
	--screenXLMax: 1599px;
	--screenXLMin: var(--screenXL);
	--screenXS: 480px;
	--screenXSMax: 575px;
	--screenXSMin: var(--screenXS);
	--screenXXL: 1600px;
	--screenXXLMin: var(--screenXXL);
	--margin: var(--size);
	--marginLG: var(--sizeLG);
	--marginMD: var(--sizeMD);
	--marginSM: var(--sizeSM);
	--marginXL: var(--sizeXL);
	--marginXS: var(--sizeXS);
	--marginXXL: var(--sizeXXL);
	--marginXXS: var(--sizeXXS);
	--padding: var(--size);
	--paddingLG: var(--sizeLG);
	--paddingMD: var(--sizeMD);
	--paddingSM: var(--sizeSM);
	--paddingXL: var(--sizeXL);
	--paddingXS: var(--sizeXS);
	--paddingXXS: var(--sizeXXS);
	--paddingContentHorizontal: var(--sizeMS);
	--paddingContentHorizontalLG: var(--sizeLG);
	--paddingContentHorizontalSM: var(--size);
	--paddingContentVertical: var(--sizeSM);
	--paddingContentVerticalLG: var(--sizeMS);
	--paddingContentVerticalSM: var(--sizeXS);
	--controlPaddingHorizontal: 12px;
	--controlPaddingHorizontalSM: 8px;
	--borderRadius: 6px;
	--borderRadiusLG: 8px;
	--borderRadiusSM: 4px;
	--borderRadiusXS: 2px;

	/* 3. Typography - Compact */
	--fontSize: 12px;
	--fontSizeLG: 14px;
	--fontSizeSM: 10px;
	--fontSizeXL: 16px;
	--fontSizeHeading1: 32px;
	--fontSizeHeading2: 26px;
	--fontSizeHeading3: 20px;
	--fontSizeHeading4: 16px;
	--fontSizeHeading5: 14px;
	--lineHeightXXS: 14px;
	--lineHeightXS: 16px;
	--lineHeight: 20px;
	--lineHeightLG: 22px;
	--lineHeightSM: 18px;
	--lineHeightHeading1: 40px;
	--lineHeightHeading2: 34px;
	--lineHeightHeading3: 28px;
	--lineHeightHeading4: 24px;
	--lineHeightHeading5: 22px;
	--fontSizeIcon: 12px;
	--fontWeightNormal: 400;
	--fontWeightMedium: 500;
	--fontWeightSemiBold: 600;
	--fontWeightBold: 700;
	--fontWeightExtraBold: 800;
}

/* Dark Mode Styles */

/* This will override the default styles when dark mode is enabled */
.dark-mode {
	--colorText: #ffff;
	--colorTextSecondary: #ffffffb2;
	--colorTextTertiary: #ffffff73;
	--colorTextQuaternary: #ffffff40;
	--colorTextLightSolid: #ffff;
	--colorTextOnPrimary: #ffff;
	--colorTextHeading: var(--colorText);
	--colorTextLabel: var(--colorTextSecondary);
	--colorTextDescription: var(--colorTextTertiary);
	--colorTextDisabled: var(--colorTextQuaternary);
	--colorTextPlaceholder: var(--colorTextTertiary);
	--colorIcon: var(--colorText);
	--colorIconHover: var(--colorTextSecondary);
	--colorBgContainer: #383843ff;
	--colorIconSecondary: var(--colorTextTertiary);
	--colorIconOnPrimary: var(--colorTextOnPrimary);
	--colorIconDisabled: var(--colorTextDisabled);
	--colorBgElevated: #21202dff;
	--colorBgNavigation: #181724ff;
	--colorBgLayout: var(--colorBgBase);
	--colorBgMask: #0e0d1b73;
	--colorBgSpotlight: #272636ff;
	--colorBgSpotlightSecondary: #ffffff1f;
	--colorBgSpotlightTerciary: #ffffff14;
	--colorBgSpotlightQuaternary: #ffffff0a;
	--colorBorder: #424242ff;
	--colorBorderSecondary: #303030ff;
	--colorFill: #ffffff2e;
	--colorFillSecondary: #ffffff1f;
	--colorFillTertiary: #ffffff14;
	--colorFillQuaternary: #ffffff0a;
	--colorWhite: #ffff;
	--colorBgBase: #0e0d1bff;
	--colorTextBase: #ffff;
	--colorBgContainerDisabled: var(--colorFillTertiary);
	--colorBorderBold: #ffff;
	--colorBgTextActive: var(--colorFill);
	--colorBgTextHover: var(--colorFillSecondary);
	--colorBorderBg: var(--colorBgContainer);
	--colorFillContent: var(--colorFillSecondary);
	--colorFillContentHover: var(--colorFill);
	--colorFillAlter: var(--colorFillQuaternary);
	--colorFillAlterSolid: #0e0d1bff;
	--transparent: #fff0;
	--colorSplit: #ffffff1f;
	--primary-1: #ff905cff;
	--primary-2: #ff702eff;
	--primary-3: #ff5100ff;
	--primary-4: #d04202ff;
	--primary-5: #a13303ff;
	--colorPrimaryBg: #d042023d;
	--colorPrimaryBgHover: #d0420252;
	--colorPrimaryBorder: var(--primary-3);
	--colorPrimaryBorderHover: var(--primary-2);
	--colorPrimaryHover: var(--primary-3);
	--colorPrimary: var(--primary-3);
	--colorPrimaryActive: var(--primary-3);
	--colorPrimaryTextHover: var(--primary-2);
	--colorPrimaryText: var(--primary-2);
	--colorPrimaryTextActive: var(--primary-3);
	--secondary-1: #83d4fcff;
	--secondary-2: #2eb4f5ff;
	--secondary-3: #0ea1e7ff;
	--secondary-4: #0e84b9ff;
	--secondary-5: #15417eff;
	--colorSecondaryBg: #0e84b93d;
	--colorSecondaryBgHover: #0e84b952;
	--colorSecondaryBorder: var(--secondary-4);
	--colorSecondaryBorderHover: var(--secondary-3);
	--colorSecondaryHover: var(--secondary-3);
	--colorSecondary: var(--secondary-3);
	--colorSecondaryActive: var(--secondary-3);
	--colorSecondaryTextHover: var(--secondary-1);
	--colorSecondaryText: var(--secondary-2);
	--colorSecondaryTextActive: var(--secondary-1);
	--colorSuccessBg: #0f3113ff;
	--colorSuccessBgHover: #185520ff;
	--colorSuccessBorder: #4cd964ff;
	--colorSuccessBorderHover: #93e79cff;
	--colorSuccessHover: #28a13aff;
	--colorSuccess: #4cd964ff;
	--colorSuccessActive: #2ec947ff;
	--colorSuccessTextHover: #93e79cff;
	--colorSuccessText: #4cd964ff;
	--colorSuccessTextActive: #2ec947ff;
	--colorWarningBg: #443111ff;
	--colorWarningBgHover: #594214ff;
	--colorWarningBorder: #d89614ff;
	--colorWarningBorderHover: #e8b339ff;
	--colorWarningHover: #e8b339ff;
	--colorWarning: #d89614ff;
	--colorWarningActive: #aa7714ff;
	--colorWarningTextHover: #ecc05bff;
	--colorWarningText: #e8b339ff;
	--colorWarningTextActive: #aa7714ff;
	--colorWarningOutline: #ad6b0026;
	--colorErrorBg: #431418ff;
	--colorErrorBgHover: #58181cff;
	--colorErrorBorder: #e84749ff;
	--colorErrorBorderHover: #f47e7bff;
	--colorError: #d32029ff;
	--colorErrorHover: #e84749ff;
	--colorErrorActive: #e84749ff;
	--colorErrorTextHover: #f47e7bff;
	--colorErrorText: #eb5c5eff;
	--colorErrorTextActive: #f47e7bff;
	--colorErrorOutline: #e847491c;
	--colorPrizeBg: #443111ff;
	--colorPrizeBgHover: #594214ff;
	--colorPrizeBorder: #d89614ff;
	--colorPrizeBorderHover: #aa7714ff;
	--colorPrizeHover: #aa7714ff;
	--colorPrize: #d89614ff;
	--colorPrizeActive: #aa7714ff;
	--colorPrizeTextHover: #ecc05bff;
	--colorPrizeText: #e8b339ff;
	--colorPrizeTextActive: #aa7714ff;
	--colorPrizeOutline: #ad6b0026;
	--brand-1: #ff905cff;
	--brand-2: #ff702eff;
	--brand-3: #ff5100ff;
	--brand-4: #d04202ff;
	--brand-5: #a13303ff;
	--colorPrimaryBg: #d042023d;
	--colorPrimaryBgHover: #d0420252;
	--colorPrimaryBorder: var(--brand-5);
	--colorPrimaryBorderHover: var(--brand-4);
	--colorPrimaryHover: var(--brand-3);
	--colorPrimary: var(--brand-3);
	--colorPrimaryActive: var(--brand-3);
	--colorPrimaryTextHover: var(--brand-2);
	--colorPrimaryText: var(--brand-2);
	--colorPrimaryTextActive: var(--brand-3);
	--colorInfoBg: var(--colorPrimaryBg);
	--colorInfoBgHover: var(--colorPrimaryBgHover);
	--colorInfoBorder: var(--colorPrimaryBorder);
	--colorInfoBorderHover: var(--colorPrimaryBorderHover);
	--colorInfoHover: var(--colorPrimaryHover);
	--colorInfo: var(--colorPrimary);
	--colorInfoActive: var(--colorPrimaryActive);
	--colorInfoTextHover: var(--colorPrimaryTextHover);
	--colorInfoText: var(--colorPrimaryText);
	--colorInfoTextActive: var(--colorPrimaryTextActive);
	--controlOutline: #003cb426;
	--skeletonStart: #3f3f3f;
	--skeletonEnd: #ebebf54d;
}

/* when using autofill use the same background / color as input */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus {
	/* Use a box-shadow to "paint" the background */
	box-shadow: 0 0 0 30px var(--colorBgElevated) inset !important;

	/* Ensure the text color matches your dark theme */
	-webkit-text-fill-color: var(--colorText) !important;
	transition: background-color 5000s ease-in-out 0s;
}