@charset "UTF-8";html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_lm9yc_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_lm9yc_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._snackbarContainer_lm9yc_201 {
  position: fixed;
  bottom: 128px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}
@media (max-width: 768px) {
  ._snackbarContainer_lm9yc_201 {
    width: 75%;
    bottom: 128px;
  }
}

._snackbar_lm9yc_201 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  pointer-events: auto;
  animation: _slideInUp_lm9yc_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._snackbar_lm9yc_201._exiting_lm9yc_232 {
  animation: _slideOutDown_lm9yc_1 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@supports not (backdrop-filter: blur(40px)) {
  ._snackbar_lm9yc_201 {
    background: var(--clrSecondary);
  }
}

._default_lm9yc_241 {
  background: var(--snackbarDefaultBg);
  border-color: var(--snackbarDefaultBorder);
  color: var(--snackbarDefaultText);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
._default_lm9yc_241 ._icon_lm9yc_247 {
  color: var(--snackbarDefaultIcon);
}
._default_lm9yc_241 ._closeButton_lm9yc_250 {
  color: var(--snackbarDefaultText);
}

._success_lm9yc_254 {
  background: var(--snackbarSuccessBg);
  border-color: var(--snackbarSuccessBorder);
  color: var(--snackbarSuccessText);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
._success_lm9yc_254 ._icon_lm9yc_247 {
  color: var(--snackbarSuccessIcon);
}
._success_lm9yc_254 ._closeButton_lm9yc_250 {
  color: var(--snackbarSuccessText);
}

._error_lm9yc_267 {
  background: var(--snackbarErrorBg);
  border-color: var(--snackbarErrorBorder);
  color: var(--snackbarErrorText);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
._error_lm9yc_267 ._icon_lm9yc_247 {
  color: var(--snackbarErrorIcon);
}
._error_lm9yc_267 ._closeButton_lm9yc_250 {
  color: var(--snackbarErrorText);
}

._icon_lm9yc_247 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

._message_lm9yc_286 {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

._closeButton_lm9yc_250 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  min-height: 24px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}
._closeButton_lm9yc_250:hover {
  background: rgba(0, 0, 0, 0.05);
}
._closeButton_lm9yc_250:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
._closeButton_lm9yc_250 svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

@keyframes _slideInUp_lm9yc_1 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes _slideOutDown_lm9yc_1 {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_87s9d_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_87s9d_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_87s9d_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._label_87s9d_210 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--clrPrimaryReverse);
  padding: 0 4px;
}
._label_87s9d_210._errorLabel_87s9d_217 {
  color: var(--clrError-100);
}

._inputWrapper_87s9d_221 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  background-color: var(--clrTertiary);
  border-radius: 8px;
  padding: 16px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
  position: relative;
}
._inputWrapper_87s9d_221._default_87s9d_235 {
  border-color: transparent;
}
._inputWrapper_87s9d_221._active_87s9d_238 {
  border-color: var(--clrAccent-30);
  box-shadow: 0px 0px 12px 0px rgba(186, 186, 186, 0.1);
}
._inputWrapper_87s9d_221._error_87s9d_217 {
  border-color: var(--clrError-100);
  box-shadow: 0px 0px 12px 0px rgba(255, 141, 141, 0.16);
}

._input_87s9d_221,
._select_87s9d_248 {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--clrAccent-100);
  outline: none;
  width: 100%;
  height: 24px;
  line-height: 24px;
}
._input_87s9d_221::placeholder,
._select_87s9d_248::placeholder {
  color: var(--clrAccent-30);
}
._input_87s9d_221[type=date],
._select_87s9d_248[type=date] {
  appearance: none;
  -webkit-appearance: none;
}
._input_87s9d_221[type=date]::-webkit-calendar-picker-indicator,
._select_87s9d_248[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
._input_87s9d_221[type=date]::-webkit-date-and-time-value,
._select_87s9d_248[type=date]::-webkit-date-and-time-value {
  text-align: left;
}

._select_87s9d_248 {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 24px;
}
._select_87s9d_248 option {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}

._error_87s9d_217 ._input_87s9d_221,
._error_87s9d_217 ._select_87s9d_248 {
  color: var(--clrError-100);
}
._error_87s9d_217 ._input_87s9d_221::placeholder,
._error_87s9d_217 ._select_87s9d_248::placeholder {
  color: var(--clrError-100);
}

._passwordToggle_87s9d_304 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
}

._eyeIcon_87s9d_317 {
  font-size: 20px;
  color: var(--clrAccent-100);
}

._dropdownIcon_87s9d_322,
._calendarIcon_87s9d_323 {
  font-size: 18px;
  color: var(--clrAccent-30);
  pointer-events: none;
  position: absolute;
  right: 12px;
}

._description_87s9d_331 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}
._description_87s9d_331._errorDescription_87s9d_338 {
  color: var(--clrError-100);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_d8rkh_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_d8rkh_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._button_d8rkh_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._button_d8rkh_201:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._button_d8rkh_201:active:not(:disabled) {
  transform: scale(0.98);
}

._fullWidth_d8rkh_222 {
  width: 100%;
}

._primary_d8rkh_226 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: none;
  position: relative;
}
._primary_d8rkh_226::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clrAccent-10);
  opacity: 0;
  transition: all 0.2s ease-in-out;
  border-radius: inherit;
}
._primary_d8rkh_226:hover:not(:disabled)::before {
  opacity: 1;
  box-shadow: 0 0 30px var(--clrAccent-30);
}

._secondary_d8rkh_249 {
  background-color: transparent;
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
}
._secondary_d8rkh_249:hover:not(:disabled) {
  background-color: var(--clrAccent-10);
}
._secondary_d8rkh_249:active:not(:disabled) {
  background-color: var(--clrAccent-20);
}

._tertiary_d8rkh_261 {
  background-color: transparent;
  color: var(--clrAccent-40);
  border: 1px solid var(--clrAccent-40);
}
._tertiary_d8rkh_261:hover:not(:disabled) {
  background-color: var(--clrAccent-10);
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-100);
}
._tertiary_d8rkh_261:active:not(:disabled) {
  background-color: var(--clrAccent-60);
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-100);
}

._text_only_d8rkh_277 {
  padding: 16px 24px;
  height: 56px;
  border-radius: 8px;
  font-size: 14px;
}

._text_desc_d8rkh_284 {
  padding: 12px 24px;
  height: 56px;
  border-radius: 8px;
}

._text_icon_d8rkh_290 {
  padding: 16px 24px;
  height: 56px;
  border-radius: 8px;
  font-size: 14px;
}

._icon_only_d8rkh_297 {
  padding: 16px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
}

._icon_only_small_d8rkh_304 {
  padding: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

._text_slim_d8rkh_311 {
  padding: 8px 24px;
  height: 38px;
  border-radius: 8px;
  font-size: 12px;
}

._danger_d8rkh_318,
._danger_slim_d8rkh_319 {
  background-color: transparent;
  color: var(--clrError-100);
  border: 1px solid var(--clrError-100);
}
._danger_d8rkh_318:hover:not(:disabled),
._danger_slim_d8rkh_319:hover:not(:disabled) {
  background-color: var(--clrError-50);
  border-color: var(--clrError-50);
}
._danger_d8rkh_318:active:not(:disabled),
._danger_slim_d8rkh_319:active:not(:disabled) {
  background-color: var(--clrError-100);
  color: var(--clrPrimary);
}

._danger_d8rkh_318 {
  padding: 16px 24px;
  height: 56px;
  border-radius: 8px;
  font-size: 14px;
}

._danger_slim_d8rkh_319 {
  padding: 8px 24px;
  height: 38px;
  border-radius: 8px;
  font-size: 12px;
}

._textIconContent_d8rkh_349 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

._textDescContent_d8rkh_359 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  z-index: 1;
}

._text_d8rkh_277 {
  font-size: inherit;
  line-height: 1;
  position: relative;
  z-index: 1;
}

._description_d8rkh_376 {
  font-size: 10px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  line-height: 1;
  position: relative;
  z-index: 1;
}

._icon_d8rkh_297 {
  font-size: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  max-height: 18px;
  width: auto;
}

._animated_d8rkh_394 {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  border: none;
  padding: 1px 0;
}
._animated_d8rkh_394:active:not(:disabled) {
  transform: scale(0.98);
}
._animated_d8rkh_394._fullWidth_d8rkh_222 {
  width: 100%;
}
._animated_d8rkh_394._fullWidth_d8rkh_222 ._innerContent_d8rkh_408 {
  width: 100%;
}

._borderGradientBottom_d8rkh_412 {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  bottom: -11px;
  right: -250%;
  border-radius: 50%;
  animation: _star-movement-bottom_d8rkh_1 6s linear infinite alternate;
  z-index: 0;
  pointer-events: none;
}

._borderGradientTop_d8rkh_425 {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  top: -10px;
  left: -250%;
  border-radius: 50%;
  animation: _star-movement-top_d8rkh_1 6s linear infinite alternate;
  z-index: 0;
  pointer-events: none;
}

._innerContent_d8rkh_408 {
  position: relative;
  background: linear-gradient(to bottom, var(--clrPrimary), var(--clrSecondary));
  border: 1px solid var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 16px 26px;
  border-radius: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._innerContent_d8rkh_408::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--clrSecondary), var(--clrTertiary));
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: -1;
}
._animated_d8rkh_394:hover:not(:disabled) ._innerContent_d8rkh_408::before {
  opacity: 1;
}
._innerContent_d8rkh_408 ._icon_d8rkh_297 {
  font-size: 20px;
  max-height: 20px;
}

@keyframes _star-movement-bottom_d8rkh_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}
@keyframes _star-movement-top_d8rkh_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}
._loading_d8rkh_492 {
  pointer-events: none;
}

._loadingContent_d8rkh_496 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

._spinner_d8rkh_506 {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: _spin_d8rkh_506 0.8s linear infinite;
}

@keyframes _spin_d8rkh_506 {
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1km4w_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1km4w_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._carousel_1km4w_201 {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

._carouselTrack_1km4w_209 {
  display: flex;
  gap: 12px;
  animation: _scroll_1km4w_1 linear infinite;
  width: max-content;
}

@keyframes _scroll_1km4w_1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
._carouselSlide_1km4w_224 {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  max-width: 800px;
}
._carouselSlide_1km4w_224:hover {
  transform: scale(1.05);
}
._carouselSlide_1km4w_224 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px) {
  ._carousel_1km4w_201 {
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselSlide_1km4w_224 {
    width: var(--mobile-width, 280px) !important;
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselTrack_1km4w_209 {
    gap: 8px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1852l_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1852l_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._shinyText_1852l_201 {
  display: inline-block;
  background: linear-gradient(90deg, var(--clrTextTertiary) 0%, var(--clrTextTertiary) calc(50% - var(--spread) / 2), var(--clrTextPrimary) 50%, var(--clrTextTertiary) calc(50% + var(--spread) / 2), var(--clrTextTertiary) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: 100% 0;
  animation: _shine_1852l_1 var(--speed, 3s) infinite linear;
}
._shinyText_1852l_201._disabled_1852l_211 {
  animation: none;
  background: var(--clrTextTertiary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes _shine_1852l_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}.dot-grid {
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.dot-grid__wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.dot-grid__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1ey3p_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1ey3p_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_1ey3p_201 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
  position: relative;
}

._dotGridBackground_1ey3p_211 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

._header_1ey3p_221 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 24px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 840px) {
  ._header_1ey3p_221 {
    padding: 80px 24px 40px;
  }
}
._header_1ey3p_221 ._logo_1ey3p_237 {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
  box-shadow: -8px -8px 16px rgba(58, 127, 160, 0.15), 8px 8px 16px rgba(114, 80, 123, 0.15);
  border-radius: 18px;
  background-color: transparent;
}
@media (min-width: 840px) {
  ._header_1ey3p_221 ._logo_1ey3p_237 {
    width: 125px;
    height: 125px;
    border-radius: 36px;
  }
}
._header_1ey3p_221 ._welcomeTitle_1ey3p_253 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_1ey3p_221 ._welcomeTitle_1ey3p_253 {
    font-size: 32px;
  }
}
._header_1ey3p_221 ._welcomeSubtitle_1ey3p_265 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1ey3p_221 ._welcomeSubtitle_1ey3p_265 {
    font-size: 16px;
  }
}

._carouselContainer_1ey3p_278 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 25%;
  z-index: 0;
  margin: 16px 0;
}
@media (min-width: 840px) {
  ._carouselContainer_1ey3p_278 {
    margin: 24px 0;
  }
}

._drawer_1ey3p_296 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 16px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 10;
}
@media (min-width: 840px) {
  ._drawer_1ey3p_296 {
    padding: 0 24px 24px;
  }
}

._drawerContent_1ey3p_315 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: rgba(10, 15, 20, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 198, 198, 0.2);
  border-radius: 32px;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: _drawerSlideIn_1ey3p_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_1ey3p_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._textPrompt_1ey3p_340 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
._textPrompt_1ey3p_340 ._drawerTitle_1ey3p_346 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: normal;
}
._textPrompt_1ey3p_340 ._drawerSubtitle_1ey3p_354 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  margin: 0;
  line-height: normal;
}

._buttons_1ey3p_363 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._buttons_1ey3p_363 ._buttonRow_1ey3p_368 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

._guestText_1ey3p_375 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-align: center;
  margin: 0;
}
._guestText_1ey3p_375 ._guestLink_1ey3p_383 {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}
._guestText_1ey3p_375 ._guestLink_1ey3p_383:hover {
  color: rgba(198, 198, 198, 0.8);
}

._termsText_1ey3p_399 {
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: center;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  margin: 0;
  line-height: 1.5;
}
._termsText_1ey3p_399 ._termsLink_1ey3p_408 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: none;
}
._termsText_1ey3p_399 ._termsLink_1ey3p_408:hover {
  text-decoration: underline;
}

._formInputs_1ey3p_417 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._formInputs_1ey3p_417 ._buttonRow_1ey3p_368 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

._checkboxContainer_1ey3p_429 {
  display: flex;
  flex-direction: column;
}

._termsCheckbox_1ey3p_434 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
}
._termsCheckbox_1ey3p_434 ._checkbox_1ey3p_429 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._termsCheckbox_1ey3p_434 ._checkboxLabel_1ey3p_448 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.8);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
._termsCheckbox_1ey3p_434 ._checkboxLabel_1ey3p_448 ._termsLink_1ey3p_408 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.8);
  text-decoration: underline;
  transition: color 0.2s ease;
}
._termsCheckbox_1ey3p_434 ._checkboxLabel_1ey3p_448 ._termsLink_1ey3p_408:hover {
  color: rgb(198, 198, 198);
}

._spoiler_1ey3p_467 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(198, 198, 198, 0.2);
  color: transparent;
  text-shadow: 0 0 8px rgba(198, 198, 198, 0.8);
  user-select: none;
  transition: all 0.3s ease;
}
._spoiler_1ey3p_467::before {
  content: "SPOILER";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  letter-spacing: 0.05em;
}
._spoiler_1ey3p_467:hover {
  background: rgba(198, 198, 198, 0.3);
}
._spoiler_1ey3p_467._revealed_1ey3p_493 {
  color: rgba(198, 198, 198, 0.8);
  text-shadow: none;
  background: transparent;
  cursor: default;
}
._spoiler_1ey3p_467._revealed_1ey3p_493::before {
  display: none;
}

._divider_1ey3p_503 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
._divider_1ey3p_503 ._dividerLine_1ey3p_509 {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198, 198, 198, 0.3) 50%, transparent 100%);
}
._divider_1ey3p_503 ._dividerText_1ey3p_514 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(198, 198, 198, 0.6);
  white-space: nowrap;
}

._forgotLink_1ey3p_522 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: underline;
  text-align: center;
  transition: color 0.2s ease;
}
._forgotLink_1ey3p_522:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_1ey3p_535 {
  padding: 12px 16px;
  background-color: rgba(200, 77, 77, 0.2);
  border: 1px solid rgba(200, 77, 77, 0.5);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #c84d4d;
  text-align: center;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_uc0ib_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_uc0ib_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_uc0ib_201 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
}

._header_uc0ib_210 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 24px;
  text-align: center;
  flex-shrink: 0;
}
@media (min-width: 840px) {
  ._header_uc0ib_210 {
    padding: 80px 24px 40px;
  }
}
._header_uc0ib_210 ._logo_uc0ib_224 {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}
@media (min-width: 840px) {
  ._header_uc0ib_210 ._logo_uc0ib_224 {
    width: 125px;
    height: 125px;
  }
}
._header_uc0ib_210 ._welcomeTitle_uc0ib_236 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_uc0ib_210 ._welcomeTitle_uc0ib_236 {
    font-size: 32px;
  }
}
._header_uc0ib_210 ._welcomeSubtitle_uc0ib_248 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_uc0ib_210 ._welcomeSubtitle_uc0ib_248 {
    font-size: 16px;
  }
}

._drawer_uc0ib_261 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 16px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease-out;
}
@media (min-width: 840px) {
  ._drawer_uc0ib_261 {
    padding: 0 24px 24px;
  }
}

._drawerContent_uc0ib_278 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(64, 64, 64, 0.02) 48%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px solid rgba(198, 198, 198, 0.3);
  border-radius: 32px;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  animation: _drawerSlideIn_uc0ib_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_uc0ib_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._textPrompt_uc0ib_301 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._textPrompt_uc0ib_301 ._drawerTitle_uc0ib_306 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: normal;
}
._textPrompt_uc0ib_301 ._drawerSubtitle_uc0ib_314 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  margin: 0;
  line-height: normal;
}

._formInputs_uc0ib_323 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._backLink_uc0ib_329 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: underline;
  text-align: center;
  transition: color 0.2s ease;
}
._backLink_uc0ib_329:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_uc0ib_342 {
  padding: 12px 16px;
  background-color: rgba(200, 77, 77, 0.2);
  border: 1px solid rgba(200, 77, 77, 0.5);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #c84d4d;
  text-align: center;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_or06e_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_or06e_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._homepageContainer_or06e_201 ._tournamentBtns_or06e_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  border: 1px solid red;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_uua1z_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_uua1z_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._leaderCarousel_uua1z_201 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
._leaderCarousel_uua1z_201::-webkit-scrollbar {
  height: 6px;
}
._leaderCarousel_uua1z_201::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._leaderCarousel_uua1z_201::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._leaderCarousel_uua1z_201::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._leaderCard_uua1z_229 {
  flex: 0 0 auto;
  width: 128px;
  height: 182px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
._leaderCard_uua1z_229:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
._leaderCard_uua1z_229._selected_uua1z_247 {
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}

._leaderImageInCard_uua1z_253 {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}
._leaderImageInCard_uua1z_253 img {
  border: 1px solid var(--clrAccent-30);
}

._leaderInfo_uua1z_264 {
  padding: 12px;
  position: relative;
  flex: 1;
  background: linear-gradient(90deg, var(--leader-color-1, rgba(255, 255, 255, 0.1)), var(--leader-color-2, rgba(255, 255, 255, 0.1)));
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
._leaderInfo_uua1z_264::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

._leaderName_uua1z_282 {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  position: relative;
  z-index: 99;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

._leaderSet_uua1z_292 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

._noResults_uua1z_300 {
  width: 100%;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: italic;
}

._loadingContainer_uua1z_309 {
  width: 100%;
  padding: 32px;
  text-align: center;
}

._loadMoreBtn_uua1z_315 {
  margin: 16px auto 0;
  display: block;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._loadMoreBtn_uua1z_315:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
._loadMoreBtn_uua1z_315:active {
  transform: scale(0.98);
}

._loadingText_uua1z_336 {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-style: italic;
  animation: _pulse_uua1z_1 1.5s ease-in-out infinite;
}

._skeletonCard_uua1z_343 {
  flex: 0 0 auto;
  width: 128px;
  height: 193px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  animation: _skeletonPulse_uua1z_1 1.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px;
}

._skeletonImage_uua1z_359 {
  width: 118px;
  height: 118px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: _skeletonShimmer_uua1z_1 1.5s ease-in-out infinite;
}

._skeletonInfo_uua1z_368 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

._skeletonName_uua1z_376 {
  height: 14px;
  width: 90%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: _skeletonShimmer_uua1z_1 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

._skeletonSet_uua1z_386 {
  height: 12px;
  width: 60%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: _skeletonShimmer_uua1z_1 1.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes _skeletonPulse_uua1z_1 {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes _skeletonShimmer_uua1z_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes _pulse_uua1z_1 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  ._leaderCard_uua1z_229 {
    width: 110px;
    height: 156px;
  }
  ._leaderImageInCard_uua1z_253 {
    height: 72px;
  }
  ._leaderInfo_uua1z_264 {
    padding: 8px;
  }
  ._leaderName_uua1z_282 {
    font-size: 11px;
  }
  ._leaderSet_uua1z_292 {
    font-size: 10px;
  }
  ._skeletonCard_uua1z_343 {
    width: 128px;
    height: 193px;
  }
  ._skeletonImage_uua1z_359 {
    width: 118px;
    height: 118px;
  }
  ._skeletonInfo_uua1z_368 {
    gap: 4px;
  }
  ._skeletonName_uua1z_376 {
    height: 11px;
    margin-bottom: 4px;
  }
  ._skeletonSet_uua1z_386 {
    height: 10px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1rsbt_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1rsbt_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1rsbt_201 {
  position: relative;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
}
._container_1rsbt_201 ._skeletonOverlay_1rsbt_207 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: inherit;
  z-index: 1;
  background: inherit;
}
._container_1rsbt_201 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(180, 180, 180, 0.4) 25%, rgba(200, 200, 200, 0.5) 50%, rgba(180, 180, 180, 0.4) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1rsbt_1 1.5s infinite;
  flex-shrink: 0;
}
._container_1rsbt_201 ._skeletonOverlay_1rsbt_207 ._skeletonText_1rsbt_229 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}
._container_1rsbt_201 ._skeletonOverlay_1rsbt_207 ._skeletonText_1rsbt_229 ._skeletonName_1rsbt_238 {
  width: 80%;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(180, 180, 180, 0.3) 25%, rgba(200, 200, 200, 0.4) 50%, rgba(180, 180, 180, 0.3) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1rsbt_1 1.5s infinite;
}
._container_1rsbt_201 ._skeletonOverlay_1rsbt_207 ._skeletonText_1rsbt_229 ._skeletonSet_1rsbt_246 {
  width: 40%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(150, 150, 150, 0.2) 25%, rgba(170, 170, 170, 0.3) 50%, rgba(150, 150, 150, 0.2) 75%);
  background-size: 200% 100%;
  animation: _shimmer_1rsbt_1 1.5s infinite;
}
._container_1rsbt_201 ._content_1rsbt_254 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
}
._container_1rsbt_201 ._content_1rsbt_254._fadeIn_1rsbt_266 {
  opacity: 1;
  visibility: visible;
}
._container_1rsbt_201 ._photo_1rsbt_270 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
._container_1rsbt_201 ._photo_1rsbt_270 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
._container_1rsbt_201 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  color: #FFFFFF;
  font-weight: 600;
}
._container_1rsbt_201 ._text_1rsbt_294 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0 2px;
}
._container_1rsbt_201 ._text_1rsbt_294 ._name_1rsbt_303 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
._container_1rsbt_201 ._text_1rsbt_294 ._set_1rsbt_311 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
._container_1rsbt_201._image-text_1rsbt_317 {
  height: 190px;
  width: 132px;
  min-height: 190px;
  min-width: 132px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 0px;
  transition: transform 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}
._container_1rsbt_201._image-text_1rsbt_317:hover {
  transform: translateY(-2px);
}
._container_1rsbt_201._image-text_1rsbt_317 ._skeletonOverlay_1rsbt_207 {
  gap: 10px;
}
._container_1rsbt_201._image-text_1rsbt_317 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 124px;
  height: 124px;
}
._container_1rsbt_201._image-text_1rsbt_317 ._content_1rsbt_254 {
  gap: 10px;
}
._container_1rsbt_201._image-text_1rsbt_317 ._photo_1rsbt_270 {
  width: 124px;
  height: 124px;
}
._container_1rsbt_201._image-text_1rsbt_317 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 32px;
}
._container_1rsbt_201._image-text_1rsbt_317._active_1rsbt_347 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
._container_1rsbt_201._image-text-medium_1rsbt_352 {
  height: 160px;
  width: 110px;
  min-height: 160px;
  min-width: 110px;
  padding: 3px;
  border-radius: 7px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 0px;
  transition: transform 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}
