@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_159gp_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_159gp_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_159gp_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_159gp_201 {
    width: 75%;
    bottom: 128px;
  }
}

._snackbar_159gp_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_159gp_1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
._snackbar_159gp_201._exiting_159gp_232 {
  animation: _slideOutDown_159gp_1 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@supports not (backdrop-filter: blur(40px)) {
  ._snackbar_159gp_201 {
    background: var(--clrSecondary);
  }
}

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

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

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

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

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

._closeButton_159gp_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_159gp_250:hover {
  background: rgba(0, 0, 0, 0.05);
}
._closeButton_159gp_250:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
._closeButton_159gp_250 svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

@keyframes _slideInUp_159gp_1 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes _slideOutDown_159gp_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_1xtrl_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_1xtrl_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1xtrl_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

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

._inputWrapper_1xtrl_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_1xtrl_221._default_1xtrl_235 {
  border-color: transparent;
}
._inputWrapper_1xtrl_221._active_1xtrl_238 {
  border-color: var(--clrAccent-30);
  box-shadow: 0px 0px 12px 0px rgba(186, 186, 186, 0.1);
}
._inputWrapper_1xtrl_221._error_1xtrl_217 {
  border-color: var(--clrError-100);
  box-shadow: 0px 0px 12px 0px rgba(255, 141, 141, 0.16);
}

._input_1xtrl_221,
._select_1xtrl_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_1xtrl_221::placeholder,
._select_1xtrl_248::placeholder {
  color: var(--clrAccent-30);
}
._input_1xtrl_221[type=date],
._select_1xtrl_248[type=date] {
  appearance: none;
  -webkit-appearance: none;
}
._input_1xtrl_221[type=date]::-webkit-calendar-picker-indicator,
._select_1xtrl_248[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
._input_1xtrl_221[type=date]::-webkit-date-and-time-value,
._select_1xtrl_248[type=date]::-webkit-date-and-time-value {
  text-align: left;
}

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

._error_1xtrl_217 ._input_1xtrl_221,
._error_1xtrl_217 ._select_1xtrl_248 {
  color: var(--clrError-100);
}
._error_1xtrl_217 ._input_1xtrl_221::placeholder,
._error_1xtrl_217 ._select_1xtrl_248::placeholder {
  color: var(--clrError-100);
}

._passwordToggle_1xtrl_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_1xtrl_317 {
  font-size: 20px;
  color: var(--clrAccent-100);
}

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

._description_1xtrl_331 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}
._description_1xtrl_331._errorDescription_1xtrl_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_1woyh_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_1woyh_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1woyh_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_1woyh_201:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._button_1woyh_201:active:not(:disabled) {
  transform: scale(0.98);
}

._fullWidth_1woyh_222 {
  width: 100%;
}

._primary_1woyh_226 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border: none;
  position: relative;
}
._primary_1woyh_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_1woyh_226:hover:not(:disabled)::before {
  opacity: 1;
  box-shadow: 0 0 30px var(--clrAccent-30);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._innerContent_1woyh_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_1woyh_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_1woyh_394:hover:not(:disabled) ._innerContent_1woyh_408::before {
  opacity: 1;
}
._innerContent_1woyh_408 ._icon_1woyh_297 {
  font-size: 20px;
  max-height: 20px;
}

@keyframes _star-movement-bottom_1woyh_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}
@keyframes _star-movement-top_1woyh_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}
._loading_1woyh_492 {
  pointer-events: none;
}

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

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

@keyframes _spin_1woyh_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_1514o_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_1514o_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1514o_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_1514o_209 {
  display: flex;
  gap: 12px;
  animation: _scroll_1514o_1 linear infinite;
  width: max-content;
}

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

@media (max-width: 480px) {
  ._carousel_1514o_201 {
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselSlide_1514o_224 {
    width: var(--mobile-width, 280px) !important;
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselTrack_1514o_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_1i0c4_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_1i0c4_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1i0c4_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_1i0c4_1 var(--speed, 3s) infinite linear;
}
._shinyText_1i0c4_201._disabled_1i0c4_211 {
  animation: none;
  background: var(--clrTextTertiary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes _shine_1i0c4_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_1210t_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_1210t_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1210t_201 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
  position: relative;
}

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

._header_1210t_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_1210t_221 {
    padding: 80px 24px 40px;
  }
}
._header_1210t_221 ._logo_1210t_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_1210t_221 ._logo_1210t_237 {
    width: 125px;
    height: 125px;
    border-radius: 36px;
  }
}
._header_1210t_221 ._welcomeTitle_1210t_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_1210t_221 ._welcomeTitle_1210t_253 {
    font-size: 32px;
  }
}
._header_1210t_221 ._welcomeSubtitle_1210t_265 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1210t_221 ._welcomeSubtitle_1210t_265 {
    font-size: 16px;
  }
}

._carouselContainer_1210t_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_1210t_278 {
    margin: 24px 0;
  }
}

._drawer_1210t_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_1210t_296 {
    padding: 0 24px 24px;
  }
}

._drawerContent_1210t_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_1210t_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_1210t_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._textPrompt_1210t_340 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
._textPrompt_1210t_340 ._drawerTitle_1210t_346 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: normal;
}
._textPrompt_1210t_340 ._drawerSubtitle_1210t_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_1210t_363 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._buttons_1210t_363 ._buttonRow_1210t_368 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

._guestText_1210t_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_1210t_375 ._guestLink_1210t_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_1210t_375 ._guestLink_1210t_383:hover {
  color: rgba(198, 198, 198, 0.8);
}

._termsText_1210t_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_1210t_399 ._termsLink_1210t_408 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.6);
  text-decoration: none;
}
._termsText_1210t_399 ._termsLink_1210t_408:hover {
  text-decoration: underline;
}

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

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

._termsCheckbox_1210t_434 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
}
._termsCheckbox_1210t_434 ._checkbox_1210t_429 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._termsCheckbox_1210t_434 ._checkboxLabel_1210t_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_1210t_434 ._checkboxLabel_1210t_448 ._termsLink_1210t_408 {
  font-weight: 700;
  color: rgba(198, 198, 198, 0.8);
  text-decoration: underline;
  transition: color 0.2s ease;
}
._termsCheckbox_1210t_434 ._checkboxLabel_1210t_448 ._termsLink_1210t_408:hover {
  color: rgb(198, 198, 198);
}

._spoiler_1210t_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_1210t_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_1210t_467:hover {
  background: rgba(198, 198, 198, 0.3);
}
._spoiler_1210t_467._revealed_1210t_493 {
  color: rgba(198, 198, 198, 0.8);
  text-shadow: none;
  background: transparent;
  cursor: default;
}
._spoiler_1210t_467._revealed_1210t_493::before {
  display: none;
}

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

._forgotLink_1210t_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_1210t_522:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_1210t_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_1p56l_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_1p56l_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1p56l_201 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrSecondary);
  overflow: hidden;
}

._header_1p56l_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_1p56l_210 {
    padding: 80px 24px 40px;
  }
}
._header_1p56l_210 ._logo_1p56l_224 {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}
@media (min-width: 840px) {
  ._header_1p56l_210 ._logo_1p56l_224 {
    width: 125px;
    height: 125px;
  }
}
._header_1p56l_210 ._welcomeTitle_1p56l_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_1p56l_210 ._welcomeTitle_1p56l_236 {
    font-size: 32px;
  }
}
._header_1p56l_210 ._welcomeSubtitle_1p56l_248 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1p56l_210 ._welcomeSubtitle_1p56l_248 {
    font-size: 16px;
  }
}

._drawer_1p56l_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_1p56l_261 {
    padding: 0 24px 24px;
  }
}

._drawerContent_1p56l_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_1p56l_1 0.3s ease-out;
}
@keyframes _drawerSlideIn_1p56l_1 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._textPrompt_1p56l_301 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._textPrompt_1p56l_301 ._drawerTitle_1p56l_306 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: normal;
}
._textPrompt_1p56l_301 ._drawerSubtitle_1p56l_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_1p56l_323 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._backLink_1p56l_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_1p56l_329:hover {
  color: rgba(198, 198, 198, 0.8);
}

._errorMessage_1p56l_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_dv8h9_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_dv8h9_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_dv8h9_201 ._tournamentBtns_dv8h9_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_13030_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_13030_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_13030_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_13030_201::-webkit-scrollbar {
  height: 6px;
}
._leaderCarousel_13030_201::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._leaderCarousel_13030_201::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._leaderCarousel_13030_201::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._leaderCard_13030_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_13030_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_13030_229._selected_13030_247 {
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}

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

._leaderInfo_13030_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_13030_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_13030_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_13030_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_13030_300 {
  width: 100%;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: italic;
}

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

._loadMoreBtn_13030_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_13030_315:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
._loadMoreBtn_13030_315:active {
  transform: scale(0.98);
}

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

._skeletonCard_13030_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_13030_1 1.5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px;
}

._skeletonImage_13030_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_13030_1 1.5s ease-in-out infinite;
}

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

._skeletonName_13030_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_13030_1 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

._skeletonSet_13030_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_13030_1 1.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes _skeletonPulse_13030_1 {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes _skeletonShimmer_13030_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes _pulse_13030_1 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  ._leaderCard_13030_229 {
    width: 110px;
    height: 156px;
  }
  ._leaderImageInCard_13030_253 {
    height: 72px;
  }
  ._leaderInfo_13030_264 {
    padding: 8px;
  }
  ._leaderName_13030_282 {
    font-size: 11px;
  }
  ._leaderSet_13030_292 {
    font-size: 10px;
  }
  ._skeletonCard_13030_343 {
    width: 128px;
    height: 193px;
  }
  ._skeletonImage_13030_359 {
    width: 118px;
    height: 118px;
  }
  ._skeletonInfo_13030_368 {
    gap: 4px;
  }
  ._skeletonName_13030_376 {
    height: 11px;
    margin-bottom: 4px;
  }
  ._skeletonSet_13030_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_1gusr_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_1gusr_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1gusr_201 {
  position: relative;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
}
._container_1gusr_201 ._skeletonOverlay_1gusr_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_1gusr_201 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_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_1gusr_1 1.5s infinite;
  flex-shrink: 0;
}
._container_1gusr_201 ._skeletonOverlay_1gusr_207 ._skeletonText_1gusr_229 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}
._container_1gusr_201 ._skeletonOverlay_1gusr_207 ._skeletonText_1gusr_229 ._skeletonName_1gusr_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_1gusr_1 1.5s infinite;
}
._container_1gusr_201 ._skeletonOverlay_1gusr_207 ._skeletonText_1gusr_229 ._skeletonSet_1gusr_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_1gusr_1 1.5s infinite;
}
._container_1gusr_201 ._content_1gusr_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_1gusr_201 ._content_1gusr_254._fadeIn_1gusr_266 {
  opacity: 1;
  visibility: visible;
}
._container_1gusr_201 ._photo_1gusr_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_1gusr_201 ._photo_1gusr_270 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
._container_1gusr_201 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  color: #FFFFFF;
  font-weight: 600;
}
._container_1gusr_201 ._text_1gusr_294 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0 2px;
}
._container_1gusr_201 ._text_1gusr_294 ._name_1gusr_303 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
._container_1gusr_201 ._text_1gusr_294 ._set_1gusr_311 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
._container_1gusr_201._image-text_1gusr_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_1gusr_201._image-text_1gusr_317:hover {
  transform: translateY(-2px);
}
._container_1gusr_201._image-text_1gusr_317 ._skeletonOverlay_1gusr_207 {
  gap: 10px;
}
._container_1gusr_201._image-text_1gusr_317 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 124px;
  height: 124px;
}
._container_1gusr_201._image-text_1gusr_317 ._content_1gusr_254 {
  gap: 10px;
}
._container_1gusr_201._image-text_1gusr_317 ._photo_1gusr_270 {
  width: 124px;
  height: 124px;
}
._container_1gusr_201._image-text_1gusr_317 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 32px;
}
._container_1gusr_201._image-text_1gusr_317._active_1gusr_347 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
._container_1gusr_201._image-text-medium_1gusr_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_1gusr_201._image-text-medium_1gusr_352:hover {
  transform: translateY(-2px);
}
._container_1gusr_201._image-text-medium_1gusr_352 ._skeletonOverlay_1gusr_207 {
  gap: 8px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._content_1gusr_254 {
  gap: 8px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._photo_1gusr_270 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 20px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._text_1gusr_294 {
  gap: 1px;
  padding: 0 2px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._text_1gusr_294 ._name_1gusr_303 {
  font-size: 12px;
}
._container_1gusr_201._image-text-medium_1gusr_352 ._text_1gusr_294 ._set_1gusr_311 {
  font-size: 12px;
}
._container_1gusr_201._image-text-medium_1gusr_352._active_1gusr_347 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
}
._container_1gusr_201._image-text-small_1gusr_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_1gusr_201._image-text-small_1gusr_401:hover {
  transform: translateY(-2px);
}
._container_1gusr_201._image-text-small_1gusr_401 ._skeletonOverlay_1gusr_207 {
  gap: 6px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._skeletonOverlay_1gusr_207 ._skeletonText_1gusr_229 ._skeletonName_1gusr_238 {
  height: 12px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._skeletonOverlay_1gusr_207 ._skeletonText_1gusr_229 ._skeletonSet_1gusr_246 {
  height: 10px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._content_1gusr_254 {
  gap: 6px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._photo_1gusr_270 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 20px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._text_1gusr_294 {
  gap: 1px;
  padding: 0 1px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._text_1gusr_294 ._name_1gusr_303 {
  font-size: 12px;
}
._container_1gusr_201._image-text-small_1gusr_401 ._text_1gusr_294 ._set_1gusr_311 {
  font-size: 8px;
}
._container_1gusr_201._image-text-small_1gusr_401._active_1gusr_347 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
._container_1gusr_201._image-only-xlarge_1gusr_456 {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
._container_1gusr_201._image-only-xlarge_1gusr_456 ._skeletonOverlay_1gusr_207 {
  justify-content: center;
}
._container_1gusr_201._image-only-xlarge_1gusr_456 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 100px;
  height: 100px;
}
._container_1gusr_201._image-only-xlarge_1gusr_456 ._content_1gusr_254 {
  justify-content: center;
}
._container_1gusr_201._image-only-xlarge_1gusr_456 ._photo_1gusr_270 {
  width: 100px;
  height: 100px;
}
._container_1gusr_201._image-only-xlarge_1gusr_456 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 12px;
}
._container_1gusr_201._image-only-large_1gusr_478 {
  width: 112px;
  height: 112px;
}
._container_1gusr_201._image-only-large_1gusr_478 ._skeletonOverlay_1gusr_207 {
  justify-content: center;
}
._container_1gusr_201._image-only-large_1gusr_478 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 104px;
  height: 104px;
}
._container_1gusr_201._image-only-large_1gusr_478 ._content_1gusr_254 {
  justify-content: center;
}
._container_1gusr_201._image-only-large_1gusr_478 ._photo_1gusr_270 {
  width: 100%;
  height: 100%;
}
._container_1gusr_201._image-only-large_1gusr_478 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 28px;
}
._container_1gusr_201._image-only-small_1gusr_499 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._container_1gusr_201._image-only-small_1gusr_499 ._skeletonOverlay_1gusr_207 {
  justify-content: center;
}
._container_1gusr_201._image-only-small_1gusr_499 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 60px;
  height: 60px;
}
._container_1gusr_201._image-only-small_1gusr_499 ._content_1gusr_254 {
  justify-content: center;
}
._container_1gusr_201._image-only-small_1gusr_499 ._photo_1gusr_270 {
  height: 100%;
  width: 100%;
}
._container_1gusr_201._image-only-small_1gusr_499 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 18px;
}
._container_1gusr_201._image-only-xsmall_1gusr_521 {
  width: 40px;
  height: 40px;
  padding: 2px;
}
._container_1gusr_201._image-only-xsmall_1gusr_521 ._skeletonOverlay_1gusr_207 {
  justify-content: center;
}
._container_1gusr_201._image-only-xsmall_1gusr_521 ._skeletonOverlay_1gusr_207 ._skeletonPhoto_1gusr_222 {
  width: 36px;
  height: 36px;
}
._container_1gusr_201._image-only-xsmall_1gusr_521 ._content_1gusr_254 {
  justify-content: center;
}
._container_1gusr_201._image-only-xsmall_1gusr_521 ._photo_1gusr_270 {
  width: 36px;
  height: 36px;
}
._container_1gusr_201._image-only-xsmall_1gusr_521 ._photo_1gusr_270 ._placeholder_1gusr_290 {
  font-size: 14px;
}

@keyframes _shimmer_1gusr_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_eaj2n_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_eaj2n_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_eaj2n_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

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

._carousel_eaj2n_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_eaj2n_218::-webkit-scrollbar {
  height: 6px;
}
._carousel_eaj2n_218::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
._carousel_eaj2n_218::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
._carousel_eaj2n_218::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

._typeChip_eaj2n_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_eaj2n_245:hover:not(:disabled) {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-80);
}
._typeChip_eaj2n_245:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._typeChip_eaj2n_245._selected_eaj2n_272 {
  border-color: var(--clrAccent-100);
  color: var(--clrAccent-100);
  background: var(--clrAccent-10);
}
._typeChip_eaj2n_245._typeLocal_eaj2n_277 {
  background-color: #163c26;
  border-color: rgba(133, 228, 172, 0.6);
  color: rgba(133, 228, 172, 0.6);
}
._typeChip_eaj2n_245._typeStoreCs_eaj2n_282 {
  background-color: #471f1f;
  border-color: rgba(240, 131, 131, 0.6);
  color: rgba(240, 131, 131, 0.6);
}
._typeChip_eaj2n_245._typeTreasureCup_eaj2n_287 {
  background-color: #562502;
  border-color: rgba(255, 160, 92, 0.6);
  color: rgba(255, 160, 92, 0.6);
}
._typeChip_eaj2n_245._typeFlagship_eaj2n_292 {
  background-color: #4b2e00;
  border-color: rgba(255, 201, 115, 0.6);
  color: rgba(255, 201, 115, 0.6);
}
._typeChip_eaj2n_245._typeTesting_eaj2n_297 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}
._typeChip_eaj2n_245._typeLcq_eaj2n_302 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}
._typeChip_eaj2n_245._typeNational_eaj2n_307 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}
._typeChip_eaj2n_245._typeRankedSim_eaj2n_312 {
  background-color: #1e3a5f;
  border-color: #60a5fa;
  color: #bfdbfe;
}
._typeChip_eaj2n_245._typeRegionals_eaj2n_317, ._typeChip_eaj2n_245._typeWorld_eaj2n_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_eaj2n_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeChip_eaj2n_245._typeRegionals_eaj2n_317::before, ._typeChip_eaj2n_245._typeWorld_eaj2n_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_eaj2n_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_eaj2n_345 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}

