@font-face{font-family:InterFallback;src:url(/static/fonts/Inter-fallback.woff2)format("woff2");unicode-range:U+2192;font-display:swap}

/* Cypherium custom header/menu visibility fix */
:root,
html,
body,
.chakra-theme,
.dark,
.light {
  --chakra-colors-button-header-fg: rgba(255,255,255,0.96) !important;
  --chakra-colors-button-header-fg-selected: rgba(255,255,255,1) !important;
  --chakra-colors-button-header-fg-highlighted: rgba(255,255,255,1) !important;

  --chakra-colors-button-header-bg-selected: rgba(255,255,255,0.12) !important;
  --chakra-colors-button-header-bg-highlighted: rgba(255,255,255,0.14) !important;
  --chakra-colors-button-header-border: rgba(255,255,255,0.20) !important;

  --chakra-colors-link-navigation-fg: rgba(255,255,255,0.96) !important;
  --chakra-colors-link-navigation-fg-selected: rgba(255,255,255,1) !important;

  --chakra-colors-theme-navigation-text-selected-_dark: rgba(255,255,255,1) !important;
  --chakra-colors-theme-icon-primary-_dark: rgba(255,255,255,0.96) !important;
  --chakra-colors-theme-icon-secondary-_dark: rgba(255,255,255,0.82) !important;

  --chakra-colors-icon-primary: rgba(255,255,255,0.96) !important;
  --chakra-colors-icon-secondary: rgba(255,255,255,0.82) !important;
}

/* Header / navigation direct override */
header,
header *,
nav,
nav *,
[role="navigation"],
[role="navigation"] *,
button,
button svg {
  color: rgba(255,255,255,0.96) !important;
}