._container_1rsbt_201._image-text-medium_1rsbt_352:hover {
  transform: translateY(-2px);
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._skeletonOverlay_1rsbt_207 {
  gap: 8px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._content_1rsbt_254 {
  gap: 8px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._photo_1rsbt_270 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 20px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._text_1rsbt_294 {
  gap: 1px;
  padding: 0 2px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._text_1rsbt_294 ._name_1rsbt_303 {
  font-size: 12px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352 ._text_1rsbt_294 ._set_1rsbt_311 {
  font-size: 12px;
}
._container_1rsbt_201._image-text-medium_1rsbt_352._active_1rsbt_347 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
}
._container_1rsbt_201._image-text-small_1rsbt_401 {
  height: 133px;
  width: 92px;
  min-height: 133px;
  min-width: 92px;
  padding: 3px;
  border-radius: 6px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 0px;
  transition: transform 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}
._container_1rsbt_201._image-text-small_1rsbt_401:hover {
  transform: translateY(-2px);
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._skeletonOverlay_1rsbt_207 {
  gap: 6px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._skeletonOverlay_1rsbt_207 ._skeletonText_1rsbt_229 ._skeletonName_1rsbt_238 {
  height: 12px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._skeletonOverlay_1rsbt_207 ._skeletonText_1rsbt_229 ._skeletonSet_1rsbt_246 {
  height: 10px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._content_1rsbt_254 {
  gap: 6px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._photo_1rsbt_270 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 20px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._text_1rsbt_294 {
  gap: 1px;
  padding: 0 1px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._text_1rsbt_294 ._name_1rsbt_303 {
  font-size: 12px;
}
._container_1rsbt_201._image-text-small_1rsbt_401 ._text_1rsbt_294 ._set_1rsbt_311 {
  font-size: 8px;
}
._container_1rsbt_201._image-text-small_1rsbt_401._active_1rsbt_347 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
._container_1rsbt_201._image-only-xlarge_1rsbt_456 {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
._container_1rsbt_201._image-only-xlarge_1rsbt_456 ._skeletonOverlay_1rsbt_207 {
  justify-content: center;
}
._container_1rsbt_201._image-only-xlarge_1rsbt_456 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 100px;
  height: 100px;
}
._container_1rsbt_201._image-only-xlarge_1rsbt_456 ._content_1rsbt_254 {
  justify-content: center;
}
._container_1rsbt_201._image-only-xlarge_1rsbt_456 ._photo_1rsbt_270 {
  width: 100px;
  height: 100px;
}
._container_1rsbt_201._image-only-xlarge_1rsbt_456 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 12px;
}
._container_1rsbt_201._image-only-large_1rsbt_478 {
  width: 112px;
  height: 112px;
}
._container_1rsbt_201._image-only-large_1rsbt_478 ._skeletonOverlay_1rsbt_207 {
  justify-content: center;
}
._container_1rsbt_201._image-only-large_1rsbt_478 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 104px;
  height: 104px;
}
._container_1rsbt_201._image-only-large_1rsbt_478 ._content_1rsbt_254 {
  justify-content: center;
}
._container_1rsbt_201._image-only-large_1rsbt_478 ._photo_1rsbt_270 {
  width: 100%;
  height: 100%;
}
._container_1rsbt_201._image-only-large_1rsbt_478 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 28px;
}
._container_1rsbt_201._image-only-small_1rsbt_499 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._container_1rsbt_201._image-only-small_1rsbt_499 ._skeletonOverlay_1rsbt_207 {
  justify-content: center;
}
._container_1rsbt_201._image-only-small_1rsbt_499 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 60px;
  height: 60px;
}
._container_1rsbt_201._image-only-small_1rsbt_499 ._content_1rsbt_254 {
  justify-content: center;
}
._container_1rsbt_201._image-only-small_1rsbt_499 ._photo_1rsbt_270 {
  height: 100%;
  width: 100%;
}
._container_1rsbt_201._image-only-small_1rsbt_499 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 18px;
}
._container_1rsbt_201._image-only-xsmall_1rsbt_521 {
  width: 40px;
  height: 40px;
  padding: 2px;
}
._container_1rsbt_201._image-only-xsmall_1rsbt_521 ._skeletonOverlay_1rsbt_207 {
  justify-content: center;
}
._container_1rsbt_201._image-only-xsmall_1rsbt_521 ._skeletonOverlay_1rsbt_207 ._skeletonPhoto_1rsbt_222 {
  width: 36px;
  height: 36px;
}
._container_1rsbt_201._image-only-xsmall_1rsbt_521 ._content_1rsbt_254 {
  justify-content: center;
}
._container_1rsbt_201._image-only-xsmall_1rsbt_521 ._photo_1rsbt_270 {
  width: 36px;
  height: 36px;
}
._container_1rsbt_201._image-only-xsmall_1rsbt_521 ._photo_1rsbt_270 ._placeholder_1rsbt_290 {
  font-size: 14px;
}

@keyframes _shimmer_1rsbt_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_4hlpp_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_4hlpp_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_4hlpp_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._label_4hlpp_210 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--clrPrimaryReverse);
  padding: 0 4px;
}

._carousel_4hlpp_218 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  overflow-x: auto;
  padding: 0 4px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}
._carousel_4hlpp_218::-webkit-scrollbar {
  height: 6px;
}
._carousel_4hlpp_218::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._carousel_4hlpp_218::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._carousel_4hlpp_218::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._typeChip_4hlpp_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  background: transparent;
  color: var(--clrAccent-60);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._typeChip_4hlpp_245:hover:not(:disabled) {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-80);
}
._typeChip_4hlpp_245:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._typeChip_4hlpp_245._selected_4hlpp_272 {
  border-color: var(--clrAccent-100);
  color: var(--clrAccent-100);
  background: var(--clrAccent-10);
}
._typeChip_4hlpp_245._typeLocal_4hlpp_277 {
  background-color: #163c26;
  border-color: rgba(133, 228, 172, 0.6);
  color: rgba(133, 228, 172, 0.6);
}
._typeChip_4hlpp_245._typeStoreCs_4hlpp_282 {
  background-color: #471f1f;
  border-color: rgba(240, 131, 131, 0.6);
  color: rgba(240, 131, 131, 0.6);
}
._typeChip_4hlpp_245._typeTreasureCup_4hlpp_287 {
  background-color: #562502;
  border-color: rgba(255, 160, 92, 0.6);
  color: rgba(255, 160, 92, 0.6);
}
._typeChip_4hlpp_245._typeFlagship_4hlpp_292 {
  background-color: #4b2e00;
  border-color: rgba(255, 201, 115, 0.6);
  color: rgba(255, 201, 115, 0.6);
}
._typeChip_4hlpp_245._typeTesting_4hlpp_297 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}
._typeChip_4hlpp_245._typeLcq_4hlpp_302 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}
._typeChip_4hlpp_245._typeNational_4hlpp_307 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}
._typeChip_4hlpp_245._typeRankedSim_4hlpp_312 {
  background-color: #1e3a5f;
  border-color: #60a5fa;
  color: #bfdbfe;
}
._typeChip_4hlpp_245._typeRegionals_4hlpp_317, ._typeChip_4hlpp_245._typeWorld_4hlpp_317 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_4hlpp_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeChip_4hlpp_245._typeRegionals_4hlpp_317::before, ._typeChip_4hlpp_245._typeWorld_4hlpp_317::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_4hlpp_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

._description_4hlpp_345 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}

@keyframes _gold-shimmer_4hlpp_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _chip-glow-spin_4hlpp_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_4cztl_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_4cztl_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _slideUp_4cztl_1 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _slideDown_4cztl_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
._drawerOverlay_4cztl_217 {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

._drawer_4cztl_217 {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: calc(90vh - 24px);
  background-color: var(--clrPrimary);
  border-radius: 24px;
  padding: 0 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.3);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: _slideUp_4cztl_1 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform;
}
._drawer_4cztl_217._closing_4cztl_249 {
  animation: _slideDown_4cztl_1 0.25s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
._drawer_4cztl_217._glass_4cztl_252 {
  background: var(--clrGlassBackground);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--clrGlassBorder);
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.15);
}
._drawer_4cztl_217._fullHeight_4cztl_259 {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

._dragHandle_4cztl_264 {
  width: 100%;
  padding: 12px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
._dragHandle_4cztl_264:active {
  cursor: grabbing;
}

._dragPill_4cztl_279 {
  width: 36px;
  height: 4px;
  background-color: var(--clrAccent-30);
  border-radius: 2px;
  transition: background-color 0.2s ease;
}
._dragHandle_4cztl_264:hover ._dragPill_4cztl_279 {
  background-color: var(--clrAccent-60);
}

._drawerHeader_4cztl_290 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._drawerTitle_4cztl_299 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._drawerSubtitle_4cztl_306 {
  margin: 0;
  font-size: 16px;
  color: var(--clrAccent-60);
}

._drawerContent_4cztl_312 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  touch-action: auto;
}

._drawerActions_4cztl_324 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

._primaryBtn_4cztl_334 {
  flex: 1;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._primaryBtn_4cztl_334:hover:not(:disabled) {
  opacity: 0.9;
}
._primaryBtn_4cztl_334:active:not(:disabled) {
  transform: scale(0.98);
}
._primaryBtn_4cztl_334:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._secondaryBtn_4cztl_358 {
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrError-100);
  background-color: transparent;
  color: var(--clrError-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 6px rgba(216, 72, 72, 0.6);
}
._secondaryBtn_4cztl_358:hover:not(:disabled) {
  background-color: rgba(216, 72, 72, 0.1);
}
._secondaryBtn_4cztl_358:active:not(:disabled) {
  transform: scale(0.98);
}
._secondaryBtn_4cztl_358:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelOnlyBtn_4cztl_382 {
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._cancelOnlyBtn_4cztl_382:hover:not(:disabled) {
  opacity: 0.9;
}
._cancelOnlyBtn_4cztl_382:active:not(:disabled) {
  transform: scale(0.98);
}
._cancelOnlyBtn_4cztl_382:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectionCard_4cztl_406 {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--clrGlassBorder);
  background-color: var(--clrGlassBackgroundStrong);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  pointer-events: auto;
  touch-action: manipulation;
}
._selectionCard_4cztl_406:hover {
  border-color: var(--clrAccent-100);
}
._selectionCard_4cztl_406:active {
  transform: scale(0.98);
}

._selectionIcon_4cztl_431 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 60px;
  height: 60px;
  font-size: 32px;
  flex-shrink: 0;
}

._selectionText_4cztl_443 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

._selectionTitle_4cztl_451 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._selectionDescription_4cztl_457 {
  font-size: 14px;
  color: var(--clrAccent-30);
}

._formGroup_4cztl_462 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._formLabel_4cztl_471 {
  padding: 0 4px;
  font-size: 16px;
  color: var(--clrTextPrimary);
}

._formInput_4cztl_477 {
  width: 100%;
  padding: 16px 12px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-size: 16px;
}
._formInput_4cztl_477::placeholder {
  color: var(--clrAccent-30);
}
._formInput_4cztl_477:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  ._drawer_4cztl_217 {
    max-width: 100%;
    padding: 0 16px 32px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_tfskt_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_tfskt_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._premiumBadge_tfskt_201 {
  font-size: 12px !important;
  font-weight: 600;
  padding: 2px 8px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: rgb(90, 80, 22) !important;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1yc20_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1yc20_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1yc20_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
  overflow-x: hidden;
  padding-top: calc(60px + env(safe-area-inset-top));
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 64px);
}

._pageTitle_1yc20_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16px 0;
}
._pageTitle_1yc20_216 h1 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}

._form_1yc20_233 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._inputRow_1yc20_242 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
._inputRow_1yc20_242 > * {
  flex: 1;
}

._leaderCarouselWrapper_1yc20_254 {
  width: 100%;
}
._leaderCarouselWrapper_1yc20_254 > div {
  padding-top: 14px;
  padding-bottom: 14px;
}

._submitButton_1yc20_262 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  margin-top: 8px;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._submitButton_1yc20_262:hover:not(:disabled) {
  opacity: 0.9;
}
._submitButton_1yc20_262:active:not(:disabled) {
  transform: scale(0.98);
}
._submitButton_1yc20_262:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._message_1yc20_293 {
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
}

._modalOverlay_1yc20_302 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

._modalContent_1yc20_318 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--clrPrimary);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: calc(100% - 32px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
._modalContent_1yc20_318 h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}
._modalContent_1yc20_318 p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--clrAccent-60);
  text-align: center;
  margin: 0;
}

._modalButtons_1yc20_346 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
._modalButtons_1yc20_346 button {
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._modalButtons_1yc20_346 button:active:not(:disabled) {
  transform: scale(0.98);
}

._upgradeButton_1yc20_370 {
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  border: none;
}
._upgradeButton_1yc20_370:hover {
  opacity: 0.9;
}

._cancelButton_1yc20_379 {
  background-color: transparent;
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
}
._cancelButton_1yc20_379:hover {
  background-color: var(--clrAccent-10);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_13p9b_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_13p9b_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._statCard_13p9b_201 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  flex: 1;
  min-width: 100px;
  max-height: 128px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrSecondary);
  overflow: hidden;
}
._statCard_13p9b_201 ._content_13p9b_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
  padding: 8px;
  background: var(--clrSecondary);
  border-radius: 8px 8px 0 0;
}
._statCard_13p9b_201 ._title_13p9b_227 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 28px;
  background: var(--clrTertiary);
  padding: 0 8px;
  border-radius: 0 0 0 0;
}
._statCard_13p9b_201 ._value_13p9b_238 {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._statCard_13p9b_201 ._emoji_13p9b_245 {
  font-size: 48px;
  line-height: 1;
}
._statCard_13p9b_201 ._label_13p9b_249 {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clrTextPrimary);
  text-align: center;
  line-height: 1.2;
}

._leaderVariant_13p9b_259 ._content_13p9b_216 {
  padding: 0;
}
._leaderVariant_13p9b_259 ._content_13p9b_216 img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

._colorVariant_13p9b_268 ._content_13p9b_216 {
  padding: 0;
}

._ratioPositive_13p9b_272 {
  border-color: var(--clrSuccess-100);
}
._ratioPositive_13p9b_272 ._content_13p9b_216 {
  background: var(--clrSuccess-50);
}
._ratioPositive_13p9b_272 ._title_13p9b_227 {
  background: var(--clrSuccess-100);
}
._ratioPositive_13p9b_272 ._value_13p9b_238 {
  color: var(--clrSuccess-100);
}
._ratioPositive_13p9b_272 ._label_13p9b_249 {
  color: var(--clrTextPrimaryReverse);
}

._ratioNegative_13p9b_288 {
  border-color: var(--clrError-100);
}
._ratioNegative_13p9b_288 ._content_13p9b_216 {
  background: var(--clrError-50);
}
._ratioNegative_13p9b_288 ._title_13p9b_227 {
  background: var(--clrError-100);
}
._ratioNegative_13p9b_288 ._value_13p9b_238 {
  color: var(--clrError-100);
}
._ratioNegative_13p9b_288 ._label_13p9b_249 {
  color: var(--clrTextPrimaryReverse);
}

._mini_13p9b_304 {
  min-width: 72px;
  max-width: 72px;
  max-height: 72px;
  flex: 0 0 72px;
}
._mini_13p9b_304 ._content_13p9b_216 {
  padding: 4px;
}
._mini_13p9b_304 ._title_13p9b_227 {
  height: 20px;
  padding: 0 4px;
}
._mini_13p9b_304 ._value_13p9b_238 {
  font-size: 18px;
}
._mini_13p9b_304 ._emoji_13p9b_245 {
  font-size: 24px;
}
._mini_13p9b_304 ._label_13p9b_249 {
  font-size: 8px;
  letter-spacing: 0.3px;
}