@keyframes _gold-shimmer_eaj2n_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _chip-glow-spin_eaj2n_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_kzsnt_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_kzsnt_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_kzsnt_1 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _slideDown_kzsnt_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
._drawerOverlay_kzsnt_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_kzsnt_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_kzsnt_1 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform;
}
._drawer_kzsnt_217._closing_kzsnt_249 {
  animation: _slideDown_kzsnt_1 0.25s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
._drawer_kzsnt_217._glass_kzsnt_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_kzsnt_217._fullHeight_kzsnt_259 {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

._dragHandle_kzsnt_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_kzsnt_264:active {
  cursor: grabbing;
}

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

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

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

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

._drawerContent_kzsnt_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_kzsnt_324 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

._primaryBtn_kzsnt_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_kzsnt_334:hover:not(:disabled) {
  opacity: 0.9;
}
._primaryBtn_kzsnt_334:active:not(:disabled) {
  transform: scale(0.98);
}
._primaryBtn_kzsnt_334:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._secondaryBtn_kzsnt_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_kzsnt_358:hover:not(:disabled) {
  background-color: rgba(216, 72, 72, 0.1);
}
._secondaryBtn_kzsnt_358:active:not(:disabled) {
  transform: scale(0.98);
}
._secondaryBtn_kzsnt_358:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelOnlyBtn_kzsnt_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_kzsnt_382:hover:not(:disabled) {
  opacity: 0.9;
}
._cancelOnlyBtn_kzsnt_382:active:not(:disabled) {
  transform: scale(0.98);
}
._cancelOnlyBtn_kzsnt_382:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectionCard_kzsnt_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_kzsnt_406:hover {
  border-color: var(--clrAccent-100);
}
._selectionCard_kzsnt_406:active {
  transform: scale(0.98);
}

._selectionIcon_kzsnt_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_kzsnt_443 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

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

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

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

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

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

@media (max-width: 768px) {
  ._drawer_kzsnt_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_184tc_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_184tc_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_184tc_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_nbm3o_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_nbm3o_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_nbm3o_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_nbm3o_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16px 0;
}
._pageTitle_nbm3o_216 h1 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}

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

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

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

._submitButton_nbm3o_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_nbm3o_262:hover:not(:disabled) {
  opacity: 0.9;
}
._submitButton_nbm3o_262:active:not(:disabled) {
  transform: scale(0.98);
}
._submitButton_nbm3o_262:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

._modalOverlay_nbm3o_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_nbm3o_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_nbm3o_318 h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}
._modalContent_nbm3o_318 p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--clrAccent-60);
  text-align: center;
  margin: 0;
}

._modalButtons_nbm3o_346 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
._modalButtons_nbm3o_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_nbm3o_346 button:active:not(:disabled) {
  transform: scale(0.98);
}

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

