html {
  color-scheme: dark;
}

html:has(body._themeLight_bhur2_5),
html:has(body._themePastelLight_bhur2_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_bhur2_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_bhur2_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._wrap_bhur2_216 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4000;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

._card_bhur2_227 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

._copy_bhur2_245 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  flex: 1 1 320px;
  min-width: 0;
}

._title_bhur2_255 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  font-weight: 800;
}

._body_bhur2_262 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

._note_bhur2_269 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.76rem;
}

._link_bhur2_275 {
  color: var(--clrTextPrimary);
  text-decoration: underline;
}

._actions_bhur2_280 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  ._actions_bhur2_280 {
    width: 100%;
  }
  ._actions_bhur2_280 ._btn_bhur2_292 {
    flex: 1 1 0;
  }
}

._btn_bhur2_292 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--clrAccent-30);
  border-radius: 999px;
  color: var(--clrTextPrimary);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._btn_bhur2_292:hover {
  background: var(--clrTertiary);
  border-color: var(--clrAccent-30);
}
._btn_bhur2_292:focus-visible {
  outline: 2px solid var(--clrTextPrimary);
  outline-offset: 2px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1cii7_5),
html:has(body._themePastelLight_1cii7_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1cii7_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1cii7_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._snackbarContainer_1cii7_216 {
  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_1cii7_216 {
    width: 75%;
    bottom: 128px;
  }
}

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

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

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

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

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

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

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

@keyframes _slideInUp_1cii7_1 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes _slideOutDown_1cii7_1 {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1vgp5_5),
html:has(body._themePastelLight_1vgp5_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1vgp5_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1vgp5_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

._inputWrapper_1vgp5_236 {
  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_1vgp5_236._default_1vgp5_250 {
  border-color: transparent;
}
._inputWrapper_1vgp5_236._active_1vgp5_253 {
  border-color: var(--clrAccent-30);
  box-shadow: 0px 0px 12px 0px rgba(186, 186, 186, 0.1);
}
._inputWrapper_1vgp5_236._error_1vgp5_232 {
  border-color: var(--clrError-100);
  box-shadow: 0px 0px 12px 0px rgba(255, 141, 141, 0.16);
}

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

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

._error_1vgp5_232 ._input_1vgp5_236,
._error_1vgp5_232 ._select_1vgp5_263 {
  color: var(--clrError-100);
}
._error_1vgp5_232 ._input_1vgp5_236::placeholder,
._error_1vgp5_232 ._select_1vgp5_263::placeholder {
  color: var(--clrError-100);
}

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

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

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

html:has(body._themeLight_klg94_5),
html:has(body._themePastelLight_klg94_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_klg94_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_klg94_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._button_klg94_216 {
  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_klg94_216:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._button_klg94_216:active:not(:disabled) {
  transform: scale(0.98);
}

._fullWidth_klg94_237 {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._innerContent_klg94_423 {
  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_klg94_423::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_klg94_409:hover:not(:disabled) ._innerContent_klg94_423::before {
  opacity: 1;
}
._innerContent_klg94_423 ._icon_klg94_312 {
  font-size: 20px;
  max-height: 20px;
}

@keyframes _star-movement-bottom_klg94_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}
@keyframes _star-movement-top_klg94_1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}
._loading_klg94_507 {
  pointer-events: none;
}

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

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

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

html:has(body._themeLight_jg6to_5),
html:has(body._themePastelLight_jg6to_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_jg6to_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_jg6to_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._carousel_jg6to_216 {
  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_jg6to_224 {
  display: flex;
  gap: 12px;
  animation: _scroll_jg6to_1 linear infinite;
  width: max-content;
}

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

@media (max-width: 480px) {
  ._carousel_jg6to_216 {
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselSlide_jg6to_239 {
    width: var(--mobile-width, 280px) !important;
    height: var(--mobile-height, 200px) !important;
  }
  ._carouselTrack_jg6to_224 {
    gap: 8px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_12g2x_5),
html:has(body._themePastelLight_12g2x_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_12g2x_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_12g2x_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._shinyText_12g2x_216 {
  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_12g2x_1 var(--speed, 3s) infinite linear;
}
._shinyText_12g2x_216._disabled_12g2x_226 {
  animation: none;
  background: var(--clrTextTertiary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes _shine_12g2x_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: dark;
}

html:has(body._themeLight_1h9q8_5),
html:has(body._themePastelLight_1h9q8_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1h9q8_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1h9q8_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

._header_1h9q8_236 {
  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_1h9q8_236 {
    padding: 80px 24px 40px;
  }
}
._header_1h9q8_236 ._logo_1h9q8_252 {
  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_1h9q8_236 ._logo_1h9q8_252 {
    width: 125px;
    height: 125px;
    border-radius: 36px;
  }
}
._header_1h9q8_236 ._welcomeTitle_1h9q8_268 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_1h9q8_236 ._welcomeTitle_1h9q8_268 {
    font-size: 32px;
  }
}
._header_1h9q8_236 ._welcomeSubtitle_1h9q8_280 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1h9q8_236 ._welcomeSubtitle_1h9q8_280 {
    font-size: 16px;
  }
}

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

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

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

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

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

._guestText_1h9q8_390 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(198, 198, 198, 0.6);
  text-align: center;
  margin: 0;
}
._guestText_1h9q8_390 ._guestLink_1h9q8_398 {
  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_1h9q8_390 ._guestLink_1h9q8_398:hover {
  color: rgba(198, 198, 198, 0.8);
}

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

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

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

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

._spoiler_1h9q8_482 {
  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_1h9q8_482::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_1h9q8_482:hover {
  background: rgba(198, 198, 198, 0.3);
}
._spoiler_1h9q8_482._revealed_1h9q8_508 {
  color: rgba(198, 198, 198, 0.8);
  text-shadow: none;
  background: transparent;
  cursor: default;
}
._spoiler_1h9q8_482._revealed_1h9q8_508::before {
  display: none;
}

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

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

._errorMessage_1h9q8_550 {
  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: dark;
}

html:has(body._themeLight_qd6nz_5),
html:has(body._themePastelLight_qd6nz_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_qd6nz_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_qd6nz_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._page_qd6nz_216 {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 18% 18%, rgba(168, 85, 247, 0.12), transparent 28rem), linear-gradient(180deg, #090d12 0%, #0f1418 58%, #090d12 100%);
  color: var(--clrTextPrimary);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

._nav_qd6nz_227 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._brand_qd6nz_237 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
}

._logo_qd6nz_248 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

._navLinks_qd6nz_254 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._primaryAction_qd6nz_260 {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

._downloadNav_qd6nz_273 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
._downloadNav_qd6nz_273:hover {
  background: rgba(255, 255, 255, 0.13);
}
._downloadNav_qd6nz_273:active {
  transform: scale(0.97);
}

._downloadNavLabel_qd6nz_294 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._downloadNav_qd6nz_273 img {
  width: auto;
  display: block;
}

._appleIcon_qd6nz_306 {
  height: 19px;
  filter: invert(1);
}

._androidIcon_qd6nz_311 {
  height: 20px;
}

._downloadNavWhite_qd6nz_315 {
  min-height: 52px;
  padding: 0 24px;
  gap: 11px;
  background: #FFFFFF;
  border-color: transparent;
}
._downloadNavWhite_qd6nz_315:hover {
  background: rgba(255, 255, 255, 0.88);
}
._downloadNavWhite_qd6nz_315 ._downloadNavLabel_qd6nz_294 {
  color: #101418;
  font-size: 16px;
}
._downloadNavWhite_qd6nz_315 ._appleIcon_qd6nz_306 {
  filter: none;
  height: 23px;
}
._downloadNavWhite_qd6nz_315 ._androidIcon_qd6nz_311 {
  height: 24px;
}

._downloadBar_qd6nz_337 {
  display: flex;
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  z-index: 100;
  width: min(100% - 24px, 460px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

._downloadBarVisible_qd6nz_360 {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

._downloadBarTitle_qd6nz_365 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #f4f4f5;
  text-align: center;
}

._downloadBarBadges_qd6nz_373 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

._downloadBarBadges_qd6nz_373 a {
  display: inline-flex;
  line-height: 0;
  pointer-events: auto;
}

._downloadBarBadges_qd6nz_373 img {
  height: 40px;
  width: auto;
  display: block;
}

._hero_qd6nz_392 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  min-height: min(720px, 100vh - 140px);
  min-height: min(720px, 100dvh - 140px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: 56px;
  padding: 52px 0 56px;
}

._heroText_qd6nz_404 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

._eyebrow_qd6nz_410 {
  margin: 0 0 18px;
  color: #a855f7;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

._hero_qd6nz_392 h1 {
  max-width: 760px;
  margin: 0;
  color: #FFFFFF;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 800;
}

._subhead_qd6nz_429 {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(244, 244, 245, 0.72);
  font-size: 19px;
  line-height: 1.55;
}

._actions_qd6nz_437 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
}

._webVersionLink_qd6nz_445 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: rgba(244, 244, 245, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
._webVersionLink_qd6nz_445:hover {
  color: #FFFFFF;
}

._primaryAction_qd6nz_260 {
  color: #101418;
  background: #FFFFFF;
  padding: 0 22px;
}

._heroVisual_qd6nz_464 {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

._heroVisual_qd6nz_464::before {
  content: "";
  position: absolute;
  inset: 12% 4% 8%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28), transparent 64%);
  filter: blur(34px);
  z-index: -1;
}

._heroImage_qd6nz_481 {
  width: min(100%, 560px);
  height: auto;
  display: block;
  filter: drop-shadow(0 34px 80px rgba(0, 0, 0, 0.42));
}

._features_qd6nz_488 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 28px 0 48px;
}

._sectionHeader_qd6nz_494 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  margin-bottom: 18px;
}

._sectionHeader_qd6nz_494 > svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 10px;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.12);
  flex-shrink: 0;
}

._sectionHeader_qd6nz_494 h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

._featureGrid_qd6nz_520 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

._feature_qd6nz_488 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 20px;
}

._feature_qd6nz_488 svg {
  color: #a855f7;
}

._feature_qd6nz_488 h3 {
  margin: 16px 0 8px;
  color: #FFFFFF;
  font-size: 16px;
}

._feature_qd6nz_488 p {
  margin: 0;
  color: rgba(244, 244, 245, 0.64);
  font-size: 14px;
  line-height: 1.55;
}

._exportSection_qd6nz_550 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 36px 0 84px;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.88fr);
  align-items: center;
  gap: 48px;
}

._exportCopy_qd6nz_560 p,
._analyticsCopy_qd6nz_561 p,
._loggingCopy_qd6nz_562 p {
  max-width: 500px;
  margin: 0;
  color: rgba(244, 244, 245, 0.68);
  font-size: 16px;
  line-height: 1.6;
}

._exportTags_qd6nz_570 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

._exportTags_qd6nz_570 span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 8px;
  padding: 0 12px;
  color: rgba(233, 213, 255, 0.9);
  background: rgba(168, 85, 247, 0.08);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

._exportTags_qd6nz_570 span:hover,
._exportTags_qd6nz_570 span:focus-visible {
  border-color: rgba(168, 85, 247, 0.68);
  background: rgba(168, 85, 247, 0.14);
  color: #f4e9ff;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.14), 0 0 22px rgba(168, 85, 247, 0.28);
}

._exportTags_qd6nz_570 svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

._exportPreview_qd6nz_606 {
  margin: 0;
  position: relative;
  isolation: isolate;
}

._exportPreview_qd6nz_606::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2), transparent 66%);
  filter: blur(38px);
  z-index: -1;
}

._exportPreview_qd6nz_606 img {
  width: min(100%, 520px);
  height: auto;
  display: block;
  margin-right: auto;
  border-radius: 8px;
}

._analyticsSection_qd6nz_629 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 18px 0 96px;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 0.72fr);
  align-items: center;
  gap: 56px;
}

._analyticsVisual_qd6nz_639 {
  min-height: 700px;
  position: relative;
  isolation: isolate;
}

._analyticsVisual_qd6nz_639::before {
  content: "";
  position: absolute;
  inset: 14% 4% 10%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 68%);
  filter: blur(42px);
  z-index: -1;
}

._analyticsVisual_qd6nz_639 img {
  width: min(48%, 310px);
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  border-radius: 8px;
}

._analyticsVisual_qd6nz_639 img:first-child {
  left: 3%;
  transform: rotate(-2deg);
}

._analyticsVisual_qd6nz_639 img:last-child {
  right: 4%;
  top: 64px;
  transform: rotate(2deg);
}

._loggingSection_qd6nz_674 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 8px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.92fr);
  align-items: start;
  gap: 56px;
}

._loggingCopy_qd6nz_562 {
  align-self: center;
}

._loggingVisual_qd6nz_688 {
  min-height: 560px;
  position: relative;
  isolation: isolate;
}

._loggingVisual_qd6nz_688::before {
  content: "";
  position: absolute;
  inset: 12% 4% 10%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2), transparent 68%);
  filter: blur(42px);
  z-index: -1;
}

._loggingVisual_qd6nz_688 img {
  width: min(42%, 270px);
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  border-radius: 8px;
}

._loggingVisual_qd6nz_688 img:first-child {
  left: 0;
  top: 22px;
  transform: rotate(-3deg);
}

._loggingVisual_qd6nz_688 img:nth-child(2) {
  left: 29%;
  top: 0;
  z-index: 2;
}

._loggingVisual_qd6nz_688 img:nth-child(3) {
  right: 0;
  top: 64px;
  transform: rotate(3deg);
}

._footer_qd6nz_730 {
  width: min(1120px, 100% - 32px);
  margin: auto auto 0;
  padding: 26px 0 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(244, 244, 245, 0.48);
  font-size: 12px;
}

._footerTop_qd6nz_742,
._footerBottom_qd6nz_743 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

._footerTop_qd6nz_742 {
  color: rgba(244, 244, 245, 0.72);
  font-weight: 700;
}

._socialLinks_qd6nz_755,
._footerLinks_qd6nz_756 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._socialLinks_qd6nz_755 a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

._socialLinks_qd6nz_755 svg {
  color: #a855f7;
  transition: color 180ms ease, filter 180ms ease;
}

._footer_qd6nz_730 a {
  color: rgba(244, 244, 245, 0.64);
  text-decoration: none;
  transition: color 180ms ease, text-shadow 180ms ease;
}

._footer_qd6nz_730 a:hover,
._footer_qd6nz_730 a:focus-visible {
  color: #a855f7;
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.36);
}

._footer_qd6nz_730 a:hover svg,
._footer_qd6nz_730 a:focus-visible svg {
  color: #a855f7;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}

._footerPayments_qd6nz_791 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2px 0 6px;
}

._footerPaymentsLabel_qd6nz_799 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: rgba(244, 244, 245, 0.48);
}