._tiny_13p9b_328 {
  min-width: 56px;
  max-width: 56px;
  max-height: 56px;
  flex: 0 0 56px;
}
._tiny_13p9b_328 ._content_13p9b_216 {
  padding: 2px;
}
._tiny_13p9b_328 ._title_13p9b_227 {
  height: 16px;
  padding: 0 2px;
}
._tiny_13p9b_328 ._value_13p9b_238 {
  font-size: 14px;
}
._tiny_13p9b_328 ._emoji_13p9b_245 {
  font-size: 18px;
}
._tiny_13p9b_328 ._label_13p9b_249 {
  font-size: 6px;
  letter-spacing: 0.2px;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1q9gv_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1q9gv_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._upgradeButton_1q9gv_201 {
  width: 100%;
  padding: 16px;
  background: var(--clrAccent-100);
  border: 2px solid var(--clrAccent-100);
  border-radius: 8px;
  color: var(--clrPrimary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._upgradeButton_1q9gv_201:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1q9gv_201:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1q9gv_201:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._buttonContent_1q9gv_226 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._label_1q9gv_233 {
  font-size: 16px;
  font-weight: 600;
}

._description_1q9gv_238 {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1o8tr_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1o8tr_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._paypalContainer_1o8tr_201 {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

._paypalButtonWrapper_1o8tr_207 {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
._paypalButtonWrapper_1o8tr_207 iframe {
  border-radius: 24px !important;
}

._loadingOverlay_1o8tr_216 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 4px;
  z-index: 10;
}
._loadingOverlay_1o8tr_216 p {
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

._spinner_1o8tr_238 {
  width: 40px;
  height: 40px;
  border: 4px solid var(--clrAccent-20);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_1o8tr_238 0.8s linear infinite;
}

@keyframes _spin_1o8tr_238 {
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_2rclp_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_2rclp_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._premiumSection_2rclp_201 {
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 {
  background: linear-gradient(135deg, var(--clrSecondary) 0%, rgba(var(--clrSecondary-rgb), 0.8) 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  position: relative;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._premiumHeader_2rclp_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-radius: 4px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._premiumHeader_2rclp_216 ._starIcon_2rclp_227 {
  font-size: 32px;
  color: #ffd700;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._premiumHeader_2rclp_216 ._premiumTitle_2rclp_232 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._premiumBanner_2rclp_238 {
  margin: 12px 0;
  max-width: 350px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._premiumBanner_2rclp_238 img {
  width: 100%;
  height: 100%;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._premiumDescription_2rclp_246 {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._cardHeader_2rclp_253 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._cardHeader_2rclp_253 ._starIconGold_2rclp_261 {
  font-size: 48px;
  color: #ffd700;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: _pulse_2rclp_1 2s ease-in-out infinite;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._cardHeader_2rclp_253 ._cardTitle_2rclp_267 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
  line-height: 1.2;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._featureList_2rclp_274 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  margin: 0 auto;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._featureList_2rclp_274 li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: var(--clrAccent-80);
  font-size: 16px;
  padding: 12px 16px;
  background: var(--clrBackground-100);
  border-radius: 4px;
  border-left: 3px solid var(--clrTertiary);
  transition: all 0.2s ease;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._featureList_2rclp_274 li:hover {
  transform: translateX(4px);
  border-left-color: #ffd700;
  background: var(--clrBackground-200);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._featureList_2rclp_274 li ._checkmark_2rclp_304 {
  font-weight: 700;
  color: #ffd700;
  font-size: 20px;
  flex-shrink: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._featureList_2rclp_274 li span:last-child {
  font-weight: 500;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._priceSection_2rclp_313 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px;
  background: linear-gradient(135deg, var(--clrTertiary-20) 0%, var(--clrTertiary-10) 100%);
  border-radius: 4px;
  border: 1px solid var(--clrTertiary-40);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._priceSection_2rclp_313 ._priceLabel_2rclp_324 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._priceSection_2rclp_313 ._price_2rclp_313 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._successMessage_2rclp_337 {
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._errorMessage_2rclp_347 {
  background-color: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._paymentButtonContainer_2rclp_356 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._subscriptionManagement_2rclp_364 {
  margin-top: 16px;
  width: 100%;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._subscriptionInfo_2rclp_368 {
  color: var(--clrAccent-60);
  font-size: 14px;
  text-align: center;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--clrAccent-10);
  border-radius: 8px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._subscriptionInfo_2rclp_368 ._statusActive_2rclp_377 {
  color: var(--clrSuccess-100);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._subscriptionInfo_2rclp_368 ._statusActive_2rclp_377 svg {
  color: green;
  font-size: 16px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._subscriptionInfo_2rclp_368 ._statusCanceled_2rclp_391 {
  color: var(--clrWarning);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._subscriptionInfo_2rclp_368 ._statusCanceled_2rclp_391 svg {
  color: red;
  font-size: 16px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingOptions_2rclp_405 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  ._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingOptions_2rclp_405 {
    flex-direction: row;
    gap: 32px;
  }
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 24px;
  background: var(--clrSecondary);
  border: 2px solid var(--clrAccent-30);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419:hover {
  transform: translateY(-4px);
  border-color: var(--clrAccent-50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._cardContent_2rclp_438 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._pricingTitle_2rclp_446 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._priceSection_2rclp_313 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._priceSection_2rclp_313 ._price_2rclp_313 {
  font-size: 36px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._priceSection_2rclp_313 ._priceLabel_2rclp_324 {
  font-size: 16px;
  color: var(--clrAccent-60);
  font-weight: 500;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._spacer_2rclp_470 {
  height: 20px;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419 ._savings_2rclp_473 {
  font-size: 14px;
  color: #ffd700;
  font-weight: 600;
  margin: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419._recommended_2rclp_479 {
  border: 3px solid #ffd700;
  background: linear-gradient(135deg, var(--clrSecondary) 0%, rgba(255, 215, 0, 0.05) 100%);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.2);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419._recommended_2rclp_479:hover {
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419._recommended_2rclp_479 ._recommendedBadge_2rclp_488 {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: var(--clrPrimary);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._pricingCard_2rclp_419._recommended_2rclp_479 ._pricingTitle_2rclp_446 {
  color: #ffd700;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._troubleshootSection_2rclp_506 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-20);
  text-align: center;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._troubleshootSection_2rclp_506 ._troubleshootText_2rclp_512 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._troubleshootSection_2rclp_506 ._troubleshootText_2rclp_512 ._troubleshootButton_2rclp_517 {
  background: none;
  border: none;
  color: var(--clrTertiary);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s ease;
  padding: 0;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._troubleshootSection_2rclp_506 ._troubleshootText_2rclp_512 ._troubleshootButton_2rclp_517:hover {
  color: #ffd700;
}
._premiumSection_2rclp_201 ._premiumCard_2rclp_206 ._troubleshootSection_2rclp_506 ._troubleshootText_2rclp_512 ._troubleshootButton_2rclp_517:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_ihxjg_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_ihxjg_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_ihxjg_201 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._manageButton_ihxjg_207 {
  padding: 10px 20px;
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 200px;
  min-width: fit-content;
  white-space: nowrap;
}
._manageButton_ihxjg_207:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
._manageButton_ihxjg_207:active:not(:disabled) {
  transform: scale(0.98);
}
._manageButton_ihxjg_207:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._activeButton_ihxjg_234 {
  background: rgba(0, 255, 0, 0.15);
  border-color: rgba(0, 255, 0, 0.4);
  color: #10b981;
}
._activeButton_ihxjg_234:hover:not(:disabled) {
  background: rgba(0, 255, 0, 0.25);
  border-color: rgba(0, 255, 0, 0.6);
}

._canceledButton_ihxjg_244 {
  background: rgba(255, 200, 0, 0.15);
  border-color: rgba(255, 150, 0, 0.5);
  color: #f59e0b;
}
._canceledButton_ihxjg_244:hover:not(:disabled) {
  background: rgba(255, 200, 0, 0.25);
  border-color: rgba(255, 150, 0, 0.7);
}

._description_ihxjg_254 {
  font-size: 10px;
  color: var(--clrSecondaryText);
  text-align: center;
  margin: 0;
}

._error_ihxjg_261 {
  font-size: 12px;
  color: #ff4444;
  text-align: center;
  margin: 0;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_pt2p2_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_pt2p2_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._subscriptionInfo_pt2p2_201 {
  padding: 16px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
._subscriptionInfo_pt2p2_201:has(._statusActive_pt2p2_214) {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.1);
}
._subscriptionInfo_pt2p2_201:has(._statusCanceled_pt2p2_218) {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.1);
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 ._subscriptionTitle_pt2p2_231 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 ._subscriptionTitle_pt2p2_231 ._statusActive_pt2p2_214 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 ._subscriptionTitle_pt2p2_231 ._statusActive_pt2p2_214 svg {
  font-size: 18px;
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 ._subscriptionTitle_pt2p2_231 ._statusCanceled_pt2p2_218 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 ._subscriptionTitle_pt2p2_231 ._statusCanceled_pt2p2_218 svg {
  font-size: 18px;
}
._subscriptionInfo_pt2p2_201 ._subscriptionLabel_pt2p2_222 ._subscriptionDescription_pt2p2_254 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._subscriptionInfo_pt2p2_201 ._managedViaApp_pt2p2_259 {
  font-size: 12px;
  color: var(--clrAccent-50);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  white-space: nowrap;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_f4rmt_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_f4rmt_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._deleteAccount_f4rmt_201 {
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
._deleteAccount_f4rmt_201 ._deleteLabel_f4rmt_214 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._deleteAccount_f4rmt_201 ._deleteLabel_f4rmt_214 ._deleteTitle_f4rmt_223 {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
}
._deleteAccount_f4rmt_201 ._deleteLabel_f4rmt_214 ._deleteDescription_f4rmt_228 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._deleteAccount_f4rmt_201 ._deleteButton_f4rmt_233 {
  padding: 10px 20px;
  margin: 0;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 200px;
  min-width: fit-content;
  white-space: nowrap;
}
._deleteAccount_f4rmt_201 ._deleteButton_f4rmt_233:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}
._deleteAccount_f4rmt_201 ._deleteButton_f4rmt_233:active:not(:disabled) {
  transform: scale(0.98);
}
._deleteAccount_f4rmt_201 ._deleteButton_f4rmt_233:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._warningModal_f4rmt_260 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: _fadeIn_f4rmt_1 0.2s ease;
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 {
  background: var(--clrSecondary);
  border: 1px solid rgba(255, 200, 0, 0.5);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: _slideUp_f4rmt_1 0.3s ease;
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #f59e0b;
  margin: 0;
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  line-height: 1.6;
  margin: 0;
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 p strong {
  color: #10b981;
  font-weight: 600;
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 ._warningButton_f4rmt_301 {
  padding: 10px 20px;
  background: rgba(255, 200, 0, 0.2);
  border: 1px solid rgba(255, 150, 0, 0.5);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 ._warningButton_f4rmt_301:hover {
  background: rgba(255, 200, 0, 0.3);
  border-color: rgba(255, 150, 0, 0.7);
}
._warningModal_f4rmt_260 ._warningContent_f4rmt_273 ._warningButton_f4rmt_301:active {
  transform: scale(0.98);
}

@keyframes _fadeIn_f4rmt_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_f4rmt_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_19ihj_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_19ihj_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._settingsSection_19ihj_201 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  border-radius: 8px;
  background-color: var(--clrSecondary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 12px;
  background: var(--clrTertiary);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213:hover {
  background: rgba(255, 255, 255, 0.03);
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213 ._settingsTitle_19ihj_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213 ._settingsTitle_19ihj_230 svg {
  font-size: 1.25rem;
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213 ._settingsTitle_19ihj_230 span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213 ._chevron_19ihj_246 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_19ihj_201 ._settingsHeader_19ihj_213 ._chevron_19ihj_246._expanded_19ihj_251 {
  transform: rotate(180deg);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 8px;
  animation: _slideDown_19ihj_1 0.2s ease-out;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263:last-child {
  border-bottom: none;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingLabel_19ihj_274 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingLabel_19ihj_274 span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingLabel_19ihj_274 ._settingLabelWithBadge_19ihj_288 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingLabel_19ihj_274 ._settingDescription_19ihj_295 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingValue_19ihj_300 {
  font-size: 14px;
  color: var(--clrAccent-60);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._emailValue_19ihj_308 {
  font-size: 0.875rem;
  flex: 1;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._supportLink_19ihj_312 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._supportLink_19ihj_312 a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 200ms ease-in-out;
  text-decoration: none;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._supportLink_19ihj_312 a:hover {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._supportLink_19ihj_312 a svg {
  font-size: 0.875rem;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._projVersion_19ihj_342 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353 {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353._themeDark_19ihj_120 {
  background: #101418;
  border: 2px solid #212327;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353._themeLight_19ihj_60 {
  background: #F4F4F5;
  border: 2px solid #E4E4E7;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353._active_19ihj_374 {
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--clrAccent-30);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353._disabled_19ihj_378, ._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._themeSelector_19ihj_346 ._themeSquare_19ihj_353:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingButton_19ihj_382 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingButton_19ihj_382:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingButton_19ihj_382:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._settingButton_19ihj_382 svg {
  font-size: 1rem;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._logoutButton_19ihj_409 {
  background: transparent;
  border-color: var(--clrAccent-30);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413._disabled_19ihj_378 {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413._disabled_19ihj_378 ._toggleSlider_19ihj_424 {
  cursor: not-allowed;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 input {
  opacity: 0;
  width: 0;
  height: 0;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 input:checked + ._toggleSlider_19ihj_424 {
  background-color: var(--clrAccent-30);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 input:checked + ._toggleSlider_19ihj_424:before {
  transform: translateX(20px);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 input:disabled + ._toggleSlider_19ihj_424 {
  cursor: not-allowed;
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 ._toggleSlider_19ihj_424 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clrAccent-10);
  transition: 0.3s;
  border-radius: 24px;
  border: 1px solid var(--clrAccent-20);
}
._settingsSection_19ihj_201 ._settingsContent_19ihj_254 ._settingItem_19ihj_263 ._toggle_19ihj_413 ._toggleSlider_19ihj_424:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--clrAccent-60);
  transition: 0.3s;
  border-radius: 50%;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 1000;
  animation: _fadeIn_19ihj_1 0.2s ease;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  animation: _slideUp_19ihj_1 0.3s ease;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalInput_19ihj_499 {
  width: 100%;
  padding: 12px 16px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalInput_19ihj_499:focus {
  outline: none;
  border-color: var(--clrAccent-30);
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalInput_19ihj_499::placeholder {
  color: var(--clrAccent-30);
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalError_19ihj_516 {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 0.8125rem;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 ._modalCancel_19ihj_545 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrAccent-80);
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 ._modalCancel_19ihj_545:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 ._modalConfirm_19ihj_553 {
  background: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
  color: var(--clrPrimary);
}
._settingsSection_19ihj_201 ._modal_19ihj_464 ._modalContent_19ihj_479 ._modalButtons_19ihj_524 ._modalConfirm_19ihj_553:hover:not(:disabled) {
  opacity: 0.9;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 {
  border-color: rgba(239, 68, 68, 0.3);
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerTitle_19ihj_564 {
  color: #ef4444;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerWarning_19ihj_567 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  padding: 16px;
  color: var(--clrAccent-100);
  font-size: 0.875rem;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerWarning_19ihj_567 p {
  margin: 0;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerWarning_19ihj_567 strong {
  color: #ef4444;
  font-weight: 700;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerWarning_19ihj_567 ul {
  margin: 0;
  padding-left: 20px;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerWarning_19ihj_567 ul li {
  margin: 4px 0;
  color: var(--clrAccent-80);
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerConfirm_19ihj_595 {
  background: rgba(239, 68, 68, 0.9);
  border-color: #ef4444;
  color: white;
}
._settingsSection_19ihj_201 ._dangerModal_19ihj_561 ._dangerConfirm_19ihj_595:hover:not(:disabled) {
  background: #ef4444;
}

@keyframes _slideDown_19ihj_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeIn_19ihj_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_19ihj_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_23hrq_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_23hrq_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._skeletonLoader_23hrq_201, ._textSkeleton_23hrq_201, ._imageSkeleton_23hrq_201, ._deckSkeleton_23hrq_201 {
  background: linear-gradient(90deg, var(--clrSecondary) 0%, var(--clrTertiary) 50%, var(--clrSecondary) 100%);
  background-size: 200% 100%;
  animation: _shimmer_23hrq_1 1.5s infinite;
  border-radius: 4px;
}

._deckSkeleton_23hrq_201 {
  width: 100%;
  height: 64px;
}

._imageSkeleton_23hrq_201 {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}

._textSkeleton_23hrq_201 {
  width: 100%;
  height: 16px;
}
._textSkeleton_23hrq_201._short_23hrq_223 {
  width: 60%;
}
._textSkeleton_23hrq_201._medium_23hrq_226 {
  width: 80%;
}

@keyframes _shimmer_23hrq_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_965h9_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_965h9_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _goldGradient_965h9_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _silverGradient_965h9_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _bronzeGradient_965h9_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
._topDecksCard_965h9_234 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  border-radius: 8px;
  background-color: var(--clrSecondary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
}
._topDecksCard_965h9_234 ._topDecksHeader_965h9_245 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  background-color: var(--clrTertiary);
  width: 100%;
  padding: 8px;
  border-radius: 4px 4px 0 0;
}
._topDecksCard_965h9_234 ._topDecksHeader_965h9_245 ._topDecksLabel_965h9_256 {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._topDecksCard_965h9_234 ._topDecksHeader_965h9_245 ._seasonSubtitle_965h9_262 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._topDecksCard_965h9_234 ._loadingText_965h9_267,
._topDecksCard_965h9_234 ._noDataText_965h9_268 {
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281._topDeck_965h9_234 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 185, 0, 0.15), rgba(255, 215, 0, 0.2), rgba(255, 185, 0, 0.15));
  background-size: 200% 200%;
  animation: _goldGradient_965h9_1 3s ease infinite;
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281._topDeck_965h9_234:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 185, 0, 0.2), rgba(255, 215, 0, 0.25), rgba(255, 185, 0, 0.2));
  background-size: 200% 200%;
  animation: _goldGradient_965h9_1 3s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281._secondDeck_965h9_313 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.15), rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.15));
  background-size: 200% 200%;
  animation: _silverGradient_965h9_1 3s ease infinite;
  border-color: rgba(192, 192, 192, 0.5);
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.2);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281._secondDeck_965h9_313:hover {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.25), rgba(169, 169, 169, 0.2), rgba(192, 192, 192, 0.25), rgba(169, 169, 169, 0.2));
  background-size: 200% 200%;
  animation: _silverGradient_965h9_1 3s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(192, 192, 192, 0.3);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281._thirdDeck_965h9_327 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(184, 115, 51, 0.15), rgba(205, 127, 50, 0.2), rgba(184, 115, 51, 0.15));
  background-size: 200% 200%;
  animation: _bronzeGradient_965h9_1 3s ease infinite;
  border-color: rgba(205, 127, 50, 0.5);
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.2);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281._thirdDeck_965h9_327:hover {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.25), rgba(184, 115, 51, 0.2), rgba(205, 127, 50, 0.25), rgba(184, 115, 51, 0.2));
  background-size: 200% 200%;
  animation: _bronzeGradient_965h9_1 3s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(205, 127, 50, 0.3);
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281 ._rankBadge_965h9_341 {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: rgb(90, 80, 22) !important;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  min-width: 2rem;
  text-align: center;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281 ._deckImageWrapper_965h9_351 {
  flex-shrink: 0;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281 ._deckStats_965h9_354 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281 ._deckStats_965h9_354 ._winRate_965h9_363 {
  font-size: 1.25rem;
  font-weight: 700;
  width: 100%;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItem_965h9_281 ._deckStats_965h9_354 ._record_965h9_368 {
  font-size: 0.75rem;
  width: 100%;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItemSkeleton_965h9_372 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid transparent;
}
._topDecksCard_965h9_234 ._decksList_965h9_273 ._deckItemSkeleton_965h9_372 ._deckStatsSkeleton_965h9_384 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  width: 100%;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_de4j2_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_de4j2_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._allDecksCard_de4j2_201 {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: var(--clrTertiary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}

._headerButton_de4j2_211 {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
  color: var(--clrAccent-100);
}
._headerButton_de4j2_211:hover {
  background: rgba(255, 255, 255, 0.03);
}

._headerContent_de4j2_227 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

._headerLabel_de4j2_234 {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clrText);
}

._seasonSubtitle_de4j2_242 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}

._expandIcon_de4j2_248 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._expandIcon_de4j2_248._expanded_de4j2_253 {
  transform: rotate(180deg);
}

._decksListContainer_de4j2_257 {
  padding: 1rem 1.5rem 1.5rem;
  animation: _slideDown_de4j2_1 0.2s ease-out;
  background-color: var(--clrSecondary);
}

@keyframes _slideDown_de4j2_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._filterChips_de4j2_273 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

._filterChip_de4j2_273 {
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--clrAccent-30);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clrAccent-70);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._filterChip_de4j2_273:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-100);
}
._filterChip_de4j2_273._active_de4j2_297 {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}

._loadingText_de4j2_303,
._noDataText_de4j2_304 {
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
  color: var(--clrAccent-100);
}

._decksList_de4j2_257 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

._deckRow_de4j2_317 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--clrPrimary);
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}
._deckRow_de4j2_317:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

._deckInfo_de4j2_332 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

._deckImageWrapper_de4j2_340 {
  flex-shrink: 0;
}

._deckName_de4j2_344 {
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

._deckSet_de4j2_352 {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--clrAccent-100);
}

._deckStats_de4j2_358 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

._winRate_de4j2_366 {
  font-size: 1rem;
  font-weight: 700;
}

._statsChips_de4j2_371 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

._statChip_de4j2_377 {
  font-size: 0.75rem;
  color: var(--clrAccent-100);
  white-space: nowrap;
}

._loadMoreButton_de4j2_383 {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--clrAccent-30);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clrAccent-100);
  cursor: pointer;
  transition: all 0.2s ease;
}
._loadMoreButton_de4j2_383:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--clrAccent-50);
  color: var(--clrText);
}
._loadMoreButton_de4j2_383:active {
  transform: scale(0.98);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_axb3n_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_axb3n_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._archiveCard_axb3n_201 {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: var(--clrTertiary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}

._mainHeaderButton_axb3n_211 {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
  color: var(--clrAccent-100);
}
._mainHeaderButton_axb3n_211:hover {
  background: rgba(255, 255, 255, 0.03);
}

._headerContent_axb3n_227 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

._headerLabel_axb3n_234 {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clrText);
}

._headerSubtitle_axb3n_242 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}

._expandIcon_axb3n_248 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._expandIcon_axb3n_248._expanded_axb3n_253 {
  transform: rotate(180deg);
}

._archiveListContainer_axb3n_257 {
  padding: 8px;
  animation: _slideDown_axb3n_1 0.2s ease-out;
  background-color: var(--clrSecondary);
}

@keyframes _slideDown_axb3n_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._loadingText_axb3n_273,
._noDataText_axb3n_274 {
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
  color: var(--clrAccent-30);
  font-style: italic;
}

._seasonsList_axb3n_282 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._seasonItem_axb3n_288 {
  border: 1px solid var(--clrAccent-30);
  border-radius: 6px;
  overflow: hidden;
  background: var(--clrTertiary);
}

._seasonHeaderButton_axb3n_295 {
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
  color: var(--clrText);
}
._seasonHeaderButton_axb3n_295:hover {
  background: rgba(255, 255, 255, 0.05);
}

._seasonInfo_axb3n_311 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

._seasonName_axb3n_318 {
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._tournamentCount_axb3n_326 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}

._calendarIcon_axb3n_332 {
  font-size: 1rem;
  color: var(--clrAccent-100);
}

._seasonDate_axb3n_337 {
  font-size: 0.75rem;
  color: var(--clrAccent-60);
}

._seasonExpandIcon_axb3n_342 {
  font-size: 1rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._seasonExpandIcon_axb3n_342._expanded_axb3n_253 {
  transform: rotate(180deg);
}

._decksList_axb3n_351 {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--clrSecondary);
  animation: _slideDown_axb3n_1 0.2s ease-out;
}

._deckRow_axb3n_360 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--clrPrimary);
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
._deckRow_axb3n_360:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}
._deckRow_axb3n_360._topDeck_axb3n_375 {
  border-color: rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.05);
}
._deckRow_axb3n_360._secondDeck_axb3n_379 {
  border-color: rgba(192, 192, 192, 0.3);
  background: rgba(192, 192, 192, 0.05);
}
._deckRow_axb3n_360._thirdDeck_axb3n_383 {
  border-color: rgba(205, 127, 50, 0.3);
  background: rgba(205, 127, 50, 0.05);
}

._rankBadge_axb3n_388 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--clrAccent-20);
  color: var(--clrAccent-100);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
._topDeck_axb3n_375 ._rankBadge_axb3n_388 {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
}
._secondDeck_axb3n_379 ._rankBadge_axb3n_388 {
  background: rgba(192, 192, 192, 0.2);
  color: #c0c0c0;
}
._thirdDeck_axb3n_383 ._rankBadge_axb3n_388 {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
}

._deckInfo_axb3n_414 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

._deckImageWrapper_axb3n_422 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
}

._deckName_axb3n_430 {
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

._deckSet_axb3n_438 {
  font-size: 0.75rem;
  color: var(--clrAccent-60);
  font-weight: 400;
}

._deckStats_axb3n_444 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

._winRate_axb3n_451 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clrAccent-100);
}

._record_axb3n_457 {
  font-size: 0.75rem;
  color: var(--clrAccent-60);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_2zpsm_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_2zpsm_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._testingCard_2zpsm_201 {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: var(--clrPrimary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}

._mainHeaderButton_2zpsm_211 {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
  color: var(--clrAccent-100);
}
._mainHeaderButton_2zpsm_211:hover {
  background: rgba(255, 255, 255, 0.03);
}

._headerContent_2zpsm_227 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

._headerLabel_2zpsm_234 {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clrText);
}

._headerSubtitle_2zpsm_242 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}

._expandIcon_2zpsm_248 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._expandIcon_2zpsm_248._expanded_2zpsm_253 {
  transform: rotate(180deg);
}

._contentContainer_2zpsm_257 {
  padding: 8px;
  animation: _slideDown_2zpsm_1 0.2s ease-out;
}

@keyframes _slideDown_2zpsm_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._loadingText_2zpsm_272,
._noDataText_2zpsm_273 {
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
  color: var(--clrAccent-30);
  font-style: italic;
}

._decksList_2zpsm_281 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._deckItem_2zpsm_287 {
  border: 1px solid var(--clrAccent-30);
  color: var(--clrAccent-70);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

._deckHeaderButton_2zpsm_295 {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background 0.2s ease;
  color: var(--clrAccent-70);
}
._deckHeaderButton_2zpsm_295:hover {
  background: rgba(255, 255, 255, 0.03);
}

._deckInfo_2zpsm_312 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

._deckImageWrapper_2zpsm_320 {
  flex-shrink: 0;
}

._deckNameInfo_2zpsm_324 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

._deckName_2zpsm_324 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clrText);
  text-align: left;
}

._deckSet_2zpsm_338 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
}

._deckStatsContainer_2zpsm_343 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._deckStatsInfo_2zpsm_350 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

._winRate_2zpsm_357 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clrAccent-100);
}

._record_2zpsm_363 {
  font-size: 0.75rem;
  color: var(--clrAccent-70);
}

._deckExpandIcon_2zpsm_368 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
  flex-shrink: 0;
}
._deckExpandIcon_2zpsm_368._expanded_2zpsm_253 {
  transform: rotate(180deg);
}

._matchupsContainer_2zpsm_378 {
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--clrAccent-30);
  animation: _slideDown_2zpsm_1 0.2s ease-out;
}

._noMatchupsText_2zpsm_385 {
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
  color: var(--clrAccent-30);
  font-style: italic;
}

._matchupsGrid_2zpsm_393 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
@media (min-width: 600px) {
  ._matchupsGrid_2zpsm_393 {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

._matchupCard_2zpsm_404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--clrAccent-30);
  border-radius: 6px;
  transition: all 0.2s ease;
}
._matchupCard_2zpsm_404:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--clrAccent-50);
}

._matchupImageWrapper_2zpsm_420 {
  flex-shrink: 0;
}

._matchupStats_2zpsm_424 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

._matchupWinRate_2zpsm_432 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clrAccent-100);
}

._matchupRecord_2zpsm_438 {
  font-size: 0.75rem;
  color: var(--clrAccent-70);
  text-align: center;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1pooz_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1pooz_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._profileContainer_1pooz_201 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  padding-left: 16px;
  padding-right: 16px;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._userWelcomeMsg_1pooz_222 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  flex: 1;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._userWelcomeMsg_1pooz_222 ._userIcon_1pooz_233 {
  width: 32px;
  height: 32px;
  color: var(--clrTextPrimary);
  flex-shrink: 0;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 {
  flex-shrink: 0;
  position: relative;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameSelectorBtn_1pooz_243 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 180px;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameSelectorBtn_1pooz_243:hover {
  background: var(--clrTertiary);
  border-color: var(--clrAccent-30);
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameSelectorBtn_1pooz_243 ._chevron_1pooz_264 {
  transition: transform 0.2s ease;
  color: var(--clrTextSecondary);
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameSelectorBtn_1pooz_243 ._chevron_1pooz_264._open_1pooz_268 {
  transform: rotate(180deg);
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameDropdown_1pooz_271 {
  margin-top: 8px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: absolute;
  content: "";
  top: 32px;
  left: 0;
  width: 100%;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameDropdown_1pooz_271 ._gameOption_1pooz_284 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameDropdown_1pooz_271 ._gameOption_1pooz_284:hover {
  background: var(--clrTertiary);
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameDropdown_1pooz_271 ._gameOption_1pooz_284._active_1pooz_304 {
  background: var(--clrTertiary);
  font-weight: 600;
}
._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameDropdown_1pooz_271 ._gameOption_1pooz_284 ._gameLogo_1pooz_308 {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._loadingText_1pooz_322 {
  text-align: center;
  color: var(--clrTextSecondary);
  padding: 24px;
  font-size: 14px;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._statsRow_1pooz_335 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
@media (max-width: 480px) {
  ._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._statsRow_1pooz_335 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
  }
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._premiumOverlayContainer_1pooz_353 {
  position: relative;
  width: 100%;
  margin-top: 8px;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._blurredStats_1pooz_358 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  filter: blur(8px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._premiumPrompt_1pooz_370 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  border: 1px solid var(--clrAccent-30);
  border-radius: 12px;
  z-index: 10;
  pointer-events: auto;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._premiumPrompt_1pooz_370 ._icon_1pooz_386 {
  width: 48px;
  height: 48px;
  color: rgb(255, 217, 0);
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._premiumPrompt_1pooz_370 p {
  color: var(--clrPrimary);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 8px 32px;
  background: linear-gradient(135deg, rgb(255, 217, 0), rgb(255, 166, 0));
  box-shadow: 0 10px 40px rgba(255, 217, 0, 0.2);
  border-radius: 4px;
  white-space: nowrap;
}
._profileContainer_1pooz_201 ._statsSection_1pooz_314 ._statsContent_1pooz_328 ._expandableSections_1pooz_402 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_1pooz_201 ._paymentMethods_1pooz_410 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
}
._profileContainer_1pooz_201 ._paymentMethods_1pooz_410 ._paymentLabel_1pooz_419 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
._profileContainer_1pooz_201 ._paymentMethods_1pooz_410 ._paymentIcons_1pooz_427 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
._profileContainer_1pooz_201 ._paymentMethods_1pooz_410 ._paymentIcons_1pooz_427 ._paymentIcon_1pooz_427 {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
._profileContainer_1pooz_201 ._paymentMethods_1pooz_410 ._paymentIcons_1pooz_427 ._paymentIcon_1pooz_427:hover {
  transform: translateY(-2px);
  opacity: 1;
}
._profileContainer_1pooz_201 ._paymentMethods_1pooz_410 ._paymentIcons_1pooz_427 ._paymentIcon_1pooz_427 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
._profileContainer_1pooz_201 ._disclaimer_1pooz_453 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 16px 24px;
}
._profileContainer_1pooz_201 ._disclaimer_1pooz_453 p {
  font-size: 0.75rem;
  color: var(--clrTextTertiary);
  text-align: center;
  line-height: 1.4;
  margin: 0;
  max-width: 600px;
}
._profileContainer_1pooz_201 ._disclaimer_1pooz_453 p a {
  color: var(--clrTextSecondary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
._profileContainer_1pooz_201 ._disclaimer_1pooz_453 p a:hover {
  color: var(--clrTextPrimary);
  text-decoration: underline;
}
._profileContainer_1pooz_201 ._legalLinks_1pooz_480 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 24px 0;
  padding-bottom: 32px;
}
._profileContainer_1pooz_201 ._legalLinks_1pooz_480 ._legalLink_1pooz_480 {
  background: none;
  border: none;
  color: var(--clrTextSecondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}
._profileContainer_1pooz_201 ._legalLinks_1pooz_480 ._legalLink_1pooz_480:hover {
  color: var(--clrTextPrimary);
}
._profileContainer_1pooz_201 ._legalLinks_1pooz_480 ._linkSeparator_1pooz_503 {
  color: var(--clrAccent-30);
  font-size: 12px;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 24px;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  max-width: 600px;
  width: 100%;
  padding: 32px;
  background: var(--clrSecondary);
  border-radius: 12px;
  border: 1px solid var(--clrAccent-100);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0;
  text-align: center;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._subtitle_1pooz_537 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  text-align: center;
  margin: 0;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 ._icon_1pooz_386 {
  font-size: 24px;
  flex-shrink: 0;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 div h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 div p {
  font-size: 12px;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.4;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 ._primaryButton_1pooz_589 {
  padding: 14px 24px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 ._primaryButton_1pooz_589:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 ._primaryButton_1pooz_589:active {
  transform: translateY(0);
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 ._secondaryButton_1pooz_608 {
  padding: 14px 24px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 ._secondaryButton_1pooz_608:hover {
  background: var(--clrSecondary);
  border-color: var(--clrAccent-30);
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._guestActionButtons_1pooz_581 ._secondaryButton_1pooz_608:active {
  transform: scale(0.98);
}
._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._dataWarning_1pooz_626 {
  font-size: 12px;
  color: var(--clrWarning-100);
  text-align: center;
  margin: 0;
  padding: 12px;
  background: var(--clrWarning-50);
  border-radius: 6px;
  opacity: 0.2;
}
@media (max-width: 768px) {
  ._profileContainer_1pooz_201 {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  ._profileContainer_1pooz_201 ._profileHeader_1pooz_214 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  ._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._userWelcomeMsg_1pooz_222 {
    font-size: 16px;
  }
  ._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._gameSwitcher_1pooz_239 ._gameSelectorBtn_1pooz_243 {
    width: 100%;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 {
    padding: 16px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 {
    padding: 24px;
  }
}
@media (max-width: 480px) {
  ._profileContainer_1pooz_201 {
    padding-left: 8px;
    padding-right: 8px;
    gap: 8px;
  }
  ._profileContainer_1pooz_201 ._profileHeader_1pooz_214 ._userWelcomeMsg_1pooz_222 {
    font-size: 14px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 {
    padding: 8px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 {
    padding: 20px;
    gap: 20px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 h2 {
    font-size: 16px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 {
    gap: 16px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 {
    gap: 12px;
  }
  ._profileContainer_1pooz_201 ._guestPromptContainer_1pooz_507 ._guestPrompt_1pooz_507 ._benefitsList_1pooz_543 ._benefit_1pooz_543 ._icon_1pooz_386 {
    font-size: 16px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_95cno_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_95cno_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalOverlay_95cno_201 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding-top: 76px;
  padding-bottom: calc(98px + env(safe-area-inset-bottom));
  padding-left: 16px;
  padding-right: 16px;
}

._modal_95cno_201 {
  width: min(420px, 100%);
  max-width: 90%;
  max-height: calc(100vh - 76px - (98px + env(safe-area-inset-bottom)) - 32px);
  background-color: var(--clrPrimary);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  box-shadow: 0 0 30px var(--clrAccent-30);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--clrAccent-30);
}

._modalHeader_95cno_233 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._modalTitle_95cno_242 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._modalSubtitle_95cno_249 {
  margin: 0;
  font-size: 16px;
  color: var(--clrAccent-60);
}

._modalContent_95cno_255 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._modalActions_95cno_264 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._primaryBtn_95cno_273 {
  flex: 1;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._primaryBtn_95cno_273:hover:not(:disabled) {
  opacity: 0.9;
}
._primaryBtn_95cno_273:active:not(:disabled) {
  transform: scale(0.98);
}
._primaryBtn_95cno_273:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._secondaryBtn_95cno_297 {
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrError-100);
  background-color: transparent;
  color: var(--clrError-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 6px rgba(216, 72, 72, 0.6);
}
._secondaryBtn_95cno_297:hover:not(:disabled) {
  background-color: rgba(216, 72, 72, 0.1);
}
._secondaryBtn_95cno_297:active:not(:disabled) {
  transform: scale(0.98);
}
._secondaryBtn_95cno_297:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelOnlyBtn_95cno_321 {
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._cancelOnlyBtn_95cno_321:hover:not(:disabled) {
  opacity: 0.9;
}
._cancelOnlyBtn_95cno_321:active:not(:disabled) {
  transform: scale(0.98);
}
._cancelOnlyBtn_95cno_321:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectionCard_95cno_345 {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--clrAccent-30);
  background-color: var(--clrSecondary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._selectionCard_95cno_345:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._selectionCard_95cno_345:active {
  transform: translateY(0);
}

._selectionIcon_95cno_367 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 60px;
  height: 60px;
  font-size: 32px;
  flex-shrink: 0;
}

._selectionText_95cno_379 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

._selectionTitle_95cno_387 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._selectionDescription_95cno_393 {
  font-size: 14px;
  color: var(--clrAccent-30);
}

._formGroup_95cno_398 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

._formLabel_95cno_407 {
  padding: 0 4px;
  font-size: 16px;
  color: var(--clrTextPrimary);
}

._formInput_95cno_413 {
  width: 100%;
  padding: 16px 12px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-size: 16px;
}
._formInput_95cno_413::placeholder {
  color: var(--clrAccent-30);
}
._formInput_95cno_413:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  ._modalOverlay_95cno_201 {
    padding: 8px;
  }
  ._modal_95cno_201 {
    padding: 20px;
    width: 100%;
    max-height: calc(100vh - 16px);
    margin: 8px auto;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_ln5wx_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_ln5wx_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalContent_ln5wx_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

._iconWrapper_ln5wx_211 {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 8px;
}

._warningIcon_ln5wx_223 {
  width: 48px;
  height: 48px;
  color: #f59e0b;
}

._upgradeIcon_ln5wx_229 {
  width: 48px;
  height: 48px;
  color: #ffd700;
}

._description_ln5wx_235 {
  font-size: 16px;
  color: var(--clrTextPrimary);
  margin: 0;
  line-height: 1.5;
}
._description_ln5wx_235 strong {
  color: var(--clrAccent);
}

._subDescription_ln5wx_245 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.5;
}
._subDescription_ln5wx_245 strong {
  color: var(--clrAccent);
}

._featureList_ln5wx_255 {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
}
._featureList_ln5wx_255 li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--clrTextSecondary);
  font-size: 12px;
  padding: 10px 14px;
  background: var(--clrSecondary);
  border-radius: 4px;
}
._featureList_ln5wx_255 li ._checkmark_ln5wx_279 {
  font-weight: 700;
  color: #ffd700;
  font-size: 14px;
  flex-shrink: 0;
}
._featureList_ln5wx_255 li span:last-child {
  font-weight: 500;
}

._actions_ln5wx_289 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

._upgradeButton_ln5wx_299 {
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}
._upgradeButton_ln5wx_299:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}
._upgradeButton_ln5wx_299:active {
  transform: translateY(0);
}

._reportButton_ln5wx_321 {
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent);
  background: transparent;
  color: var(--clrAccent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._reportButton_ln5wx_321:hover {
  background: rgba(var(--clrAccent-rgb), 0.1);
}

._closeButton_ln5wx_344 {
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  background: var(--clrSecondary);
  color: var(--clrTextSecondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._closeButton_ln5wx_344:hover {
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_ylzrf_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_ylzrf_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._drawer_ylzrf_201 {
  display: block;
}

._content_ylzrf_205 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  width: 100%;
  min-width: 0;
}

._createDeckButton_ylzrf_214 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 2px dashed var(--clrAccent);
  border-radius: 8px;
  color: var(--clrAccent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._createDeckButton_ylzrf_214:hover:not(._disabled_ylzrf_230) {
  background: var(--clrAccent);
  color: white;
  border-style: solid;
}
._createDeckButton_ylzrf_214._disabled_ylzrf_230 {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--clrTextTertiary);
  color: var(--clrTextTertiary);
}

._plusIcon_ylzrf_242 {
  width: 20px;
  height: 20px;
}

._upgradeHint_ylzrf_247 {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--clrAccent);
  color: white;
  border-radius: 4px;
  margin-left: 4px;
}

._loading_ylzrf_256 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--clrTextSecondary);
}

._spinner_ylzrf_266 {
  width: 24px;
  height: 24px;
  border: 2px solid var(--clrSeparator);
  border-top-color: var(--clrAccent);
  border-radius: 50%;
  animation: _spin_ylzrf_266 0.8s linear infinite;
}

@keyframes _spin_ylzrf_266 {
  to {
    transform: rotate(360deg);
  }
}
._emptyState_ylzrf_280 {
  text-align: center;
  padding: 32px 16px;
  color: var(--clrTextSecondary);
}
._emptyState_ylzrf_280 p {
  margin: 4px 0;
  font-size: 14px;
}

._deckList_ylzrf_290 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

._deckCard_ylzrf_298 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: var(--clrCardBg);
  border: 1px solid var(--clrSeparator);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: left;
  min-width: 0;
}
._deckCard_ylzrf_298:hover:not(._disabled_ylzrf_230):not(._adding_ylzrf_311) {
  border-color: var(--clrAccent);
}
._deckCard_ylzrf_298._disabled_ylzrf_230 {
  opacity: 0.6;
}
._deckCard_ylzrf_298._adding_ylzrf_311 {
  opacity: 0.7;
  pointer-events: none;
}
._deckCard_ylzrf_298._active_ylzrf_321 {
  border-color: var(--clrAccent);
  background: rgba(var(--clrAccentRgb), 0.05);
}
._deckCard_ylzrf_298._syncing_ylzrf_325 {
  opacity: 0.8;
}

._deckCardButton_ylzrf_329 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
._disabled_ylzrf_230 ._deckCardButton_ylzrf_329 {
  cursor: not-allowed;
}

._leaderImage_ylzrf_345 {
  flex-shrink: 0;
}

._deckInfo_ylzrf_349 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._deckName_ylzrf_357 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._deckMeta_ylzrf_366 {
  font-size: 12px;
  color: var(--clrTextSecondary);
}

._disabledReason_ylzrf_371 {
  font-size: 12px;
  color: var(--clrError);
}

._quantityBadge_ylzrf_376 {
  padding: 4px 8px;
  background: var(--clrAccent);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  flex-shrink: 0;
}

._counterControls_ylzrf_386 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._counterButton_ylzrf_393 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--clrAccent);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}
._counterButton_ylzrf_393:hover:not(:disabled) {
  background: var(--clrAccentHover);
  transform: scale(1.05);
}
._counterButton_ylzrf_393:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._counterIcon_ylzrf_416 {
  width: 18px;
  height: 18px;
}

._counterValue_ylzrf_421 {
  min-width: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--clrTextPrimary);
}

._addingSpinner_ylzrf_429 {
  width: 20px;
  height: 20px;
  border: 2px solid var(--clrAccent-30);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_ylzrf_266 0.8s linear infinite;
  flex-shrink: 0;
  margin: 0 auto;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_13eag_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_13eag_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._content_13eag_201 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 16px;
}

._noLeaderMessage_13eag_208 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  gap: 12px;
}
._noLeaderMessage_13eag_208 h3 {
  margin: 0;
  font-size: 18px;
  color: var(--clrTextPrimary);
}
._noLeaderMessage_13eag_208 p {
  margin: 0;
  font-size: 14px;
  color: var(--clrTextSecondary);
}

._iconWrapper_13eag_227 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clrAccent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.2;
}

._warningIcon_13eag_238 {
  font-size: 28px;
  font-weight: bold;
  color: var(--clrAccent);
}

._hint_13eag_244 {
  font-size: 12px !important;
  opacity: 0.7;
}

._form_13eag_249 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._leaderPreview_13eag_255 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--clrCardBg);
  border: 1px solid var(--clrSeparator);
  border-radius: 8px;
}

._leaderImageWrapper_13eag_265 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

._checkBadge_13eag_280 {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--clrSuccess);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--clrCardBg);
}

._checkIcon_13eag_294 {
  width: 14px;
  height: 14px;
  color: white;
  stroke-width: 3;
}

._leaderInfo_13eag_301 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._leaderLabel_13eag_308 {
  font-size: 12px;
  color: var(--clrTextTertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._leaderName_13eag_315 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._leaderColors_13eag_324 {
  font-size: 12px;
  color: var(--clrTextSecondary);
}

._inputGroup_13eag_329 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

._inputLabel_13eag_336 {
  font-size: 12px;
  font-weight: 600;
  color: var(--clrTextSecondary);
}

._input_13eag_329 {
  width: 100%;
  padding: 14px 16px;
  padding-right: 50px;
  background: var(--clrCardBg);
  border: 1px solid var(--clrSeparator);
  border-radius: 8px;
  font-size: 14px;
  color: var(--clrTextPrimary);
  transition: border-color 0.2s ease;
}
._input_13eag_329:focus {
  outline: none;
  border-color: var(--clrAccent);
}
._input_13eag_329::placeholder {
  color: var(--clrTextTertiary);
}
._input_13eag_329:disabled {
  opacity: 0.6;
}

._charCount_13eag_364 {
  position: absolute;
  right: 12px;
  bottom: 14px;
  font-size: 12px;
  color: var(--clrTextTertiary);
}

._createButton_13eag_372 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: var(--clrAccent);
  color: white;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._createButton_13eag_372:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
._createButton_13eag_372:active:not(:disabled) {
  transform: translateY(0);
}
._createButton_13eag_372:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._spinner_13eag_400 {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: _spin_13eag_400 0.8s linear infinite;
}

@keyframes _spin_13eag_400 {
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1iz90_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1iz90_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _modalBounceIn_1iz90_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_1iz90_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _spin_1iz90_530 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._exportModal_1iz90_230 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 9999;
  cursor: pointer;
  animation: _fadeIn_1iz90_1 0.3s ease;
  overflow: hidden;
}

._exportContent_1iz90_250 {
  width: min(90vw, 600px);
  min-height: 500px;
  max-height: 85vh;
  background-color: var(--clrPrimary);
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 0;
  cursor: default;
  overflow: hidden;
  animation: _modalBounceIn_1iz90_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportContent_1iz90_250 {
    width: 95vw;
    min-height: 450px;
    max-height: 80vh;
    padding: 8px;
  }
}

._exportHeader_1iz90_276 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 8px;
  width: 100%;
}
@media (max-width: 768px) {
  ._exportHeader_1iz90_276 {
    gap: 8px;
  }
}

._leaderSection_1iz90_292 {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

._deckInfo_1iz90_301 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

._statsSection_1iz90_311 {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
}

._deckTitle_1iz90_320 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 768px) {
  ._deckTitle_1iz90_320 {
    font-size: 12px;
  }
}

._leaderName_1iz90_334 {
  font-size: 12px;
  font-weight: 500;
  color: var(--clrTextSecondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
@media (max-width: 768px) {
  ._leaderName_1iz90_334 {
    font-size: 10px;
    max-width: 100px;
  }
}

._cardCount_1iz90_350 {
  font-size: 10px;
  font-weight: 500;
  color: var(--clrAccent-60);
  white-space: nowrap;
}
@media (max-width: 768px) {
  ._cardCount_1iz90_350 {
    font-size: 8px;
  }
}

._statsGrid_1iz90_362 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 4px;
}
@media (max-width: 768px) {
  ._statsGrid_1iz90_362 {
    gap: 2px;
  }
}

._separator_1iz90_374 {
  width: 100%;
  height: 1px;
  background: rgba(var(--clrTextTertiary-rgb, 128, 128, 128), 0.2);
  margin: 8px 0;
  flex-shrink: 0;
}

._cardsGrid_1iz90_382 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: min-content;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  align-content: start;
}
._cardsGrid_1iz90_382::-webkit-scrollbar {
  width: 4px;
}
._cardsGrid_1iz90_382::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 2px;
}
._cardsGrid_1iz90_382::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 2px;
}
._cardsGrid_1iz90_382::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
@media (max-width: 768px) {
  ._cardsGrid_1iz90_382 {
    gap: 4px;
  }
}

._cardThumbnail_1iz90_413 {
  position: relative;
  aspect-ratio: 7/10;
  border-radius: 4px;
  overflow: hidden;
  background: var(--clrSecondary);
}

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

._cardBadge_1iz90_427 {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

._setId_1iz90_439 {
  font-size: 6px;
  font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  padding: 1px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
@media (min-width: 768px) {
  ._setId_1iz90_439 {
    font-size: 12px;
    padding: 2px 6px;
  }
}

._quantity_1iz90_458 {
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  padding: 1px 4px;
}
@media (min-width: 768px) {
  ._quantity_1iz90_458 {
    font-size: 14px;
    padding: 2px 6px;
  }
}

._branding_1iz90_473 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
  flex-shrink: 0;
}
._branding_1iz90_473 img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

._brandingText_1iz90_488 {
  font-size: 10px;
  color: var(--clrAccent-60);
}

._actionButtons_1iz90_493 {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: _modalBounceIn_1iz90_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

._downloadBtn_1iz90_503 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._downloadBtn_1iz90_503 svg {
  width: 18px;
  height: 18px;
}
._downloadBtn_1iz90_503:hover:not(:disabled) {
  transform: translateY(-2px);
}
._downloadBtn_1iz90_503:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._downloadBtn_1iz90_503 ._spinner_1iz90_530 {
  animation: _spin_1iz90_530 1s linear infinite;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_b6qsy_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_b6qsy_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalDescription_b6qsy_201 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._modalCancelBtn_b6qsy_207,
._modalDeleteBtn_b6qsy_208 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modalCancelBtn_b6qsy_207:disabled,
._modalDeleteBtn_b6qsy_208:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._modalCancelBtn_b6qsy_207 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}

._modalDeleteBtn_b6qsy_208 {
  background-color: #dc3545;
  color: white;
}
._modalDeleteBtn_b6qsy_208:hover:not(:disabled) {
  background-color: #c82333;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1ij2d_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1ij2d_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._cardsPageContainer_1ij2d_201 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: calc(60px + env(safe-area-inset-top));
  background: transparent;
  overflow: hidden;
}

._tabNavigation_1ij2d_211 {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  margin: 0 auto;
  margin-bottom: 8px;
  position: relative;
  z-index: 100;
  max-width: 800px;
}

._tabButton_1ij2d_222 {
  padding: 10px 20px;
  width: 100%;
  background: var(--clrTertiary);
  border: 1px solid var(--clrTextSecondary);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--clrTextSecondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
._tabButton_1ij2d_222._active_1ij2d_234 {
  background: var(--clrAccent-30);
  border-color: var(--clrAccent);
  color: var(--clrBg);
  box-shadow: 0 2px 8px rgba(var(--clrAccent-rgb), 0.3);
}

._resultsSection_1ij2d_241 {
  flex: 1;
  padding: 20px 16px;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
  max-width: 1200px;
  margin: -175px auto 0;
  padding-top: 160px;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-20) transparent;
}
._resultsSection_1ij2d_241::-webkit-scrollbar {
  width: 6px;
}
._resultsSection_1ij2d_241::-webkit-scrollbar-track {
  background: transparent;
}
._resultsSection_1ij2d_241::-webkit-scrollbar-thumb {
  background: var(--clrAccent-20);
  border-radius: 3px;
}
._resultsSection_1ij2d_241::-webkit-scrollbar-thumb:hover {
  background: var(--clrTextSecondary);
}

._emptyState_1ij2d_268 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--clrTextSecondary);
}
._emptyState_1ij2d_268 ._emptyIcon_1ij2d_277 {
  width: 80px;
  height: 80px;
  opacity: 0.3;
  margin-bottom: 20px;
}
._emptyState_1ij2d_268 h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
._emptyState_1ij2d_268 p {
  font-size: 14px;
  margin: 0;
}

._noResults_1ij2d_294 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--clrTextSecondary);
}
._noResults_1ij2d_294 h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
._noResults_1ij2d_294 p {
  font-size: 14px;
  margin: 0;
}

._resultsCount_1ij2d_314 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--clrTextSecondary);
  font-weight: 500;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
._themeDark_1ij2d_120 ._resultsCount_1ij2d_314, ._themePastelDark_1ij2d_330 ._resultsCount_1ij2d_314 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

._cardsGrid_1ij2d_336 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
@media (min-width: 768px) {
  ._cardsGrid_1ij2d_336 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

._cardItem_1ij2d_348 {
  background: var(--clrSecondary);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
._cardItem_1ij2d_348:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
._cardItem_1ij2d_348:active {
  transform: translateY(-2px);
}

._cardImageWrapper_1ij2d_363 {
  position: relative;
  width: 100%;
  aspect-ratio: 63/88;
  overflow: hidden;
  background: var(--clrTertiary);
}

._cardImageSkeleton_1ij2d_371 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, var(--clrTertiary) 0%, var(--clrSecondary) 50%, var(--clrTertiary) 100%);
  background-size: 200% 100%;
  animation: _shimmer_1ij2d_1 1.5s infinite;
}

@keyframes _shimmer_1ij2d_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
._cardImage_1ij2d_363 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
  z-index: 1;
}
._cardImage_1ij2d_363._imageLoading_1ij2d_401 {
  opacity: 0;
  visibility: hidden;
}
._cardImage_1ij2d_363._imageLoaded_1ij2d_405 {
  opacity: 1;
  visibility: visible;
}

._noImage_1ij2d_410 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--clrTextTertiary);
  background: var(--clrTertiary);
}

._cardInfo_1ij2d_421 {
  padding: 12px;
}

._cardHeader_1ij2d_425 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

._cardRarity_1ij2d_432 {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--clrTextPrimary);
  border: 1px solid var(--clrSecondary);
  color: var(--clrPrimary);
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

._cardName_1ij2d_444 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._cardMeta_1ij2d_457 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

._cardType_1ij2d_464,
._cardColor_1ij2d_465 {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
  font-weight: 500;
  text-transform: capitalize;
}

._cardStats_1ij2d_475 {
  font-size: 8px;
  color: var(--clrTextSecondary);
  margin-bottom: 4px;
}

._cardSet_1ij2d_481 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  font-style: italic;
}

._cardSkeleton_1ij2d_487 {
  background: var(--clrSecondary);
  border-radius: 8px;
  overflow: hidden;
}
._cardSkeleton_1ij2d_487 ._cardImageWrapper_1ij2d_363 {
  aspect-ratio: 63/88;
  background: var(--clrTertiary);
}

._cardInfoSkeleton_1ij2d_497 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._cardMetaSkeleton_1ij2d_504 {
  display: flex;
  gap: 6px;
}

._loadMoreTrigger_1ij2d_509 {
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

._loadingMore_1ij2d_518 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

._spinner_1ij2d_525 {
  width: 32px;
  height: 32px;
  border: 3px solid var(--clrTertiary);
  border-top-color: var(--clrAccent);
  border-radius: 50%;
  animation: _spin_1ij2d_525 0.8s linear infinite;
}

@keyframes _spin_1ij2d_525 {
  to {
    transform: rotate(360deg);
  }
}
._searchContainer_1ij2d_539 {
  flex-shrink: 0;
  padding: 12px 16px;
  padding-bottom: 24px;
  z-index: 100;
  text-align: center;
  position: relative;
}
._searchContainer_1ij2d_539::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clrPrimary);
  opacity: 0.7;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  z-index: -1;
}

._searchRow_1ij2d_560 {
  display: flex;
  gap: 10px;
  max-width: 580px;
  margin: 0 auto;
  align-items: stretch;
}

._filterRow_1ij2d_568 {
  display: flex;
  gap: 8px;
  max-width: 580px;
  margin: 12px auto 0;
  justify-content: center;
}

._filterSelector_1ij2d_576 {
  position: relative;
  flex: 1;
  max-width: 140px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
._themeDark_1ij2d_120 ._filterSelector_1ij2d_576, ._themePastelDark_1ij2d_330 ._filterSelector_1ij2d_576 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

._filterSelect_1ij2d_576 {
  width: 100%;
  padding: 10px 28px 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--clrTextPrimary);
  background: transparent;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
._filterSelect_1ij2d_576:focus {
  outline: none;
}
._filterSelect_1ij2d_576 option {
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
}

._filterSelector_1ij2d_576 ._selectIcon_1ij2d_614 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--clrTextSecondary);
  pointer-events: none;
}

._colorDropdownMenu_1ij2d_625 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 140px;
  z-index: 100;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
._themeDark_1ij2d_120 ._colorDropdownMenu_1ij2d_625, ._themePastelDark_1ij2d_330 ._colorDropdownMenu_1ij2d_625 {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

._colorCheckboxLabel_1ij2d_649 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
._colorCheckboxLabel_1ij2d_649:hover {
  background: rgba(0, 0, 0, 0.1);
}
._themeDark_1ij2d_120 ._colorCheckboxLabel_1ij2d_649:hover, ._themePastelDark_1ij2d_330 ._colorCheckboxLabel_1ij2d_649:hover {
  background: rgba(255, 255, 255, 0.1);
}
._colorCheckboxLabel_1ij2d_649:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

._colorCheckbox_1ij2d_649 {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._colorCheckbox_1ij2d_649:disabled {
  cursor: not-allowed;
}

._colorName_1ij2d_679 {
  font-size: 12px;
  font-weight: 500;
  color: var(--clrTextPrimary);
}

._showColorCardsBtn_1ij2d_685 {
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--clrAccent-100);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s ease;
}
._showColorCardsBtn_1ij2d_685:hover {
  opacity: 0.85;
}
._themeDark_1ij2d_120 ._showColorCardsBtn_1ij2d_685, ._themePastelDark_1ij2d_330 ._showColorCardsBtn_1ij2d_685 {
  background: #FFFFFF;
  color: #000000;
}

._clearColorsBtn_1ij2d_706 {
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--clrTextPrimary);
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-align: center;
}
._clearColorsBtn_1ij2d_706:hover {
  background: rgba(0, 0, 0, 0.1);
}
._themeDark_1ij2d_120 ._clearColorsBtn_1ij2d_706, ._themePastelDark_1ij2d_330 ._clearColorsBtn_1ij2d_706 {
  border-top-color: rgba(255, 255, 255, 0.1);
}
._themeDark_1ij2d_120 ._clearColorsBtn_1ij2d_706:hover, ._themePastelDark_1ij2d_330 ._clearColorsBtn_1ij2d_706:hover {
  background: rgba(255, 255, 255, 0.1);
}

._searchInfoRow_1ij2d_728 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

._searchCountIndicator_1ij2d_737 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--clrTextSecondary);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
._themeDark_1ij2d_120 ._searchCountIndicator_1ij2d_737 {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
._searchCountIndicator_1ij2d_737 span {
  transition: color 0.2s ease;
}
._searchCountIndicator_1ij2d_737 ._limitReached_1ij2d_759 {
  color: var(--clrError-100);
  font-weight: 500;
}

._setSelector_1ij2d_764 {
  position: relative;
  flex: 0 0 30%;
  min-width: 90px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
._themeDark_1ij2d_120 ._setSelector_1ij2d_764, ._themePastelDark_1ij2d_330 ._setSelector_1ij2d_764 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

._setSelect_1ij2d_764 {
  width: 100%;
  padding: 14px 32px 14px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--clrTextPrimary);
  background: transparent;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}
._setSelect_1ij2d_764 option {
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
  padding: 8px;
}

._selectIcon_1ij2d_614 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--clrTextSecondary);
  pointer-events: none;
}

._searchInputWrapper_1ij2d_812 {
  position: relative;
  flex: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
._themeDark_1ij2d_120 ._searchInputWrapper_1ij2d_812, ._themePastelDark_1ij2d_330 ._searchInputWrapper_1ij2d_812 {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

._searchIcon_1ij2d_828 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  pointer-events: none;
}

._searchInput_1ij2d_812 {
  width: 100%;
  padding: 14px 70px 14px 48px;
  font-size: 14px;
  color: var(--clrTextPrimary);
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
}
._searchInput_1ij2d_812::placeholder {
  color: var(--clrTextSecondary);
}
._searchInput_1ij2d_812:focus {
  outline: none;
}

._betaBadge_1ij2d_856 {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #018BC3;
  color: white;
  pointer-events: none;
}

._clearButton_1ij2d_872 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--clrTextSecondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
._clearButton_1ij2d_872:hover {
  color: var(--clrTextPrimary);
}
._clearButton_1ij2d_872:active {
  transform: translateY(-50%) scale(0.9);
}

._cardDetailContent_1ij2d_897 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: _slideInLeft_1ij2d_1 0.3s ease;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

@keyframes _slideInLeft_1ij2d_1 {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._cardDetailHeader_1ij2d_918 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

._cardDetailImageWrapper_1ij2d_925 {
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: 63/88;
  border-radius: 8px;
  overflow: hidden;
  background: var(--clrTertiary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
._cardDetailImageWrapper_1ij2d_925:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
._cardDetailImageWrapper_1ij2d_925:active {
  transform: scale(0.98);
}

._cardDetailImageSkeleton_1ij2d_945 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--clrTertiary) 0%, var(--clrSecondary) 50%, var(--clrTertiary) 100%);
  background-size: 200% 100%;
  animation: _shimmer_1ij2d_1 1.5s infinite;
  border-radius: 8px;
}

._cardDetailImage_1ij2d_925 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
._cardDetailImage_1ij2d_925._loading_1ij2d_518 {
  opacity: 0;
}
._cardDetailImage_1ij2d_925._loaded_1ij2d_966 {
  opacity: 1;
}

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

._cardDetailName_1ij2d_975 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

._cardDetailMeta_1ij2d_983 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._cardDetailRow_1ij2d_989 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

._cardDetailLabel_1ij2d_996 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  font-weight: 500;
}

._cardDetailValue_1ij2d_1002 {
  font-size: 12px;
  color: var(--clrTextPrimary);
  font-weight: 600;
  text-align: right;
}

._cardDetailEffect_1ij2d_1009 {
  background: var(--clrSecondary);
  border-radius: 8px;
  padding: 16px;
  width: 100%;
}

._cardDetailEffectTitle_1ij2d_1016 {
  font-size: 12px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}

._cardDetailEffectText_1ij2d_1023 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  line-height: 1.6;
  margin: 0;
}

._alternativeArtsSection_1ij2d_1030 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--clrSecondary);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
}

._alternativeArtsHeader_1ij2d_1040 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

._alternativeArtsTitle_1ij2d_1047 {
  font-size: 12px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
}

._scrollArrows_1ij2d_1054 {
  display: flex;
  gap: 4px;
}

._scrollArrow_1ij2d_1054 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--clrTertiary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._scrollArrow_1ij2d_1054:hover {
  background: var(--clrAccent);
}
._scrollArrow_1ij2d_1054:hover ._arrowIcon_1ij2d_1074 {
  color: white;
}
._scrollArrow_1ij2d_1054:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  ._scrollArrow_1ij2d_1054 {
    display: none;
  }
}

._arrowIcon_1ij2d_1074 {
  width: 16px;
  height: 16px;
  color: var(--clrTextSecondary);
  transition: color 0.2s ease;
}

._alternativeArtsLoading_1ij2d_1093 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

._alternativeArtsScroll_1ij2d_1100 {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px;
  padding-bottom: 12px;
  margin-bottom: 0;
  width: calc(100% + 12px);
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--clrTertiary) transparent;
}
._alternativeArtsScroll_1ij2d_1100::-webkit-scrollbar {
  height: 6px;
}
._alternativeArtsScroll_1ij2d_1100::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._alternativeArtsScroll_1ij2d_1100::-webkit-scrollbar-thumb {
  background: var(--clrAccent-10);
  border-radius: 3px;
}
._alternativeArtsScroll_1ij2d_1100::-webkit-scrollbar-thumb:hover {
  background: var(--clrTextPrimary);
}

._altArtThumbnail_1ij2d_1131 {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  aspect-ratio: 63/88;
  border-radius: 4px;
  overflow: hidden;
  background: var(--clrTertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  scroll-snap-align: start;
}
._altArtThumbnail_1ij2d_1131:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
._altArtThumbnail_1ij2d_1131:active {
  transform: scale(0.98);
}
._altArtThumbnail_1ij2d_1131._active_1ij2d_234 {
  border-color: var(--clrAccent);
  box-shadow: 0 0 0 2px var(--clrAccent);
}

._altArtSkeleton_1ij2d_1156 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--clrTertiary) 0%, var(--clrSecondary) 50%, var(--clrTertiary) 100%);
  background-size: 200% 100%;
  animation: _shimmer_1ij2d_1 1.5s infinite;
  z-index: 1;
}

._altArtImage_1ij2d_1168 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}
._altArtImage_1ij2d_1168._loading_1ij2d_518 {
  opacity: 0;
}
._altArtImage_1ij2d_1168._loaded_1ij2d_966 {
  opacity: 1;
}

._altArtLabel_1ij2d_1182 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  padding: 4px 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._expandedImageView_1ij2d_1197 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 16px;
  animation: _slideInRight_1ij2d_1 0.3s ease;
}

@keyframes _slideInRight_1ij2d_1 {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._showInfoButton_1ij2d_1217 {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--clrAccent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  font-family: inherit;
  transition: opacity 0.2s ease;
}
._showInfoButton_1ij2d_1217:hover {
  opacity: 0.8;
}
._showInfoButton_1ij2d_1217:active {
  opacity: 0.6;
}

._backIcon_1ij2d_1239 {
  width: 20px;
  height: 20px;
}

._expandedImageWrapper_1ij2d_1244 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
}

._expandedImageContainer_1ij2d_1253 {
  position: relative;
  width: 100%;
  aspect-ratio: 63/88;
}

._expandedImageSkeleton_1ij2d_1259 {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 0%, var(--clrSecondary) 50%, var(--clrTertiary) 100%);
  background-size: 200% 100%;
  animation: _shimmer_1ij2d_1 1.5s infinite;
}
@keyframes _shimmer_1ij2d_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

._expandedImage_1ij2d_1197 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
._expandedImage_1ij2d_1197._loading_1ij2d_518 {
  opacity: 0;
}
._expandedImage_1ij2d_1197._loaded_1ij2d_966 {
  opacity: 1;
  animation: _scaleIn_1ij2d_1 0.2s ease;
}
@keyframes _scaleIn_1ij2d_1 {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

._drawerBranding_1ij2d_1302 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 0;
  font-size: 10px;
  color: var(--clrTextTertiary);
  opacity: 0.6;
}

._drawerBrandingFixed_1ij2d_1314 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  color: var(--clrTextTertiary);
  opacity: 0.6;
  background: linear-gradient(to top, var(--clrBgPrimary) 60%, transparent);
  flex-shrink: 0;
}

._brandingIcon_1ij2d_1326 {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

._myDecksView_1ij2d_1332 {
  flex: 1;
  padding: 20px 16px;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-20) transparent;
}
._myDecksView_1ij2d_1332::-webkit-scrollbar {
  width: 6px;
}
._myDecksView_1ij2d_1332::-webkit-scrollbar-track {
  background: transparent;
}
._myDecksView_1ij2d_1332::-webkit-scrollbar-thumb {
  background: var(--clrAccent-20);
  border-radius: 3px;
}
._myDecksView_1ij2d_1332::-webkit-scrollbar-thumb:hover {
  background: var(--clrTextSecondary);
}

._loadingDecks_1ij2d_1358 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--clrTextSecondary);
}
._loadingDecks_1ij2d_1358 ._spinner_1ij2d_525 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--clrTextTertiary);
  border-top-color: var(--clrAccent);
  border-radius: 50%;
  animation: _spin_1ij2d_525 0.8s linear infinite;
}
._loadingDecks_1ij2d_1358 p {
  font-size: var(--f_size-body);
}

._emptyDecks_1ij2d_1379 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  text-align: center;
}
._emptyDecks_1ij2d_1379 h3 {
  font-size: var(--f_size-large);
  color: var(--clrText);
  margin: 0;
}
._emptyDecks_1ij2d_1379 p {
  font-size: var(--f_size-body);
  color: var(--clrTextSecondary);
  margin: 0;
}

._createDeckCta_1ij2d_1399 {
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--clrAccent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--f_size-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._createDeckCta_1ij2d_1399:hover {
  transform: scale(1.02);
  opacity: 0.9;
}
._createDeckCta_1ij2d_1399:active {
  transform: scale(0.98);
}

._decksGrid_1ij2d_1419 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  ._decksGrid_1ij2d_1419 {
    grid-template-columns: 1fr;
  }
}

._deckCard_1ij2d_1430 {
  background: var(--clrBgLight);
  border: 1px solid var(--clrTextTertiary);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._deckCard_1ij2d_1430:hover {
  border-color: var(--clrAccent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
._deckCard_1ij2d_1430:active {
  transform: translateY(0);
}

._deckHeader_1ij2d_1447 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

._deckLeader_1ij2d_1454 {
  flex-shrink: 0;
}

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

._deckInfo_1ij2d_1464 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

._deckName_1ij2d_1472 {
  font-size: var(--f_size-medium);
  font-weight: 700;
  color: var(--clrText);
  margin: 0;
  line-height: 1.2;
}

._deckLeaderName_1ij2d_1480 {
  font-size: var(--f_size-small);
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.3;
}

._deckStats_1ij2d_1487 {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--clrTextTertiary);
  border-bottom: 1px solid var(--clrTextTertiary);
  margin-bottom: 12px;
}

._deckActions_1ij2d_1496 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

._deckActionButton_1ij2d_1502 {
  padding: 8px;
  background: transparent;
  border: 1px solid var(--clrTextTertiary);
  border-radius: 4px;
  color: var(--clrTextSecondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
._deckActionButton_1ij2d_1502:hover {
  background: var(--clrBg);
  border-color: var(--clrAccent);
  color: var(--clrAccent);
}
._deckActionButton_1ij2d_1502:active {
  transform: scale(0.95);
}

._actionIcon_1ij2d_1520 {
  width: 18px;
  height: 18px;
}

._deckDetailWrapper_1ij2d_1525 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: 8px;
  position: relative;
}

._deckDetailActions_1ij2d_1534 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 12px;
}

._deckDetailContent_1ij2d_1542 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

._deckDetailLeader_1ij2d_1550 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(var(--clrTextTertiary-rgb, 128, 128, 128), 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  ._deckDetailLeader_1ij2d_1550 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    align-items: center;
  }
}

._deckDetailLeaderTop_1ij2d_1571 {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
@media (min-width: 768px) {
  ._deckDetailLeaderTop_1ij2d_1571 {
    flex: 0 0 auto;
  }
}

._deckDetailLeaderImage_1ij2d_1583 {
  flex-shrink: 0;
}

._deckDetailLeaderInfo_1ij2d_1587 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

._deckDetailLabel_1ij2d_1594 {
  font-size: 8px;
  color: var(--clrTextPrimary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
@media (min-width: 820px) {
  ._deckDetailLabel_1ij2d_1594 {
    font-size: 14px;
  }
}

._deckDetailLeaderName_1ij2d_1607 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 820px) {
  ._deckDetailLeaderName_1ij2d_1607 {
    font-size: 18px;
  }
}

._deckDetailLeaderId_1ij2d_1620 {
  font-size: 8px;
  color: var(--clrTextPrimary);
}
@media (min-width: 820px) {
  ._deckDetailLeaderId_1ij2d_1620 {
    font-size: 14px;
  }
}

._deckDetailStats_1ij2d_1630 {
  display: flex;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
._deckDetailStats_1ij2d_1630::-webkit-scrollbar {
  display: none;
}
._deckDetailStats_1ij2d_1630 > * {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  ._deckDetailStats_1ij2d_1630 {
    width: auto;
    margin-left: auto;
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

._deckDetailCards_1ij2d_1655 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid rgba(var(--clrTextTertiary-rgb, 128, 128, 128), 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  ._deckDetailCards_1ij2d_1655 {
    gap: 12px;
    padding: 16px 12px;
  }
}

@media (min-width: 768px) {
  ._wideDeckDrawer_1ij2d_1674 {
    max-width: 930px;
  }
}

._deckDetailEmpty_1ij2d_1679 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
}
._deckDetailEmpty_1ij2d_1679 p {
  color: var(--clrTextSecondary);
  margin: 0;
}

._addCardsCta_1ij2d_1692 {
  padding: 10px 20px;
  background: var(--clrAccent-100);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._addCardsCta_1ij2d_1692:hover {
  opacity: 0.9;
}
._addCardsCta_1ij2d_1692:active {
  transform: scale(0.98);
}

._deckDetailCardsGrid_1ij2d_1710 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
@media (min-width: 768px) {
  ._deckDetailCardsGrid_1ij2d_1710 {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
}

._deckCardThumbnail_1ij2d_1723 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

._deckCardImageWrapper_1ij2d_1731 {
  width: 100%;
  aspect-ratio: 63/88;
  border-radius: 4px;
  overflow: hidden;
  background: var(--clrTertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}
._deckCardImageWrapper_1ij2d_1731:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
._deckCardImageWrapper_1ij2d_1731:active {
  transform: scale(0.98);
}

._deckCardImage_1ij2d_1731 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._deckCardBadges_1ij2d_1755 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

._deckCardBadge_1ij2d_1755 {
  padding: 2px 6px;
  background: var(--clrPrimary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--clrSecondary);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._deckExpandedOverlay_1ij2d_1775 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px 20px;
}

._deckExpandedImageContainer_1ij2d_1789 {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._deckExpandedImage_1ij2d_1789 {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}
._deckExpandedImage_1ij2d_1789._loading_1ij2d_518 {
  opacity: 0;
}
._deckExpandedImage_1ij2d_1789._loaded_1ij2d_966 {
  opacity: 1;
}

._deckExpandedClose_1ij2d_1813 {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--clrTextPrimary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px var(--clrPrimary);
}
._deckExpandedClose_1ij2d_1813:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}
._deckExpandedClose_1ij2d_1813:active {
  transform: scale(0.95);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_naqg0_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_naqg0_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._chip_naqg0_201, ._tournamentParticipantsChip_naqg0_201, ._tournamentPositionChip_naqg0_201, ._tournamentSetChip_naqg0_201, ._tournamentTypeChip_naqg0_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
._chip_naqg0_201._small_naqg0_218, ._small_naqg0_218._tournamentParticipantsChip_naqg0_201, ._small_naqg0_218._tournamentPositionChip_naqg0_201, ._small_naqg0_218._tournamentSetChip_naqg0_201, ._small_naqg0_218._tournamentTypeChip_naqg0_201 {
  padding: 1px 4px;
  font-size: 9px;
  gap: 2px;
}

._tournamentTypeChip_naqg0_201 {
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-100);
}

._typeTesting_naqg0_230 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}

._typeRegionals_naqg0_236 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_naqg0_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeRegionals_naqg0_236::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_naqg0_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

._typeLcq_naqg0_264 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}

._typeLocal_naqg0_270 {
  background-color: #14532d;
  border-color: #16a34a;
  color: #86efac;
}

._typeFlagship_naqg0_276 {
  background-color: #713f12;
  border-color: #eab308;
  color: #fef08a;
}

._typeTreasureCup_naqg0_282 {
  background-color: #7c2d12;
  border-color: #f97316;
  color: #fdba74;
}

._typeNational_naqg0_288 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}

._typeWorld_naqg0_294 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_naqg0_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeWorld_naqg0_294::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_naqg0_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

._typeStoreCs_naqg0_322 {
  background-color: var(--clrTertiary);
  border-color: var(--clrAccent-60);
  color: var(--clrAccent-100);
}

._tournamentSetChip_naqg0_201 {
  background-color: transparent;
  border: 1px solid var(--clrAccent-60);
  color: var(--clrAccent-60);
}

._tournamentPositionChip_naqg0_201 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-60);
}
._tournamentPositionChip_naqg0_201 svg {
  font-size: 12px;
}
._tournamentPositionChip_naqg0_201._small_naqg0_218 svg {
  font-size: 10px;
}

._tournamentParticipantsChip_naqg0_201 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-60);
}
._tournamentParticipantsChip_naqg0_201 svg {
  font-size: 12px;
}
._tournamentParticipantsChip_naqg0_201._small_naqg0_218 svg {
  font-size: 10px;
}

._firstPlace_naqg0_356 {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), 0 6px 16px rgba(255, 185, 0, 0.25);
  font-size: 12px;
  background: linear-gradient(45deg, #ffd700, #ffb02e, #ffd700, #fff8b5, #ffb02e, #ffd700);
  background-size: 300% 300%;
  animation: _gold-shimmer_naqg0_1 3s ease-in-out infinite;
  color: #875c18;
  font-weight: 600;
  overflow: hidden;
}
._firstPlace_naqg0_356::before {
  content: "";
  position: absolute;
  inset: -4px;
  /* how far the glow sits outside */
  border-radius: inherit;
  background: conic-gradient(from 0deg, #fff8b5 0%, #ffd700 15%, #ffb02e 30%, #ffd700 45%, #fff8b5 60%, #ffd700 75%, #ffb02e 90%, #fff8b5 100%);
  filter: blur(4px) saturate(1.2);
  animation: _chip-glow-spin_naqg0_1 3.2s linear infinite;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  /* Safari */
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

@keyframes _chip-glow-spin_naqg0_1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _gold-shimmer_naqg0_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ._firstPlace_naqg0_356::before {
    animation: none;
  }
  ._firstPlace_naqg0_356 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeRegionals_naqg0_236::before {
    animation: none;
  }
  ._typeRegionals_naqg0_236 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeWorld_naqg0_294::before {
    animation: none;
  }
  ._typeWorld_naqg0_294 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_266ef_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_266ef_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._tournamentLogContainer_266ef_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: 128px;
  width: 100%;
  border: 1px solid var(--clrPrimary);
  border-radius: 8px;
  background: var(--clrGradient);
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
._tournamentLogContainer_266ef_201:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._tournamentLogContainer_266ef_201:active {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  transform: translateY(0px);
  transform: scale(0.98);
}
._tournamentLogContainer_266ef_201._editable_266ef_228 {
  cursor: default;
}
._tournamentLogContainer_266ef_201._editable_266ef_228:hover {
  transform: none;
}
._tournamentLogContainer_266ef_201._editable_266ef_228:active {
  transform: none;
}
._tournamentLogContainer_266ef_201 ._deleteBtn_266ef_237 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 0;
  height: 50px;
  background: transparent;
  border: none;
  border-radius: 300px;
  color: var(--clrError-100);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}
._tournamentLogContainer_266ef_201 ._deleteBtn_266ef_237:hover {
  background-color: var(--clrError-50);
}
._tournamentLogContainer_266ef_201 ._deleteBtn_266ef_237._visible_266ef_259 {
  min-width: 48px;
  width: 48px;
  border: 1px solid var(--clrError-100);
  margin-left: 8px;
}
._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  height: 100%;
  width: 100%;
  padding: 8px;
  font-family: var(--font-sans);
}
._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 2px 0;
  font-family: "Roboto Flex", sans-serif;
}
._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 ._tournamentLogName_266ef_286 {
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 ._tournamentLogName_266ef_286[data-long=true] {
  font-size: 14px;
}
@media (min-width: 768px) {
  ._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 ._tournamentLogName_266ef_286 {
    font-size: 16px;
  }
}
._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 ._tournamentLogDate_266ef_309 {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--clrAccent-30);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 ._tournamentLogDate_266ef_309 {
    font-size: 12px;
  }
}
._tournamentLogContainer_266ef_201 ._tournamentLogInfo_266ef_265 ._tournamentLogContent_266ef_276 ._tournamentLogDetails_266ef_319 {
  font-size: 8px;
  color: var(--clrAccent-60);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
._tournamentLogContainer_266ef_201 ._tournamentLogResultContainer_266ef_328 {
  min-width: 64px;
  width: 64px;
  height: 100%;
  border-radius: 0 7px 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._tournamentLogContainer_266ef_201 ._tournamentLogResultContainer_266ef_328 ._resultValue_266ef_339 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-80);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_266ef_201 ._tournamentLogResultContainer_266ef_328 ._resultValue_266ef_339 {
    font-size: 16px;
  }
}
._tournamentLogContainer_266ef_201 ._tournamentLogResultContainer_266ef_328 ._resultBlock_266ef_349 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1lkwo_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1lkwo_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._loaderContainer_1lkwo_201 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--clrSecondary);
  z-index: 9999;
}
._loaderContainer_1lkwo_201 ._loader_1lkwo_201 {
  width: 65px;
  height: 30px;
  position: relative;
}
._loaderContainer_1lkwo_201 ._loader_1lkwo_201:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset var(--clrAccent-100);
  animation: _l3_1lkwo_1 0.75s infinite alternate;
}
@keyframes _l3_1lkwo_1 {
  0% {
    inset: 0 35px 0 0;
  }
  50% {
    inset: 0 0 0 0;
  }
  100% {
    inset: 0 0 0 35px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1o61c_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1o61c_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._inlineLoaderContainer_1o61c_201 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 0;
  margin: 8px 0;
}
._inlineLoaderContainer_1o61c_201 ._loader_1o61c_211 {
  width: 40px;
  height: 18px;
  position: relative;
}
._inlineLoaderContainer_1o61c_201 ._loader_1o61c_211:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 2px inset var(--clrAccent-100);
  animation: _pulse_1o61c_1 0.8s infinite alternate;
}
@keyframes _pulse_1o61c_1 {
  0% {
    inset: 0 22px 0 0;
    opacity: 0.4;
  }
  50% {
    inset: 0 0 0 0;
    opacity: 1;
  }
  100% {
    inset: 0 0 0 22px;
    opacity: 0.4;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_hu0yp_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_hu0yp_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._leaderStack_hu0yp_201 {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
}

._leaderCard_hu0yp_208 {
  position: absolute;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: none;
  user-select: none;
}
._leaderCard_hu0yp_208._draggable_hu0yp_214 {
  cursor: grab;
}
._leaderCard_hu0yp_208._draggable_hu0yp_214:active {
  cursor: grabbing;
}
._leaderCard_hu0yp_208._position0_hu0yp_220 {
  top: 0;
  left: 0;
  z-index: 3;
  transform: rotate(-2deg);
}
._leaderCard_hu0yp_208._position1_hu0yp_226 {
  top: 4px;
  left: 4px;
  z-index: 2;
  transform: rotate(1deg);
}
._leaderCard_hu0yp_208._position2_hu0yp_232 {
  top: 8px;
  left: 8px;
  z-index: 1;
  transform: rotate(-1deg);
}
._leaderCard_hu0yp_208._removing_hu0yp_238 {
  transform: translateX(150px) translateY(-30px) rotate(20deg);
  opacity: 0;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_176m7_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_176m7_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._emptyState_176m7_201 {
  width: 100%;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px 20px;
}

._content_176m7_212 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 400px;
  text-align: center;
}

._title_176m7_222 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-80);
  margin: 32px 0 8px 0;
}

._description_176m7_229 {
  font-size: 14px;
  color: var(--clrAccent-50);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

._button_176m7_236 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--clrAccent-20);
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-30);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._button_176m7_236:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
  transform: translateY(-1px);
}
._button_176m7_236:active {
  transform: translateY(0);
}
._button_176m7_236 ._icon_176m7_260 {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1rdu9_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1rdu9_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._historyContainer_1rdu9_201 {
  width: 100%;
  padding: 16px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 h2 {
  color: var(--clrTextPrimary);
  font-size: 20px;
  margin: 0;
  animation: _fadeIn_1rdu9_1 0.3s ease-out;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 {
  width: 100%;
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  padding: 0 12px;
  animation: _expandSearch_1rdu9_1 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: right center;
  box-sizing: border-box;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 ._searchIconInside_1rdu9_245 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  flex-shrink: 0;
  animation: _fadeInIcon_1rdu9_1 0.3s ease-out 0.1s forwards;
  opacity: 0;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 ._searchInput_1rdu9_253 {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--clrTextPrimary);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 0;
  animation: _fadeInInput_1rdu9_1 0.3s ease-out 0.15s forwards;
  opacity: 0;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 ._searchInput_1rdu9_253::placeholder {
  color: var(--clrTextTertiary);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 ._closeSearchBtn_1rdu9_268 {
  padding: 4px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: all 0.2s ease;
  animation: _fadeInIcon_1rdu9_1 0.3s ease-out 0.2s forwards;
  opacity: 0;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 ._closeSearchBtn_1rdu9_268 ._closeIcon_1rdu9_282 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._searchContainer_1rdu9_229 ._closeSearchBtn_1rdu9_268:hover ._closeIcon_1rdu9_282 {
  color: var(--clrTextPrimary);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  animation: _fadeIn_1rdu9_1 0.3s ease-out;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._searchBtn_1rdu9_298 {
  padding: 8px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._searchBtn_1rdu9_298 ._searchIcon_1rdu9_245 {
  width: 18px;
  height: 18px;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._searchBtn_1rdu9_298:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._searchBtn_1rdu9_298:active {
  transform: scale(0.95);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 {
  position: relative;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterBtn_1rdu9_325 {
  padding: 8px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterBtn_1rdu9_325 ._filterIcon_1rdu9_339 {
  width: 18px;
  height: 18px;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterBtn_1rdu9_325 ._chevronIcon_1rdu9_343 {
  width: 14px;
  height: 14px;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterBtn_1rdu9_325:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterDropdown_1rdu9_350 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  padding: 8px;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterDropdown_1rdu9_350 ._filterOption_1rdu9_367 {
  padding: 10px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  white-space: nowrap;
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterDropdown_1rdu9_350 ._filterOption_1rdu9_367:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._filterContainer_1rdu9_322 ._filterDropdown_1rdu9_350 ._filterOption_1rdu9_367._active_1rdu9_383 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-100);
}
._historyContainer_1rdu9_201 ._historyHeader_1rdu9_214 ._headerActions_1rdu9_290 ._editModeBtn_1rdu9_387 {
  padding: 8px 16px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--clrAccent-10);
}
._historyContainer_1rdu9_201 h2 {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--clrAccent-100);
}
._historyContainer_1rdu9_201 p {
  color: var(--clrAccent-100);
  opacity: 0.7;
}
._historyContainer_1rdu9_201 ._loadMoreTrigger_1rdu9_408 {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}
._historyContainer_1rdu9_201 ._loadMoreTrigger_1rdu9_408 ._smallLoader_1rdu9_418 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}
._historyContainer_1rdu9_201 ._loadMoreTrigger_1rdu9_408 ._smallLoader_1rdu9_418 ._spinner_1rdu9_426 {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_1rdu9_426 0.8s linear infinite;
}

@keyframes _spin_1rdu9_426 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _expandSearch_1rdu9_1 {
  from {
    transform: scaleX(0.8);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes _fadeInIcon_1rdu9_1 {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _fadeInInput_1rdu9_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeIn_1rdu9_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_gywqk_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_gywqk_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_gywqk_201 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_gywqk_207 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clrAccent-20);
}

._logoSection_gywqk_218 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_gywqk_218 ._logo_gywqk_218 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_gywqk_218 ._appName_gywqk_230 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_gywqk_236 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
._backButton_gywqk_236:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._pageContainer_gywqk_201 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._content_gywqk_259 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_gywqk_259 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_gywqk_259 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_gywqk_259 strong {
  color: var(--clrAccent-100);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._header_gywqk_207 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_gywqk_218 ._logo_gywqk_218 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_gywqk_218 ._appName_gywqk_230 {
    font-size: 20px;
  }
  ._backButton_gywqk_236 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_gywqk_201 {
    padding: 80px 20px;
  }
  ._pageContainer_gywqk_201 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_gywqk_259 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_gywqk_259 p {
    font-size: 15px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_7zgt3_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_7zgt3_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_7zgt3_201 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_7zgt3_207 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clrAccent-20);
}

._logoSection_7zgt3_218 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_7zgt3_218 ._logo_7zgt3_218 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_7zgt3_218 ._appName_7zgt3_230 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_7zgt3_236 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
._backButton_7zgt3_236:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._pageContainer_7zgt3_201 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._content_7zgt3_259 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_7zgt3_259 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_7zgt3_259 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_7zgt3_259 ul {
  margin: 16px 0 20px 24px;
}
._content_7zgt3_259 ul li {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--clrAccent-80);
}
._content_7zgt3_259 strong {
  color: var(--clrAccent-100);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._header_7zgt3_207 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_7zgt3_218 ._logo_7zgt3_218 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_7zgt3_218 ._appName_7zgt3_230 {
    font-size: 20px;
  }
  ._backButton_7zgt3_236 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_7zgt3_201 {
    padding: 80px 20px;
  }
  ._pageContainer_7zgt3_201 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_7zgt3_259 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_7zgt3_259 p {
    font-size: 15px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1402s_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1402s_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageContainer_1402s_201 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}
._pageContainer_1402s_201 h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin-bottom: 40px;
  text-align: left;
}

._header_1402s_214 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--clrAccent-20);
}

._logoSection_1402s_225 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_1402s_225 ._logo_1402s_225 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_1402s_225 ._appName_1402s_237 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_1402s_243 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
._backButton_1402s_243:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

._content_1402s_258 {
  color: var(--clrAccent-80);
  line-height: 1.8;
}
._content_1402s_258 h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 32px;
  margin-bottom: 16px;
  text-align: left;
}
._content_1402s_258 h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin-top: 20px;
  margin-bottom: 8px;
}
._content_1402s_258 p {
  font-size: 16px;
  margin-bottom: 20px;
}
._content_1402s_258 a {
  color: var(--clrAccent-100);
  font-weight: 600;
  text-decoration: underline;
}

._emailButton_1402s_287 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--clrPrimary);
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-20);
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 16px;
  width: fit-content;
  margin: 8px 0 32px;
  transition: all 0.2s ease;
}
._emailButton_1402s_287:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

._emailIcon_1402s_310 {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  ._header_1402s_214 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_1402s_225 ._logo_1402s_225 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_1402s_225 ._appName_1402s_237 {
    font-size: 20px;
  }
  ._backButton_1402s_243 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_1402s_201 {
    padding: 80px 20px;
  }
  ._pageContainer_1402s_201 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_1402s_258 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_1402s_258 h3 {
    font-size: 20px;
  }
  ._content_1402s_258 p {
    font-size: 15px;
  }
  ._emailButton_1402s_287 {
    width: 100%;
    justify-content: center;
  }
}
html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_30r9b_61 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_30r9b_121 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._adminDashboard_30r9b_202 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 16px;
  min-height: 100vh;
}

._header_30r9b_210 {
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
._header_30r9b_210 h1 {
  color: var(--clrAccent-100);
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

._headerActions_30r9b_226 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

._refreshStatsBtn_30r9b_235 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  color: #22c55e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._refreshStatsBtn_30r9b_235:hover:not(:disabled) {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}
._refreshStatsBtn_30r9b_235:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._spinning_30r9b_260 {
  animation: _spin_30r9b_260 1s linear infinite;
}

@keyframes _spin_30r9b_260 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._migrationBtn_30r9b_272 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._migrationBtn_30r9b_272:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}
._migrationBtn_30r9b_272:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._loadingContainer_30r9b_297 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

._loadingText_30r9b_307 {
  color: var(--clrAccent-70);
  font-size: 16px;
}

._statsGrid_30r9b_312 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

._statCard_30r9b_319 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  border: 1px solid var(--clrAccent-30);
  transition: all 0.2s ease;
  cursor: pointer;
}
._statCard_30r9b_319:hover {
  border-color: var(--clrAccent-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._statIcon_30r9b_338 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--clrTertiary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--clrAccent-100);
  font-size: 24px;
  flex-shrink: 0;
}

._statContent_30r9b_353 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

._statValue_30r9b_361 {
  font-size: 32px;
  font-weight: 700;
  color: var(--clrAccent-100);
  line-height: 1;
}

._statLabel_30r9b_368 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
}

._analyticsSection_30r9b_374 {
  margin-bottom: 40px;
}

._analyticsToggle_30r9b_378 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

._toggleBtn_30r9b_387 {
  padding: 8px 16px;
  border: 1px solid var(--clrAccent-30);
  background-color: var(--clrSecondary);
  color: var(--clrAccent-70);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._toggleBtn_30r9b_387:hover {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-100);
}
._toggleBtn_30r9b_387._active_30r9b_402 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._collapsibleSection_30r9b_408 {
  margin-bottom: 24px;
}

._collapsibleContent_30r9b_412 {
  margin-top: 4px;
}

._sectionToggle_30r9b_416 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._sectionToggle_30r9b_416:hover {
  border-color: var(--clrAccent-50);
}
._sectionToggle_30r9b_416 svg {
  transition: transform 0.2s ease;
}
._sectionToggle_30r9b_416._open_30r9b_439 svg {
  transform: rotate(180deg);
}

._sectionToggleRight_30r9b_443 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

._lastUpdated_30r9b_451 {
  font-size: 12px;
  color: var(--clrAccent-50);
  font-weight: 400;
}

._adminToolsGrid_30r9b_457 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
}

._mainContent_30r9b_467 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

._signupsSection_30r9b_474 {
  width: 100%;
}

._signupsHeader_30r9b_478 {
  margin-bottom: 20px;
}
._signupsHeader_30r9b_478 h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}

._filterHint_30r9b_488 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-style: italic;
}

._signupsGrid_30r9b_494 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  min-height: 48px;
}

._signupCard_30r9b_502 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 8px;
  border: 1px solid var(--clrAccent-30);
  transition: all 0.2s ease;
  cursor: pointer;
  max-height: 48px;
}
._signupCard_30r9b_502:hover {
  border-color: var(--clrAccent-50);
  transform: translateY(-2px);
}
._signupCard_30r9b_502._active_30r9b_402 {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
}
._signupCard_30r9b_502._active_30r9b_402 ._signupValue_30r9b_524 {
  color: var(--clrAccent-100);
}

._signupValue_30r9b_524 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  line-height: 1;
}

._signupLabel_30r9b_535 {
  font-size: 12px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-align: center;
}

._signupDate_30r9b_542 {
  font-size: 12px;
  color: var(--clrAccent-60);
  font-style: italic;
}

._usersSection_30r9b_548 {
  width: 100%;
}

._usersHeader_30r9b_552 {
  margin-bottom: 20px;
}
._usersHeader_30r9b_552 h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}

._searchContainer_30r9b_562 {
  position: relative;
  margin-bottom: 16px;
}

._searchIcon_30r9b_567 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clrAccent-60);
  font-size: 18px;
  pointer-events: none;
  z-index: 1;
}

._searchInput_30r9b_578 {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 16px;
  transition: all 0.2s ease;
}
._searchInput_30r9b_578::placeholder {
  color: var(--clrAccent-50);
}
._searchInput_30r9b_578:focus {
  outline: none;
  border-color: var(--clrAccent-60);
}

._usersList_30r9b_596 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  max-height: 280px;
  /* Approx 4 rows: (60px row + 8px gap) × 4 */
  overflow-y: auto;
  padding-right: 4px;
  border: 1px solid var(--clrAccent-30);
  background-color: var(--clrPrimary);
  padding: 8px;
  border-radius: 8px;
  /* Custom scrollbar */
}
._usersList_30r9b_596::-webkit-scrollbar {
  width: 6px;
}
._usersList_30r9b_596::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._usersList_30r9b_596::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 3px;
}
._usersList_30r9b_596::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-60);
}

._userRow_30r9b_626 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._userRow_30r9b_626:hover {
  border-color: var(--clrAccent-100);
  transform: translateX(4px);
}

._userMainInfo_30r9b_644 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

._userMetadata_30r9b_654 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

._username_30r9b_663 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._rank_30r9b_672 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-70);
  margin-right: 8px;
  min-width: 30px;
  flex-shrink: 0;
}

._tournamentCount_30r9b_681 {
  font-size: 13px;
  font-weight: 600;
  color: var(--clrAccent-100);
  background: rgba(var(--clrAccent-100-rgb, 255, 255, 255), 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

._topPlayerRow_30r9b_691 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._topPlayerRow_30r9b_691:hover {
  border-color: var(--clrAccent-100);
  transform: translateX(4px);
}

._topPlayerLeft_30r9b_709 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

._topPlayerRank_30r9b_719 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-70);
  min-width: 28px;
  flex-shrink: 0;
}

._topPlayerInfo_30r9b_727 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

._topPlayerName_30r9b_736 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._topPlayerEmail_30r9b_750 {
  font-size: 12px;
  color: var(--clrAccent-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

._topPlayerChips_30r9b_759 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

._chipRounds_30r9b_768,
._chipTours_30r9b_769,
._chipLatest_30r9b_770 {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

._chipRounds_30r9b_768 {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
}

._chipTours_30r9b_769 {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

._chipLatest_30r9b_770 {
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
}

._premiumBadge_30r9b_793 {
  color: #fbbf24;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}

._pirateBadge_30r9b_804 {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  cursor: help;
  margin-left: 4px;
}

._userEmail_30r9b_816 {
  font-size: 13px;
  color: var(--clrAccent-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._signupDate_30r9b_542 {
  font-size: 12px;
  color: var(--clrAccent-60);
  white-space: nowrap;
}

._noResults_30r9b_830 {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px;
  color: var(--clrAccent-60);
  font-size: 16px;
  font-style: italic;
}

@media (max-width: 768px) {
  ._adminDashboard_30r9b_202 {
    padding: 80px 16px;
  }
  ._header_30r9b_210 h1 {
    font-size: 24px;
  }
  ._statsGrid_30r9b_312 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
  ._statCard_30r9b_319 {
    padding: 20px;
  }
  ._statIcon_30r9b_338 {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  ._statValue_30r9b_361 {
    font-size: 28px;
  }
  ._mainContent_30r9b_467 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  ._signupsSection_30r9b_474 h2 {
    font-size: 18px;
  }
  ._usersHeader_30r9b_552 h2 {
    font-size: 18px;
  }
  ._signupsGrid_30r9b_494 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  ._signupCard_30r9b_502 {
    padding: 14px;
  }
  ._signupValue_30r9b_524 {
    font-size: 24px;
  }
  ._signupLabel_30r9b_535 {
    font-size: 12px;
  }
  ._userRow_30r9b_626 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  ._userMetadata_30r9b_654 {
    width: 100%;
    justify-content: flex-start;
  }
  ._topPlayerRow_30r9b_691 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  ._topPlayerChips_30r9b_759 {
    width: 100%;
    justify-content: flex-start;
  }
  ._topPlayerEmail_30r9b_750 {
    max-width: 160px;
  }
  ._adminToolsGrid_30r9b_457 {
    flex-direction: column;
    align-items: stretch;
  }
}
._addLeaderSection_30r9b_911 {
  margin-bottom: 40px;
}

._leaderForm_30r9b_915 {
  margin-top: 12px;
  padding: 24px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
}

._formGrid_30r9b_923 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

._formGroup_30r9b_930 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}
._formGroup_30r9b_930._fullWidth_30r9b_937 {
  grid-column: 1/-1;
}
._formGroup_30r9b_930 label {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-80);
}
._formGroup_30r9b_930 input[type=text] {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
  transition: border-color 0.2s ease;
}
._formGroup_30r9b_930 input[type=text]:focus {
  outline: none;
  border-color: var(--clrAccent-50);
}
._formGroup_30r9b_930 input[type=text]::placeholder {
  color: var(--clrAccent-40);
}
._formGroup_30r9b_930 input[type=file] {
  width: 100%;
  padding: 8px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
  cursor: pointer;
}
._formGroup_30r9b_930 input[type=file]::file-selector-button {
  padding: 4px 12px;
  background-color: var(--clrAccent-30);
  border: none;
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
}

._submitBtn_30r9b_983 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: #22c55e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._submitBtn_30r9b_983:hover:not(:disabled) {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}
._submitBtn_30r9b_983:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._formMessage_30r9b_1008 {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
}
._formMessage_30r9b_1008._success_30r9b_1014 {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
._formMessage_30r9b_1008._error_30r9b_1019 {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

@media (max-width: 768px) {
  ._formGrid_30r9b_923 {
    grid-template-columns: 1fr;
  }
}
._modalOverlay_30r9b_1030 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  z-index: 1000;
  padding: 20px;
  padding-top: 15vh;
  overflow-y: auto;
}

._modal_30r9b_1030 {
  background-color: var(--clrPrimary);
  border-radius: 8px;
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  border: 1px solid var(--clrAccent-30);
  overflow: hidden;
}

._modalHeader_30r9b_1063 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--clrAccent-30);
}
._modalHeader_30r9b_1063 h2 {
  color: var(--clrAccent-100);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

._closeButton_30r9b_1079 {
  background: none;
  border: none;
  color: var(--clrAccent-70);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: color 0.2s ease;
}
._closeButton_30r9b_1079:hover {
  color: var(--clrAccent-100);
}

._modalSearchContainer_30r9b_1100 {
  position: relative;
  padding: 20px 24px;
  border-bottom: 1px solid var(--clrAccent-30);
}

._searchIcon_30r9b_567 {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clrAccent-60);
  font-size: 18px;
}

._modalSearchInput_30r9b_1115 {
  width: 100%;
  padding: 12px 16px 12px 40px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  transition: all 0.2s ease;
}
._modalSearchInput_30r9b_1115:focus {
  outline: none;
  border-color: var(--clrAccent-50);
  background-color: var(--clrTertiary);
}
._modalSearchInput_30r9b_1115::placeholder {
  color: var(--clrAccent-50);
}

._modalUsersList_30r9b_1134 {
  overflow-y: auto;
  flex: 1;
  padding: 16px 24px;
}

._modalUserRow_30r9b_1140 {
  padding: 16px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._modalUserRow_30r9b_1140:hover {
  border-color: var(--clrAccent-50);
  transform: translateX(4px);
  background-color: var(--clrTertiary);
}
._modalUserRow_30r9b_1140 ._userMainInfo_30r9b_644 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
._modalUserRow_30r9b_1140 ._username_30r9b_663 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._modalUserRow_30r9b_1140 ._userEmail_30r9b_816 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modalUserRow_30r9b_1140 ._premiumBadge_30r9b_793 {
  color: #fbbf24;
  font-size: 14px;
}

._noResults_30r9b_830 {
  text-align: center;
  padding: 48px 24px;
  color: var(--clrAccent-60);
  font-size: 16px;
}

._dataListRow_30r9b_1183 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}
._dataListRow_30r9b_1183:hover {
  border-color: var(--clrAccent-50);
}

._dataListContent_30r9b_1199 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

._dataListActions_30r9b_1209 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

._editBtn_30r9b_1218,
._deleteBtn_30r9b_1219 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  flex-shrink: 0;
}

._editBtn_30r9b_1218 {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
._editBtn_30r9b_1218:hover {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

._deleteBtn_30r9b_1219 {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
._deleteBtn_30r9b_1219:hover {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

._inlineEditRow_30r9b_1253 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-50);
  border-radius: 4px;
  padding: 6px 10px;
}
._inlineEditRow_30r9b_1253 input {
  flex: 1;
  padding: 6px 10px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
}
._inlineEditRow_30r9b_1253 input:focus {
  outline: none;
  border-color: var(--clrAccent-50);
}

._inlineEditActions_30r9b_1278 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

._saveBtn_30r9b_1287 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
._saveBtn_30r9b_1287:hover {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}

._cancelBtn_30r9b_1308 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
._cancelBtn_30r9b_1308:hover {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

._leaderThumb_30r9b_1329 {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--clrTertiary);
}

._leaderNameLabel_30r9b_1338 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._setBadge_30r9b_1347 {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  white-space: nowrap;
  flex-shrink: 0;
}

._colorDots_30r9b_1358 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

._colorDot_30r9b_1358 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--clrAccent-30);
  flex-shrink: 0;
}

._currentFileLabel_30r9b_1375 {
  font-size: 12px;
  color: var(--clrAccent-50);
  font-style: italic;
  margin-top: 2px;
}

._dataList_30r9b_1183 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 16px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
}
._dataList_30r9b_1183::-webkit-scrollbar {
  width: 6px;
}
._dataList_30r9b_1183::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._dataList_30r9b_1183::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 3px;
}
._dataList_30r9b_1183::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-60);
}

._dataListSearch_30r9b_1409 {
  position: relative;
  margin-bottom: 8px;
}
._dataListSearch_30r9b_1409 input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
  transition: border-color 0.2s ease;
}
._dataListSearch_30r9b_1409 input:focus {
  outline: none;
  border-color: var(--clrAccent-50);
}
._dataListSearch_30r9b_1409 input::placeholder {
  color: var(--clrAccent-40);
}

._dataListSearchIcon_30r9b_1431 {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clrAccent-40);
  font-size: 14px;
  pointer-events: none;
}