._cancelButton_nbm3o_379 {
  background-color: transparent;
  color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
}
._cancelButton_nbm3o_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_i081k_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_i081k_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_i081k_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_i081k_201 ._content_i081k_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_i081k_201 ._title_i081k_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_i081k_201 ._value_i081k_238 {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._statCard_i081k_201 ._emoji_i081k_245 {
  font-size: 48px;
  line-height: 1;
}
._statCard_i081k_201 ._label_i081k_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_i081k_259 ._content_i081k_216 {
  padding: 0;
}
._leaderVariant_i081k_259 ._content_i081k_216 img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

._colorVariant_i081k_268 ._content_i081k_216 {
  padding: 0;
}

._ratioPositive_i081k_272 {
  border-color: var(--clrSuccess-100);
}
._ratioPositive_i081k_272 ._content_i081k_216 {
  background: var(--clrSuccess-50);
}
._ratioPositive_i081k_272 ._title_i081k_227 {
  background: var(--clrSuccess-100);
}
._ratioPositive_i081k_272 ._value_i081k_238 {
  color: var(--clrSuccess-100);
}
._ratioPositive_i081k_272 ._label_i081k_249 {
  color: var(--clrTextPrimaryReverse);
}

._ratioNegative_i081k_288 {
  border-color: var(--clrError-100);
}
._ratioNegative_i081k_288 ._content_i081k_216 {
  background: var(--clrError-50);
}
._ratioNegative_i081k_288 ._title_i081k_227 {
  background: var(--clrError-100);
}
._ratioNegative_i081k_288 ._value_i081k_238 {
  color: var(--clrError-100);
}
._ratioNegative_i081k_288 ._label_i081k_249 {
  color: var(--clrTextPrimaryReverse);
}

._mini_i081k_304 {
  min-width: 72px;
  max-width: 72px;
  max-height: 72px;
  flex: 0 0 72px;
}
._mini_i081k_304 ._content_i081k_216 {
  padding: 4px;
}
._mini_i081k_304 ._title_i081k_227 {
  height: 20px;
  padding: 0 4px;
}
._mini_i081k_304 ._value_i081k_238 {
  font-size: 18px;
}
._mini_i081k_304 ._emoji_i081k_245 {
  font-size: 24px;
}
._mini_i081k_304 ._label_i081k_249 {
  font-size: 8px;
  letter-spacing: 0.3px;
}

._tiny_i081k_328 {
  min-width: 56px;
  max-width: 56px;
  max-height: 56px;
  flex: 0 0 56px;
}
._tiny_i081k_328 ._content_i081k_216 {
  padding: 2px;
}
._tiny_i081k_328 ._title_i081k_227 {
  height: 16px;
  padding: 0 2px;
}
._tiny_i081k_328 ._value_i081k_238 {
  font-size: 14px;
}
._tiny_i081k_328 ._emoji_i081k_245 {
  font-size: 18px;
}
._tiny_i081k_328 ._label_i081k_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_19ziv_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_19ziv_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_19ziv_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_19ziv_201:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_19ziv_201:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_19ziv_201:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

._description_19ziv_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_7cf11_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_7cf11_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_7cf11_201 {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

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

._loadingOverlay_7cf11_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_7cf11_216 p {
  color: var(--clrAccent-100);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

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

@keyframes _spin_7cf11_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_1xhtz_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_1xhtz_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1xhtz_201 {
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._premiumHeader_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._premiumHeader_1xhtz_216 ._starIcon_1xhtz_227 {
  font-size: 32px;
  color: #ffd700;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._premiumHeader_1xhtz_216 ._premiumTitle_1xhtz_232 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._premiumBanner_1xhtz_238 {
  margin: 12px 0;
  max-width: 350px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._premiumBanner_1xhtz_238 img {
  width: 100%;
  height: 100%;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._premiumDescription_1xhtz_246 {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._cardHeader_1xhtz_253 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._cardHeader_1xhtz_253 ._starIconGold_1xhtz_261 {
  font-size: 48px;
  color: #ffd700;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: _pulse_1xhtz_1 2s ease-in-out infinite;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._cardHeader_1xhtz_253 ._cardTitle_1xhtz_267 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
  line-height: 1.2;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._featureList_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._featureList_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._featureList_1xhtz_274 li:hover {
  transform: translateX(4px);
  border-left-color: #ffd700;
  background: var(--clrBackground-200);
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._featureList_1xhtz_274 li ._checkmark_1xhtz_304 {
  font-weight: 700;
  color: #ffd700;
  font-size: 20px;
  flex-shrink: 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._featureList_1xhtz_274 li span:last-child {
  font-weight: 500;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._priceSection_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._priceSection_1xhtz_313 ._priceLabel_1xhtz_324 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._priceSection_1xhtz_313 ._price_1xhtz_313 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._successMessage_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._errorMessage_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._paymentButtonContainer_1xhtz_356 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._subscriptionManagement_1xhtz_364 {
  margin-top: 16px;
  width: 100%;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._subscriptionInfo_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._subscriptionInfo_1xhtz_368 ._statusActive_1xhtz_377 {
  color: var(--clrSuccess-100);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._subscriptionInfo_1xhtz_368 ._statusActive_1xhtz_377 svg {
  color: green;
  font-size: 16px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._subscriptionInfo_1xhtz_368 ._statusCanceled_1xhtz_391 {
  color: var(--clrWarning);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._subscriptionInfo_1xhtz_368 ._statusCanceled_1xhtz_391 svg {
  color: red;
  font-size: 16px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingOptions_1xhtz_405 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  ._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingOptions_1xhtz_405 {
    flex-direction: row;
    gap: 32px;
  }
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419:hover {
  transform: translateY(-4px);
  border-color: var(--clrAccent-50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._cardContent_1xhtz_438 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._pricingTitle_1xhtz_446 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._priceSection_1xhtz_313 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._priceSection_1xhtz_313 ._price_1xhtz_313 {
  font-size: 36px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._priceSection_1xhtz_313 ._priceLabel_1xhtz_324 {
  font-size: 16px;
  color: var(--clrAccent-60);
  font-weight: 500;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._spacer_1xhtz_470 {
  height: 20px;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419 ._savings_1xhtz_473 {
  font-size: 14px;
  color: #ffd700;
  font-weight: 600;
  margin: 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419._recommended_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419._recommended_1xhtz_479:hover {
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419._recommended_1xhtz_479 ._recommendedBadge_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._pricingCard_1xhtz_419._recommended_1xhtz_479 ._pricingTitle_1xhtz_446 {
  color: #ffd700;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._troubleshootSection_1xhtz_506 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-20);
  text-align: center;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._troubleshootSection_1xhtz_506 ._troubleshootText_1xhtz_512 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin: 0;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._troubleshootSection_1xhtz_506 ._troubleshootText_1xhtz_512 ._troubleshootButton_1xhtz_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_1xhtz_201 ._premiumCard_1xhtz_206 ._troubleshootSection_1xhtz_506 ._troubleshootText_1xhtz_512 ._troubleshootButton_1xhtz_517:hover {
  color: #ffd700;
}
._premiumSection_1xhtz_201 ._premiumCard_1xhtz_206 ._troubleshootSection_1xhtz_506 ._troubleshootText_1xhtz_512 ._troubleshootButton_1xhtz_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_1rd19_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_1rd19_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1rd19_201 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._manageButton_1rd19_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: 140px;
}
._manageButton_1rd19_207:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
._manageButton_1rd19_207:active:not(:disabled) {
  transform: scale(0.98);
}
._manageButton_1rd19_207:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

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

._error_1rd19_260 {
  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_1co17_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_1co17_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1co17_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_1co17_201:has(._statusActive_1co17_214) {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.1);
}
._subscriptionInfo_1co17_201:has(._statusCanceled_1co17_218) {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.1);
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 200px;
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 ._subscriptionTitle_1co17_231 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 ._subscriptionTitle_1co17_231 ._statusActive_1co17_214 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 ._subscriptionTitle_1co17_231 ._statusActive_1co17_214 svg {
  font-size: 18px;
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 ._subscriptionTitle_1co17_231 ._statusCanceled_1co17_218 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 ._subscriptionTitle_1co17_231 ._statusCanceled_1co17_218 svg {
  font-size: 18px;
}
._subscriptionInfo_1co17_201 ._subscriptionLabel_1co17_222 ._subscriptionDescription_1co17_254 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.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_1yfrr_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_1yfrr_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1yfrr_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_1yfrr_201 ._deleteLabel_1yfrr_214 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 200px;
}
._deleteAccount_1yfrr_201 ._deleteLabel_1yfrr_214 ._deleteTitle_1yfrr_223 {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
}
._deleteAccount_1yfrr_201 ._deleteLabel_1yfrr_214 ._deleteDescription_1yfrr_228 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._deleteAccount_1yfrr_201 ._deleteButton_1yfrr_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: 140px;
  white-space: nowrap;
}
._deleteAccount_1yfrr_201 ._deleteButton_1yfrr_233:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}
._deleteAccount_1yfrr_201 ._deleteButton_1yfrr_233:active:not(:disabled) {
  transform: scale(0.98);
}
._deleteAccount_1yfrr_201 ._deleteButton_1yfrr_233:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._warningModal_1yfrr_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_1yfrr_1 0.2s ease;
}
._warningModal_1yfrr_260 ._warningContent_1yfrr_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_1yfrr_1 0.3s ease;
}
._warningModal_1yfrr_260 ._warningContent_1yfrr_273 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #f59e0b;
  margin: 0;
}
._warningModal_1yfrr_260 ._warningContent_1yfrr_273 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  line-height: 1.6;
  margin: 0;
}
._warningModal_1yfrr_260 ._warningContent_1yfrr_273 p strong {
  color: #10b981;
  font-weight: 600;
}
._warningModal_1yfrr_260 ._warningContent_1yfrr_273 ._warningButton_1yfrr_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_1yfrr_260 ._warningContent_1yfrr_273 ._warningButton_1yfrr_301:hover {
  background: rgba(255, 200, 0, 0.3);
  border-color: rgba(255, 150, 0, 0.7);
}
._warningModal_1yfrr_260 ._warningContent_1yfrr_273 ._warningButton_1yfrr_301:active {
  transform: scale(0.98);
}

@keyframes _fadeIn_1yfrr_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_1yfrr_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_qfj4s_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_qfj4s_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_qfj4s_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_qfj4s_201 ._settingsHeader_qfj4s_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_qfj4s_201 ._settingsHeader_qfj4s_213:hover {
  background: rgba(255, 255, 255, 0.03);
}
._settingsSection_qfj4s_201 ._settingsHeader_qfj4s_213 ._settingsTitle_qfj4s_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_qfj4s_201 ._settingsHeader_qfj4s_213 ._settingsTitle_qfj4s_230 svg {
  font-size: 1.25rem;
}
._settingsSection_qfj4s_201 ._settingsHeader_qfj4s_213 ._settingsTitle_qfj4s_230 span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._settingsSection_qfj4s_201 ._settingsHeader_qfj4s_213 ._chevron_qfj4s_246 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_qfj4s_201 ._settingsHeader_qfj4s_213 ._chevron_qfj4s_246._expanded_qfj4s_251 {
  transform: rotate(180deg);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 8px;
  animation: _slideDown_qfj4s_1 0.2s ease-out;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263:last-child {
  border-bottom: none;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingLabel_qfj4s_274 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingLabel_qfj4s_274 span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingLabel_qfj4s_274 ._settingLabelWithBadge_qfj4s_288 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingLabel_qfj4s_274 ._settingDescription_qfj4s_295 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingValue_qfj4s_300 {
  font-size: 14px;
  color: var(--clrAccent-60);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._emailValue_qfj4s_308 {
  font-size: 0.875rem;
  flex: 1;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._supportLink_qfj4s_312 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._supportLink_qfj4s_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_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._supportLink_qfj4s_312 a:hover {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._supportLink_qfj4s_312 a svg {
  font-size: 0.875rem;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._projVersion_qfj4s_342 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353 {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353._themeDark_qfj4s_120 {
  background: #101418;
  border: 2px solid #212327;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353._themeLight_qfj4s_60 {
  background: #F4F4F5;
  border: 2px solid #E4E4E7;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353._active_qfj4s_374 {
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--clrAccent-30);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353._disabled_qfj4s_378, ._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._themeSelector_qfj4s_346 ._themeSquare_qfj4s_353:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingButton_qfj4s_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_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingButton_qfj4s_382:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingButton_qfj4s_382:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._settingButton_qfj4s_382 svg {
  font-size: 1rem;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._logoutButton_qfj4s_409 {
  background: transparent;
  border-color: var(--clrAccent-30);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413._disabled_qfj4s_378 {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413._disabled_qfj4s_378 ._toggleSlider_qfj4s_424 {
  cursor: not-allowed;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 input {
  opacity: 0;
  width: 0;
  height: 0;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 input:checked + ._toggleSlider_qfj4s_424 {
  background-color: var(--clrAccent-30);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 input:checked + ._toggleSlider_qfj4s_424:before {
  transform: translateX(20px);
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 input:disabled + ._toggleSlider_qfj4s_424 {
  cursor: not-allowed;
}
._settingsSection_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 ._toggleSlider_qfj4s_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_qfj4s_201 ._settingsContent_qfj4s_254 ._settingItem_qfj4s_263 ._toggle_qfj4s_413 ._toggleSlider_qfj4s_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_qfj4s_201 ._modal_qfj4s_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_qfj4s_1 0.2s ease;
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_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_qfj4s_1 0.3s ease;
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalInput_qfj4s_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_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalInput_qfj4s_499:focus {
  outline: none;
  border-color: var(--clrAccent-30);
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalInput_qfj4s_499::placeholder {
  color: var(--clrAccent-30);
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalError_qfj4s_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_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_524 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_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_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_524 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_524 ._modalCancel_qfj4s_545 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrAccent-80);
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_524 ._modalCancel_qfj4s_545:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_524 ._modalConfirm_qfj4s_553 {
  background: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
  color: var(--clrPrimary);
}
._settingsSection_qfj4s_201 ._modal_qfj4s_464 ._modalContent_qfj4s_479 ._modalButtons_qfj4s_524 ._modalConfirm_qfj4s_553:hover:not(:disabled) {
  opacity: 0.9;
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 {
  border-color: rgba(239, 68, 68, 0.3);
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerTitle_qfj4s_564 {
  color: #ef4444;
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerWarning_qfj4s_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_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerWarning_qfj4s_567 p {
  margin: 0;
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerWarning_qfj4s_567 strong {
  color: #ef4444;
  font-weight: 700;
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerWarning_qfj4s_567 ul {
  margin: 0;
  padding-left: 20px;
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerWarning_qfj4s_567 ul li {
  margin: 4px 0;
  color: var(--clrAccent-80);
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerConfirm_qfj4s_595 {
  background: rgba(239, 68, 68, 0.9);
  border-color: #ef4444;
  color: white;
}
._settingsSection_qfj4s_201 ._dangerModal_qfj4s_561 ._dangerConfirm_qfj4s_595:hover:not(:disabled) {
  background: #ef4444;
}

@keyframes _slideDown_qfj4s_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeIn_qfj4s_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_qfj4s_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_e2wjh_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_e2wjh_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_e2wjh_201, ._textSkeleton_e2wjh_201, ._imageSkeleton_e2wjh_201, ._deckSkeleton_e2wjh_201 {
  background: linear-gradient(90deg, var(--clrSecondary) 0%, var(--clrTertiary) 50%, var(--clrSecondary) 100%);
  background-size: 200% 100%;
  animation: _shimmer_e2wjh_1 1.5s infinite;
  border-radius: 4px;
}

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

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

._textSkeleton_e2wjh_201 {
  width: 100%;
  height: 16px;
}
._textSkeleton_e2wjh_201._short_e2wjh_223 {
  width: 60%;
}
._textSkeleton_e2wjh_201._medium_e2wjh_226 {
  width: 80%;
}

@keyframes _shimmer_e2wjh_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_1nyv8_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_1nyv8_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1nyv8_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _silverGradient_1nyv8_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes _bronzeGradient_1nyv8_1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
._topDecksCard_1nyv8_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_1nyv8_234 ._topDecksHeader_1nyv8_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_1nyv8_234 ._topDecksHeader_1nyv8_245 ._topDecksLabel_1nyv8_256 {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._topDecksCard_1nyv8_234 ._topDecksHeader_1nyv8_245 ._seasonSubtitle_1nyv8_262 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._topDecksCard_1nyv8_234 ._loadingText_1nyv8_267,
._topDecksCard_1nyv8_234 ._noDataText_1nyv8_268 {
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem 0;
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px;
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_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_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281._topDeck_1nyv8_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_1nyv8_1 3s ease infinite;
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281._topDeck_1nyv8_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_1nyv8_1 3s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281._secondDeck_1nyv8_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_1nyv8_1 3s ease infinite;
  border-color: rgba(192, 192, 192, 0.5);
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.2);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281._secondDeck_1nyv8_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_1nyv8_1 3s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(192, 192, 192, 0.3);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281._thirdDeck_1nyv8_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_1nyv8_1 3s ease infinite;
  border-color: rgba(205, 127, 50, 0.5);
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.2);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281._thirdDeck_1nyv8_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_1nyv8_1 3s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(205, 127, 50, 0.3);
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281 ._rankBadge_1nyv8_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_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281 ._deckImageWrapper_1nyv8_351 {
  flex-shrink: 0;
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281 ._deckStats_1nyv8_354 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281 ._deckStats_1nyv8_354 ._winRate_1nyv8_363 {
  font-size: 1.25rem;
  font-weight: 700;
  width: 100%;
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItem_1nyv8_281 ._deckStats_1nyv8_354 ._record_1nyv8_368 {
  font-size: 0.75rem;
  width: 100%;
}
._topDecksCard_1nyv8_234 ._decksList_1nyv8_273 ._deckItemSkeleton_1nyv8_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_1nyv8_234 ._decksList_1nyv8_273 ._deckItemSkeleton_1nyv8_372 ._deckStatsSkeleton_1nyv8_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_1vbu0_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_1vbu0_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1vbu0_201 {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: var(--clrTertiary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}

._headerButton_1vbu0_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_1vbu0_211:hover {
  background: rgba(255, 255, 255, 0.03);
}

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

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

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

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

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

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

._filterChip_1vbu0_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_1vbu0_273:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-100);
}
._filterChip_1vbu0_273._active_1vbu0_297 {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}

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

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

._deckRow_1vbu0_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_1vbu0_317:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

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

._deckImageWrapper_1vbu0_340 {
  flex-shrink: 0;
}

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

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

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

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

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

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

._loadMoreButton_1vbu0_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_1vbu0_383:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--clrAccent-50);
  color: var(--clrText);
}
._loadMoreButton_1vbu0_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_z7vxp_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_z7vxp_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_z7vxp_201 {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: var(--clrTertiary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}

._mainHeaderButton_z7vxp_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_z7vxp_211:hover {
  background: rgba(255, 255, 255, 0.03);
}

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

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

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

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

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

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

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

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

._seasonHeaderButton_z7vxp_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_z7vxp_295:hover {
  background: rgba(255, 255, 255, 0.05);
}

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

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

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

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

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

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

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

._deckRow_z7vxp_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_z7vxp_360:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}
._deckRow_z7vxp_360._topDeck_z7vxp_375 {
  border-color: rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.05);
}
._deckRow_z7vxp_360._secondDeck_z7vxp_379 {
  border-color: rgba(192, 192, 192, 0.3);
  background: rgba(192, 192, 192, 0.05);
}
._deckRow_z7vxp_360._thirdDeck_z7vxp_383 {
  border-color: rgba(205, 127, 50, 0.3);
  background: rgba(205, 127, 50, 0.05);
}

._rankBadge_z7vxp_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_z7vxp_375 ._rankBadge_z7vxp_388 {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
}
._secondDeck_z7vxp_379 ._rankBadge_z7vxp_388 {
  background: rgba(192, 192, 192, 0.2);
  color: #c0c0c0;
}
._thirdDeck_z7vxp_383 ._rankBadge_z7vxp_388 {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
}

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

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

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

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

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

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

._record_z7vxp_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_1mftm_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_1mftm_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1mftm_201 {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background-color: var(--clrPrimary);
  width: 100%;
  border: 1px solid var(--clrAccent-10);
  overflow: hidden;
}

._mainHeaderButton_1mftm_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_1mftm_211:hover {
  background: rgba(255, 255, 255, 0.03);
}

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

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

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

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

._contentContainer_1mftm_257 {
  padding: 8px;
  animation: _slideDown_1mftm_1 0.2s ease-out;
}

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

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

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

._deckHeaderButton_1mftm_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_1mftm_295:hover {
  background: rgba(255, 255, 255, 0.03);
}

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

._deckImageWrapper_1mftm_320 {
  flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

._matchupCard_1mftm_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_1mftm_404:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--clrAccent-50);
}

._matchupImageWrapper_1mftm_420 {
  flex-shrink: 0;
}

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

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

._matchupRecord_1mftm_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_6opzb_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_6opzb_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_6opzb_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_6opzb_201 ._profileHeader_6opzb_214 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._userWelcomeMsg_6opzb_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_6opzb_201 ._profileHeader_6opzb_214 ._userWelcomeMsg_6opzb_222 ._userIcon_6opzb_233 {
  width: 32px;
  height: 32px;
  color: var(--clrTextPrimary);
  flex-shrink: 0;
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 {
  flex-shrink: 0;
  position: relative;
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameSelectorBtn_6opzb_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_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameSelectorBtn_6opzb_243:hover {
  background: var(--clrTertiary);
  border-color: var(--clrAccent-30);
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameSelectorBtn_6opzb_243 ._chevron_6opzb_264 {
  transition: transform 0.2s ease;
  color: var(--clrTextSecondary);
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameSelectorBtn_6opzb_243 ._chevron_6opzb_264._open_6opzb_268 {
  transform: rotate(180deg);
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameDropdown_6opzb_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_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameDropdown_6opzb_271 ._gameOption_6opzb_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_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameDropdown_6opzb_271 ._gameOption_6opzb_284:hover {
  background: var(--clrTertiary);
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameDropdown_6opzb_271 ._gameOption_6opzb_284._active_6opzb_304 {
  background: var(--clrTertiary);
  font-weight: 600;
}
._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameDropdown_6opzb_271 ._gameOption_6opzb_284 ._gameLogo_6opzb_308 {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 ._loadingText_6opzb_322 {
  text-align: center;
  color: var(--clrTextSecondary);
  padding: 24px;
  font-size: 14px;
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._statsRow_6opzb_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_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._statsRow_6opzb_335 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
  }
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._premiumOverlayContainer_6opzb_353 {
  position: relative;
  width: 100%;
  margin-top: 8px;
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._blurredStats_6opzb_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_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._premiumPrompt_6opzb_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_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._premiumPrompt_6opzb_370 ._icon_6opzb_386 {
  width: 48px;
  height: 48px;
  color: rgb(255, 217, 0);
}
._profileContainer_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._premiumPrompt_6opzb_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_6opzb_201 ._statsSection_6opzb_314 ._statsContent_6opzb_328 ._expandableSections_6opzb_402 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_6opzb_201 ._paymentMethods_6opzb_410 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
}
._profileContainer_6opzb_201 ._paymentMethods_6opzb_410 ._paymentLabel_6opzb_419 {
  font-size: 12px;
  color: var(--clrTextSecondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
._profileContainer_6opzb_201 ._paymentMethods_6opzb_410 ._paymentIcons_6opzb_427 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
._profileContainer_6opzb_201 ._paymentMethods_6opzb_410 ._paymentIcons_6opzb_427 ._paymentIcon_6opzb_427 {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
._profileContainer_6opzb_201 ._paymentMethods_6opzb_410 ._paymentIcons_6opzb_427 ._paymentIcon_6opzb_427:hover {
  transform: translateY(-2px);
  opacity: 1;
}
._profileContainer_6opzb_201 ._paymentMethods_6opzb_410 ._paymentIcons_6opzb_427 ._paymentIcon_6opzb_427 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
._profileContainer_6opzb_201 ._disclaimer_6opzb_453 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 16px 24px;
}
._profileContainer_6opzb_201 ._disclaimer_6opzb_453 p {
  font-size: 0.75rem;
  color: var(--clrTextTertiary);
  text-align: center;
  line-height: 1.4;
  margin: 0;
  max-width: 600px;
}
._profileContainer_6opzb_201 ._disclaimer_6opzb_453 p a {
  color: var(--clrTextSecondary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
._profileContainer_6opzb_201 ._disclaimer_6opzb_453 p a:hover {
  color: var(--clrTextPrimary);
  text-decoration: underline;
}
._profileContainer_6opzb_201 ._legalLinks_6opzb_480 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 24px 0;
  padding-bottom: 32px;
}
._profileContainer_6opzb_201 ._legalLinks_6opzb_480 ._legalLink_6opzb_480 {
  background: none;
  border: none;
  color: var(--clrTextSecondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}
._profileContainer_6opzb_201 ._legalLinks_6opzb_480 ._legalLink_6opzb_480:hover {
  color: var(--clrTextPrimary);
}
._profileContainer_6opzb_201 ._legalLinks_6opzb_480 ._linkSeparator_6opzb_503 {
  color: var(--clrAccent-30);
  font-size: 12px;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 24px;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_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_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0;
  text-align: center;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._subtitle_6opzb_537 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  text-align: center;
  margin: 0;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 ._icon_6opzb_386 {
  font-size: 24px;
  flex-shrink: 0;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 div h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 div p {
  font-size: 12px;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.4;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 ._primaryButton_6opzb_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_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 ._primaryButton_6opzb_589:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 ._primaryButton_6opzb_589:active {
  transform: translateY(0);
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 ._secondaryButton_6opzb_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_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 ._secondaryButton_6opzb_608:hover {
  background: var(--clrSecondary);
  border-color: var(--clrAccent-30);
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._guestActionButtons_6opzb_581 ._secondaryButton_6opzb_608:active {
  transform: scale(0.98);
}
._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._dataWarning_6opzb_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_6opzb_201 {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  ._profileContainer_6opzb_201 ._profileHeader_6opzb_214 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  ._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._userWelcomeMsg_6opzb_222 {
    font-size: 16px;
  }
  ._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._gameSwitcher_6opzb_239 ._gameSelectorBtn_6opzb_243 {
    width: 100%;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 {
    padding: 16px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 {
    padding: 24px;
  }
}
@media (max-width: 480px) {
  ._profileContainer_6opzb_201 {
    padding-left: 8px;
    padding-right: 8px;
    gap: 8px;
  }
  ._profileContainer_6opzb_201 ._profileHeader_6opzb_214 ._userWelcomeMsg_6opzb_222 {
    font-size: 14px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 {
    padding: 8px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 {
    padding: 20px;
    gap: 20px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 h2 {
    font-size: 16px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 {
    gap: 16px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 {
    gap: 12px;
  }
  ._profileContainer_6opzb_201 ._guestPromptContainer_6opzb_507 ._guestPrompt_6opzb_507 ._benefitsList_6opzb_543 ._benefit_6opzb_543 ._icon_6opzb_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_1868e_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_1868e_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1868e_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_1868e_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_1868e_233 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

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

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

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

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

._primaryBtn_1868e_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_1868e_273:hover:not(:disabled) {
  opacity: 0.9;
}
._primaryBtn_1868e_273:active:not(:disabled) {
  transform: scale(0.98);
}
._primaryBtn_1868e_273:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._secondaryBtn_1868e_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_1868e_297:hover:not(:disabled) {
  background-color: rgba(216, 72, 72, 0.1);
}
._secondaryBtn_1868e_297:active:not(:disabled) {
  transform: scale(0.98);
}
._secondaryBtn_1868e_297:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelOnlyBtn_1868e_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_1868e_321:hover:not(:disabled) {
  opacity: 0.9;
}
._cancelOnlyBtn_1868e_321:active:not(:disabled) {
  transform: scale(0.98);
}
._cancelOnlyBtn_1868e_321:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._selectionCard_1868e_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_1868e_345:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._selectionCard_1868e_345:active {
  transform: translateY(0);
}

._selectionIcon_1868e_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_1868e_379 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

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

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

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

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

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

@media (max-width: 768px) {
  ._modalOverlay_1868e_201 {
    padding: 8px;
  }
  ._modal_1868e_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_11oay_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_11oay_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_11oay_201 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  text-align: center;
}

._iconWrapper_11oay_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_11oay_223 {
  width: 48px;
  height: 48px;
  color: #f59e0b;
}

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

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

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

._featureList_11oay_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_11oay_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_11oay_255 li ._checkmark_11oay_279 {
  font-weight: 700;
  color: #ffd700;
  font-size: 14px;
  flex-shrink: 0;
}
._featureList_11oay_255 li span:last-child {
  font-weight: 500;
}

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

._upgradeButton_11oay_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_11oay_299:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}
._upgradeButton_11oay_299:active {
  transform: translateY(0);
}

._reportButton_11oay_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_11oay_321:hover {
  background: rgba(var(--clrAccent-rgb), 0.1);
}

._closeButton_11oay_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_11oay_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_1alej_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_1alej_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1alej_201 {
  display: block;
}

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

._createDeckButton_1alej_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_1alej_214:hover:not(._disabled_1alej_230) {
  background: var(--clrAccent);
  color: white;
  border-style: solid;
}
._createDeckButton_1alej_214._disabled_1alej_230 {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--clrTextTertiary);
  color: var(--clrTextTertiary);
}

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

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

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

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

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

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

._deckCard_1alej_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_1alej_298:hover:not(._disabled_1alej_230):not(._adding_1alej_311) {
  border-color: var(--clrAccent);
}
._deckCard_1alej_298._disabled_1alej_230 {
  opacity: 0.6;
}
._deckCard_1alej_298._adding_1alej_311 {
  opacity: 0.7;
  pointer-events: none;
}
._deckCard_1alej_298._active_1alej_321 {
  border-color: var(--clrAccent);
  background: rgba(var(--clrAccentRgb), 0.05);
}
._deckCard_1alej_298._syncing_1alej_325 {
  opacity: 0.8;
}

._deckCardButton_1alej_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_1alej_230 ._deckCardButton_1alej_329 {
  cursor: not-allowed;
}

._leaderImage_1alej_345 {
  flex-shrink: 0;
}

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

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

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

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

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

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

._counterButton_1alej_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_1alej_393:hover:not(:disabled) {
  background: var(--clrAccentHover);
  transform: scale(1.05);
}
._counterButton_1alej_393:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

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

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

._addingSpinner_1alej_429 {
  width: 20px;
  height: 20px;
  border: 2px solid var(--clrAccent-30);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_1alej_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_1d9k0_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_1d9k0_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1d9k0_201 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 16px;
}

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

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

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

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

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

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

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

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

._checkBadge_1d9k0_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_1d9k0_294 {
  width: 14px;
  height: 14px;
  color: white;
  stroke-width: 3;
}

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

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

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

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

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

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

._input_1d9k0_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_1d9k0_329:focus {
  outline: none;
  border-color: var(--clrAccent);
}
._input_1d9k0_329::placeholder {
  color: var(--clrTextTertiary);
}
._input_1d9k0_329:disabled {
  opacity: 0.6;
}

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

._createButton_1d9k0_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_1d9k0_372:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
._createButton_1d9k0_372:active:not(:disabled) {
  transform: translateY(0);
}
._createButton_1d9k0_372:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

@keyframes _spin_1d9k0_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_1panr_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_1panr_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1panr_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_1panr_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _spin_1panr_530 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._exportModal_1panr_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_1panr_1 0.3s ease;
  overflow: hidden;
}

._exportContent_1panr_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_1panr_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportContent_1panr_250 {
    width: 95vw;
    min-height: 450px;
    max-height: 80vh;
    padding: 8px;
  }
}

._exportHeader_1panr_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_1panr_276 {
    gap: 8px;
  }
}

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

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

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

._deckTitle_1panr_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_1panr_320 {
    font-size: 12px;
  }
}

._leaderName_1panr_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_1panr_334 {
    font-size: 10px;
    max-width: 100px;
  }
}

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

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

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

._cardsGrid_1panr_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_1panr_382::-webkit-scrollbar {
  width: 4px;
}
._cardsGrid_1panr_382::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 2px;
}
._cardsGrid_1panr_382::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 2px;
}
._cardsGrid_1panr_382::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
@media (max-width: 768px) {
  ._cardsGrid_1panr_382 {
    gap: 4px;
  }
}

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

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

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

._setId_1panr_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_1panr_439 {
    font-size: 12px;
    padding: 2px 6px;
  }
}

._quantity_1panr_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_1panr_458 {
    font-size: 14px;
    padding: 2px 6px;
  }
}

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

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

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

._downloadBtn_1panr_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_1panr_503 svg {
  width: 18px;
  height: 18px;
}
._downloadBtn_1panr_503:hover:not(:disabled) {
  transform: translateY(-2px);
}
._downloadBtn_1panr_503:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._downloadBtn_1panr_503 ._spinner_1panr_530 {
  animation: _spin_1panr_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_vv9xc_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_vv9xc_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_vv9xc_201 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}

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

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

._modalDeleteBtn_vv9xc_208 {
  background-color: #dc3545;
  color: white;
}
._modalDeleteBtn_vv9xc_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_1keb6_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_1keb6_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1keb6_201 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: calc(60px + env(safe-area-inset-top));
  background: transparent;
  overflow: hidden;
}

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

._tabButton_1keb6_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_1keb6_222._active_1keb6_234 {
  background: var(--clrAccent-30);
  border-color: var(--clrAccent);
  color: var(--clrBg);
  box-shadow: 0 2px 8px rgba(var(--clrAccent-rgb), 0.3);
}

._resultsSection_1keb6_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_1keb6_241::-webkit-scrollbar {
  width: 6px;
}
._resultsSection_1keb6_241::-webkit-scrollbar-track {
  background: transparent;
}
._resultsSection_1keb6_241::-webkit-scrollbar-thumb {
  background: var(--clrAccent-20);
  border-radius: 3px;
}
._resultsSection_1keb6_241::-webkit-scrollbar-thumb:hover {
  background: var(--clrTextSecondary);
}

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

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

._resultsCount_1keb6_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_1keb6_120 ._resultsCount_1keb6_314, ._themePastelDark_1keb6_330 ._resultsCount_1keb6_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_1keb6_336 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
@media (min-width: 768px) {
  ._cardsGrid_1keb6_336 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

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

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

._cardImageSkeleton_1keb6_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_1keb6_1 1.5s infinite;
}

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

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

._cardInfo_1keb6_421 {
  padding: 12px;
}

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

._cardRarity_1keb6_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_1keb6_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_1keb6_457 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

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

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

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

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

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

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

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

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

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

@keyframes _spin_1keb6_525 {
  to {
    transform: rotate(360deg);
  }
}
._searchContainer_1keb6_539 {
  flex-shrink: 0;
  padding: 12px 16px;
  padding-bottom: 24px;
  z-index: 100;
  text-align: center;
  position: relative;
}
._searchContainer_1keb6_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_1keb6_560 {
  display: flex;
  gap: 10px;
  max-width: 580px;
  margin: 0 auto;
  align-items: stretch;
}

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

._filterSelector_1keb6_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_1keb6_120 ._filterSelector_1keb6_576, ._themePastelDark_1keb6_330 ._filterSelector_1keb6_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_1keb6_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_1keb6_576:focus {
  outline: none;
}
._filterSelect_1keb6_576 option {
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
}

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

._colorDropdownMenu_1keb6_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_1keb6_120 ._colorDropdownMenu_1keb6_625, ._themePastelDark_1keb6_330 ._colorDropdownMenu_1keb6_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_1keb6_649 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
._colorCheckboxLabel_1keb6_649:hover {
  background: rgba(0, 0, 0, 0.1);
}
._themeDark_1keb6_120 ._colorCheckboxLabel_1keb6_649:hover, ._themePastelDark_1keb6_330 ._colorCheckboxLabel_1keb6_649:hover {
  background: rgba(255, 255, 255, 0.1);
}
._colorCheckboxLabel_1keb6_649:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

._showColorCardsBtn_1keb6_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_1keb6_685:hover {
  opacity: 0.85;
}
._themeDark_1keb6_120 ._showColorCardsBtn_1keb6_685, ._themePastelDark_1keb6_330 ._showColorCardsBtn_1keb6_685 {
  background: #FFFFFF;
  color: #000000;
}

._clearColorsBtn_1keb6_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_1keb6_706:hover {
  background: rgba(0, 0, 0, 0.1);
}
._themeDark_1keb6_120 ._clearColorsBtn_1keb6_706, ._themePastelDark_1keb6_330 ._clearColorsBtn_1keb6_706 {
  border-top-color: rgba(255, 255, 255, 0.1);
}
._themeDark_1keb6_120 ._clearColorsBtn_1keb6_706:hover, ._themePastelDark_1keb6_330 ._clearColorsBtn_1keb6_706:hover {
  background: rgba(255, 255, 255, 0.1);
}

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

._searchCountIndicator_1keb6_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_1keb6_120 ._searchCountIndicator_1keb6_737 {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
._searchCountIndicator_1keb6_737 span {
  transition: color 0.2s ease;
}
._searchCountIndicator_1keb6_737 ._limitReached_1keb6_759 {
  color: var(--clrError-100);
  font-weight: 500;
}

._setSelector_1keb6_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_1keb6_120 ._setSelector_1keb6_764, ._themePastelDark_1keb6_330 ._setSelector_1keb6_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_1keb6_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_1keb6_764 option {
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
  padding: 8px;
}

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

._searchInputWrapper_1keb6_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_1keb6_120 ._searchInputWrapper_1keb6_812, ._themePastelDark_1keb6_330 ._searchInputWrapper_1keb6_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_1keb6_828 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  pointer-events: none;
}

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

._betaBadge_1keb6_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_1keb6_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_1keb6_872:hover {
  color: var(--clrTextPrimary);
}
._clearButton_1keb6_872:active {
  transform: translateY(-50%) scale(0.9);
}

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

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

._cardDetailImageWrapper_1keb6_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_1keb6_925:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
._cardDetailImageWrapper_1keb6_925:active {
  transform: scale(0.98);
}

._cardDetailImageSkeleton_1keb6_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_1keb6_1 1.5s infinite;
  border-radius: 8px;
}

._cardDetailImage_1keb6_925 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
._cardDetailImage_1keb6_925._loading_1keb6_518 {
  opacity: 0;
}
._cardDetailImage_1keb6_925._loaded_1keb6_966 {
  opacity: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

._scrollArrow_1keb6_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_1keb6_1054:hover {
  background: var(--clrAccent);
}
._scrollArrow_1keb6_1054:hover ._arrowIcon_1keb6_1074 {
  color: white;
}
._scrollArrow_1keb6_1054:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  ._scrollArrow_1keb6_1054 {
    display: none;
  }
}

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

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

._alternativeArtsScroll_1keb6_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_1keb6_1100::-webkit-scrollbar {
  height: 6px;
}
._alternativeArtsScroll_1keb6_1100::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._alternativeArtsScroll_1keb6_1100::-webkit-scrollbar-thumb {
  background: var(--clrAccent-10);
  border-radius: 3px;
}
._alternativeArtsScroll_1keb6_1100::-webkit-scrollbar-thumb:hover {
  background: var(--clrTextPrimary);
}

._altArtThumbnail_1keb6_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_1keb6_1131:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
._altArtThumbnail_1keb6_1131:active {
  transform: scale(0.98);
}
._altArtThumbnail_1keb6_1131._active_1keb6_234 {
  border-color: var(--clrAccent);
  box-shadow: 0 0 0 2px var(--clrAccent);
}

._altArtSkeleton_1keb6_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_1keb6_1 1.5s infinite;
  z-index: 1;
}

._altArtImage_1keb6_1168 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}
._altArtImage_1keb6_1168._loading_1keb6_518 {
  opacity: 0;
}
._altArtImage_1keb6_1168._loaded_1keb6_966 {
  opacity: 1;
}

._altArtLabel_1keb6_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_1keb6_1197 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 16px;
  animation: _slideInRight_1keb6_1 0.3s ease;
}

@keyframes _slideInRight_1keb6_1 {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._showInfoButton_1keb6_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_1keb6_1217:hover {
  opacity: 0.8;
}
._showInfoButton_1keb6_1217:active {
  opacity: 0.6;
}

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

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

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

._expandedImageSkeleton_1keb6_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_1keb6_1 1.5s infinite;
}
@keyframes _shimmer_1keb6_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

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

._drawerBranding_1keb6_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_1keb6_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_1keb6_1326 {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

._myDecksView_1keb6_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_1keb6_1332::-webkit-scrollbar {
  width: 6px;
}
._myDecksView_1keb6_1332::-webkit-scrollbar-track {
  background: transparent;
}
._myDecksView_1keb6_1332::-webkit-scrollbar-thumb {
  background: var(--clrAccent-20);
  border-radius: 3px;
}
._myDecksView_1keb6_1332::-webkit-scrollbar-thumb:hover {
  background: var(--clrTextSecondary);
}

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

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

._createDeckCta_1keb6_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_1keb6_1399:hover {
  transform: scale(1.02);
  opacity: 0.9;
}
._createDeckCta_1keb6_1399:active {
  transform: scale(0.98);
}

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

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

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

._deckLeader_1keb6_1454 {
  flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

._deckDetailLeader_1keb6_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_1keb6_1550 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    align-items: center;
  }
}

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

._deckDetailLeaderImage_1keb6_1583 {
  flex-shrink: 0;
}

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

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

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

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

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

._deckDetailCards_1keb6_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_1keb6_1655 {
    gap: 12px;
    padding: 16px 12px;
  }
}

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

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

._addCardsCta_1keb6_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_1keb6_1692:hover {
  opacity: 0.9;
}
._addCardsCta_1keb6_1692:active {
  transform: scale(0.98);
}

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

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

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

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

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

._deckCardBadge_1keb6_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_1keb6_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_1keb6_1789 {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._deckExpandedImage_1keb6_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_1keb6_1789._loading_1keb6_518 {
  opacity: 0;
}
._deckExpandedImage_1keb6_1789._loaded_1keb6_966 {
  opacity: 1;
}

._deckExpandedClose_1keb6_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_1keb6_1813:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}
._deckExpandedClose_1keb6_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_cd7dm_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_cd7dm_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_cd7dm_201, ._tournamentParticipantsChip_cd7dm_201, ._tournamentPositionChip_cd7dm_201, ._tournamentSetChip_cd7dm_201, ._tournamentTypeChip_cd7dm_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_cd7dm_201._small_cd7dm_218, ._small_cd7dm_218._tournamentParticipantsChip_cd7dm_201, ._small_cd7dm_218._tournamentPositionChip_cd7dm_201, ._small_cd7dm_218._tournamentSetChip_cd7dm_201, ._small_cd7dm_218._tournamentTypeChip_cd7dm_201 {
  padding: 1px 4px;
  font-size: 9px;
  gap: 2px;
}

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

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

._typeRegionals_cd7dm_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_cd7dm_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeRegionals_cd7dm_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_cd7dm_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_cd7dm_264 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}

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

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

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

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

._typeWorld_cd7dm_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_cd7dm_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeWorld_cd7dm_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_cd7dm_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_cd7dm_322 {
  background-color: var(--clrTertiary);
  border-color: var(--clrAccent-60);
  color: var(--clrAccent-100);
}

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

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

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

._firstPlace_cd7dm_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_cd7dm_1 3s ease-in-out infinite;
  color: #875c18;
  font-weight: 600;
  overflow: hidden;
}
._firstPlace_cd7dm_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_cd7dm_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_cd7dm_1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _gold-shimmer_cd7dm_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_cd7dm_356::before {
    animation: none;
  }
  ._firstPlace_cd7dm_356 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeRegionals_cd7dm_236::before {
    animation: none;
  }
  ._typeRegionals_cd7dm_236 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeWorld_cd7dm_294::before {
    animation: none;
  }
  ._typeWorld_cd7dm_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_1n4ro_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_1n4ro_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1n4ro_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_1n4ro_201:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._tournamentLogContainer_1n4ro_201:active {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  transform: translateY(0px);
  transform: scale(0.98);
}
._tournamentLogContainer_1n4ro_201._editable_1n4ro_228 {
  cursor: default;
}
._tournamentLogContainer_1n4ro_201._editable_1n4ro_228:hover {
  transform: none;
}
._tournamentLogContainer_1n4ro_201._editable_1n4ro_228:active {
  transform: none;
}
._tournamentLogContainer_1n4ro_201 ._deleteBtn_1n4ro_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_1n4ro_201 ._deleteBtn_1n4ro_237:hover {
  background-color: var(--clrError-50);
}
._tournamentLogContainer_1n4ro_201 ._deleteBtn_1n4ro_237._visible_1n4ro_259 {
  min-width: 48px;
  width: 48px;
  border: 1px solid var(--clrError-100);
  margin-left: 8px;
}
._tournamentLogContainer_1n4ro_201 ._tournamentLogInfo_1n4ro_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_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_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_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_276 ._tournamentLogName_1n4ro_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_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_276 ._tournamentLogName_1n4ro_286[data-long=true] {
  font-size: 14px;
}
@media (min-width: 768px) {
  ._tournamentLogContainer_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_276 ._tournamentLogName_1n4ro_286 {
    font-size: 16px;
  }
}
._tournamentLogContainer_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_276 ._tournamentLogDate_1n4ro_309 {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--clrAccent-30);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_276 ._tournamentLogDate_1n4ro_309 {
    font-size: 12px;
  }
}
._tournamentLogContainer_1n4ro_201 ._tournamentLogInfo_1n4ro_265 ._tournamentLogContent_1n4ro_276 ._tournamentLogDetails_1n4ro_319 {
  font-size: 8px;
  color: var(--clrAccent-60);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
._tournamentLogContainer_1n4ro_201 ._tournamentLogResultContainer_1n4ro_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_1n4ro_201 ._tournamentLogResultContainer_1n4ro_328 ._resultValue_1n4ro_339 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-80);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_1n4ro_201 ._tournamentLogResultContainer_1n4ro_328 ._resultValue_1n4ro_339 {
    font-size: 16px;
  }
}
._tournamentLogContainer_1n4ro_201 ._tournamentLogResultContainer_1n4ro_328 ._resultBlock_1n4ro_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_15zzj_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_15zzj_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_15zzj_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_15zzj_201 ._loader_15zzj_201 {
  width: 65px;
  height: 30px;
  position: relative;
}
._loaderContainer_15zzj_201 ._loader_15zzj_201:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset var(--clrAccent-100);
  animation: _l3_15zzj_1 0.75s infinite alternate;
}
@keyframes _l3_15zzj_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_mnbl2_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_mnbl2_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_mnbl2_201 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 0;
  margin: 8px 0;
}
._inlineLoaderContainer_mnbl2_201 ._loader_mnbl2_211 {
  width: 40px;
  height: 18px;
  position: relative;
}
._inlineLoaderContainer_mnbl2_201 ._loader_mnbl2_211:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 2px inset var(--clrAccent-100);
  animation: _pulse_mnbl2_1 0.8s infinite alternate;
}
@keyframes _pulse_mnbl2_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_12ox8_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_12ox8_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_12ox8_201 {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
}

._leaderCard_12ox8_208 {
  position: absolute;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: none;
  user-select: none;
}
._leaderCard_12ox8_208._draggable_12ox8_214 {
  cursor: grab;
}
._leaderCard_12ox8_208._draggable_12ox8_214:active {
  cursor: grabbing;
}
._leaderCard_12ox8_208._position0_12ox8_220 {
  top: 0;
  left: 0;
  z-index: 3;
  transform: rotate(-2deg);
}
._leaderCard_12ox8_208._position1_12ox8_226 {
  top: 4px;
  left: 4px;
  z-index: 2;
  transform: rotate(1deg);
}
._leaderCard_12ox8_208._position2_12ox8_232 {
  top: 8px;
  left: 8px;
  z-index: 1;
  transform: rotate(-1deg);
}
._leaderCard_12ox8_208._removing_12ox8_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_u9jbv_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_u9jbv_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_u9jbv_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_u9jbv_212 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 400px;
  text-align: center;
}

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

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

._button_u9jbv_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_u9jbv_236:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
  transform: translateY(-1px);
}
._button_u9jbv_236:active {
  transform: translateY(0);
}
._button_u9jbv_236 ._icon_u9jbv_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_8zj25_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_8zj25_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_8zj25_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_8zj25_201 ._historyHeader_8zj25_214 {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 h2 {
  color: var(--clrTextPrimary);
  font-size: 20px;
  margin: 0;
  animation: _fadeIn_8zj25_1 0.3s ease-out;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_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_8zj25_1 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: right center;
  box-sizing: border-box;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_229 ._searchIconInside_8zj25_245 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  flex-shrink: 0;
  animation: _fadeInIcon_8zj25_1 0.3s ease-out 0.1s forwards;
  opacity: 0;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_229 ._searchInput_8zj25_253 {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--clrTextPrimary);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 0;
  animation: _fadeInInput_8zj25_1 0.3s ease-out 0.15s forwards;
  opacity: 0;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_229 ._searchInput_8zj25_253::placeholder {
  color: var(--clrTextTertiary);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_229 ._closeSearchBtn_8zj25_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_8zj25_1 0.3s ease-out 0.2s forwards;
  opacity: 0;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_229 ._closeSearchBtn_8zj25_268 ._closeIcon_8zj25_282 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._searchContainer_8zj25_229 ._closeSearchBtn_8zj25_268:hover ._closeIcon_8zj25_282 {
  color: var(--clrTextPrimary);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  animation: _fadeIn_8zj25_1 0.3s ease-out;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._searchBtn_8zj25_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_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._searchBtn_8zj25_298 ._searchIcon_8zj25_245 {
  width: 18px;
  height: 18px;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._searchBtn_8zj25_298:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._searchBtn_8zj25_298:active {
  transform: scale(0.95);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 {
  position: relative;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterBtn_8zj25_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_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterBtn_8zj25_325 ._filterIcon_8zj25_339 {
  width: 18px;
  height: 18px;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterBtn_8zj25_325 ._chevronIcon_8zj25_343 {
  width: 14px;
  height: 14px;
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterBtn_8zj25_325:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterDropdown_8zj25_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_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterDropdown_8zj25_350 ._filterOption_8zj25_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_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterDropdown_8zj25_350 ._filterOption_8zj25_367:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._filterContainer_8zj25_322 ._filterDropdown_8zj25_350 ._filterOption_8zj25_367._active_8zj25_383 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-100);
}
._historyContainer_8zj25_201 ._historyHeader_8zj25_214 ._headerActions_8zj25_290 ._editModeBtn_8zj25_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_8zj25_201 h2 {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--clrAccent-100);
}
._historyContainer_8zj25_201 p {
  color: var(--clrAccent-100);
  opacity: 0.7;
}
._historyContainer_8zj25_201 ._loadMoreTrigger_8zj25_408 {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}
._historyContainer_8zj25_201 ._loadMoreTrigger_8zj25_408 ._smallLoader_8zj25_418 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}
._historyContainer_8zj25_201 ._loadMoreTrigger_8zj25_408 ._smallLoader_8zj25_418 ._spinner_8zj25_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_8zj25_426 0.8s linear infinite;
}

@keyframes _spin_8zj25_426 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _expandSearch_8zj25_1 {
  from {
    transform: scaleX(0.8);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes _fadeInIcon_8zj25_1 {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _fadeInInput_8zj25_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeIn_8zj25_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_1dzlq_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_1dzlq_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1dzlq_201 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_1dzlq_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_1dzlq_218 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_1dzlq_218 ._logo_1dzlq_218 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_1dzlq_218 ._appName_1dzlq_230 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_1dzlq_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_1dzlq_236:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

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

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

@media (max-width: 768px) {
  ._header_1dzlq_207 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_1dzlq_218 ._logo_1dzlq_218 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_1dzlq_218 ._appName_1dzlq_230 {
    font-size: 20px;
  }
  ._backButton_1dzlq_236 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_1dzlq_201 {
    padding: 80px 20px;
  }
  ._pageContainer_1dzlq_201 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_1dzlq_259 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_1dzlq_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_sud32_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_sud32_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_sud32_201 {
  max-width: 900px;
  margin: 0 auto;
  padding: 128px 24px;
}

._header_sud32_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_sud32_218 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._logoSection_sud32_218 ._logo_sud32_218 {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
._logoSection_sud32_218 ._appName_sud32_230 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

._backButton_sud32_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_sud32_236:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

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

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

@media (max-width: 768px) {
  ._header_sud32_207 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_sud32_218 ._logo_sud32_218 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_sud32_218 ._appName_sud32_230 {
    font-size: 20px;
  }
  ._backButton_sud32_236 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_sud32_201 {
    padding: 80px 20px;
  }
  ._pageContainer_sud32_201 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_sud32_259 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_sud32_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_1momb_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_1momb_121 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1momb_202 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 16px;
  min-height: 100vh;
}

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

._migrationBtn_1momb_226 {
  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_1momb_226:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}
._migrationBtn_1momb_226:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

._loadingText_1momb_261 {
  color: var(--clrAccent-70);
  font-size: 16px;
}

._statsGrid_1momb_266 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

._statCard_1momb_273 {
  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_1momb_273:hover {
  border-color: var(--clrAccent-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._statIcon_1momb_292 {
  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_1momb_307 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

._statValue_1momb_315 {
  font-size: 32px;
  font-weight: 700;
  color: var(--clrAccent-100);
  line-height: 1;
}

._statLabel_1momb_322 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
}

._analyticsSection_1momb_328 {
  margin-bottom: 40px;
}

._analyticsToggle_1momb_332 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

._toggleBtn_1momb_341 {
  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_1momb_341:hover {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-100);
}
._toggleBtn_1momb_341._active_1momb_356 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._mainContent_1momb_362 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

._signupsSection_1momb_369 {
  width: 100%;
}

._signupsHeader_1momb_373 {
  margin-bottom: 20px;
}
._signupsHeader_1momb_373 h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}

._filterHint_1momb_383 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-style: italic;
}

._signupsGrid_1momb_389 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  min-height: 48px;
}

._signupCard_1momb_397 {
  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_1momb_397:hover {
  border-color: var(--clrAccent-50);
  transform: translateY(-2px);
}
._signupCard_1momb_397._active_1momb_356 {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
}
._signupCard_1momb_397._active_1momb_356 ._signupValue_1momb_419 {
  color: var(--clrAccent-100);
}

._signupValue_1momb_419 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  line-height: 1;
}

._signupLabel_1momb_430 {
  font-size: 12px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-align: center;
}

._signupDate_1momb_437 {
  font-size: 12px;
  color: var(--clrAccent-60);
  font-style: italic;
}

._usersSection_1momb_443 {
  width: 100%;
}

._usersHeader_1momb_447 {
  margin-bottom: 20px;
}
._usersHeader_1momb_447 h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}

._searchContainer_1momb_457 {
  position: relative;
  margin-bottom: 16px;
}

._searchIcon_1momb_462 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clrAccent-60);
  font-size: 18px;
  pointer-events: none;
  z-index: 1;
}

._searchInput_1momb_473 {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background-color: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
  border-radius: 8px;
  color: var(--clrPrimary);
  font-size: 16px;
  transition: all 0.2s ease;
}
._searchInput_1momb_473::placeholder {
  color: var(--clrAccent-50);
}
._searchInput_1momb_473:focus {
  outline: none;
  border-color: var(--clrAccent-100);
}

._usersList_1momb_491 {
  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_1momb_491::-webkit-scrollbar {
  width: 6px;
}
._usersList_1momb_491::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._usersList_1momb_491::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 3px;
}
._usersList_1momb_491::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-60);
}

._userRow_1momb_521 {
  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_1momb_521:hover {
  border-color: var(--clrAccent-100);
  transform: translateX(4px);
}

._userMainInfo_1momb_539 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

._userMetadata_1momb_549 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

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

._rank_1momb_567 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-70);
  margin-right: 8px;
  min-width: 30px;
  flex-shrink: 0;
}

._tournamentCount_1momb_576 {
  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;
}

._premiumBadge_1momb_586 {
  color: #fbbf24;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}

._pirateBadge_1momb_597 {
  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_1momb_609 {
  font-size: 13px;
  color: var(--clrAccent-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._signupDate_1momb_437 {
  font-size: 12px;
  color: var(--clrAccent-60);
  white-space: nowrap;
}

._noResults_1momb_623 {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px;
  color: var(--clrAccent-60);
  font-size: 16px;
  font-style: italic;
}

@media (max-width: 768px) {
  ._adminDashboard_1momb_202 {
    padding: 80px 16px;
  }
  ._header_1momb_210 h1 {
    font-size: 24px;
  }
  ._statsGrid_1momb_266 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
  ._statCard_1momb_273 {
    padding: 20px;
  }
  ._statIcon_1momb_292 {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  ._statValue_1momb_315 {
    font-size: 28px;
  }
  ._mainContent_1momb_362 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  ._signupsSection_1momb_369 h2 {
    font-size: 18px;
  }
  ._usersHeader_1momb_447 h2 {
    font-size: 18px;
  }
  ._signupsGrid_1momb_389 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  ._signupCard_1momb_397 {
    padding: 14px;
  }
  ._signupValue_1momb_419 {
    font-size: 24px;
  }
  ._signupLabel_1momb_430 {
    font-size: 12px;
  }
  ._userRow_1momb_521 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  ._userMetadata_1momb_549 {
    width: 100%;
    justify-content: flex-start;
  }
}
._modalOverlay_1momb_688 {
  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_1momb_688 {
  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_1momb_721 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--clrAccent-30);
}
._modalHeader_1momb_721 h2 {
  color: var(--clrAccent-100);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

._closeButton_1momb_737 {
  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_1momb_737:hover {
  color: var(--clrAccent-100);
}

._modalSearchContainer_1momb_758 {
  position: relative;
  padding: 20px 24px;
  border-bottom: 1px solid var(--clrAccent-30);
}

._searchIcon_1momb_462 {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clrAccent-60);
  font-size: 18px;
}

._modalSearchInput_1momb_773 {
  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_1momb_773:focus {
  outline: none;
  border-color: var(--clrAccent-50);
  background-color: var(--clrTertiary);
}
._modalSearchInput_1momb_773::placeholder {
  color: var(--clrAccent-50);
}

._modalUsersList_1momb_792 {
  overflow-y: auto;
  flex: 1;
  padding: 16px 24px;
}

._modalUserRow_1momb_798 {
  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_1momb_798:hover {
  border-color: var(--clrAccent-50);
  transform: translateX(4px);
  background-color: var(--clrTertiary);
}
._modalUserRow_1momb_798 ._userMainInfo_1momb_539 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
._modalUserRow_1momb_798 ._username_1momb_558 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._modalUserRow_1momb_798 ._userEmail_1momb_609 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modalUserRow_1momb_798 ._premiumBadge_1momb_586 {
  color: #fbbf24;
  font-size: 14px;
}

._noResults_1momb_623 {
  text-align: center;
  padding: 48px 24px;
  color: var(--clrAccent-60);
  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_42gjf_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_42gjf_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_42gjf_201 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

._title_42gjf_209 {
  color: var(--clrAccent-100);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-align: center;
}

._chartContainer_42gjf_217 {
  width: 100%;
  height: 300px;
}
._chartContainer_42gjf_217 ._recharts-cartesian-grid-horizontal_42gjf_221 line,
._chartContainer_42gjf_217 ._recharts-cartesian-grid-vertical_42gjf_222 line {
  stroke: var(--clrAccent-30);
}
._chartContainer_42gjf_217 ._recharts-text_42gjf_225,
._chartContainer_42gjf_217 ._recharts-label_42gjf_226,
._chartContainer_42gjf_217 ._recharts-cartesian-axis-tick_42gjf_227,
._chartContainer_42gjf_217 ._recharts-cartesian-axis-tick-value_42gjf_228 {
  fill: var(--clrAccent-100) !important;
  color: var(--clrAccent-100) !important;
}
._chartContainer_42gjf_217 ._recharts-xAxis_42gjf_232 ._recharts-text_42gjf_225,
._chartContainer_42gjf_217 ._recharts-yAxis_42gjf_233 ._recharts-text_42gjf_225 {
  fill: var(--clrAccent-100) !important;
}
._chartContainer_42gjf_217 ._recharts-legend-item_42gjf_236 ._recharts-legend-item-text_42gjf_236 {
  color: var(--clrAccent-100) !important;
}

._tooltip_42gjf_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_42gjf_248 {
  color: var(--clrAccent-100);
  font-weight: 600;
  margin: 0 0 8px 0;
  font-size: 14px;
}

._tooltipSignups_42gjf_255,
._tooltipPremium_42gjf_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_42gjf_267 {
  color: #3b82f6;
  font-size: 16px;
  line-height: 1;
}

._premiumColor_42gjf_273 {
  color: #fbbf24;
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 768px) {
  ._analyticsContainer_42gjf_201 {
    padding: 16px;
  }
  ._title_42gjf_209 {
    font-size: 18px;
  }
  ._chartContainer_42gjf_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_ysixn_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_ysixn_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_ysixn_201 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

._header_ysixn_209 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

._title_ysixn_218 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

._stats_ysixn_228 {
  display: flex;
  gap: 24px;
}

._stat_ysixn_228 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._statValue_ysixn_239 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

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

._loading_ysixn_252 {
  text-align: center;
  color: var(--clrAccent-70);
  padding: 40px 0;
}

._sortButtons_ysixn_258 {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._sortButton_ysixn_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_ysixn_258:hover {
  background: var(--clrAccent-10);
  border-color: var(--clrAccent-50);
}
._sortButton_ysixn_258._active_ysixn_283 {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._tableContainer_ysixn_289 {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
}

._table_ysixn_289 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._table_ysixn_289 thead {
  background: var(--clrBG-secondary);
}
._table_ysixn_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_ysixn_289 tbody tr {
  border-bottom: 1px solid var(--clrAccent-10);
  transition: background 0.2s ease;
}
._table_ysixn_289 tbody tr:hover {
  background: var(--clrBG-secondary);
}
._table_ysixn_289 tbody tr._topThree_ysixn_321 {
  font-weight: 600;
}
._table_ysixn_289 tbody td {
  padding: 12px 16px;
  color: var(--clrAccent-100);
  white-space: nowrap;
}

._rank_ysixn_330 {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

._goldBadge_ysixn_337,
._silverBadge_ysixn_338,
._bronzeBadge_ysixn_339 {
  font-size: 16px;
}

._deckName_ysixn_343 {
  font-weight: 500;
  max-width: 300px;
}

._deckNameCell_ysixn_348 {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}
._deckNameCell_ysixn_348 span {
  overflow: hidden;
  text-overflow: ellipsis;
}

._positive_ysixn_360 {
  color: var(--clrSuccess-100) !important;
  font-weight: 600;
}

._negative_ysixn_365 {
  color: var(--clrError-100) !important;
  font-weight: 600;
}

._highlight_ysixn_370 {
  background: rgba(var(--clrSuccess-100), 0.1);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._container_ysixn_201 {
    padding: 16px;
  }
  ._header_ysixn_209 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._stats_ysixn_228 {
    width: 100%;
    justify-content: space-around;
  }
  ._sortButtons_ysixn_258 {
    width: 100%;
  }
  ._sortButtons_ysixn_258 ._sortButton_ysixn_258 {
    flex: 1;
    min-width: 150px;
    justify-content: center;
  }
  ._table_ysixn_289 {
    font-size: 12px;
  }
  ._table_ysixn_289 thead th,
  ._table_ysixn_289 tbody td {
    padding: 8px 12px;
  }
  ._deckName_ysixn_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_1perb_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_1perb_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1perb_201 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

._header_1perb_209 {
  margin-bottom: 24px;
}

._titleRow_1perb_213 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 16px;
}

._title_1perb_213 {
  font-size: 20px;
  font-weight: 700;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

._setSelect_1perb_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_1perb_232:hover {
  border-color: var(--clrAccent-60);
}
._setSelect_1perb_232:focus {
  outline: none;
  border-color: var(--clrAccent-100);
}
._setSelect_1perb_232 option {
  background: var(--clrSecondary);
  color: var(--clrAccent-100);
}

._editButton_1perb_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_1perb_256:hover {
  background: var(--clrAccent-10);
  border-color: var(--clrAccent-50);
}

._editForm_1perb_275 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

._seasonInput_1perb_282,
._dateInput_1perb_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_1perb_282:focus,
._dateInput_1perb_283:focus {
  outline: none;
  border-color: var(--clrAccent-50);
}

._saveButton_1perb_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_1perb_297:hover {
  opacity: 90%;
}

._cancelButton_1perb_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_1perb_315:hover {
  background: var(--clrBG-secondary);
}

._seasonInfo_1perb_333 {
  font-size: 14px;
  color: var(--clrAccent-70);
  margin-bottom: 16px;
}

._stats_1perb_339 {
  display: flex;
  gap: 24px;
}

._stat_1perb_339 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._statValue_1perb_350 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrAccent-100);
}

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

._loading_1perb_363 {
  text-align: center;
  color: var(--clrAccent-70);
  padding: 40px 0;
}

._sortButtons_1perb_369 {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

._sortButton_1perb_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_1perb_369:hover {
  background: var(--clrAccent-10);
  border-color: var(--clrAccent-50);
}
._sortButton_1perb_369._active_1perb_391 {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._tableContainer_1perb_397 {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
}

._table_1perb_397 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
._table_1perb_397 thead {
  background: var(--clrBG-secondary);
}
._table_1perb_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_1perb_397 tbody tr {
  border-bottom: 1px solid var(--clrAccent-10);
  transition: background 0.2s ease;
}
._table_1perb_397 tbody tr:hover {
  background: var(--clrBG-secondary);
}
._table_1perb_397 tbody tr._topThree_1perb_429 {
  font-weight: 600;
}
._table_1perb_397 tbody td {
  padding: 12px 16px;
  color: var(--clrAccent-100);
  white-space: nowrap;
}

._rank_1perb_438 {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

._goldBadge_1perb_445,
._silverBadge_1perb_446,
._bronzeBadge_1perb_447 {
  font-size: 16px;
}

._deckName_1perb_451 {
  font-weight: 500;
  max-width: 300px;
}

._deckNameCell_1perb_456 {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}
._deckNameCell_1perb_456 span {
  overflow: hidden;
  text-overflow: ellipsis;
}

._positive_1perb_468 {
  color: var(--clrSuccess-100) !important;
  font-weight: 600;
}

._negative_1perb_473 {
  color: var(--clrError-100) !important;
  font-weight: 600;
}

._highlight_1perb_478 {
  background: rgba(var(--clrSuccess-100), 0.1);
  font-weight: 600;
}

@media (max-width: 768px) {
  ._container_1perb_201 {
    padding: 16px;
  }
  ._titleRow_1perb_213 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._editForm_1perb_275 {
    width: 100%;
  }
  ._editForm_1perb_275 ._seasonInput_1perb_282,
  ._editForm_1perb_275 ._dateInput_1perb_283 {
    flex: 1;
  }
  ._stats_1perb_339 {
    width: 100%;
    justify-content: space-around;
  }
  ._sortButtons_1perb_369 {
    width: 100%;
  }
  ._sortButtons_1perb_369 ._sortButton_1perb_369 {
    flex: 1;
    min-width: 150px;
    justify-content: center;
  }
  ._table_1perb_397 {
    font-size: 12px;
  }
  ._table_1perb_397 thead th,
  ._table_1perb_397 tbody td {
    padding: 8px 12px;
  }
  ._deckName_1perb_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_125ni_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_125ni_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_125ni_201 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 16px;
  min-height: 100vh;
}

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

._loadingText_125ni_219 {
  color: var(--clrAccent-70);
  font-size: 16px;
}

._backButton_125ni_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_125ni_224:hover {
  background-color: var(--clrSecondary);
  border-color: var(--clrAccent-100);
}

._userHeader_125ni_246 {
  margin-bottom: 32px;
}

._userTitleSection_125ni_250 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
._userTitleSection_125ni_250 h1 {
  color: var(--clrAccent-100);
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

._premiumBadge_125ni_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_125ni_280 {
  font-size: 16px;
  color: var(--clrAccent-60);
}

._actionsSection_125ni_285 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

._actionBtn_125ni_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_125ni_295:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._premiumBtn_125ni_315 {
  background-color: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
._premiumBtn_125ni_315:hover:not(:disabled) {
  background-color: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
}

._deleteBtn_125ni_325 {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
._deleteBtn_125ni_325:hover:not(:disabled) {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

._buttonSpinner_125ni_335 {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: _rotation_125ni_1 1s linear infinite;
}

@keyframes _rotation_125ni_1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._profileDataSection_125ni_354 {
  margin-bottom: 40px;
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 24px;
}

._sectionHeader_125ni_362 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}
._sectionHeader_125ni_362 h2 {
  color: var(--clrAccent-100);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

._editBtn_125ni_378 {
  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_125ni_378:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
}

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

._saveBtn_125ni_407 {
  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_125ni_407:hover:not(:disabled) {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}
._saveBtn_125ni_407:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._cancelBtn_125ni_432 {
  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_125ni_432:hover:not(:disabled) {
  background-color: var(--clrSecondary);
  border-color: var(--clrAccent-50);
}
._cancelBtn_125ni_432:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._profileFields_125ni_457 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

._profileField_125ni_457 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}

._fieldLabel_125ni_471 {
  font-size: 12px;
  font-weight: 600;
  color: var(--clrAccent-60);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._fieldValue_125ni_479 {
  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_125ni_492 {
  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_125ni_492:focus {
  outline: none;
  border-color: var(--clrAccent-100);
  background-color: var(--clrSecondary);
}

._statsSection_125ni_510 {
  margin-bottom: 40px;
}
._statsSection_125ni_510 h2 {
  color: var(--clrAccent-100);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

._statsGrid_125ni_520 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

._statCard_125ni_526 {
  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_125ni_526:hover {
  border-color: var(--clrAccent-50);
}

._statValue_125ni_543 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  line-height: 1;
}

._statLabel_125ni_550 {
  font-size: 13px;
  color: var(--clrAccent-60);
  font-weight: 500;
}

._tournamentsSection_125ni_556 h2 {
  color: var(--clrAccent-100);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

._noTournaments_125ni_563 {
  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_125ni_574 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

._tournamentCard_125ni_580 {
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}
._tournamentCard_125ni_580:hover {
  border-color: var(--clrAccent-50);
  transform: translateY(-2px);
}

._tournamentHeader_125ni_592 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
._tournamentHeader_125ni_592 h3 {
  color: var(--clrAccent-100);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

._finishedBadge_125ni_608 {
  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_125ni_619 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

._detail_125ni_627 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 14px;
}

._detailLabel_125ni_636 {
  color: var(--clrAccent-60);
  font-weight: 500;
  min-width: 70px;
}

._detailValue_125ni_642 {
  color: var(--clrAccent-100);
  font-weight: 600;
}

._modalOverlay_125ni_647 {
  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_125ni_647 {
  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_125ni_647 h3 {
  margin: 0;
  color: var(--clrAccent-100);
  font-size: 20px;
}
._modal_125ni_647 p {
  margin: 0;
  color: var(--clrAccent-70);
  font-size: 15px;
  line-height: 1.5;
}
._modal_125ni_647 p strong {
  color: var(--clrAccent-100);
}

._modalActions_125ni_683 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

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

._cancelBtn_125ni_432 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._cancelBtn_125ni_432:hover:not(:disabled) {
  background-color: var(--clrAccent-30);
}

._confirmDeleteBtn_125ni_691 {
  background-color: #ef4444;
  color: white;
}
._confirmDeleteBtn_125ni_691:hover:not(:disabled) {
  background-color: #dc2626;
}

@media (max-width: 768px) {
  ._adminUserDetail_125ni_201 {
    padding: 80px 16px;
  }
  ._userTitleSection_125ni_250 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._userTitleSection_125ni_250 h1 {
    font-size: 24px;
  }
  ._actionsSection_125ni_285 {
    flex-direction: column;
    align-items: stretch;
  }
  ._actionsSection_125ni_285 ._actionBtn_125ni_295 {
    width: 100%;
  }
  ._statsGrid_125ni_520 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  ._statCard_125ni_526 {
    padding: 16px;
  }
  ._statValue_125ni_543 {
    font-size: 24px;
  }
  ._tournamentsList_125ni_574 {
    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_1ege2_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_1ege2_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1ege2_201 {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 14px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  ._container_1ege2_201 {
    padding: 14px;
    padding-top: 32px;
  }
}
._container_1ege2_201 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-top) + 16px);
}

._stickyHeader_1ege2_218 {
  position: sticky;
  top: 84px;
  z-index: 100;
  background: var(--clrBG-primary);
  margin-top: -14px;
}
@media (max-width: 768px) {
  ._stickyHeader_1ege2_218 {
    top: 84px;
  }
}

._backButton_1ege2_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_1ege2_231:hover {
  background: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrPrimary);
  transform: translateX(-4px);
}

._header_1ege2_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_1ege2_253 {
    flex-direction: row;
    gap: 16px;
    padding: 12px;
  }
}

._deckImage_1ege2_273 {
  width: 120px;
  height: 168px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  ._deckImage_1ege2_273 {
    width: 100px;
    height: 140px;
  }
}

._deckInfo_1ege2_287 {
  flex: 1;
}
._deckInfo_1ege2_287 h1 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--clrAccent-100);
}
@media (max-width: 768px) {
  ._deckInfo_1ege2_287 h1 {
    font-size: 14px;
  }
}
._deckInfo_1ege2_287 p {
  font-size: 14px;
  color: var(--clrAccent-100);
  margin: 0;
}

._statsGrid_1ege2_306 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 16px;
}
@media (max-width: 768px) {
  ._statsGrid_1ege2_306 {
    gap: 8px;
  }
}

._statCard_1ege2_319 {
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-30);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  transition: all 0.2s ease;
}
._statCard_1ege2_319:hover {
  border-color: var(--clrAccent-30);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--clrAccent-30), 0.1);
}
._statCard_1ege2_319 ._label_1ege2_332 {
  font-size: 12px;
  color: var(--clrAccent-100);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._statCard_1ege2_319 ._value_1ege2_338 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 8px 0;
}
@media (max-width: 768px) {
  ._statCard_1ege2_319 ._value_1ege2_338 {
    font-size: 14px;
  }
}
._statCard_1ege2_319 ._subValue_1ege2_349 {
  font-size: 8px;
  color: var(--clrAccent-100);
}
._statCard_1ege2_319._positive_1ege2_353 {
  background: rgba(var(--clrSuccess-100), 0.1);
  border-color: rgba(var(--clrSuccess-100), 0.3);
}
._statCard_1ege2_319._positive_1ege2_353 ._value_1ege2_338 {
  color: var(--clrSuccess-100);
}
._statCard_1ege2_319._negative_1ege2_360 {
  background: rgba(var(--clrError-100), 0.1);
  border-color: rgba(var(--clrError-100), 0.3);
}
._statCard_1ege2_319._negative_1ege2_360 ._value_1ege2_338 {
  color: var(--clrError-100);
}

._matchupsSection_1ege2_368 h2 {
  font-size: 14px;
  margin: 0 0 14px 0;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

._matchupCard_1ege2_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_1ege2_383:hover {
  border-color: var(--clrAccent-30);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  ._matchupCard_1ege2_383 {
    gap: 12px;
  }
}

._matchupDeck_1ege2_406 {
  font-size: 14px;
  font-weight: 500;
  color: var(--clrAccent-100);
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  ._matchupDeck_1ege2_406 {
    font-size: 13px;
  }
}

._matchupWinRate_1ege2_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_1ege2_419 {
    padding: 6px 12px;
  }
}

._matchupSubStats_1ege2_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_1ege2_436 > div:first-child {
  padding-bottom: 4px;
}
._matchupSubStats_1ege2_436 > div:last-child {
  padding-top: 4px;
  border-top: 1px solid var(--clrAccent-30);
}
@media (max-width: 768px) {
  ._matchupSubStats_1ege2_436 {
    font-size: 11px;
    padding: 6px 12px;
  }
}

._winRate_1ege2_464 {
  font-size: 14px;
  font-weight: 700;
}
._winRate_1ege2_464._positive_1ege2_353 {
  color: var(--clrSuccess-100);
}
._winRate_1ege2_464._negative_1ege2_360 {
  color: var(--clrError-100);
}
._winRate_1ege2_464._neutral_1ege2_474 {
  color: var(--clrAccent-100);
}

._record_1ege2_478 {
  font-size: 11px;
  color: var(--clrAccent-70);
}

._noData_1ege2_483 {
  text-align: center;
  padding: 24px 14px;
  color: var(--clrAccent-100);
  font-size: 14px;
}

._loader_1ege2_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_d6ax5_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_d6ax5_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_d6ax5_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_d6ax5_1 0.3s ease-out;
}
@media (max-width: 600px) {
  ._installPrompt_d6ax5_201 {
    width: calc(100vw - 32px);
    bottom: 80px;
  }
}
._installPrompt_d6ax5_201 ._closeBtn_d6ax5_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_d6ax5_201 ._closeBtn_d6ax5_222:hover {
  color: var(--clrAccent-100);
}
._installPrompt_d6ax5_201 ._closeBtn_d6ax5_222 svg {
  width: 20px;
  height: 20px;
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-right: 24px;
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 ._icon_d6ax5_253 {
  width: 40px;
  height: 40px;
  color: var(--clrAccent-100);
  flex-shrink: 0;
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 ._text_d6ax5_259 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 ._text_d6ax5_259 ._title_d6ax5_267 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 ._text_d6ax5_259 ._description_d6ax5_272 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 ._installBtn_d6ax5_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_d6ax5_201 ._content_d6ax5_245 ._installBtn_d6ax5_277:hover {
  background-color: var(--clrAccent-80);
  transform: translateY(-1px);
}
._installPrompt_d6ax5_201 ._content_d6ax5_245 ._installBtn_d6ax5_277:active {
  transform: translateY(0);
}

@keyframes _slideUp_d6ax5_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_1jkr2_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_1jkr2_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1jkr2_201 {
  width: 100%;
  min-height: 100%;
}

._fadeOut_1jkr2_206 {
  animation: _swipeOut_1jkr2_1 0.2s ease-in-out forwards;
}

._fadeIn_1jkr2_210 {
  animation: _swipeIn_1jkr2_1 0.3s ease-in-out forwards;
}

@keyframes _swipeOut_1jkr2_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
@keyframes _swipeIn_1jkr2_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: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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;
}

* {
  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%;
}

#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_17m1p_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_17m1p_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_17m1p_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_17m1p_201 {
    padding: 0;
  }
}
._navigationBar_17m1p_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_17m1p_60 ._navigationBar_17m1p_201::before, ._themePastelLight_17m1p_233 ._navigationBar_17m1p_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_17m1p_120 ._navigationBar_17m1p_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_17m1p_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_17m1p_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_17m1p_201 ._logoContainer_17m1p_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_17m1p_201 ._logoContainer_17m1p_269 img {
  height: 70%;
}
._navigationBar_17m1p_201 ._userSection_17m1p_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_17m1p_201 button._logoutBtn_17m1p_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_17m1p_201 button._logoutBtn_17m1p_294:hover {
  opacity: 0.7;
}

._guestBadge_17m1p_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_kfxr6_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_kfxr6_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_kfxr6_201 {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 16px;
  color: var(--clrAccent-100);
  min-height: calc(100dvh - 60px - 80px);
}
._tournamentPage_kfxr6_201 h2 {
  margin-bottom: 4px;
}
._tournamentPage_kfxr6_201 ._statusMessage_kfxr6_212 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin-top: 16px;
}
._tournamentPage_kfxr6_201 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}

._header_kfxr6_222 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
._header_kfxr6_222 ._headerImage_kfxr6_230 {
  width: 128px;
  height: 128px;
  border-radius: 8px;
}
._header_kfxr6_222 ._headerImage_kfxr6_230 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
._header_kfxr6_222 ._headerInfo_kfxr6_241 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: space-between;
  gap: 8px;
}
._header_kfxr6_222 ._headerInfo_kfxr6_241 ._headerTitle_kfxr6_249 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}
._header_kfxr6_222 ._headerInfo_kfxr6_241 ._headerTitle_kfxr6_249 h2 {
  font-size: 24px;
  line-height: 18px;
  margin: 0;
  padding: 0;
}
._header_kfxr6_222 ._headerInfo_kfxr6_241 ._chips_kfxr6_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_kfxr6_222 ._headerInfo_kfxr6_241 ._secondaryInfo_kfxr6_274 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._header_kfxr6_222 ._headerActions_kfxr6_278 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._roundForm_kfxr6_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_kfxr6_284 ._formGroup_kfxr6_295 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._searchInput_kfxr6_307 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._searchInput_kfxr6_307::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 {
  width: 100%;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-30) var(--clrTertiary);
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319::-webkit-scrollbar {
  height: 6px;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319::-webkit-scrollbar-thumb {
  background: var(--clrAccent-100);
  border-radius: 3px;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_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_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339._selected_kfxr6_356 {
  border-color: #5cb85c;
  box-shadow: 0 0 10px rgba(92, 184, 92, 0.5);
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339 ._leaderImage_kfxr6_360 {
  width: 100%;
  height: 92px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339 ._leaderImage_kfxr6_360 img {
  width: 100%;
  object-fit: cover;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339 ._leaderImage_kfxr6_360 ._imagePlaceholder_kfxr6_370 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339 ._leaderInfo_kfxr6_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_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339 ._leaderInfo_kfxr6_380 ._leaderName_kfxr6_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_kfxr6_284 ._formGroup_kfxr6_295 ._leaderCarousel_kfxr6_319 ._leaderCard_kfxr6_339 ._leaderInfo_kfxr6_380 ._leaderSet_kfxr6_403 {
  font-size: 10px;
  color: var(--clrAccent-100);
  opacity: 0.7;
  text-align: center;
  line-height: 1;
}
._roundForm_kfxr6_284 ._formGroup_kfxr6_295 ._noResults_kfxr6_410 {
  width: 100%;
  text-align: center;
  color: var(--clrAccent-100);
  opacity: 0.7;
  font-size: 14px;
  padding: 20px;
  font-style: italic;
}

._modalOverlay_kfxr6_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_kfxr6_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_kfxr6_420 h3 {
  margin: 0;
}
._modal_kfxr6_420 ._modalDescription_kfxr6_445 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_kfxr6_420 ._modalField_kfxr6_450 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_kfxr6_420 ._modalInput_kfxr6_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_kfxr6_420 ._modalActions_kfxr6_466 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._modal_kfxr6_420 ._modalCancelBtn_kfxr6_472,
._modal_kfxr6_420 ._modalSaveBtn_kfxr6_473 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modal_kfxr6_420 ._modalCancelBtn_kfxr6_472:disabled,
._modal_kfxr6_420 ._modalSaveBtn_kfxr6_473:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._modal_kfxr6_420 ._modalCancelBtn_kfxr6_472 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._modal_kfxr6_420 ._modalSaveBtn_kfxr6_473 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._modal_kfxr6_420 ._modalDeleteBtn_kfxr6_494 {
  background-color: #dc3545;
  color: white;
}
._modal_kfxr6_420 ._modalDeleteBtn_kfxr6_494:hover:not(:disabled) {
  background-color: #c82333;
}
._modal_kfxr6_420 ._modalError_kfxr6_501 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}

._toggleRow_kfxr6_507 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_kfxr6_507 {
    flex-direction: row;
    justify-content: space-between;
  }
}

._toggleGroup_kfxr6_522 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._toggleGroup_kfxr6_522 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._toggleGroup_kfxr6_522 ._toggleOptions_kfxr6_534 {
  display: flex;
  gap: 8px;
}
._toggleGroup_kfxr6_522 ._toggleBtn_kfxr6_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_kfxr6_522 ._toggleBtn_kfxr6_538._active_kfxr6_549 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

._saveRoundBtn_kfxr6_555 {
  padding: 14px 24px;
  background-color: #5cb85c;
  color: var(--clrAccent-100);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
._saveRoundBtn_kfxr6_555:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._formMessage_kfxr6_569 {
  font-size: 14px;
}

._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 h3 {
  margin: 0;
}
._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 ._roundsHeaderActions_kfxr6_584 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 ._exportBtn_kfxr6_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_kfxr6_573 ._roundsHeader_kfxr6_573 ._exportBtn_kfxr6_591:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 ._exportBtn_kfxr6_591:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 ._editModeBtn_kfxr6_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_kfxr6_573 ._roundsHeader_kfxr6_573 ._editModeBtn_kfxr6_617:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_kfxr6_573 ._roundsHeader_kfxr6_573 ._editModeBtn_kfxr6_617:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_kfxr6_573 ._roundList_kfxr6_644 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}

._exportContainer_kfxr6_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_kfxr6_652 ._exportHeader_kfxr6_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_kfxr6_652 ._exportHeader_kfxr6_665 h2 {
  margin: 0;
  font-size: 32px;
  color: var(--clrAccent-100);
}
._exportContainer_kfxr6_652 ._exportHeader_kfxr6_665 ._exportStats_kfxr6_679 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportContainer_kfxr6_652 ._exportRoundList_kfxr6_684 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
._exportContainer_kfxr6_652 ._roundCard_kfxr6_693 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 12px 16px;
}
._exportContainer_kfxr6_652 ._roundCard_kfxr6_693 ._roundMeta_kfxr6_698 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._actionsSection_kfxr6_706 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
}
._actionsSection_kfxr6_706 ._addRoundButton_kfxr6_714 {
  width: 100%;
  display: block;
}
._actionsSection_kfxr6_706 ._addRoundButton_kfxr6_714 .inner-content {
  width: 100%;
}
._actionsSection_kfxr6_706 ._actionButtons_kfxr6_721 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._actionsSection_kfxr6_706 ._actionButtons_kfxr6_721 ._finishBtn_kfxr6_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_kfxr6_706 ._actionButtons_kfxr6_721 ._finishBtn_kfxr6_729:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  background-color: var(--clrAccent-100);
}
._actionsSection_kfxr6_706 ._actionButtons_kfxr6_721 ._finishBtn_kfxr6_729:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_kfxr6_706 ._actionButtons_kfxr6_721 ._deleteBtn_kfxr6_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_kfxr6_706 ._actionButtons_kfxr6_721 ._deleteBtn_kfxr6_749:hover:not(:disabled) {
  background-color: #dc3545;
  color: white;
}
._actionsSection_kfxr6_706 ._actionButtons_kfxr6_721 ._deleteBtn_kfxr6_749:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_kfxr6_706 ._addRoundBtn_kfxr6_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_kfxr6_706 ._addRoundBtn_kfxr6_767:hover {
  opacity: 0.9;
}
._actionsSection_kfxr6_706 ._addRoundBtn_kfxr6_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_1baf1_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_1baf1_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1baf1_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_1baf1_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_1baf1_210._editable_1baf1_225 {
  cursor: pointer;
}
._container_1baf1_210._editable_1baf1_225:hover {
  border-color: var(--clrAccent-40);
}

._deleteBtn_1baf1_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_1baf1_232:hover {
  background-color: var(--clrError-50);
}
._deleteBtn_1baf1_232._visible_1baf1_254 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrError-100);
}

._editBtn_1baf1_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_1baf1_261:hover {
  background-color: var(--clrTertiary);
}
._editBtn_1baf1_261._visible_1baf1_254 {
  min-width: 48px;
  width: 48px;
  margin-left: 8px;
  border: 1px solid var(--clrAccent-30);
}

._roundNumber_1baf1_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_1baf1_304 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}

._roundInfoSection_1baf1_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_1baf1_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_1baf1_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_1baf1_348 {
  width: 14px;
  height: 14px;
  color: var(--clrAccent-40);
  transition: color 0.2s ease;
  flex-shrink: 0;
  margin-top: 1px;
}

._noteText_1baf1_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_1baf1_357._expanded_1baf1_373 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

._resultSection_1baf1_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_1baf1_379._win_1baf1_392 {
  background: var(--clrRoundWin);
}
._resultSection_1baf1_379._lose_1baf1_395 {
  background: var(--clrRoundLoss);
}

._separator_1baf1_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_1baf1_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_wadmk_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_wadmk_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_wadmk_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_wadmk_201._empty_wadmk_218 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
._chip_wadmk_201._win_wadmk_222 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccess-100);
  background-color: var(--clrSuccess-50);
}
._chip_wadmk_201._lose_wadmk_227 {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
  background-color: var(--clrError-50);
}
._chip_wadmk_201._diceWin_wadmk_232 {
  opacity: 1;
}
._chip_wadmk_201._diceLose_wadmk_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_1f26y_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_1f26y_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1f26y_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_1f26y_201 input {
  max-width: 100px;
}

._modalError_1f26y_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_gtrhp_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_gtrhp_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_gtrhp_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_gtrhp_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_gtrhp_201 h3 {
  margin: 0;
}

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

._modalActions_gtrhp_232 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

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

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

._modalDeleteBtn_gtrhp_240 {
  background-color: #dc3545;
  color: white;
}
._modalDeleteBtn_gtrhp_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_64r59_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_64r59_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_64r59_201 {
  width: min(420px, 100%);
}

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

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

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

._typeCarousel_64r59_236 {
  width: 100%;
}

._carouselWrapper_64r59_240 {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 768px) {
  ._editTournamentModal_64r59_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_c2zq1_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_c2zq1_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_c2zq1_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

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

._carouselWrapper_c2zq1_219 {
  width: 100%;
  overflow-x: hidden;
}

._roundTypeButton_c2zq1_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_c2zq1_224:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundTypeButton_c2zq1_224:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

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

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

._gameBtn_c2zq1_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_c2zq1_273:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._gameBtn_c2zq1_273:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._gameBtn_c2zq1_273._winSelected_c2zq1_291 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #16a34a;
}
._gameBtn_c2zq1_273._loseSelected_c2zq1_296 {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}

._overallResult_c2zq1_302 {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-80);
  font-size: 14px;
  text-align: center;
}
._overallResult_c2zq1_302 strong {
  color: var(--clrAccent-100);
}

._noteInput_c2zq1_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_c2zq1_314::placeholder {
  color: var(--clrAccent-30);
}
._noteInput_c2zq1_314:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._toggleRow_c2zq1_334 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  ._toggleRow_c2zq1_334 {
    flex-direction: row;
    justify-content: space-between;
  }
}

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

._singleToggleBtn_c2zq1_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_c2zq1_358 ._value_c2zq1_374 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._singleToggleBtn_c2zq1_358:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._singleToggleBtn_c2zq1_358:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
._singleToggleBtn_c2zq1_358._winResult_c2zq1_388 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._singleToggleBtn_c2zq1_358._winResult_c2zq1_388 ._value_c2zq1_374 {
  background-color: rgba(34, 197, 94, 0.25);
}
._singleToggleBtn_c2zq1_358._winResult_c2zq1_388:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._singleToggleBtn_c2zq1_358._loseResult_c2zq1_400 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._singleToggleBtn_c2zq1_358._loseResult_c2zq1_400 ._value_c2zq1_374 {
  background-color: rgba(239, 68, 68, 0.25);
}
._singleToggleBtn_c2zq1_358._loseResult_c2zq1_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_1ka5l_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_1ka5l_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1ka5l_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_1ka5l_201 > div:first-child {
  flex-shrink: 0;
}
._header_1ka5l_201 ._headerInfo_1ka5l_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_1ka5l_201 ._headerInfo_1ka5l_219 ._headerTitle_1ka5l_230 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._headerTitle_1ka5l_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_1ka5l_201 ._headerInfo_1ka5l_219 ._headerTitle_1ka5l_230 ._date_1ka5l_250 {
  font-size: 10px;
  font-weight: 300;
  color: var(--clrAccent-60);
  line-height: normal;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._chipsWrapper_1ka5l_256 {
  position: relative;
  width: 100%;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._chips_1ka5l_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_1ka5l_201 ._headerInfo_1ka5l_219 ._chips_1ka5l_256::-webkit-scrollbar {
  display: none;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._chips_1ka5l_256 {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._shadowLeft_1ka5l_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_1ka5l_201 ._headerInfo_1ka5l_219 ._shadowLeft_1ka5l_280._visible_1ka5l_292 {
  opacity: 1;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._shadowRight_1ka5l_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_1ka5l_201 ._headerInfo_1ka5l_219 ._shadowRight_1ka5l_295._visible_1ka5l_292 {
  opacity: 1;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._deckInfo_1ka5l_310 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._deckInfo_1ka5l_310 ._deckName_1ka5l_317 {
  font-size: 12px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: normal;
}
._themeDark_1ka5l_120 ._header_1ka5l_201 ._headerInfo_1ka5l_219 ._deckInfo_1ka5l_310 ._deckName_1ka5l_317 {
  color: rgba(198, 198, 198, 0.6);
}
._header_1ka5l_201 ._headerInfo_1ka5l_219 ._deckInfo_1ka5l_310 ._score_1ka5l_326 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  line-height: normal;
}
._header_1ka5l_201 ._editBtn_1ka5l_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_1vwtn_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_1vwtn_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1vwtn_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeOut_1vwtn_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
._roundForm_1vwtn_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_1vwtn_1 0.3s ease-in-out;
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 ._searchInput_1vwtn_242 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 ._searchInput_1vwtn_242::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 ._noteLabel_1vwtn_254 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 ._noteIcon_1vwtn_259 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 ._noteInput_1vwtn_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_1vwtn_217 ._formGroup_1vwtn_228 ._noteInput_1vwtn_264::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_1vwtn_217 ._formGroup_1vwtn_228 ._noteInput_1vwtn_264:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_1vwtn_217 ._leaderCarouselFormGroup_1vwtn_283 {
  overflow: hidden;
  min-width: 0;
}
._roundForm_1vwtn_217 ._toggleRow_1vwtn_287 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._roundForm_1vwtn_217 ._toggleRow_1vwtn_287 {
    flex-direction: row;
    justify-content: space-between;
  }
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._toggleOptions_1vwtn_313 {
  display: flex;
  gap: 8px;
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._toggleBtn_1vwtn_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_1vwtn_217 ._toggleGroup_1vwtn_301 ._toggleBtn_1vwtn_317._active_1vwtn_329 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_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_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334 ._value_1vwtn_350 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334:hover {
  border-color: var(--clrAccent-100);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334._winResult_1vwtn_360 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334._winResult_1vwtn_360 ._value_1vwtn_350 {
  background-color: rgba(34, 197, 94, 0.25);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334._winResult_1vwtn_360:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334._loseResult_1vwtn_372 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334._loseResult_1vwtn_372 ._value_1vwtn_350 {
  background-color: rgba(239, 68, 68, 0.25);
}
._roundForm_1vwtn_217 ._toggleGroup_1vwtn_301 ._singleToggleBtn_1vwtn_334._loseResult_1vwtn_372:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 label {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 600;
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 ._gameButtons_1vwtn_404 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 ._gameButtons_1vwtn_404 ._gameBtn_1vwtn_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_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 ._gameButtons_1vwtn_404 ._gameBtn_1vwtn_409:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 ._gameButtons_1vwtn_404 ._gameBtn_1vwtn_409:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 ._gameButtons_1vwtn_404 ._gameBtn_1vwtn_409._winSelected_1vwtn_426 {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}
._roundForm_1vwtn_217 ._topCutGames_1vwtn_384 ._gameResultGroup_1vwtn_392 ._gameButtons_1vwtn_404 ._gameBtn_1vwtn_409._loseSelected_1vwtn_431 {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}
._roundForm_1vwtn_217 ._formActions_1vwtn_436 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
._roundForm_1vwtn_217 ._formActions_1vwtn_436 ._cancelBtn_1vwtn_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_1vwtn_217 ._formActions_1vwtn_436 ._cancelBtn_1vwtn_445:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_1vwtn_217 ._formActions_1vwtn_436 ._cancelBtn_1vwtn_445:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_1vwtn_217 ._formActions_1vwtn_436 ._saveRoundBtn_1vwtn_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_1vwtn_217 ._formActions_1vwtn_436 ._saveRoundBtn_1vwtn_462:hover:not(:disabled) {
  background-color: #4cae4c;
}
._roundForm_1vwtn_217 ._formActions_1vwtn_436 ._saveRoundBtn_1vwtn_462:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_1vwtn_217 ._formMessage_1vwtn_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_sspde_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_sspde_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_sspde_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _slideInFromLeft_sspde_1 {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._stepContainer_sspde_221 {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

._selectionStep_sspde_231 {
  animation: _slideInFromLeft_sspde_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

._formStep_sspde_235 {
  animation: _slideInFromRight_sspde_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_1nuaj_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_1nuaj_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1nuaj_201 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

._container_1nuaj_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_1nuaj_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_1nuaj_239 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px 0;
  flex-shrink: 0;
}
._leaderImage_1nuaj_239 > div {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

._roundInfoSection_1nuaj_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_1nuaj_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_1nuaj_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_1nuaj_279._win_1nuaj_292 {
  background: var(--clrRoundWin);
}
._resultSection_1nuaj_279._lose_1nuaj_295 {
  background: var(--clrRoundLoss);
}

._separator_1nuaj_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_1nuaj_306 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 72px;
}

._chipCompact_1nuaj_315 {
  width: 16px;
  height: 16px;
  font-size: 7px;
}

._chipMedium_1nuaj_321 {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

._chipLarge_1nuaj_327 {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

._sizeMedium_1nuaj_333 ._container_1nuaj_210 {
  min-height: 56px;
}
._sizeMedium_1nuaj_333 ._resultSection_1nuaj_279 {
  min-height: 56px;
}
._sizeMedium_1nuaj_333 ._roundNumber_1nuaj_225 {
  min-width: 32px;
  font-size: 11px;
}
._sizeMedium_1nuaj_333 ._leaderName_1nuaj_266 {
  font-size: 12px;
}
._sizeMedium_1nuaj_333 ._leaderImage_1nuaj_239 > div {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
._sizeMedium_1nuaj_333 ._separator_1nuaj_299 {
  height: 30px;
}
._sizeMedium_1nuaj_333 ._chips_1nuaj_306 {
  gap: 5px;
}

._sizeLarge_1nuaj_358 ._container_1nuaj_210 {
  min-height: 68px;
}
._sizeLarge_1nuaj_358 ._resultSection_1nuaj_279 {
  min-height: 68px;
  min-width: 120px;
  padding-right: 10px;
}
._sizeLarge_1nuaj_358 ._roundNumber_1nuaj_225 {
  min-width: 32px;
  font-size: 13px;
}
._sizeLarge_1nuaj_358 ._roundInfoSection_1nuaj_254 {
  padding: 4px 8px;
}
._sizeLarge_1nuaj_358 ._leaderName_1nuaj_266 {
  font-size: 14px;
}
._sizeLarge_1nuaj_358 ._leaderImage_1nuaj_239 > div {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
._sizeLarge_1nuaj_358 ._separator_1nuaj_299 {
  height: 44px;
}
._sizeLarge_1nuaj_358 ._chips_1nuaj_306 {
  gap: 6px;
  min-width: 80px;
}

._sizeCompact_1nuaj_389 ._container_1nuaj_210 {
  min-height: 34px;
}
._sizeCompact_1nuaj_389 ._resultSection_1nuaj_279 {
  min-height: 34px;
  min-width: 88px;
  padding-right: 6px;
}
._sizeCompact_1nuaj_389 ._roundNumber_1nuaj_225 {
  min-width: 24px;
  font-size: 9px;
}
._sizeCompact_1nuaj_389 ._roundInfoSection_1nuaj_254 {
  padding: 1px 6px;
}
._sizeCompact_1nuaj_389 ._leaderName_1nuaj_266 {
  font-size: 10px;
}
._sizeCompact_1nuaj_389 ._leaderImage_1nuaj_239 > div {
  width: 18px;
  height: 18px;
  min-width: 18px;
}
._sizeCompact_1nuaj_389 ._separator_1nuaj_299 {
  height: 18px;
}
._sizeCompact_1nuaj_389 ._chips_1nuaj_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_19tz9_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_19tz9_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_19tz9_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_19tz9_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._exportModal_19tz9_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_19tz9_1 0.3s ease;
  overflow: hidden;
}
._exportModal_19tz9_222 ._exportContent_19tz9_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_19tz9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportModal_19tz9_222 ._exportContent_19tz9_241 {
    width: 90vw;
    max-height: 80vh;
  }
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_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_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
  }
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 ._chips_19tz9_291 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 ._appPromo_19tz9_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_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 ._appPromo_19tz9_299 img {
  height: 24px;
  width: 24px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 ._appPromo_19tz9_299 ._madeWithHighlight_19tz9_314 {
  color: var(--clrAccent-100);
}
@media (min-width: 800px) {
  ._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 ._appPromo_19tz9_299 {
    font-size: 12px;
  }
  ._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._rightSection_19tz9_284 ._appPromo_19tz9_299 img {
    height: 32px;
    width: 32px;
  }
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._tournamentInfo_19tz9_326 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._tournamentInfo_19tz9_326 > div:first-child {
  max-height: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  min-width: 42px !important;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._tournamentInfo_19tz9_326 ._tournamentInfoDetails_19tz9_339 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._tournamentInfo_19tz9_326 ._tournamentInfoDetails_19tz9_339 ._tournamentName_19tz9_346 {
  font-size: 10px;
  color: var(--clrAccent-60);
  max-width: 200px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264 ._tournamentInfo_19tz9_326 ._tournamentInfoDetails_19tz9_339 ._exportStats_19tz9_355 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clrAccent-100);
  white-space: nowrap;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264._mediumSize_19tz9_361 ._tournamentInfo_19tz9_326 > div:first-child {
  max-height: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  min-width: 56px !important;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264._mediumSize_19tz9_361 ._tournamentInfo_19tz9_326 ._tournamentInfoDetails_19tz9_339 ._tournamentName_19tz9_346 {
  font-size: 12px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264._mediumSize_19tz9_361 ._tournamentInfo_19tz9_326 ._tournamentInfoDetails_19tz9_339 ._exportStats_19tz9_355 {
  font-size: 20px;
}
@media (min-width: 800px) {
  ._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportHeader_19tz9_264._mediumSize_19tz9_361 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportRoundList_19tz9_382 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 0px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportRoundList_19tz9_382::-webkit-scrollbar {
  width: 8px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportRoundList_19tz9_382::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 4px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportRoundList_19tz9_382::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 4px;
}
._exportModal_19tz9_222 ._exportContent_19tz9_241 ._exportRoundList_19tz9_382::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
._exportModal_19tz9_222 ._appLogoRow_19tz9_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_19tz9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_19tz9_222 ._appLogoRow_19tz9_407 img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
._exportModal_19tz9_222 ._appLogoRow_19tz9_407 ._appName_19tz9_425 {
  font-size: 12px;
  color: var(--clrAccent-60);
}
._exportModal_19tz9_222 ._appLogoRow_19tz9_407 ._madeWithHighlight_19tz9_314 {
  color: var(--clrAccent-100);
}
._exportModal_19tz9_222 ._actionButtons_19tz9_432 {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: _modalBounceIn_19tz9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_19tz9_222 ._downloadBtn_19tz9_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_19tz9_222 ._downloadBtn_19tz9_441 svg {
  width: 18px;
  height: 18px;
}
._exportModal_19tz9_222 ._downloadBtn_19tz9_441:hover:not(:disabled) {
  color: var(--clrPrimary);
  transform: translateY(-2px);
}
._exportModal_19tz9_222 ._downloadBtn_19tz9_441:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._exportModal_19tz9_222 ._downloadBtn_19tz9_441 ._spinner_19tz9_470 {
  animation: _spin_19tz9_470 1s linear infinite;
}

@keyframes _spin_19tz9_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_j9wk4_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_j9wk4_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_j9wk4_201 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

._section_j9wk4_208 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._section_j9wk4_208 h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--clrAccent-100);
  display: flex;
  align-items: center;
  gap: 8px;
}
._section_j9wk4_208 ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._section_j9wk4_208 li {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.5;
}
._section_j9wk4_208 li::marker {
  color: var(--clrAccent-40);
}

._footerNote_j9wk4_238 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--clrAccent-10);
}
._footerNote_j9wk4_238 p {
  color: var(--clrTextPrimary);
  font-size: 12px;
  text-align: center;
  margin: 0;
  font-style: italic;
}

._closeButton_j9wk4_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_j9wk4_251:hover {
  transform: translateY(-2px);
  background: var(--clrAccent-30);
}
._closeButton_j9wk4_251:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  ._section_j9wk4_208 h3 {
    font-size: 16px;
  }
  ._section_j9wk4_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_g7383_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_g7383_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_g7383_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_g7383_201 ._bottomBar_g7383_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_g7383_60 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_201, ._themePastelLight_g7383_239 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_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_g7383_60 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_201._legacy_g7383_245, ._themePastelLight_g7383_239 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_201._legacy_g7383_245 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
._themeDark_g7383_120 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_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_g7383_120 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_201._legacy_g7383_245 {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_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_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259::selection {
  background: transparent;
}
._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259:hover ._linkIcon_g7383_286 {
  transform: translateY(-2px);
}
._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259:active {
  background-color: var(--clrAccent-10);
  transform: scale(0.95);
}
._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259._active_g7383_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_g7383_245 ._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259._active_g7383_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_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259._active_g7383_293 ._linkIcon_g7383_286 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_g7383_201 ._bottomBar_g7383_201 ._linkContainer_g7383_259 ._linkIcon_g7383_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_1eqb5_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_1eqb5_120 {
  --clrPrimary: #101418;
  --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: #101418;
  --clrGlassBackground: rgba(16, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(16, 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_1eqb5_201 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--clrPrimary);
}

._errorContent_1eqb5_210 {
  text-align: center;
  max-width: 400px;
}

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

._errorMessage_1eqb5_222 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

._refreshButton_1eqb5_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_1eqb5_229:hover {
  opacity: 0.9;
}
._refreshButton_1eqb5_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;
}