._footerPaymentIcons_qd6nz_807 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
._footerPaymentIcons_qd6nz_807 li {
  width: 44px;
  height: 30px;
  opacity: 0.7;
  transition: opacity 180ms ease, transform 180ms ease;
}
._footerPaymentIcons_qd6nz_807 li:hover {
  opacity: 1;
  transform: translateY(-2px);
}
._footerPaymentIcons_qd6nz_807 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media (max-width: 860px) {
  ._hero_qd6nz_392 {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 28px;
  }
  ._hero_qd6nz_392 h1 {
    font-size: 58px;
  }
  ._subhead_qd6nz_429 {
    font-size: 17px;
  }
  ._heroImage_qd6nz_481 {
    width: min(100%, 520px);
  }
  ._featureGrid_qd6nz_520 {
    grid-template-columns: 1fr;
  }
  ._exportSection_qd6nz_550 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 64px;
  }
  ._exportCopy_qd6nz_560 {
    order: 1;
  }
  ._exportPreview_qd6nz_606 {
    order: 2;
  }
  ._exportPreview_qd6nz_606 img {
    margin: 0 auto;
    width: min(100%, 500px);
  }
  ._analyticsSection_qd6nz_629 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 72px;
  }
  ._analyticsVisual_qd6nz_639 {
    order: 2;
    min-height: 700px;
  }
  ._analyticsCopy_qd6nz_561 {
    order: 1;
  }
  ._analyticsVisual_qd6nz_639 img {
    width: min(52%, 300px);
  }
  ._loggingSection_qd6nz_674 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 72px;
  }
  ._loggingVisual_qd6nz_688 {
    min-height: 680px;
  }
  ._loggingVisual_qd6nz_688 img {
    width: min(43%, 270px);
  }
  ._footer_qd6nz_730 {
    align-items: flex-start;
  }
  ._footerTop_qd6nz_742,
  ._footerBottom_qd6nz_743 {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  ._nav_qd6nz_227 {
    width: min(100% - 24px, 1120px);
  }
  ._brand_qd6nz_237 span {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  ._hero_qd6nz_392,
  ._features_qd6nz_488,
  ._footer_qd6nz_730 {
    width: min(100% - 24px, 1120px);
  }
  ._hero_qd6nz_392 h1 {
    font-size: 48px;
  }
  ._actions_qd6nz_437,
  ._primaryAction_qd6nz_260,
  ._actions_qd6nz_437 ._downloadNav_qd6nz_273 {
    width: 100%;
  }
  ._heroImage_qd6nz_481 {
    width: min(112%, 430px);
  }
  ._exportSection_qd6nz_550 {
    width: min(100% - 24px, 1120px);
    padding-top: 0;
  }
  ._analyticsSection_qd6nz_629 {
    width: min(100% - 24px, 1120px);
  }
  ._analyticsVisual_qd6nz_639 {
    min-height: 580px;
  }
  ._analyticsVisual_qd6nz_639 img {
    width: min(58%, 250px);
  }
  ._analyticsVisual_qd6nz_639 img:first-child {
    left: -2%;
  }
  ._analyticsVisual_qd6nz_639 img:last-child {
    right: -2%;
    top: 54px;
  }
  ._loggingSection_qd6nz_674 {
    width: min(100% - 24px, 1120px);
    padding-bottom: 24px;
  }
  ._loggingVisual_qd6nz_688 {
    min-height: 500px;
  }
  ._loggingVisual_qd6nz_688 img {
    width: min(48%, 210px);
  }
  ._loggingVisual_qd6nz_688 img:first-child {
    left: -6%;
    top: 42px;
  }
  ._loggingVisual_qd6nz_688 img:nth-child(2) {
    left: 25%;
  }
  ._loggingVisual_qd6nz_688 img:nth-child(3) {
    right: -6%;
    top: 72px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1praa_5),
html:has(body._themePastelLight_1praa_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1praa_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1praa_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._page_1praa_216 {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 18% 18%, rgba(168, 85, 247, 0.12), transparent 28rem), linear-gradient(180deg, #090d12 0%, #0f1418 58%, #090d12 100%);
  color: var(--clrTextPrimary);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

._nav_1praa_226 {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
}

._brand_1praa_234 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
}

._logo_1praa_245 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

._hero_1praa_251 {
  width: min(720px, 100% - 32px);
  margin: 20px auto 4px;
  text-align: center;
}

._eyebrow_1praa_257 {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c084fc;
}

._hero_1praa_251 h1 {
  margin: 0 0 14px;
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
}

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

._quickBadges_1praa_283 {
  width: min(720px, 100% - 32px);
  margin: 24px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

._platforms_1praa_293 {
  width: min(900px, 100% - 32px);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

._platform_1praa_293 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

._platformTitle_1praa_312 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
}

._platformIcon_1praa_323 {
  height: 22px;
  width: auto;
  display: block;
}

._appleIcon_1praa_329 {
  filter: invert(1);
}

._mockup_1praa_333 {
  width: auto;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 12px;
}

._badgeLink_1praa_341 {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.15s ease;
}
._badgeLink_1praa_341:active {
  transform: scale(0.96);
}

._badge_1praa_341 {
  height: 52px;
  width: auto;
  display: block;
}

._browserNote_1praa_357 {
  width: min(720px, 100% - 32px);
  margin: 40px auto 56px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--clrAccent-60);
}
._browserNote_1praa_357 a {
  color: var(--clrTextPrimary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  ._platforms_1praa_293 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  ._hero_1praa_251 h1 {
    font-size: 24px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1llgu_5),
html:has(body._themePastelLight_1llgu_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1llgu_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1llgu_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

._header_1llgu_225 {
  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_1llgu_225 {
    padding: 80px 24px 40px;
  }
}
._header_1llgu_225 ._logo_1llgu_239 {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}
@media (min-width: 840px) {
  ._header_1llgu_225 ._logo_1llgu_239 {
    width: 125px;
    height: 125px;
  }
}
._header_1llgu_225 ._welcomeTitle_1llgu_251 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0 0 8px 0;
}
@media (min-width: 840px) {
  ._header_1llgu_225 ._welcomeTitle_1llgu_251 {
    font-size: 32px;
  }
}
._header_1llgu_225 ._welcomeSubtitle_1llgu_263 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--clrTextTertiary);
  margin: 0;
}
@media (min-width: 840px) {
  ._header_1llgu_225 ._welcomeSubtitle_1llgu_263 {
    font-size: 16px;
  }
}

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

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

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

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

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

._errorMessage_1llgu_357 {
  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: dark;
}

html:has(body._themeLight_hqs8l_5),
html:has(body._themePastelLight_hqs8l_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_hqs8l_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_hqs8l_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

html:has(body._themeLight_1z0b4_5),
html:has(body._themePastelLight_1z0b4_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1z0b4_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1z0b4_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

._leaderCard_1z0b4_244 {
  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_1z0b4_244:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
._leaderCard_1z0b4_244._selected_1z0b4_262 {
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}

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

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

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

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

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

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

._skeletonImage_1z0b4_374 {
  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_1z0b4_1 1.5s ease-in-out infinite;
}

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

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

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

@keyframes _skeletonPulse_1z0b4_1 {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes _skeletonShimmer_1z0b4_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes _pulse_1z0b4_1 {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  ._leaderCard_1z0b4_244 {
    width: 110px;
    height: 156px;
  }
  ._leaderImageInCard_1z0b4_268 {
    height: 72px;
  }
  ._leaderInfo_1z0b4_279 {
    padding: 8px;
  }
  ._leaderName_1z0b4_297 {
    font-size: 11px;
  }
  ._leaderSet_1z0b4_307 {
    font-size: 10px;
  }
  ._skeletonCard_1z0b4_358 {
    width: 128px;
    height: 193px;
  }
  ._skeletonImage_1z0b4_374 {
    width: 118px;
    height: 118px;
  }
  ._skeletonInfo_1z0b4_383 {
    gap: 4px;
  }
  ._skeletonName_1z0b4_391 {
    height: 11px;
    margin-bottom: 4px;
  }
  ._skeletonSet_1z0b4_401 {
    height: 10px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_69i65_5),
html:has(body._themePastelLight_69i65_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_69i65_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_69i65_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._container_69i65_216 {
  position: relative;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
}
._container_69i65_216 ._skeletonOverlay_69i65_222 {
  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_69i65_216 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  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_69i65_1 1.5s infinite;
  flex-shrink: 0;
}
._container_69i65_216 ._skeletonOverlay_69i65_222 ._skeletonText_69i65_244 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}
._container_69i65_216 ._skeletonOverlay_69i65_222 ._skeletonText_69i65_244 ._skeletonName_69i65_253 {
  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_69i65_1 1.5s infinite;
}
._container_69i65_216 ._skeletonOverlay_69i65_222 ._skeletonText_69i65_244 ._skeletonSet_69i65_261 {
  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_69i65_1 1.5s infinite;
}
._container_69i65_216 ._content_69i65_269 {
  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_69i65_216 ._content_69i65_269._fadeIn_69i65_281 {
  opacity: 1;
  visibility: visible;
}
._container_69i65_216 ._photo_69i65_285 {
  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_69i65_216 ._photo_69i65_285 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
._container_69i65_216 ._photo_69i65_285 ._placeholder_69i65_305 {
  color: #FFFFFF;
  font-weight: 600;
}
._container_69i65_216 ._text_69i65_309 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  padding: 0 2px;
}
._container_69i65_216 ._text_69i65_309 ._name_69i65_318 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  width: 100%;
}
._container_69i65_216 ._text_69i65_309 ._set_69i65_326 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
._container_69i65_216._image-text_69i65_332 {
  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_69i65_216._image-text_69i65_332:hover {
  transform: translateY(-2px);
}
._container_69i65_216._image-text_69i65_332 ._skeletonOverlay_69i65_222 {
  gap: 10px;
}
._container_69i65_216._image-text_69i65_332 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 124px;
  height: 124px;
}
._container_69i65_216._image-text_69i65_332 ._content_69i65_269 {
  gap: 10px;
}
._container_69i65_216._image-text_69i65_332 ._photo_69i65_285 {
  width: 124px;
  height: 124px;
}
._container_69i65_216._image-text_69i65_332 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 32px;
}
._container_69i65_216._image-text_69i65_332._active_69i65_362 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
._container_69i65_216._image-text-medium_69i65_367 {
  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_69i65_216._image-text-medium_69i65_367:hover {
  transform: translateY(-2px);
}
._container_69i65_216._image-text-medium_69i65_367 ._skeletonOverlay_69i65_222 {
  gap: 8px;
}
._container_69i65_216._image-text-medium_69i65_367 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_69i65_216._image-text-medium_69i65_367 ._content_69i65_269 {
  gap: 8px;
}
._container_69i65_216._image-text-medium_69i65_367 ._photo_69i65_285 {
  width: 104px;
  height: 104px;
  border-radius: 5px;
}
._container_69i65_216._image-text-medium_69i65_367 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 20px;
}
._container_69i65_216._image-text-medium_69i65_367 ._text_69i65_309 {
  gap: 1px;
  padding: 0 2px;
}
._container_69i65_216._image-text-medium_69i65_367 ._text_69i65_309 ._name_69i65_318 {
  font-size: 12px;
}
._container_69i65_216._image-text-medium_69i65_367 ._text_69i65_309 ._set_69i65_326 {
  font-size: 12px;
}
._container_69i65_216._image-text-medium_69i65_367._active_69i65_362 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
}
._container_69i65_216._image-text-small_69i65_416 {
  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_69i65_216._image-text-small_69i65_416:hover {
  transform: translateY(-2px);
}
._container_69i65_216._image-text-small_69i65_416 ._skeletonOverlay_69i65_222 {
  gap: 6px;
}
._container_69i65_216._image-text-small_69i65_416 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_69i65_216._image-text-small_69i65_416 ._skeletonOverlay_69i65_222 ._skeletonText_69i65_244 ._skeletonName_69i65_253 {
  height: 12px;
}
._container_69i65_216._image-text-small_69i65_416 ._skeletonOverlay_69i65_222 ._skeletonText_69i65_244 ._skeletonSet_69i65_261 {
  height: 10px;
}
._container_69i65_216._image-text-small_69i65_416 ._content_69i65_269 {
  gap: 6px;
}
._container_69i65_216._image-text-small_69i65_416 ._photo_69i65_285 {
  width: 86px;
  height: 86px;
  border-radius: 4px;
}
._container_69i65_216._image-text-small_69i65_416 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 20px;
}
._container_69i65_216._image-text-small_69i65_416 ._text_69i65_309 {
  gap: 1px;
  padding: 0 1px;
}
._container_69i65_216._image-text-small_69i65_416 ._text_69i65_309 ._name_69i65_318 {
  font-size: 12px;
}
._container_69i65_216._image-text-small_69i65_416 ._text_69i65_309 ._set_69i65_326 {
  font-size: 8px;
}
._container_69i65_216._image-text-small_69i65_416._active_69i65_362 {
  outline: 2px solid var(--clrAccent-100);
  outline-offset: 0px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
._container_69i65_216._image-only-xlarge_69i65_471 {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}
._container_69i65_216._image-only-xlarge_69i65_471 ._skeletonOverlay_69i65_222 {
  justify-content: center;
}
._container_69i65_216._image-only-xlarge_69i65_471 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 100px;
  height: 100px;
}
._container_69i65_216._image-only-xlarge_69i65_471 ._content_69i65_269 {
  justify-content: center;
}
._container_69i65_216._image-only-xlarge_69i65_471 ._photo_69i65_285 {
  width: 100px;
  height: 100px;
}
._container_69i65_216._image-only-xlarge_69i65_471 ._photo_69i65_285 img {
  object-fit: contain;
}
._container_69i65_216._image-only-xlarge_69i65_471 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 12px;
}
._container_69i65_216._image-only-large_69i65_496 {
  width: 112px;
  height: 112px;
}
._container_69i65_216._image-only-large_69i65_496 ._skeletonOverlay_69i65_222 {
  justify-content: center;
}
._container_69i65_216._image-only-large_69i65_496 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 104px;
  height: 104px;
}
._container_69i65_216._image-only-large_69i65_496 ._content_69i65_269 {
  justify-content: center;
}
._container_69i65_216._image-only-large_69i65_496 ._photo_69i65_285 {
  width: 100%;
  height: 100%;
}
._container_69i65_216._image-only-large_69i65_496 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 28px;
}
._container_69i65_216._image-only-small_69i65_517 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._container_69i65_216._image-only-small_69i65_517 ._skeletonOverlay_69i65_222 {
  justify-content: center;
}
._container_69i65_216._image-only-small_69i65_517 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 60px;
  height: 60px;
}
._container_69i65_216._image-only-small_69i65_517 ._content_69i65_269 {
  justify-content: center;
}
._container_69i65_216._image-only-small_69i65_517 ._photo_69i65_285 {
  height: 100%;
  width: 100%;
}
._container_69i65_216._image-only-small_69i65_517 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 18px;
}
._container_69i65_216._image-only-xsmall_69i65_539 {
  width: 40px;
  height: 40px;
  padding: 2px;
}
._container_69i65_216._image-only-xsmall_69i65_539 ._skeletonOverlay_69i65_222 {
  justify-content: center;
}
._container_69i65_216._image-only-xsmall_69i65_539 ._skeletonOverlay_69i65_222 ._skeletonPhoto_69i65_237 {
  width: 36px;
  height: 36px;
}
._container_69i65_216._image-only-xsmall_69i65_539 ._content_69i65_269 {
  justify-content: center;
}
._container_69i65_216._image-only-xsmall_69i65_539 ._photo_69i65_285 {
  width: 36px;
  height: 36px;
}
._container_69i65_216._image-only-xsmall_69i65_539 ._photo_69i65_285 ._placeholder_69i65_305 {
  font-size: 14px;
}

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

html:has(body._themeLight_1o5ag_5),
html:has(body._themePastelLight_1o5ag_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1o5ag_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1o5ag_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

._typeChip_1o5ag_260 {
  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_1o5ag_260:hover:not(:disabled) {
  border-color: var(--clrAccent-50);
  color: var(--clrAccent-80);
}
._typeChip_1o5ag_260:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._typeChip_1o5ag_260._selected_1o5ag_287 {
  border-color: var(--clrAccent-100);
  color: var(--clrAccent-100);
  background: var(--clrAccent-10);
}
._typeChip_1o5ag_260._typeLocal_1o5ag_292 {
  background-color: #163c26;
  border-color: rgba(133, 228, 172, 0.6);
  color: rgba(133, 228, 172, 0.6);
}
._typeChip_1o5ag_260._typeStoreCs_1o5ag_297 {
  background-color: #471f1f;
  border-color: rgba(240, 131, 131, 0.6);
  color: rgba(240, 131, 131, 0.6);
}
._typeChip_1o5ag_260._typeTreasureCup_1o5ag_302 {
  background-color: #562502;
  border-color: rgba(255, 160, 92, 0.6);
  color: rgba(255, 160, 92, 0.6);
}
._typeChip_1o5ag_260._typeFlagship_1o5ag_307 {
  background-color: #4b2e00;
  border-color: rgba(255, 201, 115, 0.6);
  color: rgba(255, 201, 115, 0.6);
}
._typeChip_1o5ag_260._typeTesting_1o5ag_312 {
  background-color: #1e3a8a;
  border-color: #3b82f6;
  color: #93c5fd;
}
._typeChip_1o5ag_260._typeLcq_1o5ag_317 {
  background-color: #7f1d1d;
  border-color: #dc2626;
  color: #fca5a5;
}
._typeChip_1o5ag_260._typeNational_1o5ag_322 {
  background-color: #581c87;
  border-color: #a855f7;
  color: #e9d5ff;
}
._typeChip_1o5ag_260._typeRankedSim_1o5ag_327 {
  background-color: #1e3a5f;
  border-color: #60a5fa;
  color: #bfdbfe;
}
._typeChip_1o5ag_260._typeRegionals_1o5ag_332, ._typeChip_1o5ag_260._typeWorld_1o5ag_332 {
  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_1o5ag_1 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
  color: #875c18;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
._typeChip_1o5ag_260._typeRegionals_1o5ag_332::before, ._typeChip_1o5ag_260._typeWorld_1o5ag_332::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_1o5ag_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_1o5ag_360 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--clrAccent-30);
  padding: 0 4px;
}

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

html:has(body._themeLight_hl5oo_5),
html:has(body._themePastelLight_hl5oo_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_hl5oo_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_hl5oo_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

@keyframes _slideUp_hl5oo_1 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes _slideDown_hl5oo_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
._drawerOverlay_hl5oo_232 {
  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_hl5oo_232 {
  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_hl5oo_1 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform;
}
._drawer_hl5oo_232._closing_hl5oo_264 {
  animation: _slideDown_hl5oo_1 0.25s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
._drawer_hl5oo_232._glass_hl5oo_267 {
  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_hl5oo_232._fullHeight_hl5oo_274 {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html:has(body._themeLight_jcioh_5),
html:has(body._themePastelLight_jcioh_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_jcioh_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_jcioh_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._premiumBadge_jcioh_216 {
  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: dark;
}

html:has(body._themeLight_gwho5_5),
html:has(body._themePastelLight_gwho5_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_gwho5_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_gwho5_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._toggle_gwho5_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 4px;
  margin: 16px 0;
  background-color: var(--clrAccent-10);
  border-radius: 12px;
}

._option_gwho5_229 {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-60);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._option_gwho5_229:active:not(:disabled) {
  transform: scale(0.98);
}
._option_gwho5_229:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

._active_gwho5_250 {
  background-color: var(--clrPrimaryReverse);
  color: var(--clrPrimary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1angz_5),
html:has(body._themePastelLight_1angz_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1angz_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1angz_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._container_1angz_216 {
  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_1angz_231 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16px 0;
}
._pageTitle_1angz_231 h1 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--clrPrimaryReverse);
  margin: 0;
}

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

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

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

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

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

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

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

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

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

html:has(body._themeLight_1dt0w_5),
html:has(body._themePastelLight_1dt0w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1dt0w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1dt0w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

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

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

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

._singleToggleBtn_1dt0w_298 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background-color: var(--clrAccent-10);
  color: var(--clrPrimaryReverse);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
._singleToggleBtn_1dt0w_298 ._value_1dt0w_317 {
  font-weight: 700;
}
._singleToggleBtn_1dt0w_298:active:not(:disabled) {
  transform: scale(0.98);
}
._singleToggleBtn_1dt0w_298:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._winResult_1dt0w_328 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccess-100);
}
._winResult_1dt0w_328 ._value_1dt0w_317 {
  color: var(--clrSuccess-100);
}

._loseResult_1dt0w_336 {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
}
._loseResult_1dt0w_336 ._value_1dt0w_317 {
  color: var(--clrError-100);
}

._noteWrapper_1dt0w_344 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 4px;
}

._noteLabel_1dt0w_355 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--clrAccent-60);
}

._noteInput_1dt0w_362 {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--clrPrimaryReverse);
  background-color: var(--clrAccent-10);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  resize: vertical;
}
._noteInput_1dt0w_362:focus {
  outline: none;
  border-color: var(--clrPrimaryReverse);
}
._noteInput_1dt0w_362:disabled {
  opacity: 0.5;
}

._noteCount_1dt0w_381 {
  align-self: flex-end;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--clrAccent-60);
}

._message_1dt0w_388 {
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
}: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;
}

._card_1051h_14 {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 148px;
  padding: 16px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: color-mix(in srgb, var(--clrSecondary) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 72%, var(--clrTertiary));
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  overflow: hidden;
}
._card_1051h_14:hover {
  transform: translateY(-1px);
}

._compactCard_1051h_35 {
  min-height: 104px;
  grid-template-columns: 68px minmax(0, 1fr);
  padding: 12px;
}

._locked_1051h_41 {
  opacity: 0.76;
  border-color: var(--clrAccent-20);
}

._statusBadge_1051h_46 {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  color: var(--clrTextPrimary);
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--clrSecondary) 88%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}
._statusBadge_1051h_46 svg {
  width: 14px;
  height: 14px;
  color: var(--tier-color);
}

._iconRail_1051h_69 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

._tierBadge_1051h_78,
._chip_1051h_79,
._detailBadges_1051h_80 span,
._toastTier_1051h_81 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

._tierBadge_1051h_78 {
  color: #101418;
  background: var(--tier-color);
}

._achievementIcon_1051h_99,
._detailIcon_1051h_100,
._toastIcon_1051h_101,
._shareCardIcon_1051h_102 {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--tier-color) 26%, transparent), transparent 62%), color-mix(in srgb, var(--clrPrimary) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 45%, transparent);
  border-radius: 50%;
  overflow: hidden;
}
._achievementIcon_1051h_99 img,
._achievementIcon_1051h_99 svg,
._detailIcon_1051h_100 img,
._detailIcon_1051h_100 svg,
._toastIcon_1051h_101 img,
._toastIcon_1051h_101 svg,
._shareCardIcon_1051h_102 img,
._shareCardIcon_1051h_102 svg {
  width: 68%;
  height: 68%;
  object-fit: cover;
  color: var(--tier-color);
}

._achievementIcon_1051h_99 {
  width: 58px;
  height: 58px;
}

._cardBody_1051h_129 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-top: 18px;
}