._dataListCount_30r9b_1441 {
  font-size: 14px;
  color: var(--clrAccent-50);
  font-weight: 400;
}

._modalBody_30r9b_1447 {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

._saveBtnLarge_30r9b_1453 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: #22c55e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._saveBtnLarge_30r9b_1453:hover:not(:disabled) {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}
._saveBtnLarge_30r9b_1453:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelBtnLarge_30r9b_1479 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._cancelBtnLarge_30r9b_1479:hover {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

._modalActions_30r9b_1501 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  ._dataListRow_30r9b_1183 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  ._dataListActions_30r9b_1209 {
    width: 100%;
    justify-content: flex-end;
  }
  ._modalActions_30r9b_1501 {
    flex-direction: column;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1uxrm_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1uxrm_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._analyticsContainer_1uxrm_201 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

._title_1uxrm_209 {
  color: var(--clrAccent-100);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-align: center;
}

._chartContainer_1uxrm_217 {
  width: 100%;
  height: 300px;
}
._chartContainer_1uxrm_217 ._recharts-cartesian-grid-horizontal_1uxrm_221 line,
._chartContainer_1uxrm_217 ._recharts-cartesian-grid-vertical_1uxrm_222 line {
  stroke: var(--clrAccent-30);
}
._chartContainer_1uxrm_217 ._recharts-text_1uxrm_225,
._chartContainer_1uxrm_217 ._recharts-label_1uxrm_226,
._chartContainer_1uxrm_217 ._recharts-cartesian-axis-tick_1uxrm_227,
._chartContainer_1uxrm_217 ._recharts-cartesian-axis-tick-value_1uxrm_228 {
  fill: var(--clrAccent-100) !important;
  color: var(--clrAccent-100) !important;
}
._chartContainer_1uxrm_217 ._recharts-xAxis_1uxrm_232 ._recharts-text_1uxrm_225,
._chartContainer_1uxrm_217 ._recharts-yAxis_1uxrm_233 ._recharts-text_1uxrm_225 {
  fill: var(--clrAccent-100) !important;
}
._chartContainer_1uxrm_217 ._recharts-legend-item_1uxrm_236 ._recharts-legend-item-text_1uxrm_236 {
  color: var(--clrAccent-100) !important;
}

._tooltip_1uxrm_240 {
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-50);
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._tooltipLabel_1uxrm_248 {
  color: var(--clrAccent-100);
  font-weight: 600;
  margin: 0 0 8px 0;
  font-size: 14px;
}

._tooltipSignups_1uxrm_255,
._tooltipPremium_1uxrm_256 {
  color: var(--clrAccent-80);
  margin: 4px 0;
  font-size: 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

._signupsColor_1uxrm_267 {
  color: #3b82f6;
  font-size: 16px;
  line-height: 1;
}

._premiumColor_1uxrm_273 {
  color: #fbbf24;
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 768px) {
  ._analyticsContainer_1uxrm_201 {
    padding: 16px;
  }
  ._title_1uxrm_209 {
    font-size: 18px;
  }
  ._chartContainer_1uxrm_217 {
    height: 250px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_8g158_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_8g158_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_8g158_201 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

._header_8g158_209 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

._title_8g158_218 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

._stats_8g158_228 {
  display: flex;
  gap: 24px;
}

._stat_8g158_228 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._statValue_8g158_239 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._statLabel_8g158_245 {
  font-size: 12px;
  color: var(--clrAccent-70);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._loading_8g158_252 {
  text-align: center;
  color: var(--clrAccent-70);
  padding: 40px 0;
}

._sortButtons_8g158_258 {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._sortButton_8g158_258 {
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
._sortButton_8g158_258:hover {
  background: var(--clrAccent-10);
  border-color: var(--clrAccent-50);
}
._sortButton_8g158_258._active_8g158_283 {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._tableContainer_8g158_289 {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
}

._table_8g158_289 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._table_8g158_289 thead {
  background: var(--clrBG-secondary);
}
._table_8g158_289 thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--clrAccent-100);
  border-bottom: 1px solid var(--clrAccent-30);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
._table_8g158_289 tbody tr {
  border-bottom: 1px solid var(--clrAccent-10);
  transition: background 0.2s ease;
}
._table_8g158_289 tbody tr:hover {
  background: var(--clrBG-secondary);
}
._table_8g158_289 tbody tr._topThree_8g158_321 {
  font-weight: 600;
}
._table_8g158_289 tbody td {
  padding: 12px 16px;
  color: var(--clrAccent-100);
  white-space: nowrap;
}

._rank_8g158_330 {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

._goldBadge_8g158_337,
._silverBadge_8g158_338,
._bronzeBadge_8g158_339 {
  font-size: 16px;
}

._deckName_8g158_343 {
  font-weight: 500;
  max-width: 300px;
}

._deckNameCell_8g158_348 {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}
._deckNameCell_8g158_348 span {
  overflow: hidden;
  text-overflow: ellipsis;
}

._positive_8g158_360 {
  color: var(--clrSuccess-100) !important;
  font-weight: 600;
}

._negative_8g158_365 {
  color: var(--clrError-100) !important;
  font-weight: 600;
}

._highlight_8g158_370 {
  background: rgba(var(--clrSuccess-100), 0.1);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._container_8g158_201 {
    padding: 16px;
  }
  ._header_8g158_209 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._stats_8g158_228 {
    width: 100%;
    justify-content: space-around;
  }
  ._sortButtons_8g158_258 {
    width: 100%;
  }
  ._sortButtons_8g158_258 ._sortButton_8g158_258 {
    flex: 1;
    min-width: 150px;
    justify-content: center;
  }
  ._table_8g158_289 {
    font-size: 12px;
  }
  ._table_8g158_289 thead th,
  ._table_8g158_289 tbody td {
    padding: 8px 12px;
  }
  ._deckName_8g158_343 {
    max-width: 150px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1x83w_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1x83w_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_1x83w_201 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

._header_1x83w_209 {
  margin-bottom: 24px;
}

._titleRow_1x83w_213 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 16px;
}

._title_1x83w_213 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

._setSelect_1x83w_232 {
  padding: 8px 16px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}
._setSelect_1x83w_232:hover {
  border-color: var(--clrAccent-60);
}
._setSelect_1x83w_232:focus {
  outline: none;
  border-color: var(--clrAccent-100);
}
._setSelect_1x83w_232 option {
  background: var(--clrSecondary);
  color: var(--clrAccent-100);
}

._editButton_1x83w_256 {
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
._editButton_1x83w_256:hover {
  background: var(--clrAccent-10);
  border-color: var(--clrAccent-50);
}

._editForm_1x83w_275 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

._seasonInput_1x83w_282,
._dateInput_1x83w_283 {
  padding: 8px 12px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
}
._seasonInput_1x83w_282:focus,
._dateInput_1x83w_283:focus {
  outline: none;
  border-color: var(--clrAccent-50);
}

._saveButton_1x83w_297 {
  padding: 8px 16px;
  background: var(--clrSuccess-100);
  border: 1px solid var(--clrSuccess-100);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
._saveButton_1x83w_297:hover {
  opacity: 90%;
}

._cancelButton_1x83w_315 {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
._cancelButton_1x83w_315:hover {
  background: var(--clrBG-secondary);
}

._seasonInfo_1x83w_333 {
  font-size: 14px;
  color: var(--clrAccent-70);
  margin-bottom: 16px;
}

._stats_1x83w_339 {
  display: flex;
  gap: 24px;
}

._stat_1x83w_339 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._statValue_1x83w_350 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._statLabel_1x83w_356 {
  font-size: 12px;
  color: var(--clrAccent-70);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._loading_1x83w_363 {
  text-align: center;
  color: var(--clrAccent-70);
  padding: 40px 0;
}

._sortButtons_1x83w_369 {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._sortButton_1x83w_369 {
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
._sortButton_1x83w_369:hover {
  background: var(--clrAccent-10);
  border-color: var(--clrAccent-50);
}
._sortButton_1x83w_369._active_1x83w_391 {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._tableContainer_1x83w_397 {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
}

._table_1x83w_397 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._table_1x83w_397 thead {
  background: var(--clrBG-secondary);
}
._table_1x83w_397 thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--clrAccent-100);
  border-bottom: 1px solid var(--clrAccent-30);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
._table_1x83w_397 tbody tr {
  border-bottom: 1px solid var(--clrAccent-10);
  transition: background 0.2s ease;
}
._table_1x83w_397 tbody tr:hover {
  background: var(--clrBG-secondary);
}
._table_1x83w_397 tbody tr._topThree_1x83w_429 {
  font-weight: 600;
}
._table_1x83w_397 tbody td {
  padding: 12px 16px;
  color: var(--clrAccent-100);
  white-space: nowrap;
}

._rank_1x83w_438 {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

._goldBadge_1x83w_445,
._silverBadge_1x83w_446,
._bronzeBadge_1x83w_447 {
  font-size: 16px;
}

._deckName_1x83w_451 {
  font-weight: 500;
  max-width: 300px;
}

._deckNameCell_1x83w_456 {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}
._deckNameCell_1x83w_456 span {
  overflow: hidden;
  text-overflow: ellipsis;
}

._positive_1x83w_468 {
  color: var(--clrSuccess-100) !important;
  font-weight: 600;
}

._negative_1x83w_473 {
  color: var(--clrError-100) !important;
  font-weight: 600;
}

._highlight_1x83w_478 {
  background: rgba(var(--clrSuccess-100), 0.1);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._container_1x83w_201 {
    padding: 16px;
  }
  ._titleRow_1x83w_213 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._editForm_1x83w_275 {
    width: 100%;
  }
  ._editForm_1x83w_275 ._seasonInput_1x83w_282,
  ._editForm_1x83w_275 ._dateInput_1x83w_283 {
    flex: 1;
  }
  ._stats_1x83w_339 {
    width: 100%;
    justify-content: space-around;
  }
  ._sortButtons_1x83w_369 {
    width: 100%;
  }
  ._sortButtons_1x83w_369 ._sortButton_1x83w_369 {
    flex: 1;
    min-width: 150px;
    justify-content: center;
  }
  ._table_1x83w_397 {
    font-size: 12px;
  }
  ._table_1x83w_397 thead th,
  ._table_1x83w_397 tbody td {
    padding: 8px 12px;
  }
  ._deckName_1x83w_451 {
    max-width: 150px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1q1f0_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1q1f0_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._adminUserDetail_1q1f0_201 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 16px;
  min-height: 100vh;
}

._loadingContainer_1q1f0_209 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

._loadingText_1q1f0_219 {
  color: var(--clrAccent-70);
  font-size: 16px;
}

._backButton_1q1f0_224 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 24px;
}
._backButton_1q1f0_224:hover {
  background-color: var(--clrSecondary);
  border-color: var(--clrAccent-100);
}

._userHeader_1q1f0_246 {
  margin-bottom: 32px;
}

._userTitleSection_1q1f0_250 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
._userTitleSection_1q1f0_250 h1 {
  color: var(--clrAccent-100);
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

._premiumBadge_1q1f0_265 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  color: #fbbf24;
  font-size: 14px;
  font-weight: 600;
}

._userEmail_1q1f0_280 {
  font-size: 16px;
  color: var(--clrAccent-60);
}

._actionsSection_1q1f0_285 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

._actionBtn_1q1f0_295 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  min-width: 180px;
}
._actionBtn_1q1f0_295:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._premiumBtn_1q1f0_315 {
  background-color: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
._premiumBtn_1q1f0_315:hover:not(:disabled) {
  background-color: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
}

._deleteBtn_1q1f0_325 {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
._deleteBtn_1q1f0_325:hover:not(:disabled) {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

._migrateBtn_1q1f0_335 {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}
._migrateBtn_1q1f0_335:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

._migrationResult_1q1f0_345 {
  margin-top: -24px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 500;
}

._buttonSpinner_1q1f0_357 {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: _rotation_1q1f0_1 1s linear infinite;
}

@keyframes _rotation_1q1f0_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._profileDataSection_1q1f0_376 {
  margin-bottom: 40px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
}

._sectionHeader_1q1f0_384 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}
._sectionHeader_1q1f0_384 h2 {
  color: var(--clrAccent-100);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

._editBtn_1q1f0_400 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._editBtn_1q1f0_400:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
}

._editActions_1q1f0_421 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._saveBtn_1q1f0_429 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  color: #22c55e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._saveBtn_1q1f0_429:hover:not(:disabled) {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}
._saveBtn_1q1f0_429:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelBtn_1q1f0_454 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  color: var(--clrAccent-70);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._cancelBtn_1q1f0_454:hover:not(:disabled) {
  background-color: var(--clrSecondary);
  border-color: var(--clrAccent-50);
}
._cancelBtn_1q1f0_454:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._profileFields_1q1f0_479 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

._profileField_1q1f0_479 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}

._fieldLabel_1q1f0_493 {
  font-size: 12px;
  font-weight: 600;
  color: var(--clrAccent-60);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._fieldValue_1q1f0_501 {
  font-size: 14px;
  color: var(--clrAccent-90);
  word-break: break-word;
  font-family: "SF Mono", Consolas, Monaco, monospace;
  background-color: var(--clrTertiary);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-20);
  width: 100%;
  box-sizing: border-box;
}

._fieldInput_1q1f0_514 {
  font-size: 14px;
  color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrAccent-50);
  border-radius: 4px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  font-family: "SF Mono", Consolas, Monaco, monospace;
  transition: all 0.2s ease;
}
._fieldInput_1q1f0_514:focus {
  outline: none;
  border-color: var(--clrAccent-100);
  background-color: var(--clrSecondary);
}

._statsSection_1q1f0_532 {
  margin-bottom: 40px;
}
._statsSection_1q1f0_532 h2 {
  color: var(--clrAccent-100);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

._statsGrid_1q1f0_542 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

._statCard_1q1f0_548 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: all 0.2s ease;
}
._statCard_1q1f0_548:hover {
  border-color: var(--clrAccent-50);
}

._statValue_1q1f0_565 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  line-height: 1;
}

._statLabel_1q1f0_572 {
  font-size: 13px;
  color: var(--clrAccent-60);
  font-weight: 500;
}

._tournamentsSection_1q1f0_578 h2 {
  color: var(--clrAccent-100);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

._noTournaments_1q1f0_585 {
  text-align: center;
  padding: 48px;
  color: var(--clrAccent-60);
  font-size: 16px;
  font-style: italic;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
}

._tournamentsList_1q1f0_596 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

._tournamentCard_1q1f0_602 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}
._tournamentCard_1q1f0_602:hover {
  border-color: var(--clrAccent-50);
  transform: translateY(-2px);
}

._tournamentHeader_1q1f0_614 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
._tournamentHeader_1q1f0_614 h3 {
  color: var(--clrAccent-100);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

._finishedBadge_1q1f0_630 {
  padding: 4px 8px;
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

._tournamentDetails_1q1f0_641 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

._detail_1q1f0_649 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
}

._detailLabel_1q1f0_658 {
  color: var(--clrAccent-60);
  font-weight: 500;
  min-width: 70px;
}

._detailValue_1q1f0_664 {
  color: var(--clrAccent-100);
  font-weight: 600;
}

._modalOverlay_1q1f0_669 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modal_1q1f0_669 {
  width: min(500px, 100%);
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
._modal_1q1f0_669 h3 {
  margin: 0;
  color: var(--clrAccent-100);
  font-size: 20px;
}
._modal_1q1f0_669 p {
  margin: 0;
  color: var(--clrAccent-70);
  font-size: 15px;
  line-height: 1.5;
}
._modal_1q1f0_669 p strong {
  color: var(--clrAccent-100);
}

._modalActions_1q1f0_705 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

._cancelBtn_1q1f0_454,
._confirmDeleteBtn_1q1f0_713 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}
._cancelBtn_1q1f0_454:disabled,
._confirmDeleteBtn_1q1f0_713:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelBtn_1q1f0_454 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._cancelBtn_1q1f0_454:hover:not(:disabled) {
  background-color: var(--clrAccent-30);
}

._confirmDeleteBtn_1q1f0_713 {
  background-color: #ef4444;
  color: white;
}
._confirmDeleteBtn_1q1f0_713:hover:not(:disabled) {
  background-color: #dc2626;
}

@media (max-width: 768px) {
  ._adminUserDetail_1q1f0_201 {
    padding: 80px 16px;
  }
  ._userTitleSection_1q1f0_250 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._userTitleSection_1q1f0_250 h1 {
    font-size: 24px;
  }
  ._actionsSection_1q1f0_285 {
    flex-direction: column;
    align-items: stretch;
  }
  ._actionsSection_1q1f0_285 ._actionBtn_1q1f0_295 {
    width: 100%;
  }
  ._statsGrid_1q1f0_542 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  ._statCard_1q1f0_548 {
    padding: 16px;
  }
  ._statValue_1q1f0_565 {
    font-size: 24px;
  }
  ._tournamentsList_1q1f0_596 {
    grid-template-columns: 1fr;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_xtl8d_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_xtl8d_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._container_xtl8d_201 {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 14px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  ._container_xtl8d_201 {
    padding: 14px;
    padding-top: 32px;
  }
}
._container_xtl8d_201 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-top) + 16px);
}

._stickyHeader_xtl8d_218 {
  position: sticky;
  top: 84px;
  z-index: 100;
  background: var(--clrBG-primary);
  margin-top: -14px;
}
@media (max-width: 768px) {
  ._stickyHeader_xtl8d_218 {
    top: 84px;
  }
}

._backButton_xtl8d_231 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  color: var(--clrAccent-100);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}
._backButton_xtl8d_231:hover {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrPrimary);
  transform: translateX(-4px);
}

._header_xtl8d_253 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  background: var(--clrPrimary);
  border-radius: 12px;
  border: 1px solid var(--clrAccent-30);
  margin-bottom: 16px;
  padding: 16px;
}
@media (max-width: 768px) {
  ._header_xtl8d_253 {
    flex-direction: row;
    gap: 16px;
    padding: 12px;
  }
}

._deckImage_xtl8d_273 {
  width: 120px;
  height: 168px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._deckImage_xtl8d_273 {
    width: 100px;
    height: 140px;
  }
}

._deckInfo_xtl8d_287 {
  flex: 1;
}
._deckInfo_xtl8d_287 h1 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--clrAccent-100);
}
@media (max-width: 768px) {
  ._deckInfo_xtl8d_287 h1 {
    font-size: 14px;
  }
}
._deckInfo_xtl8d_287 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  margin: 0;
}

._statsGrid_xtl8d_306 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 16px;
}
@media (max-width: 768px) {
  ._statsGrid_xtl8d_306 {
    gap: 8px;
  }
}

._statCard_xtl8d_319 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  transition: all 0.2s ease;
}
._statCard_xtl8d_319:hover {
  border-color: var(--clrAccent-30);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--clrAccent-30), 0.1);
}
._statCard_xtl8d_319 ._label_xtl8d_332 {
  font-size: 12px;
  color: var(--clrAccent-100);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._statCard_xtl8d_319 ._value_xtl8d_338 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 8px 0;
}
@media (max-width: 768px) {
  ._statCard_xtl8d_319 ._value_xtl8d_338 {
    font-size: 14px;
  }
}
._statCard_xtl8d_319 ._subValue_xtl8d_349 {
  font-size: 8px;
  color: var(--clrAccent-100);
}
._statCard_xtl8d_319._positive_xtl8d_353 {
  background: rgba(var(--clrSuccess-100), 0.1);
  border-color: rgba(var(--clrSuccess-100), 0.3);
}
._statCard_xtl8d_319._positive_xtl8d_353 ._value_xtl8d_338 {
  color: var(--clrSuccess-100);
}
._statCard_xtl8d_319._negative_xtl8d_360 {
  background: rgba(var(--clrError-100), 0.1);
  border-color: rgba(var(--clrError-100), 0.3);
}
._statCard_xtl8d_319._negative_xtl8d_360 ._value_xtl8d_338 {
  color: var(--clrError-100);
}

._matchupsSection_xtl8d_368 h2 {
  font-size: 14px;
  margin: 0 0 14px 0;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

._matchupsList_xtl8d_377 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._matchupCard_xtl8d_383 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  gap: 16px;
  transition: all 0.2s ease;
  padding: 10px 12px;
}
._matchupCard_xtl8d_383:hover {
  border-color: var(--clrAccent-30);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  ._matchupCard_xtl8d_383 {
    gap: 12px;
  }
}

._matchupDeck_xtl8d_406 {
  font-size: 14px;
  font-weight: 500;
  color: var(--clrAccent-100);
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  ._matchupDeck_xtl8d_406 {
    font-size: 13px;
  }
}

._matchupWinRate_xtl8d_419 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
@media (max-width: 768px) {
  ._matchupWinRate_xtl8d_419 {
    padding: 6px 12px;
  }
}

._matchupSubStats_xtl8d_436 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--clrBG-secondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  font-size: 12px;
  color: var(--clrAccent-70);
  white-space: nowrap;
}
._matchupSubStats_xtl8d_436 > div:first-child {
  padding-bottom: 4px;
}
._matchupSubStats_xtl8d_436 > div:last-child {
  padding-top: 4px;
  border-top: 1px solid var(--clrAccent-30);
}
@media (max-width: 768px) {
  ._matchupSubStats_xtl8d_436 {
    font-size: 11px;
    padding: 6px 12px;
  }
}

._winRate_xtl8d_464 {
  font-size: 14px;
  font-weight: 700;
}
._winRate_xtl8d_464._positive_xtl8d_353 {
  color: var(--clrSuccess-100);
}
._winRate_xtl8d_464._negative_xtl8d_360 {
  color: var(--clrError-100);
}
._winRate_xtl8d_464._neutral_xtl8d_474 {
  color: var(--clrAccent-100);
}

._record_xtl8d_478 {
  font-size: 11px;
  color: var(--clrAccent-70);
}

._noData_xtl8d_483 {
  text-align: center;
  padding: 24px 14px;
  color: var(--clrAccent-100);
  font-size: 14px;
}

._loader_xtl8d_490 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1h7j4_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1h7j4_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._installPrompt_1h7j4_201 {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-width: 90vw;
  width: 450px;
  animation: _slideUp_1h7j4_1 0.3s ease-out;
}
@media (max-width: 600px) {
  ._installPrompt_1h7j4_201 {
    width: calc(100vw - 32px);
    bottom: 80px;
  }
}
._installPrompt_1h7j4_201 ._closeBtn_1h7j4_222 {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--clrAccent-60);
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: color 0.2s ease;
}
._installPrompt_1h7j4_201 ._closeBtn_1h7j4_222:hover {
  color: var(--clrAccent-100);
}
._installPrompt_1h7j4_201 ._closeBtn_1h7j4_222 svg {
  width: 20px;
  height: 20px;
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-right: 24px;
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._icon_1h7j4_253 {
  width: 40px;
  height: 40px;
  color: var(--clrAccent-100);
  flex-shrink: 0;
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._text_1h7j4_259 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._text_1h7j4_259 ._title_1h7j4_267 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._text_1h7j4_259 ._description_1h7j4_272 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._installBtn_1h7j4_277 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._installBtn_1h7j4_277:hover {
  background-color: var(--clrAccent-80);
  transform: translateY(-1px);
}
._installPrompt_1h7j4_201 ._content_1h7j4_245 ._installBtn_1h7j4_277:active {
  transform: translateY(0);
}

@keyframes _slideUp_1h7j4_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_t89ad_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_t89ad_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._pageTransition_t89ad_201 {
  width: 100%;
  min-height: 100%;
}

._fadeOut_t89ad_206 {
  animation: _swipeOut_t89ad_1 0.2s ease-in-out forwards;
}

._fadeIn_t89ad_210 {
  animation: _swipeIn_t89ad_1 0.3s ease-in-out forwards;
}

@keyframes _swipeOut_t89ad_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
@keyframes _swipeIn_t89ad_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

.themeLight {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

.themeDark {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --app-height: 100vh;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

.app {
  min-height: var(--app-height);
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

input, select, textarea {
  font-size: 16px !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

button, .clickable {
  -webkit-user-select: none;
  user-select: none;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--clrPrimary);
  overscroll-behavior: none;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: var(--clrPrimary);
  overscroll-behavior: none;
}

#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrPrimary);
}

.app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrPrimary);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  overflow-x: clip;
  background-color: var(--clrPrimary);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#root {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--clrPrimary);
}

.app {
  background-color: var(--clrPrimary);
  color: var(--clrAccent-100);
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_cm5uq_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_cm5uq_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._navigationBar_cm5uq_201 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0px 16px;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
@media (max-width: 820px) {
  ._navigationBar_cm5uq_201 {
    padding: 0;
  }
}
._navigationBar_cm5uq_201::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 60px;
  pointer-events: auto;
  background-color: var(--clrPrimary);
  border-right: 2px solid var(--clrTertiary);
  border-left: 2px solid var(--clrTertiary);
  border-bottom: 2px solid var(--clrTertiary);
  border-radius: 0 0 8px 8px;
}
._themeLight_cm5uq_60 ._navigationBar_cm5uq_201::before, ._themePastelLight_cm5uq_233 ._navigationBar_cm5uq_201::before {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._themeDark_cm5uq_120 ._navigationBar_cm5uq_201::before {
  background: rgba(18, 18, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.2);
}
@media (max-width: 820px) {
  ._navigationBar_cm5uq_201::before {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-left: none;
    box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2);
  }
}
._navigationBar_cm5uq_201 > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  height: 60px;
  padding: 0 12px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  color: var(--clrAccent-100);
}
._navigationBar_cm5uq_201 ._logoContainer_cm5uq_269 {
  height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  color: var(--clrAccent-100);
  font-family: var(--font-accent);
  font-size: 18px;
}
._navigationBar_cm5uq_201 ._logoContainer_cm5uq_269 img {
  height: 70%;
}
._navigationBar_cm5uq_201 ._userSection_cm5uq_284 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--clrAccent-100);
}
._navigationBar_cm5uq_201 button._logoutBtn_cm5uq_294 {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._navigationBar_cm5uq_201 button._logoutBtn_cm5uq_294:hover {
  opacity: 0.7;
}

._guestBadge_cm5uq_309 {
  background: var(--clrAccent-30);
  color: var(--clrPrimary);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_arnca_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_arnca_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._tournamentPage_arnca_201 {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 16px;
  color: var(--clrAccent-100);
  min-height: calc(100dvh - 60px - 80px);
}
._tournamentPage_arnca_201 h2 {
  margin-bottom: 4px;
}
._tournamentPage_arnca_201 ._statusMessage_arnca_212 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin-top: 16px;
}
._tournamentPage_arnca_201 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}

._header_arnca_222 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
._header_arnca_222 ._headerImage_arnca_230 {
  width: 128px;
  height: 128px;
  border-radius: 8px;
}
._header_arnca_222 ._headerImage_arnca_230 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
._header_arnca_222 ._headerInfo_arnca_241 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: space-between;
  gap: 8px;
}
._header_arnca_222 ._headerInfo_arnca_241 ._headerTitle_arnca_249 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}
._header_arnca_222 ._headerInfo_arnca_241 ._headerTitle_arnca_249 h2 {
  font-size: 24px;
  line-height: 18px;
  margin: 0;
  padding: 0;
}
._header_arnca_222 ._headerInfo_arnca_241 ._chips_arnca_262 {
  font-size: 14px;
  color: var(--clrAccent-60);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._header_arnca_222 ._headerInfo_arnca_241 ._secondaryInfo_arnca_274 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._header_arnca_222 ._headerActions_arnca_278 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._roundForm_arnca_284 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 16px;
}
._roundForm_arnca_284 ._formGroup_arnca_295 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_arnca_284 ._formGroup_arnca_295 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._searchInput_arnca_307 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._searchInput_arnca_307::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 {
  width: 100%;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-30) var(--clrTertiary);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319::-webkit-scrollbar {
  height: 6px;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319::-webkit-scrollbar-thumb {
  background: var(--clrAccent-100);
  border-radius: 3px;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  cursor: pointer;
  border: 2px solid var(--clrPrimary);
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 128px;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339._selected_arnca_356 {
  border-color: #5cb85c;
  box-shadow: 0 0 10px rgba(92, 184, 92, 0.5);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 ._leaderImage_arnca_360 {
  width: 100%;
  height: 92px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 ._leaderImage_arnca_360 img {
  width: 100%;
  object-fit: cover;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 ._leaderImage_arnca_360 ._imagePlaceholder_arnca_370 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 ._leaderInfo_arnca_380 {
  width: 100%;
  background-color: var(--clrSecondary);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 0 0 4px 4px;
  border: 4px solid var(--clrSecondary);
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 ._leaderInfo_arnca_380 ._leaderName_arnca_392 {
  font-size: 12px;
  color: var(--clrAccent-100);
  text-align: center;
  line-height: 1;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._leaderCarousel_arnca_319 ._leaderCard_arnca_339 ._leaderInfo_arnca_380 ._leaderSet_arnca_403 {
  font-size: 10px;
  color: var(--clrAccent-100);
  opacity: 0.7;
  text-align: center;
  line-height: 1;
}
._roundForm_arnca_284 ._formGroup_arnca_295 ._noResults_arnca_410 {
  width: 100%;
  text-align: center;
  color: var(--clrAccent-100);
  opacity: 0.7;
  font-size: 14px;
  padding: 20px;
  font-style: italic;
}

._modalOverlay_arnca_420 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modal_arnca_420 {
  width: min(420px, 100%);
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border: 2px solid var(--clrAccent-30);
}
._modal_arnca_420 h3 {
  margin: 0;
}
._modal_arnca_420 ._modalDescription_arnca_445 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_arnca_420 ._modalField_arnca_450 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_arnca_420 ._modalInput_arnca_457 {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  padding: 0 12px;
}
._modal_arnca_420 ._modalActions_arnca_466 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._modal_arnca_420 ._modalCancelBtn_arnca_472,
._modal_arnca_420 ._modalSaveBtn_arnca_473 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modal_arnca_420 ._modalCancelBtn_arnca_472:disabled,
._modal_arnca_420 ._modalSaveBtn_arnca_473:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._modal_arnca_420 ._modalCancelBtn_arnca_472 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._modal_arnca_420 ._modalSaveBtn_arnca_473 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._modal_arnca_420 ._modalDeleteBtn_arnca_494 {
  background-color: #dc3545;
  color: white;
}
._modal_arnca_420 ._modalDeleteBtn_arnca_494:hover:not(:disabled) {
  background-color: #c82333;
}
._modal_arnca_420 ._modalError_arnca_501 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}

._toggleRow_arnca_507 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_arnca_507 {
    flex-direction: row;
    justify-content: space-between;
  }
}

._toggleGroup_arnca_522 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._toggleGroup_arnca_522 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._toggleGroup_arnca_522 ._toggleOptions_arnca_534 {
  display: flex;
  gap: 8px;
}
._toggleGroup_arnca_522 ._toggleBtn_arnca_538 {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._toggleGroup_arnca_522 ._toggleBtn_arnca_538._active_arnca_549 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._saveRoundBtn_arnca_555 {
  padding: 14px 24px;
  background-color: #5cb85c;
  color: var(--clrAccent-100);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
._saveRoundBtn_arnca_555:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._formMessage_arnca_569 {
  font-size: 14px;
}

._roundsSection_arnca_573 ._roundsHeader_arnca_573 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 h3 {
  margin: 0;
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._roundsHeaderActions_arnca_584 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._exportBtn_arnca_591 {
  height: 24px;
  width: 24px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-30);
  background: none;
  color: var(--clrAccent-100);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._exportBtn_arnca_591:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._exportBtn_arnca_591:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._editModeBtn_arnca_617 {
  height: 24px;
  padding: 4px 16px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-30);
  background: none;
  color: var(--clrAccent-100);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._editModeBtn_arnca_617:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_arnca_573 ._roundsHeader_arnca_573 ._editModeBtn_arnca_617:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_arnca_573 ._roundList_arnca_644 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}

._exportContainer_arnca_652 {
  position: absolute;
  left: -9999px;
  width: 1080px;
  height: 1080px;
  padding: 40px;
  background-color: #1a1a2e;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 24px;
}
._exportContainer_arnca_652 ._exportHeader_arnca_665 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--clrAccent-30);
}
._exportContainer_arnca_652 ._exportHeader_arnca_665 h2 {
  margin: 0;
  font-size: 32px;
  color: var(--clrAccent-100);
}
._exportContainer_arnca_652 ._exportHeader_arnca_665 ._exportStats_arnca_679 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportContainer_arnca_652 ._exportRoundList_arnca_684 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
._exportContainer_arnca_652 ._roundCard_arnca_693 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 12px 16px;
}
._exportContainer_arnca_652 ._roundCard_arnca_693 ._roundMeta_arnca_698 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._actionsSection_arnca_706 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
}
._actionsSection_arnca_706 ._addRoundButton_arnca_714 {
  width: 100%;
  display: block;
}
._actionsSection_arnca_706 ._addRoundButton_arnca_714 .inner-content {
  width: 100%;
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 ._finishBtn_arnca_729 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 ._finishBtn_arnca_729:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  background-color: var(--clrAccent-100);
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 ._finishBtn_arnca_729:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 ._deleteBtn_arnca_749 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid #dc3545;
  background-color: transparent;
  color: #dc3545;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 ._deleteBtn_arnca_749:hover:not(:disabled) {
  background-color: #dc3545;
  color: white;
}
._actionsSection_arnca_706 ._actionButtons_arnca_721 ._deleteBtn_arnca_749:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_arnca_706 ._addRoundBtn_arnca_767 {
  width: 100%;
  padding: 24px;
  border: none;
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._actionsSection_arnca_706 ._addRoundBtn_arnca_767:hover {
  opacity: 0.9;
}
._actionsSection_arnca_706 ._addRoundBtn_arnca_767:active {
  transform: scale(0.95);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_zb09p_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_zb09p_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrapper_zb09p_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_zb09p_210 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  position: relative;
  transition: border-color 0.2s ease;
}
._container_zb09p_210._editable_zb09p_225 {
  cursor: pointer;
}
._container_zb09p_210._editable_zb09p_225:hover {
  border-color: var(--clrAccent-40);
}

._deleteBtn_zb09p_232 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 0;
  height: 50px;
  background: transparent;
  border-radius: 300px;
  border: none;
  color: var(--clrError-100);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}
._deleteBtn_zb09p_232:hover {
  background-color: var(--clrError-50);
}
._deleteBtn_zb09p_232._visible_zb09p_254 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrError-100);
}

._editBtn_zb09p_261 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 0;
  height: 50px;
  background: transparent;
  border-radius: 300px;
  border: none;
  color: var(--clrAccent-80);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}
._editBtn_zb09p_261:hover {
  background-color: var(--clrTertiary);
}
._editBtn_zb09p_261._visible_zb09p_254 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrAccent-30);
}