/* Header icons */
header svg,
nav svg,
[role="navigation"] svg,
button svg {
  color: rgba(255,255,255,0.96) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Dropdown menu panel */
[role="menu"],
[role="menu"] *,
[data-scope="menu"],
[data-scope="menu"] *,
.chakra-menu__menu-list,
.chakra-menu__menuitem {
  color: rgba(255,255,255,0.96) !important;
}

/* Dropdown background */
[role="menu"],
[data-scope="menu"][data-part="content"],
.chakra-menu__menu-list {
  background: #171923 !important;
  border-color: rgba(255,255,255,0.16) !important;
}

/* Hover */
header a:hover,
nav a:hover,
[role="navigation"] a:hover,
button:hover {
  color: #63B3ED !important;
}

/* Cypherium mobile menu button force visibility */
header button,
header [role="button"],
nav button,
nav [role="button"],
[aria-label*="menu"],
[aria-label*="Menu"],
[aria-label*="Open"],
[aria-label*="open"],
[aria-label*="navigation"],
[aria-label*="Navigation"],
button:has(svg),
[role="button"]:has(svg) {
  color: #ffffff !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 10px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

header button svg,
header [role="button"] svg,
nav button svg,
nav [role="button"] svg,
[aria-label*="menu"] svg,
[aria-label*="Menu"] svg,
[aria-label*="Open"] svg,
[aria-label*="open"] svg,
[aria-label*="navigation"] svg,
[aria-label*="Navigation"] svg,
button:has(svg) svg,
[role="button"]:has(svg) svg {
  color: #ffffff !important;
  fill: none !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If hamburger icon uses span lines */
header button span,
nav button span,
[aria-label*="menu"] span,
[aria-label*="Menu"] span {
  background-color: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Temporary visual marker for menu button */
header button:has(svg),
nav button:has(svg),
[aria-label*="menu"],
[aria-label*="Menu"] {
  box-shadow: 0 0 0 2px rgba(99,179,237,0.55) !important;
}

/* Cypherium force visible mobile/header menu button */

/* Header area buttons */
header button,
header [role="button"],
header a,
header [tabindex],
nav button,
nav [role="button"],
nav a,
nav [tabindex] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make icon-only buttons visible */
header button:has(svg),
nav button:has(svg),
button[aria-haspopup],
button[aria-expanded],
button[data-state],
button[data-scope],
[role="button"][aria-haspopup],
[role="button"][aria-expanded] {
  color: #ffffff !important;
  background-color: rgba(16,17,18,0.72) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 0 0 2px rgba(99,179,237,0.55) !important;
  border-radius: 10px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* SVG hamburger/menu icons */
header button svg,
nav button svg,
button[aria-haspopup] svg,
button[aria-expanded] svg,
button[data-state] svg,
button[data-scope] svg,
[role="button"] svg {
  color: #ffffff !important;
  fill: none !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If hamburger icon is made from spans/div lines */
header button span,
header button div,
nav button span,
nav button div {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Top-right small clickable button fallback */
#__next button {
  opacity: 1 !important;
  visibility: visible !important;
}

#__next button svg {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cypherium desktop color correction */
/* PC browser: restore dark text on light header/background */
@media (min-width: 1000px) {
  :root,
  html,
  body,
  .chakra-theme,
  .light {
    --chakra-colors-button-header-fg: rgba(16,17,18,0.88) !important;
    --chakra-colors-button-header-fg-selected: rgba(16,17,18,0.96) !important;
    --chakra-colors-button-header-fg-highlighted: rgba(16,17,18,0.96) !important;

    --chakra-colors-link-navigation-fg: rgba(16,17,18,0.88) !important;
    --chakra-colors-link-navigation-fg-selected: rgba(16,17,18,0.96) !important;

    --chakra-colors-icon-primary: rgba(16,17,18,0.88) !important;
    --chakra-colors-icon-secondary: rgba(16,17,18,0.68) !important;
  }

  header,
  header *,
  nav,
  nav *,
  [role="navigation"],
  [role="navigation"] *,
  header button,
  nav button,
  header a,
  nav a {
    color: rgba(16,17,18,0.88) !important;
  }

  header svg,
  nav svg,
  header button svg,
  nav button svg {
    color: rgba(16,17,18,0.88) !important;
    stroke: currentColor !important;
  }

  header button,
  nav button,
  header [role="button"],
  nav [role="button"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  header a:hover,
  nav a:hover,
  header button:hover,
  nav button:hover {
    color: #3182CE !important;
  }
}

/* Mobile only: keep menu button visible */
@media (max-width: 999px) {
  header button:has(svg),
  nav button:has(svg),
  button[aria-haspopup],
  button[aria-expanded],
  [role="button"]:has(svg) {
    color: #ffffff !important;
    background-color: rgba(16,17,18,0.72) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  header button svg,
  nav button svg,
  button[aria-haspopup] svg,
  button[aria-expanded] svg,
  [role="button"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Cypherium drawer/menu text visibility fix for light mode */

/* Drawer panel in light mode */
html.light [data-scope="drawer"][data-part="content"],
html.light [data-scope="dialog"][data-part="content"],
.light [data-scope="drawer"][data-part="content"],
.light [data-scope="dialog"][data-part="content"],
body:not(.dark) [data-scope="drawer"][data-part="content"],
body:not(.dark) [data-scope="dialog"][data-part="content"] {
  background: #ffffff !important;
  color: #101112 !important;
}

/* All text inside opened drawer/menu in light mode */
html.light [data-scope="drawer"] *,
html.light [data-scope="dialog"] *,
html.light [data-scope="menu"] *,
.light [data-scope="drawer"] *,
.light [data-scope="dialog"] *,
.light [data-scope="menu"] *,
body:not(.dark) [data-scope="drawer"] *,
body:not(.dark) [data-scope="dialog"] *,
body:not(.dark) [data-scope="menu"] * {
  color: #101112 !important;
}

/* Links and buttons inside drawer */
html.light [data-scope="drawer"] a,
html.light [data-scope="drawer"] button,
html.light [data-scope="drawer"] [role="menuitem"],
html.light [data-scope="drawer"] [role="link"],
.light [data-scope="drawer"] a,
.light [data-scope="drawer"] button,
.light [data-scope="drawer"] [role="menuitem"],
.light [data-scope="drawer"] [role="link"],
body:not(.dark) [data-scope="drawer"] a,
body:not(.dark) [data-scope="drawer"] button,
body:not(.dark) [data-scope="drawer"] [role="menuitem"],
body:not(.dark) [data-scope="drawer"] [role="link"] {
  color: #101112 !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Icons inside drawer */
html.light [data-scope="drawer"] svg,
html.light [data-scope="drawer"] svg *,
.light [data-scope="drawer"] svg,
.light [data-scope="drawer"] svg *,
body:not(.dark) [data-scope="drawer"] svg,
body:not(.dark) [data-scope="drawer"] svg * {
  color: #101112 !important;
  stroke: #101112 !important;
  fill: none !important;
}

/* Close button inside light drawer */
html.light [data-scope="drawer"] button[aria-label*="Close"],
html.light [data-scope="drawer"] button[aria-label*="close"],
.light [data-scope="drawer"] button[aria-label*="Close"],
.light [data-scope="drawer"] button[aria-label*="close"],
body:not(.dark) [data-scope="drawer"] button[aria-label*="Close"],
body:not(.dark) [data-scope="drawer"] button[aria-label*="close"] {
  color: #101112 !important;
  background: rgba(16,17,18,0.06) !important;
  border: 1px solid rgba(16,17,18,0.16) !important;
}

/* Keep dark drawer readable */
html.dark [data-scope="drawer"][data-part="content"],
html.dark [data-scope="dialog"][data-part="content"],
.dark [data-scope="drawer"][data-part="content"],
.dark [data-scope="dialog"][data-part="content"] {
  background: #101112 !important;
  color: #ffffff !important;
}

html.dark [data-scope="drawer"] *,
html.dark [data-scope="dialog"] *,
.dark [data-scope="drawer"] *,
.dark [data-scope="dialog"] * {
  color: #ffffff !important;
}

/* Cypherium mobile menu label fix */

/* left top mobile menu button */
header button:first-of-type,
nav button:first-of-type {
  width: auto !important;
  min-width: 96px !important;
  height: 48px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 14px !important;
}

/* add visible label after the hamburger icon */
header button:first-of-type::after,
nav button:first-of-type::after {
  content: "Menu";
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  color: #101112 !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

/* icon color in light mode */
html.light header button:first-of-type,
html.light nav button:first-of-type,
.light header button:first-of-type,
.light nav button:first-of-type {
  color: #101112 !important;
  background: rgba(16,17,18,0.04) !important;
  border: 1px solid rgba(16,17,18,0.22) !important;
}

html.light header button:first-of-type svg,
html.light nav button:first-of-type svg,
.light header button:first-of-type svg,
.light nav button:first-of-type svg {
  color: #101112 !important;
  stroke: #101112 !important;
}

/* dark mode */
html.dark header button:first-of-type,
html.dark nav button:first-of-type,
.dark header button:first-of-type,
.dark nav button:first-of-type {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}

html.dark header button:first-of-type::after,
html.dark nav button:first-of-type::after,
.dark header button:first-of-type::after,
.dark nav button:first-of-type::after {
  color: #ffffff !important;
}

html.dark header button:first-of-type svg,
html.dark nav button:first-of-type svg,
.dark header button:first-of-type svg,
.dark nav button:first-of-type svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Cypherium fixed visible Menu label */

/*
  The original mobile/side menu trigger is visible only as a square icon.
  Add a clear "Menu" label near the top-left trigger so users understand it.
*/
body::before {
  content: "Menu";
  position: fixed;
  top: 122px;
  left: 104px;
  z-index: 2147483000;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;
  padding: 0 12px;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;

  color: #101112;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16,17,18,0.22);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);

  pointer-events: none;
}

/* Dark mode */
html.dark body::before,
.dark body::before {
  color: #ffffff;
  background: rgba(16,17,18,0.92);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Small mobile adjustment */
@media (max-width: 600px) {
  body::before {
    top: 118px;
    left: 102px;
    font-size: 15px;
    height: 32px;
    padding: 0 11px;
  }
}

/* Desktop adjustment */
@media (min-width: 768px) {
  body::before {
    top: 96px;
    left: 104px;
  }
}

/* Cypherium remove custom fixed Menu labels */
body::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}

header button:first-of-type::after,
nav button:first-of-type::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}

/* Cypherium restore real menu button label only */

/* Keep the fake fixed floating Menu label disabled */
body::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}

/* Restore only the real top-left menu button label */
header button:first-of-type {
  width: auto !important;
  min-width: 132px !important;
  height: 56px !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  border-radius: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Add Menu text back to the actual header menu button */
header button:first-of-type::after {
  content: "Menu" !important;
  display: inline-block !important;

  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;

  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

/* Light mode */
html.light header button:first-of-type,
.light header button:first-of-type {
  color: #101112 !important;
  background: rgba(16,17,18,0.04) !important;
  border: 1px solid rgba(16,17,18,0.24) !important;
  box-shadow: 0 0 0 2px rgba(49,130,206,0.14) !important;
}

html.light header button:first-of-type::after,
.light header button:first-of-type::after {
  color: #101112 !important;
}

html.light header button:first-of-type svg,
html.light header button:first-of-type svg *,
.light header button:first-of-type svg,
.light header button:first-of-type svg * {
  color: #101112 !important;
  stroke: #101112 !important;
}

/* Dark mode */
html.dark header button:first-of-type,
.dark header button:first-of-type {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: 0 0 0 2px rgba(99,179,237,0.30) !important;
}

html.dark header button:first-of-type::after,
.dark header button:first-of-type::after {
  color: #ffffff !important;
}

html.dark header button:first-of-type svg,
html.dark header button:first-of-type svg *,
.dark header button:first-of-type svg,
.dark header button:first-of-type svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Do not create Menu labels on nav buttons or other buttons */
nav button:first-of-type::after {
  content: none !important;
  display: none !important;
}