._cardTitle_1051h_137 {
  max-width: calc(100% - 86px);
  color: var(--clrTextPrimary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

._requirement_1051h_145,
._flavor_1051h_146 {
  display: -webkit-box;
  margin-top: 6px;
  color: var(--clrTextSecondary);
  font-size: 0.84rem;
  line-height: 1.32;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._flavor_1051h_146 {
  color: var(--clrTextTertiary);
  font-style: italic;
}

._progressRow_1051h_162,
._detailProgress_1051h_163 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

._progressTrack_1051h_171 {
  display: block;
  height: 7px;
  background: var(--clrAccent-10);
  border-radius: 999px;
  overflow: hidden;
}

._progressFill_1051h_179 {
  display: block;
  height: 100%;
  background: var(--tier-color);
  border-radius: inherit;
}

._progressText_1051h_186 {
  color: var(--clrTextTertiary);
  font-size: 0.78rem;
  font-weight: 700;
}

._chipRow_1051h_192 {
  display: flex;
  gap: 8px;
  padding: 2px;
  overflow-x: auto;
}

._chip_1051h_79 {
  color: var(--clrTextSecondary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  cursor: pointer;
}

._activeChip_1051h_206 {
  color: var(--clrTextPrimaryReverse);
  background: var(--clrPrimaryReverse);
  border-color: var(--clrPrimaryReverse);
}

._showcaseGrid_1051h_212 {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
._showcaseGrid_1051h_212::-webkit-scrollbar {
  display: none;
}

._showcaseGrid_1051h_212 > * {
  flex: 1 0 112px;
  min-width: 112px;
  scroll-snap-align: start;
}

@media (max-width: 660px) {
  ._showcaseGrid_1051h_212 {
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
._showcaseSlot_1051h_236 {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 98px;
  min-width: 0;
  background: var(--clrAccent-10);
  border: 1px dashed var(--clrAccent-20);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}

._showcaseSlotInner_1051h_249 {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
}

._showcaseIconWrap_1051h_260 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}
._showcaseIconWrap_1051h_260 img,
._showcaseIconWrap_1051h_260 svg {
  width: 68%;
  height: 68%;
  color: var(--clrTextTertiary);
  object-fit: contain;
}

._showcaseTitle_1051h_275 {
  display: -webkit-box;
  width: 100%;
  min-height: 2.2em;
  color: var(--clrTextSecondary);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._filledSlot_1051h_290 {
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tier-color) 18%, transparent), transparent 64%), var(--clrSecondary);
  border-color: color-mix(in srgb, var(--tier-color) 72%, var(--clrAccent-20));
  border-style: solid;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-color) 18%, transparent);
}
._filledSlot_1051h_290 ._showcaseIconWrap_1051h_260 {
  background: color-mix(in srgb, var(--tier-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 42%, transparent);
  border-radius: 50%;
}
._filledSlot_1051h_290 svg {
  color: var(--tier-color);
}
._filledSlot_1051h_290 ._showcaseTitle_1051h_275 {
  color: color-mix(in srgb, var(--tier-color) 30%, var(--clrTextPrimary));
}

._compactShowcase_1051h_308 {
  justify-content: center;
}
._compactShowcase_1051h_308 > * {
  flex: 0 0 48px;
  min-width: 48px;
}
._compactShowcase_1051h_308 ._showcaseSlot_1051h_236 {
  min-height: 48px;
}
._compactShowcase_1051h_308 ._showcaseSlotInner_1051h_249 {
  padding: 5px;
  gap: 0;
}
._compactShowcase_1051h_308 ._showcaseIconWrap_1051h_260 {
  width: 32px;
  height: 32px;
}
._compactShowcase_1051h_308 ._showcaseTitle_1051h_275 {
  display: none;
}

._detailDrawer_1051h_330 {
  max-width: 620px;
}

._detailContent_1051h_334 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

._detailIcon_1051h_100 {
  position: relative;
  width: 118px;
  height: 118px;
  margin-top: 8px;
  overflow: visible;
}

._detailLeaderOverlay_1051h_351 {
  position: absolute;
  right: -14px;
  bottom: -10px;
  z-index: 1;
}
._detailLeaderOverlay_1051h_351 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._detailBadges_1051h_80 {
  display: flex;
  gap: 8px;
}
._detailBadges_1051h_80 span {
  color: #101418;
  background: var(--tier-color);
}

._detailFlavor_1051h_372 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 1rem;
  line-height: 1.45;
}

._detailProgress_1051h_163 {
  width: min(100%, 420px);
}

._detailMeta_1051h_383 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.9rem;
}

._shareButton_1051h_389 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  height: 42px;
  padding: 0 16px;
  color: var(--clrTextPrimaryReverse);
  font-weight: 800;
  background: var(--clrPrimaryReverse);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
._shareButton_1051h_389 svg {
  width: 18px;
  height: 18px;
}

._shareCard_1051h_102 {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1080px;
  height: 1350px;
  pointer-events: none;
}

._shareCardInner_1051h_418 {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 96px;
  color: #f8fafc;
  text-align: center;
  background: #101418;
}
._shareCardInner_1051h_418 h2 {
  max-width: 820px;
  margin: 0;
  font-size: 76px;
  line-height: 1.05;
}
._shareCardInner_1051h_418 p {
  max-width: 760px;
  margin: 0;
  font-size: 34px;
  line-height: 1.25;
}

._shareCardIcon_1051h_102 {
  position: relative;
  width: 280px;
  height: 280px;
  overflow: visible;
}

._shareCardLeaderOverlay_1051h_451 {
  position: absolute;
  right: -28px;
  bottom: -20px;
  z-index: 1;
}
._shareCardLeaderOverlay_1051h_451 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._toastRegion_1051h_463 {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  left: 50%;
  z-index: 2000;
  width: min(92vw, 440px);
  transform: translateX(-50%);
}

._toast_1051h_81 {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: color-mix(in srgb, var(--clrSecondary) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 68%, transparent);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  cursor: pointer;
  touch-action: none;
}

._toastIcon_1051h_101 {
  width: 52px;
  height: 52px;
}

._toastCopy_1051h_495 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
._toastCopy_1051h_495 span {
  color: var(--clrTextTertiary);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
._toastCopy_1051h_495 strong {
  overflow: hidden;
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._toastTier_1051h_81 {
  color: #101418;
  background: var(--tier-color);
}

@media (max-width: 560px) {
  ._card_1051h_14 {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 142px;
    padding: 14px;
  }
  ._cardTitle_1051h_137 {
    max-width: calc(100% - 78px);
  }
  ._achievementIcon_1051h_99 {
    width: 52px;
    height: 52px;
  }
  ._showcaseGrid_1051h_212 {
    gap: 7px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_545f7_5),
html:has(body._themePastelLight_545f7_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_545f7_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_545f7_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._wrap_545f7_216 {
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
}

._avatar_545f7_222 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--clrTertiary);
  border: 2px solid color-mix(in srgb, var(--clrSecondary) 88%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
._avatar_545f7_222 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._avatar_545f7_222 ._initial_545f7_243 {
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-weight: 800;
  line-height: 1;
  user-select: none;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1cxz1_5),
html:has(body._themePastelLight_1cxz1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1cxz1_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1cxz1_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

._option_1cxz1_225 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: var(--clrTertiary);
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
._option_1cxz1_225:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._optionSelected_1cxz1_245 {
  border-color: var(--clrTextPrimary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clrTextPrimary) 22%, transparent);
}
._optionSelected_1cxz1_245 ._mark_1cxz1_249 {
  border-color: var(--clrTextPrimary);
}
._optionSelected_1cxz1_245 ._mark_1cxz1_249::after {
  transform: scale(1);
}

._mark_1cxz1_249 {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--clrTextTertiary);
  border-radius: 50%;
}
._mark_1cxz1_249::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--clrTextPrimary);
  transform: scale(0);
  transition: transform 0.15s ease;
}

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

._label_1cxz1_285 {
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  font-weight: 700;
}

._blurb_1cxz1_291 {
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.4;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1kes1_5),
html:has(body._themePastelLight_1kes1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1kes1_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1kes1_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._overlay_1kes1_216 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}

._modal_1kes1_230 {
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}

._header_1kes1_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 6px;
}
._header_1kes1_245 ._steps_1kes1_253 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
._header_1kes1_245 ._steps_1kes1_253 ._dot_1kes1_260 {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--clrAccent-10);
  transition: background 0.2s ease;
}
._header_1kes1_245 ._steps_1kes1_253 ._dotActive_1kes1_267 {
  background: var(--clrTextPrimary);
}
._header_1kes1_245 ._close_1kes1_270 {
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--clrTextSecondary);
  cursor: pointer;
}
._header_1kes1_245 ._close_1kes1_270 svg {
  width: 100%;
  height: 100%;
}

._body_1kes1_284 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 22px 4px;
}
._body_1kes1_284 h2 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1.4rem;
  font-weight: 800;
}
._body_1kes1_284 ._sub_1kes1_302 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

._handleField_1kes1_309 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._handleField_1kes1_309 ._at_1kes1_320 {
  color: var(--clrTextSecondary);
  font-size: 1.1rem;
  font-weight: 700;
}
._handleField_1kes1_309 input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--clrTextPrimary);
  font-size: 1.1rem;
  font-weight: 600;
}
._handleField_1kes1_309 ._okIcon_1kes1_335 {
  width: 22px;
  height: 22px;
  color: var(--clrSuccess-100);
}

._hint_1kes1_341 {
  font-size: 0.82rem;
  min-height: 18px;
}
._hint_1kes1_341 ._ok_1kes1_335 {
  color: var(--clrSuccess-100);
  font-weight: 600;
}
._hint_1kes1_341 ._bad_1kes1_349 {
  color: var(--clrError-100);
  font-weight: 600;
}
._hint_1kes1_341 span {
  color: var(--clrTextSecondary);
}

._avatarPick_1kes1_357 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
._avatarPick_1kes1_357 span {
  color: var(--clrTextPrimary);
  font-size: 0.9rem;
  font-weight: 600;
}

._bio_1kes1_375 {
  width: 100%;
  resize: none;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  outline: 0;
}

._counter_1kes1_389 {
  align-self: flex-end;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
}

._previewCard_1kes1_395 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 22px 16px 18px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 12px;
  text-align: center;
}
._previewCard_1kes1_395 ._previewName_1kes1_407 {
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1.3rem;
  font-weight: 800;
}
._previewCard_1kes1_395 ._previewHandle_1kes1_413 {
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  font-weight: 600;
}
._previewCard_1kes1_395 ._previewBio_1kes1_418 {
  color: var(--clrTextSecondary);
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 30ch;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 div strong {
  color: var(--clrTextPrimary);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
._previewCard_1kes1_395 ._previewStats_1kes1_424 div span {
  color: var(--clrTextTertiary);
  font-size: 0.72rem;
  font-weight: 600;
}

._privacyNote_1kes1_450 {
  margin: 12px 0 0;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
  line-height: 1.45;
}

._audienceQuestion_1kes1_457 {
  margin-top: 4px;
  color: var(--clrTextPrimary);
  font-size: 0.88rem;
  font-weight: 700;
}

._error_1kes1_464 {
  margin: 4px 22px 0;
  padding: 8px 12px;
  background: var(--clrError-100);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
}

._footer_1kes1_473 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 20px;
}
._footer_1kes1_473 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
._footer_1kes1_473 button svg {
  width: 18px;
  height: 18px;
}
._footer_1kes1_473 button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
._footer_1kes1_473 ._secondary_1kes1_503 {
  background: transparent;
  border-color: var(--clrAccent-10);
  color: var(--clrTextSecondary);
}
._footer_1kes1_473 ._primary_1kes1_508 {
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1r0ko_5),
html:has(body._themePastelLight_1r0ko_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1r0ko_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1r0ko_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._body_1r0ko_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 8px;
}

._input_1r0ko_226,
._textarea_1r0ko_227 {
  width: 100%;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 1rem;
  outline: 0;
}

._textarea_1r0ko_227 {
  resize: none;
  line-height: 1.4;
}

._counter_1r0ko_244 {
  align-self: flex-end;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
  margin-top: -6px;
}

._hint_1r0ko_251 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

._error_1r0ko_258 {
  padding: 8px 12px;
  background: var(--clrError-100);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
}

._save_1r0ko_266 {
  min-height: 48px;
  border-radius: 8px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 0;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._save_1r0ko_266:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._avatarPreview_1r0ko_281 {
  align-self: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--clrAccent-10);
}

._buttonRow_1r0ko_290 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
}
._buttonRow_1r0ko_290 > * {
  flex: 1;
}

._secondary_1r0ko_302 {
  min-height: 48px;
  border-radius: 8px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
._secondary_1r0ko_302:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_i7fbp_5),
html:has(body._themePastelLight_i7fbp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_i7fbp_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_i7fbp_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._wrap_i7fbp_216 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
}

._wrapFull_i7fbp_225 {
  flex-shrink: 0;
}

._wrapCompact_i7fbp_229 {
  flex-shrink: 0;
}

._btn_i7fbp_233 {
  background: var(--clrTextPrimary);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--clrSecondary);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