._roundNumber_zb09p_290 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 24px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-30);
  flex-shrink: 0;
}

._leaderImage_zb09p_304 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}

._roundInfoSection_zb09p_314 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 8px 8px 8px;
  overflow: hidden;
}

._leaderName_zb09p_326 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

._noteContainer_zb09p_336 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  outline: none;
}

._noteIcon_zb09p_348 {
  width: 14px;
  height: 14px;
  color: var(--clrAccent-40);
  transition: color 0.2s ease;
  flex-shrink: 0;
  margin-top: 1px;
}

._noteText_zb09p_357 {
  font-size: 10px;
  font-family: var(--font-sans);
  color: var(--clrAccent-50);
  line-height: 12px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-word;
}
._noteText_zb09p_357._expanded_zb09p_373 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

._resultSection_zb09p_379 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: 72px;
  align-self: stretch;
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
  min-width: 120px;
  flex-shrink: 0;
}
._resultSection_zb09p_379._win_zb09p_392 {
  background: var(--clrRoundWin);
}
._resultSection_zb09p_379._lose_zb09p_395 {
  background: var(--clrRoundLoss);
}

._separator_zb09p_399 {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  margin-right: 6px;
}

._chips_zb09p_406 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 90px;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_15pic_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_15pic_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._chip_15pic_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-align: center;
  color: var(--clrPrimaryReverse);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
._chip_15pic_201._empty_15pic_218 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
._chip_15pic_201._win_15pic_222 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccess-100);
  background-color: var(--clrSuccess-50);
}
._chip_15pic_201._lose_15pic_227 {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
  background-color: var(--clrError-50);
}
._chip_15pic_201._diceWin_15pic_232 {
  opacity: 1;
}
._chip_15pic_201._diceLose_15pic_235 {
  opacity: 0.35;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1w5li_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1w5li_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalField_1w5li_201 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modalField_1w5li_201 input {
  max-width: 100px;
}

._modalError_1w5li_215 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_rpj6u_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_rpj6u_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._modalOverlay_rpj6u_201 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

._modal_rpj6u_201 {
  width: min(420px, 100%);
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
._modal_rpj6u_201 h3 {
  margin: 0;
}

._modalDescription_rpj6u_226 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._modalActions_rpj6u_232 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

._modalCancelBtn_rpj6u_239,
._modalDeleteBtn_rpj6u_240 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modalCancelBtn_rpj6u_239:disabled,
._modalDeleteBtn_rpj6u_240:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._modalCancelBtn_rpj6u_239 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}

._modalDeleteBtn_rpj6u_240 {
  background-color: #dc3545;
  color: white;
}
._modalDeleteBtn_rpj6u_240:hover:not(:disabled) {
  background-color: #c82333;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_11hle_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_11hle_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._editTournamentModal_11hle_201 {
  width: min(420px, 100%);
}

._formContent_11hle_205 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

._formInputs_11hle_214 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._formRow_11hle_223 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
._formRow_11hle_223 > * {
  flex: 1;
  min-width: 0;
}

._typeCarousel_11hle_236 {
  width: 100%;
}

._carouselWrapper_11hle_240 {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 768px) {
  ._editTournamentModal_11hle_201 {
    width: 100%;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1mgt7_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1mgt7_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._formContent_1mgt7_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

._formInputs_1mgt7_210 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._carouselWrapper_1mgt7_219 {
  width: 100%;
  overflow-x: hidden;
}

._roundTypeButton_1mgt7_224 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
._roundTypeButton_1mgt7_224:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundTypeButton_1mgt7_224:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._topCutGames_1mgt7_246 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

._gameResultGroup_1mgt7_255 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._gameButtons_1mgt7_264 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

._gameBtn_1mgt7_273 {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._gameBtn_1mgt7_273:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._gameBtn_1mgt7_273:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._gameBtn_1mgt7_273._winSelected_1mgt7_291 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}
._gameBtn_1mgt7_273._loseSelected_1mgt7_296 {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}

._overallResult_1mgt7_302 {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-80);
  font-size: 14px;
  text-align: center;
}
._overallResult_1mgt7_302 strong {
  color: var(--clrAccent-100);
}

._noteInput_1mgt7_314 {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
}
._noteInput_1mgt7_314::placeholder {
  color: var(--clrAccent-30);
}
._noteInput_1mgt7_314:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._toggleRow_1mgt7_334 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_1mgt7_334 {
    flex-direction: row;
    justify-content: space-between;
  }
}

._toggleGroup_1mgt7_347 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
  width: 100%;
}