._btn_i7fbp_233:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._full_i7fbp_247 {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

._compact_i7fbp_254 {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.82rem;
}

._following_i7fbp_260 {
  background: transparent;
  border-color: var(--clrAccent-30);
  color: var(--clrTextPrimary);
}
._following_i7fbp_260:hover:not(:disabled), ._following_i7fbp_260:focus-visible {
  border-color: var(--clrError-100);
  color: var(--clrError-100);
}

._full_i7fbp_247._following_i7fbp_260 {
  border-color: var(--clrAccent-20);
}

._note_i7fbp_274 {
  color: var(--clrTextTertiary);
  font-size: 0.82rem;
}

._wrapCompact_i7fbp_229 ._note_i7fbp_274 {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: 220px;
  padding: 7px 12px;
  background: var(--clrTextPrimary);
  border-radius: 6px;
  color: var(--clrSecondary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_8jdgc_5),
html:has(body._themePastelLight_8jdgc_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_8jdgc_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_8jdgc_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._row_8jdgc_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  padding: 6px 8px;
  border-radius: 8px;
}
._row_8jdgc_216:hover {
  background: color-mix(in srgb, var(--clrTertiary) 55%, transparent);
}

._rowLink_8jdgc_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

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

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

._name_8jdgc_251 {
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowHandle_8jdgc_269 {
  max-width: 100%;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._teamTag_8jdgc_278 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._devChip_8jdgc_297 {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: 1px solid color-mix(in srgb, #a855f7 60%, transparent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._rowSkel_8jdgc_310 {
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shimmer_8jdgc_1 1.4s ease infinite;
}

@keyframes _shimmer_8jdgc_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_16nxl_5),
html:has(body._themePastelLight_16nxl_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_16nxl_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_16nxl_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._menuItem_16nxl_216 {
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
._menuItem_16nxl_216:hover {
  background: var(--clrAccent-10);
}

._menuDanger_16nxl_234 {
  color: var(--clrError-100);
}

._body_16nxl_238 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 8px;
}

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

._radioRow_16nxl_257 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
._radioRow_16nxl_257 input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--clrAccent-100);
  flex-shrink: 0;
}

._radioRowActive_16nxl_280 {
  border-color: var(--clrAccent-100);
}

._textarea_16nxl_284 {
  width: 100%;
  padding: 12px 14px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
  outline: 0;
}

._counter_16nxl_298 {
  align-self: flex-end;
  margin-top: -6px;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
}

._hint_16nxl_305 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

._error_16nxl_312 {
  padding: 8px 12px;
  background: var(--clrError-100);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
}

._submit_16nxl_320 {
  min-height: 48px;
  background: var(--clrTextPrimary);
  border: 0;
  border-radius: 8px;
  color: var(--clrSecondary);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._submit_16nxl_320:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._cancel_16nxl_335 {
  min-height: 48px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  color: var(--clrTextPrimary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
._cancel_16nxl_335:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._danger_16nxl_350 {
  min-height: 48px;
  background: var(--clrError-100);
  border: 0;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._danger_16nxl_350:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._buttonRow_16nxl_365 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
}
._buttonRow_16nxl_365 > * {
  flex: 1;
}

._sent_16nxl_377 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 26px 12px;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

._sentIcon_16nxl_391 {
  font-size: 1.8rem;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_u1074_5),
html:has(body._themePastelLight_u1074_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_u1074_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_u1074_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._profileContainer_u1074_216 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  padding-left: 22px;
  padding-right: 22px;
}
._profileContainer_u1074_216 ._pageHeader_u1074_229 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
}
._profileContainer_u1074_216 ._pageHeaderTitle_u1074_238 {
  flex: 1;
}
._profileContainer_u1074_216 ._backBtn_u1074_241 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
._profileContainer_u1074_216 ._backBtn_u1074_241 svg {
  width: 18px;
  height: 18px;
}
._profileContainer_u1074_216 ._menuWrap_u1074_259 {
  position: relative;
  margin-left: auto;
}
._profileContainer_u1074_216 ._gearBtn_u1074_263 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  cursor: pointer;
}
._profileContainer_u1074_216 ._gearBtn_u1074_263 svg {
  width: 22px;
  height: 22px;
}
._profileContainer_u1074_216 ._gearBtn_u1074_263:hover {
  background: var(--clrTertiary);
}
._profileContainer_u1074_216 ._menu_u1074_259 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
._profileContainer_u1074_216 ._menu_u1074_259 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
._profileContainer_u1074_216 ._menu_u1074_259 button svg {
  width: 18px;
  height: 18px;
  color: var(--clrTextSecondary);
}
._profileContainer_u1074_216 ._menu_u1074_259 button:hover {
  background: var(--clrTertiary);
}
._profileContainer_u1074_216 ._menu_u1074_259 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._profileContainer_u1074_216 ._menuDivider_u1074_332 {
  height: 1px;
  margin: 4px 6px;
  background: var(--clrAccent-10);
}
._profileContainer_u1074_216 ._menuDanger_u1074_337 {
  color: var(--clrError-100) !important;
}
._profileContainer_u1074_216 ._menuDanger_u1074_337 svg {
  color: var(--clrError-100) !important;
}
._profileContainer_u1074_216 ._copiedToast_u1074_343 {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  z-index: 60;
  padding: 8px 14px;
  white-space: nowrap;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: _toastIn_u1074_1 0.18s ease;
}
@keyframes _toastIn_u1074_1 {
  from {
    opacity: 0;
    transform: translate(8px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
._profileContainer_u1074_216 ._heroNameRow_u1074_370 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
._profileContainer_u1074_216 ._heroNameRow_u1074_370 h1 {
  margin: 0 !important;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._heroText_u1074_390 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._profileNameRow_u1074_398 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._profileNameRow_u1074_398 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 5.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._heroHandle_u1074_414 {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
._profileContainer_u1074_216 ._profileHero_u1074_380 ._heroHandle_u1074_414:hover {
  color: var(--clrTextPrimary);
}
._profileContainer_u1074_216 ._goPublicCard_u1074_426,
._profileContainer_u1074_216 ._socialCard_u1074_427 {
  width: 100%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._profileContainer_u1074_216 ._goPublicCard_u1074_426 {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}
._profileContainer_u1074_216 ._goPublicCard_u1074_426 ._chevronIcon_u1074_442 {
  width: 21px;
  height: 21px;
  color: var(--clrTextTertiary);
}
._profileContainer_u1074_216 ._socialCard_u1074_427 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
}
._profileContainer_u1074_216 ._socialCardMain_u1074_456 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
._profileContainer_u1074_216 ._socialCardIcon_u1074_465 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--clrTertiary);
  color: #12a8ff;
}
._profileContainer_u1074_216 ._socialCardIcon_u1074_465 svg {
  width: 22px;
  height: 22px;
}
._profileContainer_u1074_216 ._socialCardText_u1074_482 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
._profileContainer_u1074_216 ._socialCardText_u1074_482 strong {
  color: var(--clrTextPrimary);
  font-size: 0.98rem;
  font-weight: 700;
}
._profileContainer_u1074_216 ._socialCardText_u1074_482 span {
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.35;
}
._profileContainer_u1074_216 ._socialCardActions_u1074_500 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._profileContainer_u1074_216 ._socialGhost_u1074_507,
._profileContainer_u1074_216 ._socialPrimary_u1074_508 {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
._profileContainer_u1074_216 ._socialGhost_u1074_507:disabled,
._profileContainer_u1074_216 ._socialPrimary_u1074_508:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._profileContainer_u1074_216 ._socialGhost_u1074_507 {
  background: transparent;
  border-color: var(--clrAccent-10);
  color: var(--clrTextPrimary);
}
._profileContainer_u1074_216 ._socialPrimary_u1074_508 {
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statsTiles_u1074_543 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 72px;
  padding: 10px 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  text-align: center;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 strong {
  color: var(--clrTextPrimary);
  font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
}
._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 span {
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
}
._profileContainer_u1074_216 ._showcasePanel_u1074_574 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._profileContainer_u1074_216 ._showcasePanel_u1074_574 ._showcaseHeader_u1074_586 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: 4px;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 0 2px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--clrAccent-10);
  cursor: pointer;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 button:first-child {
  border-top: 0;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 button span {
  font-size: 1.05rem;
  font-weight: 600;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._statisticsIcon_u1074_628,
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._achievementsIcon_u1074_629 {
  width: 22px;
  height: 22px;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._statisticsIcon_u1074_628 {
  color: #12a8ff;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._achievementsIcon_u1074_629 {
  color: #f59e0b;
}
._profileContainer_u1074_216 ._profileLinks_u1074_598 ._chevronIcon_u1074_442 {
  width: 21px;
  height: 21px;
  color: var(--clrTextTertiary);
  justify-self: end;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 24px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 {
  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_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  margin: 0;
  text-align: center;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._subtitle_u1074_675 {
  font-size: 14px;
  color: var(--clrTextSecondary);
  text-align: center;
  margin: 0;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 ._icon_u1074_695 {
  font-size: 24px;
  flex-shrink: 0;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 div h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrTextPrimary);
  margin: 0;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 div p {
  font-size: 12px;
  color: var(--clrTextSecondary);
  margin: 0;
  line-height: 1.4;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._primaryButton_u1074_727 {
  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_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._primaryButton_u1074_727:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._primaryButton_u1074_727:active {
  transform: translateY(0);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._secondaryButton_u1074_746 {
  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_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._secondaryButton_u1074_746:hover {
  background: var(--clrSecondary);
  border-color: var(--clrAccent-30);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._guestActionButtons_u1074_719 ._secondaryButton_u1074_746:active {
  transform: scale(0.98);
}
._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._dataWarning_u1074_764 {
  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_u1074_216 {
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 {
    padding: 16px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 {
    padding: 24px;
  }
}
@media (max-width: 480px) {
  ._profileContainer_u1074_216 {
    padding-left: 16px;
    padding-right: 16px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 {
    padding: 12px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statsTiles_u1074_543 {
    gap: 10px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 {
    min-height: 72px;
    padding: 9px 4px;
  }
  ._profileContainer_u1074_216 ._profileDashboard_u1074_531 ._statTile_u1074_548 span {
    font-size: 0.72rem;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 {
    padding: 8px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 {
    padding: 20px;
    gap: 20px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 h2 {
    font-size: 16px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 {
    gap: 16px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 {
    gap: 12px;
  }
  ._profileContainer_u1074_216 ._guestPromptContainer_u1074_645 ._guestPrompt_u1074_645 ._benefitsList_u1074_681 ._benefit_u1074_681 ._icon_u1074_695 {
    font-size: 16px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_t5rv8_5),
html:has(body._themePastelLight_t5rv8_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_t5rv8_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_t5rv8_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._page_t5rv8_216 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 28px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(98px + env(safe-area-inset-bottom) + 24px);
  padding-left: 22px;
  padding-right: 22px;
}

._back_t5rv8_230 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
._back_t5rv8_230 svg {
  width: 18px;
  height: 18px;
}

._hero_t5rv8_250 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  padding: 8px 0 4px;
}
._hero_t5rv8_250 h1 {
  margin: 6px 0 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
}
._hero_t5rv8_250 ._nameRow_t5rv8_267 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
._hero_t5rv8_250 ._handle_t5rv8_274 {
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 600;
}
._hero_t5rv8_250 ._bio_t5rv8_279 {
  margin: 4px 0 0;
  color: var(--clrTextSecondary);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 36ch;
}
._hero_t5rv8_250 ._counts_t5rv8_286 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
}
._hero_t5rv8_250 ._counts_t5rv8_286 strong {
  color: var(--clrTextPrimary);
  font-weight: 800;
}

._followBtn_t5rv8_301,
._editBtn_t5rv8_302 {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 36px;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
}

._followBtn_t5rv8_301 {
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
}

._editBtn_t5rv8_302 {
  background: transparent;
  border-color: var(--clrAccent-30);
  color: var(--clrTextPrimary);
}

._pageHeader_t5rv8_324 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
}

._headerRight_t5rv8_334 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

._menuWrap_t5rv8_343 {
  position: relative;
}

._privateLock_t5rv8_347 {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
._privateLock_t5rv8_347 svg {
  width: 21px;
  height: 21px;
}
._privateLock_t5rv8_347:hover {
  color: var(--clrTextPrimary);
}
._privateLock_t5rv8_347 ._lockTip_t5rv8_370 {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 61;
  white-space: nowrap;
  padding: 5px 10px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
._privateLock_t5rv8_347 ._lockTip_t5rv8_370::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-bottom-color: var(--clrTextPrimary);
}
._privateLock_t5rv8_347:hover ._lockTip_t5rv8_370, ._privateLock_t5rv8_347:focus ._lockTip_t5rv8_370, ._privateLock_t5rv8_347:focus-visible ._lockTip_t5rv8_370 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

._gearBtn_t5rv8_404 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  cursor: pointer;
}
._gearBtn_t5rv8_404 svg {
  width: 22px;
  height: 22px;
}
._gearBtn_t5rv8_404:hover {
  background: var(--clrTertiary);
}

._menu_t5rv8_343 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
._menu_t5rv8_343 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
._menu_t5rv8_343 button svg {
  width: 18px;
  height: 18px;
  color: var(--clrTextSecondary);
}
._menu_t5rv8_343 button:hover {
  background: var(--clrTertiary);
}
._menu_t5rv8_343 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._menuDivider_t5rv8_475 {
  height: 1px;
  margin: 4px 6px;
  background: var(--clrAccent-10);
}

._menuDanger_t5rv8_481 {
  color: var(--clrError-100) !important;
}
._menuDanger_t5rv8_481 svg {
  color: var(--clrError-100) !important;
}

._copiedToast_t5rv8_488 {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  z-index: 60;
  padding: 8px 14px;
  white-space: nowrap;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: _toastIn_t5rv8_1 0.18s ease;
}

@keyframes _toastIn_t5rv8_1 {
  from {
    opacity: 0;
    transform: translate(8px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
._authCta_t5rv8_516 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

._signInLink_t5rv8_525 {
  padding: 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
._signInLink_t5rv8_525:hover {
  color: var(--clrTextPrimary);
}

._privateNote_t5rv8_538 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 999px;
  color: var(--clrTextSecondary);
  font-size: 0.92rem;
  font-weight: 600;
}
._privateNote_t5rv8_538 ._privateIcon_t5rv8_553 {
  width: 16px;
  height: 16px;
}

._statsGrid_t5rv8_558 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

._statTile_t5rv8_564 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 96px;
  padding: 14px 8px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  text-align: center;
}
._statTile_t5rv8_564 strong {
  color: var(--clrTextPrimary);
  font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1;
}
._statTile_t5rv8_564 span {
  color: var(--clrTextSecondary);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.15;
}

._leaderTile_t5rv8_591 {
  gap: 8px;
}

._subStats_t5rv8_595 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._subStats_t5rv8_595 div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._subStats_t5rv8_595 div strong {
  color: var(--clrTextPrimary);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}
._subStats_t5rv8_595 div span {
  color: var(--clrTextTertiary);
  font-size: 0.74rem;
  font-weight: 600;
}

._noStats_t5rv8_623 {
  padding: 20px;
  text-align: center;
  color: var(--clrTextTertiary);
  font-size: 0.9rem;
}

._empty_t5rv8_630 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}
._empty_t5rv8_630 ._emptyIcon_t5rv8_639 {
  font-size: 2.4rem;
}
._empty_t5rv8_630 h2 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 1.2rem;
  font-weight: 700;
}
._empty_t5rv8_630 p {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
}

._skeletonHero_t5rv8_654 {
  pointer-events: none;
}

._skelAvatar_t5rv8_658,
._skelLine_t5rv8_659,
._skelLineSm_t5rv8_660 {
  background: linear-gradient(90deg, var(--clrAccent-10) 25%, color-mix(in srgb, var(--clrAccent-10) 40%, transparent) 50%, var(--clrAccent-10) 75%);
  background-size: 200% 100%;
  animation: _shimmer_t5rv8_1 1.3s infinite;
  border-radius: 6px;
}

._skelAvatar_t5rv8_658 {
  width: 104px;
  height: 104px;
  border-radius: 50%;
}

._skelLine_t5rv8_659 {
  width: 160px;
  height: 22px;
  margin-top: 10px;
}

._skelLineSm_t5rv8_660 {
  width: 100px;
  height: 14px;
}

@keyframes _shimmer_t5rv8_1 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ===== Redesigned profile layout (wireframe) ================================ */
._profileHeader_t5rv8_693 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 12px;
  overflow: hidden;
}

._banner_t5rv8_706 {
  height: 104px;
  width: 100%;
  flex-shrink: 0;
  background: radial-gradient(100% 120% at 50% 50%, color-mix(in srgb, var(--c5, transparent) 55%, transparent), transparent 60%), radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2, #3f3f46) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3, #27272a) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1, #2f2f35), var(--c2, #3f3f46), var(--c3, #27272a), var(--c4, #2f2f35));
  background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlow_t5rv8_1 12s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._banner_t5rv8_706 {
    animation: none;
  }
}

._headerBody_t5rv8_720 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 20px 18px;
}

._seamRow_t5rv8_729 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  margin-top: -44px;
  margin-bottom: 4px;
}

._seamActions_t5rv8_742 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  align-self: flex-end;
}
@media (max-width: 560px) {
  ._seamActions_t5rv8_742 {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    justify-content: flex-start;
  }
}

._nameLine_t5rv8_760 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
._nameLine_t5rv8_760 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.45rem, 5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
}

._handle_t5rv8_274 {
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
}

._statsRow_t5rv8_783 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--clrAccent-10);
}

._stat_t5rv8_558 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--clrAccent-10);
  text-align: center;
  cursor: default;
}
._stat_t5rv8_558:last-child {
  border-right: 0;
}
._stat_t5rv8_558 strong {
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}
._stat_t5rv8_558 span {
  color: var(--clrTextTertiary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

button._stat_t5rv8_558 {
  cursor: pointer;
  transition: background 0.15s ease;
}
button._stat_t5rv8_558:hover {
  background: var(--clrTertiary);
}

._devChip_t5rv8_834 {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: 1px solid color-mix(in srgb, #a855f7 60%, transparent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

._teamTag_t5rv8_847 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._titlePill_t5rv8_865 {
  min-width: 0;
  padding: 6px 15px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  color: var(--title-ink, #fff);
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  background: radial-gradient(100% 120% at 50% 50%, color-mix(in srgb, var(--c5, transparent) 55%, transparent), transparent 60%), radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlow_t5rv8_1 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._titlePill_t5rv8_865 {
    animation: none;
  }
}

@keyframes _titleFlow_t5rv8_1 {
  0% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
  50% {
    background-position: 50% 100%, 100% 50%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
}
._bio_t5rv8_279 {
  width: 100%;
  max-width: 62ch;
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

._primaryAction_t5rv8_911,
._secondaryAction_t5rv8_912 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--clrAccent-20);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
._primaryAction_t5rv8_911:hover,
._secondaryAction_t5rv8_912:hover {
  background: var(--clrTertiary);
  border-color: var(--clrAccent-30);
  color: var(--clrTextPrimary);
}
._primaryAction_t5rv8_911 svg,
._secondaryAction_t5rv8_912 svg {
  width: 14px;
  height: 14px;
}

._primaryAction_t5rv8_911 {
  color: var(--clrTextPrimary);
}

._secondaryAction_t5rv8_912 {
  color: var(--clrTextSecondary);
}

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

._sectionTitle_t5rv8_958 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

._sectionHead_t5rv8_967 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

._sortToggle_t5rv8_976 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  color: var(--clrTextSecondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid var(--clrAccent-10);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
._sortToggle_t5rv8_976 svg {
  width: 14px;
  height: 14px;
}
._sortToggle_t5rv8_976:hover {
  color: var(--clrTextPrimary);
  border-color: var(--clrAccent-30);
}

._roundsDrawerBody_t5rv8_1003 {
  padding: 4px 0 12px;
}

._liveNotice_t5rv8_1007 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--liveGlow, var(--clrAccent-30)) 12%, transparent);
  border: 1px solid var(--liveGlowSoft, var(--clrAccent-30));
}

._liveNoticeDot_t5rv8_1021 {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--liveGlow, var(--clrTextPrimary));
  animation: _liveNoticePulse_t5rv8_1 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._liveNoticeDot_t5rv8_1021 {
    animation: none;
  }
}

@keyframes _liveNoticePulse_t5rv8_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
._liveNoticeLabel_t5rv8_1043 {
  color: var(--clrTextPrimary);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

._liveNoticeText_t5rv8_1051 {
  flex: 1;
  min-width: 160px;
  color: var(--clrTextSecondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

._liveEmpty_t5rv8_1059 {
  margin: 8px 0 0;
  padding: 14px 0;
  color: var(--clrTextTertiary);
  font-size: 0.84rem;
  text-align: center;
}

._tournamentsGrid_t5rv8_1067 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
@media (min-width: 720px) {
  ._tournamentsGrid_t5rv8_1067 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

._gridSkel_t5rv8_1079 {
  height: 282px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shimmer_t5rv8_1 1.4s ease infinite;
}

._noTournaments_t5rv8_1087 {
  padding: 24px;
  text-align: center;
  color: var(--clrTextTertiary);
  font-size: 0.9rem;
}

._visitorCta_t5rv8_1094 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 22px 16px;
  background: var(--clrSecondaryReverse);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  text-align: center;
}
._visitorCta_t5rv8_1094 p {
  margin: 0;
  color: var(--clrTextSecondaryReverse);
  font-size: 0.92rem;
}
._visitorCta_t5rv8_1094 ._followBtn_t5rv8_301 {
  margin-top: 0;
  background: var(--clrTextPrimaryReverse);
  color: var(--clrSecondaryReverse);
}
._visitorCta_t5rv8_1094 ._signInLink_t5rv8_525 {
  color: var(--clrTextSecondaryReverse);
}
._visitorCta_t5rv8_1094 ._signInLink_t5rv8_525:hover {
  color: var(--clrTextPrimaryReverse);
}

._privateTag_t5rv8_1124 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextTertiary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
._privateTag_t5rv8_1124 svg {
  width: 11px;
  height: 11px;
}

._iconAction_t5rv8_1147 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--clrAccent-20);
  color: var(--clrTextSecondary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
._iconAction_t5rv8_1147 svg {
  width: 16px;
  height: 16px;
}
._iconAction_t5rv8_1147:hover {
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}

._spectateBtn_t5rv8_1171 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--liveGlowSoft, var(--clrAccent-30));
  color: var(--clrTextPrimary);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
._spectateBtn_t5rv8_1171 svg {
  width: 14px;
  height: 14px;
}
._spectateBtn_t5rv8_1171:hover {
  border-color: var(--liveGlow, var(--clrAccent-30));
}
._spectateBtn_t5rv8_1171._spectateOn_t5rv8_1195 {
  background: color-mix(in srgb, var(--liveGlow, var(--clrAccent-30)) 22%, transparent);
  border-color: var(--liveGlow, var(--clrAccent-30));
}

._spectateHint_t5rv8_1200 {
  margin: 8px 0 0;
  color: var(--clrTextTertiary);
  font-size: 0.78rem;
  line-height: 1.4;
}

._sharesTail_t5rv8_1207 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 0;
  font-size: 13px;
  color: #a1a1aa;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1l56w_5),
html:has(body._themePastelLight_1l56w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1l56w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1l56w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._upgradeButton_1l56w_216 {
  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_1l56w_216:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1l56w_216:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1l56w_216:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

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

html:has(body._themeLight_1l56w_5),
html:has(body._themePastelLight_1l56w_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1l56w_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1l56w_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._upgradeButton_1l56w_216 {
  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_1l56w_216:hover:not(:disabled) {
  background: var(--clrAccent-100);
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._upgradeButton_1l56w_216:active:not(:disabled) {
  transform: translateY(0);
}
._upgradeButton_1l56w_216:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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

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

html:has(body._themeLight_1lvdo_5),
html:has(body._themePastelLight_1lvdo_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1lvdo_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1lvdo_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._premiumSection_1lvdo_216 {
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumHeader_1lvdo_231 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumHeader_1lvdo_231 ._starIcon_1lvdo_242 {
  font-size: 32px;
  color: #ffd700;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumHeader_1lvdo_231 ._premiumTitle_1lvdo_247 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumBanner_1lvdo_253 {
  margin: 12px 0;
  max-width: 350px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumBanner_1lvdo_253 img {
  width: 100%;
  height: 100%;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._premiumDescription_1lvdo_261 {
  color: var(--clrAccent-80);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._cardHeader_1lvdo_268 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._cardHeader_1lvdo_268 ._starIconGold_1lvdo_276 {
  font-size: 48px;
  color: #ffd700;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: _pulse_1lvdo_1 2s ease-in-out infinite;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._cardHeader_1lvdo_268 ._cardTitle_1lvdo_282 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
  margin: 0;
  line-height: 1.2;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 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_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li:hover {
  transform: translateX(4px);
  border-left-color: #ffd700;
  background: var(--clrBackground-200);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li ._checkmark_1lvdo_319 {
  font-weight: 700;
  color: #ffd700;
  font-size: 20px;
  flex-shrink: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._featureList_1lvdo_289 li span:last-child {
  font-weight: 500;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._priceSection_1lvdo_328 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._priceSection_1lvdo_328 ._priceLabel_1lvdo_339 {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._priceSection_1lvdo_328 ._price_1lvdo_328 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._successMessage_1lvdo_352 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._errorMessage_1lvdo_362 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._paymentButtonContainer_1lvdo_371 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionManagement_1lvdo_379 {
  margin-top: 16px;
  width: 100%;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 {
  color: var(--clrAccent-60);
  font-size: 14px;
  text-align: center;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--clrAccent-10);
  border-radius: 8px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusActive_1lvdo_392 {
  color: var(--clrSuccess-100);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusActive_1lvdo_392 svg {
  color: green;
  font-size: 16px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusCanceled_1lvdo_406 {
  color: var(--clrWarning);
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._subscriptionInfo_1lvdo_383 ._statusCanceled_1lvdo_406 svg {
  color: red;
  font-size: 16px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingOptions_1lvdo_420 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  ._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingOptions_1lvdo_420 {
    flex-direction: row;
    gap: 32px;
  }
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434:hover {
  transform: translateY(-4px);
  border-color: var(--clrAccent-50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._cardContent_1lvdo_453 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._pricingTitle_1lvdo_461 {
  font-size: 20px;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._priceSection_1lvdo_328 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._priceSection_1lvdo_328 ._price_1lvdo_328 {
  font-size: 36px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._priceSection_1lvdo_328 ._priceLabel_1lvdo_339 {
  font-size: 16px;
  color: var(--clrAccent-60);
  font-weight: 500;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._spacer_1lvdo_485 {
  height: 20px;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434 ._savings_1lvdo_488 {
  font-size: 14px;
  color: #ffd700;
  font-weight: 600;
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494:hover {
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
  border-color: #ffd700;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494 ._recommendedBadge_1lvdo_503 {
  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_1lvdo_216 ._premiumCard_1lvdo_221 ._pricingCard_1lvdo_434._recommended_1lvdo_494 ._pricingTitle_1lvdo_461 {
  color: #ffd700;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-20);
  text-align: center;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 ._troubleshootButton_1lvdo_532 {
  background: none;
  border: none;
  color: var(--clrAccent-80);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s ease;
  padding: 0;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 ._troubleshootButton_1lvdo_532:hover {
  color: #ffd700;
}
._premiumSection_1lvdo_216 ._premiumCard_1lvdo_221 ._troubleshootSection_1lvdo_521 ._troubleshootText_1lvdo_527 ._troubleshootButton_1lvdo_532:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_pk0zs_5),
html:has(body._themePastelLight_pk0zs_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_pk0zs_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_pk0zs_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

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

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

html:has(body._themeLight_bum5e_5),
html:has(body._themePastelLight_bum5e_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_bum5e_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_bum5e_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._subscriptionInfo_bum5e_216 {
  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_bum5e_216:has(._statusActive_bum5e_229) {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.1);
}
._subscriptionInfo_bum5e_216:has(._statusCanceled_bum5e_233) {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.1);
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusActive_bum5e_229 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusActive_bum5e_229 svg {
  font-size: 18px;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusCanceled_bum5e_233 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionTitle_bum5e_246 ._statusCanceled_bum5e_233 svg {
  font-size: 18px;
}
._subscriptionInfo_bum5e_216 ._subscriptionLabel_bum5e_237 ._subscriptionDescription_bum5e_269 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._subscriptionInfo_bum5e_216 ._managedViaApp_bum5e_274 {
  font-size: 12px;
  color: var(--clrAccent-50);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  white-space: nowrap;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_wj85s_5),
html:has(body._themePastelLight_wj85s_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_wj85s_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_wj85s_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._deleteAccount_wj85s_216 {
  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_wj85s_216 ._deleteLabel_wj85s_229 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
._deleteAccount_wj85s_216 ._deleteLabel_wj85s_229 ._deleteTitle_wj85s_238 {
  font-size: 16px;
  font-weight: 600;
  color: #ef4444;
}
._deleteAccount_wj85s_216 ._deleteLabel_wj85s_229 ._deleteDescription_wj85s_243 {
  font-size: 13px;
  color: var(--clrAccent-60);
  line-height: 1.4;
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248 {
  padding: 10px 20px;
  margin: 0;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 200px;
  min-width: fit-content;
  white-space: nowrap;
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248:active:not(:disabled) {
  transform: scale(0.98);
}
._deleteAccount_wj85s_216 ._deleteButton_wj85s_248:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

@keyframes _fadeIn_wj85s_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_wj85s_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_w753u_5),
html:has(body._themePastelLight_w753u_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_w753u_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_w753u_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._settingsSection_w753u_216 {
  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_w753u_216 ._settingsHeader_w753u_228 {
  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_w753u_216 ._settingsHeader_w753u_228:hover {
  background: rgba(255, 255, 255, 0.03);
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._settingsTitle_w753u_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._settingsTitle_w753u_245 svg {
  font-size: 1.25rem;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._settingsTitle_w753u_245 span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._chevron_w753u_261 {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--clrAccent-100);
}
._settingsSection_w753u_216 ._settingsHeader_w753u_228 ._chevron_w753u_261._expanded_w753u_266 {
  transform: rotate(180deg);
}
._settingsSection_w753u_216._flat_w753u_269 {
  background: transparent;
  border: none;
  overflow: visible;
}
._settingsSection_w753u_216._flat_w753u_269 ._settingsContent_w753u_274 {
  padding: 0;
  gap: 18px;
}
._settingsSection_w753u_216 ._section_w753u_278 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_w753u_216 ._sectionHeader_w753u_285 {
  padding: 0 4px;
  color: var(--clrTextSecondary);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
._settingsSection_w753u_216 ._sectionGroup_w753u_293 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  overflow: hidden;
}
._settingsSection_w753u_216 ._sectionGroup_w753u_293 ._settingItem_w753u_304 {
  padding: 12px 14px;
  border-bottom: 1px solid var(--clrAccent-10);
}
._settingsSection_w753u_216 ._sectionGroup_w753u_293 ._settingItem_w753u_304:last-child {
  border-bottom: none;
}
._settingsSection_w753u_216 ._versionRow_w753u_311 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 8px;
  animation: _slideDown_w753u_1 0.2s ease-out;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304:last-child {
  border-bottom: none;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--clrAccent-100);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 ._settingLabelWithBadge_w753u_353 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingLabel_w753u_339 ._settingDescription_w753u_360 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
  font-weight: 400;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingValue_w753u_365 {
  font-size: 14px;
  color: var(--clrAccent-60);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--clrAccent-10);
  background: var(--clrTertiary);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._emailValue_w753u_373 {
  font-size: 0.875rem;
  flex: 1;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 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_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 a:hover {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._supportLink_w753u_377 a svg {
  font-size: 0.875rem;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._projVersion_w753u_407 {
  font-size: 0.75rem;
  color: var(--clrAccent-50);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418 {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._themeAuto_w753u_427 {
  background: linear-gradient(135deg, #101418 0 50%, #F4F4F5 50% 100%);
  border: 2px solid #6b7280;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._themeDark_w753u_131 {
  background: #101418;
  border: 2px solid #212327;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._themeLight_w753u_5 {
  background: #F4F4F5;
  border: 2px solid #E4E4E7;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._active_w753u_443 {
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--clrAccent-30);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418._disabled_w753u_447, ._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._themeSelector_w753u_411 ._themeSquare_w753u_418:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451 {
  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_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451:hover:not(:disabled) {
  border-color: var(--clrAccent-30);
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._settingButton_w753u_451 svg {
  font-size: 1rem;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._logoutButton_w753u_478 {
  background: transparent;
  border-color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482._disabled_w753u_447 {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482._disabled_w753u_447 ._toggleSlider_w753u_493 {
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input {
  opacity: 0;
  width: 0;
  height: 0;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input:checked + ._toggleSlider_w753u_493 {
  background-color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input:checked + ._toggleSlider_w753u_493:before {
  transform: translateX(20px);
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 input:disabled + ._toggleSlider_w753u_493 {
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 ._toggleSlider_w753u_493 {
  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_w753u_216 ._settingsContent_w753u_274 ._settingItem_w753u_304 ._toggle_w753u_482 ._toggleSlider_w753u_493:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--clrAccent-60);
  transition: 0.3s;
  border-radius: 50%;
}
._settingsSection_w753u_216 ._modal_w753u_533 {
  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_w753u_1 0.2s ease;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 {
  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_w753u_1 0.3s ease;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clrAccent-100);
  margin: 0;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalInput_w753u_568 {
  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_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalInput_w753u_568:focus {
  outline: none;
  border-color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalInput_w753u_568::placeholder {
  color: var(--clrAccent-30);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalError_w753u_585 {
  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_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 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_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalCancel_w753u_614 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrAccent-80);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalCancel_w753u_614:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalConfirm_w753u_622 {
  background: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
  color: var(--clrPrimary);
}
._settingsSection_w753u_216 ._modal_w753u_533 ._modalContent_w753u_548 ._modalButtons_w753u_593 ._modalConfirm_w753u_622:hover:not(:disabled) {
  opacity: 0.9;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 {
  border-color: rgba(239, 68, 68, 0.3);
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerTitle_w753u_633 {
  color: #ef4444;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 {
  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_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 p {
  margin: 0;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 strong {
  color: #ef4444;
  font-weight: 700;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 ul {
  margin: 0;
  padding-left: 20px;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerWarning_w753u_636 ul li {
  margin: 4px 0;
  color: var(--clrAccent-80);
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerConfirm_w753u_664 {
  background: rgba(239, 68, 68, 0.9);
  border-color: #ef4444;
  color: white;
}
._settingsSection_w753u_216 ._dangerModal_w753u_630 ._dangerConfirm_w753u_664:hover:not(:disabled) {
  background: #ef4444;
}

@keyframes _slideDown_w753u_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes _fadeIn_w753u_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _slideUp_w753u_1 {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ===== Team tag + Title (PRO) ============================================== */
._proTag_w753u_702 {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--clrAccent-10);
  color: var(--clrTextSecondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

._modalHint_w753u_715 {
  margin: 8px 0 0;
  color: var(--clrTextSecondary);
  font-size: 0.82rem;
  line-height: 1.4;
}

._titleList_w753u_722 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 4px 4px 8px;
}

._titleOption_w753u_732 {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--clrTertiary);
  border: 2px solid transparent;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._titleOption_w753u_732:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._titlePreview_w753u_749 {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  background: radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlowOpt_w753u_1 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._titlePreview_w753u_749 {
    animation: none;
  }
}

._titleSelected_w753u_762 {
  border-color: var(--clrTextPrimary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clrTextPrimary) 25%, transparent);
}

@keyframes _titleFlowOpt_w753u_1 {
  0% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }
  50% {
    background-position: 100% 50%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 0% 50%;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1d264_5),
html:has(body._themePastelLight_1d264_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1d264_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1d264_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._container_1d264_216 {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  padding-left: 22px;
  padding-right: 22px;
}

._header_1d264_230 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
._header_1d264_230 ._back_1d264_237 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
._header_1d264_230 ._back_1d264_237 svg {
  width: 18px;
  height: 18px;
}
._header_1d264_230 h1 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
}

@media (max-width: 480px) {
  ._container_1d264_216 {
    padding-left: 16px;
    padding-right: 16px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_wxi20_5),
html:has(body._themePastelLight_wxi20_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_wxi20_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_wxi20_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._container_wxi20_216 {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  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;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 20px;
}

._header_wxi20_231 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
._header_wxi20_231 h1 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.6rem;
  color: var(--clrTextPrimary);
}

._back_wxi20_245 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--clrTextSecondary);
  font-size: 0.9rem;
  cursor: pointer;
}
._back_wxi20_245 svg {
  width: 16px;
  height: 16px;
}

._previewCard_wxi20_263 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}

._previewAvatar_wxi20_275 {
  position: relative;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

._previewCamera_wxi20_284 {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 2px solid var(--clrSecondary);
}
._previewCamera_wxi20_284 svg {
  width: 13px;
  height: 13px;
}

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

._previewName_wxi20_315 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--clrTextPrimary);
  font-weight: 800;
  font-size: 1.05rem;
}

._previewTeam_wxi20_326 {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextSecondary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

._previewHandle_wxi20_337 {
  color: var(--clrTextSecondary);
  font-size: 0.85rem;
}

._previewTitle_wxi20_342 {
  margin-top: 2px;
  color: var(--clrTextTertiary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._group_wxi20_350 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
}

._groupHeader_wxi20_358 {
  margin: 0;
  color: var(--clrTextPrimary);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._groupHint_wxi20_367 {
  margin: 0 0 8px;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
}

._card_wxi20_373 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  overflow: hidden;
}

._row_wxi20_385 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
._row_wxi20_385 + ._row_wxi20_385 {
  border-top: 1px solid var(--clrAccent-10);
}
._row_wxi20_385:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

._rowDisabled_wxi20_406 {
  opacity: 0.55;
}

._rowIcon_wxi20_410 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}
._rowIcon_wxi20_410 svg {
  width: 18px;
  height: 18px;
}

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

._rowLabel_wxi20_438 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  font-weight: 700;
}

._rowValue_wxi20_449 {
  max-width: 100%;
  color: var(--clrTextSecondary);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowChevron_wxi20_458 {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--clrTextTertiary);
}

._proTag_wxi20_465 {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextSecondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

._toggle_wxi20_476 {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
}
._toggle_wxi20_476 input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
._toggle_wxi20_476 input:checked + ._toggleTrack_wxi20_490 {
  background: var(--clrSuccess-50);
}
._toggle_wxi20_476 input:checked + ._toggleTrack_wxi20_490::before {
  transform: translateX(20px);
}
._toggle_wxi20_476 input:disabled {
  cursor: not-allowed;
}
._toggle_wxi20_476 input:disabled + ._toggleTrack_wxi20_490 {
  opacity: 0.5;
}

._toggleTrack_wxi20_490 {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  transition: background 0.18s ease;
  pointer-events: none;
}
._toggleTrack_wxi20_490::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

._audiencePanel_wxi20_525 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 4px 4px 8px;
}

._audienceHint_wxi20_535 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
  line-height: 1.45;
}

._confirmText_wxi20_542 {
  margin: 0;
  color: var(--clrTextSecondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

._confirmActions_wxi20_549 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
._confirmActions_wxi20_549 button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
._confirmActions_wxi20_549 button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._confirmCancel_wxi20_570 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
}

._confirmApply_wxi20_576 {
  background: var(--clrTextPrimary);
  border: 0;
  color: var(--clrSecondary);
}

._titleList_wxi20_582 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 4px 4px 8px;
}

._titleOption_wxi20_592 {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--clrTertiary);
  border: 2px solid transparent;
  color: var(--clrTextPrimary);
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
._titleOption_wxi20_592:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._titlePreview_wxi20_609 {
  color: var(--title-ink, #fff);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  background: radial-gradient(100% 120% at 50% 50%, color-mix(in srgb, var(--c5, transparent) 55%, transparent), transparent 60%), radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%), radial-gradient(120% 140% at 85% 100%, color-mix(in srgb, var(--c3) 70%, transparent), transparent 55%), linear-gradient(115deg, var(--c1), var(--c2), var(--c3), var(--c4));
  background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
  animation: _titleFlow_wxi20_1 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  ._titlePreview_wxi20_609 {
    animation: none;
  }
}

._titleSelected_wxi20_622 {
  border-color: var(--clrTextPrimary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--clrTextPrimary) 25%, transparent);
}

@keyframes _titleFlow_wxi20_1 {
  0% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
  50% {
    background-position: 50% 100%, 100% 50%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 50% 0%, 0% 0%, 100% 100%, 0% 50%;
  }
}
._emptyState_wxi20_638 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
  text-align: center;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}
._emptyState_wxi20_638 p {
  margin: 0;
  color: var(--clrTextSecondary);
}

._emptyCta_wxi20_655 {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

._skeleton_wxi20_666 {
  height: 420px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shimmer_wxi20_1 1.4s ease infinite;
}

@keyframes _shimmer_wxi20_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
._inlineAction_wxi20_682 {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border: 0;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
._inlineAction_wxi20_682:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

._progressTrack_wxi20_698 {
  height: 4px;
  margin: 0 14px 12px;
  border-radius: 999px;
  background: var(--clrTertiary);
  overflow: hidden;
}

._progressFill_wxi20_706 {
  width: 100%;
  height: 100%;
  background: var(--clrSuccess-50);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 0.2s ease;
}

._rowNote_wxi20_715 {
  margin: -4px 14px 12px;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

._rowNote_wxi20_715 + ._row_wxi20_385,
._progressTrack_wxi20_698 + ._row_wxi20_385 {
  border-top: 1px solid var(--clrAccent-10);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_pfrn3_5),
html:has(body._themePastelLight_pfrn3_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_pfrn3_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_pfrn3_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._chip_pfrn3_216, ._tournamentParticipantsChip_pfrn3_216, ._tournamentPositionChip_pfrn3_216, ._tournamentSetChip_pfrn3_216, ._tournamentTypeChip_pfrn3_216 {
  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_pfrn3_216._small_pfrn3_233, ._small_pfrn3_233._tournamentParticipantsChip_pfrn3_216, ._small_pfrn3_233._tournamentPositionChip_pfrn3_216, ._small_pfrn3_233._tournamentSetChip_pfrn3_216, ._small_pfrn3_233._tournamentTypeChip_pfrn3_216 {
  padding: 1px 4px;
  font-size: 9px;
  gap: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

._firstPlace_pfrn3_371 {
  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_pfrn3_1 3s ease-in-out infinite;
  color: #875c18;
  font-weight: 600;
  overflow: hidden;
}
._firstPlace_pfrn3_371::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_pfrn3_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_pfrn3_1 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _gold-shimmer_pfrn3_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_pfrn3_371::before {
    animation: none;
  }
  ._firstPlace_pfrn3_371 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeRegionals_pfrn3_251::before {
    animation: none;
  }
  ._typeRegionals_pfrn3_251 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
  ._typeWorld_pfrn3_309::before {
    animation: none;
  }
  ._typeWorld_pfrn3_309 {
    animation: none;
    background: #ffb02e;
    /* fallback to static gold */
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_kwylz_5),
html:has(body._themePastelLight_kwylz_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_kwylz_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_kwylz_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._tournamentLogContainer_kwylz_216 {
  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_kwylz_216:hover {
  border-color: var(--clrAccent-30);
  box-shadow: 0 4px 12px var(--clrAccent-10);
  transform: translateY(-2px);
}
._tournamentLogContainer_kwylz_216:active {
  border-color: var(--clrAccent-100);
  background-color: var(--clrTertiary);
  transform: translateY(0px);
  transform: scale(0.98);
}
._tournamentLogContainer_kwylz_216._editable_kwylz_243 {
  cursor: default;
}
._tournamentLogContainer_kwylz_216._editable_kwylz_243:hover {
  transform: none;
}
._tournamentLogContainer_kwylz_216._editable_kwylz_243:active {
  transform: none;
}
._tournamentLogContainer_kwylz_216 ._deleteBtn_kwylz_252 {
  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_kwylz_216 ._deleteBtn_kwylz_252:hover {
  background-color: var(--clrError-50);
}
._tournamentLogContainer_kwylz_216 ._deleteBtn_kwylz_252._visible_kwylz_274 {
  min-width: 48px;
  width: 48px;
  border: 1px solid var(--clrError-100);
  margin-left: 8px;
}
._tournamentLogContainer_kwylz_216 ._tournamentLogInfo_kwylz_280 {
  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_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 {
  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_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 ._tournamentLogName_kwylz_301 {
  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_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 ._tournamentLogName_kwylz_301[data-long=true] {
  font-size: 14px;
}
@media (min-width: 768px) {
  ._tournamentLogContainer_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 ._tournamentLogName_kwylz_301 {
    font-size: 16px;
  }
}
._tournamentLogContainer_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 ._tournamentLogDate_kwylz_324 {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--clrAccent-30);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 ._tournamentLogDate_kwylz_324 {
    font-size: 12px;
  }
}
._tournamentLogContainer_kwylz_216 ._tournamentLogInfo_kwylz_280 ._tournamentLogContent_kwylz_291 ._tournamentLogDetails_kwylz_334 {
  font-size: 8px;
  color: var(--clrAccent-60);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
._tournamentLogContainer_kwylz_216 ._tournamentLogResultContainer_kwylz_343 {
  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_kwylz_216 ._tournamentLogResultContainer_kwylz_343 ._resultValue_kwylz_354 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-80);
}
@media (min-width: 768px) {
  ._tournamentLogContainer_kwylz_216 ._tournamentLogResultContainer_kwylz_343 ._resultValue_kwylz_354 {
    font-size: 16px;
  }
}
._tournamentLogContainer_kwylz_216 ._tournamentLogResultContainer_kwylz_343 ._resultBlock_kwylz_364 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_oj0kx_5),
html:has(body._themePastelLight_oj0kx_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_oj0kx_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_oj0kx_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._badge_oj0kx_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--clrSuccess-50) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--clrSuccess-100) 45%, transparent);
  color: var(--clrTextSecondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
._badge_oj0kx_216 svg {
  width: 11px;
  height: 11px;
}

._compact_oj0kx_239 {
  width: 22px;
  height: 22px;
  padding: 0;
}
._compact_oj0kx_239 svg {
  width: 12px;
  height: 12px;
}

._srOnly_oj0kx_249 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_16zav_5),
html:has(body._themePastelLight_16zav_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_16zav_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_16zav_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._chip_16zav_216 {
  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_16zav_216._empty_16zav_233 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
._chip_16zav_216._win_16zav_237 {
  border-color: var(--clrSuccess-100);
  color: var(--clrSuccessOnTint);
  background-color: var(--clrSuccess-50);
}
._chip_16zav_216._lose_16zav_242 {
  border-color: var(--clrError-100);
  color: var(--clrErrorOnTint);
  background-color: var(--clrError-50);
}
._chip_16zav_216._diceWin_16zav_247 {
  opacity: 1;
}
._chip_16zav_216._diceLose_16zav_250 {
  opacity: 0.35;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_neugx_5),
html:has(body._themePastelLight_neugx_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_neugx_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_neugx_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._loaderContainer_neugx_216 {
  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(--clrPrimary);
  z-index: 9999;
}
._loaderContainer_neugx_216 ._loader_neugx_216 {
  width: 65px;
  height: 30px;
  position: relative;
}
._loaderContainer_neugx_216 ._loader_neugx_216:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 3px inset var(--clrAccent-100);
  animation: _l3_neugx_1 0.75s infinite alternate;
}
@keyframes _l3_neugx_1 {
  0% {
    inset: 0 35px 0 0;
  }
  50% {
    inset: 0 0 0 0;
  }
  100% {
    inset: 0 0 0 35px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_bnzkp_5),
html:has(body._themePastelLight_bnzkp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_bnzkp_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_bnzkp_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._inlineLoaderContainer_bnzkp_216 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 0;
  margin: 8px 0;
}
._inlineLoaderContainer_bnzkp_216 ._loader_bnzkp_226 {
  width: 40px;
  height: 18px;
  position: relative;
}
._inlineLoaderContainer_bnzkp_216 ._loader_bnzkp_226:before {
  content: "";
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 0 0 2px inset var(--clrAccent-100);
  animation: _pulse_bnzkp_1 0.8s infinite alternate;
}
@keyframes _pulse_bnzkp_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: dark;
}

html:has(body._themeLight_xj8dg_5),
html:has(body._themePastelLight_xj8dg_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_xj8dg_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_xj8dg_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

._button_xj8dg_251 {
  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_xj8dg_251:hover {
  background-color: var(--clrAccent-30);
  border-color: var(--clrAccent-50);
  transform: translateY(-1px);
}
._button_xj8dg_251:active {
  transform: translateY(0);
}
._button_xj8dg_251 ._icon_xj8dg_275 {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_fvmze_5),
html:has(body._themePastelLight_fvmze_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_fvmze_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_fvmze_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._header_fvmze_216 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
}
@media (max-width: 400px) {
  ._header_fvmze_216 {
    gap: 8px;
  }
}

._leaderImageWrap_fvmze_231 {
  flex-shrink: 0;
}
._leaderImageWrap_fvmze_231 > div:first-child {
  max-height: 86px !important;
  max-width: 86px !important;
  min-height: 86px !important;
  min-width: 86px !important;
}
@media (max-width: 400px) {
  ._leaderImageWrap_fvmze_231 > div:first-child {
    max-height: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    min-width: 68px !important;
  }
}

._infoSection_fvmze_249 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

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

._deckBlock_fvmze_269 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}
._deckBlock_fvmze_269 ._playerName_fvmze_277 {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._playerName_fvmze_277 {
    font-size: 15px;
  }
}
._deckBlock_fvmze_269 ._deckName_fvmze_289 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._deckName_fvmze_289 {
    font-size: 11px;
  }
}
._deckBlock_fvmze_269 ._score_fvmze_301 {
  font-size: 28px;
  font-weight: 800;
  color: var(--clrAccent-100);
  white-space: nowrap;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._score_fvmze_301 {
    font-size: 22px;
  }
}
._deckBlock_fvmze_269 ._position_fvmze_313 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._deckBlock_fvmze_269 ._position_fvmze_313 {
    font-size: 11px;
  }
}

._tournamentBlock_fvmze_325 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}
._tournamentBlock_fvmze_325 ._tournamentName_fvmze_334 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-align: right;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}
@media (max-width: 700px) {
  ._tournamentBlock_fvmze_325 ._tournamentName_fvmze_334 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}
@media (max-width: 400px) {
  ._tournamentBlock_fvmze_325 ._tournamentName_fvmze_334 {
    font-size: 12px;
    max-width: 120px;
  }
}
._tournamentBlock_fvmze_325 ._chips_fvmze_357 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}

._promoRow_fvmze_366 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  flex-shrink: 0;
}
._promoRow_fvmze_366 ._promoText_fvmze_375 {
  color: var(--clrAccent-40);
}
@media (max-width: 500px) {
  ._promoRow_fvmze_366 ._promoText_fvmze_375 {
    display: none;
  }
}
._promoRow_fvmze_366 ._promoHighlight_fvmze_383 {
  font-weight: 700;
  color: var(--clrAccent-100);
}
._promoRow_fvmze_366 img {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
@media (max-width: 400px) {
  ._promoRow_fvmze_366 {
    font-size: 9px;
  }
  ._promoRow_fvmze_366 img {
    height: 16px;
    width: 16px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1q4vn_5),
html:has(body._themePastelLight_1q4vn_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1q4vn_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1q4vn_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

._container_1q4vn_225 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  position: relative;
}
@media (max-width: 400px) {
  ._container_1q4vn_225 {
    min-height: 48px;
  }
}

._roundNumber_1q4vn_245 {
  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;
  padding-left: 4px;
}
@media (max-width: 400px) {
  ._roundNumber_1q4vn_245 {
    min-width: 20px;
    font-size: 10px;
  }
}

._leaderImage_1q4vn_266 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}
._leaderImage_1q4vn_266 > div {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
@media (max-width: 400px) {
  ._leaderImage_1q4vn_266 > div {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

._roundInfoSection_1q4vn_288 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 10px;
  overflow: hidden;
}

._leaderName_1q4vn_300 {
  display: block;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-100);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 400px) {
  ._leaderName_1q4vn_300 {
    font-size: 11px;
  }
}

._resultSection_1q4vn_318 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: 64px;
  align-self: stretch;
  border-radius: 0 8px 8px 0;
  padding-right: 10px;
  min-width: 80px;
  flex-shrink: 0;
}
._resultSection_1q4vn_318._win_1q4vn_331 {
  background: var(--clrRoundWin);
}
._resultSection_1q4vn_318._lose_1q4vn_334 {
  background: var(--clrRoundLoss);
}
@media (max-width: 400px) {
  ._resultSection_1q4vn_318 {
    min-height: 48px;
    min-width: 64px;
    padding-right: 8px;
  }
}

._separator_1q4vn_345 {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  margin-right: 6px;
}
@media (max-width: 400px) {
  ._separator_1q4vn_345 {
    height: 28px;
    margin-right: 6px;
  }
}

._chips_1q4vn_358 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 400px) {
  ._chips_1q4vn_358 {
    gap: 3px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_tnhl9_5),
html:has(body._themePastelLight_tnhl9_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_tnhl9_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_tnhl9_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

@keyframes _modalBounceIn_tnhl9_1 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes _fadeIn_tnhl9_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._exportModal_tnhl9_237 {
  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_tnhl9_1 0.3s ease;
  overflow: hidden;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 {
  width: min(92vw, 560px);
  min-aspect-ratio: 1/1;
  max-height: 90vh;
  background-color: var(--clrPrimary);
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  cursor: default;
  overflow: hidden;
  animation: _modalBounceIn_tnhl9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 768px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 {
    width: 92vw;
    max-height: 85vh;
    padding: 10px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-shrink: 0;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 > div:first-child {
  max-height: 86px !important;
  max-width: 86px !important;
  min-height: 86px !important;
  min-width: 86px !important;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 > div:first-child {
    max-height: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    min-width: 68px !important;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._deckName_tnhl9_318 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._deckName_tnhl9_318 {
    font-size: 11px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._exportStats_tnhl9_329 {
  font-size: 28px;
  font-weight: 800;
  color: var(--clrAccent-100);
  white-space: nowrap;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._exportStats_tnhl9_329 {
    font-size: 22px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._positionText_tnhl9_341 {
  font-size: 13px;
  color: var(--clrAccent-50);
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._leftSection_tnhl9_289 ._deckInfo_tnhl9_311 ._positionText_tnhl9_341 {
    font-size: 11px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._tournamentName_tnhl9_361 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-100);
  text-align: right;
  line-height: 1.2;
  word-break: break-word;
}
@media (max-width: 700px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._tournamentName_tnhl9_361 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._tournamentName_tnhl9_361 {
    font-size: 12px;
    max-width: 120px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._chips_tnhl9_383 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  font-size: 11px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._appPromoText_tnhl9_399 {
  color: var(--clrAccent-40);
}
@media (max-width: 500px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._appPromoText_tnhl9_399 {
    display: none;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._appPromoLine_tnhl9_407 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 ._madeWithHighlight_tnhl9_414 {
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 img {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 {
    font-size: 9px;
  }
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportHeader_tnhl9_280 ._rightSection_tnhl9_352 ._appPromo_tnhl9_391 img {
    height: 16px;
    width: 16px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._divider_tnhl9_432 {
  width: 100%;
  height: 1px;
  background-color: var(--clrAccent-30);
  margin: 12px 0;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._divider_tnhl9_432 {
    margin: 8px 0;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportFollow_tnhl9_444 {
  flex-shrink: 0;
  width: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--clrAccent-30);
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportFollow_tnhl9_444 strong {
  color: var(--clrTextPrimary);
  font-weight: 800;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportFollow_tnhl9_444 {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 0.72rem;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
@media (max-width: 400px) {
  ._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467 {
    gap: 4px;
  }
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar {
  width: 8px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar-track {
  background: var(--clrSecondary);
  border-radius: 4px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar-thumb {
  background: var(--clrAccent-30);
  border-radius: 4px;
}
._exportModal_tnhl9_237 ._exportContent_tnhl9_256 ._exportRoundList_tnhl9_467::-webkit-scrollbar-thumb:hover {
  background: var(--clrAccent-50);
}
._exportModal_tnhl9_237 ._actionButtons_tnhl9_497 {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: _modalBounceIn_tnhl9_1 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506 {
  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;
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506 svg {
  width: 18px;
  height: 18px;
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506:hover:not(:disabled) {
  transform: translateY(-2px);
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._exportModal_tnhl9_237 ._downloadBtn_tnhl9_506 ._spinner_tnhl9_533 {
  animation: _spin_tnhl9_533 1s linear infinite;
}

@keyframes _spin_tnhl9_533 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1mkis_5),
html:has(body._themePastelLight_1mkis_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1mkis_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1mkis_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._historyContainer_1mkis_216 {
  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_1mkis_216 ._historyHeader_1mkis_229 {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 h2 {
  color: var(--clrTextPrimary);
  font-size: 20px;
  margin: 0;
  animation: _fadeIn_1mkis_1 0.3s ease-out;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 {
  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_1mkis_1 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: right center;
  box-sizing: border-box;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 ._searchIconInside_1mkis_260 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
  flex-shrink: 0;
  animation: _fadeInIcon_1mkis_1 0.3s ease-out 0.1s forwards;
  opacity: 0;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 ._searchInput_1mkis_268 {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--clrTextPrimary);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 0;
  animation: _fadeInInput_1mkis_1 0.3s ease-out 0.15s forwards;
  opacity: 0;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 ._searchInput_1mkis_268::placeholder {
  color: var(--clrTextTertiary);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 ._closeSearchBtn_1mkis_283 {
  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_1mkis_1 0.3s ease-out 0.2s forwards;
  opacity: 0;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 ._closeSearchBtn_1mkis_283 ._closeIcon_1mkis_297 {
  width: 20px;
  height: 20px;
  color: var(--clrTextSecondary);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._searchContainer_1mkis_244 ._closeSearchBtn_1mkis_283:hover ._closeIcon_1mkis_297 {
  color: var(--clrTextPrimary);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  animation: _fadeIn_1mkis_1 0.3s ease-out;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._searchBtn_1mkis_313 {
  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_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._searchBtn_1mkis_313 ._searchIcon_1mkis_260 {
  width: 18px;
  height: 18px;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._searchBtn_1mkis_313:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._searchBtn_1mkis_313:active {
  transform: scale(0.95);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 {
  position: relative;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterBtn_1mkis_340 {
  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_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterBtn_1mkis_340 ._filterIcon_1mkis_354 {
  width: 18px;
  height: 18px;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterBtn_1mkis_340 ._chevronIcon_1mkis_358 {
  width: 14px;
  height: 14px;
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterBtn_1mkis_340:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterDropdown_1mkis_365 {
  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_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterDropdown_1mkis_365 ._filterOption_1mkis_382 {
  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_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterDropdown_1mkis_365 ._filterOption_1mkis_382:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._filterContainer_1mkis_337 ._filterDropdown_1mkis_365 ._filterOption_1mkis_382._active_1mkis_398 {
  background-color: var(--clrAccent-10);
  color: var(--clrAccent-100);
}
._historyContainer_1mkis_216 ._historyHeader_1mkis_229 ._headerActions_1mkis_305 ._editModeBtn_1mkis_402 {
  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_1mkis_216 h2 {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--clrAccent-100);
}
._historyContainer_1mkis_216 p {
  color: var(--clrAccent-100);
  opacity: 0.7;
}
._historyContainer_1mkis_216 ._topTabs_1mkis_423 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border-bottom: 1px solid var(--clrAccent-10);
  margin-bottom: 4px;
}
._historyContainer_1mkis_216 ._topTabs_1mkis_423 ._topTab_1mkis_423 {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--clrTextSecondary);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
}
._historyContainer_1mkis_216 ._topTabs_1mkis_423 ._topTab_1mkis_423:hover {
  color: var(--clrTextPrimary);
}
._historyContainer_1mkis_216 ._topTabs_1mkis_423 ._topTab_1mkis_423._active_1mkis_398 {
  color: var(--clrAccent-100);
  border-bottom-color: var(--clrAccent-100);
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border-bottom: 1px solid var(--clrAccent-10);
  padding-bottom: 0;
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simSubTab_1mkis_453 {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--clrTextSecondary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simSubTab_1mkis_453:hover {
  color: var(--clrTextPrimary);
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simSubTab_1mkis_453._active_1mkis_398 {
  color: var(--clrAccent-100);
  border-bottom-color: var(--clrAccent-100);
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simBadge_1mkis_487 {
  font-size: 10px;
  background: var(--clrAccent-10);
  color: var(--clrTextSecondary);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simRecord_1mkis_495 {
  margin-left: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simWins_1mkis_507 {
  color: var(--clrSuccess-100);
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simLosses_1mkis_510 {
  color: var(--clrError-100);
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simSep_1mkis_513 {
  color: var(--clrTextTertiary);
}
._historyContainer_1mkis_216 ._simSubTabs_1mkis_453 ._simEditBtn_1mkis_516 {
  margin-left: 8px;
  padding: 8px 16px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}
._historyContainer_1mkis_216 ._simEditToolbar_1mkis_529 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 0;
}
._historyContainer_1mkis_216 ._simEditToolbar_1mkis_529 ._simSelectAllBtn_1mkis_538 {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--clrTextPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
}
._historyContainer_1mkis_216 ._simEditToolbar_1mkis_529 ._simSelectAllBtn_1mkis_538:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
._historyContainer_1mkis_216 ._simEditToolbar_1mkis_529 ._simDeleteBtn_1mkis_553 {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--clrError-100);
  border: 1px solid var(--clrError-100);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.2s ease;
}
._historyContainer_1mkis_216 ._simEditToolbar_1mkis_529 ._simDeleteBtn_1mkis_553:hover {
  background-color: var(--clrError-50);
}
._historyContainer_1mkis_216 ._simCheckbox_1mkis_568 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 8px 0 12px;
  flex-shrink: 0;
}
._historyContainer_1mkis_216 ._simCheckbox_1mkis_568 input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clrAccent-100);
}
._historyContainer_1mkis_216 ._simMatchList_1mkis_583 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
._historyContainer_1mkis_216 ._simColumnHeader_1mkis_591 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 4px 12px;
}
._historyContainer_1mkis_216 ._simColumnHeader_1mkis_591 ._simColLabel_1mkis_600 {
  font-size: 10px;
  font-weight: 600;
  color: var(--clrTextTertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
._historyContainer_1mkis_216 ._simColumnHeader_1mkis_591 ._simColLabel_1mkis_600:first-child {
  text-align: left;
  flex: 1;
}
._historyContainer_1mkis_216 ._simColumnHeader_1mkis_591 ._simColLabel_1mkis_600:nth-child(2) {
  text-align: center;
  width: 120px;
  flex-shrink: 0;
}
._historyContainer_1mkis_216 ._simColumnHeader_1mkis_591 ._simColLabel_1mkis_600:last-child {
  text-align: right;
  flex: 1;
}
._historyContainer_1mkis_216 ._simRow_1mkis_620 {
  width: 100%;
  min-height: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  box-sizing: border-box;
}
._historyContainer_1mkis_216 ._simLeaderLeft_1mkis_634 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 4px 4px 8px;
  flex: 1;
  min-width: 0;
}
._historyContainer_1mkis_216 ._simLeaderLeft_1mkis_634 > div:first-child {
  flex-shrink: 0;
  aspect-ratio: 1;
}
._historyContainer_1mkis_216 ._simMyInfo_1mkis_648 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
._historyContainer_1mkis_216 ._simMyInfo_1mkis_648 ._simMyName_1mkis_657 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
._historyContainer_1mkis_216 ._simMyInfo_1mkis_648 ._simMySub_1mkis_667 {
  font-size: 10px;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
._historyContainer_1mkis_216 ._simCenter_1mkis_675 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 120px;
  flex-shrink: 0;
  min-height: 72px;
  align-self: stretch;
  padding: 0 8px;
  position: relative;
}
._historyContainer_1mkis_216 ._simCenter_1mkis_675 ._simDate_1mkis_688 {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: monospace;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
._historyContainer_1mkis_216 ._simCenter_1mkis_675._simCenterWin_1mkis_701 {
  background: radial-gradient(ellipse at center, rgba(94, 178, 122, 0.3) 0%, rgba(50, 126, 75, 0.08) 50%, transparent 80%);
}
._historyContainer_1mkis_216 ._simCenter_1mkis_675._simCenterLoss_1mkis_704 {
  background: radial-gradient(ellipse at center, rgba(238, 70, 70, 0.3) 0%, rgba(175, 49, 49, 0.08) 50%, transparent 80%);
}
._historyContainer_1mkis_216 ._simRow_1mkis_620:hover ._simDate_1mkis_688 {
  opacity: 1;
}
._historyContainer_1mkis_216 ._simLeaderRight_1mkis_710 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  flex: 1;
  min-width: 0;
}
._historyContainer_1mkis_216 ._simLeaderRight_1mkis_710 > div:last-child {
  flex-shrink: 0;
  aspect-ratio: 1;
}
._historyContainer_1mkis_216 ._simOppInfo_1mkis_724 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
._historyContainer_1mkis_216 ._simOppInfo_1mkis_724 ._simOppName_1mkis_733 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: right;
}
._historyContainer_1mkis_216 ._simOppInfo_1mkis_724 ._simOppSub_1mkis_744 {
  font-size: 10px;
  color: var(--clrTextTertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: right;
}
@media (max-width: 600px) {
  ._historyContainer_1mkis_216 ._simMyInfo_1mkis_648,
  ._historyContainer_1mkis_216 ._simOppInfo_1mkis_724 {
    display: none;
  }
  ._historyContainer_1mkis_216 ._simCenter_1mkis_675 {
    width: 100px;
    padding: 0 4px;
  }
  ._historyContainer_1mkis_216 ._simLeaderLeft_1mkis_634 {
    padding: 4px 2px 4px 6px;
  }
  ._historyContainer_1mkis_216 ._simLeaderRight_1mkis_710 {
    padding: 4px 6px 4px 2px;
  }
  ._historyContainer_1mkis_216 ._simCheckbox_1mkis_568 {
    padding: 0 4px 0 8px;
  }
}
._historyContainer_1mkis_216 ._loadMoreTrigger_1mkis_772 {
  width: 100%;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}
._historyContainer_1mkis_216 ._loadMoreTrigger_1mkis_772 ._smallLoader_1mkis_782 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px;
}
._historyContainer_1mkis_216 ._loadMoreTrigger_1mkis_772 ._smallLoader_1mkis_782 ._spinner_1mkis_790 {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--clrAccent-100);
  border-radius: 50%;
  animation: _spin_1mkis_790 0.8s linear infinite;
}

@keyframes _spin_1mkis_790 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes _expandSearch_1mkis_1 {
  from {
    transform: scaleX(0.8);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes _fadeInIcon_1mkis_1 {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _fadeInInput_1mkis_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeIn_1mkis_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
._freeplayRowWrap_1mkis_840 {
  position: relative;
  width: 100%;
}

._freeplayRowActions_1mkis_845 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

._freeplayRowBtn_1mkis_854 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease;
}
._freeplayRowBtn_1mkis_854 svg {
  width: 16px;
  height: 16px;
}
._freeplayRowBtn_1mkis_854:active {
  transform: scale(0.94);
}

._freeplayRowBtnDanger_1mkis_875 {
  background: rgba(220, 38, 38, 0.85);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_2yp9t_5),
html:has(body._themePastelLight_2yp9t_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_2yp9t_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_2yp9t_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._appDownloadDrawer_2yp9t_216 {
  gap: 0;
}

._content_2yp9t_220 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-bottom: 8px;
}

._logo_2yp9t_230 {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

._heading_2yp9t_236 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  text-align: center;
}

._subheading_2yp9t_244 {
  margin: 0;
  font-size: 16px;
  color: var(--clrAccent-60);
  text-align: center;
}

._promoImage_2yp9t_251 {
  width: auto;
  max-width: 100%;
  max-height: 340px;
  border-radius: 12px;
  object-fit: contain;
}

._downloadButton_2yp9t_259 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
._downloadButton_2yp9t_259:active {
  transform: scale(0.96);
}

._appStoreBadge_2yp9t_270 {
  height: 52px;
  width: auto;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_z19tm_5),
html:has(body._themePastelLight_z19tm_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_z19tm_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_z19tm_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

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

@media (max-width: 768px) {
  ._header_z19tm_222 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_z19tm_233 ._logo_z19tm_233 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_z19tm_233 ._appName_z19tm_245 {
    font-size: 20px;
  }
  ._backButton_z19tm_251 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_z19tm_216 {
    padding: 80px 20px;
  }
  ._pageContainer_z19tm_216 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_z19tm_274 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_z19tm_274 p {
    font-size: 15px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_zdtfo_5),
html:has(body._themePastelLight_zdtfo_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_zdtfo_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_zdtfo_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

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

@media (max-width: 768px) {
  ._header_zdtfo_222 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_zdtfo_233 ._logo_zdtfo_233 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_zdtfo_233 ._appName_zdtfo_245 {
    font-size: 20px;
  }
  ._backButton_zdtfo_251 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_zdtfo_216 {
    padding: 80px 20px;
  }
  ._pageContainer_zdtfo_216 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_zdtfo_274 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_zdtfo_274 p {
    font-size: 15px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_yjnwl_5),
html:has(body._themePastelLight_yjnwl_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_yjnwl_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_yjnwl_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

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

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

@media (max-width: 768px) {
  ._header_yjnwl_229 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  ._logoSection_yjnwl_240 ._logo_yjnwl_240 {
    width: 40px;
    height: 40px;
  }
  ._logoSection_yjnwl_240 ._appName_yjnwl_252 {
    font-size: 20px;
  }
  ._backButton_yjnwl_258 {
    width: 100%;
    text-align: center;
  }
  ._pageContainer_yjnwl_216 {
    padding: 80px 20px;
  }
  ._pageContainer_yjnwl_216 h1 {
    font-size: 32px;
    margin-bottom: 32px;
  }
  ._content_yjnwl_273 h2 {
    font-size: 24px;
    margin-top: 24px;
  }
  ._content_yjnwl_273 h3 {
    font-size: 20px;
  }
  ._content_yjnwl_273 p {
    font-size: 15px;
  }
  ._emailButton_yjnwl_302 {
    width: 100%;
    justify-content: center;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_h6a2y_5),
html:has(body._themePastelLight_h6a2y_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_h6a2y_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_h6a2y_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._page_h6a2y_216 {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px 20px 96px;
  display: grid;
  place-items: center;
}

._panel_h6a2y_225 {
  width: min(100%, 680px);
  background-color: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

._header_h6a2y_234 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
._header_h6a2y_234 h1 {
  font-size: 32px;
  line-height: 1.1;
  color: var(--clrAccent-100);
  margin-bottom: 10px;
}
._header_h6a2y_234 p {
  color: var(--clrAccent-80);
  line-height: 1.6;
}

._warningIcon_h6a2y_253 {
  width: 32px;
  height: 32px;
  color: var(--clrError-100);
  flex-shrink: 0;
}

._warningBox_h6a2y_260 {
  background-color: var(--clrTertiary);
  border: 1px solid var(--clrError-50);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 28px;
}
._warningBox_h6a2y_260 h2 {
  font-size: 24px;
  color: var(--clrAccent-100);
  margin-bottom: 12px;
}
._warningBox_h6a2y_260 ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: var(--clrAccent-80);
  line-height: 1.5;
}

._form_h6a2y_280 {
  display: grid;
  gap: 20px;
}

._success_h6a2y_285 {
  color: var(--clrSuccess-100);
  background-color: rgba(var(--clrSuccess-100), 0.12);
  border: 1px solid var(--clrSuccess-50);
  border-radius: 4px;
  padding: 12px 14px;
  line-height: 1.4;
}

._actions_h6a2y_294 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

._relatedLinks_h6a2y_300 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--clrAccent-10);
}
._relatedLinks_h6a2y_300 a {
  color: var(--clrAccent-100);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 640px) {
  ._page_h6a2y_216 {
    padding: 88px 16px 72px;
    place-items: start center;
  }
  ._panel_h6a2y_225 {
    padding: 24px;
  }
  ._header_h6a2y_234 {
    flex-direction: column;
  }
  ._header_h6a2y_234 h1 {
    font-size: 28px;
  }
  ._actions_h6a2y_294 {
    grid-template-columns: 1fr;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1b5s4_5),
html:has(body._themePastelLight_1b5s4_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1b5s4_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1b5s4_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._container_1b5s4_216 {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 14px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  ._container_1b5s4_216 {
    padding: 14px;
    padding-top: 32px;
  }
}
._container_1b5s4_216 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(60px + env(safe-area-inset-top) + 16px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

._winRate_1b5s4_479 {
  font-size: 14px;
  font-weight: 700;
}
._winRate_1b5s4_479._positive_1b5s4_368 {
  color: var(--clrSuccess-100);
}
._winRate_1b5s4_479._negative_1b5s4_375 {
  color: var(--clrError-100);
}
._winRate_1b5s4_479._neutral_1b5s4_489 {
  color: var(--clrAccent-100);
}

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

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

._loader_1b5s4_505 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_182z1_5),
html:has(body._themePastelLight_182z1_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_182z1_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_182z1_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._pageTransition_182z1_216 {
  width: 100%;
  min-height: 100%;
}

._fadeOut_182z1_221 {
  animation: _swipeOut_182z1_1 0.2s ease-in-out forwards;
}

._fadeIn_182z1_225 {
  animation: _swipeIn_182z1_1 0.3s ease-in-out;
}

@keyframes _swipeOut_182z1_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
@keyframes _swipeIn_182z1_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}html {
  color-scheme: dark;
}

html:has(body.themeLight),
html:has(body.themePastelLight) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgb(50, 126, 75, 0.1) 30%,
          rgb(94, 178, 122, 0.36) 60%,
          rgb(144, 215, 168) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(175, 49, 49, 0.1) 30%,
          rgba(238, 70, 70, 0.36) 60%,
          rgb(255, 173, 173) 100%);
  --clrNavBackground: rgba(244, 244, 245, 0.15);
  --clrNavItemActive: rgba(211, 211, 211, 0.4);
  --clrNavItemHover: rgba(0, 0, 0, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0000c1;
  --clrGlassBackground: rgba(255, 255, 255, 0.5);
  --clrGlassBackgroundStrong: rgba(255, 255, 255, 0.5);
  --clrGlassBorder: rgba(0, 0, 0, 0.1);
  --snackbarDefaultBg: #F1ECE9;
  --snackbarDefaultText: #5D605C;
  --snackbarDefaultBorder: #5D605C;
  --snackbarDefaultIcon: #5D605C;
  --snackbarSuccessBg: #E0F1D9;
  --snackbarSuccessText: #358935;
  --snackbarSuccessBorder: #358935;
  --snackbarSuccessIcon: #358935;
  --snackbarErrorBg: #F9E1DC;
  --snackbarErrorText: #C80D12;
  --snackbarErrorBorder: #C80D12;
  --snackbarErrorIcon: #C80D12;
}

.themeDark {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

:root {
  --app-height: 100vh;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

.app {
  min-height: var(--app-height);
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

input, select, textarea {
  font-size: 16px !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

button, .clickable {
  -webkit-user-select: none;
  user-select: none;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--clrPrimary);
  overscroll-behavior: none;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: var(--clrPrimary);
  overscroll-behavior: none;
}

#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrPrimary);
}

.app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--clrPrimary);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  overflow-x: clip;
  scrollbar-gutter: stable;
  background-color: var(--clrPrimary);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background-color: #0f1418;
}

html:has(body.themeLight),
html:has(body.themePastelLight) {
  background-color: #f4f4f5;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #3a4048 #0f1418;
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track {
  background: #0f1418;
}

html::-webkit-scrollbar-thumb {
  background: #3a4048;
  border-radius: 10px;
  border: 3px solid #0f1418;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background: #4a515a;
  background-clip: padding-box;
}

html:has(body.themeLight),
html:has(body.themePastelLight) {
  scrollbar-color: #c2c6cc #f4f4f5;
}

html:has(body.themeLight)::-webkit-scrollbar-track,
html:has(body.themePastelLight)::-webkit-scrollbar-track {
  background: #f4f4f5;
}

html:has(body.themeLight)::-webkit-scrollbar-thumb,
html:has(body.themePastelLight)::-webkit-scrollbar-thumb {
  background: #c2c6cc;
  border-color: #f4f4f5;
}

#root {
  min-height: 100%;
  width: 100%;
  overflow-x: clip;
  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: dark;
}

html:has(body._themeLight_1gefi_5),
html:has(body._themePastelLight_1gefi_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1gefi_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1gefi_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._header_1gefi_216 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;
  display: flex;
  flex-direction: column;
  background: var(--clrPrimary);
  border-bottom: 1px solid var(--clrTertiary);
}

._headerRow_1gefi_228 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  height: 60px;
  margin: 0 auto;
  padding: 0 12px;
  color: var(--clrAccent-100);
}
._headerRow_1gefi_228 ._logoContainer_1gefi_239 {
  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;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
._headerRow_1gefi_228 ._logoContainer_1gefi_239:hover {
  opacity: 0.86;
}
._headerRow_1gefi_228 ._logoContainer_1gefi_239 img {
  height: 70%;
}
._headerRow_1gefi_228 ._userSection_1gefi_260 {
  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);
}
._headerRow_1gefi_228 ._authButtons_1gefi_270 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._headerRow_1gefi_228 ._authButtons_1gefi_270 ._signInBtn_1gefi_275,
._headerRow_1gefi_228 ._authButtons_1gefi_270 ._signUpBtn_1gefi_276 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
._headerRow_1gefi_228 ._authButtons_1gefi_270 ._signInBtn_1gefi_275 {
  color: var(--clrAccent-100);
  background: transparent;
  border: 1px solid var(--clrAccent-30);
}
._headerRow_1gefi_228 ._authButtons_1gefi_270 ._signUpBtn_1gefi_276 {
  color: var(--clrPrimary);
  background: var(--clrAccent-100);
  border: 1px solid var(--clrAccent-100);
}
._headerRow_1gefi_228 ._profileLink_1gefi_298 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
._headerRow_1gefi_228 ._nameStack_1gefi_306 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
._headerRow_1gefi_228 ._nameStack_1gefi_306 ._name_1gefi_306 {
  font-weight: 600;
}
._headerRow_1gefi_228 ._nameStack_1gefi_306 ._handle_1gefi_315 {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--clrAccent-60);
}
@media (max-width: 560px) {
  ._headerRow_1gefi_228 ._nameStack_1gefi_306 {
    display: none;
  }
}
._headerRow_1gefi_228 button._logoutBtn_1gefi_325 {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._headerRow_1gefi_228 button._logoutBtn_1gefi_325:hover {
  opacity: 0.7;
}

._headerSecondary_1gefi_340:not(:empty) {
  background: var(--clrSecondary);
  border-top: 1px solid var(--clrTertiary);
}

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

._menuWrap_1gefi_357 {
  position: relative;
  flex-shrink: 0;
}

._gearBtn_1gefi_362,
._searchBtn_1gefi_363 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextSecondary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
._gearBtn_1gefi_362 svg,
._searchBtn_1gefi_363 svg {
  width: 20px;
  height: 20px;
}
._gearBtn_1gefi_362:hover,
._searchBtn_1gefi_363:hover {
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}

._menu_1gefi_357 {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  min-width: 214px;
  padding: 6px;
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
._menu_1gefi_357 button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--clrTextPrimary);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
._menu_1gefi_357 button svg {
  width: 18px;
  height: 18px;
  color: var(--clrTextSecondary);
}
._menu_1gefi_357 button:hover {
  background: var(--clrTertiary);
}
._menu_1gefi_357 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._menuDivider_1gefi_440 {
  height: 1px;
  margin: 4px 6px;
  background: var(--clrAccent-10);
}

._menuDanger_1gefi_446 {
  color: var(--clrError-100) !important;
}
._menuDanger_1gefi_446 svg {
  color: var(--clrError-100) !important;
}

._copiedToast_1gefi_453 {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  z-index: 130;
  padding: 8px 14px;
  white-space: nowrap;
  background: var(--clrTextPrimary);
  color: var(--clrSecondary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}._wrap_grfml_1 {
  position: relative;
  display: inline-flex;
}

._trigger_grfml_6 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px 0 8px;
  border-radius: 10px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrPrimary);
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
._trigger_grfml_6:hover {
  background: var(--clrTertiary);
}

._label_grfml_25 {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px) {
  ._label_grfml_25 {
    display: none;
  }
  ._trigger_grfml_6 {
    padding: 0 8px;
    gap: 4px;
  }
}
._chevron_grfml_41 {
  width: 15px;
  height: 15px;
  opacity: 0.6;
  flex: none;
}

._glyphImg_grfml_48 {
  border-radius: 5px;
  object-fit: contain;
  flex: none;
}

._glyphDot_grfml_54 {
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

._menu_grfml_60 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  z-index: 60;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  border: 1px solid var(--clrTertiary);
  background: var(--clrSecondary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

._item_grfml_76 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--clrTextPrimary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
._item_grfml_76:hover {
  background: var(--clrTertiary);
}

._itemActive_grfml_96 {
  background: var(--clrTertiary);
}

._itemLabel_grfml_100 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._draft_grfml_107 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--clrTextTertiary);
  border: 1px solid var(--clrTertiary);
  flex: none;
}

._check_grfml_119 {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.8;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1xye4_5),
html:has(body._themePastelLight_1xye4_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1xye4_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1xye4_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._tournamentPage_1xye4_216 {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 16px;
  color: var(--clrAccent-100);
  min-height: calc(100dvh - 60px - 80px);
}
._tournamentPage_1xye4_216 h2 {
  margin-bottom: 4px;
}
._tournamentPage_1xye4_216 ._statusMessage_1xye4_227 {
  color: var(--clrAccent-60);
  font-size: 14px;
  margin-top: 16px;
}
._tournamentPage_1xye4_216 {
  padding-top: calc(60px + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + 16px);
}

._layout_1xye4_237 {
  width: 100%;
}

._mainColumn_1xye4_241 {
  min-width: 0;
}

._mobileStats_1xye4_245 {
  margin-bottom: 8px;
}

._statsSidebar_1xye4_249 {
  display: none;
}

@media (min-width: 1024px) {
  ._tournamentPage_1xye4_216 {
    max-width: 1160px;
  }
  ._layout_1xye4_237 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
  }
  ._mobileStats_1xye4_245 {
    display: none;
  }
  ._statsSidebar_1xye4_249 {
    display: block;
    position: sticky;
    top: calc(60px + env(safe-area-inset-top) + 16px);
  }
}
@media (min-width: 1200px) {
  ._tournamentPage_1xye4_216 {
    max-width: none;
  }
  ._layout_1xye4_237 {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 760px) minmax(280px, 1fr);
  }
  ._mainColumn_1xye4_241 {
    grid-column: 2;
  }
  ._statsSidebar_1xye4_249 {
    grid-column: 3;
    justify-self: start;
    width: 280px;
  }
}
._header_1xye4_288 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
._header_1xye4_288 ._headerImage_1xye4_296 {
  width: 128px;
  height: 128px;
  border-radius: 8px;
}
._header_1xye4_288 ._headerImage_1xye4_296 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
._header_1xye4_288 ._headerInfo_1xye4_307 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: space-between;
  gap: 8px;
}
._header_1xye4_288 ._headerInfo_1xye4_307 ._headerTitle_1xye4_315 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}
._header_1xye4_288 ._headerInfo_1xye4_307 ._headerTitle_1xye4_315 h2 {
  font-size: 24px;
  line-height: 18px;
  margin: 0;
  padding: 0;
}
._header_1xye4_288 ._headerInfo_1xye4_307 ._chips_1xye4_328 {
  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_1xye4_288 ._headerInfo_1xye4_307 ._secondaryInfo_1xye4_340 {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._header_1xye4_288 ._headerActions_1xye4_344 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._roundForm_1xye4_350 {
  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_1xye4_350 ._formGroup_1xye4_361 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._searchInput_1xye4_373 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._searchInput_1xye4_373::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 {
  width: 100%;
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--clrAccent-30) var(--clrTertiary);
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385::-webkit-scrollbar {
  height: 6px;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385::-webkit-scrollbar-track {
  background: var(--clrTertiary);
  border-radius: 3px;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385::-webkit-scrollbar-thumb {
  background: var(--clrAccent-100);
  border-radius: 3px;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 {
  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_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405:hover {
  border-color: var(--clrAccent-100);
  transform: translateY(-2px);
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405._selected_1xye4_422 {
  border-color: #5cb85c;
  box-shadow: 0 0 10px rgba(92, 184, 92, 0.5);
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 ._leaderImage_1xye4_426 {
  width: 100%;
  height: 92px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 ._leaderImage_1xye4_426 img {
  width: 100%;
  object-fit: cover;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 ._leaderImage_1xye4_426 ._imagePlaceholder_1xye4_436 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 ._leaderInfo_1xye4_446 {
  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_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 ._leaderInfo_1xye4_446 ._leaderName_1xye4_458 {
  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_1xye4_350 ._formGroup_1xye4_361 ._leaderCarousel_1xye4_385 ._leaderCard_1xye4_405 ._leaderInfo_1xye4_446 ._leaderSet_1xye4_469 {
  font-size: 10px;
  color: var(--clrAccent-100);
  opacity: 0.7;
  text-align: center;
  line-height: 1;
}
._roundForm_1xye4_350 ._formGroup_1xye4_361 ._noResults_1xye4_476 {
  width: 100%;
  text-align: center;
  color: var(--clrAccent-100);
  opacity: 0.7;
  font-size: 14px;
  padding: 20px;
  font-style: italic;
}

._modalOverlay_1xye4_486 {
  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_1xye4_486 {
  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_1xye4_486 h3 {
  margin: 0;
}
._modal_1xye4_486 ._modalDescription_1xye4_511 {
  margin: 0;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_1xye4_486 ._modalField_1xye4_516 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modal_1xye4_486 ._modalInput_1xye4_523 {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--clrAccent-30);
  background-color: transparent;
  color: var(--clrAccent-100);
  padding: 0 12px;
}
._modal_1xye4_486 ._modalActions_1xye4_532 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
._modal_1xye4_486 ._modalCancelBtn_1xye4_538,
._modal_1xye4_486 ._modalSaveBtn_1xye4_539 {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
._modal_1xye4_486 ._modalCancelBtn_1xye4_538:disabled,
._modal_1xye4_486 ._modalSaveBtn_1xye4_539:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._modal_1xye4_486 ._modalCancelBtn_1xye4_538 {
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._modal_1xye4_486 ._modalSaveBtn_1xye4_539 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._modal_1xye4_486 ._modalDeleteBtn_1xye4_560 {
  background-color: #dc3545;
  color: white;
}
._modal_1xye4_486 ._modalDeleteBtn_1xye4_560:hover:not(:disabled) {
  background-color: #c82333;
}
._modal_1xye4_486 ._modalError_1xye4_567 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}

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

._toggleGroup_1xye4_588 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._toggleGroup_1xye4_588 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._toggleGroup_1xye4_588 ._toggleOptions_1xye4_600 {
  display: flex;
  gap: 8px;
}
._toggleGroup_1xye4_588 ._toggleBtn_1xye4_604 {
  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_1xye4_588 ._toggleBtn_1xye4_604._active_1xye4_615 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}

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

._formMessage_1xye4_635 {
  font-size: 14px;
}

._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 h3 {
  margin: 0;
}
._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 ._roundsHeaderActions_1xye4_650 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 ._exportBtn_1xye4_657 {
  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_1xye4_639 ._roundsHeader_1xye4_639 ._exportBtn_1xye4_657:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 ._exportBtn_1xye4_657:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 ._editModeBtn_1xye4_683 {
  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_1xye4_639 ._roundsHeader_1xye4_639 ._editModeBtn_1xye4_683:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
}
._roundsSection_1xye4_639 ._roundsHeader_1xye4_639 ._editModeBtn_1xye4_683:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
._roundsSection_1xye4_639 ._roundList_1xye4_710 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}

._exportContainer_1xye4_718 {
  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_1xye4_718 ._exportHeader_1xye4_731 {
  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_1xye4_718 ._exportHeader_1xye4_731 h2 {
  margin: 0;
  font-size: 32px;
  color: var(--clrAccent-100);
}
._exportContainer_1xye4_718 ._exportHeader_1xye4_731 ._exportStats_1xye4_745 {
  font-size: 28px;
  font-weight: 700;
  color: var(--clrAccent-100);
}
._exportContainer_1xye4_718 ._exportRoundList_1xye4_750 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
._exportContainer_1xye4_718 ._roundCard_1xye4_759 {
  background-color: var(--clrSecondary);
  border-radius: 8px;
  padding: 12px 16px;
}
._exportContainer_1xye4_718 ._roundCard_1xye4_759 ._roundMeta_1xye4_764 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--clrAccent-60);
}

._actionsSection_1xye4_772 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
}
._actionsSection_1xye4_772 ._addRoundButton_1xye4_780 {
  width: 100%;
  display: block;
}
._actionsSection_1xye4_772 ._addRoundButton_1xye4_780 .inner-content {
  width: 100%;
}
._actionsSection_1xye4_772 ._actionButtons_1xye4_787 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
._actionsSection_1xye4_772 ._actionButtons_1xye4_787 ._finishBtn_1xye4_795 {
  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_1xye4_772 ._actionButtons_1xye4_787 ._finishBtn_1xye4_795:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  background-color: var(--clrAccent-100);
}
._actionsSection_1xye4_772 ._actionButtons_1xye4_787 ._finishBtn_1xye4_795:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_1xye4_772 ._actionButtons_1xye4_787 ._deleteBtn_1xye4_815 {
  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_1xye4_772 ._actionButtons_1xye4_787 ._deleteBtn_1xye4_815:hover:not(:disabled) {
  background-color: #dc3545;
  color: white;
}
._actionsSection_1xye4_772 ._actionButtons_1xye4_787 ._deleteBtn_1xye4_815:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._actionsSection_1xye4_772 ._addRoundBtn_1xye4_833 {
  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_1xye4_772 ._addRoundBtn_1xye4_833:hover {
  opacity: 0.9;
}
._actionsSection_1xye4_772 ._addRoundBtn_1xye4_833:active {
  transform: scale(0.95);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_xqjt6_5),
html:has(body._themePastelLight_xqjt6_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_xqjt6_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_xqjt6_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._card_xqjt6_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  margin-top: 12px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  overflow: hidden;
}

._skeleton_xqjt6_230 {
  width: 100%;
  height: 64px;
  margin-top: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--clrTertiary) 25%, color-mix(in srgb, var(--clrTertiary) 60%, transparent) 37%, var(--clrTertiary) 63%);
  background-size: 400% 100%;
  animation: _shareShimmer_xqjt6_1 1.4s ease infinite;
}

@keyframes _shareShimmer_xqjt6_1 {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
._row_xqjt6_248 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
}

._icon_xqjt6_258 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--clrTertiary);
  color: var(--clrTextPrimary);
}
._icon_xqjt6_258 svg {
  width: 18px;
  height: 18px;
}

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

._label_xqjt6_286 {
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  font-weight: 700;
}

._value_xqjt6_292 {
  max-width: 100%;
  color: var(--clrTextSecondary);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._note_xqjt6_301 {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--clrTextTertiary);
  font-size: 0.8rem;
  line-height: 1.45;
}

._noteLink_xqjt6_309 {
  color: var(--clrTextPrimary);
  font-weight: 700;
  text-decoration: underline;
}

._error_xqjt6_315 {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--clrError-100);
  font-size: 0.8rem;
  font-weight: 600;
}

._toggle_xqjt6_323 {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
}
._toggle_xqjt6_323 input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
._toggle_xqjt6_323 input:checked + ._toggleTrack_xqjt6_337 {
  background: var(--clrSuccess-50);
}
._toggle_xqjt6_323 input:checked + ._toggleTrack_xqjt6_337::before {
  transform: translateX(20px);
}
._toggle_xqjt6_323 input:disabled {
  cursor: not-allowed;
}
._toggle_xqjt6_323 input:disabled + ._toggleTrack_xqjt6_337 {
  opacity: 0.5;
}

._toggleTrack_xqjt6_337 {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  transition: background 0.18s ease;
  pointer-events: none;
}
._toggleTrack_xqjt6_337::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

._confirmText_xqjt6_372 {
  margin: 0 0 8px;
  color: var(--clrTextPrimary);
  font-size: 0.95rem;
  line-height: 1.5;
}

._confirmSub_xqjt6_379 {
  margin: 0;
  color: var(--clrTextTertiary);
  font-size: 0.85rem;
  line-height: 1.45;
}

._confirmCancel_xqjt6_386,
._confirmApply_xqjt6_387 {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
._confirmCancel_xqjt6_386:disabled,
._confirmApply_xqjt6_387:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._confirmCancel_xqjt6_386 {
  background: var(--clrTertiary);
  border: 1px solid var(--clrAccent-10);
  color: var(--clrTextPrimary);
}

._confirmApply_xqjt6_387 {
  background: var(--clrError-100);
  border: 0;
  color: #FFFFFF;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_w5q6b_5),
html:has(body._themePastelLight_w5q6b_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_w5q6b_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_w5q6b_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

._container_w5q6b_225 {
  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_w5q6b_225._editable_w5q6b_240 {
  cursor: pointer;
}
._container_w5q6b_225._editable_w5q6b_240:hover {
  border-color: var(--clrAccent-40);
}

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

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

._roundNumber_w5q6b_305 {
  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(--clrTextSecondary);
  flex-shrink: 0;
}

._leaderImage_w5q6b_319 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 0;
  flex-shrink: 0;
}

._roundInfoSection_w5q6b_329 {
  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_w5q6b_341 {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--clrAccent-80);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

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

._noteText_w5q6b_376 {
  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_w5q6b_376._expanded_w5q6b_392 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

._resultSection_w5q6b_398 {
  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_w5q6b_398._win_w5q6b_411 {
  background: var(--clrRoundWin);
}
._resultSection_w5q6b_398._lose_w5q6b_414 {
  background: var(--clrRoundLoss);
}

._separator_w5q6b_418 {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--clrTextTertiary) 55%, transparent) 50%, transparent 100%);
  margin-right: 6px;
}

._chips_w5q6b_425 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 90px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1rsvh_5),
html:has(body._themePastelLight_1rsvh_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1rsvh_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1rsvh_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._modalField_1rsvh_216 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--clrAccent-60);
}
._modalField_1rsvh_216 input {
  max-width: 100px;
}

._modalError_1rsvh_230 {
  color: #ff6b6b;
  font-size: 14px;
  margin: 0;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1vfyb_5),
html:has(body._themePastelLight_1vfyb_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1vfyb_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1vfyb_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._modalOverlay_1vfyb_216 {
  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_1vfyb_216 {
  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_1vfyb_216 h3 {
  margin: 0;
}

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

._sharedWarning_1vfyb_247 {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--clrError-100) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--clrError-100) 45%, transparent);
  color: var(--clrTextPrimary);
  font-size: 12px;
  line-height: 1.45;
}

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

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

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

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

html:has(body._themeLight_19o1h_5),
html:has(body._themePastelLight_19o1h_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_19o1h_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_19o1h_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._editTournamentModal_19o1h_216 {
  width: min(420px, 100%);
}

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

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

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

._typeCarousel_19o1h_251 {
  width: 100%;
}

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

@media (max-width: 768px) {
  ._editTournamentModal_19o1h_216 {
    width: 100%;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_f7c3c_5),
html:has(body._themePastelLight_f7c3c_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_f7c3c_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_f7c3c_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._singleToggleBtn_f7c3c_373 {
  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_f7c3c_373 ._value_f7c3c_389 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._singleToggleBtn_f7c3c_373:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._singleToggleBtn_f7c3c_373:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
._singleToggleBtn_f7c3c_373._winResult_f7c3c_403 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._singleToggleBtn_f7c3c_373._winResult_f7c3c_403 ._value_f7c3c_389 {
  background-color: rgba(34, 197, 94, 0.25);
}
._singleToggleBtn_f7c3c_373._winResult_f7c3c_403:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._singleToggleBtn_f7c3c_373._loseResult_f7c3c_415 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._singleToggleBtn_f7c3c_373._loseResult_f7c3c_415 ._value_f7c3c_389 {
  background-color: rgba(239, 68, 68, 0.25);
}
._singleToggleBtn_f7c3c_373._loseResult_f7c3c_415:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_1sfjp_5),
html:has(body._themePastelLight_1sfjp_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1sfjp_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_1sfjp_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._header_1sfjp_216 {
  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_1sfjp_216 > div:first-child {
  flex-shrink: 0;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 {
  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_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 h1,
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 h2,
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 h3 {
  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_1sfjp_216 ._headerInfo_1sfjp_234 ._headerTitle_1sfjp_245 ._date_1sfjp_267 {
  font-size: 10px;
  font-weight: 300;
  color: var(--clrAccent-60);
  line-height: normal;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chipsWrapper_1sfjp_273 {
  position: relative;
  width: 100%;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chips_1sfjp_273 {
  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_1sfjp_216 ._headerInfo_1sfjp_234 ._chips_1sfjp_273::-webkit-scrollbar {
  display: none;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._chips_1sfjp_273 {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowLeft_1sfjp_297 {
  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_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowLeft_1sfjp_297._visible_1sfjp_309 {
  opacity: 1;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowRight_1sfjp_312 {
  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_1sfjp_216 ._headerInfo_1sfjp_234 ._shadowRight_1sfjp_312._visible_1sfjp_309 {
  opacity: 1;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 ._deckName_1sfjp_334 {
  font-size: 12px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: normal;
}
._themeDark_1sfjp_131 ._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 ._deckName_1sfjp_334 {
  color: rgba(198, 198, 198, 0.6);
}
._header_1sfjp_216 ._headerInfo_1sfjp_234 ._deckInfo_1sfjp_327 ._score_1sfjp_343 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrTextPrimary);
  line-height: normal;
}
._header_1sfjp_216 ._editBtn_1sfjp_349 {
  position: absolute;
  top: 8px;
  right: 8px;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_c6yrt_5),
html:has(body._themePastelLight_c6yrt_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_c6yrt_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_c6yrt_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._panel_c6yrt_216 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  border: 1px solid var(--clrTertiary);
  border-radius: 8px;
  background: var(--clrSecondary);
  overflow: hidden;
}

._header_c6yrt_229 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--clrAccent-60);
  border-bottom: 1px solid var(--clrTertiary);
}

._titleIcon_c6yrt_244 {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

._metric_c6yrt_250 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 16px;
}
._metric_c6yrt_250 + ._metric_c6yrt_250 {
  border-top: 1px solid var(--clrTertiary);
}

._metricHead_c6yrt_262 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}

._metricLabel_c6yrt_271 {
  font-size: 14px;
  font-weight: 600;
  color: var(--clrAccent-60);
  line-height: 1.2;
}

._metricValue_c6yrt_278 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._metricValue_c6yrt_278._positive_c6yrt_284 {
  color: var(--clrSuccess-100);
}
._metricValue_c6yrt_278._negative_c6yrt_287 {
  color: var(--clrError-100);
}

._metricValueSm_c6yrt_291 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--clrTextPrimary);
}
._metricValueSm_c6yrt_291 ._of_c6yrt_297 {
  color: var(--clrAccent-40);
  font-weight: 600;
}

._metricEmpty_c6yrt_302 {
  margin-top: 8px;
  font-size: 12px;
  color: var(--clrTextTertiary);
  font-style: italic;
}

._ratioBar_c6yrt_309 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  height: 6px;
  margin-top: 10px;
}
._ratioBar_c6yrt_309 ._ratioWin_c6yrt_318,
._ratioBar_c6yrt_309 ._ratioLoss_c6yrt_319 {
  min-width: 6px;
  border-radius: 999px;
}
._ratioBar_c6yrt_309 ._ratioWin_c6yrt_318 {
  background: var(--clrSuccess-100);
}
._ratioBar_c6yrt_309 ._ratioLoss_c6yrt_319 {
  background: var(--clrError-100);
}

._metricFoot_c6yrt_330 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}
._metricFoot_c6yrt_330 ._footWin_c6yrt_340 {
  color: var(--clrSuccess-100);
}
._metricFoot_c6yrt_330 ._footLoss_c6yrt_343 {
  color: var(--clrError-100);
}
._metricFoot_c6yrt_330 ._footDot_c6yrt_346 {
  color: var(--clrAccent-40);
  font-weight: 400;
}

._chipRow_c6yrt_351 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

._orderRow_c6yrt_361 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

._orderItem_c6yrt_370 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--clrTertiary);
}
._orderItem_c6yrt_370 ._orderCount_c6yrt_380 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clrAccent-60);
  line-height: 1;
}
._orderItem_c6yrt_370._orderBest_c6yrt_386 {
  border-color: var(--clrAccent-40);
  background: var(--clrAccent-10);
}
._orderItem_c6yrt_370._orderBest_c6yrt_386 ._orderCount_c6yrt_380 {
  color: var(--clrTextPrimary);
}

._collapsible_c6yrt_394 ._toggle_c6yrt_394 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
._collapsible_c6yrt_394 ._toggleTitle_c6yrt_409 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--clrAccent-60);
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 ._previewValue_c6yrt_429 {
  font-size: 16px;
  font-weight: 800;
  color: var(--clrTextPrimary);
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 ._previewValue_c6yrt_429._positive_c6yrt_284 {
  color: var(--clrSuccess-100);
}
._collapsible_c6yrt_394 ._togglePreview_c6yrt_421 ._previewValue_c6yrt_429._negative_c6yrt_287 {
  color: var(--clrError-100);
}
._collapsible_c6yrt_394 ._chevron_c6yrt_440 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
  transition: transform 0.25s ease;
}
._collapsible_c6yrt_394 ._chevron_c6yrt_440._chevronOpen_c6yrt_446 {
  transform: rotate(180deg);
}
._collapsible_c6yrt_394 ._collapsibleBody_c6yrt_449 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
._collapsible_c6yrt_394 ._collapsibleBody_c6yrt_449 ._collapsibleInner_c6yrt_454 {
  overflow: hidden;
}
._collapsible_c6yrt_394 ._collapsibleBody_c6yrt_449._expanded_c6yrt_457 {
  grid-template-rows: 1fr;
}
._collapsible_c6yrt_394 ._metric_c6yrt_250:first-child {
  border-top: 1px solid var(--clrTertiary);
}html {
  color-scheme: dark;
}

html:has(body._themeLight_6n1my_5),
html:has(body._themePastelLight_6n1my_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_6n1my_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_6n1my_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

@keyframes _fadeIn_6n1my_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes _fadeOut_6n1my_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
._roundForm_6n1my_232 {
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
  animation: _fadeIn_6n1my_1 0.3s ease-in-out;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 8px;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 label {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._searchInput_6n1my_257 {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background-color: var(--clrTertiary);
  color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._searchInput_6n1my_257::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteLabel_6n1my_269 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteIcon_6n1my_274 {
  width: 18px;
  height: 18px;
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteInput_6n1my_279 {
  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_6n1my_232 ._formGroup_6n1my_243 ._noteInput_6n1my_279::placeholder {
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._formGroup_6n1my_243 ._noteInput_6n1my_279:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._leaderCarouselFormGroup_6n1my_298 {
  overflow: hidden;
  min-width: 0;
}
._roundForm_6n1my_232 ._toggleRow_6n1my_302 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 12px;
}
@media (min-width: 640px) {
  ._roundForm_6n1my_232 ._toggleRow_6n1my_302 {
    flex-direction: row;
    justify-content: space-between;
  }
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  gap: 4px;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 span {
  font-size: 14px;
  color: var(--clrAccent-60);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._toggleOptions_6n1my_328 {
  display: flex;
  gap: 8px;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._toggleBtn_6n1my_332 {
  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_6n1my_232 ._toggleGroup_6n1my_316 ._toggleBtn_6n1my_332._active_6n1my_344 {
  background-color: var(--clrAccent-100);
  color: var(--clrPrimary);
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349 {
  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_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349 ._value_6n1my_365 {
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(var(--clrAccent-100-rgb), 0.1);
  font-size: 14px;
  color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349:hover {
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._winResult_6n1my_375 {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #16a34a;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._winResult_6n1my_375 ._value_6n1my_365 {
  background-color: rgba(34, 197, 94, 0.25);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._winResult_6n1my_375:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._loseResult_6n1my_387 {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._loseResult_6n1my_387 ._value_6n1my_365 {
  background-color: rgba(239, 68, 68, 0.25);
}
._roundForm_6n1my_232 ._toggleGroup_6n1my_316 ._singleToggleBtn_6n1my_349._loseResult_6n1my_387:hover {
  background-color: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 label {
  font-size: 14px;
  color: var(--clrAccent-60);
  font-weight: 600;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424 {
  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_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424._winSelected_6n1my_441 {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}
._roundForm_6n1my_232 ._topCutGames_6n1my_399 ._gameResultGroup_6n1my_407 ._gameButtons_6n1my_419 ._gameBtn_6n1my_424._loseSelected_6n1my_446 {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._cancelBtn_6n1my_460 {
  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_6n1my_232 ._formActions_6n1my_451 ._cancelBtn_6n1my_460:hover:not(:disabled) {
  border-color: var(--clrAccent-100);
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._cancelBtn_6n1my_460:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._saveRoundBtn_6n1my_477 {
  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_6n1my_232 ._formActions_6n1my_451 ._saveRoundBtn_6n1my_477:hover:not(:disabled) {
  background-color: #4cae4c;
}
._roundForm_6n1my_232 ._formActions_6n1my_451 ._saveRoundBtn_6n1my_477:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
._roundForm_6n1my_232 ._formMessage_6n1my_495 {
  font-size: 14px;
  margin: 0;
  text-align: center;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_d5hfe_5),
html:has(body._themePastelLight_d5hfe_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_d5hfe_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_d5hfe_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

@keyframes _slideInFromRight_d5hfe_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes _slideInFromLeft_d5hfe_1 {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
._stepContainer_d5hfe_236 {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

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

._formStep_d5hfe_250 {
  animation: _slideInFromRight_d5hfe_1 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}html {
  color-scheme: dark;
}

html:has(body._themeLight_z9tfw_5),
html:has(body._themePastelLight_z9tfw_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_z9tfw_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_z9tfw_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._content_z9tfw_216 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 24px;
  padding-bottom: 24px;
}

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

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

._closeButton_z9tfw_267 {
  width: 100%;
  height: 48px;
  flex-shrink: 0;
  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_z9tfw_267:hover {
  transform: translateY(-2px);
  background: var(--clrAccent-30);
}
._closeButton_z9tfw_267:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  ._section_z9tfw_224 h3 {
    font-size: 16px;
  }
  ._section_z9tfw_224 li {
    font-size: 14px;
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_qn95q_5),
html:has(body._themePastelLight_qn95q_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_qn95q_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_qn95q_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._bottomBarContainer_qn95q_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  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_qn95q_216 ._bottomBar_qn95q_216 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 500px;
  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_qn95q_5 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216, ._themePastelLight_qn95q_6 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 {
  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_qn95q_5 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216._legacy_qn95q_260, ._themePastelLight_qn95q_6 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216._legacy_qn95q_260 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
._themeDark_qn95q_131 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 {
  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_qn95q_131 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216._legacy_qn95q_260 {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274 {
  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_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274::selection {
  background: transparent;
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274:hover ._linkIcon_qn95q_301 {
  transform: translateY(-2px);
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274:active {
  background-color: var(--clrAccent-10);
  transform: scale(0.95);
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274._active_qn95q_308 {
  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_qn95q_260 ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274._active_qn95q_308 {
  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_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274._active_qn95q_308 ._linkIcon_qn95q_301 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274 ._linkIcon_qn95q_301 {
  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;
}
._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274 ._linkLabel_qn95q_335 {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 400px) {
  ._bottomBarContainer_qn95q_216 ._bottomBar_qn95q_216 ._linkContainer_qn95q_274 ._linkLabel_qn95q_335 {
    font-size: 9.5px;
  }
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  border-radius: 40px;
  pointer-events: auto;
  color: var(--clrTertiaryReverse);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clrPrimary30);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  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);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
._themeLight_qn95q_5 ._bottomBarContainer_qn95q_216 ._playButton_qn95q_346, ._themePastelLight_qn95q_6 ._bottomBarContainer_qn95q_216 ._playButton_qn95q_346 {
  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);
}
._themeDark_qn95q_131 ._bottomBarContainer_qn95q_216 ._playButton_qn95q_346 {
  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);
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346:hover {
  color: var(--clrAccent-80);
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346:hover ._linkIcon_qn95q_301 {
  transform: translateY(-2px);
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346:active {
  transform: scale(0.95);
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346._active_qn95q_308 {
  color: var(--clrAccent-80);
  background-color: rgba(255, 255, 255, 0.3);
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346._active_qn95q_308 ._linkIcon_qn95q_301 {
  color: var(--clrAccent-80);
}
._bottomBarContainer_qn95q_216 ._playButton_qn95q_346 ._linkIcon_qn95q_301 {
  height: 28px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}: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;
}

._page_sble3_14 {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 96px 18px 112px;
  color: var(--clrTextPrimary);
}

._header_sble3_21,
._toolbarTitle_sble3_22,
._showcaseHeader_sble3_23 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._header_sble3_21 {
  margin-bottom: 18px;
}
._header_sble3_21 h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}
._header_sble3_21 p {
  margin: 6px 0 0;
  color: var(--clrTextTertiary);
  font-weight: 700;
}

._iconButton_sble3_44 {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  color: var(--clrTextPrimary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  cursor: pointer;
}
._iconButton_sble3_44 svg {
  width: 22px;
  height: 22px;
}

._accountShowcase_sble3_61 {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--clrSecondary) 82%, transparent);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
}

._accountPanel_sble3_71 {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 18px;
  border-right: 1px solid var(--clrAccent-10);
}
._accountPanel_sble3_71 h2 {
  margin: 0;
  font-size: 1.12rem;
}
._accountPanel_sble3_71 p {
  margin: 4px 0 10px;
  color: var(--clrTextTertiary);
}

/* Name and handle read as one identity, so they share a baseline and wrap
   together. The handle steps down in weight and colour: it identifies, the name
   is what you read. */
._identity_sble3_91 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

._handle_sble3_98 {
  color: var(--clrTextTertiary);
  font-size: 0.88rem;
  font-weight: 600;
}

._tierCounts_sble3_104 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
._tierCounts_sble3_104 span {
  padding: 5px 8px;
  color: var(--clrTextSecondary);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--clrAccent-10);
  border-radius: 999px;
}

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

._showcaseHeader_sble3_23 {
  color: var(--clrTextSecondary);
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

._message_sble3_131 {
  margin: 14px 0 0;
  padding: 10px 12px;
  color: var(--clrTextSecondary);
  background: var(--clrAccent-10);
  border-radius: 8px;
}

._toolbar_sble3_22 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
._toolbar_sble3_22 h2 {
  margin: 0;
  font-size: 1.24rem;
}

._searchInput_sble3_150 {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--clrTextPrimary);
  background: var(--clrSecondary);
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
}

._grid_sble3_160 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  margin-top: 18px;
}

._skeletonCard_sble3_167 {
  min-height: 148px;
  background: linear-gradient(90deg, var(--clrAccent-10), var(--clrAccent-20), var(--clrAccent-10));
  background-size: 220% 100%;
  border-radius: 8px;
  animation: _shimmer_sble3_1 1.4s infinite linear;
}

._emptyState_sble3_175 {
  margin: 0;
  color: var(--clrTextTertiary);
}

._selectionList_sble3_180 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._selectionList_sble3_180 button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  color: var(--clrTextPrimary);
  text-align: left;
  background: var(--clrPrimary);
  border: 1px solid var(--clrAccent-10);
  border-radius: 8px;
  cursor: pointer;
}
._selectionList_sble3_180 img,
._selectionList_sble3_180 span:first-child {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: var(--clrAccent-10);
  border-radius: 50%;
}

._clearButton_sble3_208 {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  color: var(--clrTextPrimary);
  font-weight: 800;
  background: transparent;
  border: 1px solid var(--clrAccent-20);
  border-radius: 8px;
  cursor: pointer;
}

@keyframes _shimmer_sble3_1 {
  to {
    background-position: -220% 0;
  }
}
@media (max-width: 740px) {
  ._page_sble3_14 {
    padding-top: 82px;
  }
  ._accountShowcase_sble3_61 {
    grid-template-columns: 1fr;
  }
  ._accountPanel_sble3_71 {
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--clrAccent-10);
  }
}html {
  color-scheme: dark;
}

html:has(body._themeLight_5if5j_5),
html:has(body._themePastelLight_5if5j_6) {
  color-scheme: light;
}

:root {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #0d260d;
  --clrErrorOnTint: #2e0a0a;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_5if5j_5 {
  --clrPrimary: #F4F4F5;
  --clrPrimary30: rgba(244, 244, 245, 0.3);
  --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;
  --clrSuccessOnTint: #1f4f1f;
  --clrErrorOnTint: #7a1f1f;
  --clrWarning-100: #C49168;
  --clrWarning-50: #E88434;
  --clrAccent-100: #000000;
  --clrAccent-80: rgba(0, 0, 0, 0.8);
  --clrAccent-60: rgba(0, 0, 0, 0.6);
  --clrAccent-50: rgba(0, 0, 0, 0.5);
  --clrAccent-40: rgba(0, 0, 0, 0.4);
  --clrAccent-30: rgba(0, 0, 0, 0.3);
  --clrAccent-20: rgba(0, 0, 0, 0.2);
  --clrAccent-10: rgba(0, 0, 0, 0.1);
  --clrGradient: linear-gradient(90deg, #e7e7e7 10%, #ffffff 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(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_5if5j_131 {
  --clrPrimary: #0F1418;
  --clrPrimary30: rgba(15, 20, 25, 0.3);
  --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;
  --clrSuccessOnTint: #d6ffd6;
  --clrErrorOnTint: #ffd6d6;
  --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-20: rgba(255, 255, 255, 0.2);
  --clrAccent-10: rgba(255, 255, 255, 0.1);
  --clrGradient: linear-gradient(90deg, #262a2e 10%, var(--clrPrimary) 90%);
  --clrRoundWin: linear-gradient(to right,
          rgba(50, 126, 75, 0) 0%,
          rgba(50, 126, 75, 0.15) 30%,
          rgba(50, 126, 75, 0.3) 60%,
          rgba(50, 126, 75, 0.5) 100%);
  --clrRoundLoss: linear-gradient(to right,
          rgba(167, 44, 44, 0) 0%,
          rgba(167, 44, 44, 0.15) 30%,
          rgba(167, 44, 44, 0.3) 60%,
          rgba(167, 44, 44, 0.5) 100%);
  --clrNavBackground: rgba(0, 0, 0, 0.15);
  --clrNavItemActive: rgba(24, 24, 24, 0.49);
  --clrNavItemHover: rgba(255, 255, 255, 0.05);
  --clrBorder: rgba(198, 198, 198, 0.3);
  --clrPrimaryBackground: #0F1418;
  --clrGlassBackground: rgba(15, 20, 24, 0.5);
  --clrGlassBackgroundStrong: rgba(15, 20, 24, 0.6);
  --clrGlassBorder: rgba(255, 255, 255, 0.1);
  --snackbarDefaultBg: #414141;
  --snackbarDefaultText: #BABABA;
  --snackbarDefaultBorder: #BABABA;
  --snackbarDefaultIcon: #BABABA;
  --snackbarSuccessBg: #145E18;
  --snackbarSuccessText: #8FE094;
  --snackbarSuccessBorder: #8FE094;
  --snackbarSuccessIcon: #8FE094;
  --snackbarErrorBg: #910C09;
  --snackbarErrorText: #FE9E9D;
  --snackbarErrorBorder: #FE9E9D;
  --snackbarErrorIcon: #FE9E9D;
}

/* 

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

    - Theo

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

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

._errorContainer_5if5j_216 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--clrPrimary);
}

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

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

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

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