._singleToggleBtn_1mgt7_358 {
  padding: 16px 32px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._singleToggleBtn_1mgt7_358 ._value_1mgt7_374 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._singleToggleBtn_1mgt7_358:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._singleToggleBtn_1mgt7_358:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
._singleToggleBtn_1mgt7_358._winResult_1mgt7_388 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._singleToggleBtn_1mgt7_358._winResult_1mgt7_388 ._value_1mgt7_374 {
  background-color: rgba(34, 197, 94, 0.25);
}
._singleToggleBtn_1mgt7_358._winResult_1mgt7_388:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._singleToggleBtn_1mgt7_358._loseResult_1mgt7_400 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._singleToggleBtn_1mgt7_358._loseResult_1mgt7_400 ._value_1mgt7_374 {
  background-color: rgba(239, 68, 68, 0.25);
}
._singleToggleBtn_1mgt7_358._loseResult_1mgt7_400:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1fqhx_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1fqhx_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._header_1fqhx_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  position: relative;
  padding: 6px;
  border: 1px solid rgba(198, 198, 198, 0.3);
  border-radius: 12px;
  margin-bottom: 8px;
  height: 122px;
  min-width: 0;
  overflow: hidden;
}
._header_1fqhx_201 > div:first-child {
  flex-shrink: 0;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  height: 95%;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._headerTitle_1fqhx_230 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._headerTitle_1fqhx_230 h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  margin: 0;
  padding: 0;
  color: var(--clrTextPrimary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._headerTitle_1fqhx_230 ._date_1fqhx_250 {
  font-size: 10px;
  font-weight: 300;
  color: var(--clrAccent-60);
  line-height: normal;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._chipsWrapper_1fqhx_256 {
  position: relative;
  width: 100%;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._chips_1fqhx_256 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._chips_1fqhx_256::-webkit-scrollbar {
  display: none;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._chips_1fqhx_256 {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._shadowLeft_1fqhx_280 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, var(--clrPrimary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._shadowLeft_1fqhx_280._visible_1fqhx_292 {
  opacity: 1;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._shadowRight_1fqhx_295 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to left, var(--clrPrimary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._shadowRight_1fqhx_295._visible_1fqhx_292 {
  opacity: 1;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._deckInfo_1fqhx_310 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._deckInfo_1fqhx_310 ._deckName_1fqhx_317 {
  font-size: 12px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: normal;
}
._themeDark_1fqhx_120 ._header_1fqhx_201 ._headerInfo_1fqhx_219 ._deckInfo_1fqhx_310 ._deckName_1fqhx_317 {
  color: rgba(198, 198, 198, 0.6);
}
._header_1fqhx_201 ._headerInfo_1fqhx_219 ._deckInfo_1fqhx_310 ._score_1fqhx_326 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  line-height: normal;
}
._header_1fqhx_201 ._editBtn_1fqhx_332 {
  position: absolute;
  top: 8px;
  right: 8px;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1nr0o_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1nr0o_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _fadeIn_1nr0o_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeOut_1nr0o_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
._roundForm_1nr0o_217 {
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  animation: _fadeIn_1nr0o_1 0.3s ease-in-out;
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._searchInput_1nr0o_242 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._searchInput_1nr0o_242::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._noteLabel_1nr0o_254 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._noteIcon_1nr0o_259 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._noteInput_1nr0o_264 {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 60px;
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._noteInput_1nr0o_264::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_1nr0o_217 ._formGroup_1nr0o_228 ._noteInput_1nr0o_264:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_1nr0o_217 ._leaderCarouselFormGroup_1nr0o_283 {
  overflow: hidden;
  min-width: 0;
}
._roundForm_1nr0o_217 ._toggleRow_1nr0o_287 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._roundForm_1nr0o_217 ._toggleRow_1nr0o_287 {
    flex-direction: row;
    justify-content: space-between;
  }
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._toggleOptions_1nr0o_313 {
  display: flex;
  gap: 8px;
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._toggleBtn_1nr0o_317 {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 16px;
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._toggleBtn_1nr0o_317._active_1nr0o_329 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334 {
  padding: 16px 32px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334 ._value_1nr0o_350 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334:hover {
  border-color: var(--clrAccent-100);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334._winResult_1nr0o_360 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334._winResult_1nr0o_360 ._value_1nr0o_350 {
  background-color: rgba(34, 197, 94, 0.25);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334._winResult_1nr0o_360:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334._loseResult_1nr0o_372 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334._loseResult_1nr0o_372 ._value_1nr0o_350 {
  background-color: rgba(239, 68, 68, 0.25);
}
._roundForm_1nr0o_217 ._toggleGroup_1nr0o_301 ._singleToggleBtn_1nr0o_334._loseResult_1nr0o_372:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 label {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 600;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 ._gameButtons_1nr0o_404 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 ._gameButtons_1nr0o_404 ._gameBtn_1nr0o_409 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid var(--clrAccent-30);
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 ._gameButtons_1nr0o_404 ._gameBtn_1nr0o_409:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 ._gameButtons_1nr0o_404 ._gameBtn_1nr0o_409:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 ._gameButtons_1nr0o_404 ._gameBtn_1nr0o_409._winSelected_1nr0o_426 {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}
._roundForm_1nr0o_217 ._topCutGames_1nr0o_384 ._gameResultGroup_1nr0o_392 ._gameButtons_1nr0o_404 ._gameBtn_1nr0o_409._loseSelected_1nr0o_431 {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 ._cancelBtn_1nr0o_445 {
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 ._cancelBtn_1nr0o_445:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 ._cancelBtn_1nr0o_445:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 ._saveRoundBtn_1nr0o_462 {
  padding: 12px 24px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 ._saveRoundBtn_1nr0o_462:hover:not(:disabled) {
  background-color: #4cae4c;
}
._roundForm_1nr0o_217 ._formActions_1nr0o_436 ._saveRoundBtn_1nr0o_462:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_1nr0o_217 ._formMessage_1nr0o_480 {
  font-size: 14px;
  margin: 0;
  text-align: center;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_4s18b_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_4s18b_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _slideInFromRight_4s18b_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _slideInFromLeft_4s18b_1 {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._stepContainer_4s18b_221 {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

._selectionStep_4s18b_231 {
  animation: _slideInFromLeft_4s18b_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

._formStep_4s18b_235 {
  animation: _slideInFromRight_4s18b_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1bd0a_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1bd0a_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrapper_1bd0a_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_1bd0a_210 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  position: relative;
}

._roundNumber_1bd0a_225 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 28px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-30);
  flex-shrink: 0;
}

._leaderImage_1bd0a_239 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px 0;
  flex-shrink: 0;
}
._leaderImage_1bd0a_239 > div {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

._roundInfoSection_1bd0a_254 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 6px;
  overflow: hidden;
}

._leaderName_1bd0a_266 {
  display: block;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  line-height: 1.3;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._resultSection_1bd0a_279 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: 44px;
  align-self: stretch;
  border-radius: 0 8px 8px 0;
  padding-right: 8px;
  min-width: 104px;
  flex-shrink: 0;
}
._resultSection_1bd0a_279._win_1bd0a_292 {
  background: var(--clrRoundWin);
}
._resultSection_1bd0a_279._lose_1bd0a_295 {
  background: var(--clrRoundLoss);
}

._separator_1bd0a_299 {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  margin-right: 6px;
}

._chips_1bd0a_306 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 72px;
}

._chipCompact_1bd0a_315 {
  width: 16px;
  height: 16px;
  font-size: 7px;
}

._chipMedium_1bd0a_321 {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

._chipLarge_1bd0a_327 {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

._sizeMedium_1bd0a_333 ._container_1bd0a_210 {
  min-height: 56px;
}
._sizeMedium_1bd0a_333 ._resultSection_1bd0a_279 {
  min-height: 56px;
}
._sizeMedium_1bd0a_333 ._roundNumber_1bd0a_225 {
  min-width: 32px;
  font-size: 11px;
}
._sizeMedium_1bd0a_333 ._leaderName_1bd0a_266 {
  font-size: 12px;
}
._sizeMedium_1bd0a_333 ._leaderImage_1bd0a_239 > div {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
._sizeMedium_1bd0a_333 ._separator_1bd0a_299 {
  height: 30px;
}
._sizeMedium_1bd0a_333 ._chips_1bd0a_306 {
  gap: 5px;
}

._sizeLarge_1bd0a_358 ._container_1bd0a_210 {
  min-height: 68px;
}
._sizeLarge_1bd0a_358 ._resultSection_1bd0a_279 {
  min-height: 68px;
  min-width: 120px;
  padding-right: 10px;
}
._sizeLarge_1bd0a_358 ._roundNumber_1bd0a_225 {
  min-width: 32px;
  font-size: 13px;
}
._sizeLarge_1bd0a_358 ._roundInfoSection_1bd0a_254 {
  padding: 4px 8px;
}
._sizeLarge_1bd0a_358 ._leaderName_1bd0a_266 {
  font-size: 14px;
}
._sizeLarge_1bd0a_358 ._leaderImage_1bd0a_239 > div {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
._sizeLarge_1bd0a_358 ._separator_1bd0a_299 {
  height: 44px;
}
._sizeLarge_1bd0a_358 ._chips_1bd0a_306 {
  gap: 6px;
  min-width: 80px;
}

._sizeCompact_1bd0a_389 ._container_1bd0a_210 {
  min-height: 34px;
}
._sizeCompact_1bd0a_389 ._resultSection_1bd0a_279 {
  min-height: 34px;
  min-width: 88px;
  padding-right: 6px;
}
._sizeCompact_1bd0a_389 ._roundNumber_1bd0a_225 {
  min-width: 24px;
  font-size: 9px;
}
._sizeCompact_1bd0a_389 ._roundInfoSection_1bd0a_254 {
  padding: 1px 6px;
}
._sizeCompact_1bd0a_389 ._leaderName_1bd0a_266 {
  font-size: 10px;
}
._sizeCompact_1bd0a_389 ._leaderImage_1bd0a_239 > div {
  width: 18px;
  height: 18px;
  min-width: 18px;
}
._sizeCompact_1bd0a_389 ._separator_1bd0a_299 {
  height: 18px;
}
._sizeCompact_1bd0a_389 ._chips_1bd0a_306 {
  gap: 2px;
  min-width: 60px;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_13o7k_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_13o7k_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes _modalBounceIn_13o7k_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_13o7k_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._exportModal_13o7k_222 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 9999;
  cursor: pointer;
  animation: _fadeIn_13o7k_1 0.3s ease;
  overflow: hidden;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 {
  width: min(90vw, 600px);
  aspect-ratio: 7/8;
  max-height: 85vh;
  background-color: var(--clrPrimary);
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 2px;
  cursor: default;
  overflow: hidden;
  animation: _modalBounceIn_13o7k_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportModal_13o7k_222 ._exportContent_13o7k_241 {
    width: 90vw;
    max-height: 80vh;
  }
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  flex-shrink: 0;
  width: 100%;
  padding: 4px 8px;
}
@media (min-width: 800px) {
  ._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
  }
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 ._chips_13o7k_291 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 ._appPromo_13o7k_299 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-height: 100%;
  font-size: 8px;
  color: var(--clrAccent-60);
  padding: 2px 2px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 ._appPromo_13o7k_299 img {
  height: 24px;
  width: 24px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 ._appPromo_13o7k_299 ._madeWithHighlight_13o7k_314 {
  color: var(--clrAccent-100);
}
@media (min-width: 800px) {
  ._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 ._appPromo_13o7k_299 {
    font-size: 12px;
  }
  ._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._rightSection_13o7k_284 ._appPromo_13o7k_299 img {
    height: 32px;
    width: 32px;
  }
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._tournamentInfo_13o7k_326 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._tournamentInfo_13o7k_326 > div:first-child {
  max-height: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  min-width: 42px !important;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._tournamentInfo_13o7k_326 ._tournamentInfoDetails_13o7k_339 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._tournamentInfo_13o7k_326 ._tournamentInfoDetails_13o7k_339 ._tournamentName_13o7k_346 {
  font-size: 10px;
  color: var(--clrAccent-60);
  max-width: 200px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264 ._tournamentInfo_13o7k_326 ._tournamentInfoDetails_13o7k_339 ._exportStats_13o7k_355 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  white-space: nowrap;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264._mediumSize_13o7k_361 ._tournamentInfo_13o7k_326 > div:first-child {
  max-height: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  min-width: 56px !important;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264._mediumSize_13o7k_361 ._tournamentInfo_13o7k_326 ._tournamentInfoDetails_13o7k_339 ._tournamentName_13o7k_346 {
  font-size: 12px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264._mediumSize_13o7k_361 ._tournamentInfo_13o7k_326 ._tournamentInfoDetails_13o7k_339 ._exportStats_13o7k_355 {
  font-size: 20px;
}
@media (min-width: 800px) {
  ._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportHeader_13o7k_264._mediumSize_13o7k_361 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportRoundList_13o7k_382 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportRoundList_13o7k_382::-webkit-scrollbar {
  width: 8px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportRoundList_13o7k_382::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 4px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportRoundList_13o7k_382::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 4px;
}
._exportModal_13o7k_222 ._exportContent_13o7k_241 ._exportRoundList_13o7k_382::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
._exportModal_13o7k_222 ._appLogoRow_13o7k_407 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--clrAccent-30);
  height: 24px;
  width: 100vmin;
  max-width: 800px;
  border-radius: 0 0 8px 8px;
  animation: _modalBounceIn_13o7k_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_13o7k_222 ._appLogoRow_13o7k_407 img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
._exportModal_13o7k_222 ._appLogoRow_13o7k_407 ._appName_13o7k_425 {
  font-size: 12px;
  color: var(--clrAccent-60);
}
._exportModal_13o7k_222 ._appLogoRow_13o7k_407 ._madeWithHighlight_13o7k_314 {
  color: var(--clrAccent-100);
}
._exportModal_13o7k_222 ._actionButtons_13o7k_432 {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: _modalBounceIn_13o7k_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_13o7k_222 ._downloadBtn_13o7k_441 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: transparent;
  color: var(--clrPrimary);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--clrAccent-100);
}
._exportModal_13o7k_222 ._downloadBtn_13o7k_441 svg {
  width: 18px;
  height: 18px;
}
._exportModal_13o7k_222 ._downloadBtn_13o7k_441:hover:not(:disabled) {
  color: var(--clrPrimary);
  transform: translateY(-2px);
}
._exportModal_13o7k_222 ._downloadBtn_13o7k_441:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._exportModal_13o7k_222 ._downloadBtn_13o7k_441 ._spinner_13o7k_470 {
  animation: _spin_13o7k_470 1s linear infinite;
}

@keyframes _spin_13o7k_470 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_12cuy_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_12cuy_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._content_12cuy_201 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

._section_12cuy_208 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._section_12cuy_208 h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}
._section_12cuy_208 ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._section_12cuy_208 li {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.5;
}
._section_12cuy_208 li::marker {
  color: var(--clrAccent-40);
}

._footerNote_12cuy_238 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--clrAccent-10);
}
._footerNote_12cuy_238 p {
  color: var(--clrTextPrimary);
  font-size: 12px;
  text-align: center;
  margin: 0;
  font-style: italic;
}

._closeButton_12cuy_251 {
  width: 100%;
  height: 48px;
  background: var(--clrTertiary);
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
._closeButton_12cuy_251:hover {
  transform: translateY(-2px);
  background: var(--clrAccent-30);
}
._closeButton_12cuy_251:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  ._section_12cuy_208 h3 {
    font-size: 16px;
  }
  ._section_12cuy_208 li {
    font-size: 14px;
  }
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_1iptz_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_1iptz_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._bottomBarContainer_1iptz_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1000;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 580px;
  height: 70px;
  padding: 4px 3px;
  pointer-events: auto;
  background: var(--clrPrimary30);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._themeLight_1iptz_60 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201, ._themePastelLight_1iptz_239 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--clrPrimaryReverse);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._themeLight_1iptz_60 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201._legacy_1iptz_245, ._themePastelLight_1iptz_239 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201._legacy_1iptz_245 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
._themeDark_1iptz_120 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.2);
}
._themeDark_1iptz_120 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201._legacy_1iptz_245 {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--clrTertiaryReverse);
  width: 100%;
  height: 100%;
  border-radius: 40px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259::selection {
  background: transparent;
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259:hover ._linkIcon_1iptz_286 {
  transform: translateY(-2px);
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259:active {
  background-color: var(--clrAccent-10);
  transform: scale(0.95);
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259._active_1iptz_293 {
  color: var(--clrAccent-80);
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.05);
}
._legacy_1iptz_245 ._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259._active_1iptz_293 {
  background-color: var(--clrAccent-20);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--clrAccent-30);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259._active_1iptz_293 ._linkIcon_1iptz_286 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_1iptz_201 ._bottomBar_1iptz_201 ._linkContainer_1iptz_259 ._linkIcon_1iptz_286 {
  height: 28px;
  font-size: 24px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}html {
  color-scheme: light dark auto;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #641f1f;
  --clrError-50: #c84d4d;
  --clrSuccess-100: #2d692d;
  --clrSuccess-50: #3EA03E;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #F4F4F5;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.3);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeLight_118zv_60 {
  --clrPrimary: #F4F4F5;
  --clrSecondary: #FEFEFE;
  --clrTertiary: #E4E4E7;
  --clrPrimaryReverse: #101418;
  --clrSecondaryReverse: #0A0F14;
  --clrTertiaryReverse: #212327;
  --clrTextPrimary: #101418;
  --clrTextSecondary: #2E3337;
  --clrTextTertiary: #7C7C7C;
  --clrTextPrimaryReverse: #F4F4F5;
  --clrTextSecondaryReverse: #CDCDCD;
  --clrTextTertiaryReverse: #8A8A8A;
  --clrError-100: #c03b3b;
  --clrError-50: #f6c5c5;
  --clrSuccess-100: #30d330;
  --clrSuccess-50: #bbffbb;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

._themeDark_118zv_120 {
  --clrPrimary: #0F1418;
  --clrSecondary: #0A0F14;
  --clrTertiary: #212327;
  --clrPrimaryReverse: #F4F4F5;
  --clrSecondaryReverse: #FEFEFE;
  --clrTertiaryReverse: #E4E4E7;
  --clrTextPrimary: #F4F4F5;
  --clrTextSecondary: #CDCDCD;
  --clrTextTertiary: #8A8A8A;
  --clrTextPrimaryReverse: #101418;
  --clrTextSecondaryReverse: #2E3337;
  --clrTextTertiaryReverse: #7C7C7C;
  --clrError-100: #c84d4d;
  --clrError-50: #641f1f;
  --clrSuccess-100: #3EA03E;
  --clrSuccess-50: #2d692d;
  --clrWarning-100: #E88434;
  --clrWarning-50: #C49168;
  --clrAccent-100: #FFFFFF;
  --clrAccent-80: rgba(255, 255, 255, 0.8);
  --clrAccent-60: rgba(255, 255, 255, 0.6);
  --clrAccent-50: rgba(255, 255, 255, 0.5);
  --clrAccent-40: rgba(255, 255, 255, 0.4);
  --clrAccent-30: rgba(255, 255, 255, 0.3);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

Note: 
    If you want something done quick, ask AI to buuild your color themes.
    If you want to do it right and tidy though, do it manually. 

    - Theo

*/
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._errorContainer_118zv_201 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--clrPrimary);
}

._errorContent_118zv_210 {
  text-align: center;
  max-width: 400px;
}

._errorTitle_118zv_215 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0 0 12px 0;
}

._errorMessage_118zv_222 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._refreshButton_118zv_229 {
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._refreshButton_118zv_229:hover {
  opacity: 0.9;
}
._refreshButton_118zv_229:active {
  transform: scale(0.98);
}:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Jaro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}