@font-face {
  font-family: "Open Runde";
  src: url(/assets/OpenRunde-Bold-22f71f8cac8e352a3a130a74ede7cf32daf6f85215c8afec4620407fc43bd88b.woff2) format("woff2"), url(/assets/OpenRunde-Bold-abba4a2b5a07da56aa3097d1b4b95ebcd2296210cddf21567d887cecbb8b9b85.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url(/assets/OpenRunde-Medium-adb92512a91d05aca55869de38e80de3fec77c4cfc7f75a573d38698d92b7dc2.woff2) format("woff2"), url(/assets/OpenRunde-Medium-7f3078d6a6a649d5615c56b9c0d0179bf274f8e5947556b2e7c3e038771459ef.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url(/assets/OpenRunde-Regular-da626624df33fd2135719ce53cccbdcdc4770362c6d10ca686b5ed46a5159c60.woff2) format("woff2"), url(/assets/OpenRunde-Regular-b5e0642c215922ed15c1d95a98136ece0d441c4a049ec59c71b31769b51b7388.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url(/assets/OpenRunde-Semibold-200393030e029a7af989f457ce24b66ba8266e0020793da1e1d63b22ae223381.woff2) format("woff2"), url(/assets/OpenRunde-Semibold-c3ecc68db9e6e86e82b77fefa3613b3a66e7e6556a2c5df9798f4f92a21cc592.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPEiko";
  src: url(/assets/PPEiko-Thin-932c2a8a9a4838bc26a1f1ee5641386d194454d2288f9f8d6c6aaacd8c354484.woff2) format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPEiko";
  src: url(/assets/PPEiko-Medium-f6348e460e44f015cf20b0f20dc6be1d87f420a0eeb75a06dbe4334b2c22eaf8.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPEiko";
  src: url(/assets/PPEiko-Heavy-aa36b2f5034c7b4029ebb007e43e5b54438c510414ec13665832edb47f201c36.woff2) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPEiko";
  src: url(/assets/PPEiko-LightItalic-e725c2fc2a23b210a64a0e919cde19dc9fecf9a044904a8ad64dd1ca702fd591.woff2) format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PPEiko";
  src: url(/assets/PPEiko-BlackItalic-dba5ee9dd36c19e00d8632d7d9fab94656fca0856f41932b91b917fe36849515.woff2) format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
:root {
  --font-base: "Open Runde", sans-serif;
  --certificate-font: "PPEiko", sans-serif;
  --container-grid-gap-x: 16px;
  --container-padding-x-mobile: 20px;
  --small-regular: 400 10px/12px "Open Runde", sans-serif;
  --small-medium: 500 14px/20px "Open Runde", sans-serif;
  --label-medium: 500 10px/14px "Open Runde", sans-serif;
  --body-regular: 400 12px/16px "Open Runde", sans-serif;
  --body-medium: 500 16px/24px "Open Runde", sans-serif;
  --paragraph-regular: 400 14px/20px "Open Runde", sans-serif;
  --paragraph-medium: 500 12px/16px "Open Runde", sans-serif;
  --2x-regular: 400 24px/32px "Open Runde", sans-serif;
  --2x-medium: 500 24px/32px "Open Runde", sans-serif;
  --lg-regular: 400 18px/28px "Open Runde", sans-serif;
  --lg-medium: 500 18px/28px "Open Runde", sans-serif;
  --xl-regular: 400 20px/28px "Open Runde", sans-serif;
  --xl-medium: 500 20px/28px "Open Runde", sans-serif;
  --xs-regular: 400 12px/16px "Open Runde", sans-serif;
  --xs-medium: 500 12px/16px "Open Runde", sans-serif;
  --sm-regular: 400 14px/20px "Open Runde", sans-serif;
  --sm-medium: 500 14px/20px "Open Runde", sans-serif;
  --base-medium: 400 16px/24px "Open Runde", sans-serif;
  --base-medium: 500 16px/24px "Open Runde", sans-serif;
  --post-regular: 400 16px/24px "Open Runde", sans-serif;
  --post-medium: 500 16px/24px "Open Runde", sans-serif;
  --2x-regular: 400 24px/32px "Open Runde", sans-serif;
  --2x-medium: 500 24px/32px "Open Runde", sans-serif;
  --h3-medium: 500 30px/36px "Open Runde", sans-serif;
  --h4-medium: 500 18px/28px "Open Runde", sans-serif;
  --h5-medium: 500 20px/28px "Open Runde", sans-serif;
  --h6-medium: 500 24px/32px "Open Runde", sans-serif;
  --dark-100: #131316;
  --dark-200: #1d1d20;
  --dark-300: #27272a;
  --back-900: #0f0f11;
  --black: #000;
  --white: #fff;
  --gray: #555658;
  --orange: #f97316;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-2: rgba(255, 255, 255, 0.02);
  --white-4: rgba(255, 255, 255, 0.04);
  --white-8: rgba(255, 255, 255, 0.08);
  --text-white: #e4e4e7;
  --sub-text-color: #71717a;
  --text-card: #9f9fa0;
  --text-color-link: #60a5fa;
  --text-background-white: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  --text-background-orange: linear-gradient(180deg, #f97316 0%, rgba(249, 115, 22, 0.9) 100%);
  --text-background-input: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.36) 100%
  );
  --root-background-color: linear-gradient(0deg, #0F0F11, #0F0F11), radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
  --background-checkout-card: radial-gradient(
      78.04% 50.03% at 50% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(15, 15, 17, 0.5);
  --background-partner-cypto: radial-gradient(
      78.04% 50.03% at 50% 0%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.02);
  --background-progress-bar: #0f1013;
  --background-active: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0) 74.04%
    ),
    rgba(255, 255, 255, 0.08);
  --background-input: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    #0f0f11;
  --box-shadow-card-free: -857px 0px 240px 0px rgba(0, 0, 0, 0.01),
    -549px 0px 219px 0px rgba(0, 0, 0, 0.06), -309px 0px 185px 0px rgba(0, 0, 0, 0.2),
    -137px 0px 137px 0px rgba(0, 0, 0, 0.34), -34px 0px 75px 0px rgba(0, 0, 0, 0.39);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);
  --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);
  --primary-white-disabled-color: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.90) 100%);
  --primary-white-disabled-color-hover: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.90) 100%);
  --primary-white-background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.00) 74.04%), rgba(255, 255, 255, 0.80);
  --primary-white-background-hover: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 74.04%), rgba(255, 255, 255, 0.90);
  --primary-black-disabled-color: rgba(15, 15, 17, 0.90);
  --primary-black-disabled-color-hover: #0F0F11;
  --primary-black-background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.00) 74.04%), rgba(255, 255, 255, 0.08);
  --primary-black-background-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 74.04%), rgba(255, 255, 255, 0.10);
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: none;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}

/* HTML5 display-role reset for older browsers */
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

div,
button,
p,
input {
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  outline: none;
}
div :focus,
button :focus,
p :focus,
input :focus {
  outline: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

a {
  text-decoration: none;
}

img,
video,
iframe {
  max-width: 100%;
  max-height: 100%;
}

body {
  margin: 0;
  max-width: 100vw;
}

img {
  -webkit-touch-callout: none;
  user-select: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  position: relative;
}
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0F0F11;
  z-index: -5;
}

html,
body {
  font-smoothing: antialiased !important;
  -webkit-font-smoothing: antialiased !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-y: none !important;
  font-size: var(--fontsize-base);
  font-family: var(--font-base);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

h3 {
  letter-spacing: -1px;
}

@supports (padding-top: env(safe-area-inset-top)) {
  body {
    --safe-area-inset-top: env(safe-area-inset-top);
    height: calc(100% + var(--safe-area-inset-top));
  }
}
@media (display-mode: fullscreen) {
  body {
    height: 100%;
  }
  video {
    object-fit: contain !important;
  }
}
@media (display-mode: standalone) {
  body {
    height: 100%;
  }
}
video {
  object-fit: cover;
}

video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
  object-fit: contain !important;
}

.box-fill {
  height: 100%;
  width: 100%;
}

.gridDebug {
  height: 100%;
  pointer-events: none;
  position: fixed;
  width: 100%;
  max-width: 1232px;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 99999999999;
  display: none;
  gap: var(--container-grid-gap-x);
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 46.5em) and (max-width: 63.99375em) {
  .gridDebug {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (min-width: 64em) {
  .gridDebug {
    grid-template-columns: repeat(12, 1fr);
  }
}
.gridDebug__show {
  display: grid;
}

.gridDebug .grid_col {
  background-color: rgba(255, 107, 76, 0.3);
  height: 100vh;
  position: relative;
}

.gridDebug .grid_col::before {
  background-color: rgba(255, 107, 76, 0.3);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  width: 1px;
}

.gridDebug .grid_col::after {
  background-color: rgba(255, 107, 76, 0.3);
  content: "";
  height: 100%;
  right: 0;
  position: absolute;
  width: 1px;
}

body {
  overflow-x: visible;
  background: var(--root-background-color);
  margin: 0;
}
@media (min-width: 769px) {
  body {
    min-height: 100vh;
    height: -webkit-fill-available;
  }
}

.full-height-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body * {
  font-family: var(--font-base);
}

button {
  cursor: pointer;
  font-family: var(--font-base);
}

.container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  max-width: 1272px;
  padding: 0 20px;
}

.grid-container {
  width: 100%;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
}

@media (max-width: 1199px) {
  .container {
    padding: 0 20px;
  }
  .grid-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: flex-start;
    align-items: flex-start;
  }
}
.w-full {
  width: 100%;
}

.p-24 {
  padding: 24px;
}

.no-padding {
  padding: 0 !important;
}

.border-orange {
  border: 1px solid rgba(255, 180, 128, 0.04) !important;
}

.link-hide-on-desktop {
  display: flex;
}
@media (min-width: 64em) {
  .link-hide-on-desktop {
    display: none;
  }
}

.hidden {
  display: none;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.absolute-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.margin-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.text-sm--regular {
  font: var(--sm-regular);
}

.text-sm--medium {
  font: var(--sm-medium);
}

.text-base--regular {
  font: var(--base-regular);
}

.text-base--medium {
  font: var(--base-medium);
}

.text-lg--regular {
  font: var(--lg-regular);
}

.text-lg--medium {
  font: var(--lg-medium);
}

.text-xl--regular {
  font: var(--xl-regular);
}

.text-xl--medium {
  font: var(--xl-medium);
}

.text-2x--regular {
  font: var(--2x-regular);
}

.text-2x--medium {
  font: var(--2x-medium);
}

.text-h3--medium {
  font: var(--h3-medium);
}

.text-h4--medium {
  font: var(--h4-medium);
}

.text-h5--medium {
  font: var(--h5-medium);
}

@keyframes radial {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes fillAnimation {
  from {
    width: 0;
  }
  to {
    width: var(--progress-value, 0%);
  }
}
.modals__container {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: rgba(19, 19, 22, 0.72);
  animation: fadeInMenu 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fadeInMenu {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
.modals__container.open {
  display: flex;
}

.modal__wrapper {
  gap: 0;
  width: 400px;
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  overscroll-behavior: none;
}

.modal__wrapper-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 24px;
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(40px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
.modal__wrapper-header {
  width: 100%;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: border-image-source 0.5s var(--easeOutQuart);
}

.languages__top {
  display: flex;
  align-items: flex-start;
  width: 100%;
  justify-content: space-between;
}

.languages__top svg {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.languages__top svg path {
  transition: 0.4s var(--easeOutQuart);
}

.languages__top svg:hover path {
  stroke-opacity: 1;
}

.modal__wrapper-header h3 {
  font: var(--body-medium);
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8px;
}

.languages__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  cursor: pointer;
}

.languages__wrapper-content {
  display: flex;
  padding: 20px 0;
  align-items: center;
  gap: 0;
  width: 100%;
  align-self: stretch;
  position: relative;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: border-image-source 0.5s var(--easeOutQuart);
}

.languages__wrapper-content::after {
  content: "Select";
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--primary-black-background);
  font: var(--small-medium);
  color: var(--white-90);
  transition: 0.5s var(--easeOutQuart);
}

.languages__wrapper-content:hover::after {
  background: var(--primary-black-background-hover);
}

.languages__wrapper-content figure {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
}

.languages__wrapper-content figure img {
  width: 18px;
  height: 18px;
}

.languages__wrapper-content p {
  font: var(--body-medium);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 0;
  align-self: stretch;
  text-transform: capitalize;
}

.languages__wrapper-content:hover,
.languages__wrapper-content.languages__wrapper-content--active {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

.languages__wrapper-content.languages__wrapper-content--active::after {
  content: "Selected";
  opacity: 0.4;
}

.languages__wrapper-content.languages__wrapper-content--active:hover::after {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

@media (max-width: 63.99375em) {
  .modal__wrapper {
    width: 100dvw;
  }
  .modals__container-wrapper {
    position: absolute;
    bottom: 0;
  }
}
.gradient-border_bg {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  padding: 1px !important;
  z-index: 1 !important;
}

.gradient-border_bg div {
  background: #0F0F11 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: calc(var(--br) - 1px) !important;
}

.gradient-border {
  --br: 16px !important;
  border-radius: var(--br) !important;
  position: relative !important;
  background: transparent !important;
  padding: 1px !important;
}

.gradient-border_inner {
  position: relative !important;
  z-index: 2 !important;
  border-radius: calc(var(--br) - 1px) !important;
}

.gradient-border_inner.gradient-border_inner--have-background {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), hsla(0, 0%, 100%, 0.02) !important;
}

.gradient-border_inner.gradient-border_inner--have-background--2 {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0F0F11 !important;
}

.gradient-border.gradient-border--12 {
  --br: 12px !important;
}

.gradient-border::before,
.gradient-border::after {
  z-index: 0 !important;
}

.gradient-border::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: var(--br) !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important;
  pointer-events: none !important;
}

.gradient-border::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: var(--br) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  pointer-events: none !important;
}

.gradient-border.gradient-border--default-height::after,
.gradient-border.gradient-border--default-height::before {
  height: var(--default-height) !important;
}

.gradient-border.gradient-border--default-height .gradient-border_inner {
  height: var(--default-height) !important;
}

.gradient-border.gradient-border--default-height .gradient-border_inner:has(div:only-child) > div:only-child {
  border-radius: calc(var(--br) - 1px) !important;
}

.admin-resources-new__header {
  display: flex;
  align-items: center;
  gap: 24px;
}
.admin-resources-new__header .button_to {
  display: flex;
  margin: 0;
}
.admin-resources-new__header .button_to button {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.admin-resources-new__header .button_to button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-resources-new__back {
  display: flex;
  align-items: center;
}

.admin-resources-new__title {
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
}

.admin-resources-new__button {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.admin-resources-new__button:hover {
  background: #F2F2F2;
}

.admin-resources-new__button--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.admin-resources-new__button--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-summaries-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-summaries-item__status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.admin-summaries-item__status--live {
  background-color: rgba(22, 163, 74, 0.2);
  color: #4ade80;
}

.admin-summaries-item__status--ended {
  background-color: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.admin-summaries-item__status--upcoming {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.admin-summaries-item__dates {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.admin-users-results-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-login {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--root-background-color);
}

.admin-login__container {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.admin-login__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.admin-login__logo img {
  height: 48px;
}

.admin-login__title {
  font: var(--2x-medium);
  color: #ffffff;
  margin-bottom: 24px;
  text-align: center;
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-login__form {
  width: 100%;
}

.admin-login__alert {
  padding: 12px;
  margin-bottom: 20px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
  color: #ef4444;
  font: var(--sm-medium);
}

.admin-login__field {
  margin-bottom: 20px;
}

.admin-login__label {
  display: block;
  margin-bottom: 8px;
  font: var(--sm-medium);
  color: var(--white-80);
}

.admin-login__input-wrapper {
  position: relative;
}

.admin-login__input {
  width: 100%;
  padding: 12px 16px;
  background: var(--background-input);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--white);
  font: var(--body-medium);
  transition: all 0.3s var(--easeOutQuart);
}

.admin-login__input:focus {
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.admin-login__actions {
  margin-top: 32px;
}

.admin-login__actions input[type=submit] {
  width: 100%;
  padding: 12px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  font: var(--sm-medium);
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--easeOutQuart);
}

.admin-login__actions input[type=submit]:hover {
  background: #F2F2F2;
}

@media (max-width: 768px) {
  .admin-login__container {
    max-width: 100%;
    margin: 0 20px;
    padding: 30px 20px;
  }
}
.admin-header {
  display: flex;
  max-width: 1232px;
  margin: auto;
  padding: 24px;
  align-items: center;
}

@media (max-width: 768px) {
  .admin-header {
    padding: 20px;
  }
}
.admin-header__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1;
  gap: 20px;
}

.admin-header__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  gap: 6px;
  position: relative;
  opacity: 0.4;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: var(--small-medium);
  color: var(--white);
}

.admin-header__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);
  box-shadow: 0 0 1000px #ffffff;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
}

.admin-header__link:hover,
.admin-header__link.active,
.admin-header__link:hover::after,
.admin-header__link.active::after {
  opacity: 1;
}

.admin-search {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-search__input-wrapper {
  width: 100%;
  height: 52px;
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-radius: 128px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--root-background-color);
  color: white;
}

.admin-search__input {
  width: 100%;
  height: 100%;
  padding: 8px 8px 8px 24px;
  color: white;
}

.admin-search__input::placeholder {
  font: var(--body-medium);
  background: var(--text-background-input);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-search__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
  position: absolute;
  right: 8px;
  border: none;
  cursor: pointer;
  padding: 0;
}

.admin-search__icon:hover {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(255, 255, 255, 0.12);
}

.admin-research {
  max-width: 608px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 768px) {
  .admin-research {
    padding: 20px;
  }
}
.admin-research__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-research-banner {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

.admin-research-banner__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-research-banner__button {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  /* text-sm/medium */
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

.admin-research-banner__title {
  font-family: "Open Runde";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.admin-research-banner__subtitle {
  color: rgba(255, 255, 255, 0.4);
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.admin-research-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-research__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
  color: #e4e4e7;
}

.admin-summaries-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.admin-summaries-tabs__manage-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.5rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-summaries-tabs__manage-btn svg {
  width: 16px;
  height: 16px;
}
.admin-summaries-tabs__manage-btn:hover {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-summaries-tabs--center {
  justify-content: center;
}

.admin-summaries-tabs__item {
  background: hsla(0, 0%, 100%, 0.0392156863);
  padding: 6px 12px;
  border-radius: 9999px;
  width: max-content;
  transition: background 0.5s var(--easeOutQuart);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: hsla(0, 0%, 100%, 0.3607843137);
  width: max-content;
  transition: color 0.5s var(--easeOutQuart);
}

.admin-summaries-tabs__item--active,
.admin-summaries-tabs__item:hover {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  color: #e4e4e7;
}

.admin-summaries__items {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0F0F11;
  height: 482px;
}

.admin-summaries__simplebar {
  display: flex;
  flex-direction: column;
  padding: 8px 24px;
  max-height: 482px;
  gap: 16px;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.admin-summaries-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: border-image-source 0.5s var(--easeOutQuart);
}

.admin-summaries-item:hover {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

.admin-summaries-item__date {
  color: rgba(255, 255, 255, 0.5);
  font-family: "Open Runde";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.admin-summaries-item__title {
  color: #E4E4E7;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

.admin-summaries-item__description {
  display: block;
  align-self: stretch;
  color: rgba(255, 255, 255, 0.4);
  /* text-sm/regular */
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.blueprint-editor__overview {
  margin-bottom: 32px;
  /* padding: 32px; */
  /* background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02); */
  /* border-radius: 16px; */
  /* border: 1px solid rgba(255, 255, 255, 0.04); */
}

.blueprint-editor__overview-content {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.blueprint-editor__overview-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.blueprint-editor__title {
  width: 100%;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  min-height: 36px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.blueprint-editor__title:hover,
.blueprint-editor__title:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__subtitle {
  width: 100%;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  min-height: 24px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.blueprint-editor__subtitle:hover,
.blueprint-editor__subtitle:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__description {
  width: 100%;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  min-height: 120px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.blueprint-editor__description:hover,
.blueprint-editor__description:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__form-group {
  margin-bottom: 24px;
}

.blueprint-editor__form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.blueprint-editor__form-group:last-child {
  margin-bottom: 0;
}

.blueprint-editor__input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.blueprint-editor__input[type=date]::-webkit-calendar-picker-indicator,
.blueprint-editor__input[type=week]::-webkit-calendar-picker-indicator,
.blueprint-editor__input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

.blueprint-editor__input[type=date]::-webkit-calendar-picker-indicator:hover,
.blueprint-editor__input[type=week]::-webkit-calendar-picker-indicator:hover,
.blueprint-editor__input[type=time]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.8;
}

.blueprint-editor__input:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 14px;
  font-family: "Open Runde";
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.blueprint-editor__select:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__select option {
  background: #0F0F11;
  color: #ffffff;
}

.blueprint-editor__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.blueprint-editor__section-header h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.blueprint-editor__access-settings-header {
  margin-top: 32px;
  margin-bottom: 16px;
}

.blueprint-editor__access-settings-header h3 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.blueprint-editor__toggles-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.blueprint-editor__modules,
.blueprint-editor__exam {
  margin-bottom: 32px;
  padding: 32px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.blueprint-editor__modules-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blueprint-editor__module-preview {
  display: flex;
  padding: 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  align-items: center;
  gap: 8px;
}

.blueprint-editor__module-preview:hover {
  background: hsla(0, 0%, 100%, 0.04);
  border-color: hsla(0, 0%, 100%, 0.08);
}

.blueprint-editor__module-preview h4 {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.blueprint-editor__module-preview h5 {
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0;
  color: #ffffff;
}

.blueprint-editor__module-preview p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

.blueprint-editor__module-preview.dragging {
  opacity: 0.9;
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.blueprint-editor__module-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.blueprint-editor__module-preview-drag {
  color: rgba(255, 255, 255, 0.4);
  cursor: grab;
  user-select: none;
  font-size: 16px;
  line-height: 1;
}

.blueprint-editor__module-preview-stats span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.blueprint-editor__empty-state {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.blueprint-editor__empty-state p {
  margin: 0;
  font-size: 14px;
}

.blueprint-editor__exam-preview {
  padding: 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.blueprint-editor__exam-preview-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.blueprint-editor__exam-preview-stats span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
}

.blueprint-editor__button {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blueprint-editor__button:hover {
  background: #F2F2F2;
}

.blueprint-editor__button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.blueprint-editor__button--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.blueprint-editor__button--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.blueprint-editor__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.blueprint-editor__video-upload {
  margin-top: 8px;
}

.blueprint-editor__file-input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Open Runde";
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blueprint-editor__file-input:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.blueprint-editor__file-input::-webkit-file-upload-button {
  padding: 8px 12px;
  margin-right: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: "Open Runde";
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blueprint-editor__file-input::-webkit-file-upload-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.blueprint-editor__video-preview {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.blueprint-editor__video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px 8px 0 0;
}

.blueprint-editor__video::-webkit-media-controls {
  background: rgba(0, 0, 0, 0.5);
}

.blueprint-editor__video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.5);
}

.blueprint-editor__video-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blueprint-editor__video-info-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.blueprint-editor__video-info-name svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.blueprint-editor__video-info-size {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
}

.blueprint-editor__help-text {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 4px;
}

.blueprint-editor__help-text svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.blueprint-editor__section-preview {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.blueprint-editor__section-preview:hover {
  background: rgba(255, 255, 255, 0.08);
}

.blueprint-editor__section-preview.dragging {
  opacity: 0.9;
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.blueprint-editor__section-preview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.blueprint-editor__section-preview-header h5 {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  color: #ffffff;
  flex: 1;
}

.blueprint-editor__section-preview-drag {
  color: rgba(255, 255, 255, 0.4);
  cursor: grab;
  user-select: none;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.blueprint-editor__section-preview-drag:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.blueprint-editor__section-preview-stats {
  /* display: flex; */
  /* flex-wrap: wrap; */
}

.blueprint-editor__section-preview-stats span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  white-space: nowrap;
}

.blueprint-editor__section-preview-stats-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.admin-resources-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.admin-module-editor__overview {
  padding: 32px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-module-editor__overview-content {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.admin-module-editor__overview-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.admin-module-editor__form-group {
  margin-bottom: 24px;
  width: 100%;
}

.admin-module-editor__form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.admin-module-editor__form-group:last-child {
  margin-bottom: 0;
}

.admin-module-editor__title,
.admin-module-editor__description {
  width: 100%;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.admin-module-editor__title:empty:before,
.admin-module-editor__description:empty:before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.4);
}

.admin-module-editor__title:hover,
.admin-module-editor__title:focus,
.admin-module-editor__description:hover,
.admin-module-editor__description:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.admin-module-editor__title {
  min-height: 36px;
}

.admin-module-editor__description {
  min-height: 120px;
}

.admin-module-editor__button {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-module-editor__button:hover {
  background: #F2F2F2;
}

.admin-module-editor__button--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-module-editor__button--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.admin-module-editor__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.admin-module-editor__section-header h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.admin-module-editor__lessons,
.admin-module-editor__test {
  margin-bottom: 32px;
  padding: 32px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-module-editor__lessons-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-module-editor__lesson-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.admin-module-editor__lesson-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.admin-module-editor__lesson-card.dragging {
  opacity: 0.9;
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.admin-module-editor__lesson-drag {
  color: rgba(255, 255, 255, 0.4);
  cursor: grab;
  user-select: none;
  font-size: 16px;
  line-height: 1;
}

.admin-module-editor__lesson-card a {
  display: block;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.admin-module-editor__lesson-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.admin-module-editor__lesson-card h5 {
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0;
  color: #ffffff;
}

.admin-module-editor__lesson-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

.admin-module-editor__lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.admin-module-editor__lesson-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.admin-module-editor__lesson-stats span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.admin-module-editor__test-preview {
  padding: 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.admin-module-editor__test-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.admin-module-editor__test-stats span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
}

.admin-module-editor__empty-state {
  padding: 32px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  text-align: center;
}

.admin-module-editor__empty-state p {
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.admin-module-editor__overview-content select,
.admin-module-editor__overview-content input[type=number] {
  width: auto;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-family: "Open Runde";
  font-size: 14px;
  transition: all 0.3s ease;
}

.admin-module-editor__overview-content select:focus,
.admin-module-editor__overview-content input[type=number]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

.admin-module-editor__input {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-family: "Open Runde";
  transition: all 0.3s;
  margin-bottom: 8px;
}

.admin-module-editor__input:focus {
  outline: none;
  border-color: #3b82f6;
}

.admin-module-editor__input::placeholder {
  color: #bdbdbd;
  opacity: 1;
  font-size: 15px;
}

select.admin-module-editor__input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  width: 100%;
}

.admin-module-editor__lesson-card--two-line {
  flex-direction: column;
  align-items: flex-start;
}

.admin-module-editor__lesson-card--live-call {
  flex-direction: column;
  align-items: flex-start;
}

.admin-module-editor__lesson-card--live-call .admin-module-editor__lesson-header {
  width: 100%;
}

.admin-module-editor__lesson-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.admin-module-editor__lesson-card--two-line h5,
.admin-module-editor__lesson-card--two-line p {
  margin: 0;
}

.admin-lesson-editor__overview {
  padding: 32px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(26, 26, 28, 1);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-lesson-editor__overview-content {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.admin-lesson-editor__form-group {
  margin-bottom: 24px;
}

.admin-lesson-editor__form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.admin-lesson-editor__form-group:last-child {
  margin-bottom: 0;
}

.admin-lesson-editor__title,
.admin-lesson-editor__content,
.admin-lesson-editor__input {
  width: 100%;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.admin-lesson-editor__title:empty:before,
.admin-lesson-editor__content:empty:before,
.admin-lesson-editor__input:empty:before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.4);
}

.admin-lesson-editor__title:hover,
.admin-lesson-editor__content:hover,
.admin-lesson-editor__input:hover,
.admin-lesson-editor__title:focus,
.admin-lesson-editor__content:focus,
.admin-lesson-editor__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.admin-lesson-editor__title {
  min-height: 48px;
}

.admin-lesson-editor__content {
  min-height: 240px;
}

.admin-lesson-editor__video-upload {
  margin-top: 8px;
}

.admin-lesson-editor__file-input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Open Runde";
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-lesson-editor__file-input:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.admin-lesson-editor__file-input::-webkit-file-upload-button {
  padding: 8px 12px;
  margin-right: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: "Open Runde";
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-lesson-editor__file-input::-webkit-file-upload-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.admin-lesson-editor__video-preview {
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.admin-lesson-editor__video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px 8px 0 0;
}

.admin-lesson-editor__video::-webkit-media-controls {
  background: rgba(0, 0, 0, 0.5);
}

.admin-lesson-editor__video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.5);
}

.admin-lesson-editor__video-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-lesson-editor__video-info-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.admin-lesson-editor__video-info-name svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.admin-lesson-editor__video-info-size {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
}

.admin-lesson-editor__help-text {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-lesson-editor__help-text svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.admin-lesson-editor__checkbox-toggle {
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-lesson-editor__checkbox-toggle:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.admin-lesson-editor__checkbox-toggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.admin-lesson-editor__checkbox-toggle:checked {
  background: #007AFF;
  border-color: #007AFF;
}

.admin-lesson-editor__checkbox-toggle:checked:before {
  left: 22px;
  background: #FFFFFF;
}

.admin-lesson-editor__checkbox-toggle:checked:hover {
  background: #0066CC;
}

.admin-lesson-editor__checkbox-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-lesson-editor__checkbox-group label {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
}

.admin-lesson-editor__overview-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.admin-lesson-editor__button {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-lesson-editor__button:hover {
  background: #F2F2F2;
}

.admin-lesson-editor__errors {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.admin-lesson-editor__errors h2 {
  color: #FF3B30;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.admin-lesson-editor__errors ul {
  margin: 0;
  padding-left: 24px;
  list-style-type: disc;
}

.admin-lesson-editor__errors ul li {
  color: rgba(255, 59, 48, 0.8);
  font-size: 14px;
  line-height: 20px;
  padding-left: 8px;
}

.admin-lesson-editor__errors ul li::marker {
  color: rgba(255, 59, 48, 0.6);
}

/* Wiki Selection Styling */
.admin-lesson-editor__wikis {
  position: relative;
}

.admin-lesson-editor__wikis .tagify {
  width: 100%;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.admin-lesson-editor__wikis .tagify:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.admin-lesson-editor__wikis .tagify__input {
  color: #ffffff;
}

.admin-lesson-editor__wikis .tagify__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.admin-lesson-editor__wikis .tagify__tag {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: all 0.3s ease;
}

.admin-lesson-editor__wikis .tagify__tag:hover {
  background: rgba(255, 255, 255, 0.12);
}

.admin-lesson-editor__wikis .tagify__tag__removeBtn {
  color: rgba(255, 255, 255, 0.6);
}

.admin-lesson-editor__wikis .tagify__tag__removeBtn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.admin-lesson-editor__wikis .tagify__dropdown {
  background: #1a1a1c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.admin-lesson-editor__wikis .tagify__dropdown__item {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
}

.admin-lesson-editor__wikis .tagify__dropdown__item--active {
  background: rgba(255, 255, 255, 0.08);
}

.admin-lesson-editor__wikis .tagify__dropdown__item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.direct-upload-progress {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.direct-upload-progress__text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.direct-upload-progress__track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.direct-upload-progress__bar {
  height: 100%;
  width: 0%;
  background: #007AFF;
  border-radius: 4px;
  transition: width 0.2s ease;
}

.direct-upload-progress__bar--error {
  background: #FF3B30;
}

.admin-test-editor__errors {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.admin-test-editor__errors h2 {
  color: #FF3B30;
  font-size: 16px;
  margin-bottom: 12px;
}

.admin-test-editor__errors ul {
  list-style-type: disc;
  padding-left: 24px;
}

.admin-test-editor__errors ul li {
  color: rgba(255, 59, 48, 0.8);
  padding-left: 8px;
}

.admin-test-editor__errors ul li::marker {
  color: rgba(255, 59, 48, 0.6);
}

.admin-test-editor__overview {
  margin-bottom: 24px;
  background: rgba(26, 26, 28, 1);
  border-radius: 24px;
  padding: 24px;
}

.admin-test-editor__overview-content {
  margin-bottom: 24px;
}

.admin-test-editor__form-group {
  margin-bottom: 24px;
}

.admin-test-editor__form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: "Open Runde";
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.8);
}

.admin-test-editor__input {
  width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-family: "Open Runde";
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.admin-test-editor__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.admin-test-editor__input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-test-editor__input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.admin-test-editor__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.admin-test-editor__section-header h3,
.admin-test-editor__section-header h4 {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.admin-test-editor__questions {
  margin-bottom: 24px;
}

.admin-test-editor__questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-test-editor__question {
  margin-bottom: 32px;
  position: relative;
}

.admin-test-editor__question:last-child {
  margin-bottom: 0;
}

.admin-test-editor__question-header {
  position: relative;
  margin-bottom: 24px;
}

.admin-test-editor__question-header .admin-test-editor__button--icon {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.admin-test-editor__question-header:hover .admin-test-editor__button--icon {
  opacity: 1;
}

.admin-test-editor__question-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  padding-right: 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-family: "Open Runde";
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.3s ease;
  resize: vertical;
}

.admin-test-editor__question-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.admin-test-editor__question-input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-test-editor__question-input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.admin-test-editor__answers {
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.admin-test-editor__answers .admin-test-editor__add-button {
  margin: 0;
  width: 100%;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px;
  font-size: 13px;
}

.admin-test-editor__answers .admin-test-editor__add-button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.admin-test-editor__answers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-test-editor__answer {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 12px;
  align-items: center;
}

.admin-test-editor__answer-input-wrapper {
  position: relative;
  width: 100%;
}

.admin-test-editor__answer-input-wrapper .admin-test-editor__input {
  padding-right: 40px;
  margin: 0;
  border-radius: 6px;
}

.admin-test-editor__answer-input-wrapper .admin-test-editor__button--icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 4px;
  min-width: 24px;
  height: 24px;
  padding: 4px;
}

.admin-test-editor__answer-input-wrapper .admin-test-editor__button--icon svg {
  width: 14px;
  height: 14px;
}

.admin-test-editor__answer-input-wrapper:hover .admin-test-editor__button--icon {
  opacity: 1;
}

.admin-test-editor__checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-test-editor__checkbox-group label {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 20px;
}

.admin-test-editor__checkbox-toggle {
  appearance: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-test-editor__checkbox-toggle:checked {
  background: #007AFF;
  border-color: #007AFF;
}

.admin-test-editor__checkbox-toggle::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.admin-test-editor__checkbox-toggle:checked::before {
  opacity: 1;
}

.admin-test-editor__checkbox-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-test-editor__checkbox-toggle:checked:hover {
  background: #0066CC;
  border-color: #0066CC;
}

.admin-test-editor__button {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 56px;
  font-family: "Open Runde";
  font-size: 14px;
  line-height: 20px;
  color: #0F0F11;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.admin-test-editor__button:hover {
  background: #F2F2F2;
}

.admin-test-editor__button--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.admin-test-editor__button--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-test-editor__button--icon {
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  min-width: 32px;
  height: 32px;
  justify-content: center;
}

.admin-test-editor__button--icon:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.admin-test-editor__button--icon svg {
  width: 16px;
  height: 16px;
}

.admin-test-editor__button--subtle {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -moz-backdrop-filter: blur(8px);
  -o-backdrop-filter: blur(8px);
  -ms-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.4);
}

.admin-test-editor__button--subtle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.admin-test-editor__button--small {
  padding: 4px 12px;
  font-size: 13px;
  line-height: 18px;
  height: 26px;
}

.admin-test-editor__overview-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-test-editor__add-button {
  align-self: flex-start;
  margin-left: 8px;
}

.admin-test-editor__add-question-wrapper {
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
}

.admin-test-editor__add-button {
  width: 100%;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px;
  font-size: 13px;
  margin: 0;
}

.admin-test-editor__add-button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.admin-test-editor__image-section {
  margin-bottom: 16px;
  position: relative;
  transition: opacity 0.3s ease;
}

.admin-test-editor__image-section--loading {
  opacity: 0.5;
  pointer-events: none;
}

.admin-test-editor__image-section--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.admin-test-editor__image-upload .admin-test-editor__file-input {
  display: none;
}

.admin-test-editor__image-upload .admin-test-editor__add-button {
  margin: 0;
  width: 100%;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.admin-test-editor__image-upload .admin-test-editor__add-button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.admin-test-editor__image-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.admin-test-editor__image-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.admin-test-editor__image-preview .admin-test-editor__button {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.admin-test-editor__image-preview:hover .admin-test-editor__button {
  opacity: 1;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.admin-exam-editor {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin-exam-editor__questions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-exam-editor__questions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-exam-editor__question {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.admin-exam-editor__question-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.admin-exam-editor__question-input {
  flex: 1;
  min-height: 80px;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #fff;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.5;
}

.admin-exam-editor__question-input:focus {
  outline: none;
  border-color: #4dabf7;
  box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}

.admin-exam-editor__answers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-exam-editor__answers-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-exam-editor__answer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

.admin-exam-editor__answer-input-wrapper {
  position: relative;
}

.admin-exam-editor__answer-input {
  width: 100%;
  padding: 0.75rem;
  padding-right: 2.5rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

.admin-exam-editor__answer-input:focus {
  outline: none;
  border-color: #4dabf7;
  box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}

.admin-exam-editor__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #4dabf7;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s;
}

.admin-exam-editor__button:hover {
  background-color: #3c99e6;
}

.admin-exam-editor__button--icon {
  padding: 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
}

.admin-exam-editor__answer-input-wrapper:hover .admin-exam-editor__button--icon {
  opacity: 1;
}

.admin-exam-editor__button--subtle {
  background-color: transparent;
  color: #868e96;
}

.admin-exam-editor__button--subtle:hover {
  background-color: #f1f3f5;
  color: #495057;
}

.admin-exam-editor__add-button {
  align-self: flex-start;
  background-color: transparent;
  color: #4dabf7;
  border: 2px dashed #4dabf7;
}

.admin-exam-editor__add-button:hover {
  background-color: rgba(77, 171, 247, 0.1);
}

.admin-exam-editor__checkbox-toggle {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.admin-exam-editor__checkbox-toggle:checked {
  background-color: #4dabf7;
  border-color: #4dabf7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
}

.admin-exam-editor__checkbox-toggle:focus {
  outline: none;
  border-color: #4dabf7;
  box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}

.admin-exam-editor__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
}

.section-form__errors {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 69, 58, 0.1);
  border: 1px solid rgba(255, 69, 58, 0.2);
  color: #FF453A;
}

.section-form__errors h2 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.section-form__errors ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.section-form__name {
  margin-bottom: 24px;
}

.section-form__name-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 0;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.section-form__name-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.section-form__name-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
}

.section-form__editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
  overflow: hidden;
}

.ql-toolbar.ql-snow {
  background: linear-gradient(0deg, rgba(15, 15, 17, 0.8), rgba(15, 15, 17, 0.8)), radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
  border: none;
  border-radius: 12px;
  padding: 12px !important;
  position: sticky;
  top: 80px; /* Adjust this value based on your header height */
  z-index: 10;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: backdrop-filter 0.3s ease, background 0.3s ease;
}

/* Add a class that can be applied by JavaScript when scrolled beyond the initial position */
.ql-toolbar.ql-snow.is-sticky {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(0deg, rgba(15, 15, 17, 0.75), rgba(15, 15, 17, 0.75)), radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 16px;
}

.ql-toolbar.ql-snow .ql-formats:last-child {
  margin-right: 0;
}

.ql-toolbar.ql-snow button {
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.ql-toolbar.ql-snow button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.ql-toolbar.ql-snow button.ql-active {
  color: #0A84FF;
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: currentColor;
}

.ql-toolbar.ql-snow .ql-fill {
  fill: currentColor;
}

.section-form__editor .ql-container {
  border: none;
  font-family: inherit;
}

.section-form__editor .ql-editor {
  min-height: 300px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.section-form__editor .ql-editor:focus {
  outline: none;
}

.section-form__editor .ql-editor p {
  margin-bottom: 16px;
}

.section-form__editor .ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.4);
  font-style: normal;
}

.section-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.section-form__submit {
  width: 100%;
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFF;
  color: #0F0F11;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.section-form__submit:hover {
  background: #F2F2F2;
}

/* This class is applied to the container only, with no duplicate styles */
.editor-container-with-sticky-toolbar {
  position: relative;
}

.due-diligence-editor__score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.due-diligence-editor__score:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.due-diligence-editor__score-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.due-diligence-editor__score-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.due-diligence-editor__score-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #007AFF 0%, #007AFF var(--value, 50%), rgba(255, 255, 255, 0.1) var(--value, 50%));
  outline: none;
  border-radius: 3px;
}
.due-diligence-editor__score-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  box-shadow: 0 0 0 2px #18181B;
  margin-top: -5px;
}
.due-diligence-editor__score-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  box-shadow: 0 0 0 2px #18181B;
}
.due-diligence-editor__score-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
}
.due-diligence-editor__score-slider::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.due-diligence-editor__score-value {
  min-width: 24px;
  text-align: right;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
}
.due-diligence-editor__toggle-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.due-diligence-editor__toggle-container label {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.due-diligence-editor__toggle {
  appearance: none;
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.due-diligence-editor__toggle:checked {
  background: #007AFF;
  border-color: #007AFF;
}
.due-diligence-editor__toggle:checked:before {
  transform: translateX(20px);
  background: #FFFFFF;
}
.due-diligence-editor__toggle:checked:hover {
  background: #0066CC;
}
.due-diligence-editor__toggle:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  left: 2px;
  top: 2px;
  transition: all 0.3s ease;
}
.due-diligence-editor__toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.due-diligence-editor__toggle-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.due-diligence-editor__visibility {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.due-diligence-editor__visibility:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.due-diligence-editor__visibility-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.summaries-form__dojo-score-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.summaries-form__dojo-score-container:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.summaries-form__dojo-score-container label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.summaries-form__dojo-score-container span {
  min-width: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.summaries-form__dojo-score {
  flex: 1;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.summaries-form__dojo-score::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  transition: all 0.3s ease;
}
.summaries-form__dojo-score::-webkit-slider-thumb:hover {
  background: #0066CC;
  transform: scale(1.1);
}
.summaries-form__dojo-score::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  transition: all 0.3s ease;
}
.summaries-form__dojo-score::-moz-range-thumb:hover {
  background: #0066CC;
  transform: scale(1.1);
}
.summaries-form__dojo-score::-ms-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  transition: all 0.3s ease;
}
.summaries-form__dojo-score::-ms-thumb:hover {
  background: #0066CC;
  transform: scale(1.1);
}
.summaries-form__dojo-score::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.summaries-form__dojo-score::-moz-range-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.summaries-form__dojo-score::-ms-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

:root {
  --white-60: rgba(255, 255, 255, 0.6);
  --white-40: rgba(255, 255, 255, 0.4);
}

.score-container {
  width: 100%;
  height: 140px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.score-container.green {
  --dd-background: radial-gradient(
      78.04% 50.03% at 50% 0%,
      rgba(17, 181, 127, 0.06) 0%,
      rgba(17, 181, 127, 0) 100%
    ),
    #0f0f11;
  --dd-border: 1px solid rgba(17, 181, 127, 0.04);
  --dd-color: #11b57f;
  --dd-progress-background: linear-gradient(90deg, #0f0f11 0%, #10b981 100%);
  --dd-dot-background: linear-gradient(90deg, rgba(17, 181, 127, 0) -207.81%, #11b57f 100%);
  --dd-dot-drop-shadow: drop-shadow(0px 0px 8px #37a47c);
}
.score-container.red {
  --dd-border: 1px solid rgba(244, 63, 95, 0.04);
  --dd-background: radial-gradient(
      78.04% 50.03% at 50% 0%,
      rgba(244, 63, 95, 0.06) 0%,
      rgba(244, 63, 95, 0) 100%
    ),
    #0f0f11;
  --dd-color: #f43f5f;
  --dd-progress-background: linear-gradient(90deg, #0f0f11 0%, #f43f5f 100%);
  --dd-dot-background: linear-gradient(90deg, rgba(244, 63, 95, 0) -207.81%, #f43f5f 100%);
  --dd-dot-drop-shadow: drop-shadow(0px 0px 8px #f53c41);
}
@media (min-width: 1024px) {
  .score-container {
    margin: 20px 0;
  }
}

.running_border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  transform-origin: center center;
  pointer-events: none;
  animation: radial1 5s linear infinite;
  will-change: transform;
  background-image: conic-gradient(transparent, transparent, transparent, var(--dd-color), transparent, transparent, transparent, transparent, transparent);
}

.score-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: var(--dd-background);
  border: var(--dd-border);
  padding: 24px;
  border-radius: 16px;
  display: flex;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  position: relative;
  z-index: 1;
}

.score-title {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  color: var(--white-60);
  font-size: 14px;
  font-weight: 500;
}

.score-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.score-progress-value {
  color: var(--white-40);
  font-size: 12px;
  font-weight: 500;
}

.score-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 24px;
}

.score-progress-bar .score-progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  animation: fillAnimation 1.5s linear forwards;
  animation-play-state: paused;
  background: var(--dd-progress-background);
  border-radius: 24px;
}

.score-progress-bar .score-progress-fill::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: -100%;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--dd-dot-background);
  filter: var(--dd-dot-drop-shadow) blur(6px);
}

.score-progress-bar .score-progress-countup {
  position: absolute;
  bottom: calc(100% + 16px);
  left: calc(100% - 24px);
  letter-spacing: -1px;
  color: var(--dd-color);
  font-size: 24px;
  font-weight: 500;
}

@keyframes radial1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fillAnimation {
  from {
    width: 0;
  }
  to {
    width: var(--progress-value);
  }
}
.category-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.category-modal--active {
  display: flex;
}

.category-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.category-modal__container {
  position: relative;
  background: #1c1c1e;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  z-index: 51;
  display: flex;
  flex-direction: column;
}

.category-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.category-modal__title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
}

.category-modal__close {
  color: #6b7280;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}

.category-modal__close:hover {
  color: #fff;
}

.category-modal__body {
  padding: 1rem;
  color: #fff;
  flex: 1;
  min-height: 0;
}

.category-modal__form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.category-modal__categories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  overflow-y: auto;
  max-height: 50vh; /* Limit height to prevent excessive scrolling */
  padding-right: 0.5rem; /* Add some padding for the scrollbar */
}

/* Style the scrollbar for webkit browsers */
.category-modal__categories::-webkit-scrollbar {
  width: 8px;
}

.category-modal__categories::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.category-modal__categories::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.category-modal__categories::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.category-modal__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.category-modal__handle {
  color: #6b7280;
  cursor: grab;
  padding: 0.25rem;
  user-select: none;
}

.category-modal__handle:active {
  cursor: grabbing;
}

.category-modal__input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.category-modal__input {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 0.875rem;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.category-modal__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
}

.category-modal__input-error {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
  animation: slideIn 0.2s ease-out;
}

/* Handle Rails field_with_errors wrapper */
.field_with_errors {
  display: contents; /* This makes the wrapper "disappear" while keeping its children */
}

.field_with_errors .category-modal__input {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.field_with_errors .category-modal__input:focus {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.category-modal__delete {
  color: #6b7280;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
}

.category-modal__delete:hover {
  color: #ef4444;
}

.category-modal__add {
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.category-modal__add:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.category-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.category-modal__cancel {
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.category-modal__cancel:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.category-modal__save {
  padding: 0.5rem 1rem;
  background: #0a84ff;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.category-modal__save:hover {
  background: #0070e0;
}

.category-modal__save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.category-modal__errors {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  animation: fadeIn 0.2s ease-in-out;
}

.category-modal__error {
  color: #ef4444;
  font-size: 0.875rem;
  line-height: 1.5;
}

.category-modal__error + .category-modal__error {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(239, 68, 68, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Tournament Participants Styles */
.tournament-participants__container {
  margin-bottom: 32px;
  padding: 32px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.tournament-participants__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.tournament-participants__header h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.tournament-participants__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

.tournament-participants__card {
  display: block;
  padding: 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.tournament-participants__card:hover {
  background: hsla(0, 0%, 100%, 0.04);
  border-color: hsla(0, 0%, 100%, 0.08);
}

.tournament-participants__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tournament-participants__card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tournament-participants__rank-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  min-width: 32px;
}

.tournament-participants__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.tournament-participants__card-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.tournament-participants__no-badge {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.tournament-participants__stats span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.tournament-participants__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tournament-participants__empty-state {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.tournament-participants__empty-state p {
  margin: 0;
  font-size: 14px;
}

.user-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.user-card__title {
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

.user-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.user-card__grid--personal {
  gap: 16px 40px;
}

.registration-info {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.registration-info__icon {
  margin-right: 8px;
}

.registration-info__text {
  color: #FFFFFF;
}

.registration-info__separator,
.registration-info__id {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.4);
}

.user-field {
  margin-bottom: 16px;
}

.user-field__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin: 0 0 5px 0;
}

.user-field__value {
  margin: 0;
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 500;
}

.user-field__value--empty {
  color: rgba(255, 255, 255, 0.4);
}

.user-field__note {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-top: 3px;
}

.user-field__value .toggle-switch-label {
  color: #fff;
}

.user-field__value .admin-summaries-item__meta {
  margin-bottom: 0;
}

/* Subscription Event Delete Button */
.subscription-event-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscription-event-delete:hover {
  background-color: rgba(224, 82, 82, 0.1);
}

.subscription-event-delete:active {
  background-color: rgba(224, 82, 82, 0.2);
  transform: scale(0.95);
}

.subscription-event-delete img {
  transition: opacity 0.2s ease-in-out;
}

.subscription-event-delete:hover img {
  opacity: 0.8;
}

.admin-analytics {
  max-width: 768px;
  margin: auto;
}
.admin-analytics__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 768px) {
  .admin-analytics__content {
    padding: 16px;
    gap: 16px;
  }
}
.admin-analytics__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
}
@media (max-width: 768px) {
  .admin-analytics__card {
    padding: 16px;
  }
}
.admin-analytics__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
  .admin-analytics__card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
.admin-analytics__card-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
}
.admin-analytics__month-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 768px) {
  .admin-analytics__month-nav {
    width: 100%;
    justify-content: space-between;
  }
}
.admin-analytics__month-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.admin-analytics__month-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.admin-analytics__month-nav-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-analytics__month-nav-btn--disabled:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}
.admin-analytics__month-nav-current {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  min-width: 100px;
  text-align: center;
}
.admin-analytics__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .admin-analytics__metrics {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) {
  .admin-analytics__metrics {
    justify-content: space-between;
  }
}
.admin-analytics__metric-item {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 16px;
  flex: 1;
}
@media (max-width: 768px) {
  .admin-analytics__metric-item {
    min-width: auto;
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .admin-analytics__metric-item {
    min-width: 48%;
    flex: 0 0 48%;
  }
}
.admin-analytics__metric-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.admin-analytics__metric-value {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}
.admin-analytics__metric-change {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.admin-analytics__metric-change-value {
  font-size: 14px;
  font-weight: 500;
}
.admin-analytics__metric-change-value--positive {
  color: #4ade80;
}
.admin-analytics__metric-change-value--negative {
  color: #f87171;
}
.admin-analytics__metric-change-value--neutral {
  color: rgba(255, 255, 255, 0.5);
}
.admin-analytics__metric-change-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
.admin-analytics__chart-container {
  height: 300px;
  margin-top: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
@media (max-width: 768px) {
  .admin-analytics__chart-container {
    height: 250px;
    padding: 12px;
  }
}
.admin-analytics-banner {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}
@media (max-width: 768px) {
  .admin-analytics-banner {
    padding: 12px;
  }
}
.admin-analytics-banner__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  .admin-analytics-banner__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
.admin-analytics-banner__title {
  font-family: "Open Runde";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.admin-analytics__spacer {
  height: 32px;
  width: 100%;
}
.admin-analytics__summary-boxes {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .admin-analytics__summary-boxes {
    flex-direction: column;
  }
}
.admin-analytics__summary-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-analytics__summary-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.admin-analytics__summary-value {
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF;
}

/* Revenue by method table styles */
.admin-analytics__revenue-by-method {
  margin-top: 2rem;
}

.admin-analytics__section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.admin-analytics__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.admin-analytics__table th,
.admin-analytics__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.admin-analytics__table th {
  font-weight: 600;
  background-color: #f8fafc;
}

.admin-analytics__table tr:last-child td {
  border-bottom: none;
}

.admin-analytics__no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  margin-top: 1.5rem;
}
.admin-analytics__no-data p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  text-align: center;
}

.admin-analytics__term-analysis {
  margin-top: 2rem;
}

.admin-analytics__term-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.admin-analytics__term-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-analytics__term-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.admin-analytics__term-card__amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: right;
  min-width: 100px;
}
.admin-analytics__term-card__percentage {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}
.admin-analytics__term-card__term-amount {
  font-weight: 500;
  color: #fff;
  margin-right: 0.5rem;
  text-align: right;
  min-width: 80px;
}
.admin-analytics__term-card--monthly {
  border-left: 4px solid #1c7ed6;
}
.admin-analytics__term-card--quarterly {
  border-left: 4px solid #52c41a;
}
.admin-analytics__term-card--yearly {
  border-left: 4px solid #fa8c16;
}
.admin-analytics__term-card--unknown {
  border-left: 4px solid #8c8c8c;
}

/* Payment Method Analysis */
.admin-analytics__payment-methods,
.admin-analytics__payment-gateways {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.admin-analytics__payment-card,
.admin-analytics__gateway-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.admin-analytics__payment-card__header,
.admin-analytics__gateway-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-analytics__payment-card__title,
.admin-analytics__gateway-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.admin-analytics__payment-card__amount,
.admin-analytics__gateway-card__amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: right;
  min-width: 100px;
}
.admin-analytics__payment-card__percentage,
.admin-analytics__gateway-card__percentage {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* Method-specific styling */
.admin-analytics__payment-card--card {
  border-left: 4px solid #3498db;
}
.admin-analytics__payment-card--paypal {
  border-left: 4px solid #159be7;
}
.admin-analytics__payment-card--crypto {
  border-left: 4px solid #f7931a;
}
.admin-analytics__payment-card--other {
  border-left: 4px solid #95a5a6;
}

/* Gateway-specific styling */
.admin-analytics__gateway-card--stripe {
  border-left: 4px solid #6772e5;
}
.admin-analytics__gateway-card--paypal {
  border-left: 4px solid #159be7;
}
.admin-analytics__gateway-card--nowpayments {
  border-left: 4px solid #00c3ae;
}
.admin-analytics__gateway-card--coinbase {
  border-left: 4px solid #0052ff;
}
.admin-analytics__gateway-card--copperx {
  border-left: 4px solid #f7931a;
}
.admin-analytics__gateway-card--other {
  border-left: 4px solid #95a5a6;
}
.admin-analytics__gateway-card__terms {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-analytics__gateway-card__term {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
  font-size: 0.875rem;
}
.admin-analytics__gateway-card__term-label {
  flex: 1;
  color: rgba(255, 255, 255, 0.7);
}
.admin-analytics__gateway-card__term-amount {
  font-weight: 500;
  color: #fff;
  margin-right: 0.5rem;
  text-align: right;
  min-width: 80px;
}
.admin-analytics__gateway-card__term-percentage {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

#admin-footer {
  margin-top: 40px;
  margin-bottom: 40px;
}

#admin-footer .footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#admin-footer .footer-container span {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

#admin-footer .footer-container form {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.admin-footer__logout {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: underline;
  transition: color 0.3s var(--easeOutQuart);
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px; /* Slight adjustment to perfectly align with text */
}
.admin-footer__logout:hover {
  color: rgba(255, 255, 255, 0.9);
}

.simplebar-custom {
  overflow-x: hidden;
  overscroll-behavior: none;
}

.simplebar-track.simplebar-vertical {
  width: 12px;
}

.simplebar-scrollbar {
  width: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.32);
  margin: 0 auto;
}

.simplebar-content {
  position: relative;
}

[data-vc=calendar] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-vc=calendar]::-webkit-scrollbar {
  display: none !important;
}

[data-vc-date] {
  padding: 0 !important;
  width: 35px !important;
  height: 35px !important;
}

[data-vc-date]:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px;
}

[data-vc-date-btn] {
  position: relative;
  min-width: 24px;
}

[data-vc-theme=dark].vc {
  background-color: transparent !important;
  padding: 0 !important;
}

[data-vc-date-today] {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
}

[data-vc-theme=dark][data-vc-date-month=current] .vc-date[data-vc-date-weekend] .vc-date__btn {
  color: #e4e4e7 !important;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
  font-family: var(--font-base) !important;
}

[data-vc-theme=dark] .vc-months__month, [data-vc-theme=dark] .vc-years__year {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #181819 !important;
  border: 1px solid hsla(0, 0%, 100%, 0.04) !important;
}

[data-vc-date-month=current] .vc-date__btn {
  color: #e4e4e7 !important;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-family: var(--font-base) !important;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-vc-theme=dark] .vc-date__btn {
  background-color: transparent !important;
}

[data-vc-theme=dark] .vc-week__day,
[data-vc-theme=dark] .vc-week__day[data-vc-week-day-off] {
  color: rgba(228, 228, 231, 0.4) !important;
  text-align: center;
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

.vc-date[data-vc-date-month=prev] button,
.vc-date[data-vc-date-month=next] button {
  color: rgba(228, 228, 231, 0.4) !important;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

.mini_calender__event_wrapper {
  position: absolute;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.mini_calender__event_wrapper > *:nth-child(n+6) {
  display: none;
}

.mini_calender__event {
  width: 4px;
  height: 2px;
}

.mini_calender__event.mini_calender__event--lightBlue {
  background: #60A5FA;
}

.mini_calender__event.mini_calender__event--darkBlue {
  background: #3300FF;
}

.mini_calender__event.mini_calender__event--orange {
  background: #F97315;
}

.mini_calender__event.mini_calender__event--pink {
  background: #a855f7;
}

.mini_calender__event.mini_calender__event--green {
  background: #21AA54;
}

.mini_calender__event.mini_calender__event--grey {
  background: #4D4D4D;
}

.mini_calender__event.mini_calender__event--red {
  background: #DD3D3D;
}

.mini_calender__event.mini_calender__event--brightRed {
  background: #FF0000;
}

.mini_calender__event.mini_calender__event--yellow {
  background: #FDDE42;
}

.mini_calender__event.mini_calender__event--purple {
  background: #46045A;
}

.mini_calender__event.mini_calender__event--white {
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
}

.toastui-calendar-week-view .toastui-calendar-day-name-item.toastui-calendar-week {
  text-align: center;
  text-transform: uppercase;
}

.toastui-calendar-week-view .toastui-calendar-day-names.toastui-calendar-week {
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.toastui-calendar-week-view .toastui-calendar-panel.toastui-calendar-week-view-day-names {
  border: none !important;
}

.week-name {
  display: flex;
  flex-direction: column;
}

.week-name span {
  color: rgba(228, 228, 231, 0.4);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

.week-name p {
  color: #e4e4e7;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

.vc-date__btn[aria-selected=true] {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #c5c1c1;
}

.toastui-calendar-detail-container .toastui-calendar-section-button,
.toastui-calendar-popup-section.toastui-calendar-section-detail {
  display: none;
}

.toastui-calendar-popup-arrow.toastui-calendar-left .toastui-calendar-popup-arrow-border,
.toastui-calendar-popup-arrow.toastui-calendar-right .toastui-calendar-popup-arrow-border {
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}

.toastui-calendar-popup-section.toastui-calendar-section-header {
  margin: 0 !important;
}

.toastui-calendar-popup-arrow.toastui-calendar-left .toastui-calendar-popup-arrow-fill,
.toastui-calendar-popup-arrow.toastui-calendar-right .toastui-calendar-popup-arrow-fill {
  border-right-color: #0f0f11 !important;
  border-left-color: #0f0f11 !important;
}

.toastui-calendar-detail-container {
  padding: 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0f0f11 !important;
}

.calendar_popup-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar_popup-title img {
  width: 20px;
  height: 20px;
}

.calendar_popup-title p {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */
  letter-spacing: -1px;
}

.toastui-calendar-detail-container .toastui-calendar-content {
  height: auto !important;
}

.toastui-calendar-template-popupDetailDate {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.toastui-calendar-timegrid-now-indicator-marker {
  display: none;
}

.toastui-calendar-template-timegridNowIndicatorLabel {
  color: #fff;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

.toastui-calendar-timegrid-now-indicator-left {
  border-top: 1px solid rgba(255, 255, 255, 0.32) !important;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-right {
  border-top: 1px solid rgba(255, 255, 255, 0.32) !important;
}

.toastui-calendar-events {
  margin-right: 0 !important;
}

.toastui-calendar-see-more-container {
  width: max-content !important;
}

.toastui-calendar-see-more {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0f0f11 !important;
  border: 1px solid hsla(0, 0%, 100%, 0.04) !important;
  border-radius: 8px !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.toastui-calendar-see-more .toastui-calendar-see-more-header {
  background-color: transparent !important;
  padding-top: 0 !important;
  height: auto !important;
}

.toastui-calendar-see-more .toastui-calendar-month-more-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.toastui-calendar-see-more .toastui-calendar-see-more-header > span {
  color: #fff !important;
}

#footer {
  position: sticky;
  top: 100vh;
}

.footer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-bottom: 24px;
}
@media (min-width: 80em) {
  .footer-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

.footer-container .footer-container__text {
  width: 256px;
  margin: 0 auto;
  text-align: center;
  font: var(--small-regular);
  color: var(--gray);
  transition: color 0.4s var(--easeOutQuart);
}
@media (min-width: 80em) {
  .footer-container .footer-container__text {
    margin: unset;
    width: max-content;
  }
}

.footer-container__navigation__text {
  text-align: center;
  font: var(--small-regular);
  color: var(--gray);
  transition: color 0.4s var(--easeOutQuart);
}

.footer-container .footer-container__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 24px;
}
@media (max-width: 63.99375em) {
  .footer-container .footer-container__navigation {
    flex-wrap: wrap;
  }
}

.footer-container .footer-container__navigation span:hover {
  color: var(--white);
}

#header {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background: var(--root-background-color);
  transition: transform 0.3s ease;
}
#header.header-hidden {
  transform: translateY(-100%);
  pointer-events: none;
  overflow: hidden;
}
#header::after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 12px;
  top: 100%;
  left: 0;
  right: 0;
  background: transparent;
}
@media (min-width: 64em) {
  #header::after {
    background: var(--root-background-color);
  }
}

#header .header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background: transparent;
}

.header-nofi {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(249, 115, 22, 0);
  background: radial-gradient(50% 50% at 50% 100%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 100%);
  position: relative;
}
@media (min-width: 64em) {
  .header-nofi {
    gap: 24px;
    justify-content: center;
    padding: 16px 0px;
  }
}

.header-nofi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(249, 115, 22), transparent);
}

.header-nofi p {
  font: var(--paragraph-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex: 1;
  text-align: center;
}
@media (min-width: 64em) {
  .header-nofi p {
    flex: none;
  }
}

.header-nofi button {
  width: max-content;
}

.header-nofi a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.header-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
@media (min-width: 64em) {
  .header-container {
    padding-top: 24px;
    padding-bottom: 0;
  }
}

.header-container span {
  font: var(--small-medium);
  color: var(--white);
}

.header-container__logo,
.header-container__navigation,
.header-container__more {
  display: flex;
  align-items: center;
}

.header-container__logo {
  width: auto;
  height: 20px;
}

.header-container__more {
  gap: 8px;
}

.header-container__logo span {
  color: white;
}

.header-container__navigation {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  gap: 16px;
}
@media (min-width: 64em) {
  .header-container__navigation {
    display: flex;
    width: max-content;
  }
}

.header-container__logo img {
  width: 100%;
  height: 100%;
}

.header-container__navigation li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 4px;
  position: relative;
}

.header-container__navigation li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);
  box-shadow: 0 0 1000px #ffffff;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
}

.header-container__navigation li a span {
  opacity: 0.4;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-container__navigation li svg,
.header-container__navigation li img {
  width: 12px;
  height: 16px;
  will-change: transform;
  transition: transform 0.5s var(--easeOutQuart);
  margin-bottom: -2px;
}

.header-container__navigation li svg path {
  transition: stroke-opacity 0.5s var(--easeOutQuart);
}

.header-container__navigation > li:hover:has(.header-container__sub-navigation) .header-container__sub-navigation,
.header-container__navigation > li:hover > a > span,
.header-container__navigation > li.active > a > span,
.header-container__navigation > li:hover:after,
.header-container__navigation > li.active::after {
  opacity: 1;
  pointer-events: auto;
}

.header-container__navigation li.active > svg,
.header-container__navigation li:hover > svg {
  transform: rotate(180deg);
}

.header-container__navigation > li.active svg path,
.header-container__navigation > li:hover svg path {
  stroke-opacity: 1;
}

.header-container__sub-navigation {
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  top: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--0-f-0-f-113-paints, radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11);
}

.header-container__sub-navigation::after {
  position: absolute;
  width: 100%;
  height: 10px;
  background: transparent;
  left: 0;
  right: 0;
  content: "";
  bottom: 100%;
}

.header-container__sub-navigation a {
  display: flex;
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  min-width: 164px;
  position: relative;
  background: transparent;
  transition: background 0.4s var(--easeOutQuart);
}

.hamburger-menu-content__sub-navigation div.console-dual-wrapper,
.header-container__sub-navigation div.console-dual-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-self: stretch !important;
  min-width: 164px !important;
  position: relative;
  padding: 0 !important;
  justify-content: space-between !important;
}

.hamburger-menu-content__sub-navigation div.console-dual-wrapper a.console-dual-link,
.header-container__sub-navigation div.console-dual-wrapper a.console-dual-link {
  display: flex !important;
  padding: 10px 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  position: relative;
  background: transparent;
  transition: background 0.4s var(--easeOutQuart);
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  min-width: auto !important;
}

.hamburger-menu-content__sub-navigation div.console-dual-wrapper a.console-dual-link:first-child,
.header-container__sub-navigation div.console-dual-wrapper a.console-dual-link:first-child {
  width: 81px !important;
  max-width: 81px !important;
}

.hamburger-menu-content__sub-navigation div.console-dual-wrapper a.console-dual-link:last-child,
.header-container__sub-navigation div.console-dual-wrapper a.console-dual-link:last-child {
  width: 40px !important;
  max-width: 40px !important;
}

.hamburger-menu-content__sub-navigation .console-dual-link span,
.header-container__sub-navigation .console-dual-link span {
  opacity: 0.4;
  transition: opacity 0.4s var(--easeOutQuart);
}

.hamburger-menu-content__sub-navigation .console-dual-link:hover span,
.header-container__sub-navigation .console-dual-link:hover span {
  opacity: 1;
}

.hamburger-menu-content__sub-navigation .console-dual-link svg,
.hamburger-menu-content__sub-navigation .console-dual-link img,
.header-container__sub-navigation .console-dual-link svg,
.header-container__sub-navigation .console-dual-link img {
  width: 16px;
  height: 16px;
}

.hamburger-menu-content__sub-navigation .console-dual-link svg path,
.header-container__sub-navigation .console-dual-link svg path {
  stroke-opacity: 0.4 !important;
  transition: stroke-opacity 0.5s var(--easeOutQuart);
}

.hamburger-menu-content__sub-navigation .console-dual-link:hover svg path,
.header-container__sub-navigation .console-dual-link:hover svg path {
  stroke-opacity: 1 !important;
}

.hamburger-menu-content__sub-navigation .console-dual-link::after,
.header-container__sub-navigation .console-dual-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
}

.hamburger-menu-content__sub-navigation .console-dual-link:hover::after,
.header-container__sub-navigation .console-dual-link:hover::after {
  opacity: 1;
}

.hamburger-menu-content__sub-navigation .console-dual-link:hover,
.header-container__sub-navigation .console-dual-link:hover {
  background: transparent;
}

.hamburger-menu-content__sub-navigation a.anchor-have-icon,
.header-container__sub-navigation a.anchor-have-icon {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hamburger-menu-content__sub-navigation a.anchor-have-icon svg,
.hamburger-menu-content__sub-navigation a.anchor-have-icon img,
.header-container__sub-navigation a.anchor-have-icon svg,
.header-container__sub-navigation a.anchor-have-icon img {
  width: 16px;
  height: 16px;
}

.hamburger-menu-content__sub-navigation a.anchor-have-icon .icon path,
.hamburger-menu-content__sub-navigation .anchor-have-icon svg path,
.header-container__sub-navigation a.anchor-have-icon .icon path,
.header-container__sub-navigation .anchor-have-icon svg path {
  stroke-opacity: 0.4;
  transition: stroke-opacity 0.5s var(--easeOutQuart);
}

.hamburger-menu-content__sub-navigation a.anchor-have-icon:hover .icon path,
.hamburger-menu-content__sub-navigation .anchor-have-icon a:hover svg path,
.header-container__sub-navigation a.anchor-have-icon:hover .icon path,
.header-container__sub-navigation .anchor-have-icon a:hover svg path {
  stroke-opacity: 1;
}

.header-container__sub-navigation a:last-child {
  border-radius: 0 0 16px 16px;
}

.header-container__sub-navigation a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  will-change: background;
  transition: background 0.4s var(--easeOutQuart);
}

.header-container__sub-navigation div.js-anchor-sub-item.console-dual-wrapper::after,
.hamburger-menu-content__sub-navigation div.js-anchor-sub-item.console-dual-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  will-change: background;
  transition: background 0.4s var(--easeOutQuart);
}

.header-container__sub-navigation a:last-child::after {
  width: calc(100% - 18px);
}

.header-container__sub-navigation a:hover,
.header-container__sub-navigation a.active {
  background: transparent;
}

.header-container__sub-navigation a:hover::after,
.header-container__sub-navigation a.active::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

.header-container__sub-navigation a:hover span,
.header-container__sub-navigation a.active span {
  opacity: 1;
}

.header-container__more .settings {
  display: none;
  width: 32px;
  height: 28px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
@media (min-width: 64em) {
  .header-container__more .settings {
    display: flex;
  }
}

.header-container__more .settings svg {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.header-container__more .settings svg path {
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

.header-container__more .settings:hover svg path {
  stroke-opacity: 1;
}

.header-container__more .language {
  display: none;
  padding: 6px 6px 6px 8px;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border-radius: 6px;
}
@media (min-width: 64em) {
  .header-container__more .language {
    display: flex;
  }
}

.header-container__more .language svg {
  transform: translateY(1px);
}

.header-container__more .language svg path {
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

.header-container__more .language:hover svg path {
  stroke-opacity: 1;
}

.header-container__more .hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  height: 100%;
  width: 32px;
  gap: 6px;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
@media (min-width: 64em) {
  .header-container__more .hamburger {
    display: none;
  }
}

.header-container__more .hamburger div {
  width: 100%;
  height: 2px;
  background: var(--white);
  will-change: transform;
  transition: transform 0.4s var(--easeInOutQuart);
}

.header-container__more .hamburger.toggled div:nth-of-type(1) {
  transform: rotate(45deg) translateY(3px) translateX(3px);
}

.header-container__more .hamburger.toggled div:nth-of-type(2) {
  transform: rotate(-45deg) translateY(-3px) translateX(3px);
}

#header .hamburger-menu {
  top: 0;
  left: 0;
  position: absolute;
  width: 100dvw;
  border: 1px solid rgba(255, 255, 255, 0.04);
  height: 54px;
  transition: height 0.6s var(--easeInOutQuart);
  overflow: hidden;
  pointer-events: none;
  display: block;
  background: var(--root-background-color);
}
@media (min-width: 64em) {
  #header .hamburger-menu {
    display: none;
  }
}

#header .hamburger-menu.toggled {
  pointer-events: auto;
  height: 100dvh;
}

#header .hamburger-menu .hamburger-menu-content {
  display: flex;
  flex-direction: column;
  padding-top: 96px;
  justify-content: space-between;
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: 58px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#header .hamburger-menu .hamburger-menu-content::-webkit-scrollbar {
  display: none;
}

#header .hamburger-menu .hamburger-menu-content ul {
  padding: 24px;
  padding-top: 12px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
}

#header .hamburger-menu .hamburger-menu-content ul li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  position: relative;
  height: 100%;
  max-height: 73px;
  transition: max-height 0.4s var(--easeInOutQuart);
  overflow: hidden;
}

#header .hamburger-menu .hamburger-menu-content ul li.toggled-submenu {
  max-height: calc(73px + 65px * var(--total-sub-children));
}

#header .hamburger-menu .hamburger-menu-content ul li a {
  font: var(--body-medium);
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  padding: 24px 0px;
  width: 100%;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.2) 50.39%, rgba(255, 255, 255, 0.096) 100%);
  border-bottom: 1px solid;
  border-image-slice: 1;
  will-change: border-image-source, color;
  transition: 0.4s var(--easeOutQuart);
  justify-content: space-between;
  padding-right: 32px;
}

#header .hamburger-menu .hamburger-menu-content ul li button {
  right: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  top: 16px;
}

#header .hamburger-menu .hamburger-menu-content ul li svg {
  width: 12px;
  height: 16px;
  will-change: transform;
  transition: transform 0.4s var(--easeOutQuart);
}

#header .hamburger-menu .hamburger-menu-content ul li svg path {
  transition: 0.4s var(--easeOutQuart);
}

#header .hamburger-menu .hamburger-menu-content .hamburger-menu-content__sub-navigation a.active,
#header .hamburger-menu .hamburger-menu-content ul li.active > a {
  color: var(--white);
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

#header .hamburger-menu .hamburger-menu-content ul li.toggled-submenu > button > svg,
#header .hamburger-menu .hamburger-menu-content ul li.active > svg {
  transform: rotate(180deg);
}

#header .hamburger-menu .hamburger-menu-content ul li.toggled-submenu > button > svg > path,
#header .hamburger-menu .hamburger-menu-content ul li.active > svg path {
  stroke-opacity: 1;
}

#header .hamburger-menu .hamburger-menu-content .hamburger-menu-content__sub-navigation {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  align-self: stretch;
}

#header .hamburger-menu .hamburger-menu-content .hamburger-menu-content__sub-navigation a.languages__wrapper-content--active {
  color: var(--white);
}

#header .hamburger-menu .hamburger-menu-content .hamburger-menu-content__sub-navigation a {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 20px 0;
  justify-content: flex-start;
}

#header .hamburger-menu .hamburger-menu-content > footer {
  margin-top: 32px;
  padding-bottom: 0;
}

#header .hamburger-menu .hamburger-menu-content > footer span {
  text-align: center;
  max-width: 255px;
  margin: 0 auto;
}

[popover] {
  /* 2. AFTER-OPEN-IS-CLOSED STATE */
  /* Initial state for what we're animating *out* to */
  opacity: 0;
  pointer-events: none;
  /* Enumerate transitioning properties, including display */
  transition: opacity 0.4s var(--easeOutQuart), display 0.4s var(--easeOutQuart);
}
[popover]:popover-open {
  /* 0. BEFORE-OPEN STATE */
  /* Initial state for what we're animating *in* from */
}
[popover]:popover-open {
  opacity: 1;
  pointer-events: auto;
}
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    pointer-events: none;
  }
}

.popover__wrapper {
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 10;
  inset: 0;
}

.popover__wrapper__overlay {
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.72);
  position: absolute;
  z-index: -1;
}

.popover__content {
  width: 400px;
  position: absolute;
  margin: auto;
  display: inline-flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #ranked-system-popover .ranked-system-popover__content,
  .popover__content {
    bottom: 0;
    width: 100%;
    width: 100vw;
    max-height: 84.3060959792svh !important;
  }
  .popover__wrapper {
    align-items: flex-end;
    inset: unset;
    top: auto;
    bottom: -20px;
    padding-bottom: 10px;
    height: calc(100dvh + 20px);
  }
  .ranked-chat-rooms-popover__bottom,
  .ranked-system-popover__content__bottom {
    max-height: 57.0687418936svh !important;
    overflow-y: auto;
  }
}
.ranked-system-popover__content__bottom {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: none;
}
.ranked-system-popover__content__bottom::-webkit-scrollbar {
  display: none;
}

.ranked-chat-rooms-popover__bottom {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: none;
}
.ranked-chat-rooms-popover__bottom::-webkit-scrollbar {
  display: none;
}

.primary-btn {
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255, 180, 128, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.08);
}

.primary-btn--overlay::before {
  position: absolute;
  content: "";
  inset: 0;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 100%), rgba(249, 115, 22, 0.08);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
}

.primary-btn span {
  text-transform: capitalize;
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: var(--small-medium);
  width: max-content;
}

.button--anim--border {
  --padding: 8px 12px;
  --border-radius: 999px;
  --width: max-content;
  --height: max-content;
  --border-color: #ffb5805a;
  --background: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(249, 115, 22, 0.08) 0%,
      rgba(249, 115, 22, 0) 100%
    ),
    rgba(255, 180, 128, 0.08);
  --text-color: #ffffff;
  --font: var(--small-medium);
  position: relative;
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  padding: var(--padding);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.button--anim--border__text {
  font: var(--font);
  position: relative;
  z-index: 1;
  background: var(--text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button--anim--border__mask {
  position: absolute;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 1px;
  z-index: 1;
  background: #000000;
}

.button--anim--border__background {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--background);
}

.button--anim--border__background::before {
  position: absolute;
  content: "";
  inset: 0;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(244, 124, 38, 0.08) 0%, rgba(244, 124, 38, 0) 100%), rgba(244, 124, 38, 0.08);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
}

.button--anim--border::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  width: 500%;
  height: 500%;
  background-image: conic-gradient(var(--border-color), transparent, transparent, var(--border-color));
  animation: radial 4s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.button--anim--border::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  width: 500%;
  height: 500%;
  background-image: conic-gradient(var(--border-color), transparent, transparent, var(--border-color));
  animation: radial 4s linear infinite;
  animation-delay: -2s;
  animation-play-state: paused;
  will-change: transform;
}

.button--anim--border:hover::before {
  background-image: conic-gradient(transparent, transparent, transparent, var(--border-color));
  animation-play-state: running;
}

.button--anim--border:hover::after {
  background-image: conic-gradient(transparent, transparent, transparent, var(--border-color));
  animation-play-state: running;
}

.text--gradient {
  --text-color: #ffffff;
  background: var(--text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  position: relative;
}

.tabs__center {
  justify-content: center;
}

/* Horizontal scrolling tabs for summaries and wiki show views */
.tabs--horizontal-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  position: relative;
  /* Hide scrollbar in Chrome/Safari */
}
.tabs--horizontal-scroll::-webkit-scrollbar {
  display: none;
}

/* Scroll arrow indicator */
.tabs__scroll-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  margin: auto;
  width: 16px;
  height: 16px;
  z-index: 10;
  display: none;
  cursor: pointer;
}

/* Shadow gradient when content overflows */
.position-relative:has(.tabs--horizontal-scroll.shadow-indicator):after {
  content: "";
  position: absolute;
  height: 100%;
  width: 60px;
  top: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(15, 15, 17, 0) 0%, rgba(15, 15, 17, 0.8) 100%);
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 768px) {
  .position-relative:has(.tabs--horizontal-scroll.shadow-indicator):after {
    display: none !important;
  }
}

.tabs button {
  background: var(--primary-black-background);
  opacity: 0.4;
  padding: 6px 12px;
  border-radius: 9999px;
  width: max-content;
  will-change: opacity, background;
  transition: all 0.5s var(--easeOutQuart);
  flex-shrink: 0;
}

.tabs button span {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background;
  transition: background 0.5s var(--easeOutQuart);
}

.tabs .button--active,
.tabs button:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

.tabs .button--active span,
.tabs button:hover span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  .tabs {
    justify-content: flex-start;
  }
  .tabs--horizontal-scroll {
    margin: 24px 0;
  }
}
.tabs--prev-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tabs--prev-next button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: 0.5s var(--easeInOutQuart);
  background: var(--primary-black-background);
  opacity: 0.4;
  will-change: opacity;
}

.tabs--prev-next > :first-child button {
  padding: 6px 12px 6px 6px;
}

.tabs--prev-next > :last-child button {
  padding: 6px 6px 6px 12px;
}

.tabs--prev-next button span {
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.tabs--prev-next > :first-child button span {
  color: rgba(255, 255, 255, 0.4) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

.tabs--prev-next > :first-child button img,
.tabs--prev-next > :first-child button svg {
  opacity: 0.4;
}

.tabs--prev-next button:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

.tabs--prev-next button.button--active {
  opacity: 1;
}

.position-relative {
  position: relative;
}

.container--border-gradient {
  --border-color: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0) 74.04%
    ),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
  --background: var(--root-background-color);
  --zIndex: -1;
  --border-left: 1px;
  --border-right: 1px;
  --border-top: 1px;
  --border-bottom: 1px;
  position: relative;
  background: var(--background);
  border: 1px solid transparent;
}

.container--border-gradient::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: calc(50% - var(--border-top) + var(--border-bottom));
  left: calc(50% - var(--border-left) + var(--border-right));
  transform: translate(-50%, -50%);
  z-index: var(--zIndex);
  width: calc(100% + var(--border-left) * 2 + var(--border-right) * 2);
  height: calc(100% + var(--border-top) * 2 + var(--border-bottom) * 2);
  background: var(--border-color);
  border-radius: inherit;
  pointer-events: none;
}

.container--border-gradient::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--zIndex);
  width: 100%;
  height: 100%;
  background: var(--root-background-color);
  border-radius: inherit;
  pointer-events: none;
}

.container--anim--border {
  --padding: 20px;
  --border-radius: 14px;
  --width: max-content;
  --height: max-content;
  --border-color: #00ccff;
  --background: var(--root-background-color);
  --text-color: #ffffff;
  position: relative;
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  padding: var(--padding);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container--anim--border__inner {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

.container--anim--border__background {
  position: absolute;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 1px;
  z-index: 1;
  background: var(--background);
}

.container--anim--border::before {
  content: "";
  position: absolute;
  width: 500%;
  height: 500%;
  background-image: conic-gradient(transparent, transparent, transparent, var(--border-color));
  animation: radial 4s linear infinite forwards;
  will-change: transform;
}

.container-border-gradient-2 {
  --font: var(--sm-medium);
  --text-color: #ffffff99;
  --border-radius: 16px;
  --background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
}

.container-border-gradient-2__background {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: #0f0f11;
}

.container-border-gradient-2__background::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var(--background);
}

.container-border-gradient-2__border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: calc(var(--border-radius) + 1px);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
}

.container-border-gradient-2__border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var(--border-color);
}

.container-border-gradient-2__content {
  position: relative;
  z-index: 2;
  font: var(--font);
  color: var(--text-color);
}

.sound-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.sound-icon-container {
  color: #6b7280;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.sound-control-wrapper.enabled .sound-icon-container {
  color: #6b7280;
}

.sound-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  background-color: #4b5563;
  border-radius: 17px;
  transition: background-color 0.2s;
}

.sound-switch:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.sound-control-wrapper.enabled .sound-switch {
  background-color: #3b82f6;
}

.sound-control-wrapper.enabled .sound-switch:before {
  transform: translateX(14px);
}

.sound-control-button {
  display: flex;
  align-items: center;
  padding: 2px 9px 2px 8px;
  gap: 6px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border: none;
  opacity: 1;
}

.sound-control-button.enabled {
  width: 74px;
  height: 24px;
}

.sound-control-button:not(.enabled) {
  opacity: 0.4;
}

.mute-label {
  font-family: "Open Runde" !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #FFFFFF !important;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.sound-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.news-flash-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 480px) {
  .news-flash__header,
  .alert-box__header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }
  .news-flash__header > span,
  .alert-box__header > span {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .news-flash-controls {
    grid-column: 2;
    grid-row: 1/3;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 8px;
    justify-items: end;
  }
  .sound-control-button {
    grid-column: 1;
    grid-row: 1;
  }
}
.notification-label {
  font-family: "Open Runde" !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.45) 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.notification-control {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}

@media (max-width: 480px) {
  .notification-control {
    display: contents;
  }
  .notification-switch {
    grid-column: 2;
    grid-row: 1;
  }
  .notification-label {
    grid-column: 1/3;
    grid-row: 2;
  }
}
.notification-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.16);
  cursor: pointer;
}

.notification-switch:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.notification-switch.enabled {
  width: 44px;
  height: 24px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 74.04%), rgba(59, 130, 246, 0.24);
}

.notification-switch.enabled:before {
  transform: translateX(20px);
}

.dd-audio-player {
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  gap: 16px;
}

.clap-btn {
  background: transparent;
  border: 1px solid #606060;
  border-radius: 24px;
  padding: 4px 12px;
  font-size: 14px;
  gap: 6px;
  color: #e3e3e3;
}
.clap-btn.active {
  background: #27a843;
  border-color: #27a843;
}

.clap-btn .clap-icon {
  font-size: 18px;
}

.clap-btn:hover {
  background: #2e2f35;
}

.audio-clap-btn {
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s ease, border 0.3s ease;
}
.audio-clap-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

audio {
  width: 100%;
  color-scheme: dark;
  height: 48px;
  display: block;
  background: transparent;
  flex: 1;
}

.dd-audio-player audio::-webkit-media-controls-panel {
  background: transparent;
  padding: 0 16px;
}

.dd-audio-player audio::-webkit-media-controls-timeline {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  height: 3px;
}

.dd-audio-player audio::-webkit-media-controls-current-time-display,
.dd-audio-player audio::-webkit-media-controls-time-remaining-display {
  color: rgba(255, 255, 255, 0.6509803922);
  font-family: inherit;
}

.dd-audio-player audio::-webkit-media-controls-overflow-button,
.dd-audio-player audio::-webkit-media-controls-mute-button,
.dd-audio-player audio::-webkit-media-controls-volume-slider,
.dd-audio-player audio::-webkit-media-controls-seek-back-button,
.dd-audio-player audio::-webkit-media-controls-seek-forward-button {
  display: none !important;
}

.dd-audio-player {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.dd-audio-player audio {
  display: none;
}

.dd-audio-controls {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 16px;
}

.play-btn {
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
}

.play-btn::before {
  display: none;
}

.play-btn.pause::before {
  display: none;
}

.dd-audio-progress-container {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.dd-audio-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 60%, #ffffff 100%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6) inset;
  border-radius: 1px;
}

/* Agrupa tiempo actual, separador y duración */
.time-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time {
  font-size: 13px;
  color: #e5e5e5;
  font-variant-numeric: tabular-nums;
}

.dots-btn {
  background: transparent;
  border: none;
  color: #999;
  font-size: 17px;
  transform: rotate(90deg);
}

.dd-audio-clap {
  margin-left: auto;
}

.clap-icon {
  width: 16px;
  height: 18px;
  display: block;
}

@keyframes clap {
  0% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
  10% {
    transform: scale(1.25) rotate(-12deg);
  }
  20% {
    transform: scale(0.95) rotate(8deg);
  }
  30% {
    transform: scale(1.2) rotate(-6deg);
  }
  40% {
    transform: scale(0.98) rotate(4deg);
  }
  50% {
    transform: scale(1.12) rotate(-3deg);
  }
  60% {
    transform: scale(0.99) rotate(2deg);
  }
  70% {
    transform: scale(1.06) rotate(-1deg);
  }
  80% {
    transform: scale(1) rotate(0);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.audio-clap-btn.active .clap-icon {
  animation: clap 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* destello sale del icono */
.clap-icon {
  position: relative;
}

/* destello dentro del área que envuelve el icono */
.audio-clap-btn {
  position: relative;
}

.audio-clap-btn.active::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translateY(-50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.8;
  animation: burst 0.6s ease-out forwards;
  pointer-events: none;
}

/* quitamos destello anterior */
.clap-icon::after {
  display: none;
}

@keyframes burst {
  0% {
    opacity: 0.8;
    transform: scale(0.4);
  }
  70% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
.play-icon {
  width: 100%;
  height: 100%;
}

.dd-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #a0a0a0;
}

.dd-meta__icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
  opacity: 0.6;
}

.dd-meta__label {
  color: #a0a0a0;
}

.dd-meta__value {
  color: #ffffff;
  font-weight: 600;
}

.dd-meta__sep {
  color: #777;
}

.dd-audio-divider {
  width: 100%;
  height: 1px;
  margin: 16px 0;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

.research-paper-divider {
  width: 100%;
  height: 1px;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

.hidden {
  display: none;
}

.dd-audio-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 180px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  z-index: 20;
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.4);
}

.dd-audio-menu__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dd-audio-menu__item {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  color: #9f9fa0;
  font-size: 14px;
  padding: 12px 16px;
  text-align: left;
  display: flex;
  gap: 12px;
  transition: background 0.3s var(--easeOutQuart), color 0.3s var(--easeOutQuart);
}

.dd-audio-menu__item.active {
  color: rgba(255, 255, 255, 0.8980392157);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
}

.dd-audio-menu__item:hover {
  color: rgba(255, 255, 255, 0.8980392157);
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

.dd-audio-menu__item::before {
  content: "✓";
  opacity: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
}

.dd-audio-menu__item.active::before {
  opacity: 1;
}

.dd-audio-menu__item + .dd-audio-menu__item {
  border-top: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

/* Permitir que el menú salga del contenedor */
.dd-audio-player {
  overflow: visible;
}

@media (min-width: 640px) {
  .dd-audio-player {
    width: 608px;
  }
}
/* Standalone leaderboard block component styles */
.leaderboard-block {
  --border-width: 1px;
  --border-radius: 16px;
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, #0F0F11, #0F0F11);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-left: 16px;
  --padding-right: 16px;
  --background: #0f0f11;
  position: relative;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
}

.leaderboard-block--free-bg {
  --background: transparent;
}

.leaderboard-block::before,
.leaderboard-block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - var(--border-width));
  background: var(--background-color);
  z-index: 0;
  pointer-events: none;
}

.leaderboard-block::before {
  inset: 1px;
  background: rgba(15, 15, 17, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
}

.leaderboard-block__inner {
  position: relative;
  background: var(--background);
  border-radius: var(--inner-border-radius);
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

.leaderboard-block__inner__content {
  width: 100%;
  position: relative;
  z-index: 1;
}

.leaderboard-block__inner__fade--bottom,
.leaderboard-block__inner__fade--top {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.leaderboard-block__inner__fade--bottom {
  bottom: 0;
  height: 48px;
  background: linear-gradient(180deg, rgba(22, 22, 24, 0) 0%, #161618 100%);
}

.leaderboard-block__inner__fade--top {
  top: 0;
  height: 32px;
  background: linear-gradient(0deg, rgba(22, 22, 24, 0) 0%, #161618 100%);
}

.volume-gate-modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.volume-gate-modal {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  max-width: 400px;
  width: 100%;
}

.volume-gate-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  z-index: 1;
}

.volume-gate-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.volume-gate-modal__badges {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  justify-items: center;
  width: 100%;
}

.volume-gate-modal__captions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 12px;
  justify-items: center;
  width: 100%;
}

.volume-gate-modal__caption {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.volume-gate-modal__caption--muted {
  color: rgba(255, 255, 255, 0.4);
}
.volume-gate-modal__caption--accent {
  background: var(--required-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.volume-gate-modal__caption-spacer {
  width: 28px;
}

.volume-gate-modal__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.volume-gate-modal__badge::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--badge-color);
  opacity: 0.22;
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.volume-gate-modal__badge--current {
  width: 56px;
  height: 56px;
  opacity: 0.92;
}
.volume-gate-modal__badge--required {
  width: 56px;
  height: 56px;
}
.volume-gate-modal__badge--required::after {
  inset: -6px;
  opacity: 0.32;
  filter: blur(16px);
}
.volume-gate-modal__badge__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.volume-gate-modal__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  opacity: 0.65;
}
.volume-gate-modal__arrow__img {
  width: 24px;
  height: 24px;
}

.volume-gate-modal__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4em;
  letter-spacing: -0.05em;
  text-align: center;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.volume-gate-modal__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.2) 100%);
  opacity: 0.2;
}

.volume-gate-modal__subtitle {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75em;
  letter-spacing: -0.0625em;
  text-align: center;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.volume-gate-modal__text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.volume-gate-modal__text {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4285714286em;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 352px;
}
.volume-gate-modal__text--secondary {
  font-size: 13px;
  line-height: 1.35em;
  color: rgba(255, 255, 255, 0.4);
}

.volume-gate-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.volume-gate-modal__close img {
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.volume-gate-modal__close:hover img {
  opacity: 0.8;
}

.volume-gate-modal__button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 16px;
  background: #E4E4E7;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.volume-gate-modal__button-primary:hover {
  background: #FAFAFA;
}

.volume-gate-modal__button-primary span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4285714286em;
  text-align: center;
  color: #0F0F11;
}

.unlock-with-trade {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tier-color) 28%, transparent);
  background: var(--tier-background), rgba(15, 15, 17, 0.85);
  position: relative;
  isolation: isolate;
  min-height: 64px;
  box-sizing: border-box;
  max-width: 100%;
}
.unlock-with-trade__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
}
.unlock-with-trade__badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--tier-color);
  opacity: 0.18;
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
.unlock-with-trade__badge__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.unlock-with-trade__copy {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.unlock-with-trade__headline {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  background: var(--tier-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.unlock-with-trade__subline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-locked {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 140px;
  padding: 24px 28px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: padding-box linear-gradient(#0f0f11, #0f0f11), border-box radial-gradient(circle at top right, color-mix(in srgb, var(--required-color) 55%, transparent) 0%, color-mix(in srgb, var(--required-color) 0%, transparent) 70%), border-box radial-gradient(circle at bottom left, color-mix(in srgb, var(--current-color) 35%, transparent) 0%, color-mix(in srgb, var(--current-color) 0%, transparent) 70%);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(78% 60% at 100% 0%, color-mix(in srgb, var(--required-color) 18%, transparent) 0%, transparent 70%), radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--current-color) 10%, transparent) 0%, transparent 70%);
  opacity: 0.9;
}
.section-locked__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 88px;
}
.section-locked__caption {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.section-locked__caption--muted {
  color: rgba(255, 255, 255, 0.4);
}
.section-locked__caption--accent {
  background: var(--required-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-locked__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.section-locked__badge::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--badge-color);
  opacity: 0.22;
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
.section-locked__badge--current {
  width: 72px;
  height: 72px;
  opacity: 0.92;
}
.section-locked__badge--required {
  width: 72px;
  height: 72px;
}
.section-locked__badge--required::after {
  inset: -8px;
  opacity: 0.34;
  filter: blur(20px);
}
.section-locked__badge__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.section-locked__rank-name {
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
}
.section-locked__rank-name--current {
  color: rgba(255, 255, 255, 0.7);
}
.section-locked__rank-name--required {
  background: var(--required-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.section-locked__progress {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.section-locked__headline {
  margin: 0;
  text-align: center;
  font: var(--xs-regular);
  color: #FFFFFF;
}
.section-locked__bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.section-locked__bar-fill {
  position: absolute;
  inset: 0;
  width: var(--progress-value, 0%);
  border-radius: 24px;
  background: linear-gradient(90deg, var(--current-color) 0%, var(--required-color) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--required-color) 35%, transparent);
  transition: width 0.6s ease-out;
}
.section-locked__subline {
  margin: 0;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}
.section-locked__subline-progress {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.8);
}
.section-locked__subline-target {
  background: var(--required-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  text-transform: capitalize;
}
.section-locked__description {
  margin: 4px 0 0;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  max-width: 560px;
  align-self: center;
}

@media (max-width: 768px) {
  .section-locked {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 18px;
    padding: 22px 18px;
  }
  .section-locked__slot {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .section-locked__caption {
    order: 1;
  }
  .section-locked__badge {
    order: 2;
  }
  .section-locked__badge--current {
    width: 56px;
    height: 56px;
  }
  .section-locked__badge--required {
    width: 56px;
    height: 56px;
  }
  .section-locked__rank-name {
    order: 3;
  }
  .section-locked__progress {
    padding-top: 0;
    gap: 8px;
  }
  .section-locked__headline {
    gap: 6px;
  }
  .section-locked__description {
    font-size: 12px;
    line-height: 17px;
    max-width: none;
  }
}
[data-page=live-call] .liveCall_inner_insight.liveCall_inner_insight--locked {
  background: padding-box linear-gradient(#0f0f11, #0f0f11), border-box radial-gradient(circle at top right, color-mix(in srgb, var(--required-color) 55%, transparent) 0%, color-mix(in srgb, var(--required-color) 0%, transparent) 70%), border-box radial-gradient(circle at bottom left, color-mix(in srgb, var(--current-color) 35%, transparent) 0%, color-mix(in srgb, var(--current-color) 0%, transparent) 70%);
}
[data-page=live-call] .liveCall_inner_insight.liveCall_inner_insight--locked::before {
  background-image: none;
  background: radial-gradient(78% 60% at 100% 0%, color-mix(in srgb, var(--required-color) 18%, transparent) 0%, transparent 70%), radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--current-color) 10%, transparent) 0%, transparent 70%);
  opacity: 0.9;
}

.live-call-rank-widget {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 24px;
}
.live-call-rank-widget__compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-call-rank-widget__badges {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  justify-items: center;
}
.live-call-rank-widget__captions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 12px;
  justify-items: center;
}
.live-call-rank-widget__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.live-call-rank-widget__badge::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--badge-color);
  opacity: 0.22;
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.live-call-rank-widget__badge--small {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}
.live-call-rank-widget__badge--large {
  width: 64px;
  height: 64px;
}
.live-call-rank-widget__badge--large::after {
  inset: -6px;
  opacity: 0.32;
  filter: blur(16px);
}
.live-call-rank-widget__badge__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.live-call-rank-widget__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  opacity: 0.65;
}
.live-call-rank-widget__arrow__img {
  width: 24px;
  height: 24px;
}
.live-call-rank-widget__caption {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.live-call-rank-widget__caption--muted {
  color: rgba(255, 255, 255, 0.4);
}
.live-call-rank-widget__caption--accent {
  background: var(--required-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-call-rank-widget__caption-spacer {
  width: 28px;
}
.live-call-rank-widget__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.live-call-rank-widget__line {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.85);
}
.live-call-rank-widget__line--muted {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

@media (max-width: 1024px) {
  .live-call-rank-widget__badges, .live-call-rank-widget__captions {
    column-gap: 16px;
  }
}
.coming-soon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px 4px 9px;
  border-radius: 48px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.28);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  flex-shrink: 0;
}
.coming-soon-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.coming-soon-badge span {
  font: var(--xs-medium);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.32) 40%, #fff 50%, rgba(255, 255, 255, 0.32) 60%, rgba(255, 255, 255, 0.32) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: coming-soon-shimmer 3s ease-in-out infinite;
}

@keyframes coming-soon-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.telegram-join-prompt__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  gap: 12px;
  z-index: 1;
}
.telegram-join-prompt__content .volume-gate-modal__close {
  top: 8px;
  right: 8px;
}
@media (max-width: 768px) {
  .telegram-join-prompt__content {
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }
}

.telegram-join-prompt__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.telegram-join-prompt__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 15, 17, 0.4);
}
.telegram-join-prompt__video::before {
  content: url(asset-path("icons/play.svg"));
  position: absolute;
  inset: 0;
  width: 48px;
  height: 48px;
  margin: auto;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}
.telegram-join-prompt__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.telegram-join-prompt__groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.telegram-join-prompt__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
}
.telegram-join-prompt__group:hover {
  background: rgba(255, 255, 255, 0.08);
}
.telegram-join-prompt__group .js-ranked-btns {
  cursor: pointer;
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 56px;
  border: none;
  background: var(--primary-black-background);
  transition: 0.4s var(--easeInOutQuad);
}
.telegram-join-prompt__group .js-ranked-btns:hover {
  background: var(--primary-black-background-hover);
}
.telegram-join-prompt__group .js-ranked-btns img {
  width: 16px;
  height: 16px;
}
.telegram-join-prompt__group .js-ranked-btns span {
  font: var(--small-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.telegram-join-prompt__group-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.telegram-join-prompt__group-info span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.telegram-join-prompt__badge {
  height: 20px;
  width: auto;
}

.telegram-join-prompt__dont-show {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  padding: 4px;
  margin-top: 4px;
  transition: color 0.2s;
}
.telegram-join-prompt__dont-show:hover {
  color: rgba(255, 255, 255, 0.5);
}

.welcome-video-prompt__modal {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  width: 100%;
  max-width: 854px;
}
@media (max-width: 768px) {
  .welcome-video-prompt__modal {
    width: 100vw;
    max-width: none;
    border-radius: 16px 16px 0 0;
  }
}

.welcome-video-prompt__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  gap: 12px;
  z-index: 1;
}
.welcome-video-prompt__content .welcome-video-prompt__close {
  top: 8px;
  right: 8px;
}
@media (max-width: 768px) {
  .welcome-video-prompt__content {
    padding: 16px 16px 40px;
  }
}

.welcome-video-prompt__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-video-prompt__close img {
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.welcome-video-prompt__close:hover img {
  opacity: 0.8;
}

.welcome-video-prompt__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4em;
  letter-spacing: -0.05em;
  text-align: center;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.welcome-video-prompt__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.2) 100%);
  opacity: 0.2;
}

.welcome-video-prompt__text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.welcome-video-prompt__text {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4285714286em;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 352px;
}

.welcome-video-prompt__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 15, 17, 0.4);
}
.welcome-video-prompt__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-page=blueprint] main {
  padding: 40px 20px;
  margin-top: -20px;
  color: #e4e4e7;
}

[data-page=blueprint] section.container {
  width: 100%;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--container-grid-gap-x);
}

[data-page=blueprint] section.container .inner--out-padding {
  width: calc(100% + var(--container-grid-gap-x) * 2);
  margin-left: calc(var(--container-grid-gap-x) * -1);
}

[data-page=blueprint] section.container .inner--in-padding {
  padding: 0 56px;
}

[data-page=blueprint] section.container .inner-4 {
  grid-column: 5/9;
}

[data-page=blueprint] section.container .inner-6 {
  grid-column: 4/10;
}

[data-page=blueprint] section.container .inner-8 {
  grid-column: 3/11;
}

[data-page=blueprint] section.container .inner-10 {
  grid-column: 1/11;
}

[data-page=blueprint] .course-video {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(15, 15, 17, 0.4);
  margin-bottom: 48px;
}

[data-page=blueprint] .course-video video {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

[data-page=blueprint] .course-info {
  margin-bottom: 80px;
}

[data-page=blueprint] .course-info__overview {
  margin-bottom: 40px;
}

[data-page=blueprint] .course-info__overview__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-page=blueprint] .course-info__overview__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  margin-bottom: 8px;
}

[data-page=blueprint] .course-info__overview__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=blueprint] .course-info__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 16px;
}

[data-page=blueprint] .course-info__stats_stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=blueprint] .course-info__stats_stat img {
  width: 16px;
  height: 16px;
}

[data-page=blueprint] .course-info__stats_stat p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint] .course-info__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  white-space: pre-wrap;
}

[data-page=blueprint] .course-progress-container {
  width: 100%;
  height: 110px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  [data-page=blueprint] .course-progress-container {
    margin-bottom: 60px;
  }
}

[data-page=blueprint] .course-progress {
  padding: 24px;
  margin-bottom: 60px;
}

[data-page=blueprint] .course-progress__top {
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=blueprint] .course-progress__top__title {
  font: var(--base-medium);
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

[data-page=blueprint] .course-progress__top__total-watched {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=blueprint] .course-progress__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint] .course-progress__bottom__time-watched {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=blueprint] .course-progress__bottom__time-watched img {
  width: 16px;
  height: 16px;
}

[data-page=blueprint] .course-progress__bottom__time-watched p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=blueprint] .course-progress__bottom__progress-bar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.0784313725);
  position: relative;
  border-radius: 999px;
}

[data-page=blueprint] .course-progress__bottom__progress-bar::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  transform: scaleX(var(--progress, 0));
  will-change: transform;
  transform-origin: left;
  transition: transform 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-progress__bottom__percentage {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8);
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

[data-page=blueprint] .course-modules__title {
  font: var(--2x-medium);
  text-align: center;
  margin-bottom: 60px;
}

[data-page=blueprint] .course-modules__modules {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

[data-page=blueprint] .course-modules__modules__module {
  --state-icon-info-gap: 16px;
  --wrapper-state-icon-size: 24px;
  --check-background: #ffffff1f;
  --check-border-color: #ffffff;
  --check-color: transparent;
  --padding-top: 24px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}

[data-page=blueprint] .course-modules__modules__module__info .icon-lock,
[data-page=blueprint] .course-modules__modules__module__info .icon-check {
  display: none;
}

[data-page=blueprint] .course-modules__modules__module__info {
  position: relative;
  width: calc(50% - 8px);
  padding-top: var(--padding-top);
  display: flex;
  gap: var(--state-icon-info-gap);
}

[data-page=blueprint] .course-modules__modules__module__info__check {
  transform: translateY(-0.1em);
  width: var(--wrapper-state-icon-size);
  height: var(--wrapper-state-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint] .course-modules__modules__module__info__check__inner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint] .course-modules__modules__module__info__check__inner > div {
  width: 12px;
  height: 12px;
}

[data-page=blueprint] .course-modules__modules__module__info__check svg path {
  stroke: var(--check-color);
  stroke-opacity: 1;
}

[data-page=blueprint] .course-modules__modules__module__info__content {
  flex: 1;
}

[data-page=blueprint] .course-modules__modules__module__info__content__label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint] .course-modules__modules__module__info__content__label {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=blueprint] .course-modules__modules__module__info__content__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  --text-color: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.54) 100%
  );
  margin-bottom: 16px;
}

[data-page=blueprint] .course-modules__modules__module__info__content__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.4);
  white-space: pre-wrap;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__container {
  width: calc(50% - 8px);
  height: max-content;
}

[data-page=blueprint] .course-modules__modules__module__content {
  --padding-horizontal: 24px;
  padding: 16px 0;
}

[data-page=blueprint] .course-modules__modules__module__content__stats {
  padding: 0 var(--padding-horizontal);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

[data-page=blueprint] .course-modules__modules__module__content__stats__videos-watched p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint] .course-modules__modules__module__content__stats__time-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=blueprint] .course-modules__modules__module__content__stats__time-left p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=blueprint] .course-modules__modules__module__content__stats__time-left img {
  width: 12px;
  height: 12px;
}

[data-page=blueprint] .course-modules__modules__module__content__progress {
  padding: 0 var(--padding-horizontal);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

[data-page=blueprint] .course-modules__modules__module__content__progress__bar {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.0784313725);
  border-radius: 999px;
}

[data-page=blueprint] .course-modules__modules__module__content__progress__bar::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  transform: scaleX(var(--progress, 0));
  will-change: transform;
  transform-origin: left;
  transition: transform 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__content__progress__percentage {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.8);
}

[data-page=blueprint] .course-modules__modules__module__content__show-button {
  --text-color: #ffffff80;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin: 12px auto 0;
}

[data-page=blueprint] .course-modules__modules__module__content__show-button span {
  font: var(--sm-medium);
  color: var(--text-color);
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__content__show-button div {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint] .course-modules__modules__module__content__show-button svg {
  transition: transform 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__content__show-button svg path {
  stroke: var(--text-color);
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__content__show-button:hover {
  --text-color: #ffffffcc;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons {
  --margin-top-transition: 0s 1s var(--easeOutQuart);
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s var(--easeOutQuart), margin-top var(--margin-top-transition);
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson {
  --text-color: rgba(255, 255, 255, 0.36);
  width: 100%;
  padding: 14px var(--padding-horizontal);
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson .icon-check,
[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson .icon-lock,
[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson .icon-play-circle {
  display: none;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__left div {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__left svg path {
  stroke-opacity: 1;
  stroke: var(--text-color);
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__left svg path[fill] {
  fill: var(--text-color);
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__left h6 {
  font: var(--sm-medium);
  color: var(--text-color);
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__right p {
  font: var(--xs-medium);
  color: var(--text-color);
  min-width: 30px;
  text-align: right;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__right button {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 4px 8px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson:hover {
  background: rgba(255, 255, 255, 0.0392156863);
  --text-color: #ffffffe5;
}

[data-page=blueprint] .course-modules__modules__module[data-show] .course-modules__modules__module__content__lessons {
  --margin-top-transition: 1s 0s var(--easeOutQuart);
  margin-top: 8px;
}

[data-page=blueprint] .course-modules__modules__module[data-show=true] .course-modules__modules__module__content__show-button svg {
  transform: rotate(180deg);
}

[data-page=blueprint] .course-modules__modules__module__content__notification {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4509803922);
  text-align: center;
  padding: 0 24px;
}
@media (min-width: 768px) {
  [data-page=blueprint] .course-modules__modules__module__content__notification {
    margin-top: 8px;
  }
}

[data-page=blueprint] .course-modules__modules__module__content__cta {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  display: block;
  margin: 0 auto 12px;
  background: var(--primary-black-background);
  will-change: background;
  transition: background 0.5s var(--easeInOutQuart);
}

[data-page=blueprint] .course-modules__modules__module__content__cta span {
  position: relative;
  z-index: 1;
  font: var(--sm-medium);
  width: max-content;
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=blueprint] .course-modules__modules__module__content__cta:hover {
  background: var(--primary-black-background-hover);
}

[data-page=blueprint] .course-modules__modules__module__content__time-take {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.3019607843);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

[data-page=blueprint] .course-modules__modules__module__content__time-take svg path {
  stroke: rgba(255, 255, 255, 0.3019607843);
}

[data-page=blueprint] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content {
  padding: 32px 0;
}

[data-page=blueprint] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content__notification {
  margin-bottom: 0;
}

[data-page=blueprint] .course-modules__modules__module:not(:last-child)::before {
  --background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 100%
  );
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--wrapper-state-icon-size) / 2);
  width: 1px;
  height: calc(100% - var(--state-icon-info-gap) - var(--wrapper-state-icon-size) - var(--padding-top));
  background: var(--background);
  border-radius: 999px;
  transition: height 0.5s var(--easeOutQuart);
}

[data-page=blueprint] .course-modules__modules__module:not([data-completed=true]) .course-modules__modules__module__info__check .icon-lock {
  display: flex;
}

[data-page=blueprint] .course-modules__modules__module[data-completed=true] .course-modules__modules__module__info__check .icon-check {
  display: flex;
}

[data-page=blueprint] .course-modules__modules__module:not([data-completed=true])::before {
  --background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 100%
  );
}

[data-page=blueprint] .course-modules__modules__module[data-completed=true] .course-modules__modules__module__info {
  --check-background: #ffffff;
  --check-color: #000000;
  --check-border-color: #ffffff;
}

[data-page=blueprint] .course-modules__modules__module[data-completed=true] .course-modules__modules__module__info__content__title {
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

[data-page=blueprint] .course-modules__modules__module[data-lock=true] .course-modules__modules__module__info__check svg path {
  stroke: rgba(255, 255, 255, 0.2392156863);
}

[data-page=blueprint] .course-modules__modules__module:not([data-lock=true]) .course-modules__modules__module__info__check__inner {
  background: var(--check-background);
  border: 1px solid var(--check-border-color);
}

[data-page=blueprint] .course-modules__modules__module[data-lock=true]::before {
  --background: #ffffff33;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson[data-state=lock] .icon-lock {
  display: flex;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson[data-state=completed] .icon-check {
  display: flex;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson[data-state=not-completed] {
  background: rgba(255, 255, 255, 0.04);
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson[data-state=not-completed] .icon-play-circle {
  display: flex;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content {
  padding-bottom: 0;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content__notification {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content__cta {
  --unhovered-background: #ffffff33;
  --text-color: #ffffff;
  margin-bottom: 24px;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content__cta:hover {
  --text-color: #0f0f11;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content__results {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, rgba(167, 243, 208, 0) 0%, #a7f3d0 50.39%, rgba(167, 243, 208, 0) 100%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(167, 243, 208, 0.12) 0%, rgba(167, 243, 208, 0) 100%);
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content__results span:nth-child(1) {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  color: #a7f3d0;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=exam] .course-modules__modules__module__content__results span:nth-child(2) {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content__certificate {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content__certificate img {
  width: 24px;
  height: 24px;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content__certificate span {
  font: var(--sm-medium);
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] button {
  --text-color: #ffffff;
  --unhovered-opacity: 1;
  --hovered-opacity: 0;
  --unhovered-background: #ffffff33;
  --hovered-background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    #ffffff;
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  display: block;
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] button span {
  position: relative;
  z-index: 1;
  font: var(--sm-medium);
  color: var(--text-color);
  width: max-content;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] button::after,
[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--unhovered-background);
  border-radius: inherit;
  opacity: var(--unhovered-opacity);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] button::after {
  background: var(--hovered-background);
  opacity: var(--hovered-opacity);
}

[data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] button:hover {
  --text-color: #0f0f11;
  --unhovered-opacity: 0;
  --hovered-opacity: 1;
}

[data-page=blueprint] .course-modules__modules__module__content__progress {
  margin-bottom: 15px;
}

[data-page=blueprint] .course-modules__modules__module__content__lessons__lesson__left__icons {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
}

@media (max-width: 768px) {
  [data-page=blueprint] main[data-state=completed] .course-modules__modules__module[data-module=certificate] .course-modules__modules__module__content {
    flex-direction: column;
    gap: 16px;
  }
}
@media (max-width: 768px) {
  [data-page=blueprint] section.container {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
  [data-page=blueprint] section.container .inner {
    grid-column: span 4;
  }
  [data-page=blueprint] section.container .inner--in-padding {
    padding: 0;
  }
  [data-page=blueprint] .course-modules__modules__module__content {
    --padding-horizontal: 16px;
    padding: 14px 0;
  }
  [data-page=blueprint] .course-video {
    border-radius: 12px;
    margin-bottom: 24px;
  }
  [data-page=blueprint] .course-info {
    margin-bottom: 48px;
    padding: 0 16px;
  }
  [data-page=blueprint] .course-info__overview {
    margin-bottom: 24px;
  }
  [data-page=blueprint] .course-info__stats {
    gap: 8px 16px;
  }
  [data-page=blueprint] .course-modules__title {
    font: var(--xl-medium);
    margin-bottom: 32px;
  }
  [data-page=blueprint] .course-modules__modules {
    gap: 24px;
  }
  [data-page=blueprint] .course-modules__modules__module {
    flex-direction: column;
    padding-bottom: 24px;
  }
  [data-page=blueprint] .course-modules__modules__module__info {
    width: 100%;
    padding-top: 0;
    margin-bottom: 24px;
  }
  [data-page=blueprint] .course-modules__modules__module__info__content__label {
    margin-bottom: 4px;
  }
  [data-page=blueprint] .course-modules__modules__module__info__content__title {
    font: var(--xl-medium);
  }
  [data-page=blueprint] .course-modules__modules__module__info__content__description {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.4);
    max-height: unset !important;
    overflow: hidden;
    transition: max-height 1s var(--easeOutQuart);
    margin-bottom: 24px;
  }
  [data-page=blueprint] .course-modules__modules__module__container {
    --margin-left: calc(var(--state-icon-info-gap) + var(--wrapper-state-icon-size));
    width: calc(100% - var(--margin-left));
    margin-left: var(--margin-left);
  }
}
.course-modules__modules__module__content__lessons__lesson__left .icon-play-circle svg {
  stroke: white !important;
  fill: white !important;
  border: 1px solid white !important;
  border-radius: 50%;
}

.course-modules__modules__module__content__lessons__lesson__left .icon-play-circle svg path[fill] {
  fill: white !important;
  stroke: white !important;
}

.course-modules__modules__module__content__lessons__lesson[data-state=not-completed] {
  background: rgba(255, 255, 255, 0.0392156863);
  --text-color: #ffffffe5;
}

.course-modules__modules__module__content__lessons__lesson[data-state=completed] {
  --text-color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint-in-module] main {
  padding: 40px 0;
  margin-top: -20px;
  color: #e4e4e7;
}

[data-page=blueprint-in-module] .BIM__back {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

[data-page=blueprint-in-module] .BIM__back p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition-duration: 0.4s;
}

[data-page=blueprint-in-module] .BIM__back p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition-duration: 0.4s;
}

[data-page=blueprint-in-module] .BIM__back svg path {
  transition-duration: 0.4s;
}

[data-page=blueprint-in-module] .BIM__back:hover svg path {
  stroke-opacity: 0.8;
}

[data-page=blueprint-in-module] .BIM__back:hover p {
  color: rgba(255, 255, 255, 0.8);
}

[data-page=blueprint-in-module] .container__inner {
  width: 100%;
}

[data-page=blueprint-in-module] .container__inner__content {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  gap: 16px;
}

[data-page=blueprint-in-module] .container__inner__content .container__inner__content__left {
  grid-column: span 8;
}

[data-page=blueprint-in-module] .container__inner__content .container__inner__content__right {
  grid-column: span 4;
}

[data-page=blueprint-in-module] .course-video {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(15, 15, 17, 0.4);
  margin-bottom: 40px;
}

[data-page=blueprint-in-module] .course-video video {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

[data-page=blueprint-in-module] .course-info {
  padding: 0 40px;
}

[data-page=blueprint-in-module] .course-info__overview {
  margin-bottom: 24px;
}

[data-page=blueprint-in-module] .course-info__overview__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  margin-bottom: 8px;
}

[data-page=blueprint-in-module] .course-info__overview__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  white-space: pre-line;
}

[data-page=blueprint-in-module] .course-info__stats {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 16px;
}

[data-page=blueprint-in-module] .course-info__stats_stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=blueprint-in-module] .course-info__stats_stat img {
  width: 16px;
  height: 16px;
}

[data-page=blueprint-in-module] .course-info__stats_stat p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint-in-module] .course-info__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  white-space: pre-wrap;
}

[data-page=blueprint-in-module] .course-progress-container {
  margin-bottom: 16px;
}

[data-page=blueprint-in-module] .course-progress {
  padding: 16px 24px;
}

[data-page=blueprint-in-module] .course-progress__top {
  margin-bottom: 4px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=blueprint-in-module] .course-progress__top__title {
  font: var(--base-medium);
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

[data-page=blueprint-in-module] .course-progress__top__total-watched {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=blueprint-in-module] .course-progress__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-in-module] .course-progress__bottom__time-watched {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

[data-page=blueprint-in-module] .course-progress__bottom__time-watched img {
  width: 16px;
  height: 16px;
}

[data-page=blueprint-in-module] .course-progress__bottom__time-watched p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=blueprint-in-module] .course-progress__bottom__progress-bar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.0784313725);
  position: relative;
  border-radius: 999px;
}

[data-page=blueprint-in-module] .course-progress__bottom__progress-bar::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  transform: scaleX(var(--progress, 0));
  will-change: transform;
  transform-origin: left;
  transition: transform 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-progress__bottom__percentage {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8);
  --text-color: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

[data-page=blueprint-in-module] .container__inner__content__right__content {
  overflow: hidden;
}

[data-page=blueprint-in-module] .container__inner__content__right__content img {
  width: 100%;
  height: 100%;
}

[data-page=blueprint-in-module] .container__inner__content__right__content .lesson-img-wrapper img {
  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
}

[data-page=blueprint-in-module] .container__inner__content__right__content .js-lesson-img {
  overflow: hidden;
  transition: max-height 1s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header--with-thumbnail {
  position: relative;
  overflow: hidden;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header--with-thumbnail::before {
  content: "";
  position: absolute;
  right: 0;
  width: 118px;
  height: 126px;
  pointer-events: none;
  opacity: 0.08;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header--with-thumbnail[data-branding=bitget]::before {
  top: 50%;
  transform: translate(-90%, -50%);
  background: url(/assets/logos/clipped_bitget-thumbnail-144cb53e411a624159055f4ee961c5299b95e0cf2fe77529aed5adb35ab99897.png) center/contain no-repeat;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header--with-thumbnail[data-branding=blockpit]::before {
  top: 95%;
  transform: translate(-90%, -50%);
  background: url(/assets/logos/clipped_blockpit-thumbnail-1aa910d197e2fb2a224dcb853a72f74dd42489c50b94ecf4e1f09afbf365efc4.png) center/contain no-repeat;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left__remaining-duration {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left--flex {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left--flex .container__inner__content__right__content__header__left__logo {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left--flex .container__inner__content__right__content__header__left__logo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left__remaining-duration p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 133.333%;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left__remaining-duration img {
  width: 12px;
  height: 12px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__left__title {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__right {
  --text-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  width: max-content;
  gap: 4px;
  cursor: pointer;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__right div {
  width: 16px;
  height: 16px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__right p {
  width: max-content;
  color: var(--text-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__right path {
  stroke: var(--text-color);
  stroke-opacity: 1;
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__right:hover {
  --text-color: rgba(255, 255, 255, 0.8);
}

[data-page=blueprint-in-module] .course-progress__bottom__progress-bar-lesson {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.0784313725);
  position: relative;
  border-radius: 999px;
}

[data-page=blueprint-in-module] .course-progress__bottom__progress-bar-lesson::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  transform: scaleX(var(--progress, 0));
  will-change: transform;
  transform-origin: left;
  transition: transform 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-progress__bottom-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 16px;
}

[data-page=blueprint-in-module] .course-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}

[data-page=blueprint-in-module] .course-arrows__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 56px;
  background: var(--primary-black-background);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition-duration: 0.4s;
  will-change: background, color;
  transition: background 0.5s var(--easeOutQuart), color 0.5s var(--easeOutQuart);
}
[data-page=blueprint-in-module] .course-arrows__btn.course-arrows__btn--disabled {
  opacity: 0.5;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
}
[data-page=blueprint-in-module] .course-arrows__btn.course-arrows__btn--disabled:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 356px) {
  [data-page=blueprint-in-module] .course-arrows__btn {
    height: 45px;
    justify-content: center;
    text-align: center;
  }
}
[data-page=blueprint-in-module] .course-arrows__btn:hover {
  background: var(--primary-black-background-hover);
}

[data-page=blueprint-in-module] .course-arrows__btn:hover svg path {
  stroke-opacity: 0.8;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons {
  --margin-top-transition: 1s 0s var(--easeOutQuart);
  max-height: 0;
  transition: max-height 1s var(--easeOutQuart), margin-top var(--margin-top-transition);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson {
  --text-color: rgba(255, 255, 255, 0.36);
  width: 100%;
  padding: 14px 24px;
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson .icon-check,
[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson .icon-lock,
[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson .icon-play-circle {
  display: none;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__left div {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__left svg path {
  stroke-opacity: 1;
  stroke: var(--text-color);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__left svg path[fill] {
  fill: var(--text-color);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__left h6 {
  font: var(--sm-medium);
  color: var(--text-color);
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__header__right .icon {
  will-change: transform;
  transition: transform 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__right p {
  font: var(--xs-medium);
  color: var(--text-color);
  min-width: 30px;
  text-align: right;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson__right button {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 4px 8px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson:hover,
.course-modules__modules__module__content__lessons__lesson[data-state=not-completed] {
  background: rgba(255, 255, 255, 0.0392156863);
  --text-color: #ffffffe5;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson[data-state=completed] {
  --text-color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson[data-state=lock] .icon-lock {
  display: flex;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson[data-state=completed] .icon-check {
  display: flex;
}

[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons__lesson[data-state=not-completed] .icon-play-circle {
  display: flex;
}

[data-page=blueprint-in-module] .container__inner__content__right__content[data-show=true] .course-modules__modules__module__content__lessons {
  --margin-top-transition: 1s 0s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .container__inner__content__right__content[data-show=true] .container__inner__content__right__content__header__right .icon {
  transform: rotate(180deg);
}

[data-page=blueprint-in-module] .lock_modal_header {
  position: relative;
  width: 100%;
}

[data-page=blueprint-in-module] .lock_modal_header_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint-in-module] .lock_modal_header_close {
  position: absolute;
  top: 0;
  right: 0;
}

[data-page=blueprint-in-module] .lock_modal_header_close svg path {
  transition: stroke-opacity 0.5s var(--easeOutQuart), stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .lock_modal_header_close:hover svg path {
  stroke-opacity: 1;
  stroke: #fff;
}

[data-page=blueprint-in-module] .lock_modal_header_main_heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px; /* 140% */
  letter-spacing: -1px;
  margin-top: 12px;
}

[data-page=blueprint-in-module] .lock_modal_desc {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 304px;
  margin: 0 auto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  margin-top: 12px;
  margin-bottom: 32px;
}

[data-page=blueprint-in-module] .lock_modal_bottom {
  display: flex;
  padding-top: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  border-top: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.8) 50.39%, rgba(255, 255, 255, 0.096) 100%);
  background: radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=blueprint-in-module] .lock_modal_bottom_txt {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

[data-page=blueprint-in-module] .lock_modal_btn_count {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=blueprint-in-module] .container__inner__content__right__content__thumbnail {
  position: relative;
}

[data-page=blueprint-in-module] .close_modal {
  display: none;
}

[data-page=blueprint-in-module] .course-info__link-to-resources {
  margin-top: 24px;
  overflow: hidden;
  transition: max-height 0.3s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
  cursor: pointer;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown p span {
  width: max-content;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown .course-info__link-to-resources__dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  will-change: transform;
  transition: transform 0.3s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown svg,
[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown svg path {
  transition: stroke 0.3s var(--easeOutQuart), stroke-opacity 0.3s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown:hover p {
  color: #fff;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown:hover svg,
[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown:hover svg path {
  stroke: #fff;
  stroke-opacity: 1;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__items__item * {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .course-info__link-to-resources__items__item a {
  text-decoration: underline;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__items__item a:hover {
  color: #fff;
}

[data-page=blueprint-in-module] .course-info__link-to-resources__dropdown.active .course-info__link-to-resources__dropdown__icon {
  transform: rotate(180deg);
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact {
  --border-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.024),rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.024));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-top: 1px solid;
  border-image-slice: 1;
  border-image-source: var(--border-gradient);
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__left,
[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__right .black_button {
  display: flex;
  align-items: center;
  gap: 4px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__left {
  gap: 8px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__left__name {
  font: var(--base-medium);
  color: #E4E4E7;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__left__logo,
[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__right__logo {
  display: block;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__right .black_button {
  border-radius: 999px;
  padding: 6px 12px;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__right .black_button svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-page=blueprint-in-module] .container__inner__content__right__content__bottom__contact__right__text {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

@media (min-width: 1025px) {
  [data-page=blueprint-in-module] .container__inner__content__right__content-wrapper {
    --border-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.024),rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.024));
    padding: 1px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--border-gradient);
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content-wrapper__inner {
    --background-gradient: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 15px;
    width: 100%;
    background-color: #0f0f11;
    position: relative;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content-wrapper__inner::before {
    content: "";
    border-radius: 15px;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--background-gradient);
    max-height: 256px;
  }
  #tutorials[data-page=blueprint-in-module] .container__inner__content__right__content-wrapper__inner::before {
    max-height: initial;
  }
  [data-page=blueprint-in-module] .course-modules__modules__module__content__lessons {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}
@media (max-width: 1024px) {
  body:has(section[data-page=blueprint-in-module]) {
    padding-bottom: 120px;
  }
  body:has(section[data-page=blueprint-in-module][data-tutorials=true]) {
    padding-bottom: 150px;
  }
  [data-page=blueprint-in-module] .popover__content {
    bottom: 15px;
    padding-bottom: 10px !important;
  }
  [data-page=blueprint-in-module] .popover__content {
    bottom: 15px;
    padding-bottom: 10px !important;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content .js-lesson-img {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.5s var(--easeOutQuart);
  }
  [data-page=blueprint-in-module] .close_modal {
    position: absolute;
    display: block;
    top: 15px;
    right: 15px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition-duration: 0.4s;
    cursor: pointer;
  }
  [data-page=blueprint-in-module] .close_modal svg {
    width: 20px;
    height: 20px;
  }
  [data-page=blueprint-in-module] .container__inner__content {
    width: 100%;
    margin-top: 20px;
    grid-template-columns: repeat(4, 1fr);
  }
  [data-page=blueprint-in-module] .container__inner {
    padding: 0 20px;
  }
  [data-page=blueprint-in-module] .course-info {
    padding: 0 16px;
  }
  [data-page=blueprint-in-module] .course-progress-container {
    display: none;
  }
  [data-page=blueprint-in-module] .container__inner__content .container__inner__content__right {
    margin-left: -20px;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    border-radius: 0 !important;
    padding: 0;
    z-index: 1;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content__bottom {
    --border-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.024),rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.024));
    padding: 1px;
    padding-bottom: 0;
    background: var(--border-gradient);
    border-radius: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transition: border-radius 1s var(--easeOutQuart), padding 1s var(--easeOutQuart);
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content__bottom__inner {
    --background-gradient: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    background-color: #0f0f11;
    position: relative;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: border-radius 1s var(--easeOutQuart);
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content__bottom__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: var(--background-gradient);
    transition: border-radius 1s var(--easeOutQuart);
    pointer-events: none;
  }
  [data-page=blueprint-in-module][data-tutorials=false] .container__inner__content__right__content[data-show=true] .container__inner__content__right__content__bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
  }
  [data-page=blueprint-in-module][data-tutorials=false] .container__inner__content__right__content[data-show=true] .container__inner__content__right__content__bottom__inner {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  [data-page=blueprint-in-module][data-tutorials=false] .container__inner__content__right__content[data-show=true] .container__inner__content__right__content__bottom__inner::before {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content__thumbnail {
    background: #0f0f11;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content img,
  [data-page=blueprint-in-module] .container__inner__content__right__content__header,
  [data-page=blueprint-in-module] .course-modules__modules__module__content__lessons,
  [data-page=blueprint-in-module] .course-progress__bottom-lesson {
    position: relative;
    z-index: 1;
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content__header__right .icon {
    transform: scaleY(-1);
  }
  [data-page=blueprint-in-module] .container__inner__content__right__content[data-show=true] .container__inner__content__right__content__header__right .icon {
    transform: scaleY(-1) rotate(180deg);
  }
  [data-page=blueprint-in-module] .course-video {
    border-radius: 12px;
    margin-bottom: 24px;
  }
  [data-page=blueprint-in-module] .container__inner__content .container__inner__content__left {
    grid-column: span 4;
  }
  [data-page=blueprint-in-module] .container__inner__content .container__inner__content__right {
    grid-column: span 4;
  }
  [data-page=blueprint-in-module] section.container .inner--in-padding {
    padding: 0;
  }
}
[data-page=blueprint-in-module] .course-modules__modules__module__content__lessons {
  --border-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.024),rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.024));
  border-top: 1px solid;
  border-image-slice: 1;
  border-image-source: var(--border-gradient);
}

[data-page=blueprint-in-module] .container__inner__content__right .blockpit-link {
  display: flex;
  padding: 16px 16px 16px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
}

[data-page=blueprint-in-module] .container__inner__content__right .blockpit-link > span {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=blueprint-in-module] .container__inner__content__right .blockpit-link .btn-blockpit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 12px;
  border-radius: 56px;
  background: var(--primary-black-background);
  transition: background 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .container__inner__content__right .blockpit-link .btn-blockpit:hover {
  background: var(--primary-black-background-hover);
}

[data-page=blueprint-in-module] .container__inner__content__right .blockpit-link .btn-blockpit > span {
  font: var(--small-medium);
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.5s var(--easeOutQuart);
}

[data-page=blueprint-in-module] .container__inner__content__right .blockpit-link .btn-blockpit:hover > span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=tutorials-index] {
  padding: 40px 0;
  min-height: 100vh;
}

[data-page=tutorials-index] .tutorials-index {
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
}

[data-page=tutorials-index] .tutorials-index__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

[data-page=tutorials-index] .tutorials-index__header__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

[data-page=tutorials-index] .tutorials-index__header__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  max-width: 800px;
  line-height: 1.5;
}

[data-page=tutorials-index] .tutorials-index__header__title h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=tutorials-index] .tutorials-index__header__filters {
  display: flex;
  align-items: center;
  gap: 4px;
}

[data-page=tutorials-index] .tutorials-filter {
  padding: 6px 12px;
  border-radius: 56px;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.08);
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--easeOutQuart);
  opacity: 0.5;
}

[data-page=tutorials-index] .tutorials-filter--active {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.1);
}

[data-page=tutorials-index] .tutorials-filter:disabled {
  cursor: not-allowed;
}

[data-page=tutorials-index] .tutorials-filter:not(:disabled):hover {
  opacity: 0.8;
}

[data-page=tutorials-index] .tutorials-index__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 56px;
}

[data-page=tutorials-index] .tutorials-index__empty {
  width: 100%;
  padding: 80px 20px;
  text-align: center;
}

[data-page=tutorials-index] .tutorials-index__empty p {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=tutorials-index] .tutorial-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
}

[data-page=tutorials-index] .tutorial-card__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 590/320;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 15, 17, 0.4);
  cursor: pointer;
}

[data-page=tutorials-index] .tutorial-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

[data-page=tutorials-index] .tutorial-card__thumbnail__placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}

[data-page=tutorials-index] .tutorial-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px;
}

[data-page=tutorials-index] .tutorial-card__content__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

[data-page=tutorials-index] .tutorial-card__content__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

[data-page=tutorials-index] .tutorial-card__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-page=tutorials-index] .tutorial-card__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.033em;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=tutorials-index] .tutorial-card__subtitle {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=tutorials-index] .tutorial-card__watched-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 48px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
}

[data-page=tutorials-index] .tutorial-card__watched-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

[data-page=tutorials-index] .tutorial-card__watched-badge span {
  font: var(--xs-medium);
  color: #A7F3D0;
}

[data-page=tutorials-index] .tutorial-card__content__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=tutorials-index] .tutorial-card__stats {
  display: flex;
  align-items: center;
  gap: 32px;
}

[data-page=tutorials-index] .tutorial-card__stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=tutorials-index] .tutorial-card__stat img {
  width: 16px;
  height: 16px;
}

[data-page=tutorials-index] .tutorial-card__stat span {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=tutorials-index] .tutorial-card__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  [data-page=tutorials-index] .tutorials-index__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  [data-page=tutorials-index] .tutorial-card__title {
    font-size: 24px;
  }
  [data-page=tutorials-index] .tutorials-index__header__top {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  [data-page=tutorials-index] .tutorial-card__content {
    padding: 0 16px;
  }
  [data-page=tutorials-index] .tutorial-card__title {
    font-size: 20px;
  }
  [data-page=tutorials-index] .tutorial-card__stats {
    gap: 16px;
  }
}
[data-page=certificate-checkout] main {
  padding: 40px 20px;
  margin-top: -20px;
  color: #e4e4e7;
}

[data-page=certificate-checkout] .flash-message {
  margin-bottom: 16px;
  width: 100%;
}

[data-page=certificate-checkout] form.container,
[data-page=certificate-checkout] section.container {
  width: 100%;
  max-width: 921px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 16px;
}

[data-page=certificate-checkout] .certificate-checkout__header {
  --text-color: #ffffff66;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: max-content;
  margin-bottom: 24px;
}

[data-page=certificate-checkout] .certificate-checkout__header span {
  font: var(--sm-medium);
  color: var(--text-color);
  transition: color 0.5s var(--easeOutQuart);
  width: max-content;
}

[data-page=certificate-checkout] .certificate-checkout__header .icon-arrow-left {
  width: 16px;
  height: 16px;
}

[data-page=certificate-checkout] .certificate-checkout__header svg path {
  stroke: var(--text-color);
  stroke-opacity: 1;
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=certificate-checkout] .certificate-checkout__header:hover {
  --text-color: #ffffff;
}

[data-page=certificate-checkout] .certificate-checkout__content__left,
[data-page=certificate-checkout] .certificate-checkout__content__right {
  flex: 1;
  width: calc(50% - 8px);
}

[data-page=certificate-checkout] .certificate-checkout__content__left {
  height: max-content;
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info__name,
[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info__price {
  font: var(--base-medium);
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info__description {
  font: var(--xs-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__certificate {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__certificate img {
  width: 24px;
  height: 24px;
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__certificate span {
  font: var(--sm-regular);
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__divider {
  width: 100%;
  height: 1px;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__total {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__total p {
  font: var(--sm-medium);
  --text-color: rgba(255, 255, 255, 0.4);
}

[data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__total p:last-child {
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group--row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group--multiple {
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group label {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group:has(button[type=submit]) {
  margin-top: 16px;
}

[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group__input-wrapper,
[data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group__select-wrapper {
  width: 100%;
  border-radius: 999px;
  --background: linear-gradient(0deg, #0f0f11, #0f0f11);
  --border-color: #ffffff0f;
  border: 1px solid var(--border-color);
}

[data-page=certificate-checkout] #certificate-checkout-form input:not([type=checkbox]) {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
}

[data-page=certificate-checkout] #certificate-checkout-form input:not([type=checkbox]),
[data-page=certificate-checkout] #certificate-checkout-form input:not([type=checkbox])::placeholder {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=certificate-checkout] #certificate-checkout-form select {
  appearance: none;
  background: transparent;
  border: none;
  width: 100%;
  padding: 12px 16px;
  cursor: pointer;
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  position: relative;
}

[data-page=certificate-checkout] #certificate-checkout-form select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url(/assets/icons/ic_chevron-down-4e756ee4d1e2f77116afdb1e7cc5604d0fd8ba575c93de0bb4f93ae98cd9169c.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

[data-page=certificate-checkout] #certificate-checkout-form option {
  background: transparent;
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  background: #0f0f11;
  border-radius: 16px;
  border: none;
  padding: 8px;
}

[data-page=certificate-checkout] #certificate-checkout-form div:has(select) {
  position: relative;
}

[data-page=certificate-checkout] #certificate-checkout-form div:has(select) img {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

[data-page=certificate-checkout] #certificate-checkout-form input[type=checkbox] {
  cursor: pointer;
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(0deg, #0f0f11, #0f0f11), linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
  transition: border-color 0.5s var(--easeOutQuart);
}

[data-page=certificate-checkout] #certificate-checkout-form input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 0.5px), -50%);
  width: 12px;
  height: 12px;
  background-image: url(/assets/icons/ic_check-in-checkbox-282c78f507b829cac7c885dc82275347183b0a042c288d73d00cb59f882fb5d3.svg);
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3s var(--easeOutQuart);
}

[data-page=certificate-checkout] #certificate-checkout-form input[type=checkbox]:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

[data-page=certificate-checkout] #certificate-checkout-form input[type=checkbox]:checked::before {
  opacity: 1;
}

[data-page=certificate-checkout] #certificate-checkout-form button[type=submit] {
  width: 100%;
  background: #e4e4e7;
  padding: 10px 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.5s var(--easeOutQuart);
}

[data-page=certificate-checkout] #certificate-checkout-form button[type=submit]:hover {
  background-color: #ffffff;
}

[data-page=certificate-checkout] #certificate-checkout-form button[type=submit][data-for-device=mobile] {
  display: none;
}

[data-page=certificate-checkout] #certificate-checkout-form button[type=submit] span {
  font: var(--sm-medium);
}

[data-page=certificate-checkout] .certificate-checkout__content__terms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  width: 100%;
}

[data-page=certificate-checkout] .certificate-checkout__content__terms a {
  font: var(--xs-regular);
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=certificate-checkout] .certificate-checkout__content__terms a:hover {
  color: #ffffff;
}

[data-page=certificate-checkout] .certificate-checkout__content__terms:not([data-for-device=desktop]) {
  display: none;
}

@media (max-width: 768px) {
  [data-page=certificate-checkout] main {
    padding: 40px 20px 100px;
  }
  [data-page=certificate-checkout] form.container,
  [data-page=certificate-checkout] section.container {
    flex-direction: column;
    gap: 32px;
  }
  [data-page=certificate-checkout] .certificate-checkout__header {
    margin-bottom: 32px;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__left__inner,
  [data-page=certificate-checkout] .certificate-checkout__content__right__inner {
    padding: 0;
    --background: transparent !important;
    --border-color: transparent !important;
    border: none !important;
    width: 100%;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__left__inner::after,
  [data-page=certificate-checkout] .certificate-checkout__content__right__inner::after {
    display: none;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__left {
    width: 100%;
    order: 2;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__right {
    width: 100%;
    order: 1;
    border-bottom: 1px solid;
    padding-bottom: 8px;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.024) 100%);
  }
  [data-page=certificate-checkout] .certificate-checkout__content__terms[data-for-device=desktop] {
    display: none;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__terms[data-for-device=mobile] {
    order: 4;
    margin-top: 0;
    display: flex;
  }
  [data-page=certificate-checkout] #certificate-checkout-form button[type=submit][data-for-device=desktop] {
    display: none;
  }
  [data-page=certificate-checkout] #certificate-checkout-form button[type=submit][data-for-device=mobile] {
    order: 3;
    display: flex;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__right__inner__content__form__group:has(button[type=submit]) {
    margin-top: 0;
  }
  [data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info__name,
  [data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info__price {
    font: var(--sm-medium);
  }
  [data-page=certificate-checkout] .certificate-checkout__content__left__inner__content__info__description {
    font: var(--xs-regular);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  [data-page=certificate-checkout] section.container {
    padding: 0 20px;
  }
}
[data-page=blueprint-test-flow] main {
  padding: 40px 20px;
  margin-top: -10px;
  color: #e4e4e7;
  min-height: calc(100vh - 155.33334px + 20px);
  display: flex;
  flex-direction: column;
}

[data-page=blueprint-test-flow] section.container {
  width: 100%;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--container-grid-gap-x);
}

[data-page=blueprint-test-flow] section.container .inner--in-padding {
  padding: 0 56px;
}

[data-page=blueprint-test-flow] section.container .inner-4 {
  grid-column: 5/9;
}

[data-page=blueprint-test-flow] section.container .inner-6 {
  grid-column: 4/10;
}

[data-page=blueprint-test-flow] section.container .inner-8 {
  grid-column: 3/11;
}

[data-page=blueprint-test-flow] section.container .inner-10 {
  grid-column: 1/11;
}

[data-page=blueprint-test-flow] section.container .inner-12 {
  grid-column: 1/13;
}

[data-page=blueprint-test-flow] section.container .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--container-grid-gap-x);
}

[data-page=blueprint-test-flow] section.return-section button {
  --text-color: #ffffff99;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
}

[data-page=blueprint-test-flow] section.return-section button > div {
  width: 16px;
  height: 16px;
}

[data-page=blueprint-test-flow] section.return-section svg path {
  stroke: var(--text-color);
  stroke-opacity: 1;
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] section.return-section span {
  color: var(--text-color);
  width: max-content;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] section.return-section button:hover {
  --text-color: #ffffff;
}

[data-page=blueprint-test-flow] section.test-info-section > div h4 {
  flex: 1;
}

[data-page=blueprint-test-flow] section.test-info-section > div .icon {
  --text-color: #ffffff99;
  width: 16px;
  height: 16px;
  display: none;
  cursor: pointer;
}

[data-page=blueprint-test-flow] section.test-info-section > div .icon svg path {
  stroke: var(--text-color);
  stroke-opacity: 1;
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] section.test-info-section > div .icon:hover svg path {
  stroke: #ffffff;
}

[data-page=blueprint-test-flow] section.test-info-section > div {
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50.39%, rgba(255, 255, 255, 0) 100%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

[data-page=blueprint-test-flow] .test__title {
  padding: 16px 0;
  font: var(--sm-medium);
  text-align: center;
  --text-color: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.72) 100%);
}

[data-page=blueprint-test-flow] section.test-question-info-section > div {
  margin-bottom: 48px;
}

[data-page=blueprint-test-flow] .test__progress {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
  text-align: center;
}

[data-page=blueprint-test-flow] .test__question-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  text-align: center;
}

[data-page=blueprint-test-flow] section.test-question-list-section > div {
  margin-bottom: 40px;
}

[data-page=blueprint-test-flow] .test__answers,
[data-page=blueprint-test-flow] .test__questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-page=blueprint-test-flow] .test__answers__answer,
[data-page=blueprint-test-flow] .test__questions__option {
  --unhovered-opacity: 1;
  --unhovered-background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  --unhovered-border-color: #ffffff0f;
  --hovered-opacity: 0;
  --hovered-background: linear-gradient(0deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 100%);
  --hovered-border-color: #ffffff21;
  --active-opacity: 0;
  --active-background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --active-border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50.39%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

[data-page=blueprint-test-flow] .test__answers__answer__background,
[data-page=blueprint-test-flow] .test__questions__option__background {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: #0f0f11;
}

[data-page=blueprint-test-flow] .test__answers__answer__background::before,
[data-page=blueprint-test-flow] .test__answers__answer__background::after,
[data-page=blueprint-test-flow] .test__questions__option__background::before,
[data-page=blueprint-test-flow] .test__questions__option__background::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var(--unhovered-background);
  opacity: var(--unhovered-opacity);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__answers__answer__background::after,
[data-page=blueprint-test-flow] .test__questions__option__background::after {
  opacity: var(--hovered-opacity);
  background: var(--hovered-background);
}

[data-page=blueprint-test-flow] .test__answers__answer__background--active,
[data-page=blueprint-test-flow] .test__questions__option__background--active {
  opacity: var(--active-opacity);
  background: var(--active-background);
}

[data-page=blueprint-test-flow] .test__answers__answer__border,
[data-page=blueprint-test-flow] .test__questions__option__border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 17px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
}

[data-page=blueprint-test-flow] .test__answers__answer__border::before,
[data-page=blueprint-test-flow] .test__answers__answer__border::after,
[data-page=blueprint-test-flow] .test__questions__option__border::before,
[data-page=blueprint-test-flow] .test__questions__option__border::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var(--unhovered-border-color);
  opacity: var(--unhovered-opacity);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__answers__answer__border::after,
[data-page=blueprint-test-flow] .test__questions__option__border::after {
  opacity: var(--hovered-opacity);
  background: var(--hovered-border-color);
}

[data-page=blueprint-test-flow] .test__answers__answer__border--active,
[data-page=blueprint-test-flow] .test__questions__option__border--active {
  opacity: var(--active-opacity);
  background: var(--active-border-color);
}

[data-page=blueprint-test-flow] .test__answers__answer:hover,
[data-page=blueprint-test-flow] .test__questions__option:hover {
  --unhovered-opacity: 0;
  --hovered-opacity: 1;
}

[data-page=blueprint-test-flow] .test__answers__answer__letter,
[data-page=blueprint-test-flow] .test__questions__option__letter {
  position: relative;
  z-index: 4;
  width: 40px;
  height: 40px;
  font: var(--lg-medium);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  flex-shrink: 0;
}

[data-page=blueprint-test-flow] .test__answers__answer__letter span,
[data-page=blueprint-test-flow] .test__questions__option__letter span {
  position: relative;
  z-index: 4;
}

[data-page=blueprint-test-flow] .test__answers__answer__content,
[data-page=blueprint-test-flow] .test__questions__option__content {
  position: relative;
  z-index: 4;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint-test-flow] .test__answers__answer__letter .test__answers__answer__border,
[data-page=blueprint-test-flow] .test__questions__option__letter .test__questions__option__border {
  border-radius: 9px;
}

[data-page=blueprint-test-flow] .test__questions__option[data-active=true] {
  --active-opacity: 1;
  --hovered-opacity: 0;
  --unhovered-opacity: 0;
}

[data-page=blueprint-test-flow] section.test-question-list-section .test__input {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  padding: 16px;
  min-height: 154px;
  border-radius: 16px;
  background: linear-gradient(0deg, #0f0f11, #0f0f11), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.0392156863);
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=blueprint-test-flow] section.test-question-list-section .test__input::placeholder {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=blueprint-test-flow] .test__actions {
  width: 100%;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-page=blueprint-test-flow] .test__actions__action {
  --unhovered-opacity: 1;
  --hovered-opacity: 0;
  --active-opacity: 0;
  --text-color: #ffffff99;
  --unhovered-background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --hovered-background: #e4e4e7;
  position: relative;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 10px 16px;
}

[data-page=blueprint-test-flow] .test__actions__action__background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: #0f0f11;
}

[data-page=blueprint-test-flow] .test__actions__action__background::before,
[data-page=blueprint-test-flow] .test__actions__action__background::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background: var(--unhovered-background);
  opacity: var(--unhovered-opacity);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__actions__action__background::after {
  opacity: var(--hovered-opacity);
  background: var(--hovered-background);
}

[data-page=blueprint-test-flow] .test__actions__action span {
  position: relative;
  z-index: 2;
  font: var(--sm-medium);
  color: var(--text-color);
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__actions__action .icon {
  position: relative;
  z-index: 2;
  width: 16px;
  height: 16px;
}

[data-page=blueprint-test-flow] .test__actions__action svg path {
  stroke: var(--text-color);
  stroke-opacity: 1;
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__actions__action[disabled] {
  cursor: not-allowed;
  --text-color: #ffffff66 !important;
  --unhovered-background: #ffffff0f !important;
  --hovered-background: #ffffff0f !important;
}

[data-page=blueprint-test-flow] .test__actions__action:hover {
  --text-color: #0f0f11;
  --unhovered-opacity: 0;
  --hovered-opacity: 1;
}

[data-page=blueprint-test-flow] .test__actions__action[data-action=previous] .icon {
  order: 1;
}

[data-page=blueprint-test-flow] .test__actions__action[data-action=previous] span {
  order: 2;
}

[data-page=blueprint-test-flow] .test-question-list-section[data-can-previous=true] .test__actions__action[data-action=previous] {
  display: flex;
}

[data-page=blueprint-test-flow] .test-question-list-section[data-last-question=false] .test__actions__action[data-action=next] {
  display: flex;
}

[data-page=blueprint-test-flow] .test-question-list-section[data-last-question=true] .test__actions__action[data-action=submit] {
  display: flex;
}

[data-page=blueprint-test-flow] .test__actions__action[data-action=next]:not([disabled]),
[data-page=blueprint-test-flow] .test__actions__action[data-action=submit]:not([disabled]) {
  --text-color: #0f0f11;
  --unhovered-opacity: 0;
  --hovered-opacity: 1;
  --unhovered-background: #e4e4e7;
  --hovered-background: #e4e4e7;
}

[data-page=blueprint-test-flow] div:is(.test__image) {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 40px;
  overflow: hidden;
}

[data-page=blueprint-test-flow] .test__image {
  width: 100%;
  border-radius: inherit;
}

[data-page=blueprint-test-flow] .test__image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
}

[data-page=blueprint-test-flow] .score-section > div {
  row-gap: 40px !important;
  width: 100%;
}

[data-page=blueprint-test-flow] .score-section[data-is-pending=true] .answers-section {
  display: none;
}

[data-page=blueprint-test-flow] section.score-section {
  --pending-opacity: 1;
  --pending-pointer-events: auto;
  --graded-opacity: 0;
  --graded-pointer-events: none;
  --grade-color: #a7f3d0;
  --grade-border-color: linear-gradient(270deg, rgba(167, 243, 208, 0) 0%, #a7f3d0 50.39%, rgba(167, 243, 208, 0) 100%);
  --grade-background: radial-gradient(50% 50% at 50% 100%, rgba(167, 243, 208, 0.12) 0%, rgba(167, 243, 208, 0) 100%);
  border-image-source: linear-gradient(270deg, rgba(167, 243, 208, 0) 0%, #a7f3d0 50.39%, rgba(167, 243, 208, 0) 100%);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

[data-page=blueprint-test-flow] .test__result-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -1px;
  text-align: center;
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  margin-bottom: 40px;
}

[data-page=blueprint-test-flow] .test__result-grade {
  position: relative;
  padding: 16px 0;
  height: 68px;
}

[data-page=blueprint-test-flow] .test__result-grade__pending,
[data-page=blueprint-test-flow] .test__result-grade__score {
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__result-grade__pending {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=blueprint-test-flow] .test__result-grade__pending {
  opacity: var(--pending-opacity);
  pointer-events: var(--pending-pointer-events);
}

[data-page=blueprint-test-flow] .test__result-grade__score {
  opacity: var(--graded-opacity);
  pointer-events: var(--graded-pointer-events);
}

[data-page=blueprint-test-flow] .test__result-grade__score span:nth-child(1) {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  color: var(--grade-color);
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__result-grade__score span:nth-child(2) {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint-test-flow] .test__result-grade::after,
[data-page=blueprint-test-flow] .test__result-grade::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50.39%, rgba(255, 255, 255, 0) 100%);
  opacity: var(--pending-opacity);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__result-grade::after {
  opacity: var(--graded-opacity);
  background: var(--grade-background);
  border-image-source: var(--grade-border-color);
}

[data-page=blueprint-test-flow] .score-section[data-bad=true] {
  --grade-color: #ff8585;
  --grade-background: radial-gradient(50% 50% at 50% 100%, rgba(255, 133, 133, 0.12) 0%, rgba(255, 133, 133, 0) 100%);
  --grade-border-color: linear-gradient(270deg, rgba(255, 133, 133, 0) 0%, #ff8585 50.39%, rgba(255, 133, 133, 0) 100%);
}

[data-page=blueprint-test-flow] .score-section[data-is-pending=false] {
  --pending-opacity: 0;
  --graded-opacity: 1;
  --pending-pointer-events: none;
  --graded-pointer-events: auto;
}

[data-page=blueprint-test-flow] main[data-state=answering] section.js-reviewing-screens {
  display: none;
}

[data-page=blueprint-test-flow] main[data-state=reviewing] section.js-question-screens {
  display: none;
}

[data-page=blueprint-test-flow] .test__result-video {
  width: 100%;
  height: 252px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

[data-page=blueprint-test-flow] .test__result-video video {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

[data-page=blueprint-test-flow] .test__result-certificate {
  --border-radius: 12px;
}

[data-page=blueprint-test-flow] .test__result-certificate > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

[data-page=blueprint-test-flow] .test__result-certificate__content {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-test-flow] .test__result-certificate__content img {
  width: 24px;
  height: 24px;
}

[data-page=blueprint-test-flow] .test__result-certificate__content span {
  font: var(--sm-medium);
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
}

[data-page=blueprint-test-flow] .test__result-certificate__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__certificate {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__certificate img {
  width: 24px;
  height: 24px;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__certificate span {
  font: var(--sm-medium);
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__notification {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4509803922);
  text-align: center;
  padding: 0 24px;
}
@media (min-width: 768px) {
  [data-page=blueprint-test-flow] .course-modules__modules__module__content__notification {
    margin-top: 8px;
  }
}

[data-page=blueprint-test-flow] .answers-section .inner-4 {
  padding: 40px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=blueprint-test-flow] .answers-section .inner-4:nth-child(1) {
  border-bottom: none;
  padding-bottom: 0;
}

[data-page=blueprint-test-flow] .answers-section .inner-4:nth-child(2) {
  padding-top: 0;
  border-top: none;
}

[data-page=blueprint-test-flow] .answers-section .tabs {
  width: 100%;
  justify-content: center;
  margin-bottom: 24px;
}

[data-page=blueprint-test-flow] .answers-section .test__answers__answer {
  align-items: flex-start;
}

[data-page=blueprint-test-flow] .answers-section .test__answers__answer__content {
  flex: 1;
}

[data-page=blueprint-test-flow] .answers-section .test__answers__answer__content__label {
  font: var(--xs-medium);
  color: var(--label-color);
  margin-bottom: 4px;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__question {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__label {
  display: flex;
  align-items: center;
  gap: 4px;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__label span:first-child {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__label__answer {
  font: var(--xs-medium);
  color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__show-explanation {
  --text-color: #ffffff80;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__show-explanation .icon {
  width: 16px;
  height: 16px;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__show-explanation span:first-child {
  font: var(--xs-medium);
  color: var(--text-color);
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__show-explanation svg path {
  stroke: var(--text-color);
  stroke-opacity: 1;
  transition: stroke 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__show-explanation:hover {
  --text-color: #ffffff;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__explanation {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5019607843);
  transition: max-height 1s var(--easeOutQuart), margin-top 1s 0s var(--easeOutQuart);
  max-height: 0;
  overflow: hidden;
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__explanation[data-show=true] {
  margin-top: 8px;
  max-height: 100px;
  transition: max-height 1s var(--easeOutQuart), margin-top 1s 0s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .test__answers__answer__content__feedback__explanation a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

[data-page=blueprint-test-flow] .test__answers__answer {
  --label-color: #ff8585;
  --unhovered-background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 133, 133, 0.06) 0%, rgba(255, 133, 133, 0) 100%);
  --unhovered-border-color: #ff85850a;
  gap: 12px;
  padding: 12px;
  cursor: default;
}

[data-page=blueprint-test-flow] .test__answers__answer:hover {
  --unhovered-opacity: 1;
  --hovered-opacity: 0;
  --active-opacity: 0;
}

[data-page=blueprint-test-flow] .test__answers__answer__letter {
  --unhovered-background: linear-gradient(0deg, rgba(255, 133, 133, 0.08), rgba(255, 133, 133, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 133, 133, 0.08) 0%, rgba(255, 133, 133, 0) 100%);
  --unhovered-border-color: transparent;
}

[data-page=blueprint-test-flow] .test__answers__answer__letter span {
  color: var(--label-color);
}

[data-page=blueprint-test-flow] .test__answers__answer[data-correct=true] {
  --label-color: #a7f3d0;
  --unhovered-background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    radial-gradient(78.04% 50.03% at 50% 0%, rgba(167, 243, 208, 0.06) 0%, rgba(167, 243, 208, 0) 100%);
  --unhovered-border-color: #a7f3d01a;
}

[data-page=blueprint-test-flow] .test__answers__answer[data-correct=true] .test__answers__answer__letter {
  --unhovered-background: linear-gradient(0deg, rgba(167, 243, 208, 0.08), rgba(167, 243, 208, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(167, 243, 208, 0.08) 0%, rgba(167, 243, 208, 0) 100%);
  --unhovered-border-color: transparent;
}

[data-page=blueprint-test-flow] .return-to-overview-button {
  margin-top: 40px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  padding: 10px 16px;
  border-radius: 9999px;
  width: max-content;
  transition: background 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .return-to-overview-button span {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  width: max-content;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .return-to-overview-button:hover {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=blueprint-test-flow] .return-to-overview-button:hover span {
  color: #ffffff;
}

@media (max-width: 768px) {
  [data-page=blueprint-test-flow] main {
    padding: 0 20px 40px;
    margin-top: 0;
  }
  [data-page=blueprint-test-flow] section.container,
  [data-page=blueprint-test-flow] section.container .grid {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
  [data-page=blueprint-test-flow] section.container .inner {
    grid-column: span 4;
  }
  [data-page=blueprint-test-flow] section.container .inner-12,
  [data-page=blueprint-test-flow] section.container .inner-10,
  [data-page=blueprint-test-flow] section.container .inner-8,
  [data-page=blueprint-test-flow] section.container .inner-6,
  [data-page=blueprint-test-flow] section.container .inner-4 {
    grid-column: span 4;
  }
  [data-page=blueprint-test-flow] section.container .inner--in-padding {
    padding: 0;
  }
  [data-page=blueprint-test-flow] section.container .inner--out-padding {
    width: 100%;
  }
  [data-page=blueprint-test-flow] section.return-section {
    display: none;
  }
  [data-page=blueprint-test-flow] section.test-info-section > div {
    padding: 0 var(--container-padding-x-mobile);
  }
  [data-page=blueprint-test-flow] section.test-question-info-section > div {
    margin-bottom: 24px;
  }
  [data-page=blueprint-test-flow] .test__progress {
    margin-bottom: 8px;
  }
  [data-page=blueprint-test-flow] .test__question-title {
    font: var(--xl-medium);
  }
  [data-page=blueprint-test-flow] main:not([data-state=reviewing]) section.test-info-section > div .icon:nth-child(1) {
    display: flex;
  }
  [data-page=blueprint-test-flow] .test__result-title {
    font: var(--xl-medium);
  }
  [data-page=blueprint-test-flow] .test__result-grade__score span:nth-child(1) {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -1px;
  }
  [data-page=blueprint-test-flow] .test__result-grade__score span:nth-child(2) {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -1px;
  }
  [data-page=blueprint-test-flow] .test__result-grade__pending {
    font: var(--2x-medium);
  }
  [data-page=blueprint-test-flow] .test__result-video {
    height: 204px;
    margin-bottom: 16px;
  }
  [data-page=blueprint-test-flow] .answers-section .inner-4:nth-child(1),
  [data-page=blueprint-test-flow] .answers-section .inner-4:nth-child(2) {
    padding: 0;
    border: none;
  }
}
.test__answers__answer__content__feedback__show-explanation .icon {
  transition: transform 0.3s ease;
}
.test__answers__answer__content__feedback__show-explanation[data-show=true] .icon {
  transform: rotate(180deg);
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions button {
  --text-color: #ffffff;
  --unhovered-opacity: 1;
  --hovered-opacity: 0;
  --unhovered-background: #ffffff33;
  --hovered-background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #ffffff;
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  display: block;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions button span {
  position: relative;
  z-index: 1;
  font: var(--sm-medium);
  color: var(--text-color);
  width: max-content;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions button::after,
[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--unhovered-background);
  border-radius: inherit;
  opacity: var(--unhovered-opacity);
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions button::after {
  background: var(--hovered-background);
  opacity: var(--hovered-opacity);
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__actions button:hover {
  --text-color: #0f0f11;
  --unhovered-opacity: 0;
  --hovered-opacity: 1;
}

[data-page=blueprint-test-flow] .course-modules__modules__module__content__notification {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4509803922);
  text-align: center;
  padding: 0 24px;
}
@media (min-width: 768px) {
  [data-page=blueprint-test-flow] .course-modules__modules__module__content__notification {
    margin-top: 8px;
  }
}

[data-page=blueprint-test-flow] .gradient-border_inner {
  padding: 32px 0;
}

[data-page=blueprint-test-flow] .certificate-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 24px;
}

[data-page=blueprint-test-flow] .certificate-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=blueprint-test-flow] .certificate-left img {
  width: 24px;
  height: 24px;
}

[data-page=blueprint-test-flow] .certificate-left span {
  font: var(--sm-medium);
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
}

#certificate * {
  font-family: var(--certificate-font) !important;
}

#certificate {
  padding: 28px;
  height: 916px;
  width: 1296px;
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
  background-color: #0f0f11;
}

#certificate .certificate__mask {
  background: url(/assets/certificate/text-mask-713c7599525c33de9dc144377b2dad555594ddf1519291ac3528b541e37d66d0.png) no-repeat center center/cover;
  width: auto;
  height: 100%;
  aspect-ratio: 357/948;
  position: absolute;
  top: 0;
  right: 64px;
}

#certificate .certificate__inner {
  --dist: 40px;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#certificate .certificate__inner__border {
  width: var(--width, 1px);
  height: var(--height, 1px);
  background-color: #3f3f41;
  position: absolute;
  top: var(--top);
  left: var(--left);
  right: var(--right);
  bottom: var(--bottom);
}

#certificate .certificate__inner__content {
  flex: 1;
  padding: calc(var(--dist) + 20px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

#certificate .certificate__inner__content__logo {
  margin: 0 auto;
  margin-bottom: 48px;
  width: 107px;
  height: 24px;
}

#certificate .certificate__inner__content__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#certificate .certificate__inner__content__title {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 754px;
  color: #fff;
  margin-bottom: 64px;
}

#certificate .certificate__inner__content__title p {
  color: rgba(255, 255, 255, 0.5019607843);
}

#certificate .certificate__inner__content__info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 64px;
  margin-bottom: 64px;
}

#certificate .certificate__inner__content__info p {
  font-style: italic;
  font-size: 20px;
  font-weight: 300;
  line-height: 28/20;
  letter-spacing: 0.01em;
  color: #ffffff;
  opacity: 0.6;
  text-align: center;
  max-width: 390px;
  margin-bottom: 32px;
}

#certificate .certificate__inner__content__info h3 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  color: #ffffff;
}

#certificate .certificate__inner__content__sign {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
}

#certificate .certificate__inner__content__sign > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 200px;
}

#certificate .certificate__inner__content__sign img {
  width: auto;
  height: 100%;
  object-fit: cover;
  max-width: unset;
}

#certificate .certificate__inner__content__sign span {
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  line-height: 28/18;
  letter-spacing: 0.01em;
  text-align: center;
  color: #ffffff;
  opacity: 0.6;
}

#certificate .certificate__inner__content__sign h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24/16;
  letter-spacing: 0.01em;
  text-align: center;
}

#certificate .certificate__inner__content__sign > div div:nth-child(1) {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#certificate .certificate__inner__content__sign > div div:nth-child(2) {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  text-align: center;
}

[data-page=live-call] main {
  padding-top: 31px;
  padding-bottom: 40px;
}

[data-page=live-call] .liveCall_locked_hero {
  margin-bottom: 16px;
}

[data-page=live-call] .liveCall_inner {
  display: grid;
  grid-template-columns: 816px 1fr;
  width: 100%;
  gap: 16px;
  height: 842px;
}

[data-page=live-call] .liveCall_inner_calender_container {
  grid-column: 1/2;
  grid-row: 1/4;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0F0F11 !important;
  overflow: hidden;
}

[data-page=live-call] .liveCall_inner_calender {
  color: #fff;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 298px 1fr 0;
}

[data-page=live-call] .liveCall_inner_calender_arrow_wrap {
  position: relative;
  width: 0;
  height: 100%;
}

[data-page=live-call] .liveCall_inner_calender_arrow {
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -moz-backdrop-filter: blur(4px);
  -o-backdrop-filter: blur(4px);
  -ms-backdrop-filter: blur(4px);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background 0.4s var(--easeOutQuart);
}

[data-page=live-call] .liveCall_inner_calender_arrow:hover {
  background: rgba(255, 255, 255, 0.12);
}

[data-page=live-call] .liveCall_inner_calender_arrow:hover svg path {
  stroke-opacity: 1;
}

[data-page=live-call] .liveCall_inner_calender_arrow.liveCall_inner_calender_arrow__prev {
  right: 415px;
}

[data-page=live-call] .liveCall_inner_calender_arrow svg {
  width: 20px;
  height: 20px;
}

[data-page=live-call] .liveCall_inner_calender_arrow svg path {
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

[data-page=live-call] .liveCall_inner_calender_arrow.liveCall_inner_calender_arrow__prev svg {
  transform: rotate(0.5turn);
}

[data-page=live-call] .liveCall_inner_calender_sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_event {
  margin-top: 8px;
  border-radius: 0px 12px 12px 0px;
  border-left: 1px solid #f97316;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 8px 10px 10px;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_heading {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_heading .liveCall_inner_calender_sidebar_cards_card_heading_today {
  color: #fff;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_event_time {
  display: flex;
  align-items: center;
  gap: 4px;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_event_time img {
  width: 12px;
  height: 12px;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_event_time p {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_event_heading {
  color: #e4e4e7;
  margin-top: 4px;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .liveCall_inner_calender_sidebar_cards_card_event_category {
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
  background: linear-gradient(180deg, #f97316 0%, rgba(249, 115, 22, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=live-call] .liveCall_inner_calender_sidebar_btn {
  border-radius: 56px;
  background: var(--primary-black-background);
  height: 36px;
  display: flex;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  transition: background 0.5s var(--easeOutQuart);
}

[data-page=live-call] .liveCall_inner_calender_sidebar_btn span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .liveCall_inner_calender_sidebar_btn:hover {
  background: var(--primary-black-background-hover);
}

[data-page=live-call] .liveCall_inner_insight {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 100%;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background: padding-box linear-gradient(#0f0f11, #0f0f11), border-box radial-gradient(circle at top left, rgba(249, 115, 22, 0.6) 0%, rgba(249, 115, 22, 0) 70%), border-box radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.6) 0%, rgba(249, 115, 22, 0) 70%);
}

/* desactivar pseudo borde anterior */
[data-page=live-call] .liveCall_inner_insight::after {
  display: none !important;
}

[data-page=live-call] .liveCall_inner_insight {
  min-height: 220px;
}

[data-page=live-call] .liveCall_inner_insight_inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

[data-page=live-call] .liveCall_inner_insight::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  border-radius: inherit;
  background-image: url(/assets/backgrounds/bg-insight-plus-b1c8cc48894843a16dda84a23e79d6238ebdac910d54faefe7e3861246e6eaec.webp);
}

[data-page=live-call] .liveCall_inner_insight_heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */
  letter-spacing: -1px;
}

[data-page=live-call] .liveCall_inner_insight_desc {
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
  max-width: 304px;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .liveCall_inner_insight_btn {
  margin-top: 32px;
  border-radius: 56px;
  height: 36px;
  padding: 0 12px;
}

[data-page=live-call] .liveCall_inner_insight_btn span {
  font-family: var(--font-base);
  color: var(--white);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .liveCall_inner_insight_surprised {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
  margin-top: 32px;
}

[data-page=live-call] .liveCall_inner_liveCall {
  grid-column: 2/3;
  grid-row: 2/3;
  height: 100%;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

[data-page=live-call] .liveCall_inner_liveCall_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

[data-page=live-call] .liveCall_inner_liveCall_top_heading {
  min-width: 159px;
}

[data-page=live-call] .liveCall_inner_liveCall_top_heading img {
  width: 24px;
  height: 24px;
}

[data-page=live-call] .liveCall_inner_liveCall_top_heading p {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  margin-top: 16px;
}

[data-page=live-call] .liveCall_inner_liveCall_top_countdown {
  border-radius: 56px;
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-black-background);
  min-width: 101px;
}

[data-page=live-call] .liveCall_inner_liveCall_top_countdown:hover {
  background: var(--primary-black-background-hover);
}

[data-page=live-call] .liveCall_inner_liveCall_top_countdown p {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .liveCall_inner_liveCall_top--active {
  border-radius: 48px;
  height: 28px;
  display: flex;
  padding: 0 8px 0 11px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(16, 185, 129, 0.2);
}

[data-page=live-call] .liveCall_inner_liveCall_top_circle--active {
  border-radius: 40px;
  background: #a7f3d0;
  box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2);
  width: 6px;
  height: 6px;
  animation: pulse-live 2.5s infinite ease-in-out;
}

[data-page=live-call] .liveCall_inner_liveCall_top--active p {
  color: #a7f3d0;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .liveCall_inner_liveCall_btn {
  height: 36px;
  width: 100%;
  border-radius: 56px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .liveCall_inner_liveCall_btn.home__calender__middle__card__btn {
  background: var(--primary-white-background);
  color: #0f0f11;
  font-size: 12px;
  line-height: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

[data-page=live-call] .liveCall_inner_liveCall_btn.home__calender__middle__card__btn:hover {
  background: var(--primary-white-background-hover);
}

[data-page=live-call] .liveCall_inner_liveCall_btn-active {
  color: white;
  border-radius: 56px;
  background: var(--primary-black-background);
  height: 36px;
  display: flex;
  padding: 0px 12px;
  justify-content: center;
  align-items: center;
  transition: background 0.5s var(--easeOutQuart);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

[data-page=live-call] .liveCall_inner_liveCall_btn-active:hover {
  background: var(--primary-black-background-hover);
}

[data-page=live-call] a.liveCall_inner_liveCall_pro_btn,
[data-page=live-call] a.liveCall_inner_liveCall_pro_btn:hover {
  color: white;
  text-decoration: none;
  width: 100%;
}

[data-page=live-call] .liveCall_inner_liveCall_pro_btn--disabled,
[data-page=live-call] .liveCall_inner_liveCall_pro_btn--disabled:hover {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
  width: 100%;
  background: var(--primary-black-background);
}

[data-page=live-call] .liveCall_inner_form {
  grid-column: 2/3;
  grid-row: 3/4;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 63.9975em) {
  [data-page=live-call] .liveCall_inner_form {
    height: max-content;
  }
}
[data-page=live-call] .liveCall_inner_form #live_call_question_form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

[data-page=live-call] .liveCall_inner_form_heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

[data-page=live-call] .liveCall_inner_form_desc {
  margin-top: 8px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
}

[data-page=live-call] .liveCall_inner_form_label {
  flex-grow: 1;
}

[data-page=live-call] .liveCall_inner_form_textarea {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: #0f0f11;
  padding: 16px;
  color: rgba(255, 255, 255, 0.89);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  resize: none;
  width: 100%;
  height: 100%;
}

[data-page=live-call] .liveCall_inner_form_textarea::placeholder {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.27) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .liveCall_inner_form_btn {
  border-radius: 56px;
  background: var(--primary-black-background);
  opacity: 0.4;
  height: 36px;
  width: 100%;
  padding: 0 12px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .toastui-calendar-day-names.toastui-calendar-month {
  padding: 0 !important;
}

[data-page=live-call] .toastui-calendar-layout.toastui-calendar-month {
  background-color: transparent !important;
}

[data-page=live-call] .toastui-calendar-day-name-item.toastui-calendar-month span {
  text-align: center;
  color: rgba(228, 228, 231, 0.4) !important;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=live-call] .toastui-calendar-weekday-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=live-call] .toastui-calendar-daygrid-cell + .toastui-calendar-daygrid-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=live-call] .toastui-calendar-grid-cell-header {
  text-align: right;
}

[data-page=live-call] .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date {
  color: rgba(228, 228, 231, 0.8) !important;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=live-call] .toastui-calendar-layout.toastui-calendar-day-view,
[data-page=live-call] .toastui-calendar-layout.toastui-calendar-week-view {
  background-color: transparent !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid,
[data-page=live-call] .toastui-calendar-column {
  background-color: transparent !important;
}

[data-page=live-call] .toastui-calendar-day-view .toastui-calendar-day-name-item.toastui-calendar-week {
  border-left: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=live-call] .toastui-calendar-day-name-item .toastui-calendar-day-name__date {
  color: #e4e4e7;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=live-call] .toastui-calendar-timegrid-hour-rows {
  background-color: transparent !important;
}

[data-page=live-call] .toastui-calendar-day-name-item .toastui-calendar-day-name__name {
  color: rgba(228, 228, 231, 0.4);
  text-align: center;
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-time::-webkit-scrollbar {
  display: none;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-day-view-day-names {
  border: none !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-day-view-day-names::-webkit-scrollbar,
[data-page=live-call] .toastui-calendar-panel.toastui-calendar-week-view-day-names::-webkit-scrollbar {
  display: none;
}

[data-page=live-call] .toastui-calendar-panel-resizer {
  display: none !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title,
[data-page=live-call] .toastui-calendar-timegrid-time-column {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
  width: 61px !important;
  text-align: right !important;
  justify-content: flex-end !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  overflow-y: auto !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title {
  background-color: rgba(0, 0, 0, 0) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title .toastui-calendar-template-alldayTitle,
[data-page=live-call] .toastui-calendar-template-timegridDisplayPrimaryTime {
  color: rgba(228, 228, 231, 0.4);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-grid,
[data-page=live-call] .toastui-calendar-column {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .calender_main_event_item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .calender_main_event_item_icon {
  justify-content: flex-start !important;
  flex-direction: row !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-weekday-event-block {
  padding-left: 0 !important;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event {
  padding-left: 3px;
  margin: 0 !important;
  border-radius: 0 !important;
}

[data-page=live-call] .toastui-calendar-columns {
  left: 62px !important;
}

[data-page=live-call] .toastui-calendar-day-names.toastui-calendar-week .toastui-calendar-day-name-container {
  margin-left: 60px !important;
}

[data-page=live-call] .toastui-calendar-column .toastui-calendar-grid-selection {
  right: 0 !important;
}

[data-page=live-call] .toastui-calendar-column .toastui-calendar-grid-selection {
  left: 0px !important;
}

[data-page=live-call] .toastui-calendar-template-time {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

[data-page=live-call] .toastui-calendar-template-time strong {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event .toastui-calendar-weekday-event-title span,
[data-page=live-call] .toastui-calendar-template-time span {
  color: #e4e4e7 !important;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  width: 100%;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .toastui-calendar-event-time {
  width: 100% !important;
}

[data-page=live-call] .toastui-calendar-weekday-event-dot {
  display: none !important;
}

[data-page=live-call] .calender_main_event_item {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 6px;
}

[data-page=live-call] .calender_main_event_item .calender_main_event_item_icon {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 4px;
  flex-shrink: 0;
  width: 120%;
}

[data-page=live-call] .calender_main_event_item p {
  overflow: hidden;
  color: #e4e4e7;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .toastui-calendar-weekday-event-block {
  padding: 0 !important;
  padding-left: 8px !important;
}

[data-page=live-call] .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event {
  margin: 0 !important;
  margin-right: 8px !important;
  display: flex;
  align-items: center;
  height: auto !important;
}

[data-page=live-call] .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event .toastui-calendar-weekday-event-title {
  padding: 0 !important;
}

[data-page=live-call] .toastui-calendar-layout.toastui-calendar-week-view .calender_main_event_item {
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  padding-left: 3px;
  padding-top: 8px;
  padding-bottom: 1%;
}

[data-page=live-call] .toastui-calendar-layout.toastui-calendar-week-view .calender_main_event_item p {
  overflow: hidden;
  color: #e4e4e7;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  max-width: 90%;
  line-height: 16px; /* 133.333% */
}

[data-page=live-call] .liveCall_inner_calender_main {
  padding-top: 8px;
  height: 100%;
  overflow: auto;
  width: calc(100% + 1px);
}

[data-page=live-call] .liveCall_inner_calender_main::-webkit-scrollbar {
  display: none;
}

[data-page=live-call] .toastui-calendar-layout.toastui-calendar-week-view {
  width: 100%;
}

[data-page=live-call] .modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=live-call] .modal.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

[data-page=live-call] .modal-bg {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

[data-page=live-call] .modal-container {
  position: relative;
  padding: 27px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  padding-right: 60px;
}

[data-page=live-call] .modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  outline: none;
  appearance: none;
  background: none;
  cursor: pointer;
}

[data-page=live-call] .modal-container-heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 133.333% */
  letter-spacing: -1px;
}

[data-page=live-call] .toastui-calendar-timegrid-now-indicator-today {
  border-top: 1px solid #fff !important;
}

[data-page=live-call] .modal-container-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-top: 4px;
}

[data-page=live-call] .modal-container-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=live-call] .modal-container-header img {
  width: 24px;
  height: 24px;
}

[data-page=live-call] .modal-close svg path {
  transition-duration: 0.4s;
}

[data-page=live-call] .modal-close:hover svg path {
  stroke-opacity: 0.8;
}

@media (max-width: 1024px) {
  [data-page=live-call] .liveCall_inner_calender_sidebar {
    border-radius: 16px;
  }
  [data-page=live-call] #liveCall {
    max-width: 500px;
    margin: 0 auto;
  }
  [data-page=live-call] .liveCall_inner {
    grid-template-columns: 1fr;
  }
  [data-page=live-call] .liveCall_inner_calender_container,
  [data-page=live-call] .liveCall_inner_liveCall_container,
  [data-page=live-call] .liveCall_inner_insight,
  [data-page=live-call] .liveCall_inner_insight > .liveCall_inner_insight_inner,
  [data-page=live-call] .liveCall_inner_form_container {
    grid-column: span 4;
    grid-row: auto;
  }
  [data-page=live-call] .liveCall_inner_calender_container {
    display: grid;
    grid-template-columns: 1fr;
  }
  [data-page=live-call] .liveCall_inner_calender_main,
  [data-page=live-call] .liveCall_inner_calender_arrow_wrap,
  [data-page=live-call] .liveCall_inner_calender_sidebar_btn_wrap {
    display: none;
  }
  [data-page=live-call] .liveCall_inner_calender {
    display: grid;
    grid-template-columns: 1fr 0;
  }
}
@keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
[data-page=live-call] .liveCall_inner_form_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
}

[data-page=live-call] .liveCall_inner_form_success_icon {
  width: 32px;
  height: 32px;
  animation: scale-in 0.4s ease-out;
}

[data-page=live-call] .liveCall_inner_form_success_message {
  color: #f97316;
  text-align: center;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  animation: slide-up-fade-in 0.4s ease-out 0.1s both;
}

[data-page=live-call] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-weekday-event {
  background: rgba(255, 255, 255, 0.04) !important;
  height: 22px !important;
}

[data-page=live-call] .toastui-calendar-collapse-btn-icon {
  border-bottom-color: white;
  margin-left: auto;
  margin-right: auto;
}

[data-page=live-call] .toastui-calendar-weekday-exceed-in-week {
  background: #444;
  border: 1px solid #888;
  border-radius: 40px;
  border: none !important;
  color: #fff;
  z-index: 2;
  min-width: 20px;
}

.live-call-mediathek-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

.live-call-mediathek {
  width: 100%;
  margin-top: 40px;
}
.live-call-mediathek__title {
  font-size: 30px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}
.live-call-mediathek__subtitle {
  color: #bdbdbd;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 24px;
}
.live-call-mediathek__list {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.live-call-mediathek__item {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .live-call-mediathek__item {
    flex-direction: column;
    gap: 16px;
  }
}
.live-call-mediathek__thumb-wrap {
  flex: 0 0 480px;
  max-width: 480px;
  min-width: 320px;
}
@media (max-width: 900px) {
  .live-call-mediathek__thumb-wrap {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .live-call-mediathek__thumb-wrap {
    padding: 0;
  }
}
.live-call-mediathek__video, .live-call-mediathek__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 16px;
  object-fit: cover;
  background: #000;
  display: block;
}
@media (max-width: 600px) {
  .live-call-mediathek__video, .live-call-mediathek__thumb {
    /* ya se ajusta con las nuevas reglas */
  }
}
.live-call-mediathek__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 40px;
  max-width: 600px;
}
@media (max-width: 600px) {
  .live-call-mediathek__info {
    padding: 0 16px;
  }
}
.live-call-mediathek__meta {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .live-call-mediathek__meta {
    gap: 12px;
    font-size: 12px;
  }
}
.live-call-mediathek__meta span, .live-call-mediathek__meta__type {
  color: #8d8d8e;
}
.live-call-mediathek__icon {
  color: rgba(255, 255, 255, 0.6);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.live-call-mediathek__host, .live-call-mediathek__duration, .live-call-mediathek__type {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.live-call-mediathek__item-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  color: #fff;
  margin-bottom: 18px;
  word-break: break-word;
  --text-color: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
}
.live-call-mediathek__desc {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  line-height: 20px;
  word-break: break-word;
}
.live-call-mediathek__empty {
  color: #bdbdbd;
  font-size: 1.1rem;
  margin-top: 32px;
}
.live-call-mediathek__show-more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 16px;
  width: 100%;
}
.live-call-mediathek__show-more {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  opacity: 1;
  height: 36px;
  width: auto;
  max-width: none;
  padding: 6px 8px 6px 12px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.13);
  letter-spacing: 0.01em;
  border: none;
  color: #ffffff;
  transition: background 0.2s, border 0.2s, color 0.2s;
}
.live-call-mediathek__show-more:hover {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.live-call-mediathek__show-more-icon {
  width: 19px;
  height: 19px;
  opacity: 1;
  margin-left: 2px;
  filter: brightness(0) invert(1);
}

.live-call-mediathek.locked {
  position: relative;
}

.live-call-mediathek__overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px; /* deja visible título y subtítulo */
  left: -28px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -moz-backdrop-filter: blur(16px);
  -o-backdrop-filter: blur(16px);
  -ms-backdrop-filter: blur(16px);
  background: rgba(15, 15, 17, 0.6);
  z-index: 3;
  overflow: hidden;
}
@media (max-width: 480px) {
  .live-call-mediathek__overlay {
    left: calc(-50vw + 50%);
    width: 100vw;
  }
}

.live-call-mediathek__overlay::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 560px;
  background: #FFB480;
  opacity: 0.32;
  filter: blur(120.69px);
  pointer-events: none;
}

.live-call-mediathek__overlay-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  z-index: 1;
}

.live-call-mediathek__overlay-icon {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .live-call-mediathek__overlay-icon {
    width: 160px;
    height: auto;
  }
}

.live-call-mediathek__overlay-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Open Runde";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 133.333% */
}

.live-call-mediathek__overlay-title {
  text-shadow: 0px 4px 32px rgba(249, 115, 22, 0.32);
  font-family: "Open Runde";
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 64px; /* 133.333% */
  letter-spacing: -2px;
  background: linear-gradient(90deg, #FFB480 0%, #F97316 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.live-call-mediathek__overlay-btn-icon {
  width: 24px;
  height: 24px;
}

.live-call-mediathek__overlay-lock-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-left: 6px;
}

[data-page=live-call] .liveCall_inner_liveCall_container,
[data-page=live-call] .liveCall_inner_liveCall_container > .gradient-border_inner {
  height: 172px;
}

[data-page=live-call] .liveCall_inner_form_container {
  height: 420px; /* include 2px for gradient border */
}

[data-page=live-call] .liveCall_inner_form_container > .gradient-border_inner {
  height: 418px;
}

/* Ensure full border on all sides */
[data-page=live-call] .liveCall_inner_form_container::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)), linear-gradient(to top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important;
}

.live-call-mediathek__overlay .black_button {
  display: flex;
  padding: 10px 16px 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.8);
  border: none;
  width: 116px;
  height: 40px;
}

.live-call-mediathek__overlay .black_button span {
  color: rgba(15, 15, 17, 0.9);
  -webkit-text-fill-color: rgba(15, 15, 17, 0.9);
  background: none;
  -webkit-background-clip: initial;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.live-call-mediathek__overlay .unlock-plus-button__border,
.live-call-mediathek__overlay .unlock-plus-button__background,
.live-call-mediathek__overlay .unlock-plus-button__mask {
  display: none !important;
}

.live-call-mediathek__overlay .unlock-plus-button__content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-call-mediathek__overlay-btn-icon {
  width: 14px;
  height: 14px;
}

.live-call-mediathek__host p,
.live-call-mediathek__duration p,
.live-call-mediathek__type p {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0;
}

.live-call-mediathek__subtitle {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 24px;
}

@media (max-width: 344px) {
  [data-page=live-call] .liveCall_inner_insight {
    min-height: 240px;
  }
}
.unlock-live-call-banner {
  width: 100%;
  height: 220px;
  margin-top: 40px;
  margin-bottom: 24px;
}

.live-call-mediathek__video-locked {
  position: relative;
  cursor: pointer;
  width: 100%;
}

.live-call-mediathek__video-locked .live-call-mediathek__video {
  pointer-events: none;
}

.live-call-mediathek__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  transition: background 0.2s ease;
}

.live-call-mediathek__video-locked:hover .live-call-mediathek__play-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.live-call-mediathek__play-icon {
  width: 64px;
  height: 64px;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.live-call-mediathek__video-locked:hover .live-call-mediathek__play-icon {
  transform: scale(1.1);
  opacity: 1;
}

.plus-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.plus-modal.active {
  display: flex;
}

.plus-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.plus-modal__content {
  position: relative;
  width: 400px;
  height: 324px;
  max-width: 90vw;
  border-radius: 16px;
  border: 1px solid rgba(249, 115, 22, 0.3);
  background: radial-gradient(ellipse at top center, rgba(249, 115, 22, 0.16) 0%, transparent 50%), linear-gradient(90deg, rgba(249, 115, 22, 0.02) 0%, rgba(249, 115, 22, 0.02) 100%), #0F0F11;
  padding: 24px;
}

.plus-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.plus-modal__close:hover {
  opacity: 1;
}

.plus-modal__close img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}

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

.plus-modal__logo {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}

.plus-modal__title {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 24px;
}

.plus-modal__description {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  max-width: 352px;
}

.plus-modal__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  margin-top: 24px;
  margin-bottom: 24px;
}

.plus-modal__button {
  display: flex;
  width: 100%;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  border: 1px solid rgba(249, 115, 22, 0.3);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.1);
  color: #fff;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-bottom: 16px;
}

.plus-modal__button:hover {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.15);
}

.plus-modal__cancel-note {
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=leaderboard-v2] main {
  padding: 40px 0;
  margin-top: -14px;
  color: #e4e4e7;
}

[data-page=leaderboard-v2] section.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

[data-page=leaderboard-v2] section.container .inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--container-grid-gap-x);
}

[data-page=leaderboard-v2] .block {
  --border-width: 1px;
  --border-radius: 16px;
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, #0F0F11, #0F0F11);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-left: 16px;
  --padding-right: 16px;
  --background: #0f0f11;
  position: relative;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
}

[data-page=leaderboard-v2] .block--free-bg {
  --background: transparent;
}

[data-page=leaderboard-v2] .block::before,
[data-page=leaderboard-v2] .block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - var(--border-width));
  background: var(--background-color);
  z-index: 0;
  pointer-events: none;
}

[data-page=leaderboard-v2] .block::before {
  inset: 1px;
  background: rgba(15, 15, 17, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
}

[data-page=leaderboard-v2] .block__inner {
  position: relative;
  background: var(--background);
  border-radius: var(--inner-border-radius);
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

[data-page=leaderboard-v2] .block__inner__content {
  width: 100%;
  position: relative;
  z-index: 1;
}

[data-page=leaderboard-v2] .top-section {
  margin-bottom: 16px;
}

[data-page=leaderboard-v2] .top-section__info {
  grid-column: 1/10;
}

[data-page=leaderboard-v2] .top-section__info__rank {
  --current-color: #60A5FA;
  --next-color: #A78BFA;
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%),
  conic-gradient(from 180deg at 50% 50%,
    rgba(96, 165, 250, 0) 70deg,
    color-mix(in srgb, var(--current-color) 40%, transparent) 80deg,
    color-mix(in srgb, var(--current-color) 5%, transparent) 100deg,
    color-mix(in srgb, var(--next-color) 5%, transparent) 260deg,
    color-mix(in srgb, var(--next-color) 40%, transparent) 280deg,
    rgba(167, 139, 250, 0) 290deg
  );
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  width: 100%;
  margin-bottom: 16px;
}

[data-page=leaderboard-v2] .top-section__info__rank .block__inner {
  overflow: hidden;
}

[data-page=leaderboard-v2] .top-section__info__rank[data-max-rank=true] .block__inner::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 1px;
  right: 1px;
  height: 106px;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.97) 107px, rgba(0, 0, 0, 0) 230px), linear-gradient(270deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.97) 107px, rgba(0, 0, 0, 0) 230px), url(/assets/backgrounds/leaderboards/leaderboard-00a03e17bc59f09469f621f73b8402cce341454649b3119599a94eda22b9ac07.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left center, right center, calc(50% + 0px) bottom;
  background-size: 230px 100%, 230px 100%, calc(100% - 120px) 106px;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

[data-page=leaderboard-v2] .top-section__info__rank[data-max-rank=true] .block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - 1px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.05) 25%, rgba(217, 217, 217, 0.6) 50%, rgba(217, 217, 217, 0.05) 75%, rgba(217, 217, 217, 0) 100%);
  background-size: 400% 100%;
  background-position: -100% 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
  animation: shimmer-sweep 9.6s linear infinite;
}

@keyframes shimmer-sweep {
  0% {
    background-position: -200% 0;
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    background-position: 200% 0;
    opacity: 0;
  }
}
[data-page=leaderboard-v2] .top-section__info__rank .block__inner__content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-page=leaderboard-v2] .top-section__info__rank__header--mobile .top-section__info__rank__badge-placeholder:last-child {
  display: none;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__label {
  font: var(--xs-regular);
  color: rgba(255, 255, 255, 0.5019607843);
  margin-bottom: 2px;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__name {
  --text-color: linear-gradient(90deg, #93C5FD 0%, #60A5FA 100%);
  font: var(--xl-medium);
  background: var(--text-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  text-wrap: nowrap;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder--right .top-section__info__rank__badge-placeholder__badge {
  order: 2;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder--right .top-section__info__rank__badge-placeholder__content {
  order: 1;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder--right .top-section__info__rank__badge-placeholder__label,
[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder--right .top-section__info__rank__badge-placeholder__name {
  text-align: right;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__badge {
  --size: 60px;
  --backdrop-color: #60A5FA;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__badge::before {
  --blur: 144px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--backdrop-color);
  opacity: 0.8;
  width: 174px;
  height: 174px;
  filter: blur(var(--blur));
  -webkit-filter: blur(var(--blur));
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
}

[data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-page=leaderboard-v2] .top-section__info__rank__progress {
  flex: 1;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

[data-page=leaderboard-v2] .top-section__info__rank__progress__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--xs-regular);
  color: rgba(255, 255, 255, 0.5019607843);
  transform: translateY(-50%);
}

[data-page=leaderboard-v2] .top-section__info__rank__progress__label:last-child {
  transform: translateY(50%);
}

[data-page=leaderboard-v2] .top-section__info__rank__progress__label__value {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.8);
}

[data-page=leaderboard-v2] .top-section__info__rank__progress__bar {
  --progress: 34%;
  position: relative;
  width: 100%;
  height: 4px;
  background: #0F1013;
  border-radius: 9999px;
  transform-origin: center;
}

[data-page=leaderboard-v2] .top-section__info__rank__progress__bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--progress-color, linear-gradient(90deg, rgba(96, 165, 250, 0.3) 0%, #60A5FA 100%));
  border-radius: inherit;
  will-change: transform;
  transform: scaleX(var(--progress-percentage, var(--progress))) translate(0, -50%);
  transform-origin: left;
  transition: transform 0.3s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__info__rank__progress__bar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% - var(--progress-percentage, var(--progress)));
  transform: translate(0, -50%);
  width: 1px;
  height: 40px;
  border-left: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
}

[data-page=leaderboard-v2] .top-section__info__stats {
  position: relative;
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
}

[data-page=leaderboard-v2] .top-section__info__stats .block__inner {
  position: relative;
  overflow: hidden;
}

[data-page=leaderboard-v2] .top-section__info__stats .block__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 612px;
  height: 970px;
  background: url(/assets/backgrounds/leaderboards/bg-stats-f5b307212a03423326406f4d205a5c6dd05f087b4628b121b8b0c39288b0a2aa.png) no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

[data-page=leaderboard-v2] .top-section__info__stats__header {
  margin-bottom: 28px;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__label {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.5s var(--easeOutQuart);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--easeOutQuart);
  will-change: transform;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__label {
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__icon svg path {
  transition: stroke 0.5s var(--easeOutQuart), stroke-opacity 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period:hover .top-section__info__stats__header__period__icon svg path {
  stroke: #FFFFFF;
  stroke-opacity: 1;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period:hover .top-section__info__stats__header__period__label {
  color: #FFFFFF;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 4px;
  --padding-right: 4px;
  width: max-content !important;
  position: absolute !important;
  top: 100%;
  right: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s var(--easeOutQuart);
  will-change: opacity;
  pointer-events: none;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list .gradient-border_inner {
  width: max-content !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  -o-backdrop-filter: blur(10px);
  -ms-backdrop-filter: blur(10px);
  max-height: 96px;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list .gradient-border_inner::-webkit-scrollbar {
  width: 4px;
}
[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list .gradient-border_inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 100px;
}
[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list .gradient-border_inner::-webkit-scrollbar-track {
  background: transparent;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list__item {
  display: block;
  width: max-content;
  cursor: pointer;
  font: var(--xs-medium);
  padding: 8px 32px;
  border-radius: 8px;
  color: var(--text-color);
  text-decoration: none;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list__item a,
[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list__item span {
  color: var(--text-color);
  transition: color 0.5s var(--easeOutQuart);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  width: max-content;
  text-wrap: nowrap;
  text-decoration: none;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list__item[data-active=true] {
  --text-color: #ffffffe5;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period__dropdown-list__item:hover {
  --text-color: #ffffffe5;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period:hover .top-section__info__stats__header__period__dropdown-list {
  opacity: 1;
  pointer-events: auto;
}

[data-page=leaderboard-v2] .top-section__info__stats__header__period:hover .top-section__info__stats__header__period__icon {
  transform: rotate(180deg);
}

[data-page=leaderboard-v2] .top-section__info__stats__header__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  transition: color 0.5s var(--easeOutQuart);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__label {
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--easeOutQuart);
  will-change: transform;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__icon svg path {
  transition: stroke 0.5s var(--easeOutQuart), stroke-opacity 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker:hover .top-section__info__stats__exchange-picker__label {
  color: #FFFFFF;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker:hover .top-section__info__stats__exchange-picker__icon svg path {
  stroke: #FFFFFF;
  stroke-opacity: 1;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker:hover .top-section__info__stats__exchange-picker__icon {
  transform: rotate(180deg);
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__dropdown-list {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 4px;
  --padding-right: 4px;
  width: max-content !important;
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s var(--easeOutQuart);
  will-change: opacity;
  pointer-events: none;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__dropdown-list .gradient-border_inner {
  width: max-content !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker:hover .top-section__info__stats__exchange-picker__dropdown-list {
  opacity: 1;
  pointer-events: auto;
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__dropdown-list__item {
  display: block;
  width: max-content;
  cursor: pointer;
  font: var(--xs-medium);
  padding: 8px 32px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: 0;
  text-align: left;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__dropdown-list__item[data-active=true],
[data-page=leaderboard-v2] .top-section__info__stats__exchange-picker__dropdown-list__item:hover {
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__info__stats__content,
[data-page=leaderboard-v2] .top-section__info__stats__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

[data-page=leaderboard-v2] .top-section__info__stats__content__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

[data-page=leaderboard-v2] .top-section__info__stats__content__item__category {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
  margin-bottom: 16px;
  text-align: center;
}

[data-page=leaderboard-v2] .top-section__info__stats__content__item__value {
  font: var(--2x-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=leaderboard-v2] .top-section__info__stats__content__item__value__img {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=leaderboard-v2] .top-section__info__stats__content__item__value__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-page=leaderboard-v2] .top-section__info__stats__content__item__total {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=leaderboard-v2] .top-section__card {
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 0, 24, 0.06) 0%, rgba(255, 0, 24, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), linear-gradient(223.76deg, rgba(255, 0, 24, 0) 82.03%, rgba(255, 0, 24, 0.4) 100%), linear-gradient(136.24deg, rgba(255, 0, 24, 0) 82.03%, rgba(255, 0, 24, 0.4) 100%);
  grid-column: 10/13;
  height: 100%;
  width: 100%;
}

[data-page=leaderboard-v2] .top-section__card .block__inner.top-section__card__inner,
[data-page=leaderboard-v2] .top-section__card .block__inner__content.top-section__card__content {
  width: 100%;
  height: 100%;
}

[data-page=leaderboard-v2] .top-section__card .block__inner__content.top-section__card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__card .block__inner.top-section__card__inner {
  overflow: hidden;
}

[data-page=leaderboard-v2] .top-section__card .block__inner.top-section__card__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 465px;
  height: 365px;
  background: url(/assets/backgrounds/leaderboards/bg-starts-e515af95e090ca074e6d1682b491c68c78237b24bec3a0b02927ccf4352baeaa.png) no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

[data-page=leaderboard-v2] .top-section__card .block__inner__content.top-section__card__content {
  position: relative;
}

[data-page=leaderboard-v2] .top-section__card .block__inner__content.top-section__card__content::before {
  content: "";
  position: absolute;
  width: 296px;
  height: 296px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 17%);
  background-image: url(/assets/backgrounds/leaderboards/tournament-trophy-bd2d03fdd0a12e64f1a2059d57f116aa94f3fa847ddde555f5c280f3894552c2.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

[data-page=leaderboard-v2] .top-section__card__header,
[data-page=leaderboard-v2] .top-section__card__footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}

[data-page=leaderboard-v2] .top-section__card__header {
  align-items: flex-start;
}

[data-page=leaderboard-v2] .top-section__card__footer {
  align-items: flex-end;
}

[data-page=leaderboard-v2] .top-section__card__header__left__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

[data-page=leaderboard-v2] .top-section__card__header__left__title {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__card__header__right__button {
  --padding-left: 8px;
  --padding-right: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 48px;
  --border-color: linear-gradient(180deg, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.25) 100%);
  --background-color: linear-gradient(0deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.2)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=leaderboard-v2] .top-section__card__header__right__button,
[data-page=leaderboard-v2] .top-section__card__header__right__button .block__inner {
  width: max-content;
  height: auto;
}

[data-page=leaderboard-v2] .top-section__card__header__right__button .block__inner__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: max-content;
  height: auto;
}

[data-page=leaderboard-v2] .top-section__card__header__right__button__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A7F3D0;
  box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2);
  animation: pulse-live 2.5s infinite ease-in-out;
}

[data-page=leaderboard-v2] .top-section__card__header__right__button__text {
  font: var(--xs-medium);
  color: #A7F3D0;
  text-wrap: nowrap;
}

[data-page=leaderboard-v2] .top-section__card__footer__left__label {
  display: flex;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=leaderboard-v2] .top-section__card__footer__left__title {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 8px;
  --padding-right: 8px;
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
  margin-top: 14px;
  display: none;
}

[data-page=leaderboard-v2] .top-section__card[data-joined=true] .top-section__card__footer__left__rank {
  display: block;
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank,
[data-page=leaderboard-v2] .top-section__card__footer__left__rank .block__inner {
  width: max-content;
  height: auto;
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank .block__inner__content {
  width: max-content;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank__icon svg path {
  stroke: var(--color);
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank__number {
  font: var(--sm-medium);
  color: var(--color);
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank[data-rank=first] {
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank[data-rank=second] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(188, 188, 188, 0.12) 0%, rgba(188, 188, 188, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(188, 188, 188, 0.215686) 0%, rgba(188, 188, 188, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(188, 188, 188, 0.16), rgba(188, 188, 188, 0.16));
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank[data-rank=third] {
  --color: #DAA37D;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(218, 163, 125, 0.215686) 0%, rgba(218, 163, 125, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(218, 163, 125, 0.16), rgba(218, 163, 125, 0.16));
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank[data-rank=others] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  --background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link__label {
  font: var(--sm-medium);
  color: #fff;
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link:hover {
  opacity: 0.8;
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link:not([data-joined=true]) {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%);
  padding: 6px 12px;
  border-radius: 999px;
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link__label {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link:hover {
  opacity: 0.8;
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link[data-joined=true] {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__card__footer__right__link__label[data-joined=true] {
  font: var(--sm-medium);
  color: #fff;
}

[data-page=leaderboard-v2] .top-section__card[data-joined=true] .top-section__card__footer__right__link[data-joined=true] {
  display: flex;
}

[data-page=leaderboard-v2] .top-section__card:not([data-joined=true]) .top-section__card__footer__right__link:not([data-joined=true]) {
  display: flex;
}

[data-page=leaderboard-v2] .top-section__left {
  grid-column: 1/4;
  width: 100%;
  height: 100%;
  min-width: 296px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-section__left__total-rewards {
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
  --border-color: linear-gradient(0deg, rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0.04)),linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, rgba(16, 185, 129, 0) 74.04%),linear-gradient(223.76deg, rgba(16, 185, 129, 0) 82.03%, rgba(16, 185, 129, 0.4) 100%),linear-gradient(136.24deg, rgba(16, 185, 129, 0) 82.03%, rgba(16, 185, 129, 0.4) 100%);
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 100%);
}

.top-section__left__total-rewards .leaderboard-block__inner {
  width: 100%;
  height: 100%;
}

.top-section__left__total-rewards .leaderboard-block__inner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.top-section__left__total-rewards__label {
  margin-bottom: 8px;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

.top-section__left__total-rewards__value {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-section__left__total-rewards__value__icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.top-section__left__total-rewards__value__content {
  font: var(--xl-medium);
  color: #FFFFFF;
  font-weight: bold;
}

.top-section__left__total-rewards__countdown {
  font: var(--xs-medium);
  color: rgba(16, 185, 129, 0.8);
}

[data-page=leaderboard-v2] .top-section__middle {
  --padding-top: 24px;
  --padding-bottom: 0;
  --padding-left: 24px;
  --padding-right: 24px;
  grid-column: 4/10;
  width: 100%;
  height: 495px;
}

[data-page=leaderboard-v2] .top-section__middle .block__inner {
  width: 100%;
  height: 100%;
}

[data-page=leaderboard-v2] .top-section__middle .block__inner__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

[data-page=leaderboard-v2] .top-section__middle__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

[data-page=leaderboard-v2] .top-section__middle__header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=leaderboard-v2] .top-section__middle__header__countdown {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=leaderboard-v2] .top-section__middle__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-page=leaderboard-v2] .top-section__middle__tabs__item__link {
  padding: 6px 12px;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  display: block;
  width: max-content;
  height: auto;
  border-radius: 999px;
}

[data-page=leaderboard-v2] .top-section__middle__tabs__item__link--active {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__middle__content {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 24px;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-page=leaderboard-v2] .top-section__middle__content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-page=leaderboard-v2] .top-section__middle__content .block__inner__fade--top,
[data-page=leaderboard-v2] .top-section__middle__content .block__inner__fade--bottom {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: calc(100% - var(--padding-right));
  height: 64px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s var(--easeOutQuart);
  will-change: opacity;
}

[data-page=leaderboard-v2] .top-section__middle .block__inner__fade--top {
  background: linear-gradient(0deg, rgba(25, 25, 27, 0) 0%, #19191B 100%);
  bottom: auto;
  top: -1px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 10px;
  display: none;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-page=leaderboard-v2] .top-section__middle__content__items::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-page=leaderboard-v2] .top-section__middle--volume .top-section__middle__content__items[data-tab=volume] {
  display: block;
}

[data-page=leaderboard-v2] .top-section__middle--roi .top-section__middle__content__items[data-tab=roi] {
  display: block;
}

[data-page=leaderboard-v2] .top-section__middle--bitget .top-section__middle__content__items__item[data-exchange=coinw],
[data-page=leaderboard-v2] .top-section__middle--coinw .top-section__middle__content__items__item[data-exchange=bitget] {
  display: none;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  transition: color 0.5s var(--easeOutQuart);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__label {
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--easeOutQuart);
  will-change: transform;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__icon svg path {
  transition: stroke 0.5s var(--easeOutQuart), stroke-opacity 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker:hover .top-section__middle__exchange-picker__label {
  color: #FFFFFF;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker:hover .top-section__middle__exchange-picker__icon svg path {
  stroke: #FFFFFF;
  stroke-opacity: 1;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker:hover .top-section__middle__exchange-picker__icon {
  transform: rotate(180deg);
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__dropdown-list {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 4px;
  --padding-right: 4px;
  width: max-content !important;
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s var(--easeOutQuart);
  will-change: opacity;
  pointer-events: none;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__dropdown-list .gradient-border_inner {
  width: max-content !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker:hover .top-section__middle__exchange-picker__dropdown-list {
  opacity: 1;
  pointer-events: auto;
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__dropdown-list__item {
  display: block;
  width: max-content;
  cursor: pointer;
  font: var(--xs-medium);
  padding: 8px 32px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: 0;
  text-align: left;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=leaderboard-v2] .top-section__middle__exchange-picker__dropdown-list__item[data-active=true],
[data-page=leaderboard-v2] .top-section__middle__exchange-picker__dropdown-list__item:hover {
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item {
  padding: 16px 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item--me {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.4) 50.39%, rgba(255, 255, 255, 0.08) 100%);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left {
  display: flex;
  align-items: center;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__number-wrapper {
  width: 48px;
  margin-right: 8px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__number {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  width: max-content;
  min-width: 24px;
  max-width: 100%;
  height: 24px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item--me .top-section__middle__content__items__item__left__number {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.1019607843);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info {
  display: flex;
  align-items: center;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__id {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8);
  margin-right: 6px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__exchange {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__points {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__points--mobile {
  display: none;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__points--desktop {
  display: block;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  [data-page=leaderboard-v2] .top-section__middle__content__items__item--me .top-section__middle__content__items__item__right {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    justify-items: end;
  }
  [data-page=leaderboard-v2] .top-section__middle__content__items__item--me .top-section__middle__content__items__item__right__highlight {
    grid-column: 1;
    grid-row: 1;
    margin-right: 0;
  }
  [data-page=leaderboard-v2] .top-section__middle__content__items__item--me .top-section__middle__content__items__item__right__reward {
    grid-column: 1;
    grid-row: 2;
    margin-right: 0;
  }
  [data-page=leaderboard-v2] .top-section__middle__content__items__item--me .top-section__middle__content__items__item__right__icon {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
  }
}
[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__highlight {
  --padding-left: 8px;
  --padding-right: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 48px;
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  width: max-content !important;
  height: auto !important;
  margin-right: 8px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__highlight .block__inner__content {
  font: var(--xs-medium);
  color: #fff;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__reward {
  --padding-left: 8px;
  --padding-right: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 48px;
  --border-color: linear-gradient(180deg, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.25) 100%);
  --background-color: linear-gradient(0deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.2)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  width: max-content !important;
  height: auto !important;
  margin-right: 16px;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__reward .block__inner__content {
  font: var(--xs-medium);
  color: #A7F3D0;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__reward--ineligible {
  --border-color: linear-gradient(180deg, rgba(107, 114, 128, 0.5) 0%, rgba(107, 114, 128, 0.25) 100%);
  --background-color: linear-gradient(0deg, rgba(107, 114, 128, 0.2), rgba(107, 114, 128, 0.2)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__reward--ineligible .block__inner__content {
  color: #9CA3AF;
}

[data-page=leaderboard-v2] .leaderboard-reward-wrapper {
  position: relative;
  display: inline-block;
}

[data-page=leaderboard-v2] .leaderboard-reward-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  padding: 8px 12px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font: var(--xs-regular);
  width: max-content;
  max-width: 150px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-page=leaderboard-v2] .leaderboard-reward-wrapper:hover .leaderboard-reward-tooltip {
  opacity: 1;
  visibility: visible;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__icon {
  --color: #10B981;
  --rotate: 180deg;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: rotate(var(--rotate));
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item__right__icon svg path {
  stroke: var(--color);
  stroke-width: 1.5;
  stroke-opacity: 1;
}

[data-page=leaderboard-v2] .top-section__middle__content__items__item--down .top-section__middle__content__items__item__right__icon {
  --color: #F24949;
  --rotate: 0deg;
}

[data-page=leaderboard-v2] .top-section__right {
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
  grid-column: 10/13;
  width: 100%;
  height: 495px;
}

[data-page=leaderboard-v2] .top-section__right .block__inner {
  width: 100%;
  height: 100%;
}

[data-page=leaderboard-v2] .top-section__right .block__inner__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

[data-page=leaderboard-v2] .top-section__right::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  pointer-events: none;
  z-index: 1;
}

[data-page=leaderboard-v2] .top-section__right__header {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  margin-bottom: 24px;
}

[data-page=leaderboard-v2] .top-section__right__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

[data-page=leaderboard-v2] .top-section__right__tabs__item__link {
  padding: 6px 12px;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  display: block;
  width: max-content;
  height: auto;
  border-radius: 999px;
}

[data-page=leaderboard-v2] .top-section__right__tabs__item__link--active {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=leaderboard-v2] .top-section__right__content {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-page=leaderboard-v2] .top-section__right__content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-page=leaderboard-v2] .top-section__right__content__items {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  display: none;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

[data-page=leaderboard-v2] .top-section__right__content__items::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-page=leaderboard-v2] .top-section__right--upcoming .top-section__right__content__items[data-tab=upcoming] {
  display: block;
}

[data-page=leaderboard-v2] .top-section__right--past .top-section__right__content__items[data-tab=past] {
  display: block;
}

[data-page=leaderboard-v2] .top-section__right__content__items__item {
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=leaderboard-v2] .top-section__right__content__items__item--active {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.4) 50.39%, rgba(255, 255, 255, 0.08) 100%);
}

[data-page=leaderboard-v2] .top-section__right__content__items__item:hover {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.4) 50.39%, rgba(255, 255, 255, 0.08) 100%);
}

[data-page=leaderboard-v2] .top-section__right__content__items__item__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-page=leaderboard-v2] .top-section__right__content__items__item__header__title {
  font: var(--sm-medium);
  color: #E4E4E7;
}

[data-page=leaderboard-v2] .top-section__right__content__items__item__header__status {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=leaderboard-v2] .top-section__right__content__items__item__header__status--live {
  color: #A7F3D0;
}

[data-page=leaderboard-v2] .top-section__right__content__items__item__description {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.6);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

@media (max-width: 768px) {
  [data-page=leaderboard-v2] section.container {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 16px;
  }
  [data-page=leaderboard-v2] section.container .inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  [data-page=leaderboard-v2] section.container .inner > div {
    width: 100%;
    max-width: 100%;
  }
  [data-page=leaderboard-v2] .top-section__card .block__inner__content.top-section__card__content {
    gap: 16px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank {
    --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), conic-gradient(from 180deg at 50% 80%, rgba(96, 165, 250, 0) 45deg, color-mix(in srgb, var(--current-color) 100%, transparent) 80deg, color-mix(in srgb, var(--current-color) 5%, transparent) 120deg, color-mix(in srgb, var(--next-color) 5%, transparent) 230deg, color-mix(in srgb, var(--next-color) 100%, transparent) 270deg, rgba(167, 139, 250, 0) 315deg);
  }
  [data-page=leaderboard-v2] .top-section__info__rank .block__inner__content {
    flex-direction: column;
    gap: 32px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__header--mobile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__header--mobile .top-section__info__rank__badge-placeholder {
    display: flex !important;
    gap: 6px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder--desktop {
    display: none;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__progress {
    width: 100%;
    height: 68px;
    gap: 16px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__progress__label {
    transform: translateY(0) !important;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__progress__bar::after {
    height: 32px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__badge::before {
    --blur: 83.3334px;
    width: 117px;
    height: 117px;
  }
  [data-page=leaderboard-v2] .top-section__middle__header {
    flex-wrap: wrap;
  }
  [data-page=leaderboard-v2] .top-section__middle__header__left {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }
  [data-page=leaderboard-v2] .top-section__middle__exchange-picker {
    width: 100%;
  }
  [data-page=leaderboard-v2] .top-section__middle__header__countdown {
    width: 100%;
    margin-top: 8px;
  }
  [data-page=leaderboard-v2] .top-section__info__stats .block__inner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 364px;
    background: url(/assets/backgrounds/leaderboards/bg-stats-mobile-6ac48be085ccf30a0bdc981ae1b2e56f17d1e1b3d4a0638012e5770507a2a90a.png) no-repeat center center;
    background-size: contain;
    pointer-events: none;
  }
  [data-page=leaderboard-v2] .top-section__info__stats__content {
    --columns: 2;
    --column-gap: 40px;
    --row-gap: 32px;
    gap: var(--row-gap);
    flex-wrap: wrap;
    justify-content: space-between;
  }
  [data-page=leaderboard-v2] .top-section__info__stats__content__item {
    width: calc(100% / var(--columns) - var(--column-gap));
  }
  [data-page=leaderboard-v2] .top-section__info__stats__content__item__category {
    text-align: center;
  }
  [data-page=leaderboard-v2] .top-section__info__stats__content__item__value {
    margin-bottom: 4px;
  }
  [data-page=leaderboard-v2] .top-section__card {
    height: 250px;
  }
  [data-page=leaderboard-v2] .top-section__card__header__left__title {
    max-width: 126px;
  }
  [data-page=leaderboard-v2] .top-section__card .block__inner__content.top-section__card__content::before {
    width: 388px;
    height: 248px;
    background-size: contain;
    left: auto;
    right: 0;
    transform: translate(44px, 24px);
    background-image: url(/assets/backgrounds/leaderboards/tournament-trophy-bd2d03fdd0a12e64f1a2059d57f116aa94f3fa847ddde555f5c280f3894552c2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
  [data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  [data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__points--mobile {
    display: block;
  }
  [data-page=leaderboard-v2] .top-section__middle__content__items__item__left__info__points--desktop {
    display: none;
  }
  [data-page=leaderboard-v2] .top-section__info__rank {
    --padding-top: 24px;
    --padding-bottom: 24px;
    --padding-left: 16px;
    --padding-right: 16px;
    height: 158px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank .block__inner {
    height: 100%;
  }
  [data-page=leaderboard-v2] .top-section__info__rank .block__inner__content {
    height: 100%;
    gap: 10px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder {
    align-items: center;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__name {
    font: var(--sm-medium);
  }
  [data-page=leaderboard-v2] .top-section__info__rank__badge-placeholder__badge {
    --size: 40px;
  }
  [data-page=leaderboard-v2] .top-section__right__header {
    margin-bottom: 0;
  }
  [data-page=leaderboard-v2] .top-section__right__header-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  [data-page=leaderboard-v2] .top-section__right__header {
    font: var(--base-medium);
    width: 101px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank {
    order: 1;
  }
  [data-page=leaderboard-v2] .top-section__info__stats {
    order: 2;
  }
  [data-page=leaderboard-v2] .top-section__left {
    order: 3;
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
  }
  [data-page=leaderboard-v2] .top-section__middle {
    order: 4;
  }
  [data-page=leaderboard-v2] .top-section__card {
    order: 5;
  }
  [data-page=leaderboard-v2] .top-section__right {
    order: 6;
  }
}
/* Rank pill styling for leaderboard page - matching tournaments page */
[data-page=leaderboard-v2] .rank[data-rank=first] {
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
}

[data-page=leaderboard-v2] .rank[data-rank=second] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(188, 188, 188, 0.12) 0%, rgba(188, 188, 188, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(188, 188, 188, 0.215686) 0%, rgba(188, 188, 188, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(188, 188, 188, 0.16), rgba(188, 188, 188, 0.16));
}

[data-page=leaderboard-v2] .rank[data-rank=third] {
  --color: #DAA37D;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(218, 163, 125, 0.215686) 0%, rgba(218, 163, 125, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(218, 163, 125, 0.16), rgba(218, 163, 125, 0.16));
}

[data-page=leaderboard-v2] .rank[data-rank=others] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  --background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

[data-page=leaderboard-v2] .top-section__card__footer__left__rank__number {
  font: var(--sm-medium);
  color: var(--color);
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank::before {
  content: "";
  width: 496px;
  height: 160px;
  position: absolute;
  left: 212px;
  top: -26px;
  border-radius: 496px;
  background: conic-gradient(from 176deg at 50% 50%, rgba(255, 255, 255, 0.32) 0.24847714deg, rgba(0, 0, 0, 0.32) 50.625deg, rgba(0, 0, 0, 0.32) 51.9653213024deg, rgba(255, 255, 255, 0.32) 88.1250017881deg, rgba(0, 0, 0, 0.32) 142.5000035763deg, rgba(255, 255, 255, 0.32) 196.875deg, rgba(0, 0, 0, 0.32) 256.8750071526deg, rgba(255, 255, 255, 0.32) 299.9999928474deg, rgba(0, 0, 0, 0.32) 335.2022695541deg, rgba(0, 0, 0, 0.32) 335.3416156769deg), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), radial-gradient(96.05% 96.05% at 36.64% 4.89%, rgba(42, 208, 202, 0.32) 0%, rgba(225, 246, 100, 0.32) 22.92%, rgba(254, 176, 254, 0.32) 46.88%, rgba(171, 179, 252, 0.32) 68.23%, rgba(93, 247, 164, 0.32) 87.5%, rgba(88, 196, 246, 0.32) 100%);
  background-blend-mode: difference, normal, normal;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank__badge {
  --size: 60px;
  --backdrop-color: #60A5FA;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank__badge::before {
  --blur: 144px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--backdrop-color);
  opacity: 0.8;
  width: 174px;
  height: 174px;
  filter: blur(var(--blur));
  -webkit-filter: blur(var(--blur));
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank__label {
  font-family: "Open Runde";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.5);
}

[data-page=leaderboard-v2] .top-section__info__rank__max-rank__name {
  font-family: "Open Runde";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: nowrap;
}

@media (max-width: 768px) {
  [data-page=leaderboard-v2] .top-section__info__rank__max-rank {
    gap: 12px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__max-rank__badge {
    --size: 60px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__max-rank__badge::before {
    --blur: 83.3334px;
    width: 117px;
    height: 117px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__max-rank::before {
    width: 246px;
    height: 112px;
    left: 53px;
    top: 8px;
    border-radius: 246px;
    filter: blur(32px);
  }
  [data-page=leaderboard-v2] .top-section__info__rank[data-max-rank=true] .block__inner::after {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 28px, rgba(0, 0, 0, 0) 70px), linear-gradient(270deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 28px, rgba(0, 0, 0, 0) 70px), url(/assets/backgrounds/leaderboards/leaderboard-mobile-d889e3e3b01bf8e74fa7c17e1089487f056b1941370339e71500de24505b0da6.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left center, right center, calc(50% + 0px) bottom;
    background-size: 70px 100%, 70px 100%, 100% 126px;
    height: 126px;
  }
  [data-page=leaderboard-v2] .top-section__info__rank__max-rank__name {
    font: var(--xl-medium);
  }
}
.leaderboard-info-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.leaderboard-info-icon:hover {
  opacity: 1;
}

.leaderboard-info-icon img {
  width: 16px;
  height: 16px;
}

.leaderboard-info-popover__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.leaderboard-info-popover__top .close {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.leaderboard-info-popover__top .close > img {
  width: 24px;
  height: 24px;
}

.leaderboard-info-popover__top .close > button {
  transition: opacity 0.4s var(--easeInOutQuart);
  opacity: 1;
}

.leaderboard-info-popover__top .close > button:hover {
  opacity: 0.7;
}

.leaderboard-info-popover__top .close > button svg {
  fill: white;
  width: 16px;
  height: 16px;
}

.leaderboard-info-popover__top h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.leaderboard-info-popover__top p {
  font: var(--paragraph-regular);
  background: var(--white-40);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-section__left__top-traders.leaderboard-block {
  --padding-top: 24px;
  --padding-bottom: 0;
  --padding-left: 24px;
  --padding-right: 24px;
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), linear-gradient(223.76deg, rgba(255, 255, 255, 0) 82.03%, rgba(255, 255, 255, 0.4) 100%), linear-gradient(136.24deg, rgba(218, 163, 125, 0) 82.03%, rgba(218, 163, 125, 0.4) 100%);
  height: 343px;
}

.top-section__left__top-traders--random-winners {
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), linear-gradient(223.76deg, rgba(16, 185, 129, 0) 82.03%, rgba(16, 185, 129, 0.4) 100%), linear-gradient(136.24deg, rgba(16, 185, 129, 0) 82.03%, rgba(16, 185, 129, 0.4) 100%);
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  overflow: hidden;
}

.top-section__left__top-traders--random-winners::after {
  --blur: 40px;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 80%);
  width: 480px;
  height: 140px;
  opacity: 0.16;
  border-radius: 50%;
  background: #10B981;
  filter: blur(var(--blur));
  -webkit-filter: blur(var(--blur));
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  pointer-events: none;
}

.top-section__left__top-traders .leaderboard-block__inner,
.top-section__left__top-traders .leaderboard-block__inner__content {
  width: 100%;
  height: 100%;
}

.top-section__left__top-traders__fake-background {
  overflow: hidden;
}

.top-section__left__top-traders__header {
  width: 100%;
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.top-section__left__top-traders__header__title {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

.top-section__left__top-traders__header__countdown {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

.top-section__left__top-traders__header__period,
.top-section__info__stats__header__period {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.5s var(--easeOutQuart);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}

.top-section__left__top-traders__header__period__icon,
.top-section__info__stats__header__period__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--easeOutQuart);
  will-change: transform;
}

.top-section__left__top-traders__header__period__label,
.top-section__info__stats__header__period__label {
  transition: color 0.5s var(--easeOutQuart);
}

.top-section__left__top-traders__header__period__icon svg path,
.top-section__info__stats__header__period__icon svg path {
  transition: stroke 0.5s var(--easeOutQuart), stroke-opacity 0.5s var(--easeOutQuart);
}

.top-section__left__top-traders__header__period:hover .top-section__left__top-traders__header__period__icon svg path,
.top-section__info__stats__header__period:hover .top-section__info__stats__header__period__icon svg path {
  stroke: #FFFFFF;
  stroke-opacity: 1;
}

.top-section__left__top-traders__header__period:hover .top-section__left__top-traders__header__period__label,
.top-section__info__stats__header__period:hover .top-section__info__stats__header__period__label {
  color: #FFFFFF;
}

.top-section__left__top-traders__header__period__dropdown-list,
.top-section__info__stats__header__period__dropdown-list {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 4px;
  --padding-right: 4px;
  width: max-content !important;
  position: absolute !important;
  top: 100%;
  right: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s var(--easeOutQuart);
  will-change: opacity;
  pointer-events: none;
}

.top-section__left__top-traders__header__period__dropdown-list .gradient-border_inner,
.top-section__info__stats__header__period__dropdown-list .gradient-border_inner {
  width: max-content !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  -o-backdrop-filter: blur(10px);
  -ms-backdrop-filter: blur(10px);
  max-height: 96px;
  overflow: hidden auto;
}

.top-section__left__top-traders__header__period__dropdown-list__item,
.top-section__info__stats__header__period__dropdown-list__item {
  display: block;
  width: max-content;
  cursor: pointer;
  font: var(--xs-medium);
  padding: 8px 32px;
  border-radius: 8px;
  color: var(--text-color);
  text-decoration: none;
}

.top-section__left__top-traders__header__period__dropdown-list__item a,
.top-section__info__stats__header__period__dropdown-list__item a,
.top-section__left__top-traders__header__period__dropdown-list__item span,
.top-section__info__stats__header__period__dropdown-list__item span {
  color: var(--text-color);
  transition: color 0.5s var(--easeOutQuart);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  width: max-content;
  text-wrap: nowrap;
  text-decoration: none;
}

.top-section__left__top-traders__header__period__dropdown-list__item[data-active=true],
.top-section__info__stats__header__period__dropdown-list__item[data-active=true] {
  --text-color: #ffffffe5;
}

.top-section__left__top-traders__header__period__dropdown-list__item:hover,
.top-section__info__stats__header__period__dropdown-list__item:hover {
  --text-color: #ffffffe5;
}

.top-section__left__top-traders__header__period:hover .top-section__left__top-traders__header__period__dropdown-list,
.top-section__info__stats__header__period:hover .top-section__info__stats__header__period__dropdown-list {
  opacity: 1;
  pointer-events: auto;
}

.top-section__left__top-traders__header__period:hover .top-section__left__top-traders__header__period__icon,
.top-section__info__stats__header__period:hover .top-section__info__stats__header__period__icon {
  transform: rotate(180deg);
}

.top-section__left__top-traders__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.top-section__left__top-traders:not(.top-section__left__top-traders--top-traders) .top-section__left__top-traders__tabs {
  padding-bottom: 16px;
}

.top-section__left__top-traders__tabs__item__link {
  padding: 6px 12px;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  display: block;
  width: max-content;
  height: auto;
  border-radius: 999px;
}

.top-section__left__top-traders:not(.top-section__left__top-traders--random-winners) .top-section__left__top-traders__tabs__item__link[data-tab=top-traders],
.top-section__left__top-traders--random-winners .top-section__left__top-traders__tabs__item__link[data-tab=random-winners] {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8980392157);
}

.top-section__left__top-traders__content[data-tab=random-winners] {
  flex: 1;
  width: 100%;
  display: none;
  position: relative;
}

.top-section__left__top-traders__content[data-tab=random-winners] .leaderboard-block__inner__fade--top {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 32px;
  background: linear-gradient(0deg, rgba(22, 22, 24, 0) 0%, #161618 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s var(--easeOutQuart);
  will-change: opacity;
}

.top-section__left__top-traders__content {
  display: none;
}

.top-section__left__top-traders--random-winners .top-section__left__top-traders__content[data-tab=random-winners] {
  display: block;
}

.top-section__left__top-traders--top-traders .top-section__left__top-traders__content[data-tab=top-traders] {
  display: flex;
}

.top-section__left__top-traders--random-winners .top-section__left__top-traders__header[data-tab=random-winners] {
  display: flex;
}

.top-section__left__top-traders--top-traders .top-section__left__top-traders__header[data-tab=top-traders] {
  display: flex;
}

.top-section__left__top-traders__content__items {
  max-height: 221px;
  overflow: hidden;
  overflow-y: auto;
  padding-right: calc(var(--padding-right) / 2);
  padding-bottom: 10px;
}

.top-section__left__top-traders__content__items__item {
  padding: 12px 0;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}
.top-section__left__top-traders__content__items__item:first-child {
  margin-top: 8px;
}

.top-section__left__top-traders__content__items__item--me {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.4) 50.39%, rgba(255, 255, 255, 0.08) 100%);
}

.top-section__left__top-traders__content__items__item__left {
  display: flex;
  align-items: center;
}

.top-section__left__top-traders__content__items__item__left__number-wrapper {
  width: 48px;
  margin-right: 8px;
}

.top-section__left__top-traders__content__items__item__left__number {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  width: max-content;
  min-width: 24px;
  max-width: 100%;
  height: 24px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
}

.top-section__left__top-traders__content__items__item--me .top-section__left__top-traders__content__items__item__left__number {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.1019607843);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

.top-section__left__top-traders__content__items__item__left__info {
  display: flex;
  align-items: center;
}

.top-section__left__top-traders__content__items__item__left__info__rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.top-section__left__top-traders__content__items__item__left__info__id {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8);
  margin-right: 6px;
}

.top-section__left__top-traders__content__items__item__left__info__exchange {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.top-section__left__top-traders__content__items__item__left__info__points {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.6);
}

.top-section__left__top-traders__content__items__item__left__info__points--mobile {
  display: none;
}

.top-section__left__top-traders__content__items__item__left__info__points--desktop {
  display: block;
}

.top-section__left__top-traders__content__items__item__right {
  display: flex;
  align-items: center;
}

.top-section__left__top-traders__content__items__item__right__highlight {
  --padding-left: 8px;
  --padding-right: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 48px;
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  width: max-content !important;
  height: auto !important;
  margin-right: 8px;
}

.top-section__left__top-traders__content__items__item__right__highlight .leaderboard-block__inner__content {
  font: var(--xs-medium);
  color: #fff;
}

.top-section__left__top-traders__content__items__item__right__reward {
  --padding-left: 8px;
  --padding-right: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 48px;
  --border-color: linear-gradient(180deg, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.25) 100%);
  --background-color: linear-gradient(0deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.2)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  width: max-content !important;
  height: auto !important;
}

.top-section__left__top-traders__content__items__item__right__reward .leaderboard-block__inner__content {
  font: var(--xs-medium);
  color: #A7F3D0;
}

.top-section__left__top-traders__content[data-tab=top-traders] {
  width: 100%;
  height: 303px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.top-section__left__top-traders__content__col {
  --text-color: #FFFFFF99;
  --top-offset: 16px;
  --badge-size: 42px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--top-offset);
}

.top-section__left__top-traders__content__col__head {
  width: 100%;
  height: 20px;
}

.top-section__left__top-traders__content__col__badge {
  width: var(--badge-size);
  height: var(--badge-size);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 8px;
}

.top-section__left__top-traders__content__col__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-section__left__top-traders__content__col__exchange {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 6px;
}

.top-section__left__top-traders__content__col__exchange img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-section__left__top-traders__content__col__column.leaderboard-block {
  --padding-top: 8px;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --border-radius: 13px;
  --background-color: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.4) 50.25%, rgba(255, 255, 255, 0.08) 100.5%);
  width: 100%;
  flex: 1;
  font: var(--sm-medium);
  color: var(--text-color);
  text-align: center;
}

.top-section__left__top-traders__content__col--first {
  --text-color: #ECD680;
  --top-offset: 0;
  --badge-size: 48px;
}

.top-section__left__top-traders__content__col--first .top-section__left__top-traders__content__col__column {
  --background-color: linear-gradient(180deg, rgba(236, 214, 128, 0.32) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(90deg, rgba(236, 214, 128, 0.2) 0.5%, #ECD680 51.98%, rgba(236, 214, 128, 0.2) 99.5%);
}

.top-section__left__top-traders__content__col--third {
  --text-color: #DAA37D;
  --top-offset: 32px;
  --badge-size: 36px;
}

.top-section__left__top-traders__content__col--third .top-section__left__top-traders__content__col__column {
  --background-color: linear-gradient(180deg, rgba(218, 163, 125, 0.32) 0%, rgba(218, 163, 125, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(90deg, rgba(218, 163, 125, 0.2) 0.5%, #DAA37D 51.98%, rgba(218, 163, 125, 0.2) 99.5%);
}

.top-section__left__top-traders__blur-circle {
  --blur: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(var(--blur));
  -webkit-filter: blur(var(--blur));
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  opacity: 0.16;
  display: none;
}

.top-section__left__top-traders:not(.top-section__left__top-traders--random-winners) .top-section__left__top-traders__blur-circle {
  display: block;
}

.top-section__left__top-traders__blur-circle:nth-child(1) {
  left: 0;
  transform: translateX(-50%) translateY(50%);
  background: #fff;
}

.top-section__left__top-traders__blur-circle:nth-child(2) {
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  background: #ECD680;
}

.top-section__left__top-traders__blur-circle:nth-child(3) {
  left: auto;
  right: 0;
  transform: translateX(50%) translateY(50%);
  background: #DAA37D;
}

/* Reward Badge Component */
.reward-badge {
  display: block;
  width: max-content;
  height: auto;
  padding: 1px;
  margin: 0 auto 16px;
  background-image: linear-gradient(rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.25) 100%);
  border-radius: 48px;
  position: relative;
}

.reward-badge::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 48px;
  inset: 1px;
}

.reward-badge__inner {
  display: block;
  padding: 3.14px 6.37px;
  background-color: rgb(15, 15, 17);
  border-radius: 47px;
  position: relative;
}

.reward-badge__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 47px;
  background: linear-gradient(rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

.reward-badge__text {
  font: 500 12px/16px "Open Runde", sans-serif;
  color: #A7F3D0;
  display: block;
}

.top-traders-user-id {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 8px;
}

.top-traders-exchange-logo {
  width: 14px;
  height: 14px;
  object-fit: cover;
  display: block;
}

.top-traders-exchange-container {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 6px;
}

.top-traders-exchange-inline {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

@media (max-width: 768px) {
  .top-section__left__top-traders {
    margin-bottom: 0;
  }
}
#tournaments-page {
  width: 100%;
}

#tournaments-page .tournaments-wrapper {
  max-width: 608px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: auto;
  padding: 24px 20px 40px;
}
@media (min-width: 64em) {
  #tournaments-page .tournaments-wrapper {
    padding: 24px 0 40px;
  }
}

#tournaments-page .tournaments-wrapper .inner > a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white-40);
  font: var(--small-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly {
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
  --border-radius: 16px;
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%),
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  overflow: hidden;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: -1 !important;
  border-radius: var(--border-radius) !important;
  background: hsla(0, 0%, 100%, 0.12) !important;
  pointer-events: none !important;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly__inner__content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-image {
  position: absolute;
  bottom: 0;
  width: fit-content;
  pointer-events: none;
  height: 100%;
  right: -40px;
}
@media (min-width: 64em) {
  #tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-image {
    right: 0;
  }
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly_bg {
  background: url(/assets/icons/bg-tournaments-7360cba7d713e66ded224b7b6e5b636bcfbafdcc7bff96beae3867dcd858d2b8.svg);
  opacity: 0.4;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left {
  display: flex;
  align-items: center;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left .contents {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left .weekly {
  position: relative;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left .weekly > span {
  color: var(--white-80);
  font: var(--small-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left .weekly ::after {
  content: "";
  width: 1px;
  height: 14px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.2);
  margin: 0 8px;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left .week > img {
  width: 16px;
  height: 16px;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .tournaments-weekly-top-left .week > span {
  color: var(--white-50);
  font: var(--small-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .live {
  width: max-content;
  display: flex;
  padding: 4px 8px 4px 9px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 48px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(16, 185, 129, 0.2);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .live .circle {
  width: 6px;
  height: 6px;
  border-radius: 40px;
  background: #a7f3d0;
  box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2);
  animation: pulse-live 2.5s infinite ease-in-out;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top .live > span {
  color: #a7f3d0;
  font: var(--paragraph-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 340px;
  position: relative;
  z-index: 1;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents > h6 {
  font: var(--2x-medium);
  letter-spacing: -1px;
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents > p {
  color: var(--white-40);
  font: var(--paragraph-regular);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents > p > a {
  font: var(--small-medium);
  color: var(--white-80);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents .tournaments-weekly-contents-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents .tournaments-weekly-contents-bottom .enroll {
  width: max-content;
  display: flex;
  padding: 6px 12px 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents .tournaments-weekly-contents-bottom .enroll > img {
  width: 16px;
  height: 16px;
}

#tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents .tournaments-weekly-contents-bottom .enroll > span {
  font: var(--small-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard {
  margin-top: -8px;
  width: 100%;
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  position: relative;
  overflow: hidden;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard::after {
  content: "";
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  height: 64px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-title > h6 {
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: var(--body-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-title > span {
  color: var(--white-50);
  font: var(--small-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank {
  padding: 16px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: 0.5s var(--easeOutQuart);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.active {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.4) 50.39%, rgba(255, 255, 255, 0.08) 100%);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank:last-child {
  border-bottom: none;
  border-image-slice: none;
  border-image-source: none;
  transition: border-image-source 0.5s var(--easeOutQuart);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user {
  display: flex;
  align-items: center;
  gap: 32px;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .idx {
  width: 24px;
  height: 24px;
  padding: 4px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 48px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.04);
  color: var(--white-60);
  font: var(--paragraph-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .idx.topone {
  border: 1px solid rgba(236, 214, 128, 0.22);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%), rgba(236, 214, 128, 0.16);
  color: #ecd680;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .idx.toptow {
  border-radius: 48px;
  border: 1px solid rgba(188, 188, 188, 0.22);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(188, 188, 188, 0.12) 0%, rgba(188, 188, 188, 0) 100%), rgba(188, 188, 188, 0.16);
  color: #bcbcbc;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .idx.topthree {
  border: 1px solid rgba(218, 163, 125, 0.22);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%), rgba(218, 163, 125, 0.16);
  color: #daa37d;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .address {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .address .address-badges {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .address > p {
  color: var(--white-80);
  font: var(--small-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank .tournaments-leaderboard-list-rank_user .address .address-logo {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  margin-left: -2px;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank_detail {
  display: flex;
  align-items: center;
  gap: 16px;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank_detail .current-name {
  display: none;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.16);
  color: var(--white);
  font: var(--paragraph-medium);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.active .tournaments-leaderboard-list-rank_detail .current-name {
  display: flex;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.rank-up .tournaments-leaderboard-list-rank_detail svg {
  transform: rotate(0deg);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.rank-down .tournaments-leaderboard-list-rank_detail svg {
  transform: rotate(180deg);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.rank-down .tournaments-leaderboard-list-rank_detail svg path {
  stroke: #F24949;
}

@media (max-width: 63.99375em) {
  #tournaments-page .tournaments-wrapper .tournaments-weekly {
    gap: 24px;
  }
  #tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-top {
    flex-direction: column;
    gap: 16px;
  }
  #tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents {
    width: 100%;
  }
  #tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents > h6 {
    font: var(--xl-medium);
  }
  #tournaments-page .tournaments-wrapper .tournaments-weekly .tournaments-weekly-contents > p > a {
    display: block;
  }
}
[data-page=tournaments] .block {
  --border-width: 1px;
  --border-radius: 16px;
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, #0F0F11, #0F0F11);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-left: 16px;
  --padding-right: 16px;
  --background: #0f0f11;
  position: relative;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
}

[data-page=tournaments] .block--free-bg {
  --background: transparent;
}

[data-page=tournaments] .block::before,
[data-page=tournaments] .block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - var(--border-width));
  background: var(--background-color);
  z-index: 0;
  pointer-events: none;
}

[data-page=tournaments] .block::before {
  inset: 1px;
  background: rgba(15, 15, 17, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
}

[data-page=tournaments] .block__inner {
  position: relative;
  background: var(--background);
  border-radius: var(--inner-border-radius);
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

[data-page=tournaments] .block__inner__content {
  width: 100%;
}

[data-page=tournaments] .rank {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 8px;
  --padding-right: 8px;
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
}

[data-page=tournaments] .tournaments-weekly[data-joined=true] .rank {
  display: block;
}

[data-page=tournaments] .rank,
[data-page=tournaments] .rank .block__inner {
  width: max-content;
  height: auto;
}

[data-page=tournaments] .rank .block__inner__content {
  width: max-content;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[data-page=tournaments] .rank__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=tournaments] .rank__icon svg path {
  stroke: var(--color);
}

[data-page=tournaments] .rank__number {
  font: var(--sm-medium);
  color: var(--color);
}

[data-page=tournaments] .rank[data-rank=first] {
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
}

[data-page=tournaments] .rank[data-rank=second] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(188, 188, 188, 0.12) 0%, rgba(188, 188, 188, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(188, 188, 188, 0.215686) 0%, rgba(188, 188, 188, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(188, 188, 188, 0.16), rgba(188, 188, 188, 0.16));
}

[data-page=tournaments] .rank[data-rank=third] {
  --color: #DAA37D;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(218, 163, 125, 0.215686) 0%, rgba(218, 163, 125, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(218, 163, 125, 0.16), rgba(218, 163, 125, 0.16));
}

[data-page=tournaments] .rank[data-rank=others] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  --background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

[data-page=tournaments] .tournaments-weekly[data-joined=true] .enroll {
  opacity: 0.4;
}

[data-page=tournaments] .tournaments-weekly:not([data-joined=true]) .enroll {
  padding: 6px 12px !important;
}

[data-page=tournaments] .tournaments-weekly-contents-bottom {
  display: none !important;
}

[data-page=tournaments] .tournaments-weekly[data-joined=true] .tournaments-weekly-contents-bottom[data-joined=true] {
  display: flex !important;
}

[data-page=tournaments] .tournaments-weekly:not([data-joined=true]) .tournaments-weekly-contents-bottom[data-joined=false] {
  display: flex !important;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.winner {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%), rgba(236, 214, 128, 0.04);
  border: 1px solid rgba(236, 214, 128, 0.2);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.winner .idx.winner-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(236, 214, 128, 0.16);
  border: 1px solid rgba(236, 214, 128, 0.3);
  color: #ECD680;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.winner .winner-trophy {
  filter: brightness(0) saturate(100%) invert(78%) sepia(32%) saturate(475%) hue-rotate(354deg) brightness(96%) contrast(89%);
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-list .tournaments-leaderboard-list-rank.winner .winner-label {
  padding: 4px 12px;
  background: rgba(236, 214, 128, 0.16);
  border: 1px solid rgba(236, 214, 128, 0.3);
  border-radius: 24px;
  color: #ECD680;
  font: var(--xs-medium);
  text-transform: uppercase;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
  text-align: center;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-waiting .waiting-icon {
  opacity: 0.4;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tournaments-leaderboard-waiting p {
  color: rgba(255, 255, 255, 0.6);
  font: var(--base-regular);
  margin: 0;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard turbo-frame {
  display: block;
  width: 100%;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tabs--prev-next {
  position: relative;
  z-index: 2;
  padding: 16px 0;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tabs--prev-next a:first-child button span,
#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tabs--prev-next > a:first-child button span {
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tabs--prev-next a:first-child button img,
#tournaments-page .tournaments-wrapper .tournaments-leaderboard .tabs--prev-next > a:first-child button img {
  opacity: 1 !important;
}

[data-page=calendar] main {
  padding-top: 24px;
  padding-bottom: 40px;
  width: 100%;
}

[data-page=calendar] .calender__inner {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0F0F11 !important;
  overflow: visible;
}

[data-page=calendar] .calender__inner .calender__left {
  background: rgba(255, 255, 255, 0.02);
  padding-top: 24px;
  padding-bottom: 24px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  overflow: hidden;
}

[data-page=calendar] .calender__left__bottom {
  padding-left: 24px;
  padding-right: 24px;
}

[data-page=calendar] .calender__inner .calender__left .calender__left__day {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  position: relative;
  min-height: 40px;
  /* 142.857% */
}

[data-page=calendar] .calender__inner .calender__left .calender__left_cards {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-page=calendar] .calender__inner .calender__left .calender__left_cards .calender__left_cards__card {
  display: flex;
  padding: 8px 8px 8px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: 0px 12px 12px 0px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.2s ease;
}
[data-page=calendar] .calender__inner .calender__left .calender__left_cards .calender__left_cards__card:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--lightBlue {
  border-left: 1px solid #60A5FA;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--darkBlue {
  border-left: 1px solid #1F447F;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--pink {
  border-left: 1px solid #a855f7;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--red {
  border-left: 1px solid #DD3D3D;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--orange {
  border-left: 1px solid #F97315;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--grey {
  border-left: 1px solid #4D4D4D;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--green {
  border-left: 1px solid #21AA54;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--yellow {
  border-left: 1px solid #FDDE42;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--purple {
  border-left: 1px solid #46045A;
}

[data-page=calendar] .calender__left_cards__card.calender__left_cards__card--white {
  border-left: 1px solid #FFFFFF;
}

[data-page=calendar] .calender__left_cards__card__top {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .calender__left_cards__card__bottom {
  color: #e4e4e7;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  /* 133.333% */
}

[data-page=calendar] .calender__right {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0f0f11;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

[data-page=calendar] .calender__right__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 24px;
}

[data-page=calendar] .calender__right__top .calender__right__top__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=calendar] .calender__right .calender__right__top .calender__right__top__title {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
}

[data-page=calendar] .calender__right .calender__right__top__actions__today {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-family: var(--font-base);
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition-duration: 0.4s;
}

[data-page=calendar] .calender__right__top__actions__today:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=calendar] .calender__right .calender__right__top__actions__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 24px;
  margin-right: 16px;
}

[data-page=calendar] .calender__right .calender__right__top__actions__tab {
  display: flex;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  cursor: pointer;
  transition-duration: 0.4s;
  background: var(--primary-black-background);
  opacity: 0.4;
  will-change: background, opacity;
  transition: background 0.5s var(--easeOutQuart), opacity 0.5s var(--easeOutQuart);
}

[data-page=calendar] .calender__left_events {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  max-height: 450px;
  padding-left: 24px;
}

[data-page=calendar] .calender__left_event {
  margin-right: 24px;
}

[data-page=calendar] .calender__left_event:not(:first-child) {
  margin-top: 24px;
}

[data-page=calendar] .calender_main_event_item_sub {
  background: linear-gradient(180deg, #f97316 0%, rgba(249, 115, 22, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-day-view-day-names .calender_main_event_item_sub {
  display: block;
}

[data-page=calendar] .toastui-calendar-layout.toastui-calendar-week-view .calender_main_event_item_sub,
[data-page=calendar] .toastui-calendar-layout.toastui-calendar-month .calender_main_event_item_sub {
  display: none !important;
}

[data-page=calendar] .calender__right__top__actions__tab:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

[data-page=calendar] .calender__right__top__actions__tab:hover p {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=calendar] .calender__right .calender__right__top__actions__tab.calender__right__top__actions__tab--active {
  background: var(--primary-black-background);
  opacity: 1;
}

[data-page=calendar] .calender__right .calender__right__top__actions__tab.calender__right__top__actions__tab--active:hover {
  background: var(--primary-black-background-hover);
}

[data-page=calendar] .calender__right .calender__right__top__actions__tab p {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
}

[data-page=calendar] .calender__right .calender__right__top__actions__tab.calender__right__top__actions__tab--active p {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=calendar] .calender__right .calender__right__top .calender__right__top__actions {
  color: #fff;
}

[data-page=calendar] .calender__right__top__actions__arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=calendar] .calender__right__top__actions__arrows .calender__right__top__actions__arrow {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

[data-page=calendar] button.arrow-mini-left::before {
  background: url(/assets/icons/chevron-left-c568ebe6bafc5e3fd4f3fa78b2df6b879a4dbbc76d6145960ad980537d0392da.svg) no-repeat;
  transform: rotate(0);
  transition: transform 0.2s;
}

[data-page=calendar] button.arrow-mini-right::before {
  background: url(/assets/icons/chevron-right-329c40a28697a9b749d66f7764ed2c4405145867a63035d1b4ca4589496eead8.svg) no-repeat;
  transform: rotate(0);
  transition: transform 0.2s;
}

[data-page=calendar] .toastui-calendar-day-names.toastui-calendar-month {
  padding: 0 !important;
}

[data-page=calendar] .toastui-calendar-layout.toastui-calendar-month {
  background-color: transparent !important;
}

[data-page=calendar] .toastui-calendar-day-name-item.toastui-calendar-month span {
  text-align: center;
  color: rgba(228, 228, 231, 0.4) !important;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .toastui-calendar-weekday-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=calendar] .toastui-calendar-daygrid-cell + .toastui-calendar-daygrid-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=calendar] .toastui-calendar-grid-cell-header {
  text-align: right;
}

[data-page=calendar] .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .calender__left_cards__card--white {
  border-left: 1px solid white;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-time {
  height: 578px !important;
}

[data-page=calendar] .toastui-calendar-layout.toastui-calendar-day-view,
[data-page=calendar] .toastui-calendar-layout.toastui-calendar-week-view {
  background-color: transparent !important;
}

[data-page=calendar] .toastui-calendar-day-names.toastui-calendar-week {
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=calendar] .toastui-calendar-day-view .toastui-calendar-column {
  background-color: transparent !important;
}

[data-page=calendar] .toastui-calendar-day-name-item.toastui-calendar-week {
  text-align: center;
  text-transform: uppercase;
}

[data-page=calendar] .toastui-calendar-day-name-item .toastui-calendar-day-name__date {
  color: #e4e4e7;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 142.857% */
}

[data-page=calendar] .toastui-calendar-timegrid-hour-rows {
  background-color: transparent !important;
}

[data-page=calendar] .toastui-calendar-day-name-item .toastui-calendar-day-name__name {
  color: rgba(228, 228, 231, 0.4);
  text-align: center;
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-time::-webkit-scrollbar {
  display: none;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-day-view-day-names {
  border: none !important;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-day-view-day-names::-webkit-scrollbar,
[data-page=calendar] .toastui-calendar-panel.toastui-calendar-week-view-day-names::-webkit-scrollbar {
  display: none;
}

[data-page=calendar] .toastui-calendar-panel-resizer {
  display: none !important;
}

[data-page=calendar] .toastui-calendar-timegrid-time-column {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=calendar] .toastui-calendar-template-timegridDisplayPrimaryTime {
  color: rgba(228, 228, 231, 0.4);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .toastui-calendar-columns {
  left: 62px !important;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-week-view-day-names {
  border: none !important;
}

[data-page=calendar] .toastui-calendar-column {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=calendar] .toastui-calendar-day-names.toastui-calendar-week .toastui-calendar-day-name-container {
  margin-left: 61.5px !important;
}

[data-page=calendar] .toastui-calendar-column .toastui-calendar-grid-selection {
  right: 0 !important;
}

[data-page=calendar] .toastui-calendar-column .toastui-calendar-grid-selection {
  left: 0px !important;
}

[data-page=calendar] .toastui-calendar-template-time {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.toastui-calendar-template-allday strong,
.toastui-calendar-template-time strong {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  /* 140% */
}

[data-page=calendar] .toastui-calendar-template-time span {
  color: #e4e4e7;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  width: 100%;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  /* 133.333% */
}

[data-page=calendar] .toastui-calendar-weekday-event-dot {
  display: none !important;
}

[data-page=calendar] .toastui-calendar-template-allday .calender_main_event_item,
[data-page=calendar] .calender_main_event_item {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 6px;
}

[data-page=calendar] .toastui-calendar-template-allday .calender_main_event_item .calender_main_event_item_icon,
[data-page=calendar] .calender_main_event_item .calender_main_event_item_icon {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 4px;
  flex-shrink: 0;
  width: max-content;
}

[data-page=calendar] .toastui-calendar-template-allday .calender_main_event_item p,
[data-page=calendar] .calender_main_event_item p {
  overflow: hidden;
  color: #e4e4e7;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  /* 133.333% */
}

[data-page=calendar] .toastui-calendar-weekday-event-block {
  padding: 0 !important;
  padding-left: 8px !important;
}

[data-page=calendar] .toastui-calendar-weekday-event-block:has(.toastui-calendar-template-allday) {
  padding: 0 !important;
}

[data-page=calendar] .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event {
  margin: 0 !important;
  margin-right: 8px !important;
  display: flex;
  align-items: center;
  height: auto !important;
}

[data-page=calendar] .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event:has(.toastui-calendar-template-allday) {
  border-left: 1px solid white !important;
  padding-left: 8px;
}

[data-page=calendar] .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event .toastui-calendar-weekday-event-title {
  padding: 0 !important;
}

[data-page=calendar] .toastui-calendar-layout.toastui-calendar-day-view .calender_main_event_item {
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  padding-left: 10px;
  padding-top: 9px;
  padding-bottom: 1%;
}

[data-page=calendar] .toastui-calendar-layout.toastui-calendar-week-view .calender_main_event_item {
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  padding-left: 5px;
  padding-top: 9px;
  padding-bottom: 1%;
}

[data-page=calendar] .toastui-calendar-layout.toastui-calendar-week-view .calender_main_event_item p {
  overflow: hidden;
  color: #e4e4e7;
  text-overflow: ellipsis;
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  max-width: 90%;
  line-height: 16px;
  /* 133.333% */
}

[data-page=calendar] .toastui-calendar-grid-cell-date .toastui-calendar-weekday-grid-date.toastui-calendar-weekday-grid-date-decorator {
  background-color: transparent !important;
}

[data-page=calendar] .removeBg {
  background-color: inherit !important;
}

[data-page=calendar] .modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=calendar] .modal.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

[data-page=calendar] .modal-bg {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

[data-page=calendar] .modal-container {
  position: relative;
  padding: 27px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  padding-right: 60px;
}

[data-page=calendar] .modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  outline: none;
  appearance: none;
  background: none;
  cursor: pointer;
}

[data-page=calendar] .modal-container-heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  /* 133.333% */
  letter-spacing: -1px;
}

[data-page=calendar] .modal-container-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 21px */
  margin-top: 4px;
}

[data-page=calendar] .modal-container-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=calendar] .modal-container-header img {
  width: 24px;
  height: 24px;
}

[data-page=calendar] .modal-close svg path {
  transition-duration: 0.4s;
}

[data-page=calendar] .modal-close:hover svg path {
  stroke-opacity: 0.8;
}

[data-page=calendar] .calender__right__top__actions__arrow svg path {
  transition-duration: 0.4s;
}

[data-page=calendar] .calender__right__top__actions__arrow:hover svg path {
  stroke-opacity: 0.8;
}

[data-page=calendar] .hide_today {
  display: none !important;
}

[data-page=calendar] .calender__left__day_today_btn {
  display: none;
  cursor: pointer;
}
[data-page=calendar] .calender__left__day_today_btn::after {
  display: none;
}

[data-page=calendar] .calender__left__day_wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

[data-page=calendar] .calender__left__day_view {
  color: rgba(255, 255, 255, 0.5);
}

[data-page=calendar] .calender__left__day_view.active {
  color: #fff;
}

[data-page=calendar] .calender__left__day_wrapper span {
  color: rgba(255, 255, 255, 0.5);
}

[data-page=calendar] .calender__events-filter {
  display: inline-flex;
  margin-left: auto;
  position: relative;
  z-index: 999;
}

[data-page=calendar] .calender__events-filter__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px;
  height: 28px;
  width: 118px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 56px;
  cursor: pointer;
  transition: all 0.2s ease;
}
[data-page=calendar] .calender__events-filter__button span {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-page=calendar] .calender__events-filter__button svg {
  width: 16px;
  height: 16px;
}
[data-page=calendar] .calender__events-filter__button svg path {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5px;
}
[data-page=calendar] .calender__events-filter__button:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-page=calendar] .calender__events-filter__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 261px;
  min-width: 261px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50.52%, rgba(255, 255, 255, 0.04) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
}
[data-page=calendar] .calender__events-filter__dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-page=calendar] .calender__events-filter__dropdown__item {
  display: flex;
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  position: relative;
  background: transparent;
  transition: background 0.4s var(--easeOutQuart);
  cursor: pointer;
}
[data-page=calendar] .calender__events-filter__dropdown__item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  will-change: background;
  transition: background 0.4s var(--easeOutQuart);
}
[data-page=calendar] .calender__events-filter__dropdown__item:last-child {
  border-radius: 0 0 16px 16px;
}
[data-page=calendar] .calender__events-filter__dropdown__item span {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
  transition: opacity 0.4s var(--easeOutQuart);
}
[data-page=calendar] .calender__events-filter__dropdown__item:hover, [data-page=calendar] .calender__events-filter__dropdown__item--active {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}
[data-page=calendar] .calender__events-filter__dropdown__item:hover::after, [data-page=calendar] .calender__events-filter__dropdown__item--active::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}
[data-page=calendar] .calender__events-filter__dropdown__item:hover span, [data-page=calendar] .calender__events-filter__dropdown__item--active span {
  opacity: 1;
  color: #FFFFFF;
}

[data-page=calendar] .calender__left_cards__card__bottom_tag {
  background: linear-gradient(180deg, #f97316 0%, rgba(249, 115, 22, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10px;
  font-weight: 500;
  line-height: 140%;
}

@media (min-width: 768px) and (max-width: 1024px) {
  #calender {
    padding-top: 30px;
    height: 85dvh;
  }
  [data-page=calendar] .calender__left {
    max-width: 333px;
    margin: 0 auto;
    width: 100%;
  }
  [data-page=calendar] .calender__right {
    display: none;
  }
  [data-page=calendar] .calender__left__day_today_btn {
    display: block;
  }
  [data-page=calendar] .calender__left__day {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  [data-page=calendar] .calender__left__day_wrapper {
    display: flex !important;
    order: -2;
    align-items: center;
    gap: 4px;
  }
  [data-page=calendar] .calender__left__day_wrapper .calender__left__day_view.active {
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
    font-weight: 500;
  }
  [data-page=calendar] .calender__left__day_today_btn {
    display: none;
  }
  [data-page=calendar] .calender__events-filter {
    order: 1;
    margin-left: auto;
  }
  [data-page=calendar] .calender__events-filter__dropdown {
    width: 333px;
    min-width: 333px;
    right: 0;
    left: auto;
    transform: none;
  }
  [data-page=calendar] .calender__events-filter__button {
    width: auto;
    min-width: 118px;
    max-width: 190px;
  }
  [data-page=calendar] .calender__events-filter__button span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-page=calendar] .calender__left_events {
    padding: 24px 16px 16px 16px;
    flex-grow: 1;
    height: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0f0f11;
  }
  [data-page=calendar] .calender__left__day_today_btn {
    display: none;
  }
  [data-page=calendar] .calender__inner {
    grid-template-columns: 1fr;
    border: none;
    height: 100%;
  }
  [data-page=calendar] .calender__inner .calender__left {
    padding: 0;
    flex-direction: column-reverse;
    border-radius: 16px;
    gap: 24px;
    justify-content: flex-end;
  }
  [data-page=calendar] .calender__right {
    display: none;
  }
  [data-page=calendar] [data-vc-theme=dark].vc {
    padding: 24px 0 !important;
    padding-bottom: 0 !important;
    gap: 20px;
  }
  [data-page=calendar] [data-vc=header] {
    margin: 0 auto;
    width: 100%;
    max-width: 430px !important;
  }
  [data-page=calendar] .calender__left__day_txt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }
  [data-page=calendar] .calender__left_event {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  #calender {
    padding-top: 30px;
    height: 85dvh;
  }
  [data-page=calendar] .calender__left__day {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  [data-page=calendar] .calender__events-filter__dropdown {
    width: 333px;
    min-width: 333px;
    right: 0;
    left: auto;
    transform: none;
  }
  [data-page=calendar] .calender__events-filter__button {
    width: auto;
    min-width: 118px;
    max-width: 190px;
  }
  [data-page=calendar] .calender__events-filter__button span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-page=calendar] .calender__left__day_today_btn {
    order: -2;
    margin: 0;
    position: relative;
    padding-right: 16px;
  }
  [data-page=calendar] .calender__left__day_today_btn::after {
    content: "·";
    display: inline-block;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
  }
  [data-page=calendar] .calender__left__day_wrapper {
    display: flex !important;
    order: -2;
    align-items: center;
    gap: 4px;
  }
  [data-page=calendar] .calender__left__day_wrapper .calender__left__day_view.active {
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
    font-weight: 500;
  }
  [data-page=calendar] .calender__events-filter {
    order: 1;
    margin-left: auto;
  }
  [data-page=calendar] .calender__left_events {
    padding: 24px 16px 16px 16px;
    flex-grow: 1;
    height: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0f0f11;
  }
  [data-page=calendar] .calender__left__day_today_btn {
    display: none;
  }
  [data-page=calendar] .calender__inner {
    grid-template-columns: 1fr;
    border: none;
    height: 100%;
  }
  [data-page=calendar] .calender__inner .calender__left {
    padding: 0;
    flex-direction: column-reverse;
    border-radius: 16px;
    gap: 24px;
    justify-content: flex-end;
    border: 1px solid hsla(0, 0%, 100%, 0.04);
  }
  [data-page=calendar] .calender__right {
    display: none;
  }
  [data-page=calendar] [data-vc-theme=dark].vc {
    padding: 24px 0 !important;
    padding-bottom: 0 !important;
    gap: 20px;
  }
  [data-page=calendar] [data-vc=header] {
    margin: 0 auto;
    width: 100%;
    max-width: 430px !important;
  }
  [data-page=calendar] .calender__left__day_txt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
  }
  [data-page=calendar] .calender__left_event {
    margin-right: 0;
  }
}
[data-page=calendar] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title,
[data-page=calendar] .toastui-calendar-timegrid-time-column {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
  width: 61px !important;
  text-align: right !important;
  justify-content: flex-end !important;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-allday {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  overflow-y: auto !important;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title {
  background-color: rgba(0, 0, 0, 0) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=calendar] .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title .toastui-calendar-template-alldayTitle,
[data-page=calendar] .toastui-calendar-template-timegridDisplayPrimaryTime {
  color: rgba(228, 228, 231, 0.4);
  font-family: var(--font-base);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 140% */
}

[data-page=calendar] .toastui-calendar-allday .toastui-calendar-panel-grid,
[data-page=calendar] .toastui-calendar-column {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

[data-page=calendar] .toastui-calendar-allday .toastui-calendar-panel-grid:last-child,
[data-page=calendar] .toastui-calendar-column:last-child {
  border-right: none !important;
}

[data-page=calendar] .toastui-calendar-allday .calender_main_event_item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

[data-page=calendar] .toastui-calendar-allday .calender_main_event_item_icon {
  justify-content: flex-start !important;
  flex-direction: row !important;
}

[data-page=calendar] .toastui-calendar-allday .toastui-calendar-weekday-event-block {
  padding-left: 0 !important;
}

[data-page=calendar] .toastui-calendar-allday .toastui-calendar-weekday-event-block .toastui-calendar-weekday-event {
  padding-left: 3px;
  margin: 0 !important;
  border-radius: 0 !important;
}

[data-page=calendar] .toastui-calendar-allday .toastui-calendar-weekday-event,
[data-page=calendar] .toastui-calendar-weekday-event:has(.toastui-calendar-template-allday) {
  background: rgba(255, 255, 255, 0.04) !important;
  height: 22px !important;
}

[data-page=calendar] .toastui-calendar-collapse-btn-icon {
  border-bottom-color: white;
  margin-left: auto;
  margin-right: auto;
}

[data-page=calendar] .toastui-calendar-weekday-exceed-in-week {
  background: #444;
  border: 1px solid #888;
  border-radius: 40px;
  border: none !important;
  color: #fff;
  z-index: 2;
  min-width: 20px;
}

[data-page=calendar] .all-day-label-custom {
  display: none;
}

[data-page=calendar] .toastui-calendar-month .all-day-label-custom {
  display: inline;
}

[data-page=calendar] .toastui-calendar-template-allday .calender_main_event_item {
  display: block;
}

#calendarMain > div.toastui-calendar-layout.toastui-calendar-week-view > div.toastui-calendar-panel.toastui-calendar-time > div > div > div.toastui-calendar-columns > div:nth-child(8) {
  border-right: none !important;
}

#calendarMain > div.toastui-calendar-layout.toastui-calendar-day-view > div.toastui-calendar-panel.toastui-calendar-time > div > div > div.toastui-calendar-columns > div.toastui-calendar-column {
  border-right: none !important;
}

#home__calender {
  font-family: var(--font-base);
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  max-width: 296px;
  width: 100%;
  height: 100%;
  --middle-height: 157px;
  display: grid;
  grid-template-rows: 24px auto 1fr 36px;
}

#home__calender.dynamic-height-v2 {
  display: grid;
  grid-template-rows: 24px auto 1fr 36px;
}

#home__calender .home__calender__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#home__calender .home__calender__top__label {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

#home__calender .home__calender__top__live {
  display: flex;
  padding: 0 8px 0 9px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 48px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(16, 185, 129, 0.2);
  color: #a7f3d0;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  height: 24px;
}

#home__calender .home__calender__top__live--circle {
  width: 6px;
  height: 6px;
  border-radius: 40px;
  background: #a7f3d0;
  box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2);
  animation: pulse-live 2.5s infinite ease-in-out;
}

#home__calender .home__calender__middle {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: max-content;
}

#home__calender .home__calender__middle__today {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

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

#home__calender .home__calender__middle__card__time {
  display: flex;
  align-items: center;
  gap: 4px;
}

#home__calender .home__calender__middle__card__time p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}

#home__calender .home__calender__middle__card__title {
  color: #e4e4e7;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

#home__calender .home__calender__middle__card__tag {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  background: linear-gradient(180deg, #f97316 0%, rgba(249, 115, 22, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#home__calender .home__calender__middle__card__btn {
  border-radius: 56px;
  background: var(--primary-white-background);
  padding: 0 8px 0 10px;
  font-family: var(--font-base);
  height: 28px;
  width: 100%;
  color: #0f0f11;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  transition-duration: 0.4s;
}

#home__calender .home__calender__middle__card__btn:hover {
  background: var(--primary-white-background-hover);
}

#home__calender .home__calender__mini {
  margin-bottom: 16px;
}

#home__calender .home__calender__mini .vc-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#home__calender .home__calender__mini .vc-wrapper::-webkit-scrollbar {
  display: none;
}

#home__calender .hello-week .navigation {
  display: none;
}

#home__calender .hello-week .week {
  color: rgba(228, 228, 231, 0.4);
  text-align: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}

#home__calender .hello-week .week .day {
  padding-top: 0;
  padding-bottom: 0;
}

#home__calender .hello-week .month .day {
  color: #e4e4e7;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  height: 32px;
}

#home__calender .hello-week .month .day.is-today {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

#home__calender .home__calender__bottom {
  margin-top: 24px;
  border-radius: 56px;
  height: 36px;
  background: var(--primary-black-background);
  padding: 0 12px;
  width: 100%;
  cursor: pointer;
  transition-duration: 0.4s;
  height: 36px;
  margin-top: 0;
}

#home__calender .home__calender__bottom:hover {
  background: var(--primary-black-background-hover);
}

#home__calender .home__calender__bottom--link {
  width: 100%;
  margin-top: auto;
}

#home__calender .home__calender__bottom span {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  font-family: var(--font-base);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

#home__calender [data-vc=header] {
  display: none !important;
}

#home__calender [data-vc=calendar] {
  min-width: auto !important;
}

#calendarMain {
  height: 700px;
}

#home-page .research {
  display: flex;
  padding: 24px;
  padding-right: 0;
  flex-direction: column;
  align-items: flex-start;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  max-width: 296px;
  width: 100%;
  height: 100%;
}

#home-page .research .research__inner {
  width: 100%;
}

#home-page .research .research__inner__title {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

#home-page .research .research__inner__timelines {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 390px;
  overflow: hidden;
  padding-right: 24px;
  -webkit-mask-image: linear-gradient(to bottom, #131716 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #131716 70%, transparent 100%);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

#home-page .research .research__inner__timelines__shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
}

#home-page .research .research__inner__timelines__item {
  cursor: pointer;
  padding: 16px 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: border-image-source 0.5s var(--easeOutQuart);
}

#home-page .research .research__inner__timelines__item:hover {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

#home-page .research:not(.research--wiki) .research__inner__timelines__item.research__inner__timelines__item--unread {
  border-image-source: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, #3b82f6 50.39%, rgba(59, 130, 246, 0.2) 100%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 100%);
}

#home-page .research .research__inner__timelines__item.research__inner__timelines__item--unread .research__inner__timelines__item__right__dot {
  opacity: 1;
}

#home-page .research .research__inner__timelines__item__left {
  width: 218px;
  max-width: 218px;
}

#home-page .research.research--wiki .research__inner__timelines__item__left {
  width: 100%;
}

#home-page .research .research__inner__timelines__item__left__timeline {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.5019607843);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

#home-page .research .research__inner__timelines__item__left__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #e4e4e7;
}

#home-page .research .research__inner__timelines__item__left__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
  display: -webkit-box;
  width: 100%;
  max-width: 100%;
  line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

#home-page .research .research__inner__timelines__item__right {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-page .research .research__inner__timelines__item__right__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0px 0px 0px 2px rgba(59, 130, 246, 0.2);
  opacity: 0;
  will-change: opacity;
}

#home-page .research .research__inner__link {
  background: var(--primary-black-background);
  padding: 0 12px;
  border-radius: 56px;
  height: 36px;
  width: calc(100% - 24px);
  display: block;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.4s;
  margin-top: auto;
  padding: 8px 12px;
}

#home-page .research .research__inner__link:hover {
  background: var(--primary-black-background-hover);
}

#home-page .research .research__inner__link span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.home-cookies {
  display: flex;
  width: 456px;
  box-sizing: border-box;
  padding: 24px;
  flex-direction: column;
  position: fixed;
  bottom: 32px;
  left: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  will-change: transform;
  transform-origin: bottom left;
  transition: 0.6s var(--easeInOutQuart);
  transform: scale(1);
  z-index: 99;
}

.home-cookies.hide {
  transform: scale(0);
}

.home-cookies-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

.home-cookies-top h6 {
  font: var(--body-medium);
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-cookies-top p {
  color: var(--white-40);
  font: var(--paragraph-regular);
}

.home-cookies-bottom {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin-top: 32px;
}

.home-cookies-bottom .home-cookies-bottom_btns,
.home-cookies-bottom .home-cookies-bottom_actions {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.home-cookies-bottom .home-cookies-bottom_actions a,
.home-cookies-bottom .home-cookies-bottom_actions button {
  color: rgba(255, 255, 255, 0.3);
  font: var(--body-regular);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: color 0.5s var(--easeOutQuart);
}

.home-cookies-bottom .home-cookies-bottom_actions a:hover,
.home-cookies-bottom .home-cookies-bottom_actions button:hover {
  color: var(--white);
}

.home-cookies-bottom .home-cookies-bottom_btns button {
  display: flex;
  padding: 0 16px;
  height: 100%;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 56px;
  background: var(--primary-black-background);
  opacity: 0.4;
  transition: 0.5s var(--easeInOutQuad);
}

.home-cookies-bottom .home-cookies-bottom_btns button:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

.home-cookies-bottom .home-cookies-bottom_btns button.active {
  background: var(--primary-white-background);
  opacity: 1;
}

.home-cookies-bottom .home-cookies-bottom_btns button.active:hover {
  background: var(--primary-white-background-hover);
}

.home-cookies-bottom .home-cookies-bottom_btns button span {
  font: var(--small-medium);
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s var(--easeOutQuart);
}

.home-cookies-bottom .home-cookies-bottom_btns button.active span {
  background: var(--primary-black-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s var(--easeOutQuart);
}

.home-cookies-bottom .home-cookies-bottom_btns button.active span:hover {
  background: var(--primary-black-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.settings_modal_toggles {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s var(--easeOutQuart);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.home-cookies.toggle .settings_modal_toggles {
  height: 219px;
}

.settings_modal_toggles_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

.settings_modal_toggles_item_heading {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition-duration: 0.4s;
}

.settings_modal_toggles_item:has(.toggle__input:checked) .settings_modal_toggles_item_heading {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.72) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition-duration: 0.4s;
}

.settings_modal_toggles_item_toggle .toggle {
  position: relative;
  display: inline-block;
}

.toggle__input {
  display: none;
}

@media (max-width: 36em) {
  .home-cookies {
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
  }
  .home-cookies-top {
    padding-bottom: 0;
    border-bottom: none;
    border-image-slice: 0;
    border-image-source: none;
    text-align: center;
  }
  .home-cookies-top p {
    padding: 0 15px;
  }
  .home-cookies-bottom {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 16px;
    height: auto;
  }
  .home-cookies-bottom .home-cookies-bottom_btns button {
    height: 32px;
  }
  .home-cookies-bottom .home-cookies-bottom_btns {
    gap: 8px;
  }
}
.home-content .home-content__top .rank {
  grid-column: 1/9;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  z-index: 5;
}

.home-content .home-content__top .rank .rank-bg {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.home-content .home-content__top .rank .rank-bg.is-mobile {
  display: none;
}

@media (max-width: 450px) {
  .home-content .home-content__top .rank .rank-bg.is-desktop {
    display: none;
  }
  .home-content .home-content__top .rank .rank-bg.is-mobile {
    display: block;
  }
}
[data-page=home] .rank {
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
}

[data-page=home] .rank__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

[data-page=home] .rank__inner__content {
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  position: relative;
  border-radius: 16px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  width: 100%;
  height: 100%;
  background: unset;
  padding: 0;
}

.home-content .home-content__top .rank__inner::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/backgrounds/home/rank-thumbnail-2-47279fe1f10f2a32d7424d167151a018aeb70381df4ffe40ea0cfefe4a685e96.jpg) bottom center/cover no-repeat;
  border-radius: 16px;
}
@media (min-width: 64em) {
  .home-content .home-content__top .rank__inner::after {
    background: url(/assets/backgrounds/home/rank-thumbnail-2-47279fe1f10f2a32d7424d167151a018aeb70381df4ffe40ea0cfefe4a685e96.jpg) bottom center/cover no-repeat;
  }
}

.home-content .home-content__top .rank .rank-max {
  display: none;
  position: relative;
}

.home-content .home-content__top .rank .rank-max h6 {
  font: var(--body-regular);
  color: var(--white-40);
}

.home-content .home-content__top .rank .rank-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  z-index: 1;
}

.home-content .home-content__top .rank .rank-top .rank-top__earn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.home-content .home-content__top .rank .rank-top .rank-top__earn h6 {
  font: var(--small-medium);
  color: var(--white-60);
}

.home-content .home-content__top .rank .rank-top .rank-top__earn span {
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: var(--body-medium);
}

.home-content .home-content__top .rank .rank-top .rank-top__leaderboard {
  display: flex;
  padding: 6px 8px 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 56px;
  background: var(--primary-black-background);
  cursor: pointer;
  transition: 0.4s var(--easeInOutQuad);
  padding: 6px 12px;
}

.home-content .home-content__top .rank .rank-top .rank-top__leaderboard span {
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: var(--small-medium);
}

.home-content .home-content__top .rank .rank-badge {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  width: 232px;
  height: 232px;
  flex-shrink: 0;
  margin: 0 auto;
}

.home-content .home-content__top .rank .rank-badge .rank-badge__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rank-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
  z-index: 1;
}

.rank-ellipse::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--badge-color);
  opacity: 0.32;
  filter: blur(80px);
  -webkit-filter: blur(80px);
  -moz-filter: blur(80px);
  -o-filter: blur(80px);
  -ms-filter: blur(80px);
  border-radius: 100%;
  pointer-events: none;
  width: 232px;
  height: 232px;
  margin: 0 auto;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.home-content .home-content__top .rank .rank-badge .rank-badge__content img {
  display: flex;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
}

.home-content .home-content__top .rank .rank-badge .rank-badge__content span {
  font: var(--small-medium);
  color: var(--white-60);
  margin-top: 6px;
}

.home-content .home-content__top .rank .rank-badge .rank-badge__content h6 {
  font: var(--h6-medium);
  background: var(--main-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: capitalize;
  font-weight: bold;
}

.home-content .home-content__top .rank .rank-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top {
  display: flex;
  gap: 24px;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .percentage,
.home-content .home-content__top .rank .rank-progress .rank-progress__top .next-rank {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .percentage {
  flex: 1 0 0;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .next-rank {
  justify-content: center;
  align-items: center;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .percentage p,
.home-content .home-content__top .rank .rank-progress .rank-progress__top .next-rank p {
  font: var(--body-regular);
  color: var(--white-40);
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .percentage h5,
.home-content .home-content__top .rank .rank-progress .rank-progress__top .next-rank h5 {
  font: var(--h5-medium);
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .percentage h5 {
  color: var(--white-60);
}

.home-content .home-content__top .rank .rank-progress .rank-progress__top .next-rank h5 {
  background: var(--next-text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: capitalize;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__bottom img {
  display: flex;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__bottom .progress-bar {
  flex: 1;
  background: var(--background-progress-bar);
  width: 100%;
  height: 8px;
  border-radius: 24px;
  position: relative;
  cursor: pointer;
}

.home-content .home-content__top .rank .rank-progress .rank-progress__bottom .progress-bar .progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0f0f11 0%, var(--badge-color) 100%);
  width: 0;
  animation: fillAnimation 2s linear forwards;
  -moz-animation: fillAnimation 2s linear forwards;
  -webkit-animation: fillAnimation 2s linear forwards;
  -o-animation: fillAnimation 2s linear forwards;
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -o-animation-play-state: paused;
}

[data-page=home] .progress-popup-info {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% - 30px));
  right: 0;
  width: 347px;
  margin: 0 auto;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeInOutQuart);
  display: flex;
  align-items: center;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}

[data-page=home] .progress-popup-info img {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  position: relative;
  z-index: 1;
}

[data-page=home] .progress-popup-info .progress-popup-info__content {
  transform: translateY(-2px);
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--0-f-0-f-113-paints, radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11);
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

[data-page=home] .progress-popup-info .progress-popup-info__content h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=home] .progress-popup-info .progress-popup-info__content p {
  font: var(--paragraph-regular);
  color: var(--white-40);
  text-align: center;
}

[data-page=home] .progress-popup-info:hover,
[data-page=home] .rank:has(.progress-bar:hover) .progress-popup-info {
  opacity: 1;
}

.home-content .home-content__top .rank .rank-top .rank-top__leaderboard:hover {
  background: var(--primary-black-background-hover);
}

.home-content .home-content__top .rank .rank-progress--max .rank-progress__label--max,
.home-content .home-content__top .rank .rank-progress--max .next-rank__label--max {
  color: rgba(255, 255, 255, 0.4);
  font-family: "Open Runde";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.home-content .home-content__top .rank .rank-progress--max .next-rank--max {
  text-align: right;
  gap: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.home-content .home-content__top .rank .rank-progress--max .percentage--max {
  gap: 2px;
  display: flex;
  flex-direction: column;
}
.home-content .home-content__top .rank .rank-progress--max .rank-progress__value--max {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Open Runde";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
}
.home-content .home-content__top .rank .rank-progress--max .next-rank__value--max {
  font-family: "Open Runde";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #3B3B3B 0%, #BBB 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: capitalize;
}
.home-content .home-content__top .rank .rank-progress--max .progress-fill--max {
  background: linear-gradient(90deg, rgba(246, 246, 246, 0) 0%, rgb(255, 255, 255) 100%);
}
.home-content .home-content__top .rank .rank-progress--max .progress-bar--max {
  margin-left: -20px;
  width: calc(100% + 20px);
}

@media (max-width: 1199px) {
  .home-content .home-content__top .rank {
    grid-column: span 4;
    gap: 8px;
    min-height: 357px;
  }
}
.home-macro-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.home-macro-cards .macro-card-link {
  display: block;
  text-decoration: none;
}

.home-crypto-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

#home-page * {
  font-family: var(--font-base);
}

.home-page main {
  padding: 24px 0 40px;
  width: 100%;
}

.home-page main .home-container {
  width: 100%;
}

.home-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

.home-content .home-content__top {
  align-self: stretch;
}

.home-content .home-content__top {
  max-width: 100%;
}

.home-content .home-content__top .news {
  grid-row: 1;
  grid-column: 9/-1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  align-self: stretch;
  align-items: unset;
  align-self: unset;
  height: unset;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-content .home-content__top .news .news_top {
  display: flex;
  height: 210px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.home-content .home-content__top .news .news_top > div {
  flex: 1 0 0;
  align-self: stretch;
}

.home-content .home-content__top .news .news_top .join,
.home-content .home-content__top .news .news_top .flash {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

.home-content .home-content__top .news .news_bottom {
  flex: 1 0 0;
  align-self: stretch;
}

.home-content .home-content__top .news .news_bottom > div {
  width: 100%;
  height: 100%;
}

.home-content .home-content__top .news .news_bottom > div > div {
  width: 100%;
  height: 100%;
}

.home-content .home-content__top .news .news_bottom .news_bottom__inner {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

.home-content .home-content__top .news .news-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.home-content .home-content__top .news .news-card__top img {
  height: 24px;
  width: auto;
}

.home-content .home-content__top .news .news-card__top button:not(.popover__wrapper__overlay) {
  cursor: pointer;
  display: flex;
  padding: 6px 8px 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 56px;
  background: var(--primary-black-background);
  transition: 0.4s var(--easeInOutQuad);
  padding: 6px 12px;
}

.home-content .home-content__top .news .news-card__top button:not(.popover__wrapper__overlay):hover {
  background: var(--primary-black-background-hover);
}

.home-content .home-content__top .news .news-card__top button img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.home-content .home-content__top .news .news-card__top button span {
  font: var(--small-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-content .home-content__top .news .news_card__bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.home-content .home-content__top .news .news_card__bottom.news_card__bottom--user {
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  flex-direction: row;
  flex-direction: column;
  justify-content: unset;
  align-items: unset;
  gap: 8px;
}

.home-content .home-content__top .news .news_card__bottom h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-content .home-content__top .news .news_card__bottom p {
  font: var(--paragraph-regular);
  color: var(--white-40);
}

.home-content .home-content__top .news .news_card__bottom .ranks {
  display: flex;
  align-items: center;
  width: 150px;
  height: 24px;
  justify-content: flex-end;
  justify-content: unset;
}

.home-content .home-content__top .news .news_card__bottom .ranks img {
  height: 100%;
  width: max-content;
  object-position: right;
  object-position: unset;
}

.home-content .research__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.home-content .research-container {
  height: 100%;
  width: 100%;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .home-content .research-container {
    grid-column: 1/3;
    grid-row: 1;
  }
}
@media (min-width: 1200px) {
  .home-content .research-container {
    grid-column: 1/4;
    grid-row: 1;
  }
}

.home-leaderboard-wrapper {
  height: 100%;
  width: 100%;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .home-leaderboard-wrapper {
    grid-column: 1/3;
    grid-row: 2;
  }
}
@media (min-width: 1200px) {
  .home-leaderboard-wrapper {
    grid-column: 7/10;
    grid-row: 1;
  }
}

.home-content .calendar {
  height: 100%;
  width: 100%;
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .home-content .calendar {
    grid-column: 3/-1;
    grid-row: 1;
  }
}
@media (min-width: 1200px) {
  .home-content .calendar {
    grid-column: 4/7;
    grid-row: 1;
  }
}

.home-content .unlock-container {
  grid-column: 1/-1;
  height: 100%;
  width: 100%;
  /* Declaraciones primero */
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  justify-content: space-between;
  /* Reglas anidadas al final */
}
@media (min-width: 768px) {
  .home-content .unlock-container {
    grid-column: 3/-1;
    grid-row: 2;
  }
}
@media (min-width: 1200px) {
  .home-content .unlock-container {
    grid-column: 10/-1;
    grid-row: 1;
  }
}

.home-content .unlock {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.home-content .unlock.unlock-launch-page {
  grid-column: 10/-1;
}

.home-content .unlock::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: url(/images/home-plus-background.svg) center/cover no-repeat;
}

.home-content .unlock.unlock-launch-page::before {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  content: "";
  background: url(/assets/backgrounds/launch-page-949fdea8c0e2359c7c3be0d52a3f53451e6b8366e19897cfd516dae63c488721.png) center/cover no-repeat;
}

.home-content .unlock-top {
  display: flex;
  width: 560px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  position: relative;
  z-index: 1;
}

.home-content .unlock-top .unlock-top__items {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: stretch;
  border-radius: 0px 12px 12px 0px;
  border-left: 1px solid var(--brand-orange, #f97316);
  background: radial-gradient(50% 50% at 50% 100%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 50%), rgba(255, 255, 255, 0.04);
  box-shadow: 0px 279px 78px 0px rgba(15, 15, 17, 0), 0px 178px 71px 0px rgba(15, 15, 17, 0.01), 0px 100px 60px 0px rgba(15, 15, 17, 0.05), 0px 45px 45px 0px rgba(15, 15, 17, 0.09), 0px 11px 25px 0px rgba(15, 15, 17, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -moz-backdrop-filter: blur(6px);
  -o-backdrop-filter: blur(6px);
  -ms-backdrop-filter: blur(6px);
  transform: translateY(var(--ty)) scale(var(--scale));
  position: relative;
  z-index: var(--z);
}

.home-content .unlock-top .unlock-top__items:nth-of-type(2) .unlock-top__items-right,
.home-content .unlock-top .unlock-top__items:nth-of-type(3) .unlock-top__items-right {
  opacity: 0;
}

.home-content .unlock-top .unlock-top__items:nth-of-type(2) h6,
.home-content .unlock-top .unlock-top__items:nth-of-type(3) h6 {
  opacity: 0.5;
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-left p {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--white-60);
  font: var(--label-medium);
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-left p img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  aspect-ratio: 1;
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-left h6 {
  font: var(--small-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-right {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 12px;
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-right p {
  font: var(--paragraph-medium);
  background: var(--text-background-orange);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-content .unlock-top .unlock-top__items .unlock-top__items-right div {
  border-radius: 32px;
  background: var(--orange);
  box-shadow: 0px 0px 0px 2px rgba(249, 115, 22, 0.2);
  width: 6px;
  height: 6px;
}

.home-content .unlock-bottom {
  display: flex;
  width: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.home-content .unlock.unlock-launch-page .unlock-bottom {
  width: 100%;
}

.home-content .unlock-bottom .unlock-bottom__labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.home-content .unlock-bottom .unlock-bottom__labels h4 {
  font: var(--h4-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-content .unlock-bottom .unlock-bottom__labels p {
  font: var(--paragraph-regular);
  color: var(--white-40);
}

.home-content .unlock-bottom .unlock-bottom__button {
  position: relative;
  padding: 8px 12px;
}

.home-content .unlock-bottom .unlock-bottom__button::before {
  position: absolute;
  content: "";
  inset: 0;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 100%), rgba(249, 115, 22, 0.08);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  width: 100%;
  padding-bottom: 24px;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top .ranked-chat-rooms-popover__top-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top button {
  all: initial;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top button svg {
  fill: white;
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top button svg path {
  will-change: stroke-opacity;
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top button:hover svg path {
  stroke-opacity: 1;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__top h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom {
  width: 100%;
  position: relative;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info:last-child::after {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgb(249, 115, 22), transparent);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info {
  display: flex;
  padding: 20px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  position: relative;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info:last-of-type {
  border-bottom: 1px solid rgba(249, 115, 22, 0);
  background: radial-gradient(50% 50% at 50% 100%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 100%);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__left .ranked-info__left--top {
  display: flex;
  align-items: center;
  gap: 6px;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__left .ranked-info__left--top img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  aspect-ratio: 1;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__left .ranked-info__left--top span {
  font: var(--body-regular);
  color: var(--white-50);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__left .ranked-info__left--bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__left .ranked-info__left--bottom h2 {
  font: var(--body-medium);
  color: var(--text-white);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__right .joined {
  opacity: 0.4;
  pointer-events: none;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info:last-of-type .ranked-info__left .ranked-info__left--bottom img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__right .ranked-info__right_paragraph {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__right .ranked-info__right_paragraph span {
  color: var(--white-20);
  font: var(--paragraph-regular);
}

#ranked-chat-rooms-popover .ranked-chat-rooms-popover__bottom .ranked-info .ranked-info__right .ranked-info__right_paragraph img {
  width: 16px;
  height: 16px;
}

.rank-up-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: radial-gradient(63.94% 63.94% at 50% 0%, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%), #0f0f11;
}

.rank-up-modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/images/backgrounds/rank-up.svg) center/cover no-repeat;
}

.rank-up-modal-wrapper::before {
  content: "";
  inset: 0;
  margin: auto;
  pointer-events: none;
  background: radial-gradient(125.87% 125.87% at 50% 0%, rgba(253, 224, 71, 0.24) 0%, rgba(253, 224, 71, 0) 100%), radial-gradient(50% 50% at 50% 50%, rgba(253, 224, 71, 0.16) 0%, rgba(253, 224, 71, 0) 100%);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  -moz-backdrop-filter: blur(36px);
  -o-backdrop-filter: blur(36px);
  -ms-backdrop-filter: blur(36px);
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}

.lottiePlaceholder {
  --background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(253, 224, 71, 0.16) 0%,
      rgba(253, 224, 71, 0) 100%
    ),
    radial-gradient(
      125.87% 125.87% at 50% 0%,
      rgba(253, 224, 71, 0.24) 0%,
      rgba(253, 224, 71, 0) 100%
    );
  --text-color: linear-gradient(90deg, #fde047 0%, #facc15 100%);
  --distance: 135px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--background);
  backdrop-filter: blur(72px);
  -webkit-backdrop-filter: blur(72px);
  -moz-backdrop-filter: blur(72px);
  -o-backdrop-filter: blur(72px);
  -ms-backdrop-filter: blur(72px);
  z-index: -2;
  opacity: 0;
  will-change: opacity;
  transition: z-index 0s 0.7s var(--easeInOutQuart), opacity 0.7s var(--easeInOutQuart);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottiePlaceholder[data-show=true] {
  transition: z-index 0s 0s var(--easeInOutQuart), opacity 0.7s var(--easeInOutQuart);
  z-index: 1000;
  opacity: 1;
}

.lottiePlaceholder__content__lottieWrapper {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  margin-bottom: 9.5px;
}

.lottiePlaceholder__content__lottieWrapper canvas {
  width: 402.5%;
  height: 402.5%;
}

.lottiePlaceholder__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lottiePlaceholder__content div {
  --delay: 0s;
}

.lottiePlaceholder__content div:has(h3) {
  --delay: 0.2s;
}

.lottiePlaceholder__content div:has(.lottiePlaceholder__content__actions) {
  --delay: 0.4s;
}

.lottiePlaceholder__content h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s var(--delay) var(--easeInOutQuad);
  will-change: opacity, transform;
}

.lottiePlaceholder__content h3 {
  margin-bottom: 32px;
  font-size: 48px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: -2px;
  background: var(--text-color);
  text-shadow: 0px 4px 32px 0px rgba(253, 224, 71, 0.3215686275);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s var(--delay) var(--easeInOutQuad);
  will-change: opacity, transform;
}

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

.lottiePlaceholder__content[data-show=true] h4 {
  opacity: 1;
  transform: translateY(0%);
}

.lottiePlaceholder__content[data-show=true] h3 {
  --delay: 0.1s;
  opacity: 1;
  transform: translateY(0%);
}

.lottiePlaceholder__content[data-show=true] button {
  --delay: 0.2s;
  opacity: 1;
  transform: translateY(0%);
}

.lottiePlaceholder__content__actions button {
  padding: 8px 16px;
  border-radius: 9999px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s var(--delay) var(--easeInOutQuad);
  will-change: opacity, transform;
}

.lottiePlaceholder__content__actions button span {
  font: var(--sm-medium);
}

.lottiePlaceholder__content__actions button[data-type=share] {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
}

.lottiePlaceholder__content__actions button[data-type=share]:hover {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 100%);
}

.lottiePlaceholder__content__actions button[data-type=share] span {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lottiePlaceholder__content__actions button[data-type=continue] {
  background: var(--primary-white-background);
}

.lottiePlaceholder__content__actions button[data-type=continue]:hover {
  background: var(--primary-white-background-hover);
}

.lottiePlaceholder__content__actions button[data-type=continue] span {
  color: #0f0f11;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

canvas#currentRank {
  width: 80px;
  height: 80px;
}

canvas#snow {
  position: absolute;
  top: 0;
  left: 0;
}

#ranked-system-popover .ranked-system-popover__content {
  height: 548px;
  padding-right: 0;
}

#ranked-system-popover .ranked-system-popover__content__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  position: relative;
  padding-bottom: 24px;
  padding-right: 24px;
}

#ranked-system-popover .ranked-system-popover__content__top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 225, 0.2), transparent);
}

#ranked-system-popover .ranked-system-popover__content__top .close {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

#ranked-system-popover .ranked-system-popover__content__top .close > img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

#ranked-system-popover .ranked-system-popover__content__top .close > button {
  will-change: opacity;
  transition: opacity 0.4s var(--easeInOutQuart);
  opacity: 1;
}

#ranked-system-popover .ranked-system-popover__content__top .close > button svg {
  fill: white;
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

#ranked-system-popover .ranked-system-popover__content__top .close > button svg path {
  will-change: stroke-opacity;
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

#ranked-system-popover .ranked-system-popover__content__top .close > button:hover svg path {
  stroke-opacity: 1;
}

#ranked-system-popover .ranked-system-popover__content__top h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ranked-system-popover .ranked-system-popover__content__top p {
  font: var(--paragraph-regular);
  position: relative;
  background: var(--white-40);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ranked-system-popover .ranked-system-popover__content__bottom {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 100%;
  align-items: flex-start;
  padding-right: 24px;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items {
  display: flex;
  padding: 20px 0px;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  position: relative;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 225, 0.2), transparent);
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items.active {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, white, transparent);
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items > img {
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items[data-rank=black] > img {
  width: 51px !important;
  height: 51px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  margin-left: -5.5px;
  margin-top: -5.5px;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center .ranked-system-popover__items-center__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center .ranked-system-popover__items-center__top > h6,
#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center .ranked-system-popover__items-center__top > span {
  font: var(--small-medium);
  background: var(--item-rank-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ranked-system-popover__items-center__top button {
  padding: 6px 12px;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center {
  width: 100%;
  gap: 12px;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items:last-of-type .ranked-system-popover__items-center {
  padding-top: 0;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center > p {
  font: var(--paragraph-regular);
  width: 242px;
  background: var(--white-40);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center > p.ranked-system-popover__items-center__threshold {
  font: var(--paragraph-regular);
  font-size: 11px;
  width: auto;
  margin-top: -6px;
  background: var(--white-60);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.toggle__label {
  display: block;
  width: 48px;
  height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: #0f0f11;
}

.toggle__input:checked + .toggle__label {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

.settings_modal_toggles_item:has(.toggle__input:checked) .settings_modal_toggles_item_heading {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.72) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition-duration: 0.4s;
}

.toggle__input:checked + .toggle__label::after {
  left: 25px;
  background-color: rgba(255, 255, 255, 0.8);
}

.toggle__label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: left 0.3s ease;
}

@media (max-width: 1199px) {
  .lottiePlaceholder__content__lottieWrapper {
    margin-bottom: 13.5px;
  }
  .lottiePlaceholder__content h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }
  .lottiePlaceholder__content h3 {
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: -2px;
  }
  .home-content .home-content__top {
    height: auto;
  }
  .home-content .home-content__top .news {
    order: -1;
    grid-row: 2;
    grid-column: span 4;
    gap: 16px;
  }
  .home-content {
    height: auto;
  }
  .home-content .unlock {
    grid-row: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .home-content .unlock.unlock-launch-page {
    grid-row: initial;
  }
  #home-page .research {
    max-width: none;
  }
  #home-page .research .research__inner__timelines__item__left {
    width: auto;
  }
  .calendar {
    width: 100%;
  }
  #home__calender {
    max-width: none;
  }
  #home__calender [data-vc=calendar] {
    width: 100%;
  }
  .home-content .unlock {
    padding: 24px;
    gap: 0;
  }
  .home-content .unlock-top {
    padding-top: 32px;
    width: 305px;
  }
  .home-content .unlock::before {
    background-position: center right;
  }
  .home-content .unlock-top .unlock-top__items .unlock-top__items-left h6 {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
  }
  .home-content .unlock-top .unlock-top__items .unlock-top__items-right p {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
  }
  .home-content .unlock-top .unlock-top__items {
    gap: 5px;
  }
  .home-content .unlock-top .unlock-top__items .unlock-top__items-right {
    gap: 8px;
  }
  #ranked-system-popover .ranked-system-popover__content {
    height: 700px;
    bottom: 0;
  }
  #ranked-system-popover .ranked-system-popover__content__bottom .ranked-system-popover__items .ranked-system-popover__items-center > p {
    width: 232px;
  }
}
#home__calender .calender__left_cards__card {
  border-radius: 0px 12px 12px 0px;
  background: rgba(255, 255, 255, 0.04);
}

#home__calender .calender__left_cards__card.calender__left_cards__card--lightBlue {
  border-left: 1px solid #60A5FA;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--darkBlue {
  border-left: 1px solid #1F447F;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--pink {
  border-left: 1px solid #a855f7;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--red {
  border-left: 1px solid #DD3D3D;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--orange {
  border-left: 1px solid #F97315;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--grey {
  border-left: 1px solid #4D4D4D;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--green {
  border-left: 1px solid #21AA54;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--yellow {
  border-left: 1px solid #FDDE42;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--purple {
  border-left: 1px solid #46045A;
}

#home__calender .calender__left_cards__card.calender__left_cards__card--white {
  border-left: 1px solid #FFFFFF;
}

[data-page=home] .grid-container {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 347px 495px;
  gap: 16px !important;
}

[data-page=home] .calendar,
[data-page=home] .research-container,
[data-page=home] .home-leaderboard-wrapper,
[data-page=home] .news,
[data-page=home] .unlock-container {
  order: unset !important;
  width: 100%;
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}

[data-page=home] .rank {
  width: 100%;
  grid-column: span 2 !important;
  grid-row: span 1 !important;
}

@media (max-width: 1199px) {
  [data-page=home] .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  [data-page=home] .rank {
    height: 347px !important;
    order: 1 !important;
    grid-column: span 2 !important;
  }
  [data-page=home] .calendar {
    height: 347px !important;
    order: 2 !important;
  }
  [data-page=home] .home__event-wrapper {
    order: 3 !important;
  }
  [data-page=home] .research-container {
    order: 4 !important;
  }
  [data-page=home] .home-leaderboard-wrapper {
    order: 5 !important;
  }
  [data-page=home] .news {
    order: 7 !important;
  }
  [data-page=home] .unlock-container {
    order: 6 !important;
    display: flex;
  }
}
@media (max-width: 768px) {
  [data-page=home] .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  [data-page=home] .rank {
    height: 347px !important;
    order: 1 !important;
    grid-column: span 1 !important;
  }
  [data-page=home] .calendar {
    height: 347px !important;
    order: 2 !important;
  }
  [data-page=home] .home__event-wrapper {
    order: 3 !important;
    height: auto !important;
  }
  [data-page=home] .research-container {
    order: 4 !important;
  }
  [data-page=home] .home-leaderboard-wrapper {
    order: 5 !important;
  }
  [data-page=home] .news {
    order: 7 !important;
  }
  [data-page=home] .unlock-container {
    order: 6 !important;
    display: flex;
    overflow: hidden;
  }
}
[data-page=home] .block {
  --border-width: 1px;
  --border-radius: 16px;
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, #0F0F11, #0F0F11);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-left: 16px;
  --padding-right: 16px;
  --background: #0f0f11;
  position: relative;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
}

[data-page=home] .block--free-bg {
  --background: transparent;
}

[data-page=home] .block::before,
[data-page=home] .block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - var(--border-width));
  background: var(--background-color);
  z-index: 0;
  pointer-events: none;
}

[data-page=home] .block::before {
  inset: 1px;
  background: rgba(15, 15, 17, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
}

[data-page=home] .block__inner {
  position: relative;
  background: var(--background);
  border-radius: var(--inner-border-radius);
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

[data-page=home] .block__inner__content {
  width: 100%;
  position: relative;
  z-index: 1;
}

[data-page=home] .rank-progress__rank-badge {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=home] .rank-progress__rank-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-page=home] .rank-progress__rank-badge[data-rank=black] {
  width: 71px !important;
  height: 71px !important;
}

[data-page=home] .rank-progress__rank-badge[data-rank=black] img {
  width: 71px !important;
  height: 71px !important;
  max-width: none !important;
  max-height: none !important;
}

[data-page=home] .rank-progress__rank-badge::before {
  --blur: 160px;
  --size: 174px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--current-color);
  opacity: 0.5;
  width: var(--size);
  height: var(--size);
  filter: blur(var(--blur));
  -webkit-filter: blur(var(--blur));
  -moz-filter: blur(var(--blur));
  -o-filter: blur(var(--blur));
  -ms-filter: blur(var(--blur));
  transform: translateZ(0);
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
}

[data-page=home] .rank-progress__rank-badge--next::before {
  background: var(--next-color);
}

[data-page=home] .rank-badge__content__lottieWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=home] .rank-badge__static-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-page=home] .rank-badge__content__lottieWrapper[data-rank=black] {
  width: 91px;
  height: 91px;
}

[data-page=home] .rank-badge__content__lottieWrapper[data-rank=black] canvas {
  width: 91px !important;
  height: 91px !important;
  max-width: none !important;
  max-height: none !important;
}

[data-page=home] .vc,
[data-page=home] .home__calender__mini {
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  pointer-events: auto !important;
}

[data-page=home] .home__calender__mini [data-vc-date-btn],
[data-page=home] .vc [data-vc-date-btn] {
  pointer-events: auto !important;
}

[data-page=home] .home__calender__mini .simplebar-scrollbar {
  pointer-events: auto !important;
}

[data-page=home] .vc.simplebar-scrollable-y .simplebar-track.simplebar-vertical {
  display: none !important;
}

@media (min-width: 769px) {
  [data-page=home] .vc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
    pointer-events: none;
  }
}
@media (max-width: 768px) {
  [data-page=home] #home__calender.dynamic-height-v2 {
    grid-template-rows: 24px auto auto 36px;
  }
  [data-page=home] .vc {
    margin-bottom: 16px;
  }
  [data-page=home] .calendar {
    height: unset !important;
  }
}
[data-page=home] .home__event-wrapper {
  grid-column: span 1;
  grid-row: span 1;
  width: 100%;
  height: 347px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=home] .home__event-top-container {
  height: 101px !important;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Base styles from macro-card--small up */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: none;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
}

/* Green glow at bottom */
[data-page=home] .home__event-top-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgb(34, 197, 94) 0%, transparent 100%);
  opacity: 0.15;
  z-index: 0;
  border-radius: 0 0 12px 12px;
}

/* Animated green border line */
[data-page=home] .home__event-top-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0) 0%, #22C55E 50%, rgba(34, 197, 94, 0) 100%);
  animation: borderSlide 3s ease-in-out infinite;
}

@keyframes borderSlide {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* Market Cap Content Styles */
[data-page=home] .market-cap-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  gap: 16px;
}

[data-page=home] .market-cap-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

[data-page=home] .market-cap-value {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 160px;
  text-align: left;
}

[data-page=home] .market-cap-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=home] .market-cap-label {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=home] .market-cap-change {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=home] .market-cap-change img {
  width: 12px;
  height: 12px;
}

[data-page=home] .market-cap-percentage {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

[data-page=home] .market-cap-percentage.up {
  color: #22C55E;
}

[data-page=home] .market-cap-percentage.down {
  color: #F43F5F;
}

/* SVG stroke colors based on up/down state */
[data-page=home] .macro-card--small.up .market-cap-chart svg path {
  stroke: #22C55E;
}

[data-page=home] .macro-card--small.down .market-cap-chart svg path {
  stroke: #F43F5F;
}

[data-page=home] .market-cap-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 0 0 66px;
  width: 66px;
}

[data-page=home] .market-cap-chart svg {
  width: 66px;
  height: 25px;
}

[data-page=home] .home__event-card {
  --padding-top: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
  --background-color: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 0, 24, 0.06) 0%, rgba(255, 0, 24, 0) 100%);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), linear-gradient(223.76deg, rgba(255, 0, 24, 0) 82.03%, rgba(255, 0, 24, 0.4) 100%), linear-gradient(136.24deg, rgba(255, 0, 24, 0) 82.03%, rgba(255, 0, 24, 0.4) 100%);
  height: 230px;
  width: 100%;
  flex-shrink: 0;
}

[data-page=home] .home__event-card .block__inner.home__event-card__inner,
[data-page=home] .home__event-card .block__inner__content.home__event-card__content {
  width: 100%;
  height: 100%;
}

[data-page=home] .home__event-card .block__inner__content.home__event-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

[data-page=home] .home__event-card .block__inner.home__event-card__inner {
  overflow: hidden;
}

[data-page=home] .home__event-card .block__inner.home__event-card__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 465px;
  height: 365px;
  background: url(/assets/backgrounds/leaderboards/bg-starts-e515af95e090ca074e6d1682b491c68c78237b24bec3a0b02927ccf4352baeaa.png) no-repeat center center;
  background-size: contain;
  pointer-events: none;
}

[data-page=home] .home__event-card .block__inner__content.home__event-card__content {
  position: relative;
}

[data-page=home] .home__event-card .block__inner__content.home__event-card__content::before {
  content: "";
  position: absolute;
  width: 296px;
  height: 296px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 17%);
  background-image: url(/assets/backgrounds/leaderboards/tournament-trophy-bd2d03fdd0a12e64f1a2059d57f116aa94f3fa847ddde555f5c280f3894552c2.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

[data-page=home] .home__event-card__header,
[data-page=home] .home__event-card__footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}

[data-page=home] .home__event-card__header {
  align-items: flex-start;
  gap: 12px;
}

[data-page=home] .home__event-card__footer {
  align-items: flex-end;
}

[data-page=home] .home__event-card__header__left {
  flex: 1;
}

[data-page=home] .home__event-card__header__left__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

[data-page=home] .home__event-card__header__left__title {
  font: var(--base-medium);
  color: rgba(255, 255, 255, 0.8980392157);
  width: 100%;
}

[data-page=home] .home__event-card__header__right__button {
  --padding-left: 8px;
  --padding-right: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  --border-radius: 48px;
  --border-color: linear-gradient(180deg, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.25) 100%);
  --background-color: linear-gradient(0deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.2)),
  radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=home] .home__event-card__header__right__button,
[data-page=home] .home__event-card__header__right__button .block__inner {
  width: max-content;
  height: auto;
}

[data-page=home] .home__event-card__header__right__button .block__inner__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: max-content;
  height: auto;
}

@keyframes pulse-live {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2), 0px 0px 0px 4px transparent;
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2), 0px 0px 4px 3px rgba(167, 243, 208, 0.1882352941);
  }
}
[data-page=home] .home__event-card__header__right__button__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A7F3D0;
  box-shadow: 0px 0px 0px 2px rgba(167, 243, 208, 0.2);
  animation: pulse-live 2.5s infinite ease-in-out;
}

[data-page=home] .home__event-card__header__right__button__text {
  font: var(--xs-medium);
  color: #A7F3D0;
  text-wrap: nowrap;
}

[data-page=home] .home__event-card__footer__left__label {
  display: flex;
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=home] .home__event-card__footer__left__title {
  font: var(--sm-medium);
  color: #FFFFFF;
  max-width: 107px;
}

[data-page=home] .home__event-card__footer__left__rank {
  --padding-top: 4px;
  --padding-bottom: 4px;
  --padding-left: 8px;
  --padding-right: 8px;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%);
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
  margin-top: 14px;
  display: none;
}

[data-page=home] .home__event-card[data-joined=true] .home__event-card__footer__left__rank {
  display: block;
}

[data-page=home] .home__event-card__footer__left__rank[data-rank=first] {
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
}

[data-page=home] .home__event-card__footer__left__rank[data-rank=second] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(188, 188, 188, 0.12) 0%, rgba(188, 188, 188, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(188, 188, 188, 0.215686) 0%, rgba(188, 188, 188, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(188, 188, 188, 0.16), rgba(188, 188, 188, 0.16));
}

[data-page=home] .home__event-card__footer__left__rank[data-rank=third] {
  --color: #DAA37D;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(218, 163, 125, 0.215686) 0%, rgba(218, 163, 125, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(218, 163, 125, 0.16), rgba(218, 163, 125, 0.16));
}

[data-page=home] .home__event-card__footer__left__rank[data-rank=others] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  --background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

[data-page=home] .home__event-card__footer__left__rank,
[data-page=home] .home__event-card__footer__left__rank .block__inner {
  width: max-content;
  height: auto;
}

[data-page=home] .home__event-card__footer__left__rank .block__inner__content {
  width: max-content;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[data-page=home] .home__event-card__footer__left__rank__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=home] .home__event-card__footer__left__rank__icon svg path {
  stroke: var(--color);
}

[data-page=home] .home__event-card__footer__left__rank__number {
  font: var(--sm-medium);
  color: var(--color);
}

[data-page=home] .home__event-card__footer__right__link:not([data-joined=true]) {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%);
  padding: 6px 12px;
  border-radius: 999px;
}

[data-page=home] .home__event-card__footer__right__link__label {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=home] .home__event-card__footer__right__link__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=home] .home__event-card__footer__right__link:hover {
  opacity: 0.8;
}

[data-page=home] .home__event-card__footer__right__link[data-joined=true] {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  will-change: opacity;
  transition: opacity 0.5s var(--easeOutQuart);
}

[data-page=home] .home__event-card__footer__right__link__label[data-joined=true] {
  font: var(--sm-medium);
  color: #fff;
}

[data-page=home] .home__event-card[data-joined=true] .home__event-card__footer__right__link[data-joined=true] {
  display: flex;
}

[data-page=home] .home__event-card:not([data-joined=true]) .home__event-card__footer__right__link:not([data-joined=true]) {
  display: flex;
}

[data-page=home] .news-card {
  width: 100%;
  flex: 1 0 0 !important;
}

[data-page=home] .news-card__inner {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

[data-page=home] .rank__icon {
  height: 16px;
  width: 16px;
}

[data-page=home] .rank__icon img {
  width: 100%;
  height: 100%;
}

@media (max-width: 769px) {
  [data-page=home] .home__event-card {
    height: 250px;
  }
  [data-page=home] .home__event-card__header__left__title {
    max-width: 90%;
  }
  [data-page=home] .home__event-card .block__inner__content.home__event-card__content::before {
    width: 388px;
    height: 248px;
    background-size: contain;
    left: auto;
    right: 0;
    transform: translate(44px, 24px);
    background-image: url(/assets/backgrounds/leaderboards/tournament-trophy-bd2d03fdd0a12e64f1a2059d57f116aa94f3fa847ddde555f5c280f3894552c2.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
}
[data-page=home] .unlock-plus-button {
  height: 36px;
}

[data-page=home] .home-popover__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  width: 100%;
  padding-bottom: 24px;
}

[data-page=home] .home-popover__top-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

[data-page=home] .home-popover__top-heading__icon {
  width: 20px !important;
  height: 20px !important;
}

[data-page=home] .home-popover__top-heading__close {
  all: initial;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  background: transparent !important;
}

[data-page=home] .home-popover__top-heading__close svg {
  width: 16px;
  height: 16px;
}

[data-page=home] .home-popover__top-heading__close svg path {
  will-change: stroke-opacity;
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

[data-page=home] .home-popover__top-heading__close:hover svg path {
  stroke-opacity: 1;
}

[data-page=home] .home-popover__top h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=home] .home-popover__bottom {
  width: 100%;
  position: relative;
}

[data-page=home] .home-popover__bottom__info {
  display: flex;
  padding: 20px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  position: relative;
}

[data-page=home] .home-popover__bottom__info.group-chat,
[data-page=home] .home-popover__bottom__info.contact-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 !important;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__info__top,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__info {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__info__icon,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__info__icon {
  width: 16px !important;
  height: 16px !important;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__info p,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__info p {
  font: var(--base-medium);
  color: #E4E4E7;
  text-wrap: nowrap;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__info__description {
  font: var(--sm-regular) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  max-width: 143px !important;
  text-wrap: wrap !important;
}

[data-page=home] .home-popover__bottom__info.group-chat[data-group-chat=news] .group-chat__info__description {
  max-width: 210px !important;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__right,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__right__link,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__right__link {
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  width: max-content;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__right__link a,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__right__link a {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=home] .home-popover__bottom__info.group-chat[data-joined=true] .group-chat__right__link {
  opacity: 0.4;
  pointer-events: none;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__right__link__icon,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__right__link__icon {
  width: 16px !important;
  height: 16px !important;
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__right__link span,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__right__link span {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=home] .home-popover__bottom__info.group-chat .group-chat__right__tutorial,
[data-page=home] .home-popover__bottom__info.contact-method .contact-method__right__tutorial {
  display: none;
}

[data-page=home] .home-popover__bottom__info .contact-method__right__tutorial a {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: underline;
  transition: color 0.4s var(--easeOutQuart);
  text-wrap: nowrap;
}

[data-page=home] [data-vc=week] {
  margin-bottom: 0;
}

.home__calender__middle__card__btn {
  border-radius: 56px;
  background: var(--primary-white-background);
  padding: 0 8px 0 10px;
  font-family: var(--font-base);
  height: 28px;
  width: 100%;
  color: #0f0f11;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
  cursor: pointer;
  transition-duration: 0.4s;
  padding: 0px 16px;
}

.home__calender__middle__card__btn:hover {
  background: var(--primary-white-background-hover);
}

/* Rank pill styling for home page - matching tournaments page */
[data-page=home] .rank[data-rank=first] {
  --color: #ECD680;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(236, 214, 128, 0.12) 0%, rgba(236, 214, 128, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(236, 214, 128, 0.215686) 0%, rgba(236, 214, 128, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(236, 214, 128, 0.16), rgba(236, 214, 128, 0.16));
}

[data-page=home] .rank[data-rank=second] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(188, 188, 188, 0.12) 0%, rgba(188, 188, 188, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(188, 188, 188, 0.215686) 0%, rgba(188, 188, 188, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(188, 188, 188, 0.16), rgba(188, 188, 188, 0.16));
}

[data-page=home] .rank[data-rank=third] {
  --color: #DAA37D;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(218, 163, 125, 0.12) 0%, rgba(218, 163, 125, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(218, 163, 125, 0.215686) 0%, rgba(218, 163, 125, 0.1) 100%);
  --background: linear-gradient(0deg, rgba(218, 163, 125, 0.16), rgba(218, 163, 125, 0.16));
}

[data-page=home] .rank[data-rank=others] {
  --color: #BCBCBC;
  --background-color: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
  --border-color: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  --background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

[data-page=home] .rank__number {
  font: var(--sm-medium);
  color: var(--color);
}

[data-page=home] .vc {
  pointer-events: none;
}

[data-page=home] .vc * {
  pointer-events: none;
}

.home-content .unlock.unlock-launch-page {
  width: 296px;
  height: 291px;
}

.home-content .unlock-placeholder {
  width: 296px;
  height: 188px;
}

.driver-popover {
  width: 400px !important;
  max-width: 400px !important;
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11 !important;
  box-shadow: none !important;
}
.driver-popover .driver-popover-title {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.driver-popover .driver-popover-description {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
}
.driver-popover .driver-popover-footer {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 0 !important;
}
.driver-popover .driver-popover-navigation-btns {
  display: contents;
}
.driver-popover .driver-popover-prev-btn {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  color: #FFFFFF;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  cursor: pointer;
  order: 1;
}
.driver-popover .driver-popover-prev-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}
.driver-popover .driver-popover-progress-text {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  color: rgba(255, 255, 255, 0.4);
  order: 2;
}
.driver-popover .driver-popover-next-btn,
.driver-popover .driver-popover-done-btn {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  color: #FFFFFF;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  cursor: pointer;
  order: 3;
}
.driver-popover .driver-popover-next-btn:hover,
.driver-popover .driver-popover-done-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}
.driver-popover .driver-popover-close-btn {
  color: rgba(255, 255, 255, 0.4);
}
.driver-popover .driver-popover-close-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}
.driver-popover .driver-popover-arrow {
  display: none !important;
}

.driver-popover.dojo-tour__coinw-step .dojo-tour__coinw-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.driver-popover.dojo-tour__coinw-step .dojo-tour__coinw-title img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.driver-popover.dojo-tour__coinw-step .driver-popover-description p {
  margin: 0 0 16px 0;
}
.driver-popover.dojo-tour__coinw-step .dojo-tour__coinw-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.driver-popover.dojo-tour__coinw-step .dojo-tour__coinw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.driver-popover.dojo-tour__coinw-step .dojo-tour__coinw-button img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.driver-popover.dojo-tour__coinw-step .dojo-tour__coinw-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

[data-page=home] .unlock-placeholder .gauge-modern {
  width: 160px;
  height: 89px;
}

[data-page=home] .unlock-placeholder .gauge-modern svg {
  width: 160px;
  height: 89px;
}

[data-page=home] .unlock-placeholder .sentiment-indicator {
  width: 26px;
  height: 26px;
}

[data-page=home] .unlock-placeholder .sentiment-indicator svg {
  width: 26px;
  height: 26px;
}

[data-page=home] .unlock-placeholder .sentiment-score {
  font-size: 32px;
  line-height: 32px;
}

[data-page=home] .unlock-placeholder .sentiment-label {
  font-size: 12px;
  line-height: 16px;
}

[data-page=home] .unlock-placeholder .sentiment-widget__title {
  text-align: center;
  font-family: "Open Runde";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin: 0; /* quitar espacio superior */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[data-page=home] .unlock-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px; /* espacio superior */
  gap: 8px; /* espacio entre elementos internos */
}

[data-page=home] .gauge-modern {
  margin-top: 16px !important;
}

[data-page=home] .unlock-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0; /* eliminar espacio superior */
  gap: 8px;
  --padding-top: 0; /* anula padding-top definido en block */
}

[data-page=home] .unlock-placeholder .gauge-modern {
  margin-top: 84px !important; /* baja el semicírculo */
}

[data-page=home] .unlock-placeholder .gauge-modern {
  margin-top: 4px !important;
}

[data-page=home] .unlock-placeholder .sentiment-score,
[data-page=home] .unlock-placeholder .sentiment-label {
  margin: 0;
}

[data-page=home] .unlock-placeholder .sentiment-container {
  margin-top: 24px;
  margin-bottom: 0px;
}

[data-page=home] .unlock-placeholder .sentiment-score {
  margin-top: -8px;
}

[data-page=home] .unlock-placeholder .sentiment-label {
  margin-top: -2px;
}

[data-page=home] .unlock-placeholder .gauge-modern {
  margin: 0 !important; /* elimina márgenes predefinidos */
  transform: translateY(35px); /* desplaza el gauge hacia abajo */
}

[data-page=home] .unlock-placeholder {
  gap: 0;
}

[data-page=home] .unlock-placeholder .sentiment-container {
  margin-top: 0;
}

[data-page=home] .unlock-placeholder .gauge-modern {
  transform: none;
}

[data-page=home] .unlock-placeholder .gauge-modern {
  transform: translateY(20px);
}

[data-page=home] .sentiment-container {
  position: relative;
  --sentiment-color: #FDE047;
  overflow: hidden;
  border-radius: 20px;
}

[data-page=home] .unlock-placeholder {
  border-radius: 16px;
  background: #18191d;
  border: 1.5px solid #232323;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1333333333);
  overflow: hidden;
}

[data-page=home] .unlock-placeholder .sentiment-container {
  margin: 24px 0 0 0;
  position: relative;
  --sentiment-color: #FDE047;
  overflow: hidden;
  border-radius: 0px;
}

[data-page=home] .unlock-placeholder .sentiment-score-container {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  transform: translateY(-12px);
}

[data-page=home] .unlock-placeholder .sentiment-glow {
  width: 120px;
  height: 120px;
  transform: translate(-100%, -100%);
}

[data-page=home] .unlock-placeholder-card {
  position: relative;
  --sentiment-color: #FDE047;
  overflow: hidden;
}

[data-page=home] .unlock-placeholder-card::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  opacity: 0.6;
  background: linear-gradient(90deg, transparent 0%, var(--sentiment-color) 35%, var(--sentiment-color) 65%, transparent 100%);
  border-radius: 0 0 18px 18px;
  pointer-events: none;
}

[data-page=home] .unlock-placeholder-card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
  opacity: 0.15;
  background: radial-gradient(70% 100% at 50% 100%, var(--sentiment-color) 0%, transparent 100%);
  border-radius: inherit;
  z-index: 0;
}

[data-page=home] .unlock-placeholder .sentiment-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, var(--sentiment-color) 0%, transparent 100%);
  opacity: 0.1;
  z-index: 0;
}

@media (max-width: 480px) {
  [data-page=home] .unlock-placeholder,
  [data-page=home] .unlock-placeholder-card,
  [data-page=home] .unlock {
    width: 100% !important;
    height: auto !important;
  }
  [data-page=home] .unlock-placeholder .gauge-modern {
    transform: translateY(0);
  }
}
@media (max-width: 1199px) {
  [data-page=home] .unlock-placeholder {
    width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 1199px) {
  [data-page=home] .unlock {
    width: 100% !important;
    height: auto !important;
  }
  [data-page=home] .unlock-top {
    width: 100% !important;
  }
}
[data-page=home] .unlock-placeholder {
  border-radius: 16px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1.5 px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1333333333);
  overflow: hidden;
}

[data-page=home] .sentiment-card {
  width: 296px !important;
  height: 188px !important;
  flex: none !important;
}

[data-page=home] .sentiment-card__inner {
  height: 100% !important;
}

[data-page=home] .sentiment-card__inner .gauge-modern {
  width: 160px;
  height: 89px;
}

[data-page=home] .sentiment-card__inner .gauge-modern svg {
  width: 160px;
  height: 89px;
}

[data-page=home] .sentiment-card__inner .sentiment-indicator {
  width: 26px;
  height: 26px;
}

[data-page=home] .sentiment-card__inner .sentiment-indicator svg {
  width: 26px;
  height: 26px;
}

[data-page=home] .sentiment-card__inner .sentiment-score {
  font-size: 32px;
  line-height: 32px;
  margin-top: -8px;
}

[data-page=home] .sentiment-card__inner .sentiment-label {
  font-size: 12px;
  line-height: 16px;
  margin-top: -2px;
}

[data-page=home] .sentiment-card__inner .sentiment-container {
  margin: 24px 0 0 0;
  position: relative;
  --sentiment-color: #FDE047;
  overflow: visible; /* permitir que se vea el brillo */
  border-radius: 0;
}

[data-page=home] .sentiment-card__inner .sentiment-score-container {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  transform: translateY(-12px);
}

[data-page=home] .sentiment-card__inner .sentiment-glow {
  width: 120px;
  height: 120px;
  transform: translate(-100%, -100%);
}

[data-page=home] .sentiment-card {
  position: relative;
  --sentiment-color: #FDE047;
  overflow: hidden;
}

[data-page=home] .sentiment-card::after {
  position: relative;
  top: 20px;
}

[data-page=home] .sentiment-card__inner .sentiment-container::after {
  bottom: 0 !important; /* dentro del borde pero visible */
}

[data-page=home] .sentiment-card__inner .sentiment-score-container {
  margin-top: 0;
  transform: translateY(-42px); /* eleva el contador */
}

[data-page=home] .sentiment-card__inner .sentiment-widget__title {
  text-align: center;
  font-family: "Open Runde";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.unlock-card {
  height: 291px;
  overflow: hidden;
}

/* Home ─ Sentiment widget */
.sentiment-card__inner {
  position: relative; /* crea contexto de recorte               */
  overflow: hidden; /* todo lo que sobresalga queda oculto     */
  border-radius: inherit; /* sigue el mismo redondeo del contenedor */
}

[data-page=home] .sentiment-card-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sentiment-underline-color, #FDE047) 15%, var(--sentiment-underline-color, #FDE047) 85%, transparent 100%);
  opacity: 0.4;
}

/* --- Responsive fix up to tablet (≤768px) --- */
@media (max-width: 1199px) {
  [data-page=home] .sentiment-card {
    width: 100% !important;
    height: 188px !important;
  }
  [data-page=home] .sentiment-card__inner {
    width: 100% !important;
    height: 100% !important;
  }
  [data-page=home] .unlock-card {
    width: 100% !important;
    height: 227px !important;
  }
  [data-page=home] .unlock-card .unlock {
    width: 100% !important;
    height: 100% !important;
  }
  [data-page=home] .sentiment-container,
  [data-page=home] .live-call-card__inner {
    padding: 16px !important;
  }
}
.support-cards-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.card-link {
  display: block;
  text-decoration: none;
}

.home-leaderboard-content {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1200px) {
  .home-leaderboard-content {
    gap: 0px;
    justify-content: space-between;
  }
}

[data-page=checkout] #checkout-page {
  width: 100%;
  height: auto;
  padding: 40px 0;
  overflow: hidden;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper {
  width: 1232px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method {
  gap: 16px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left {
  width: 401px;
  height: max-content;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--background-checkout-card);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--white-20), transparent);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .main_top_sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .main_top_sub .main_top_sub_text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=checkout] #checkout-page .h6 {
  font: var(--base-medium);
  background: var(--white-90);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=checkout] #checkout-page .h5 {
  font: var(--small-medium);
  color: var(--white);
}

[data-page=checkout] #checkout-page .p {
  font: var(--body-regular);
  color: var(--white-40);
}

[data-page=checkout] #checkout-page .span {
  font: var(--small-medium);
  color: var(--white-40);
}

[data-page=checkout] #checkout-page .button_code {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  transition: background 0.4s var(--easeOutQuart);
}

[data-page=checkout] #checkout-page .button_code:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-page=checkout] #checkout-page .button_code > p {
  font: var(--small-medium);
  background: var(--text-background-input);
  background-clip: text !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .main_top_access {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .main_top_access .main_top_access_items {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .main_top_access .main_top_access_items > img {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top .main_top_access .main_top_access_items .main_top_access_items_content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_applycode {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_applycode > input {
  width: 274px;
  height: 40px;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--background-input);
  color: var(--white);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_total {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_total .main_bottom_total_discount {
  display: none;
  flex-direction: column;
  gap: 8px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_total .main_bottom_total_discount .main_bottom_total_code > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_total .price_today {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.price_today_total_due_today h6,
.price_today_total_due_today p {
  width: max-content;
}

.price_today_total_due_today p {
  font: var(--body-regular);
  color: var(--white-40);
  letter-spacing: 0px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  max-width: 504px;
}

[data-page=checkout] #checkout-page .checkout-page_method_grid-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

[data-page=checkout] #checkout-page .checkout-page_method_grid-bottom > a {
  font: var(--body-regular);
  color: var(--white-40);
  cursor: pointer;
  transition: color 0.4s var(--easeOutQuart);
}

[data-page=checkout] #checkout-page .checkout-page_method_grid-bottom > a:hover {
  color: var(--white);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .checkout-page_method_selection {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_method {
  flex: 1;
  width: auto;
  height: 72px;
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  transition: 0.2s var(--easeInOutQuart);
  border: 1px solid;
  border-color: transparent;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_method:hover,
[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_method.active {
  border-color: var(--white-60);
  background: rgba(255, 255, 255, 0.12);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_method .cards_method_content {
  display: flex;
  align-items: center;
  gap: 3px;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_method .cards_method_content > span {
  font: var(--paragraph-medium);
  color: var(--white-60);
  transform: translateY(0.1em);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail {
  width: 40px;
  height: 72px;
  padding: 12px;
  display: flex;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  cursor: pointer;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail > img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub {
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.6s var(--easeOutQuart);
  min-width: 100px;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  z-index: 1;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button {
  padding: 10px 0;
  position: relative;
  transition: background 0.4s var(--easeOutQuart);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button[data-crypto-method-logo=klarna] img {
  filter: invert(1);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);
  box-shadow: 0 0 1000px #ffffff;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button.active,
[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button:hover {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button.active::after,
[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail .cards_detail--sub button:hover::after {
  opacity: 1;
}

[data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_detail.toggled .cards_detail--sub {
  opacity: 1 !important;
  pointer-events: auto !important;
}

[data-page=checkout] #checkout-page .checkout-page_method .info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input > label {
  font: var(--paragraph-medium);
  color: var(--white-40);
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input > select,
[data-page=checkout] #checkout-page .checkout-page_method .info .info_input > input {
  font: var(--paragraph-medium);
  color: var(--white);
  width: 100%;
  display: flex;
  padding: 12px 16px;
  align-items: center;
  align-self: stretch;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--background-input);
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input > select {
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--white-40);
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input > select option {
  font: var(--paragraph-medium);
  color: var(--white-40);
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input.info_input_credit {
  display: flex;
  justify-content: center;
  position: relative;
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input.info_input_credit .info_input_credit_items {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
}

[data-page=checkout] #checkout-page .checkout-page_method .info .info_input_number {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-page=checkout] #checkout-page .checkout-page_method .info .checkbox_input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

[data-page=checkout] #checkout-page .checkout-page_method .checkbox_input > input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%), #0f0f11;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

[data-page=checkout] #checkout-page .checkout-page_method .checkbox_input > input[type=checkbox]::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: url(/assets/icons/ticked-1a1bb9c2232a0e89f70e8b3e2bbdb9f54cd71a36c9cd4365f497f93d816b49f0.svg) center no-repeat;
  background-size: 12px;
  opacity: 0;
}

[data-page=checkout] #checkout-page .checkout-page_method .checkbox_input > input[type=checkbox]:checked:after {
  opacity: 1;
}

[data-page=checkout] #checkout-page .checkout-page_method .info .checkbox_input > p {
  font: var(--body-regular);
  color: var(--white-60);
}

[data-page=checkout] #checkout-page .button_securely {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

[data-page=checkout] #checkout-page .button_securely a {
  color: #fff;
}

[data-page=checkout] #checkout-page .button_securely a:hover {
  text-decoration: underline;
}

[data-page=checkout] #checkout-page .button_securely > p {
  font: var(--body-regular);
  color: var(--white-40);
  text-align: center;
  line-height: 150%;
  padding: 0 24px;
}

[data-page=checkout] #checkout-page .checkout-disclaimer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

[data-page=checkout] #checkout-page .checkout-disclaimer a {
  color: #fff;
}

[data-page=checkout] #checkout-page .checkout-disclaimer a:hover {
  text-decoration: underline;
}

[data-page=checkout] #checkout-page .checkout-disclaimer > p {
  font: var(--body-regular);
  color: var(--white-40);
  text-align: center;
  line-height: 150%;
  padding: 0 24px;
}

[data-page=checkout] #checkout-page .button_securely .button {
  width: 100%;
  height: 40px;
  display: flex;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  border-radius: 20px;
  background: #e4e4e7;
  transition: 0.4s var(--easeInOutQuart);
}

[data-page=checkout] #checkout-page .button_securely .button:hover {
  background: #ffffff;
}

[data-page=checkout] #checkout-page[data-method=paypal] .button_securely .button {
  background: #ffc439;
}

[data-page=checkout] #checkout-page[data-method=paypal] .button_securely .button:hover {
  background: #ffb300;
}

[data-page=checkout] #checkout-page[data-method=apple] .button_securely .button span,
[data-page=checkout] #checkout-page[data-method=googlepay] .button_securely .button span {
  display: none;
}

[data-page=checkout] #checkout-page[data-method=klarna] .button_securely .button {
  background: #ffb1d1;
}

[data-page=checkout] #checkout-page[data-method=klarna] .button_securely .button:hover {
  background: #ff79b1;
}

[data-page=checkout] #checkout-page[data-method=coinbase] .button_securely .button {
  background: #0052ff;
}

[data-page=checkout] #checkout-page[data-method=coinbase] .button_securely .button:hover {
  background: #0046dd;
}

[data-page=checkout] #checkout-page[data-method=apple] .button_securely .button,
[data-page=checkout] #checkout-page[data-method=googlepay] .button_securely .button {
  border: 1px solid #fff;
  background: #0f0f11;
}

[data-page=checkout] #checkout-page[data-method=apple] .button_securely .button:hover,
[data-page=checkout] #checkout-page[data-method=googlepay] .button_securely .button:hover {
  border: 1px solid #fafafa;
  background: #000000;
}

[data-page=checkout] #checkout-page[data-method=coinbase] .button_securely .button span {
  color: var(--white);
}

[data-page=checkout] #checkout-page .button_securely .button > span {
  font: var(--small-medium);
  color: var(--back-900);
}

[data-page=checkout] #checkout-page .checkout-page_method .checkout-page_method_crypto {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.method_crypto_cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.method_crypto_cards_botton {
  width: 224px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s var(--easeInOutQuart);
  border: 1px solid;
  border-color: transparent;
  flex-grow: 1;
}

.method_crypto_cards_botton:hover,
.method_crypto_cards_botton.active {
  border-color: var(--white-60);
  background: rgba(255, 255, 255, 0.12);
}

[data-page=checkout] #checkout-page .checkout-page_method .checkbox_input {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=checkout] #checkout-page .checkout-page_method .checkbox_input > p {
  font: var(--body-regular);
  color: var(--white-60);
}

.method_crypto_partners {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--background-partner-cypto);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.method_crypto_partners > h6 {
  font: var(--small-medium);
  color: #E4E4E7;
}

.method_crypto_partners > p {
  font: var(--paragraph-regular);
  color: var(--white-40);
  width: 342px;
  line-height: 20px;
}

.method_crypto_partners .provider-text {
  color: var(--white-40);
}

.method_crypto_partners .provider-name {
  color: var(--white-80);
}

.checkout-page_method {
  display: flex;
  flex-direction: column;
}

.checkout-page_method_right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.checkout-page_method_crypto {
  display: none !important;
}

[data-active-method=crypto] .checkout-page_method_crypto {
  display: flex !important;
  flex-direction: column;
  gap: 32px;
}

.payment-forms .payment-form {
  display: none;
}

.payment-forms[data-active-payment=stripe] .payment-form[data-payment-method=stripe],
.payment-forms[data-active-payment=paypal] .payment-form[data-payment-method=paypal],
.payment-forms[data-active-payment=coinbase] .payment-form[data-payment-method=coinbase],
.payment-forms[data-active-payment=nowpayments] .payment-form[data-payment-method=nowpayments],
.payment-forms[data-active-payment=copperx] .payment-form[data-payment-method=copperx] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.provider-text {
  display: none;
}
.provider-text.active {
  display: inline;
}

.button--paypal {
  background: #ffc439 !important;
}
.button--paypal:hover {
  background: #ffb300 !important;
}

.button--coinbase {
  background: #0052ff !important;
}
.button--coinbase span {
  color: #ffffff !important;
}
.button--coinbase:hover {
  background: #0046dd !important;
}

@media (max-width: 63.99375em) {
  [data-page=checkout] #checkout-page {
    padding: 20px 0 40px;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method {
    gap: 32px;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper {
    width: 100%;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left--desktop {
    display: none;
  }
  [data-page=checkout] .checkout-page_method_left--mobile {
    display: block;
    margin-top: 8px;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left {
    width: 100%;
    height: max-content;
    padding: 0;
    border-radius: 0;
    border: initial;
    background: initial;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right {
    width: 100%;
    padding: 0;
    border-radius: 0;
    border: initial;
    background: initial;
  }
  .method_crypto_cards_botton {
    width: calc(50% - 4px);
  }
  [data-page=checkout] #checkout-page .checkout-page_method .info .checkbox_input {
    font: var(--body-regular);
    color: var(--white-60);
    position: relative;
  }
  [data-page=checkout] #checkout-page .checkout-page_method .checkbox_input.checkbox_input--border-bottom-mobile {
    position: relative;
    margin-bottom: 32px;
  }
  [data-page=checkout] #checkout-page .checkout-page_method .checkbox_input.checkbox_input--border-bottom-mobile::after {
    content: "";
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--white-20), transparent);
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_bottom .main_bottom_applycode > input {
    flex: 1;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_left .main .main_top {
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  }
  [data-page=checkout] #checkout-page[data-step="1"] .button_securely.button_securely--mobile-step-one,
  [data-page=checkout] #checkout-page[data-step="2"] .button_securely.button_securely--mobile-step-one,
  [data-page=checkout] #checkout-page[data-step="3"] .button_securely.button_securely--mobile-step-one,
  [data-page=checkout] #checkout-page[data-step="0"] .button_securely.button_securely--mobile-step-above {
    display: none !important;
  }
  [data-page=checkout] #checkout-page .checkout-page_method_grid-bottom {
    margin-top: -8px;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_buttons {
    overflow-y: hidden;
    width: 312px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_buttons::-webkit-scrollbar {
    display: none;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right .cards .cards_method {
    min-width: 104px;
  }
}
@media (min-width: 64em) {
  .checkout-page_method {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
  }
  .checkout-page_method_left {
    flex: none;
  }
  .checkout-page_method_right {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  [data-page=checkout] #checkout-page .checkout-page_wrapper .checkout-page_method .checkout-page_method_right {
    width: 504px;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: var(--background-checkout-card);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .checkout-page_method_forms {
    width: 100%;
    border-radius: 0;
    border: none;
    background: transparent;
    margin: 0;
    align-self: end;
  }
}
[data-page=resources] .resources-contents {
  width: 608px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 0;
  margin: 0 auto;
}

[data-page=resources] .resources-contents .resources-contents_toolswiki {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

[data-page=resources] .resources-contents .resources-contents_toolswiki.resources-contents_toolswiki--border-bottom {
  padding-bottom: 24px;
}

.resources-contents .resources-contents_toolswiki.resources-contents_toolswiki--border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--white-20), transparent);
}

[data-page=resources] .resources-contents .resources-contents_toolswiki > h5 {
  font: var(--h5-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items.filter_items--wiki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 40.5px;
}

[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items .filter_items__button {
  border-radius: 56px;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 12px;
  width: max-content;
  transition: background 0.4s var(--easeInOutQuart);
}

[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items .filter_items__button > p {
  font: var(--small-medium);
  background: linear-gradient(180deg, var(--white-40) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.4s var(--easeInOutQuart);
}

[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items .filter_items__button:hover,
[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items .filter_items__button.selected {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
}

[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items .filter_items__button:hover > p,
[data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items .filter_items__button.selected > p {
  background: linear-gradient(180deg, var(--white) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
}

[data-page=resources] .resources-contents .resources-contents_toptools {
  width: 100%;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=resources] .resources-contents .resources-contents_toptools > h4 {
  font: var(--h4-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items {
  display: flex;
  padding: 24px;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  position: relative;
}

[data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 16px;
  z-index: -1;
  pointer-events: none;
}

[data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items::after {
  content: "";
  position: absolute;
  right: 80px;
  width: 150px;
  height: 150px;
  top: -25.199px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  pointer-events: none;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=bitget] {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(29, 162, 180, 0.06) 0%, rgba(29, 162, 180, 0) 100%), #0f0f11;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=bitget]::before {
  background-image: linear-gradient(0deg, rgba(29, 162, 180, 0.04), rgba(29, 162, 180, 0.04)), linear-gradient(273.39deg, rgba(29, 162, 180, 0.04) 0%, rgba(29, 162, 180, 0.04) 100%);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=binance] {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(243, 186, 47, 0.06) 0%, rgba(243, 186, 47, 0) 100%), #0f0f11;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=binance]::before {
  background-image: linear-gradient(0deg, rgba(243, 186, 47, 0.04), rgba(243, 186, 47, 0.04)), linear-gradient(273.39deg, rgba(243, 186, 47, 0.04) 0%, rgba(243, 186, 47, 0.04) 100%);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=spotify] {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(30, 215, 96, 0.06) 0%, rgba(30, 215, 96, 0) 100%), #0f0f11;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=spotify]::before {
  background-image: linear-gradient(0deg, rgba(30, 215, 96, 0.04), rgba(30, 215, 96, 0.04)), linear-gradient(273.39deg, rgba(30, 215, 96, 0.04) 0%, rgba(30, 215, 96, 0.04) 100%);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_left {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_left > img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_left .toptools_cards__items_left_top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_left .toptools_cards__items_left_top .toptools_cards__items_left_top_bitget > img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_left .toptools_cards__items_left_top > h5 {
  font: var(--h5-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_left .toptools_cards__items_left_top > p {
  font: var(--small-medium);
  color: var(--white-50);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 56px;
  z-index: 2;
  cursor: pointer;
  transition: 0.4s var(--easeOutQuart);
  flex: 0 0 auto;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_right::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(100% + 17px);
  border-radius: 56px;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  pointer-events: none;
  transition: 0.4s var(--easeOutQuart);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_right > p {
  font: var(--small-medium);
  color: var(--white-90);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items .toptools_cards__items_right > img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=bitget] .toptools_cards__items_right {
  border: 1px solid rgba(29, 162, 180, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(29, 162, 180, 0.08) 0%, rgba(29, 162, 180, 0) 100%), rgba(29, 162, 180, 0.08);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=bitget] .toptools_cards__items_right::after {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(29, 162, 180, 0.08) 0%, rgba(29, 162, 180, 0) 100%), rgba(29, 162, 180, 0.08);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=bitget]:hover .toptools_cards__items_right {
  border: 1px solid rgba(29, 162, 180, 0.4);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(29, 162, 180, 0.1) 0%, rgba(29, 162, 180, 0) 100%), rgba(29, 162, 180, 0.1);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=bitget]:hover .toptools_cards__items_right::after {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(29, 162, 180, 0.1) 0%, rgba(29, 162, 180, 0) 100%), rgba(29, 162, 180, 0.1);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=binance] .toptools_cards__items_right {
  border: 1px solid rgba(243, 186, 47, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(243, 186, 47, 0.08) 0%, rgba(243, 186, 47, 0) 100%), rgba(243, 186, 47, 0.08);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=binance] .toptools_cards__items_right::after {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(243, 186, 47, 0.08) 0%, rgba(243, 186, 47, 0) 100%), rgba(243, 186, 47, 0.08);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=binance]:hover .toptools_cards__items_right {
  border: 1px solid rgba(243, 186, 47, 0.4);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(243, 186, 47, 0.1) 0%, rgba(243, 186, 47, 0) 100%), rgba(243, 186, 47, 0.1);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=binance]:hover .toptools_cards__items_right::after {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(243, 186, 47, 0.1) 0%, rgba(243, 186, 47, 0) 100%), rgba(243, 186, 47, 0.1);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=spotify] .toptools_cards__items_right {
  border: 1px solid rgba(30, 215, 96, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(30, 215, 96, 0.08) 0%, rgba(30, 215, 96, 0) 100%), rgba(30, 215, 96, 0.08);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=spotify] .toptools_cards__items_right::after {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(30, 215, 96, 0.08) 0%, rgba(30, 215, 96, 0) 100%), rgba(30, 215, 96, 0.08);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=spotify]:hover .toptools_cards__items_right {
  border: 1px solid rgba(30, 215, 96, 0.4);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(30, 215, 96, 0.1) 0%, rgba(30, 215, 96, 0) 100%), rgba(30, 215, 96, 0.1);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=spotify]:hover .toptools_cards__items_right::after {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(30, 215, 96, 0.1) 0%, rgba(30, 215, 96, 0) 100%), rgba(30, 215, 96, 0.1);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(108, 79, 255, 0.06) 0%, rgba(108, 79, 255, 0) 100%), #0f0f11;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw]::before {
  background-image: linear-gradient(0deg, rgba(108, 79, 255, 0.04), rgba(108, 79, 255, 0.04)), linear-gradient(273.39deg, rgba(108, 79, 255, 0.04) 0%, rgba(108, 79, 255, 0.04) 100%);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] .toptools_cards__items_right--multi {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] .toptools_cards__items_right_btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 56px;
  z-index: 2;
  cursor: pointer;
  transition: 0.4s var(--easeOutQuart);
  border: 1px solid rgba(108, 79, 255, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(108, 79, 255, 0.08) 0%, rgba(108, 79, 255, 0) 100%), rgba(108, 79, 255, 0.08);
  text-decoration: none;
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] .toptools_cards__items_right_btn > p {
  font: var(--small-medium);
  color: var(--white-90);
}

.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] .toptools_cards__items_right_btn:hover {
  border: 1px solid rgba(108, 79, 255, 0.4);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(108, 79, 255, 0.1) 0%, rgba(108, 79, 255, 0) 100%), rgba(108, 79, 255, 0.1);
}

[data-page=resources] .resources-contents .resources-contents_wiki {
  width: 100%;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=resources] .resources-contents .resources-contents_toptools .heading,
[data-page=resources] .resources-contents .resources-contents_wiki .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=resources] .resources-contents .resources-contents_toptools .heading > h4,
[data-page=resources] .resources-contents .resources-contents_wiki .heading > h4 {
  font: var(--h4-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources] .resources-contents .resources-contents_toptools .heading > a,
[data-page=resources] .resources-contents .resources-contents_wiki .heading > a {
  font: var(--sm-regular);
  color: var(--white-50);
  transition: color 0.4s var(--easeInOutQuart);
}

[data-page=resources] .resources-contents .resources-contents_toptools .heading > a:hover,
[data-page=resources] .resources-contents .resources-contents_wiki .heading > a:hover {
  color: var(--white-80);
}

[data-page=resources] .resources-contents .resources-contents_wiki .element {
  padding: 8px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--root-background-color);
  height: 482px;
}

[data-page=resources] .resources-contents .resources-contents_wiki .element.gradient-border_inner {
  border: none !important;
}

[data-page=resources] .resources-contents .resources-contents_wiki .simplebar-track.simplebar-vertical {
  margin: 20px 0;
}

[data-page=resources] .resources-contents .resources-contents_wiki .simplebar-content {
  padding: 0px !important;
  min-height: 100%;
}

[data-page=resources] .resources-contents .resources-contents_wiki .simplebar-offset {
  padding: 8px 24px;
}

[data-page=resources] .resources-contents .element .element_items {
  display: flex;
  padding: 21px 0px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  justify-content: space-between;
  position: relative;
}

[data-page=resources] .resources-contents .element .element_items::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--white-20), transparent);
  transition: background 0.6s var(--easeOutQuart);
}

[data-page=resources] .resources-contents .element .element_items .element_items_left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 544px;
  overflow: hidden;
}

[data-page=resources] .resources-contents .element .element_items .element_items_left > p {
  font: var(--body-medium);
  color: var(--white-80);
}

[data-page=resources] .resources-contents .element .element_items .element_items_left > span {
  font: var(--sm-regular);
  color: var(--white-40);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

[data-page=resources] .resources-contents .element .element_items .element_items_right {
  opacity: 0.5;
  will-change: opacity;
  transition: opacity 0.6s var(--easeOutQuart);
}

[data-page=resources] .resources-contents .element .element_items:hover .element_items_right {
  opacity: 1;
}

[data-page=resources] .resources-contents .element .element_items:hover:after {
  background: linear-gradient(to right, transparent, var(--white-80), transparent);
}

[data-page=resources] .resources-contents .element .element_cards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  position: relative;
  cursor: pointer;
  height: 92px;
}

[data-page=resources] .resources-contents .element .element_cards::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--white-20), transparent);
  transition: background 0.6s var(--easeInOutQuart);
}

[data-page=resources] .resources-contents .element .element_cards > img {
  opacity: 0.5;
  will-change: opacity;
  transition: opacity 0.6s var(--easeOutQuart);
}

[data-page=resources] .resources-contents .element .element_cards:hover > img {
  opacity: 1;
}

[data-page=resources] .resources-contents .element .element_cards:hover::after {
  background: linear-gradient(to right, transparent, var(--white-80), transparent);
}

[data-page=resources] .resources-contents .element .element_cards .element_cards__items_left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.resources-contents .element .element_cards .element_cards__items_left .element_cards__items_left_top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resources-contents .element .element_cards .element_cards__items_left .element_cards__items_left_top .kyc {
  display: flex;
  align-items: center;
  gap: 12px;
}

.element .element_cards .element_cards__items_left .element_cards__items_left_top .kyc > h5 {
  font: var(--h5-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

.element .element_cards .element_cards__items_left .element_cards__items_left_top > h5 {
  font: var(--h5-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}

.element .element_cards .element_cards__items_left .element_cards__items_left_top .kyc > p {
  font: var(--small-medium);
  color: var(--white-40);
}

.resources-contents .element .element_cards .element_cards__items_left .element_cards__items_left_top > p {
  font: var(--small-medium);
  color: var(--white-40);
}

[data-page=resources] .resources-contents .element .element_cards .element_cards__items_left > p {
  font: var(--small-medium);
  color: var(--white-50);
}

[data-page=resources] .resources-contents .resources-contents_search {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=resources] .resources-contents .resources-contents_search .input-search form {
  width: 100%;
  height: 52px;
  position: relative;
  display: flex;
  align-items: center;
}

[data-page=resources] .resources-contents .resources-contents_search .input-search input {
  width: 100%;
  height: 100%;
  padding: 8px 8px 8px 24px;
  border-radius: 128px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--root-background-color);
  color: var(--white-80) !important;
  font: var(--body-medium);
}

[data-page=resources] .resources-contents .resources-contents_search .input-search input::placeholder {
  background: var(--text-background-input);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources] .resources-contents .resources-contents_search .input-search .input-search_icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
  position: absolute;
  right: 8px;
}

[data-page=resources] .resources-contents .resources-bento-image {
  width: 606px;
  height: 218px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
[data-page=resources] .resources-contents .resources-bento-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 63.99375em) {
  [data-page=resources] .resources-contents {
    width: 100%;
    padding: 20px 0 40px 0;
    margin: 0 auto;
  }
  [data-page=resources] .resources-contents .resources-bento-image {
    width: 353px;
    height: 126.987px;
  }
  [data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items {
    padding: 16px 24px;
  }
  [data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items::after {
    content: "";
    right: 43px;
  }
  [data-page=resources] .resources-contents .element .element_items .element_items_left {
    width: 289px;
  }
  [data-page=resources] .resources-contents .resources-contents_toolswiki.resources-contents_toolswiki-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    position: relative;
  }
  [data-page=resources] .resources-contents .resources-contents_toolswiki > h5 {
    font: var(--lg-medium);
  }
  .resources-contents .element .element_cards .element_cards__items_left .element_cards__items_left_top {
    width: fit-content;
  }
  [data-page=resources] .resources-contents .resources-contents_toolswiki .filter_items.filter_items--wiki {
    padding: 0 16px;
  }
  [data-page=resources] .resources-contents .element .element_cards {
    height: 104px;
  }
}
.resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] .toptools_cards__items_right_btn .toptools_cards__items_right_btn_glyph {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 63.99375em) {
  [data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  [data-page=resources] .resources-contents .resources-contents_toptools .toptools_cards .toptools_cards__items[data-type=coinw] .toptools_cards__items_right--multi {
    width: 100%;
    justify-content: flex-start;
  }
}
[data-page=resources-detail] #wiki-detail {
  width: 100%;
  height: auto;
  padding: 40px 0 80px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper {
  width: 608px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 40px;
  padding-bottom: 20px;
}

[data-page=resources-detail] .wrapper_top--border-bottom::after {
  display: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--white-20), transparent);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .return {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .return > img {
  transform: rotate(-180deg);
  opacity: 0.4;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .return > p {
  font: var(--small-medium);
  color: var(--white-40);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart > p {
  font: var(--small-medium);
  color: var(--white-80);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart > h3 {
  font: var(--h3-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  flex-wrap: wrap;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items .filter_items__button {
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: var(--primary-black-background);
  will-change: background;
  transition: background 0.5s var(--easeInOutQuart);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items .filter_items__button > p {
  font: var(--small-medium);
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.5s var(--easeInOutQuart);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items .filter_items__button:hover,
[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items .filter_items__button.active {
  background: var(--primary-black-background-hover);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items .filter_items__button:hover > p,
[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items .filter_items__button.active > p {
  font: var(--small-medium);
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 56px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid > span {
  font: var(--post-regular);
  color: var(--white-60);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid .wrapper_imgorvid_image {
  width: 100%;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid .wrapper_imgorvid_image > p {
  font: var(--post-regular);
  color: var(--white-40);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  margin-top: -6px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main > h5 {
  font: var(--h5-medium);
  background: var(--white-90);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list {
  list-style-type: disc;
  list-style-position: outside;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list > li {
  color: var(--white-80);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_list_heading {
  font: var(--post-regular);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_list_heading > a {
  font: var(--post-regular);
  color: var(--text-color-link);
  border-bottom: 1px solid var(--text-color-link);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_list_heading > a > svg {
  width: 13px;
  height: 13px;
  transform: translate(0px, 2.5px);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_card {
  margin-top: 24px;
  width: 100%;
  padding: 24px;
  border-radius: 20px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.04);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_card > p {
  font: var(--post-regular);
  color: var(--text-card);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wiki-detail-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
  padding-top: 24px;
}
@media (min-width: 64em) {
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wiki-detail-content {
    padding-top: 40px;
    gap: 40px;
  }
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wiki-detail-content:has(> .ql-container:first-child) {
  padding-top: 0;
  margin-top: -5px;
}
@media (min-width: 64em) {
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wiki-detail-content:has(> .ql-container:first-child) {
    margin-top: 0;
    padding-top: 8px;
  }
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: -6px;
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_detail .wrapper_detail_heading {
  font: var(--post-regular);
  color: var(--white-80);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_detail .wrapper_detail_contents {
  padding: 16px 0 16px 32px;
  border-left: 1px solid var(--white-20);
}

[data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_detail .wrapper_detail_contents > p {
  font: var(--post-regular);
  color: var(--text-card);
}

[data-page=resources-detail] #wiki-detail .wrapper_working {
  margin-top: 40px;
  padding: 24px 24px 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
}

[data-page=resources-detail] #wiki-detail .wrapper_working_top {
  display: flex;
  gap: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

[data-page=resources-detail] #wiki-detail .wrapper_working_top_heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-family: var(--font-base);
  font-weight: 500;
  line-height: 28px; /* 140% */
  letter-spacing: -1px;
}

[data-page=resources-detail] #wiki-detail .wrapper_working_content {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 142.857%;
  text-align: center;
  font-family: var(--font-base);
  margin-top: 16px;
}

@media (max-width: 63.99375em) {
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper {
    width: 100%;
    padding: 0 20px;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top {
    gap: 24px;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_top .trianglechart .filter_items {
    padding-top: 8px;
    width: 100%;
    flex-wrap: wrap;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid .wrapper_imgorvid_image {
    width: 100%;
    height: 204px;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid {
    gap: 24px;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_imgorvid > span {
    font: var(--body-regular);
    line-height: 16px;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart {
    gap: 24px;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_list_heading {
    font: var(--sm-regular);
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_list_heading > a {
    font: var(--small-medium);
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list .wrapper_chart_main_card > p {
    font: var(--paragraph-regular);
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_detail .wrapper_detail_heading {
    font: var(--paragraph-regular);
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_detail .wrapper_detail_contents > p {
    font: var(--paragraph-regular);
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list {
    list-style-position: inside;
  }
  [data-page=resources-detail] #wiki-detail .wiki-detail_wrapper .wrapper_chart .wrapper_chart_main .wrapper_chart_main_list li h6 {
    display: inline;
  }
}
[data-page=resources] .hide-on-small-screen {
  display: none;
}
@media (min-width: 64em) {
  [data-page=resources] .hide-on-small-screen {
    display: block;
  }
}

[data-page=resources] .resources-contents .resources-contents-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
}

[data-page=resources] .resources-contents .resources-contents-wrapper .resources-contents-wrapper_title {
  font: var(--h4-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=resources] .resources-item {
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

[data-page=resources] .resources-item.resources-item--top-calculator {
  padding-top: 16px;
  padding-bottom: 16px;
}
@media (min-width: 64em) {
  [data-page=resources] .resources-item.resources-item--top-calculator {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

[data-page=resources] .resources-item.resources-item--top-tutorials {
  padding-top: 22px;
  padding-bottom: 22px;
}
@media (min-width: 64em) {
  [data-page=resources] .resources-item.resources-item--top-tutorials {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

[data-page=resources] .resources-item.resources-item--top-tutorials,
[data-page=resources] .resources-item.resources-item--top-calculator {
  padding-right: 24px;
}
@media (min-width: 64em) {
  [data-page=resources] .resources-item.resources-item--top-tutorials,
  [data-page=resources] .resources-item.resources-item--top-calculator {
    padding-right: 48px;
  }
}

[data-page=resources] .resources-item.missing-topic {
  align-items: flex-start;
  flex-direction: column;
  padding: 16px;
  gap: 24px;
}
@media (min-width: 64em) {
  [data-page=resources] .resources-item.missing-topic {
    align-items: center;
    flex-direction: row;
    padding: 16px;
    gap: 8px;
  }
}

[data-page=resources] .resources-item .resources-item_left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

[data-page=resources] .resources-item .resources-item_left .resources-item_left_text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 24px;
}
@media (min-width: 64em) {
  [data-page=resources] .resources-item .resources-item_left .resources-item_left_text {
    padding-right: 0;
  }
}

[data-page=resources] .resources-item.resources-item--top-tutorials .resources-item_left .resources-item_left_text {
  max-width: 180px;
}
@media (min-width: 64em) {
  [data-page=resources] .resources-item.resources-item--top-tutorials .resources-item_left .resources-item_left_text {
    max-width: max-content;
  }
}

[data-page=resources] .resources-item .resources-item_left .resources-item_left_text h5 {
  font: var(--h5-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  letter-spacing: -1px;
}

[data-page=resources] .resources-item.missing-topic .resources-item_left .resources-item_left_text h5 {
  font: var(--body-medium);
  letter-spacing: 0;
}

[data-page=resources] .resources-item .resources-item_left .resources-item_left_text p {
  font: var(--small-medium);
  color: var(--white-50);
}

[data-page=resources] .resources-item .resources-item_right {
  flex: none;
  opacity: 0.5;
  will-change: opacity;
  transition: opacity 0.6s var(--easeOutQuart);
}

[data-page=resources] .resources-item .resources-item_right img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

[data-page=resources] .resources-item:hover .resources-item_right {
  opacity: 1;
}

[data-page=resources] .wiki-submit-topic {
  width: 100%;
  margin: 0;
  margin-top: 24px;
}
@media (min-width: 64em) {
  [data-page=resources] .wiki-submit-topic {
    margin-top: 40px;
    margin-bottom: 16px;
  }
}

[data-page=resources] .wiki-submit-topic .resources-item_right {
  opacity: 1 !important;
}

[data-page=resources] .wiki-submit-topic .button_code {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 56px;
  background: var(--primary-black-background);
  transition: 0.4s var(--easeInOutQuad);
}

[data-page=resources] .wiki-submit-topic .button_code:hover {
  background: var(--primary-black-background-hover);
}

[data-page=resources] .wiki-submit-topic .button_code span {
  font: var(--small-medium);
  color: var(--white-90);
}

[data-page=resources] #submit-topic .gradient-border_inner {
  max-height: 428px;
}

[data-page=resources] .submit_topic_modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
  padding-bottom: 20px;
}
@media (min-width: 64em) {
  [data-page=resources] .submit_topic_modal {
    padding-bottom: 0;
  }
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  border-bottom: 1px solid;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_header > img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_header > p {
  font: var(--body-medium);
  letter-spacing: 0;
  color: var(--white-90);
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_header .submit_topic_modal_header_close {
  position: absolute;
  right: 0;
  top: 0;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_header .submit_topic_modal_header_close svg path {
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_header .submit_topic_modal_header_close:hover svg path {
  stroke-opacity: 1;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area .submit_topic_modal_area_textarea {
  width: 100%;
  min-height: 170px;
  resize: none;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.04);
  border-image: initial;
  background: rgb(15, 15, 17);
  padding: 16px;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area .submit_topic_modal_area_button {
  width: 100%;
  text-align: center;
  height: 40px;
  border-radius: 56px;
  padding: 0px 16px;
  background: var(--primary-black-background);
  transition: 0.5s var(--easeInOutQuad);
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area .submit_topic_modal_area_button span {
  background: var(--white-90);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: var(--small-medium);
  letter-spacing: 0;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area .submit_topic_modal_area_button:hover {
  background: var(--primary-black-background-hover);
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area .submit_topic_modal_area_button:disabled {
  opacity: 0.4;
}

[data-page=resources] .submit_topic_modal .submit_topic_modal_area .submit_topic_modal_area_button:disabled:hover {
  opacity: 1;
}

/* Success message styles */
[data-page=resources] .submit_topic_modal_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
}

[data-page=resources] .submit_topic_modal_success_icon {
  width: 32px;
  height: 32px;
  animation: scale-in 0.4s ease-out;
}

[data-page=resources] .submit_topic_modal_success_message {
  color: #f97316;
  text-align: center;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  animation: slide-up-fade-in 0.4s ease-out 0.1s both;
}

[data-page=calculator] .input-group__error-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.calculator-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}
@media (min-width: 768px) {
  .calculator-page {
    padding-top: 40px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 40px;
    max-width: 432px;
  }
}

.calculator-page .calculator-page__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calculator-page .calculator-page__inner .calculator-page__inner__top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  border-bottom: 1px solid;
}

.calculator-page .calculator-page__inner .calculator-page__inner__top h1 {
  font: var(--xl-medium);
  letter-spacing: -1px;
  color: var(--white-90);
}

.calculator-page .calculator-page__inner .calculator-page__inner__heading_label {
  font: var(--body-medium);
  color: var(--white-90);
  letter-spacing: 0;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  margin-bottom: 32px;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works p {
  font: var(--paragraph-medium);
  color: var(--white-60);
  letter-spacing: 0;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  opacity: 0.6;
  will-change: opacity;
  transition: opacity 0.5s var(--easeInOutQuad);
  cursor: pointer;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works:hover img {
  opacity: 1;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group-row {
  display: flex;
  gap: 16px;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group-row .input-group__field {
  flex: 1;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.calculator-page .calculator-page__inner__bottom__results > .gradient-border > .gradient-border_inner,
.calculator-page .calculator-page__inner__bottom__results > .gradient-border,
.calculator-page .calculator-page__inner__bottom__results {
  min-height: 168px;
  width: 100%;
}

.calculator-page .calculator-page__inner__bottom__results {
  position: relative;
  z-index: 3;
}

.calculator-page .calculator-page__inner__bottom__leverage-assistant .calculator-page__inner__bottom__leverage-assistant__heading,
.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group label,
.calculator-page .calculator-page__inner__bottom__results .results-content .result-item label {
  font: var(--paragraph-medium);
  color: var(--white-40);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
}

.calculator-page .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works figure,
.calculator-page .calculator-page__inner__bottom__leverage-assistant .calculator-page__inner__bottom__leverage-assistant__heading figure,
.calculator-page .calculator-page__inner__bottom__results .results-content .result-item figure {
  position: relative;
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.calculator-page figure::after,
.calculator-page figure::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 8px;
  background: url(/assets/icons/union-triangle-2da4f74793d9f3f7a7a80c567fe0ff5ffaaa4344ad279475c90525e9fdbddca6.svg) no-repeat center center;
  will-change: opacity;
  transition: opacity 0.5s var(--easeInOutQuad);
  opacity: 0;
}

.calculator-page figure::after {
  top: calc(100% + 8px);
  z-index: 3;
}

.calculator-page figure:hover::after {
  opacity: 0.4;
}

.calculator-page figure::before {
  top: calc(100% + 7px);
  filter: invert(0.5);
  z-index: 2;
}

.calculator-page figure:hover::before {
  opacity: 0.2;
}

.calculator-page .result-item__tooltip {
  position: absolute;
  top: calc(100% + 15px);
  z-index: 3;
  width: max-content;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.5s var(--easeInOutQuad);
  pointer-events: none;
  max-width: 212px;
  left: -106px;
}
@media (min-width: 64em) {
  .calculator-page .result-item__tooltip {
    max-width: 362px;
    left: -181px;
  }
}

.calculator-page .result-item__tooltip.result-item__tooltip--breakeven-win-rate {
  max-width: 300px;
  left: -144px;
}
@media (min-width: 64em) {
  .calculator-page .result-item__tooltip.result-item__tooltip--breakeven-win-rate {
    max-width: 362px;
    left: -181px;
  }
}

.calculator-page .result-item__tooltip.result-item__tooltip--number-of-coins {
  max-width: 212px;
  left: -155px;
}
@media (min-width: 64em) {
  .calculator-page .result-item__tooltip.result-item__tooltip--number-of-coins {
    max-width: 362px;
    left: -181px;
  }
}

.calculator-page .result-item__tooltip.result-item__tooltip--position-size {
  max-width: 212px;
  left: -105px;
}
@media (min-width: 64em) {
  .calculator-page .result-item__tooltip.result-item__tooltip--position-size {
    max-width: 362px;
    left: -181px;
  }
}

.calculator-page .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works figure .result-item__tooltip {
  left: -132px;
}
@media (min-width: 768px) {
  .calculator-page .calculator-page__inner__bottom__inputs__top .calculator-page__inner__bottom__inputs__top__how-it-works figure .result-item__tooltip {
    left: -85px;
  }
}

.calculator-page figure:hover .result-item__tooltip {
  opacity: 1;
  pointer-events: auto;
}

.calculator-page .result-item__tooltip p {
  font: var(--sm-regular);
  color: var(--white-60);
  letter-spacing: 0;
  padding: 16px 14px;
}

.calculator-page .calculator-page__inner__bottom__leverage-assistant .calculator-page__inner__bottom__leverage-assistant__heading img,
.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group label img,
.calculator-page .calculator-page__inner__bottom__results .results-content .result-item label img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  opacity: 0.4;
  will-change: opacity;
  transition: opacity 0.5s var(--easeInOutQuad);
  cursor: pointer;
}

.calculator-page .calculator-page__inner__bottom__leverage-assistant .calculator-page__inner__bottom__leverage-assistant__heading img:hover,
.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group label img:hover,
.calculator-page .calculator-page__inner__bottom__results .results-content .result-item label img:hover {
  opacity: 1;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group {
  width: 100%;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group input {
  font: var(--paragraph-medium);
  width: 100%;
  display: flex;
  align-items: center;
  align-self: stretch;
  border-radius: var(--input-radius);
  color: var(--white-90);
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group:has(input:invalid) .input-group__error-ico {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto 0;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group:has(input:invalid) .input-group__input__content {
  color: #fda3af;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group:has(input:invalid) .input-group__error-icon {
  opacity: 1;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group:has(input:invalid) .input-group__error {
  display: block;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .input-group .input-group__error {
  font: var(--paragraph-medium);
  letter-spacing: 0;
  color: rgb(244, 63, 95);
  display: none;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .calculate-btn {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-white-background);
  border-radius: 56px;
  margin-top: 16px;
  cursor: pointer;
  transition: background 0.5s var(--easeInOutQuad);
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .calculate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .calculate-btn:hover {
  background: var(--primary-white-background-hover);
}

.calculator-page .calculator-page__inner .calculator-page__inner__bottom__inputs__form .calculate-btn span {
  font: var(--small-medium);
  color: #0F0F11;
  letter-spacing: 0;
}

.calculator-page .calculator-page__inner__bottom__results .results-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  border-bottom: 1px solid;
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle span {
  font: var(--small-medium);
  letter-spacing: 0;
  color: #737374;
  transition: color 0.5s var(--easeInOutQuad);
  cursor: pointer;
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle span.active {
  color: var(--white-90);
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch {
  position: relative;
  width: 40px;
  height: 24px;
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s var(--easeInOutQuad);
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch label:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--white-80);
  border-radius: 50%;
  transition: transform 0.3s var(--easeInOutQuad);
  box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.3215686275);
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch input:checked + label {
  background-color: rgba(255, 255, 255, 0.24);
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch input:checked + label:before {
  transform: translateX(16px);
}

.calculator-page .calculator-page__inner__bottom__results .results-top .currency-toggle .toggle-switch input:focus + label {
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.calculator-page .calculator-page__inner__bottom__results .results-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  flex: 1;
}

.calculator-page .calculator-page__inner__bottom__results .results-content .result-item {
  flex-direction: column;
  gap: 4px;
  display: none;
}

.calculator-page .calculator-page__inner__bottom__results .results-content__empty {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
}

.calculator-page .calculator-page__inner__bottom__results .results-content__empty p {
  font: var(--paragraph-medium);
  letter-spacing: 0;
  color: var(--white-40);
}

.calculator-page .calculator-page__inner__bottom__results .results-content .result-item span {
  font: var(--lg-medium);
  letter-spacing: 0;
  color: var(--white-90);
}

.calculator-page .calculator-page__inner__bottom__results .results-content .result-item span.positive {
  color: #A7F3D0;
}

.calculator-page .calculator-page__inner__bottom__results .results-content .result-item span.negative {
  color: #F43F5F;
}

.calculator-page .leverage-assistant__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calculator-page .leverage-assistant__inner.idle {
  --primary-color: #FFFFFF66;
  --box-shadow-color: transparent;
}

.calculator-page .leverage-assistant__inner.positive {
  --primary-color: #A7F3D0;
  --box-shadow-color: #A7F3D033;
}

.calculator-page .leverage-assistant__inner.negative {
  --primary-color: #F43F5F;
  --box-shadow-color: #F43F5F33;
}

.calculator-page .leverage-assistant__inner.warning {
  --primary-color: #F97316;
  --box-shadow-color: #F9731633;
}

.calculator-page .leverage-assistant__inner .leverage-assistant__top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calculator-page .leverage-assistant__inner .leverage-assistant__top .leverage-value {
  font: var(--lg-medium);
  letter-spacing: 0;
}

.calculator-page .leverage-assistant__inner .leverage-status {
  font: var(--paragraph-medium);
  letter-spacing: 0;
  position: relative;
  display: block;
  text-align: right;
  white-space: pre-line;
}

.calculator-page .leverage-assistant__inner .leverage-status::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: calc(100% + 5px);
  width: 6px;
  height: 6px;
  border-radius: 100%;
}

.calculator-page .leverage-assistant__inner.idle .leverage-status::after {
  display: none;
}

.calculator-page .leverage-assistant__inner.positive .leverage-status::after,
.calculator-page .leverage-assistant__inner.negative .leverage-status::after,
.calculator-page .leverage-assistant__inner.warning .leverage-status::after {
  display: block;
  background-color: var(--primary-color);
  box-shadow: 0px 0px 0px 2px var(--box-shadow-color);
}

.calculator-page .leverage-assistant__inner .leverage-status::after {
  background-color: var(--primary-color);
  box-shadow: 0px 0px 0px 2px var(--box-shadow-color);
}

.calculator-page .leverage-assistant__inner .leverage-assistant__top .leverage-value,
.calculator-page .leverage-assistant__inner .leverage-status {
  color: var(--primary-color);
}

.calculator-page .how-it-works-popover__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  width: 100%;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

.calculator-page .how-it-works-popover__top .how-it-works-popover__top-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.calculator-page .how-it-works-popover__top button {
  all: initial;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator-page .how-it-works-popover__top button svg {
  fill: white;
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.calculator-page .how-it-works-popover__top button svg path {
  will-change: stroke-opacity;
  transition: stroke-opacity 0.4s var(--easeOutQuart);
}

.calculator-page .how-it-works-popover__top button:hover svg path {
  stroke-opacity: 1;
}

.calculator-page .how-it-works-popover__top h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.calculator-page .how-it-works-popover__bottom {
  max-height: 435px;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.calculator-page .how-it-works-popover__bottom::-webkit-scrollbar {
  display: none;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style-type: decimal;
  list-style-position: inside;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-end,
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-rules,
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item {
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item:last-child {
  border-bottom: none;
  border-image-slice: unset;
  border-image-source: unset;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item::marker {
  font: var(--small-medium);
  letter-spacing: 0;
  color: #F5F5F5;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-rules {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-end {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  padding-top: 30px;
  padding-left: 24px;
  padding-right: 10px;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-end ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 8px;
}

.calculator-page .how-it-works-popover__bottom h6,
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item label {
  font: var(--small-medium);
  letter-spacing: 0;
  background: linear-gradient(90deg, #F5F5F5 0%, #E5E5E5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item .text-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 24px;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-end ol li,
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-end ol li span,
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item .text-content p,
.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item .text-content p span {
  font: var(--paragraph-regular);
  letter-spacing: 0;
  color: var(--white-60);
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item .text-content p span.silver {
  color: var(--white-60);
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item .text-content p span.red {
  color: #FDA3AF;
}

.calculator-page .how-it-works-popover__bottom .how-it-works-popover__bottom-content-wrapper .how-it-works-popover__bottom-content-item .text-content p span.orange {
  color: #F97316;
}

.flex-label {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

[data-page=calculator] .block {
  --border-width: 1px;
  --border-radius: 16px;
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, #0F0F11, #0F0F11);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-left: 16px;
  --padding-right: 16px;
  --background: #0f0f11;
  position: relative;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
}

[data-page=calculator] .block--free-bg {
  --background: transparent;
}

[data-page=calculator] .block::before,
[data-page=calculator] .block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - var(--border-width));
  background: var(--background-color);
  z-index: 0;
  pointer-events: none;
}

[data-page=calculator] .block::before {
  inset: 1px;
  background: rgba(15, 15, 17, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
}

[data-page=calculator] .block__inner {
  position: relative;
  background: var(--background);
  border-radius: var(--inner-border-radius);
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

[data-page=calculator] .block__inner__content {
  width: 100%;
  position: relative;
  z-index: 1;
}

[data-page=calculator] .block__inner__content .input-group {
  padding: 0;
}

[data-page=calculator] .input-group__input {
  --background-color: #0F0F11;
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 74.04%);
  --padding-top: 12px;
  --padding-bottom: 12px;
  --padding-left: 16px;
  --padding-right: 16px;
  --border-radius: 888px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=calculator] .input-group__input:has(input:invalid) {
  --border-color: linear-gradient(0deg, rgba(244, 63, 95, 0.4), rgba(244, 63, 95, 0.4)),
  linear-gradient(180deg, rgba(244, 63, 95, 0.384314) 0%, rgba(244, 63, 95, 0.384314) 74.04%) !important;
  --background-color: linear-gradient(0deg, #0F0406, #0F0406),
  linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
}

[data-page=calculator] .input-group__input:has(input:focus) {
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
  linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 74.04%) !important;
}

[data-page=calculator] .block__inner,
[data-page=calculator] .input-group__input__content {
  width: 100%;
  height: 100%;
}

[data-page=calculator] .input-group__question {
  font: var(--paragraph-medium);
  color: var(--white-40);
  letter-spacing: 0;
}

[data-page=calculator] .input-group__error-icon {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 16px;
  height: 16px;
}

[data-page=calculator] .input-group__input:has(input:invalid) .input-group__error-icon {
  display: block;
}

[data-page=settings] #settings {
  padding-top: 40px;
  padding-bottom: 40px;
}

[data-page=settings] .settings_inner {
  max-width: 608px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=settings] .settings_inner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .settings_inner__header_heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */
  letter-spacing: -1px;
}

[data-page=settings] .settings_inner__header_action {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  transition-duration: 0.4s;
}

[data-page=settings] .settings_inner__header_action p {
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .settings_inner__header_action svg {
  width: 16px;
  height: 16px;
  transition-duration: 0.4s;
}

[data-page=settings] .settings_inner__header_action svg path {
  transition-duration: 0.4s;
}

[data-page=settings] .settings_inner__header_action:hover {
  color: rgba(255, 255, 255, 0.8);
  stroke-opacity: 0.8;
}

[data-page=settings] .settings_inner__header_action:hover svg path {
  stroke-opacity: 0.8;
}

[data-page=settings] .settings_inner_cards {
  padding: 8px 24px 24px 24px;
}

[data-page=settings] .settings_inner_cards_main {
  cursor: pointer;
  width: 100%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: border-image-source 0.5s var(--easeOutQuart);
}

[data-page=settings] .settings_inner_cards_main.delete-account {
  border-bottom: none;
  border-image-slice: unset;
  border-image-source: unset;
  padding-bottom: 0;
}

[data-page=settings] .settings_inner_cards_main:not(.settings_inner_cards_main--active):hover {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

[data-page=settings] .settings_inner_cards_main .settings_inner_cards_main_right svg path {
  transition-duration: 0.4s;
}

[data-page=settings] .settings_inner_cards_main:hover .settings_inner_cards_main_right svg path {
  stroke-opacity: 0.8;
}

[data-page=settings] .settings_inner_cards_main--active {
  background: radial-gradient(50% 50% at 50% 100%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 100%);
  border-image-source: linear-gradient(90deg, rgba(249, 115, 22, 0.2) 0%, #f97316 50.39%, rgba(249, 115, 22, 0.2) 100%);
}

[data-page=settings] .settings_inner_cards_main_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
}

[data-page=settings] .settings_inner_cards_main_left_heading {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

[data-page=settings] .delete-account .settings_inner_cards_main_left_heading {
  color: #F43F5F;
}

[data-page=settings] .settings_inner_cards_main_left_content {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  text-align: left;
}

[data-page=settings] .settings_inner_cards_main_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=settings] .settings_inner_cards_main_left_check {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-page=settings] .settings_inner_cards_main_left_check p {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .setting_modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

[data-page=settings] .setting_modal_overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

[data-page=settings] .setting_modal_inner {
  position: absolute;
  inset: 0;
  height: fit-content;
  margin: auto;
  padding: 24px;
  border-radius: 16px;
  max-width: 400px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
}

[data-page=settings] .settings_modal_header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .settings_modal_header_main {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

[data-page=settings] .settings_modal_header_main.center {
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

[data-page=settings] .settings_modal_header_main.center .settings_modal_header_close {
  position: absolute;
  top: 0;
  right: 0;
}

[data-page=settings] .settings_modal_header_main img {
  width: 24px;
  height: 24px;
}

[data-page=settings] .settings_modal_header_main_heading {
  font-family: var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=settings] .settings_modal_header_close {
  cursor: pointer;
}

[data-page=settings] .settings_modal_header_close svg path {
  transition-duration: 0.4s;
}

[data-page=settings] .settings_modal_header_close:hover svg path {
  stroke-opacity: 0.8;
}

[data-page=settings] .setting_modal_inner_form {
  padding-top: 24px;
  width: 100%;
}

[data-page=settings] .setting_modal_inner_form.setting_modal_inner_form--scrollable {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 60svh;
  padding-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-page=settings] .setting_modal_inner_form.setting_modal_inner_form--scrollable::-webkit-scrollbar {
  display: none;
}
@media (min-width: 64em) {
  [data-page=settings] .setting_modal_inner_form.setting_modal_inner_form--scrollable {
    padding-bottom: 32px;
  }
}
@media (min-width: 80em) {
  [data-page=settings] .setting_modal_inner_form.setting_modal_inner_form--scrollable {
    padding-bottom: 0;
  }
}

[data-page=settings] .setting_modal_inner_form_input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

[data-page=settings] .setting_modal_inner_form_input_label {
  font-family: var(--font-base);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=settings] .setting_modal_inner_form_input_label span {
  color: rgba(255, 255, 255, 0.24);
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}

[data-page=settings] .setting_modal_inner_form_input_field {
  border-radius: 100px;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.04);
  padding: 12px 16px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  transition: border-color 0.4s var(--easeOutQuart);
}

[data-page=settings] .setting_modal_inner_form_input_field:focus,
[data-page=settings] .setting_modal_inner_form_input_field:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-page=settings] .setting_modal_inner_form_input_field.setting_modal_inner_form_input_field--selections option {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .setting_modal_inner_form_top {
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .setting_modal_inner_form_bottom {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=settings] .setting_modal_inner_form_btn {
  border-radius: 56px;
  background: var(--primary-black-background);
  opacity: 0.4;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  transition: 0.5s var(--easeOutQuart);
}

[data-page=settings] .setting_modal_inner_form_top + .setting_modal_inner_form_btn {
  margin-top: 32px;
}

[data-page=settings] .setting_modal_inner_form_btn span {
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition: 0.5s var(--easeOutQuart);
}

[data-page=settings] .setting_modal_inner_form_btn.active {
  opacity: 1;
  background: var(--primary-black-background-hover);
}

[data-page=settings] .setting_modal_inner_form_btn.active span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=settings] .popover__content .popover__content--bg {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 180, 128, 0.06) 0%, rgba(255, 180, 128, 0) 100%), linear-gradient(0deg, rgba(255, 180, 128, 0.02) 0%, rgba(255, 180, 128, 0.02) 100%), #0f0f11;
}

[data-page=settings] .settings_modal_subscription {
  padding-top: 24px;
}

[data-page=settings] .settings_modal_subscription_item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 24px;
}

[data-page=settings] .settings_modal_subscription_item_heading {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .settings_modal_subscription_item_date {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .settings_modal_subscription_bottom {
  padding-top: 32px;
  border-top: 1px solid;
  width: 100%;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .settings_modal_subscription_bottom_btn {
  --border-radius: 56px;
  --font: 500 14px/20px var(--font-base);
  --text-color: #fff;
  height: 40px;
  padding: 0px 12px;
  width: 100%;
}

[data-page=settings] .settings_modal_subscription_bottom_btn.settings_modal_subscription_bottom_btn_active {
  --background: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.08);
  border: none;
}

[data-page=settings] .settings_modal_subscription_bottom_btn.settings_modal_subscription_bottom_btn_active span {
  --text-color: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.36) 100%
  );
}

[data-page=settings] .settings_modal_subscription_bottom_note {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}

[data-page=settings] .settings_modal_area {
  padding-top: 24px;
  width: 100%;
}

[data-page=settings] .settings_modal_area_textarea {
  border-radius: 12px;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.04);
  background: #0f0f11;
  padding: 16px;
  width: 100%;
  min-height: 170px;
  resize: none;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.4s var(--easeOutQuart);
}

[data-page=settings] .settings_modal_area_textarea:focus,
[data-page=settings] .settings_modal_area_textarea:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-page=settings] .settings_modal_area_textarea::placeholder {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.27) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .settings_modal_area_btn {
  margin-top: 32px;
  width: 100%;
  border-radius: 56px;
  text-align: center;
  background: var(--primary-black-background);
  transition: 0.5s var(--easeOutQuart);
  height: 40px;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
}

[data-page=settings] .settings_modal_area_btn[aria-busy=true]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f97316, transparent);
  bottom: 0;
  left: -100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
[data-page=settings] .settings_modal_area_btn[aria-busy=true] {
  opacity: 0.7;
  cursor: wait;
}

[data-page=settings] .settings_modal_area_btn[aria-busy=true] span {
  opacity: 0.7;
}

[data-page=settings] .settings_modal_area_btn span {
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition: 0.5s var(--easeOutQuart);
}

[data-page=settings] .setting_modal_inner_form_btn.active {
  background: var(--primary-black-background-hover);
}

[data-page=settings] .setting_modal_inner_form_btn.active span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=settings] .setting_modal_inner_form_input_check {
  border-radius: 100px;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.04);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.4s var(--easeOutQuart);
}

[data-page=settings] .setting_modal_inner_form_input_check:has(input:focus),
[data-page=settings] .setting_modal_inner_form_input_check:has(input:focus-within) {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-page=settings] .setting_modal_inner_form_step {
  padding-top: 24px;
  border-top: 1px solid;
  width: 100%;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .setting_modal_inner_form_step_note {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

[data-page=settings] .setting_modal_inner_form_step_main {
  padding-top: 16px;
}

[data-page=settings] .setting_modal_inner_form_step_main:first-child {
  padding-top: 24px;
}

[data-page=settings] .setting_modal_inner_form_step_main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid;
  width: 100%;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .setting_modal_inner_form_step_main_item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-page=settings] .setting_modal_inner_form_step_main_item_heading {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .setting_modal_inner_form_step_main_item_content {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .setting_modal_inner_form_step_main_item_content span {
  color: #fff;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  cursor: pointer;
}

[data-page=settings] .settings_modal_header_note {
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  padding-top: 8px;
}

.settings_modal_toggles {
  visibility: hidden;
  opacity: 0;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  overflow: visible;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.settings_modal_toggles.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear;
  height: auto;
}

[data-page=settings] .settings_modal_toggles_item:first-child {
  padding-top: 24px;
}

[data-page=settings] .settings_modal_toggles_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] .settings_modal_toggles_item_heading {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  transition-duration: 0.4s;
}

[data-page=settings] .settings_modal_cookie_bottom {
  padding-top: 32px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

[data-page=settings] .settings_modal_cookie_bottom_links {
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-page=settings] .settings_modal_cookie_bottom_links a,
[data-page=settings] .settings_modal_cookie_bottom_links button {
  color: rgba(255, 255, 255, 0.4);
  font: var(--body-regular);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=settings] .settings_modal_cookie_bottom_links a:hover {
  color: var(--white);
}

[data-page=settings] .settings_modal_cookie_bottom_btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=settings] .settings_modal_cookie_bottom_btn {
  border-radius: 56px;
  padding: 0 16px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-black-background);
  opacity: 0.4;
  transition: 0.5s var(--easeOutQuart);
}

[data-page=settings] .settings_modal_cookie_bottom_btn span {
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .settings_modal_cookie_bottom_btn:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

[data-page=settings] .settings_modal_cookie_bottom_btn.active {
  background: var(--primary-white-background);
  opacity: 1;
}

[data-page=settings] .settings_modal_cookie_bottom_btn.active:hover {
  background: var(--primary-white-background-hover);
  opacity: 1;
}

[data-page=settings] .settings_modal_cookie_bottom_btn span {
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=settings] .settings_modal_cookie_bottom_btn.active span {
  background: var(--primary-black-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=settings] .settings_modal_cookie_bottom_btn.active:hover span {
  background: var(--primary-black-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=settings] .popover__content--width {
  width: 456px;
}

[data-page=settings] .toggle {
  position: relative;
  display: inline-block;
}

[data-page=settings] .toggle__input {
  display: none;
}

[data-page=settings] .toggle__label {
  display: block;
  width: 48px;
  height: 28px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: #0f0f11;
}

[data-page=settings] .dark-mode .toggle__label {
  background-color: #34c759;
}

[data-page=settings] .toggle__input:checked + .toggle__label {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

[data-page=settings] .settings_modal_toggles_item:has(.toggle__input:checked) .settings_modal_toggles_item_heading {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.72) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition-duration: 0.4s;
}

[data-page=settings] .toggle__input:checked + .toggle__label::after {
  left: 25px;
  background-color: rgba(255, 255, 255, 0.8);
}

[data-page=settings] .toggle__label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: left 0.3s ease;
}

@media (min-width: 768px) and (max-width: 1024px) {
  [data-page=settings] #settings {
    padding-bottom: 40px;
  }
}
@media (max-width: 768px) {
  [data-page=settings] #settings {
    padding-bottom: 40px;
  }
  [data-page=settings] .popover__content {
    bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  [data-page=settings] .settings_modal_cookie_bottom {
    flex-direction: column-reverse;
    gap: 16px;
  }
  [data-page=settings] .popover__content--width {
    width: auto;
  }
  [data-page=settings] .settings_modal_cancel_subscription_bottom {
    justify-content: center !important;
  }
}
[data-page=settings] .input_miniCalender_wrapper {
  position: absolute;
  top: -340%;
  left: 0;
  background-color: #1c1c1c;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  visibility: hidden;
}

[data-page=settings] #birthday {
  cursor: pointer;
}

[data-page=settings] .settings_modal_cancel_subscription_bottom {
  padding-top: 32px;
  border-top: 1px solid;
  width: 100%;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-page=settings] .settings_modal_cancel_subscription_bottom_btn {
  cursor: pointer;
  height: 32px;
  padding: 0px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 56px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
}

[data-page=settings] .settings_modal_cancel_subscription_bottom_btn.active {
  background: white;
  transition-duration: 0.4s;
}

[data-page=settings] .settings_modal_cancel_subscription_bottom_btn.active:hover {
  background: #c1c1c1;
}

[data-page=settings] .settings_modal_cancel_subscription_bottom_btn.active span {
  color: #0f0f11;
  -webkit-text-fill-color: unset;
}

[data-page=settings] .settings_modal_cancel_subscription_text {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  padding-top: 24px;
  padding-bottom: 24px;
}

[data-page=settings] .settings_modal_cancel_subscription_bottom_btn span {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

[data-page=settings] .settings_modal_cancel_subscription_item_info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-page=settings] .settings_modal_cancel_subscription_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
}

[data-page=settings] .settings_modal_cancel_subscription_item img {
  width: 20px;
  height: 20px;
}

.settings_modal_area_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
}

.settings_modal_area_success_icon {
  width: 32px;
  height: 32px;
  animation: scale-in 0.4s ease-out;
}

.settings_modal_area_success_message {
  color: #f97316;
  text-align: center;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  animation: slide-up-fade-in 0.4s ease-out 0.1s both;
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.admin-empty-state {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 20px;
}

.setting_modal_inner_form_input_field[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

[data-page=settings] .settings_modal_cookie_bottom_links button {
  color: rgba(255, 255, 255, 0.4);
  font: var(--body-regular);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: color 0.5s var(--easeOutQuart);
}

[data-page=settings] .settings_modal_cookie_bottom_links button:hover {
  color: var(--white);
}

[data-page=settings] .setting_modal_inner_form_input_select-wrapper {
  position: relative;
}

[data-page=settings] .setting_modal_inner_form_input_select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

[data-page=settings] .setting_modal_inner_form_input_select-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

[data-page=settings] .mt-8 {
  margin-top: 8px;
}

[data-page=settings] #delete-account .gradient-border {
  background: rgba(244, 63, 95, 0.12) !important;
}

[data-page=settings] .popover__content .popover__content--delete-account {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(244, 63, 95, 0.06) 0%, rgba(244, 63, 95, 0) 100%), linear-gradient(0deg, rgba(244, 63, 95, 0.02) 0%, rgba(244, 63, 95, 0.02) 100%), #0f0f11 !important;
}

[data-page=settings] #settings .settings_modal_delete_account {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 20px;
}
@media (min-width: 64em) {
  [data-page=settings] #settings .settings_modal_delete_account {
    padding-bottom: 0;
  }
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_top {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_top > img {
  width: 16px;
  height: 16px;
  flex: none;
  aspect-ratio: 1;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_top .settings_modal_delete_account_top_text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_top .settings_modal_delete_account_top_text .settings_modal_delete_account_heading {
  font: var(--paragraph-regular);
  letter-spacing: 0px;
  color: var(--white-90);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_top .settings_modal_delete_account_top_text .settings_modal_delete_account_paragraph {
  font: var(--body-regular);
  letter-spacing: 0px;
  color: var(--white-40);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_center .settings_modal_delete_account_text {
  font: var(--paragraph-medium);
  letter-spacing: 0px;
  color: var(--white-50);
  text-align: center;
  max-width: 270px;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom {
  display: flex;
  width: 100%;
  gap: 8px;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom > * {
  flex: 1;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn {
  flex: 1;
  width: 100%;
  height: 40px;
  border-radius: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s var(--easeInOutQuad);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn span {
  font: var(--small-medium);
  letter-spacing: 0;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn.keep-account span {
  color: #0F0F11;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn.delete-account span {
  color: #F43F5F;
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn.keep-account {
  background: var(--primary-white-background);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn.keep-account:hover {
  background: var(--primary-white-background-hover);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn.delete-account {
  background: linear-gradient(0deg, rgba(244, 63, 95, 0.08), rgba(244, 63, 95, 0.08)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(244, 63, 95, 0.08) 0%, rgba(244, 63, 95, 0) 100%);
}

[data-page=settings] #settings .settings_modal_delete_account .settings_modal_delete_account_bottom .settings_modal_delete_account_bottom_btn.delete-account:hover {
  background: linear-gradient(0deg, rgba(244, 63, 95, 0.2), rgba(244, 63, 95, 0.2)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(244, 63, 95, 0.2) 0%, rgba(244, 63, 95, 0) 100%);
}

[data-page=settings] #settings .settings_modal_support {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 20px;
}
@media (min-width: 64em) {
  [data-page=settings] #settings .settings_modal_support {
    padding-bottom: 0;
  }
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item img,
[data-page=settings] #settings .settings_modal_support .settings_modal_support_item svg {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_icon path {
  fill: #00E0FF;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_heading {
  font: var(--body-medium);
  letter-spacing: 0px;
  color: #E4E4E7;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_btn {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 56px;
  background: var(--primary-black-background);
  will-change: opacity;
  transition: 0.5s var(--easeInOutQuad);
  width: max-content;
  padding-left: 8px;
  padding-right: 12px;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_btn span {
  font: var(--small-medium);
  letter-spacing: 0;
  color: var(--white-90);
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_btn:disabled {
  opacity: 0.4;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_btn:hover {
  background: var(--primary-black-background-hover);
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_btn:disabled:hover {
  opacity: 1;
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_link {
  font: var(--small-medium);
  letter-spacing: 0;
  color: var(--white-40);
  text-decoration: underline;
  transition: color 0.5s var(--easeInOutQuad);
}

[data-page=settings] #settings .settings_modal_support .settings_modal_support_item .settings_modal_support_item_right .settings_modal_support_item_link:hover {
  color: var(--white-90);
}

.settings_modal_support_item_link {
  font: var(--small-medium);
  letter-spacing: 0;
  color: var(--white-40);
  text-decoration: underline;
  transition: color 0.5s var(--easeInOutQuad);
}

.settings_modal_support_item_link:hover {
  color: var(--white-90);
}

[data-page=terms] .terms {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%;
}

[data-page=terms] .terms_inner {
  max-width: 608px;
  margin: 0 auto;
}

[data-page=terms] .terms_inner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=terms] .terms_inner__header h1 {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 120% */
  letter-spacing: -1px;
}

[data-page=terms] .terms_inner__header p {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

[data-page=terms] .terms_inner_cards {
  margin-top: 32px;
}

[data-page=terms] .terms_inner_cards_main {
  display: flex;
  flex-direction: column;
  border-top: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=terms] .terms_inner_cards_main:not(:last-child) {
  margin-bottom: 32px;
}

[data-page=terms] .terms_inner_cards_main_heading {
  font-family: var(--font-base);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 32px;
  padding-bottom: 24px;
}

[data-page=terms] .terms_inner_cards_main_content {
  font-family: var(--font-base);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

@media (max-width: 1024px) {
  [data-page=terms] .terms_inner__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  [data-page=terms] .terms_inner_cards_main:first-child .terms_inner_cards_main_heading {
    padding-top: 24px;
  }
}
[data-page=research] main {
  padding: 40px 20px 20px;
  margin-top: -20px;
  color: #e4e4e7;
}

[data-page=research] section.container {
  width: 100%;
  padding: 20px 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--container-grid-gap-x);
}

[data-page=research] section.container .inner {
  grid-column: 4/10;
}

[data-page=research] .research-and-analyses {
  margin-bottom: 24px !important;
}
@media (min-width: 768px) {
  [data-page=research] .research-and-analyses {
    margin-top: 20px !important;
    margin-bottom: 40px !important;
  }
}

[data-page=research] .sale-section {
  margin-bottom: 24px !important;
}
@media (min-width: 768px) {
  [data-page=research] .sale-section {
    margin-bottom: 40px !important;
  }
}

[data-page=research] .category-tabs__inner__top {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

[data-page=research] .category-tabs__inner__top__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
}

[data-page=research] .category-tabs__inner__top__count {
  padding: 4px 8px;
  min-width: 26px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #66a0ff;
  border: 1px solid rgba(18, 89, 204, 0.2784313725);
  background: linear-gradient(0deg, rgba(18, 89, 204, 0.28), rgba(18, 89, 204, 0.28)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  font: var(--xs-medium);
  text-align: center;
}

[data-page=research] .category-tabs__inner__top__count span {
  font: var(--xs-medium);
  text-align: center;
}

[data-page=research] .category-section__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-page=research] .category-section__inner__header {
  padding: 16px;
  position: relative;
  overflow: hidden;
}

[data-page=research] .category-section__inner__header__top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

[data-page=research] .category-section__inner__header__top__icon {
  width: 24px;
  height: 24px;
}

[data-page=research] .category-section__inner__header__top__notification {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=research] .category-section__inner__header__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=research] .category-section__inner__header__bottom__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

[data-page=research] .category-section__inner__header__bottom__notification {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 48px;
  background: linear-gradient(0deg, rgba(18, 89, 204, 0.28), rgba(18, 89, 204, 0.28)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid rgba(18, 89, 204, 0.2784313725);
}

[data-page=research] .category-section__inner__header__bottom__notification.category-section__inner__header__bottom__notification--all {
  height: 29.5px;
  margin-left: auto;
  margin-right: 8px;
  padding: 8px 12px;
}

[data-page=research] .category-section__inner__header__bottom__notification span {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #66a0ff;
  position: relative;
  top: -2px;
  margin-top: -1px;
}

[data-page=research] .category-section__inner__header__bottom__notification.category-section__inner__header__bottom__notification--all span {
  top: 0;
  margin-top: 0;
}

[data-page=research] .category-section__inner__header__bottom__notification .unread-link {
  text-decoration: none;
}

[data-page=research] .category-section__inner__header__bottom__notification .unread-link.active span {
  color: #3b82f6;
}

[data-page=research] .category-section__inner__header__bottom__notification .unread-counts {
  display: flex;
  gap: 10px;
}

[data-page=research] .category-section__inner__header__bottom__notification__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0px 0px 0px 2px rgba(59, 130, 246, 0.2);
  position: relative;
  top: -1px;
}

[data-page=research] .category-section__inner__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-page=research] .category-section__inner__bar__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-page=research] .category-section__inner__bar__notification {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=research] .category-section__inner__body {
  height: 482px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  [data-page=research] .category-section__inner__body {
    margin-bottom: 40px;
  }
}

[data-page=research] .category-section__inner__body__inner {
  display: flex;
  flex-direction: column;
  padding: 8px 24px;
  max-height: 482px;
  gap: 16px;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

[data-page=research] .category-section__inner__body__item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  transition: border-image-source 0.5s var(--easeOutQuart);
}

[data-page=research] .category-section__inner__body__item:hover {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

[data-page=research] .category-section__inner__body__item.category-section__inner__body__item--unread,
[data-page=research] .category-section__inner__body__item.category-section__inner__body__item--free {
  border-image-source: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, #3b82f6 50.39%, rgba(59, 130, 246, 0.2) 100%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 100%);
}

[data-page=research] .category-section__inner__body__item.category-section__inner__body__item--unread .category-section__inner__body__item__dot {
  opacity: 1;
}

[data-page=research] .category-section__inner__body__item.category-section__inner__body__item--unread .category-section__inner__body__item__icon {
  opacity: 1;
}

[data-page=research] .category-section__inner__body__item.category-section__inner__body__item--free .category-section__inner__body__item__notification {
  opacity: 1;
}

[data-page=research] .category-section__inner__body__item.category-section__inner__body__item--free .category-section__inner__body__item__icon {
  opacity: 1;
}

[data-page=research] .category-section__inner__body__item:not(.category-section__inner__body__item--free) .category-section__inner__body__item__icon {
  opacity: 1;
}

[data-page=research] .category-section__inner__body__item__content {
  flex: 1;
}

[data-page=research] .category-section__inner__body__item__content__timeline {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px 2px 5px;
  height: 14px;
  min-width: 44px;
  position: relative;
  border: 0.3px solid rgba(255, 255, 255, 0.2);
  border-radius: 27px;
  font-family: "Open Runde", sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 9px;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin-left: 8px;
  text-transform: uppercase;
  overflow: hidden;
}
.category-badge--daily {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(51, 0, 255, 0.28);
  border: 0.3px solid rgba(255, 255, 255, 0.2);
}
.category-badge--weekly {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 0, 0, 0.28);
  border: 0.3px solid rgba(255, 255, 255, 0.2);
}

[data-page=research-detail] .category-badge {
  height: 20px;
  min-width: 62.86px;
  padding: 3.23px 6.46px 3.23px 7.27px;
  font-size: 9.69px;
  line-height: 12.92px;
  border-radius: 38.57px;
  border-width: 0.81px;
  margin-left: 0;
}
[data-page=research-detail] .category-badge--daily {
  border: 0.81px solid rgba(255, 255, 255, 0.2);
}
[data-page=research-detail] .category-badge--weekly {
  border: 0.81px solid rgba(255, 255, 255, 0.2);
}

[data-page=research] .category-section__inner__body__item__content__timeline span {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=research] .category-section__inner__body__item__content__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #e4e4e7;
}

[data-page=research] .category-section__inner__body__item__content__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=research] .category-section__inner__body__item__dot {
  will-change: opacity;
  box-shadow: 0px 0px 0px 2px rgba(59, 130, 246, 0.2);
  background: #3b82f6;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
}

[data-page=research] .category-section__inner__body__item__notification {
  border: 1px solid rgba(18, 89, 204, 0.2784313725);
  padding: 4px 8px;
  border-radius: 9999px;
  color: #66a0ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  width: max-content;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(0deg, rgba(18, 89, 204, 0.28), rgba(18, 89, 204, 0.28)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=research] .category-section__inner__body__item__icon {
  will-change: opacity;
  width: 16px;
  height: 16px;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=research] .simplebar-content {
  padding: 0px !important;
  min-height: 100%;
}

[data-page=research] .simplebar-offset {
  padding: 8px 24px;
}

[data-page=research] .simplebar-content-wrapper {
  position: relative;
}

[data-page=research] #due-diligences-simplebar::-webkit-scrollbar,
[data-page=research] #summaries-simplebar::-webkit-scrollbar,
[data-page=research] #market-compass-simplebar::-webkit-scrollbar {
  width: 12px;
}
[data-page=research] #due-diligences-simplebar::-webkit-scrollbar-track,
[data-page=research] #summaries-simplebar::-webkit-scrollbar-track,
[data-page=research] #market-compass-simplebar::-webkit-scrollbar-track {
  background: transparent;
  margin: 20px 0;
}
[data-page=research] #due-diligences-simplebar::-webkit-scrollbar-thumb,
[data-page=research] #summaries-simplebar::-webkit-scrollbar-thumb,
[data-page=research] #market-compass-simplebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.32);
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

@media (max-width: 768px) {
  [data-page=research] main {
    padding: 20px;
    margin-top: -20px;
    color: #e4e4e7;
  }
  [data-page=research] section.container {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px 0;
  }
  [data-page=research] section.container .inner {
    grid-column: span 4;
  }
  [data-page=research] .category-section__inner {
    gap: 24px;
  }
  [data-page=research] .category-section__inner__body__item__content__title,
  [data-page=research] .category-section__inner__body__item__content__description {
    line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 279px;
  }
  [data-page=research] .category-section__inner__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  [data-page=research] section.container .inner {
    grid-column: 3/11;
  }
}
[data-page=research] .simplebar-track.simplebar-vertical {
  margin: 20px 0;
}

/* Background images for Research Papers section */
#research-papers-frame .gradient-border_inner.category-section__inner__header {
  min-height: 112px !important;
  height: auto !important;
}

#research-papers-frame .gradient-border_inner.category-section__inner__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/research/research-papers-78cabaab5d20e734028b0b9f827a7683f6731b597d7b0048e72e39a209011e25.webp);
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Swap styles for Research Papers title and subtitle */
#research-papers-frame .category-section__inner__header__top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}

#research-papers-frame .category-section__inner__header__top__icon {
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#research-papers-frame .category-section__inner__header__top__icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

#research-papers-frame .category-section__inner__header__top__notification {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: #e4e4e7 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Research Papers structure similar to Trade Compass */
.research-papers-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.research-papers-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.research-papers-top__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}

.research-papers-top__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.research-papers-top__icon img {
  width: 16px;
  height: 16px;
}

.research-papers-top__title {
  font-family: "Open Runde", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  white-space: nowrap;
}

.research-papers-top__badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.research-papers-top__badges .category-section__inner__header__bottom__notification {
  position: static !important;
  height: auto !important;
}
.research-papers-top__badges .category-section__inner__header__bottom__notification span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.research-papers-description {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
  width: 410px;
  margin: 0;
}

#research-papers-frame .category-section__inner__header__bottom__title {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  width: 410px !important;
}

#research-papers-frame .category-section__inner__header__bottom__notification,
#market-compass-frame .category-section__inner__header__bottom__notification,
#due-diligences-frame .category-section__inner__header__bottom__notification {
  position: static !important;
  width: auto !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
}

#research-papers-frame .category-section__inner__header__bottom__notification span,
#market-compass-frame .category-section__inner__header__bottom__notification span,
#due-diligences-frame .category-section__inner__header__bottom__notification span {
  font-size: 12px !important;
}

/* Background images for Market Compass section */
#market-compass-frame .gradient-border_inner.category-section__inner__header {
  min-height: 100px !important;
  height: auto !important;
  padding: 16px !important;
  position: relative;
  overflow: hidden;
}

/* When Plus+ section is shown (non-Plus users) */
#market-compass-frame .gradient-border_inner.category-section__inner__header:has(.trade-compass-plus) {
  height: 216px !important;
}

#market-compass-frame .gradient-border_inner.category-section__inner__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/research/trade-compass-14fb105e9724610f221cfa7db1f7115223d6acb8d29c761ef868f612760c3a6d.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Trade Compass Styles */
.trade-compass-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 576px;
  position: relative;
  z-index: 1;
}

.trade-compass-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 576px;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-compass-top__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}

.trade-compass-top__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trade-compass-top__title {
  font-family: "Open Runde", sans-serif;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  white-space: nowrap;
}

.trade-compass-top__badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.trade-compass-top__badges .category-section__inner__header__bottom__notification {
  position: static !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
}
.trade-compass-top__badges .category-section__inner__header__bottom__notification span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.trade-compass-description {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  width: 410px;
}

.trade-compass-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.trade-compass-plus {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.trade-compass-plus__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 0 auto;
}

.trade-compass-plus__title {
  font-family: "Open Runde", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.trade-compass-plus__subtitle {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
  width: 410px;
  margin: 0;
}

/* Unlock Plus+ button uses existing component styles from _unlock-plus-button.scss */
.trade-compass-plus .unlock-plus-button {
  width: 112px;
  position: relative !important;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.04) !important;
  border: 1px solid !important;
  border-color: rgba(255, 180, 128, 0.1) !important;
  box-shadow: 0px 0px 16px 0px rgba(249, 115, 22, 0.1), inset 0px 1px 0px rgba(255, 180, 128, 0.2), inset 0px -1px 0px rgba(255, 180, 128, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 56px !important;
  overflow: hidden !important;
}
.trade-compass-plus .unlock-plus-button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0) 0%, rgba(249, 115, 22, 0.2) 50%, rgba(249, 115, 22, 0) 100%);
  z-index: 2;
  pointer-events: none;
}
.trade-compass-plus .unlock-plus-button::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0) 0%, rgba(249, 115, 22, 0.2) 50%, rgba(249, 115, 22, 0) 100%);
  z-index: 2;
  pointer-events: none;
}
.trade-compass-plus .unlock-plus-button .unlock-plus-button__border {
  display: none !important;
}
.trade-compass-plus .unlock-plus-button .unlock-plus-button__background {
  display: none !important;
}
.trade-compass-plus .unlock-plus-button .unlock-plus-button__mask {
  display: none !important;
}
.trade-compass-plus .unlock-plus-button .unlock-plus-button__content {
  position: relative;
  z-index: 3;
}
.trade-compass-plus .unlock-plus-button .unlock-plus-button__content span {
  color: #FFFFFF !important;
  font-family: "Open Runde", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

/* Background images for Due Diligence section */
#due-diligences-frame .gradient-border_inner.category-section__inner__header {
  min-height: 100px !important;
  height: auto !important;
  padding: 16px !important;
  position: relative;
  overflow: hidden;
}

/* When Plus+ section is shown (non-Plus users) */
#due-diligences-frame .gradient-border_inner.category-section__inner__header:has(.due-diligence-plus) {
  height: 216px !important;
}

#due-diligences-frame .gradient-border_inner.category-section__inner__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/research/due-diligence-5c6888651e09dcad7b0df3a613e5e506f3b6a5db11119c9e5c1ede1aa9c52607.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

#due-diligences-frame .gradient-border_inner.category-section__inner__header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
  pointer-events: none;
}

/* Ensure content is above the background images */
[data-page=research] .category-section__inner__header {
  position: relative !important;
}

[data-page=research] .category-section__inner__header > * {
  position: relative;
  z-index: 1;
}

/* Due Diligence Styles */
.due-diligence-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 576px;
  position: relative;
  z-index: 1;
}

.due-diligence-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 576px;
  flex-wrap: wrap;
  gap: 8px;
}
.due-diligence-top__left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
  flex: 0 1 auto;
}
.due-diligence-top__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.due-diligence-top__icon img {
  width: 12px;
  height: 13.33px;
  filter: brightness(0) invert(1);
  opacity: 1;
}
.due-diligence-top__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  white-space: nowrap;
}
.due-diligence-top__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.due-diligence-top__badges .category-section__inner__header__bottom__notification {
  position: static !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
}
.due-diligence-top__badges .category-section__inner__header__bottom__notification span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.due-diligence-description {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
  width: 410px;
  margin: 0;
}

.due-diligence-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.due-diligence-plus {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.due-diligence-plus__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 0 auto;
}
.due-diligence-plus__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.due-diligence-plus__subtitle {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
  width: 410px;
  margin: 0;
}

/* Unlock Plus+ button uses existing component styles */
.due-diligence-plus .unlock-plus-button {
  width: 112px;
  position: relative !important;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.04) !important;
  border: 1px solid !important;
  border-color: rgba(255, 180, 128, 0.15) !important;
  box-shadow: 0px 0px 16px 0px rgba(249, 115, 22, 0.1), inset 0px 1px 0px rgba(255, 180, 128, 0.2), inset 0px -1px 0px rgba(255, 180, 128, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 56px !important;
  overflow: hidden !important;
}
.due-diligence-plus .unlock-plus-button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0) 0%, rgba(249, 115, 22, 0.2) 50%, rgba(249, 115, 22, 0) 100%);
  z-index: 2;
  pointer-events: none;
}
.due-diligence-plus .unlock-plus-button::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0) 0%, rgba(249, 115, 22, 0.2) 50%, rgba(249, 115, 22, 0) 100%);
  z-index: 2;
  pointer-events: none;
}
.due-diligence-plus .unlock-plus-button .unlock-plus-button__border {
  display: none !important;
}
.due-diligence-plus .unlock-plus-button .unlock-plus-button__background {
  display: none !important;
}
.due-diligence-plus .unlock-plus-button .unlock-plus-button__mask {
  display: none !important;
}
.due-diligence-plus .unlock-plus-button .unlock-plus-button__content {
  position: relative;
  z-index: 3;
}
.due-diligence-plus .unlock-plus-button .unlock-plus-button__content span {
  color: #FFFFFF !important;
  font-family: "Open Runde", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

.research-paper-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.research-paper-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Trade Compass Plus Card (New Design) */
.trade-compass-plus-card {
  position: relative;
  padding: 16px;
  height: 104px;
  background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.05) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 180, 128, 0.1);
  overflow: hidden;
}
.trade-compass-plus-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/research/trade-compass-14fb105e9724610f221cfa7db1f7115223d6acb8d29c761ef868f612760c3a6d.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.trade-compass-plus-card__top {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.trade-compass-plus-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  height: 100%;
}

.trade-compass-plus-card__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #FFFFFF;
  margin: 0;
}

.trade-compass-plus-card__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: auto;
}

.trade-compass-plus-card__description {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  width: 410px;
}

.trade-compass-plus-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 32px;
  padding: 0;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.08);
  border: 1px solid rgba(255, 180, 128, 0.2);
  border-radius: 56px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.trade-compass-plus-card__button span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}
.trade-compass-plus-card__button:hover {
  transform: translateY(-1px);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.12);
  border-color: rgba(255, 180, 128, 0.3);
  box-shadow: 0px 2px 8px rgba(249, 115, 22, 0.15);
}
.trade-compass-plus-card__button:active {
  transform: translateY(0);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.1);
}

/* Due Diligence Plus Card (New Design) */
.due-diligence-plus-card {
  position: relative;
  padding: 16px;
  height: 104px;
  background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.05) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 180, 128, 0.1);
  overflow: hidden;
}
.due-diligence-plus-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/assets/research/due-diligence-5c6888651e09dcad7b0df3a613e5e506f3b6a5db11119c9e5c1ede1aa9c52607.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.due-diligence-plus-card__top {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.due-diligence-plus-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  height: 100%;
}

.due-diligence-plus-card__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #FFFFFF;
  margin: 0;
}

.due-diligence-plus-card__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: auto;
}

.due-diligence-plus-card__description {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  width: 410px;
}

.due-diligence-plus-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 32px;
  padding: 0;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.08);
  border: 1px solid rgba(255, 180, 128, 0.2);
  border-radius: 56px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.due-diligence-plus-card__button span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}
.due-diligence-plus-card__button:hover {
  transform: translateY(-1px);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.12) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.12);
  border-color: rgba(255, 180, 128, 0.3);
  box-shadow: 0px 2px 8px rgba(249, 115, 22, 0.15);
}
.due-diligence-plus-card__button:active {
  transform: translateY(0);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.1);
}

/* Mobile adjustments for background images */
@media (max-width: 768px) {
  /* Set height to 132px for Research Papers and base sections on mobile */
  #research-papers-frame .gradient-border_inner.category-section__inner__header,
  #market-compass-frame .gradient-border_inner.category-section__inner__header,
  #due-diligences-frame .gradient-border_inner.category-section__inner__header,
  .due-diligence-section {
    height: auto !important;
    min-height: 132px !important;
  }
  /* Extended height for Trade Compass and Due Diligence with Plus+ content on mobile */
  #market-compass-frame .gradient-border_inner.category-section__inner__header:has(.trade-compass-plus),
  #due-diligences-frame .gradient-border_inner.category-section__inner__header:has(.due-diligence-plus),
  .due-diligence-section:has(.due-diligence-plus),
  .trade-compass-section:has(.trade-compass-plus) {
    height: auto !important;
    min-height: 216px !important;
  }
  /* All section background images on mobile - fill container */
  #research-papers-frame .gradient-border_inner.category-section__inner__header::before,
  #market-compass-frame .gradient-border_inner.category-section__inner__header::before,
  #due-diligences-frame .gradient-border_inner.category-section__inner__header::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  /* Fix Trade Compass and Due Diligence layout on mobile */
  .trade-compass-top,
  .due-diligence-top {
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
  }
  .trade-compass-top__left,
  .due-diligence-top__left {
    width: auto !important;
    flex: 0 1 auto !important;
  }
  /* Position badges in same row as title on mobile */
  .research-papers-top__badges,
  .trade-compass-top__badges,
  .due-diligence-top__badges {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification span,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification span,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification span {
    font-size: 10px !important;
    top: 0 !important;
    margin-top: 0 !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification .badge-icon,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification .badge-icon,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification .badge-icon {
    width: 10px !important;
    height: 10px !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification .category-section__inner__header__bottom__notification__dot,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification .category-section__inner__header__bottom__notification__dot,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification .category-section__inner__header__bottom__notification__dot {
    width: 4px !important;
    height: 4px !important;
    top: 0 !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read {
    padding: 6px 8px 6px 9px !important;
    gap: 0 !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read a span,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read a span,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read a span {
    display: none !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read .badge-icon,
  .trade-compass-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read .badge-icon,
  .due-diligence-top__badges .category-section__inner__header__bottom__notification.research-papers-badge--read .badge-icon {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
  }
  .trade-compass-content,
  .due-diligence-content {
    width: 100% !important;
    overflow: visible !important;
  }
  .research-papers-top__left {
    flex: 0 1 auto;
  }
  .research-papers-description {
    width: 321px !important;
    max-width: 100% !important;
  }
  .research-papers-top__badges .category-section__inner__header__bottom__notification span {
    max-width: 60px;
  }
  .trade-compass-description,
  .due-diligence-description {
    width: 321px !important;
    max-width: 100% !important;
  }
  .trade-compass-plus__subtitle {
    width: 204px !important;
  }
  .trade-compass-plus {
    gap: 16px !important;
  }
  .trade-compass-plus__content {
    width: 204px !important;
  }
  .due-diligence-plus {
    gap: 16px !important;
  }
  .due-diligence-plus__content {
    width: 204px !important;
  }
  .due-diligence-plus__subtitle {
    width: 204px !important;
  }
  /* Trade Compass Plus Card Mobile Styles */
  .trade-compass-plus-card {
    width: 353px;
    height: 144px;
    max-width: 100%;
  }
  .trade-compass-plus-card__top {
    flex-direction: column;
  }
  .trade-compass-plus-card__content {
    width: 100%;
    gap: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .trade-compass-plus-card__bottom-row {
    gap: 5px;
    align-items: flex-end;
    margin-top: auto;
  }
  .trade-compass-plus-card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
  .trade-compass-plus-card__description {
    font-size: 14px;
    line-height: 20px;
    width: 204px;
  }
  .trade-compass-plus-card__button {
    width: 112px;
    height: 32px;
  }
  .trade-compass-plus-card__button span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
  /* Due Diligence Plus Card Mobile Styles */
  .due-diligence-plus-card {
    width: 353px;
    height: 144px;
    max-width: 100%;
  }
  .due-diligence-plus-card__top {
    flex-direction: column;
  }
  .due-diligence-plus-card__content {
    width: 100%;
    gap: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .due-diligence-plus-card__bottom-row {
    gap: 5px;
    align-items: flex-end;
    margin-top: auto;
  }
  .due-diligence-plus-card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
  .due-diligence-plus-card__description {
    font-size: 14px;
    line-height: 20px;
    width: 204px;
  }
  .due-diligence-plus-card__button {
    width: 112px;
    height: 32px;
  }
  .due-diligence-plus-card__button span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }
}
.dd-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dd-attribs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dd-audio-player--locked {
  cursor: not-allowed;
}
.dd-audio-player--locked button,
.dd-audio-player--locked [data-action] {
  cursor: not-allowed;
}

.score-container.green {
  --dd-background: radial-gradient(
      78.04% 50.03% at 50% 0%,
      rgba(17, 181, 127, 0.06) 0%,
      rgba(17, 181, 127, 0) 100%
    ),
    #0f0f11;
  --dd-border: 1px solid rgba(17, 181, 127, 0.04);
  --dd-color: #11b57f;
  --dd-progress-background: linear-gradient(90deg, #0f0f11 0%, #10b981 100%);
  --dd-dot-background: linear-gradient(90deg, rgba(17, 181, 127, 0) -207.81%, #11b57f 100%);
  --dd-dot-drop-shadow: drop-shadow(0px 0px 8px #37a47c);
}

.score-container.red {
  --dd-border: 1px solid rgba(244, 63, 95, 0.04);
  --dd-background: radial-gradient(
      78.04% 50.03% at 50% 0%,
      rgba(244, 63, 95, 0.06) 0%,
      rgba(244, 63, 95, 0) 100%
    ),
    #0f0f11;
  --dd-color: #f43f5f;
  --dd-progress-background: linear-gradient(90deg, #0f0f11 0%, #f43f5f 100%);
  --dd-dot-background: linear-gradient(90deg, rgba(244, 63, 95, 0) -207.81%, #f43f5f 100%);
  --dd-dot-drop-shadow: drop-shadow(0px 0px 8px #f53c41);
}

.score-container {
  width: 100%;
  height: 140px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .score-container {
    height: 132px;
  }
}

.score-container .running_border {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border-radius: inherit;
  transform-origin: center center;
  pointer-events: none;
  animation: radial1 5s linear infinite;
  will-change: transform;
  background-image: conic-gradient(transparent, transparent, transparent, var(--dd-color), transparent, transparent, transparent, transparent, transparent);
  pointer-events: none;
}

.score-container .score-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: var(--dd-background);
  border: var(--dd-border);
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  position: relative;
  z-index: 1;
}

.score-container .score-title {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  color: var(--white-60);
  font: var(--body-medium);
}

.score-container .score-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.score-container .score-progress .score-progress-value {
  color: var(--white-40);
  font: var(--small-medium);
}

.score-container .score-progress .score-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 24px;
}

.score-container .score-progress .score-progress-bar .score-progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  animation: none;
  transition: width 1.5s linear;
  background: var(--dd-progress-background);
  border-radius: 24px;
}

.score-container .score-progress .score-progress-bar .score-progress-fill::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: -100%;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--dd-dot-background);
  filter: var(--dd-dot-drop-shadow) blur(6px);
}

.score-container .score-progress .score-progress-bar .score-progress-countup {
  position: absolute;
  bottom: calc(100% + 16px);
  left: calc(100% - 24px);
  letter-spacing: -1px;
  color: var(--dd-color);
  font: var(--2x-medium);
}

[data-page=research-detail] {
  position: relative;
}

[data-page=research-detail] main {
  padding: 40px 0 40px;
  color: #e4e4e7;
}

[data-page=research-detail] section.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--container-grid-gap-x);
}

[data-page=research-detail] section.container .inner {
  grid-column: 4/10;
}

.research-paper-navbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.research-paper-navbar__text {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.5s var(--easeOutQuart);
}

.research-paper-navar__text {
  color: rgba(255, 255, 255, 0.8980392157);
}

@media (max-width: 768px) {
  [data-page=research-detail] .rp-post__info {
    margin-bottom: 0;
  }
}
[data-page=research-detail] .post__header {
  margin-bottom: 20px;
}

[data-page=research-detail] .post__header__title {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  margin-bottom: 32px;
}

[data-page=research-detail] .post__working {
  margin-top: 40px;
  padding: 24px 24px 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11;
}

[data-page=research-detail] .post__working__top {
  display: flex;
  gap: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

[data-page=research-detail] .post__working__heading {
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-family: var(--font-base);
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
}

[data-page=research-detail] .post__working__content {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 142.857%;
  text-align: center;
  font-family: var(--font-base);
  margin-top: 16px;
}

[data-page=research-detail] .post__info__general {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-page=research-detail] .post__info__general__left {
  display: flex;
  gap: 8px;
  align-items: center;
}

[data-page=research-detail] .post__info__general__left__category {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.8);
}

[data-page=research-detail] .post__info__general__left__separate {
  width: 1.5px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
}

[data-page=research-detail] .post__info__general__left__timeline {
  font: var(--sm-medium);
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=research-detail] .post__info__general__right {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=research-detail] .post__info__title {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
}

[data-page=research-detail] .post__info__description {
  font: var(--post-regular);
  color: rgba(255, 255, 255, 0.6);
}

[data-page=research-detail] .post__info__tabs {
  display: flex;
  gap: 8px;
}

[data-page=research-detail] .post__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-page=research-detail] .post__content__paragraph {
  font: var(--post-regular);
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
}

[data-page=research-detail] .post__content__divider {
  height: 1px;
  width: 100%;
  margin: 16px 0;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=research-detail] .post__content__h4 {
  font: var(--xl-medium);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 24px;
  scroll-margin-top: 84px;
}

[data-page=research-detail] .post__content__h6 {
  font: var(--post-regular);
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

[data-page=research-detail] .post__content__ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

[data-page=research-detail] .post__content__li {
  width: 100%;
  list-style-type: disc;
}

[data-page=research-detail] .post__content__block {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=research-detail] .post__content__block p {
  font: var(--post-regular);
  width: 100%;
  background: #9f9fa0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=research-detail] .post__content__summary {
  width: 100%;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  padding: 16px 32px;
  padding-right: 0;
  color: #9f9fa0;
}

[data-page=research-detail] .post__content__summary p {
  font: var(--post-regular);
}

[data-page=research-detail] .post__content__image {
  width: 100%;
  height: 384px;
  max-width: none;
  max-height: none;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

[data-page=research-detail] .sidebar-toggle-section {
  margin-bottom: 0;
  z-index: 10;
  transition: transform 1s var(--easeOutQuart);
  will-change: transform;
}

[data-page=research-detail] .sidebar-toggle-button,
[data-page=research-detail] .sidebar-toggle-button__icon {
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--easeOutQuart);
}

[data-page=research-detail] .sidebar-toggle-overlay {
  display: none;
}

[data-page=research-detail] .sidebar-toggle-section.is-sticky .sidebar-toggle-button {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-page=research-detail] .sidebar-toggle-section.is-open.is-sticky {
  transform: translateX(-50%);
}

[data-page=research-detail] .sidebar-toggle-section.is-sticky .sidebar-toggle-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0F0F11;
  z-index: -1;
}

[data-page=research-detail] .sidebar {
  --width: 244px;
  --top-offset: 100px;
  --icon-size: 16px;
  --inactive-padding: 16px;
  --inactive-width: calc(var(--inactive-padding) * 2 + var(--icon-size));
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 12;
  width: var(--width);
  height: calc(100dvh - var(--top-offset));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  border-top-right-radius: 16px;
  padding: 1px;
  padding-bottom: 0;
  overflow: hidden;
  transform: translateX(calc(-100% + var(--inactive-width)));
  transition: transform 0.3s var(--easeOutQuart);
  will-change: transform;
}

[data-page=research-detail] .sidebar.active {
  transform: translateX(0);
}

[data-page=research-detail] .sidebar:not(.active) .sidebar__inner__header__text,
[data-page=research-detail] .sidebar:not(.active) .sidebar__inner__body {
  opacity: 0;
  pointer-events: none;
}

[data-page=research-detail] .sidebar:not(.active) .sidebar__inner__header {
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
}

[data-page=research-detail] .sidebar__inner {
  border-top-right-radius: 15px;
  background: #0F0F11;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

[data-page=research-detail] .sidebar__inner__header {
  width: 100%;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-image-source 0.3s var(--easeOutQuart);
}

[data-page=research-detail] .sidebar__inner__header,
[data-page=research-detail] .sidebar__inner__body__group__heading {
  border-bottom: 1px solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=research-detail] .sidebar__inner__header__text {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.9);
  transition: opacity 0.3s var(--easeOutQuart);
  will-change: opacity;
}

[data-page=research-detail] .sidebar__inner__header__button,
[data-page=research-detail] .sidebar__inner__header__button__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page=research-detail] .sidebar__inner__header__button__icon svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  stroke: rgba(255, 255, 255, 0.6);
}

[data-page=research-detail] .sidebar__inner__header__button__icon svg path {
  stroke: rgba(255, 255, 255, 0.6);
  transition: stroke 0.3s var(--easeOutQuart), stroke-opacity 0.3s var(--easeOutQuart);
}

[data-page=research-detail] .sidebar__inner__header__button:hover .sidebar__inner__header__button__icon svg,
[data-page=research-detail] .sidebar__inner__header__button:hover .sidebar__inner__header__button__icon svg path {
  stroke: #FFFFFF;
  stroke-opacity: 1;
}

[data-page=research-detail] .sidebar:not(.active):hover .sidebar__inner__header__button__icon svg,
[data-page=research-detail] .sidebar:not(.active):hover .sidebar__inner__header__button__icon svg path {
  stroke: #FFFFFF;
  stroke-opacity: 1;
}

[data-page=research-detail] .sidebar__inner__body {
  width: 100%;
  flex: 1;
  max-height: calc(100% - 49px);
  transition: opacity 0.3s var(--easeOutQuart);
  will-change: opacity;
}

[data-page=research-detail] .sidebar__inner__body__inner {
  max-height: 100%;
  padding-bottom: 12px;
}

[data-page=research-detail] .sidebar__inner__body__group {
  width: 100%;
  padding: 0 16px;
}

[data-page=research-detail] .sidebar__inner__body__group.active .sidebar__inner__body__group__heading {
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50.39%, rgba(255, 255, 255, 0) 100%);
  color: rgba(255, 255, 255, 0.8980392157);
}

[data-page=research-detail] .sidebar__inner__body__group__heading,
[data-page=research-detail] .sidebar__inner__body__group__item {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.54);
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

[data-page=research-detail] .sidebar__inner__body__group__heading {
  padding: 12px 0;
}

[data-page=research-detail] .sidebar__inner__body__group__items {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 0;
}

[data-page=research-detail] .sidebar__inner__body__group__item {
  padding: 8px 16px;
  transition: color 0.2s var(--easeOutQuart);
}
[data-page=research-detail] .sidebar__inner__body__group__item:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}

@media (max-width: 768px) {
  [data-page=research-detail] main {
    padding: 20px 0 40px;
    color: #e4e4e7;
  }
  [data-page=research-detail] section.container {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
  [data-page=research-detail] section.container .inner {
    grid-column: span 4;
  }
  [data-page=research-detail] .post__content__ul {
    padding-left: 16px;
  }
  [data-page=research-detail] .post__content__li div {
    width: calc(100% + 16px);
    margin-left: -16px;
  }
  [data-page=research-detail] .post__content__image {
    width: 100%;
    height: 204px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin: 0;
  }
  [data-page=research-detail] .post__content__paragraph {
    font: var(--xs-regular);
  }
  [data-page=research-detail] .post__content__h4 {
    margin-bottom: 0;
    scroll-margin-top: 82px;
  }
  [data-page=research-detail] .post__content__block p {
    font: var(--sm-regular);
  }
  [data-page=research-detail] .post__content__summary {
    font: var(--sm-regular);
  }
  [data-page=research-detail] .post__content__link {
    font: var(--sm-medium);
  }
  [data-page=research-detail] .post__content__divider {
    margin: 0;
  }
  [data-page=research-detail] .sidebar-toggle-section {
    margin-bottom: 24px;
  }
  [data-page=research-detail] .sidebar-toggle-overlay.active {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    position: fixed;
    left: 0;
    z-index: 11;
  }
  [data-page=research-detail] .sidebar {
    --width: 313px;
    --inactive-width: 0px;
    --top-offset: 112px;
  }
  [data-page=research-detail] .sidebar-toggle-button,
  [data-page=research-detail] .sidebar-toggle-button__icon {
    display: flex;
  }
}
@media (min-width: 769px) {
  [data-page=research-detail] .sidebar:not(.active):hover {
    transform: translateX(calc(-100% + var(--inactive-width) + 16px));
  }
}
[data-page=onboarding] .onboarding__left__inner__top__method[data-active=true] {
  border-image-source: linear-gradient(90deg, rgba(36, 162, 223, 0) 0%, #24a2df 50.39%, rgba(36, 162, 223, 0) 100%);
  background: radial-gradient(50% 50% at 50% 100%, rgba(36, 162, 223, 0.12) 0%, rgba(36, 162, 223, 0) 100%);
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method {
  border-image-source: var(--border);
  background: var(--background);
  overflow: hidden;
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner {
  position: relative;
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__mask {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  max-width: unset;
  max-height: unset;
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__left__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-background);
  border: 1px solid var(--icon-border);
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__left__info h6 {
  font: var(--xl-medium);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__left__info p {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: var(--button-background);
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method__inner__right span {
  font: var(--sm-medium);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method[data-account=bitget] {
  --icon-background: #00e0ff33;
  --icon-border: #00e0ff99;
  --background: radial-gradient(
    50% 50% at 50% 100%,
    rgba(0, 224, 255, 0.12) 0%,
    rgba(0, 224, 255, 0) 100%
  );
  --border: linear-gradient(
    90deg,
    rgba(0, 224, 255, 0) 0%,
    #00e0ff 50.39%,
    rgba(0, 224, 255, 0) 100%
  );
  --button-background: linear-gradient(0deg, rgba(29, 162, 180, 0.08), rgba(29, 162, 180, 0.08)),
    radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(29, 162, 180, 0.08) 0%,
      rgba(29, 162, 180, 0) 100%
    );
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method[data-account=bitpanda] {
  --icon-background: #27d17f33;
  --icon-border: #27d17f99;
  --background: radial-gradient(
    50% 50% at 50% 100%,
    rgba(39, 209, 127, 0.12) 0%,
    rgba(39, 209, 127, 0) 100%
  );
  --border: linear-gradient(
    90deg,
    rgba(39, 209, 127, 0) 0%,
    #27d17f 50.39%,
    rgba(39, 209, 127, 0) 100%
  );
  --button-background: linear-gradient(0deg, rgba(39, 209, 127, 0.08), rgba(39, 209, 127, 0.08)),
    radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(39, 209, 127, 0.08) 0%,
      rgba(39, 209, 127, 0) 100%
    );
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__method[data-account=blofin] {
  --icon-background: #ff880033;
  --icon-border: #ff880099;
  --background: radial-gradient(
    50% 50% at 50% 100%,
    rgba(255, 136, 0, 0.12) 0%,
    rgba(255, 136, 0, 0) 100%
  );
  --border: linear-gradient(
    90deg,
    rgba(255, 136, 0, 0) 0%,
    #ff8800 50.39%,
    rgba(255, 136, 0, 0) 100%
  );
  --button-background: linear-gradient(0deg, rgba(255, 136, 0, 0.08), rgba(255, 136, 0, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 136, 0, 0.08) 0%, rgba(255, 136, 0, 0) 100%);
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__notification {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=onboarding] main[data-step="3"] .onboarding__left__inner__top__notification a {
  font: var(--sm-regular);
  text-decoration-line: underline;
  text-decoration-style: solid;
  color: rgba(255, 255, 255, 0.8);
}

[data-page=onboarding] > main {
  overflow: hidden;
  display: flex;
  height: 100%;
  height: 100vh;
}

[data-page=onboarding] > main > div {
  width: 50%;
  height: 100%;
}

[data-page=onboarding] #footer {
  padding-bottom: 0;
}

[data-page=onboarding] .onboarding__left {
  position: relative;
  padding: 80px 74px;
  overflow-x: hidden;
  width: 50%;
}

[data-page=onboarding] .onboarding__left::-webkit-scrollbar {
  display: none;
}

[data-page=onboarding] .onboarding__left__inner {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

[data-page=onboarding] .onboarding__left__inner__top {
  width: 100%;
}

[data-page=onboarding] .onboarding__left__inner__top__logo {
  display: block;
  width: 89px;
  height: 20px;
  margin: 0 auto;
}

[data-page=onboarding] .onboarding__left__inner__top__title {
  margin: 80px auto 40px;
  font-size: 55px;
  font-weight: 500;
  line-height: 63.25px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #e4e4e7;
}

[data-page=onboarding] .onboarding__left__inner__top__title span {
  color: #555658;
}

[data-page=onboarding] .onboarding__left__inner__top__title img {
  margin: 0 10px;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 4.49px 10.11px 0px rgba(0, 0, 0, 0.8784313725), 0px 18.53px 18.53px 0px rgba(0, 0, 0, 0.768627451), 0px 42.11px 25.27px 0px rgba(0, 0, 0, 0.4509803922), 0px 74.68px 29.76px 0px rgba(0, 0, 0, 0.1294117647), 0px 116.8px 32.57px 0px rgba(0, 0, 0, 0.0196078431);
  transform: translateY(16%);
}

[data-page=onboarding] .onboarding__left__inner__top__description {
  font: var(--sm-medium);
  text-align: center;
  width: 426px;
  color: rgba(161, 163, 167, 0.8980392157);
  margin: 32px 0;
}
@media (min-width: 768px) {
  [data-page=onboarding] .onboarding__left__inner__top__description {
    margin: 80px auto 40px;
  }
}

[data-page=onboarding] .onboarding__left__inner__top__divider {
  height: 1px;
  width: 100%;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=onboarding] .onboarding__left__inner__top__step {
  width: 100%;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-page=onboarding] .onboarding__left__inner__top__step div {
  position: relative;
  width: 36px;
  height: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1607843137);
}

[data-page=onboarding] .onboarding__left__inner__top__step div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: #ffffff;
  transform: scale(0);
  transform-origin: left;
  will-change: transform;
}

[data-page=onboarding] main[data-step=one] .onboarding__left__inner__top__step div:nth-child(1)::after {
  transform: scale(0.5);
}

[data-page=onboarding] main[data-step=two] .onboarding__left__inner__top__step div:nth-child(1)::after {
  transform: scale(1);
}

[data-page=onboarding] main[data-step=three] .onboarding__left__inner__top__step div:nth-child(1)::after,
[data-page=onboarding] main[data-step=four] .onboarding__left__inner__top__step div:nth-child(1)::after,
[data-page=onboarding] main[data-step=five] .onboarding__left__inner__top__step div:nth-child(1)::after {
  transform: scale(1);
}

[data-page=onboarding] main[data-step=three] .onboarding__left__inner__top__step div:nth-child(2)::after,
[data-page=onboarding] main[data-step=four] .onboarding__left__inner__top__step div:nth-child(2)::after {
  transform: scale(0.5);
}

[data-page=onboarding] main[data-step=five] .onboarding__left__inner__top__step div:nth-child(2)::after {
  transform: scale(1);
}

[data-page=onboarding] main[data-step=one] .onboarding__left--step-three,
[data-page=onboarding] main[data-step=one] .onboarding__left--step-three--connect,
[data-page=onboarding] main[data-step=one] .onboarding__left--step-three--five,
[data-page=onboarding] main[data-step=two] .onboarding__left--step-three,
[data-page=onboarding] main[data-step=two] .onboarding__left--step-three--connect,
[data-page=onboarding] main[data-step=two] .onboarding__left--step-three--five,
[data-page=onboarding] main[data-step=three] .onboarding__left--step-three--connect,
[data-page=onboarding] main[data-step=three] .onboarding__left--step-three--five,
[data-page=onboarding] main[data-step=four] .onboarding__left--step-three,
[data-page=onboarding] main[data-step=four] .onboarding__left--step-three--five,
[data-page=onboarding] main[data-step=five] .onboarding__left--step-three,
[data-page=onboarding] main[data-step=five] .onboarding__left--step-three--connect {
  display: none;
}

[data-page=onboarding] main[data-step=three] .onboarding__left--step-one_two,
[data-page=onboarding] main[data-step=four] .onboarding__left--step-one_two,
[data-page=onboarding] main[data-step=five] .onboarding__left--step-one_two {
  display: none;
}

[data-page=onboarding] main[data-step=one] .onboarding__right__guide,
[data-page=onboarding] main[data-step=three] .onboarding__right__guide,
[data-page=onboarding] main[data-step=four] .onboarding__right__guide {
  visibility: visible;
}

[data-page=onboarding] .manual-auth-fallback {
  display: none;
}

[data-page=onboarding]:has(#terms:checked):has(#privacy:checked):has(#risk:checked):has(#age_location:checked) .manual-auth-fallback {
  display: block;
}

[data-page=onboarding] .onboarding__left__inner__top__method {
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  --background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  --border: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50.39%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: var(--border);
  background: var(--background);
  overflow: hidden;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__left span {
  font: var(--xl-medium);
  color: rgba(255, 255, 255, 0.8);
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner {
  position: relative;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__mask {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  max-width: unset;
  max-height: unset;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__left__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-background);
  border: 1px solid var(--icon-border);
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__left__info h6 {
  font: var(--xl-medium);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=onboarding] .onboarding__left__inner__top__method__inner__left__info p {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=onboarding] main[data-step=three] .onboarding__left__inner__top__method__inner__right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: var(--button-background);
  border: 1px solid;
  border-color: var(--button-border);
  transition: background 0.6s var(--easeOutQuart);
}

[data-page=onboarding] main[data-step=three] .onboarding__left__inner__top__method__inner__right:hover {
  background: var(--button-background-hover);
}

[data-page=onboarding] main:not([data-step=one]) .onboarding__left__inner__top__method__inner__right img,
[data-page=onboarding] main:not([data-step=two]) .onboarding__left__inner__top__method__inner__right img {
  width: 16px;
  height: 16px;
}

[data-page=onboarding] main:not([data-step=one]) .onboarding__left__inner__top__method__inner__right span,
[data-page=onboarding] main:not([data-step=two]) .onboarding__left__inner__top__method__inner__right span {
  font: var(--sm-medium);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=onboarding] .onboarding__left__inner__top__method[data-account=Bitget] {
  --icon-background: #00e0ff33;
  --icon-border: #00e0ff99;
  --background: radial-gradient(50% 50% at 50% 100%, rgba(0, 224, 255, 0.12) 0%, rgba(0, 224, 255, 0) 100%);
  --border: linear-gradient(90deg, rgba(0, 224, 255, 0) 0%, #00e0ff 50.39%, rgba(0, 224, 255, 0) 100%);
  --button-background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(29, 162, 180, 0.08) 0%, rgba(29, 162, 180, 0) 100%),
    rgba(29, 162, 180, 0.08);
  --button-border: rgba(29, 162, 180, 0.2);
  --button-background-hover: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(29, 162, 180, 0.4) 0%,
      rgba(29, 162, 180, 0) 100%
    ),
    rgba(29, 162, 180, 0.2);
}

[data-page=onboarding] .onboarding__left__inner__top__method[data-account=Coinbase] {
  --icon-background: rgba(255, 255, 255, 0.2);
  --icon-border: rgba(255, 255, 255, 0.6);
  --background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  --border: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50.39%, rgba(255, 255, 255, 0) 100%);
  --button-background: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.08);
  --button-border: rgba(255, 255, 255, 0.2);
  --button-background-hover: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(255, 255, 255, 0.2);
}

[data-page=onboarding] .onboarding__left__inner__top__method[data-account=Bitpanda] {
  --icon-background: #27d17f33;
  --icon-border: #27d17f99;
  --background: radial-gradient(50% 50% at 50% 100%, rgba(39, 209, 127, 0.12) 0%, rgba(39, 209, 127, 0) 100%);
  --border: linear-gradient(90deg, rgba(39, 209, 127, 0) 0%, #27d17f 50.39%, rgba(39, 209, 127, 0) 100%);
  --button-background: linear-gradient(0deg, rgba(39, 209, 127, 0.08), rgba(39, 209, 127, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(39, 209, 127, 0.08) 0%, rgba(39, 209, 127, 0) 100%);
  --button-border: rgba(39, 209, 127, 0.2);
  --button-background-hover: linear-gradient(0deg, rgba(39, 209, 127, 0.1), rgba(39, 209, 127, 0.1)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(39, 209, 127, 0.4) 0%, rgba(39, 209, 127, 0.1) 100%);
}

[data-page=onboarding] .onboarding__left__inner__top__method[data-account=Bybit] {
  --icon-background: rgba(247, 166, 0, 0.2);
  --icon-border: rgba(247, 166, 0, 0.6);
  --background: radial-gradient(50% 50% at 50% 100%, rgba(247, 166, 0, 0.12) 0%, rgba(247, 166, 0, 0) 100%);
  --border: linear-gradient(90deg, rgba(247, 166, 0, 0) 0%, #f7a600 50.39%, rgba(247, 166, 0, 0) 100%);
  --button-background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(247, 166, 0, 0.08) 0%, rgba(247, 166, 0, 0) 100%),
    rgba(247, 166, 0, 0.08);
  --button-border: rgba(247, 166, 0, 0.2);
  --button-background-hover: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(247, 166, 0, 0.4) 0%,
      rgba(247, 166, 0, 0) 100%
    ),
    rgba(247, 166, 0, 0.2);
}

[data-page=onboarding] .onboarding__left__inner__top__method[data-account=Blofin] {
  --icon-background: #ff880033;
  --icon-border: #ff880099;
  --background: radial-gradient(50% 50% at 50% 100%, rgba(255, 136, 0, 0.12) 0%, rgba(255, 136, 0, 0) 100%);
  --border: linear-gradient(90deg, rgba(255, 136, 0, 0) 0%, #ff8800 50.39%, rgba(255, 136, 0, 0) 100%);
  --button-background: linear-gradient(0deg, rgba(255, 136, 0, 0.08), rgba(255, 136, 0, 0.08)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 136, 0, 0.08) 0%, rgba(255, 136, 0, 0) 100%);
  --button-border: rgba(255, 136, 0, 0.2);
  --button-background-hover: linear-gradient(0deg, rgba(255, 136, 0, 0.1), rgba(255, 136, 0, 0.1)),
    radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 136, 0, 0.4) 0%, rgba(255, 136, 0, 0.1) 100%);
}

[data-page=onboarding] .onboarding__left__inner__top__method[data-account=CoinW] {
  --icon-background: rgba(108, 79, 255, 0.2);
  --icon-border: rgba(108, 79, 255, 0.6);
  --background: radial-gradient(50% 50% at 50% 100%, rgba(108, 79, 255, 0.12) 0%, rgba(108, 79, 255, 0) 100%);
  --border: linear-gradient(90deg, rgba(108, 79, 255, 0) 0%, #6c4fff 50.39%, rgba(108, 79, 255, 0) 100%);
  --button-background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(108, 79, 255, 0.08) 0%, rgba(108, 79, 255, 0) 100%),
    rgba(108, 79, 255, 0.08);
  --button-border: rgba(108, 79, 255, 0.2);
  --button-background-hover: radial-gradient(
      49.38% 49.38% at 50% 0%,
      rgba(108, 79, 255, 0.4) 0%,
      rgba(108, 79, 255, 0) 100%
    ),
    rgba(108, 79, 255, 0.2);
}

[data-page=onboarding] .onboarding__left__inner__top__greeting {
  width: 390px;
  margin: 0 auto;
  margin-bottom: 32px;
}

[data-page=onboarding] .onboarding__left__inner__top__greeting h4 {
  font: var(--xl-medium);
  text-align: center;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
}

[data-page=onboarding] .onboarding__left__inner__top__greeting p {
  font: var(--sm-regular);
  text-align: center;
  color: rgba(255, 255, 255, 0.5019607843);
}

[data-page=onboarding] .onboarding__left__alert {
  --border-color: linear-gradient(270deg, rgba(244, 63, 95, 0) 0%, #f43f5f 50.39%, rgba(244, 63, 95, 0) 100%);
  --background: radial-gradient(50% 50% at 50% 100%, rgba(244, 63, 95, 0.12) 0%, rgba(244, 63, 95, 0) 100%);
  --text-color: linear-gradient(0deg, #fda3af 0%, #f9f9f9 100%);
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transform: translateY(-100%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  background: var(--background);
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: var(--border-color);
}

[data-page=onboarding] main[data-state=default] .onboarding__left__alert {
  transform: translateY(-100%);
}

[data-page=onboarding] main[data-state=default] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper__icon {
  opacity: 0;
}

[data-page=onboarding] [data-state=success] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper__icon--success {
  opacity: 1;
}

[data-page=onboarding] main[data-state=success] .onboarding__left__alert[data-show=true] {
  transform: translateY(0%);
}

[data-page=onboarding] [data-state=fail] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper__icon--fail {
  opacity: 1;
}

[data-page=onboarding] main[data-state=fail] .onboarding__left__alert[data-show=true] {
  transform: translateY(0%);
}

[data-page=onboarding] main[data-state=success] .onboarding__left__alert {
  --text-color: linear-gradient(0deg, #a3f3fd 0%, #f9f9f9 100%);
  --border-color: linear-gradient(270deg, rgba(29, 162, 180, 0) 0%, #1da2b4 50.39%, rgba(29, 162, 180, 0) 100%);
  --background: radial-gradient(50% 50% at 50% 100%, rgba(29, 162, 180, 0.12) 0%, rgba(29, 162, 180, 0) 100%);
}

[data-page=onboarding] .onboarding__left__alert__content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

[data-page=onboarding] .onboarding__left__alert__content a,
[data-page=onboarding] .onboarding__left__alert__content p {
  font: var(--xs-medium);
  background: var(--text-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page=onboarding] .onboarding__left__alert__content p {
  text-align: center;
}

[data-page=onboarding] .onboarding__left__alert__content a {
  position: relative;
}

[data-page=onboarding] .onboarding__left__alert__content a::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 100%;
  background: var(--text-color);
  height: 1px;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper_container {
  width: 400px;
  margin: 0 auto 40px;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper {
  padding: 24px;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form h6 {
  font: var(--xs-medium);
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper {
  --placeholderColor: #ffffff;
  --text-color: #ffffff;
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 74.04%);
  --background: linear-gradient(0deg, #0f0f11, #0f0f11),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  width: 100%;
  border-radius: 9999px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeInOutQuart);
}

[data-page=onboarding] [data-state=fail] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper {
  --border-color: linear-gradient(0deg, rgba(244, 63, 95, 0.4), rgba(244, 63, 95, 0.4)),
    linear-gradient(180deg, rgba(244, 63, 95, 0.384314) 0%, rgba(244, 63, 95, 0.384314) 74.04%);
  --background: linear-gradient(0deg, #0f0406, #0f0406),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  --text-color: #fda3af;
}

[data-page=onboarding] [data-state=success] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper {
  --border-color: linear-gradient(0deg, rgba(29, 162, 180, 0.4), rgba(29, 162, 180, 0.4)),
    linear-gradient(180deg, rgba(29, 162, 180, 0.384314) 0%, rgba(29, 162, 180, 0.384314) 74.04%);
  --background: linear-gradient(0deg, #040e0f, #040e0f),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  --text-color: #a3f2fd;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper::before {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--zIndex);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: var(--border-color);
  border-radius: inherit;
  overflow: hidden;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--zIndex);
  width: 100%;
  height: 100%;
  background: var(--background);
  border-radius: inherit;
  overflow: hidden;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form__inputWrapper input {
  width: 100%;
  padding: 8px 0;
  font: var(--sm-regular);
  text-align: center;
  color: var(--text-color);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form input::placeholder {
  font: var(--sm-regular);
  color: var(--text-color);
  opacity: 0.4;
  text-align: center;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form button {
  font: var(--sm-medium);
  display: block;
  width: 100%;
  border-radius: 999px;
  padding: 8px 0;
  margin-bottom: 24px;
  background: var(--primary-black-background);
  color: var(--white-40);
  transition: 0.5s var(--easeOutQuart);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__form button:not(:disabled):hover {
  background: var(--primary-black-background-hover);
  color: var(--white-90);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__divider {
  width: 100%;
  height: 1px;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide {
  margin-top: 24px;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide .onboarding__left__inner__top__formWrapper__inner__guide_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  [data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide .onboarding__left__inner__top__formWrapper__inner__guide_top {
    display: none;
  }
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide .onboarding__left__inner__top__formWrapper__inner__guide_top h6 {
  font: var(--xs-medium);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide .onboarding__left__inner__top__formWrapper__inner__guide_top button {
  font: var(--paragraph-medium);
  color: var(--white);
  text-align: left;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide h5 {
  font: var(--sm-medium);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide p {
  font: var(--sm-regular);
  color: rgba(255, 255, 255, 0.4);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide a {
  font: var(--sm-medium);
  text-decoration-line: underline;
  text-decoration-style: solid;
  color: #ffffff;
  transition: color 0.4s var(--easeOutQuart);
}

[data-page=onboarding] .onboarding__left__inner__top__formWrapper__inner__guide a:hover {
  color: var(--white-40);
}

[data-page=onboarding] .onboarding__left__inner__top__warning {
  width: 400px;
  margin: 0 auto;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 50.39%, rgba(255, 255, 255, 0) 100%);
  padding: 32px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

[data-page=onboarding] .onboarding__left__inner__top__warning p {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(249, 249, 249, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

[data-page=onboarding] .onboarding__left__inner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

[data-page=onboarding] .onboarding__left__inner__actions button,
[data-page=onboarding] .onboarding__left__inner__actions a {
  background: var(--primary-black-background);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  will-change: opacity;
  transition: 0.5s var(--easeOutQuart);
  will-change: opacity;
}

[data-page=onboarding] .onboarding__left__inner__actions a:hover,
[data-page=onboarding] .onboarding__left__inner__actions button:not(:disabled):hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

[data-page=onboarding] .onboarding__left__inner__actions button span,
[data-page=onboarding] .onboarding__left__inner__actions a span {
  font: var(--sm-medium);
  color: var(--white-90);
}

[data-page=onboarding] .onboarding__left__inner__actions .button--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--iconLeft {
  padding-left: 6px;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--iconRight {
  padding-right: 6px;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--iconRight span {
  order: 1;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--iconRight img {
  order: 2;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--light {
  background: var(--primary-white-background) !important;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--light:hover {
  background: var(--primary-white-background-hover) !important;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--light span {
  color: var(--primary-black-disabled-color) !important;
}

[data-page=onboarding] .onboarding__left__inner__actions .button--light:hover span {
  color: var(--primary-black-disabled-color-hover) !important;
}

[data-page=onboarding] .onboarding__left__inner__top__redirect-status {
  margin-top: 24px;
  text-align: center;
}

[data-page=onboarding] .onboarding__left__inner__top__redirect-status.hidden {
  display: none;
}

[data-page=onboarding] .onboarding__left__inner__top__redirect-status__message {
  font: var(--sm-medium);
  color: rgba(161, 163, 167, 0.8980392157);
  text-align: center;
  margin: 0;
}

[data-page=onboarding] .onboarding__left__inner__top__redirect-status__link {
  color: rgba(161, 163, 167, 0.8980392157);
  text-decoration: underline;
  transition: color 0.3s var(--easeOutQuart);
}

[data-page=onboarding] .onboarding__left__inner__top__redirect-status__link:hover {
  color: #ffffff;
}

[data-page=onboarding] .onboarding__left__inner__top__notification {
  height: 16px;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  display: none;
}

[data-page=onboarding] .onboarding__left__inner__top__notification span {
  font-size: 14px;
  font-weight: 500;
  line-height: 18.62px;
  color: rgba(161, 163, 167, 0.8980392157);
}

[data-page=onboarding] .onboarding__left__inner__top__notification a {
  font-size: 14px;
  font-weight: 500;
  line-height: 18.62px;
  color: rgba(161, 163, 167, 0.8980392157);
  text-decoration-line: underline;
  text-decoration-style: solid;
  transition: color 0.4s var(--easeOutQuart);
}

[data-page=onboarding] .onboarding__left__inner__top__notification a:hover {
  color: var(--white);
}

[data-page=onboarding] main[data-step=one] .onboarding__left__inner__top__notification,
[data-page=onboarding] main[data-step=three] .onboarding__left__inner__top__notification {
  display: flex;
}

[data-page=onboarding] .onboarding__left__inner__bottom {
  display: block;
}

[data-page=onboarding] main:not([data-step=one]) .onboarding__left__inner__bottom {
  display: none;
}

[data-page=onboarding] .onboarding__left__inner__bottom__top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 8px;
}

[data-page=onboarding] .onboarding__left__inner__bottom__top a {
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: #555658;
}

[data-page=onboarding] .onboarding__left__inner__bottom__bottom {
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: #555658;
  text-align: center;
}

[data-page=onboarding] .onboarding__right {
  position: relative;
  width: 50%;
}

[data-page=onboarding] .onboarding__right img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 756/982;
  object-fit: cover;
}

[data-page=onboarding] .onboarding__right__guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

@media (min-width: 768px) {
  [data-page=onboarding] .onboarding__right__guide {
    min-width: 498px;
  }
}
[data-page=onboarding] .onboarding__right__guide__videoWrapper {
  height: auto;
  border-radius: 14px;
  background: rgba(15, 15, 17, 0.4);
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  width: calc(100dvw - 40px);
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  [data-page=onboarding] .onboarding__right__guide__videoWrapper {
    width: 100%;
  }
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper::before {
  content: url(asset-path("icons/play.svg"));
  inset: 0;
  width: 62px;
  height: 62px;
  z-index: 2;
  position: absolute;
  margin: auto;
  pointer-events: auto;
  cursor: pointer;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper .plyr {
  width: 100%;
  height: 100%;
  --plyr-color-main: #6b6b6b;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper .plyr__poster {
  background-size: cover;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper .plyr video {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper .plyr--fullscreen-enabled video {
  object-fit: cover !important;
  object-position: center !important;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper video::-webkit-media-poster-image {
  object-fit: cover;
  object-position: center;
  background-color: #000;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper video {
  background-color: #000;
}

[data-page=onboarding] .onboarding__right__guide__videoWrapper.playing::before,
[data-page=onboarding] .onboarding__right__guide__videoWrapper.playing::after {
  display: none;
}

[data-page=onboarding] .onboarding__right__guide p {
  font: var(--sm-medium);
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}

[data-page=onboarding] .onboarding__right__guide p .support-handle {
  color: #ffffff;
  text-decoration: none;
}

[data-page=onboarding] .onboarding__right__guide p .desktop-only {
  display: none;
}
@media (min-width: 768px) {
  [data-page=onboarding] .onboarding__right__guide p .desktop-only {
    display: inline;
  }
}

[data-page=onboarding] .mobile-only {
  display: inline;
}
@media (min-width: 768px) {
  [data-page=onboarding] .mobile-only {
    display: none;
  }
}

[data-page=onboarding] .onboarding__right__guide--mobile {
  display: none;
  position: relative;
  margin: 0 auto;
  margin-bottom: 24px;
  transform: none;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

[data-page=onboarding] main[data-show-tutorial=true] .onboarding__left__inner__top__formWrapper_container,
[data-page=onboarding] main[data-show-tutorial=true] .onboarding__left__inner__top__warning,
[data-page=onboarding] main[data-show-tutorial=true] .onboarding__left__inner__actions {
  display: none;
}

[data-page=onboarding] main[data-show-tutorial=true] .onboarding__right__guide--mobile {
  display: flex;
  width: 100%;
  max-width: 400px;
}

[data-page=onboarding] .tutorial-modal__footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

[data-page=onboarding] .tutorial-modal__back {
  background: var(--primary-black-background);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  transition: 0.5s var(--easeOutQuart);
}

[data-page=onboarding] .tutorial-modal__back:hover {
  background: radial-gradient(49.38% 49.38% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.12);
}

[data-page=onboarding] .tutorial-modal__back span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4285714286em;
  color: rgba(255, 255, 255, 0.6);
}

[data-page=onboarding] .tutorial-modal__back svg {
  width: 16px;
  height: 16px;
}

[data-page=onboarding] .onboarding__left__inner__top__tutorial--mobile {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  [data-page=onboarding] .onboarding {
    background: linear-gradient(180deg, #0f0f11 0%, rgba(15, 15, 17, 0.8) 100%);
  }
  [data-page=onboarding] .onboarding__left {
    margin: 0 auto;
    padding: 16px;
  }
  [data-page=onboarding] .onboarding__left__inner__top {
    padding-top: 64px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__title {
    font-size: 30px;
    font-weight: 500;
    line-height: 115%; /* 34.5px */
    letter-spacing: -0.9px;
    margin-top: 40px;
    margin-bottom: 32px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__title img {
    width: 36px;
    height: 36px;
  }
  [data-page=onboarding] .onboarding__left__inner__bottom,
  [data-page=onboarding] .onboarding__right__guide {
    display: none;
  }
  [data-page=onboarding] .onboarding__right {
    position: absolute;
    z-index: -1;
    width: 100%;
  }
  [data-page=onboarding] .onboarding__right img {
    object-fit: fill;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__right {
    flex-shrink: 0;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__left__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__left__info p {
    font-size: 14px;
    line-height: 20px; /* 142.857% */
    max-width: 70%;
  }
  [data-page=onboarding] .onboarding__left__inner__top__notification.onboarding__left__inner__top__notification_mobile {
    display: flex !important;
    align-items: center;
    flex-direction: column;
  }
  [data-page=onboarding] .onboarding__left__inner__top__formWrapper_container,
  [data-page=onboarding] .onboarding__left__inner__top__greeting {
    width: auto;
  }
}
@media (max-width: 768px) {
  [data-page=onboarding] > main {
    height: 100dvh;
  }
  [data-page=onboarding] .onboarding__left {
    width: 100%;
    padding: 20px;
    background: linear-gradient(180deg, #0f0f11 0%, rgba(15, 15, 17, 0.8) 100%);
  }
  [data-page=onboarding] .onboarding__left__inner__top__tutorial--mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__tutorial--mobile h6 {
    font: var(--xs-medium);
    color: rgba(255, 255, 255, 0.4);
  }
  [data-page=onboarding] .onboarding__left__inner__top__tutorial--mobile .tutorial-link {
    font: var(--paragraph-medium);
    color: var(--white);
    text-align: left;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }
  [data-page=onboarding] .onboarding__left__inner__top {
    padding-top: 64px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__title {
    font-size: 30px;
    font-weight: 500;
    line-height: 115%; /* 34.5px */
    letter-spacing: -0.9px;
    margin-top: 40px;
    margin-bottom: 32px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__title img {
    width: 36px;
    height: 36px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__warning {
    width: 100%;
  }
  [data-page=onboarding] .onboarding__left__inner__top__warning p {
    text-align: center;
  }
  [data-page=onboarding] .onboarding__left__inner__top__description {
    width: auto;
    font-size: 14px;
    line-height: 150%; /* 21px */
  }
  [data-page=onboarding] main[data-state=success] .onboarding__left__alert[data-show=true],
  [data-page=onboarding] main[data-state=fail] .onboarding__left__alert[data-show=true] {
    transform: translateY(0) !important;
  }
  [data-page=onboarding] .onboarding__left__inner__bottom,
  [data-page=onboarding] .onboarding__right__guide {
    display: none;
  }
  [data-page=onboarding] .onboarding__right {
    position: absolute;
    z-index: -1;
    width: 100%;
  }
  [data-page=onboarding] .onboarding__right img {
    object-fit: cover;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner {
    height: auto;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__left span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  [data-page=onboarding] .onboarding__left__inner__top__notification {
    margin-top: 32px;
    display: flex !important;
    align-items: center;
  }
  [data-page=onboarding] .onboarding__left__inner__top__notification.onboarding__left__inner__top__notification_mobile {
    display: flex !important;
    align-items: center;
    flex-direction: column;
  }
  [data-page=onboarding] .onboarding__left__inner__top__notification span {
    font-size: 14px;
    font-weight: 500;
    line-height: 133%; /* 18.62px */
  }
  [data-page=onboarding] .onboarding__left__inner__top__step {
    margin: 40px 0;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method {
    padding: 20px 0;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__left__info h6 {
    font-size: 16px;
    line-height: 24px; /* 150% */
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__left__info p {
    font-size: 14px;
    line-height: 20px; /* 142.857% */
    max-width: 70%;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__right {
    flex-shrink: 0;
  }
  [data-page=onboarding] .onboarding__left__inner__top__method__inner__left__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
  }
  [data-page=onboarding] .onboarding__left--step-three,
  [data-page=onboarding] .onboarding__left__inner__actions {
    padding-bottom: 50px;
  }
  [data-page=onboarding] .onboarding__left__inner__top__formWrapper_container,
  [data-page=onboarding] .onboarding__left__inner__top__greeting {
    width: auto;
  }
  [data-page=onboarding] .onboarding__left__inner__mobile {
    justify-content: flex-start;
    gap: 40px;
  }
}
/* Tutorial Container - Hidden by default */
.onboarding__left__inner__tutorial {
  display: none;
  flex-direction: column;
  gap: 40px;
  padding-top: 64px;
  width: 100%;
  min-height: 100vh;
}

/* Logo - matching default view style */
.onboarding__left__inner__tutorial__logo {
  display: block;
  width: 89px;
  height: 20px;
  margin: 0 auto;
}

/* Progress indicators */
.onboarding__left__inner__tutorial__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.onboarding__left__inner__tutorial__progress__indicators {
  display: flex;
  gap: 8px;
}

.onboarding__left__inner__tutorial__progress__indicator {
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 49px;
}

.onboarding__left__inner__tutorial__progress__indicator.active {
  background: var(--white);
}

.onboarding__left__inner__tutorial__progress__title {
  font: var(--xl-medium);
  color: var(--white-80);
  text-align: center;
  letter-spacing: -0.05em;
}

/* Video section */
.onboarding__left__inner__tutorial__video {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.onboarding__left__inner__tutorial__video__wrapper {
  position: relative;
  width: 100%;
  max-width: 353px;
  height: 204px;
  background: rgba(15, 15, 17, 0.4);
  border-radius: 12px;
  overflow: hidden;
}

.onboarding__left__inner__tutorial__video__wrapper .plyr {
  width: 100%;
  height: 100%;
  --plyr-color-main: #6b6b6b;
}

.onboarding__left__inner__tutorial__video__wrapper .plyr__poster {
  background-size: cover;
}

.onboarding__left__inner__tutorial__video__wrapper .plyr video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.onboarding__left__inner__tutorial__video__play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.onboarding__left__inner__tutorial__video__play-button {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Create play triangle with CSS */
.onboarding__left__inner__tutorial__video__play-button::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 2px;
}

.onboarding__left__inner__tutorial__video__instructions {
  font: var(--sm-medium);
  color: var(--white-60);
  text-align: center;
  max-width: 353px;
}

.onboarding__left__inner__tutorial__video__instructions a {
  color: var(--white-80);
  text-decoration: underline;
}

/* Back button */
.onboarding__left__inner__tutorial__actions {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

.onboarding__left__inner__tutorial__back-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px 10px 12px;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 56px;
  font: var(--sm-medium);
  color: var(--white-60);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.onboarding__left__inner__tutorial__back-button img {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.onboarding__left__inner__tutorial__back-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white-80);
}

.onboarding__left__inner__tutorial__back-button:hover img {
  opacity: 0.8;
}

/* Toggle visibility based on data attribute - for Telegram page only */
[data-page=onboarding] main[data-step=one][data-show-tutorial=true] .onboarding__left__inner__top {
  display: none;
}

[data-page=onboarding] main[data-step=one][data-show-tutorial=true] .onboarding__left__inner__tutorial {
  display: flex;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .onboarding__left__inner__tutorial {
    padding: 64px 0px 40px;
  }
  .onboarding__left__inner__tutorial__video__wrapper {
    max-width: calc(100vw - 40px);
  }
}
dialog.alert-popup-error {
  position: fixed;
  inset: 0;
  z-index: 999999;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.4);
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeInOutQuart);
}

dialog.alert-popup-error[open] {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
}

.alert-popup-error-inner {
  position: relative;
  width: 400px;
  padding: 24px;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform 0.4s var(--easeInOutQuart);
  transform: translateY(100px);
}

dialog.alert-popup-error[open] .alert-popup-error-inner {
  transform: translateY(0);
}

.alert-popup-error-icon {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}

.alert-popup-error-close-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
}

.alert-popup-error-close-icon svg {
  width: 100%;
  height: 100%;
}

.alert-popup-error-close-icon svg path {
  transition: stroke-opacity 0.4s var(--easeInOutQuart);
}

.alert-popup-error-close-icon:hover svg path {
  stroke-opacity: 1;
}

.alert-popup-error-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.alert-popup-error-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.alert-popup-error-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.alert-popup-error-title h6 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
  text-align: center;
  color: var(--white);
  padding: 0 24px;
}

.alert-popup-error-content p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.alert-popup-error-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.alert-popup-error-buttons__create,
.alert-popup-error-buttons__created {
  height: 36px;
  padding: 8px 16px;
  border-radius: 20px;
  width: max-content;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  transition: 0.5s var(--easeOutQuart);
}

.alert-popup-error-buttons__create {
  background: var(--primary-white-background);
  color: var(--primary-black-disabled-color);
}

.alert-popup-error-buttons__create:hover {
  background: var(--primary-white-background-hover);
  color: var(--primary-black-disabled-color-hover);
}

.alert-popup-error-buttons__created {
  background: var(--primary-black-background);
  color: var(--white);
  opacity: 0.4;
}

.alert-popup-error-buttons__created:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

.alert-popup-error-support {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  width: 100%;
}

.alert-popup-error-support a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  [data-page=onboarding] .onboarding__left__inner__top__conditions {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item input {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #0F0F11;
  border: 1px solid;
  border-color: var(--white-20);
  position: relative;
  cursor: pointer;
  flex: none;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
[data-page=onboarding] .onboarding__left__inner__top__conditions__item input.error {
  border-color: #E53935 !important;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item input:checked {
  border-color: var(--white-40) !important;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item input[type=checkbox] {
  transition: border-color 0.4s var(--easeInOutQuart);
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item input[type=checkbox]:hover {
  border-color: var(--white-40);
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: url(/assets/icons/check-6d2e7bb7943398509f3d9c6ef02bd60bebe7c55741b452eaff4d48a80201bb9e.svg) no-repeat center center;
  background-size: contain;
  opacity: 0;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item input:checked::after {
  opacity: 1;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item label {
  font: var(--xs-regular);
  color: var(--white-60);
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item label a {
  color: var(--white);
  text-decoration: underline;
}

[data-page=onboarding] .onboarding__left__inner__top__conditions__item label span {
  color: var(--white);
}

main[data-page=skeleton] {
  padding: 40px 20px;
  color: #e4e4e7;
}

[data-page=skeleton] section.container {
  width: 100%;
  max-width: 608px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

[data-page=skeleton] .block {
  --border-width: 1px;
  --border-radius: 16px;
  --background-color: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), linear-gradient(0deg, #0F0F11, #0F0F11);
  --border-color: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%);
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --padding-top: 16px;
  --padding-bottom: 16px;
  --padding-left: 16px;
  --padding-right: 16px;
  --background: #0f0f11;
  position: relative;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
}

[data-page=skeleton] .block--free-bg {
  --background: transparent;
}

[data-page=skeleton] .block::before,
[data-page=skeleton] .block__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--border-radius) - var(--border-width));
  background: var(--background-color);
  z-index: 0;
  pointer-events: none;
}

[data-page=skeleton] .block::before {
  inset: 1px;
  background: rgba(15, 15, 17, 0.2);
  border-radius: var(--border-radius);
  pointer-events: none;
}

[data-page=skeleton] .block__inner {
  position: relative;
  background: var(--background);
  border-radius: var(--inner-border-radius);
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

[data-page=skeleton] .block__inner__content {
  width: 100%;
  position: relative;
  z-index: 1;
}

[data-page=skeleton] .heading {
  font: var(--body-medium);
  width: 182px;
}

[data-page=skeleton] .header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

[data-page=skeleton] .icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

[data-page=skeleton] .button-active {
  width: 42px;
  height: 32px;
}

[data-page=skeleton] .button-inactive {
  width: 138px;
  height: 32px;
}

[data-page=skeleton] .buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

[data-page=skeleton] .banner {
  width: 100%;
  height: 96px;
  --border-radius: 12px;
  margin-bottom: 16px;
}

[data-page=skeleton] .list {
  --padding-top: 8px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-right: 24px;
}

[data-page=skeleton] .list__item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 38px;
  padding: 16px 0;
}
[data-page=skeleton] .list__item > div:first-child {
  flex: 1;
}
[data-page=skeleton] .list__item > div:last-child {
  flex: 0;
}

[data-page=skeleton] .list__item__label {
  font: var(--label-medium);
  width: 58px;
  margin-bottom: 4px;
}

[data-page=skeleton] .list__item__heading {
  font: var(--body-regular);
  width: 128px;
  margin-bottom: 2px;
}

[data-page=skeleton] .list__item__description {
  font: var(--body-regular);
  width: 100%;
  max-width: 506px;
}

[data-page=skeleton] .list__item__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

[data-page=skeleton] .block__inner {
  width: 100%;
  height: 100%;
}

[data-page=skeleton] .block__inner__content {
  width: 100%;
  height: 100%;
}

.terminal-page .plus-wrapper_top {
  display: flex;
  flex-direction: column;
  gap: 20px !important;
  padding: 20px 0 80px 0;
}
@media (min-width: 768px) {
  .terminal-page .plus-wrapper_top {
    flex-direction: row;
    gap: 16px !important;
    padding: 40px 0 160px 0;
  }
}

@media (min-width: 768px) {
  .terminal-page .plus-wrapper_top_plan {
    width: 400px;
    flex: 0 0 400px;
    position: sticky !important;
    height: max-content;
    top: 92px;
  }
}

.terminal-page .content__tab,
.terminal-page .content__tab_details,
.terminal-page .content__subscription {
  margin-top: 24px !important;
}
@media (min-width: 768px) {
  .terminal-page .content__tab,
  .terminal-page .content__tab_details,
  .terminal-page .content__subscription {
    margin-top: 32px !important;
  }
}

.terminal-page .content__subscription_tabs {
  gap: 24px !important;
}
@media (min-width: 768px) {
  .terminal-page .content__subscription_tabs {
    gap: 32px !important;
  }
}

.terminal-page .content__subscription_tabs .content__subscription_items_element {
  gap: 20px !important;
}
@media (min-width: 768px) {
  .terminal-page .content__subscription_tabs .content__subscription_items_element {
    gap: 32px !important;
  }
}

.terminal-page .flex-hide-on-mobile {
  display: none !important;
}
@media (min-width: 768px) {
  .terminal-page .flex-hide-on-mobile {
    display: flex !important;
  }
}

.terminal-page .flex-hide-on-desktop {
  display: flex !important;
}
@media (min-width: 768px) {
  .terminal-page .flex-hide-on-desktop {
    display: none !important;
  }
}

.terminal-video {
  aspect-ratio: 16/9;
}
.terminal-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.trdr-top_contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plus-wrapper_top_traders .terminal,
.trdr-top_contents .terminal {
  display: flex;
  padding: 16px 16px 16px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  position: relative;
}

.plus-wrapper_top_traders .terminal::after,
.trdr-top_contents .terminal::after {
  content: "";
  position: absolute;
  background-image: url(/assets/icons/terminal/bg-terminal-ec29845c6ebe1618fa6b246b313b7dad148f02484f776b7d75a3e9a9198eb642.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 150px;
  height: 100%;
  left: 38%;
  top: 0;
  opacity: 0.3;
}

.plus-wrapper_top_traders .terminal::after {
  opacity: 1;
}

.plus-wrapper_top_traders .terminal > span,
.trdr-top_contents .terminal > span {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plus-wrapper_top_traders .terminal .btn-terminal,
.trdr-top_contents .terminal .btn-terminal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 12px;
  border-radius: 56px;
  background: var(--primary-black-background);
  transition: background 0.5s var(--easeOutQuart);
}

.plus-wrapper_top_traders .terminal .btn-terminal:hover,
.trdr-top_contents .terminal .btn-terminal:hover {
  background: var(--primary-black-background-hover);
}

.plus-wrapper_top_traders .terminal .btn-terminal > span,
.trdr-top_contents .terminal .btn-terminal > span {
  font: var(--small-medium);
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.5s var(--easeOutQuart);
}

.plus-wrapper_top_traders .terminal .btn-terminal:hover > span,
.trdr-top_contents .terminal .btn-terminal:hover > span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trdr-top_contents .trdr-alpha {
  height: 380px;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background-image: url(/assets/icons/terminal/bg-mid-card-a97cf740efa057708c2c76a3d5d4d21e50df35eaa1d069d3a76d8b75213cb6cd.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: cover;
  position: relative;
}

.trdr-top_contents .trdr-alpha .trdr-alpha_content {
  padding: 24px 24px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.trdr-top_contents .trdr-alpha .trdr-alpha_content .trdr-alpha_content_plus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trdr-top_contents .trdr-alpha .trdr-alpha_content .trdr-alpha_content_plus > h6 {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trdr-top_contents .trdr-alpha .trdr-alpha_content .trdr-alpha_content_plus > p {
  color: var(--white-40);
  font: var(--paragraph-regular);
}

.trdr-top_contents .trdr-alpha .trdr-alpha_content > .unlock-plus-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  width: max-content;
  font: var(--small-medium);
  color: var(--white);
  border-radius: 56px;
  border: 1px solid rgba(255, 180, 128, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 100%), rgba(255, 180, 128, 0.08);
}

.trdr-top_contents .trdr-alpha .powered {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trdr-top_contents .trdr-alpha .powered > p {
  color: var(--white-40);
  font: var(--paragraph-regular);
}

.trdr-top_contents .trdr-alpha .powered > p > span {
  color: var(--white);
}

.trdr-top_contents .trdr-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
}

.trdr-top_contents .trdr-support > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trdr-top_contents .trdr-support > div > span {
  font: var(--body-medium);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trdr-top_contents .trdr-support > button {
  display: flex;
  padding: 6px 12px 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: var(--primary-black-background);
  transition: background 0.5s var(--easeOutQuart);
}

.trdr-top_contents .trdr-support > button:hover {
  background: var(--primary-black-background-hover);
}

.trdr-top_contents .trdr-support > button > span {
  font: var(--small-medium);
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.5s var(--easeOutQuart);
}

.trdr-top_contents .trdr-support > button:hover > span {
  background: var(--primary-white-disabled-color-hover);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.show-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  min-width: 96px;
}

.show-more span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.show-more img {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  will-change: transform;
  transition: transform 0.5s var(--easeInOutQuart);
}

.show-more img.toggled {
  transform: rotate(180deg);
}

.terminal-page .plus-wrapper_top_traders {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.terminal-page .plus-wrapper_top_traders .video {
  width: 100%;
  height: auto;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.terminal-page .plus-wrapper_top_traders .video > video {
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  height: auto;
  border-radius: 16px;
}

.terminal-page .plus-wrapper_top_traders .content {
  padding: 0 40px;
}

.terminal-page .plus-wrapper_top_traders .content .content__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terminal-page .plus-wrapper_top_traders .content .content__heading h4 {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  background: linear-gradient(180deg, var(--white) 0%, var(--white-90) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-page .plus-wrapper_top_traders p {
  color: var(--white-40);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab {
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab_radio {
  display: none;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab .content__tab_button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  border-radius: 56px;
  background: var(--primary-black-background);
  opacity: 0.4;
  will-change: opacity;
  transition: all 0.5s var(--easeOutQuart);
  cursor: pointer;
}

.terminal-page .plus-wrapper_top_traders .content #terminal-tab-analysis:checked ~ .content__tab label[for=terminal-tab-analysis],
.terminal-page .plus-wrapper_top_traders .content #terminal-tab-hoss:checked ~ .content__tab label[for=terminal-tab-hoss],
.terminal-page .plus-wrapper_top_traders .content #terminal-tab-expansion:checked ~ .content__tab label[for=terminal-tab-expansion] {
  opacity: 1;
  background: var(--primary-black-background);
}

.terminal-page .plus-wrapper_top_traders .content .content__tab .content__tab_button:hover {
  background: var(--primary-black-background-hover);
  opacity: 1;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab .content__tab_button:hover > span,
.terminal-page .plus-wrapper_top_traders .content #terminal-tab-analysis:checked ~ .content__tab label[for=terminal-tab-analysis] > span,
.terminal-page .plus-wrapper_top_traders .content #terminal-tab-hoss:checked ~ .content__tab label[for=terminal-tab-hoss] > span,
.terminal-page .plus-wrapper_top_traders .content #terminal-tab-expansion:checked ~ .content__tab label[for=terminal-tab-expansion] > span {
  background: var(--primary-white-disabled-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab .content__tab_button > span {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: var(--primary-white-disabled-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.5s var(--easeOutQuart);
}

.terminal-page .plus-wrapper_top_traders .content .content__tab_details {
  margin-top: 32px;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab_details .content__tab_details_tabs {
  flex-direction: column;
  gap: 8px;
  display: none;
}

.terminal-page #terminal-tab-analysis:checked ~ .content__tab_details #content-analysis,
.terminal-page #terminal-tab-hoss:checked ~ .content__tab_details #content-hoss,
.terminal-page #terminal-tab-expansion:checked ~ .content__tab_details #content-expansion {
  display: flex;
}

.terminal-page .plus-wrapper_top_traders .content .content__tab_details .content__tab_details_tabs p {
  white-space: pre-wrap;
}

.terminal-page .plus-wrapper .h6 {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, var(--white) 0%, var(--white-90) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription {
  margin-top: 60px;
  transition: max-height 0.5s var(--easeInOutQuad);
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_tabs {
  gap: 32px;
  flex-direction: column;
  display: flex;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items.content__subscription_items--terminal {
  gap: 20px;
  flex-direction: column;
}
@media (min-width: 768px) {
  .terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items.content__subscription_items--terminal {
    gap: 40px;
    flex-direction: row;
  }
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription_items_element {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription--div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription--div > img {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription--span {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  background: linear-gradient(180deg, var(--white) 0%, var(--white-90) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription--span.terminal-content {
  background: rgba(255, 255, 255, 0.6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.4s var(--easeInOutQuad);
  font-weight: 500;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription--span.terminal-content:hover {
  background: rgb(255, 255, 255);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-page .plus-wrapper_top_traders .content .content__subscription .content__subscription_items .content__subscription--span .content__subscription--span-link {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 63.99375em) {
  .terminal-page .plus-wrapper_top_traders {
    gap: 16px;
  }
  .terminal-page .plus-wrapper_top_traders .video > video {
    border-radius: 12px;
  }
  .terminal-page .plus-wrapper_top_traders .content {
    padding: 0 16px;
  }
  .terminal-page .plus-wrapper_top_traders .content .content__heading h4 {
    font-size: 24px;
    line-height: 32px;
  }
  .terminal-page .plus-wrapper_top_traders .content .content__subscription {
    margin-top: 40px;
  }
}
.terminal-page .terminal-modal {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(15, 15, 17, 0.7215686275);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 768px) {
  .terminal-page .terminal-modal {
    align-items: center;
  }
}

.terminal-page .terminal-modal.toggled {
  display: none;
}

.terminal-page .terminal-modal .terminal-modal-content {
  height: 336px;
  position: relative;
  display: inline-flex;
  padding: 24px 24px 32px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  width: 100%;
  border-radius: 16px 16px 0 0;
}
@media (min-width: 768px) {
  .terminal-page .terminal-modal .terminal-modal-content {
    width: 400px;
    border-radius: 16px;
  }
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content-close-button {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content-close-button svg {
  width: 100%;
  height: 100%;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content-close-button svg path {
  transition: 0.5s var(--easeInOutQuart);
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content-close-button:hover svg path {
  stroke-opacity: 1;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--top img {
  flex: none;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--top h6 {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--top p {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-top: 4px;
  padding: 0 24px;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--bottom {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  background: radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--bottom::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--bottom .unlock-plus-button {
  width: 100%;
  height: 40px;
}

.terminal-page .terminal-modal .terminal-modal-content .terminal-modal-content--bottom p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

[data-page^=error-] {
  background: #0f0f11;
  color: #e4e4e7;
}

[data-page^=error-] .error-page__main {
  min-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

[data-page^=error-] .error-container {
  width: 812px;
  margin: 0 auto;
}

[data-page^=error-] .error-card {
  position: relative;
  width: 812px;
  height: 406px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
[data-page^=error-] .error-card::before {
  content: "";
  position: absolute;
  width: 100.49%;
  height: 133.99%;
  top: -8.52%;
  left: -0.11%;
  background-image: url(/assets/backgrounds/error-bg-78513e-787756b75ac9ed10f7b9989cffd64ab2ce58989fab9129520942a0c24c2c4acb.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

[data-page^=error-] .error-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  max-width: 562px;
  width: 100%;
  position: relative;
  z-index: 1;
}

[data-page^=error-] .error-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
}

[data-page^=error-] .error-card__title {
  font-family: "Open Runde", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page^=error-] .error-card__description {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4285714286;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

[data-page^=error-] .error-card__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

[data-page^=error-] .error-card__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 56px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #FFFFFF;
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4285714286;
  color: #0F0F11;
  text-decoration: none;
  transition: opacity 0.3s ease;
  border: none;
  cursor: pointer;
}

[data-page^=error-] .error-card__button:hover {
  opacity: 0.9;
}

[data-page^=error-] .settings_modal_header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

[data-page^=error-] .settings_modal_header_main {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

[data-page^=error-] .settings_modal_header_main.center {
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

[data-page^=error-] .settings_modal_header_main.center .settings_modal_header_close {
  position: absolute;
  top: 0;
  right: 0;
}

[data-page^=error-] .settings_modal_header_main img {
  width: 24px;
  height: 24px;
}

[data-page^=error-] .settings_modal_header_main_heading {
  font-family: var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-page^=error-] .settings_modal_header_close {
  cursor: pointer;
}

[data-page^=error-] .settings_modal_header_close svg path {
  transition-duration: 0.4s;
}

[data-page^=error-] .settings_modal_header_close:hover svg path {
  stroke-opacity: 0.8;
}

[data-page^=error-] .settings_modal_area {
  padding-top: 24px;
  width: 100%;
}

[data-page^=error-] .settings_modal_area_textarea {
  border-radius: 12px;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.04);
  background: #0f0f11;
  padding: 16px;
  width: 100%;
  min-height: 170px;
  resize: none;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.4s var(--easeOutQuart);
}

[data-page^=error-] .settings_modal_area_textarea:focus,
[data-page^=error-] .settings_modal_area_textarea:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-page^=error-] .settings_modal_area_textarea::placeholder {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.27) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

[data-page^=error-] .settings_modal_area_btn {
  margin-top: 32px;
  width: 100%;
  border-radius: 56px;
  text-align: center;
  background: var(--primary-black-background);
  transition: 0.5s var(--easeOutQuart);
  height: 40px;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
}

[data-page^=error-] .settings_modal_area_btn:hover {
  background: var(--primary-black-background-hover);
}

[data-page^=error-] .settings_modal_area_btn span {
  background: var(--primary-white-disabled-color);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

[data-page^=error-] .settings_modal_area_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
}

[data-page^=error-] .settings_modal_area_success_icon {
  width: 32px;
  height: 32px;
  animation: scale-in 0.4s ease-out;
}

[data-page^=error-] .settings_modal_area_success_message {
  color: #f97316;
  text-align: center;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  animation: slide-up-fade-in 0.4s ease-out 0.1s both;
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  [data-page^=error-] .error-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  [data-page^=error-] .error-card {
    width: 100%;
    max-width: 353px;
    height: 238px;
    margin: 0 auto;
    background-image: url(/assets/backgrounds/error-bg-78513e-787756b75ac9ed10f7b9989cffd64ab2ce58989fab9129520942a0c24c2c4acb.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  [data-page^=error-] .error-card::before {
    display: none;
  }
  [data-page^=error-] .error-card__title {
    font-size: 24px;
  }
  [data-page^=error-] .error-card__description {
    font-size: 12px;
  }
}
.news-alert-page {
  padding: 24px;
  min-height: 100vh;
  background: #0F0F11;
}

.news-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.news-chart {
  width: 949px;
  height: 800px;
  display: flex;
  flex-direction: column;
}

.news-chart__header {
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.news-chart__header__inner {
  padding: 6px 10px 6px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0.2) 100%);
  border-image-slice: 1;
}

.news-chart__header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.news-chart__header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-chart__logo-icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.news-chart__header__left span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-chart__header__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.news-chart__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 56px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.08);
}

.news-chart__btn span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-chart__btn--coin {
  padding: 4px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.1);
}

.news-chart__btn--coin img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.news-chart__btn--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.1);
}

.news-chart__btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.news-chart__body {
  height: 738px;
  border: 1px solid #363638;
  background: #0F0F11;
}

.news-chart__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
}

.news-chart__footer {
  height: 32px;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.news-panel {
  height: 800px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 0;
  border-radius: 16px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.news-panel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, rgb(20, 20, 22) 100%);
  pointer-events: none;
}

.news-panel__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-panel__header__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.news-panel__header__title span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-panel__header__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.news-panel__refresh-btn {
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.news-panel__refresh-btn:hover {
  color: rgb(255, 255, 255);
}

.news-panel__settings-btn {
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.news-panel__settings-btn:hover {
  color: rgb(255, 255, 255);
}

.news-panel__settings-btn--active {
  color: rgb(255, 255, 255);
}

.news-panel__controls {
  display: flex;
  gap: 8px;
  transition: all 0.2s ease;
  max-height: 96px;
  overflow: hidden;
}

.news-panel__controls--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: -16px;
}

.news-panel__control-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  height: 96px;
  padding: 12px;
  border-radius: 12px;
  background: radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.news-panel__control-box__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.news-panel__control-box__title {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-panel__control-box__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.news-panel__control-box__toggle span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-panel__mute-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 56px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.08);
}

.news-panel__mute-btn span {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.news-panel__mute-btn--muted span,
.news-panel__mute-btn--muted svg {
  opacity: 0.72;
}

.news-panel__mute-icon {
  width: 16px;
  height: 16px;
}

.news-panel__toggle {
  position: relative;
  width: 36px;
  height: 20px;
}

.news-panel__toggle input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}

.news-panel__toggle label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 74%), rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.2s ease;
}

.news-panel__toggle label:before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.32);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
  left: 2px;
  top: 2px;
  transition: all 0.2s ease;
}

.news-panel__toggle input:checked + label:before {
  left: calc(100% - 18px);
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.8) 100%);
  box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.32);
}

.news-panel__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-bottom: 160px;
  scrollbar-width: none;
}

.news-panel__list::-webkit-scrollbar {
  display: none;
}

@keyframes cardSlideIn {
  from {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -8px;
  }
  to {
    max-height: 200px;
    opacity: 1;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 0;
  }
}
.news-panel__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  animation: cardSlideIn 0.25s ease-out forwards;
  overflow: hidden;
}

.news-panel__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
}

.news-panel__item__source {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-panel__item__source-name {
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  color: #FFFFFF;
}

.news-panel__item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 48px;
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33;
}

.news-panel__item__badge--alert {
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), rgba(29, 78, 216, 0.28);
  border: 1px solid rgba(16, 81, 185, 0.2);
  color: #60A5FA;
}

.news-panel__item__badge--alert::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60A5FA;
  box-shadow: 0px 0px 0px 2px rgba(96, 165, 250, 0.2);
}

.news-panel__item__badge--flash {
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), rgba(185, 28, 28, 0.28);
  border: 1px solid rgba(244, 63, 95, 0.2);
  color: #F87171;
}

.news-panel__item__badge--flash::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F87171;
  box-shadow: 0px 0px 0px 2px rgba(248, 113, 113, 0.2);
}

.news-panel__item__sound-icon {
  width: 16px;
  height: 16px;
  opacity: 0.72;
}

.news-panel__item__text {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.news-panel__item__time {
  font-family: "Open Runde", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.33;
  color: rgba(255, 255, 255, 0.4);
  align-self: flex-end;
}

@media (max-width: 768px) {
  .news-alert-page {
    padding: 16px;
  }
  .news-section {
    flex-direction: column;
  }
  .news-panel {
    width: 100%;
    height: auto;
    min-height: 400px;
    max-height: 500px;
  }
}
@media (max-width: 480px) {
  .news-alert-page {
    padding: 12px;
  }
  .news-panel {
    min-height: 350px;
    max-height: 450px;
  }
}
/* Liquidations Panel */
.liquidations-panel {
  width: 1432px;
  padding: 0;
  background: transparent;
  margin-bottom: 32px;
}

.liquidations-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.liquidations-panel__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.liquidations-panel__icon-logo {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.liquidations-panel__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.liquidations-panel__subtitle {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.liquidations-panel__info-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  cursor: pointer;
}

.liquidations-panel__info-icon:hover {
  opacity: 0.8;
}

.liquidations-panel__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.liquidations-panel__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.liquidations-panel__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.liquidations-panel__description {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
  margin-left: 32px;
  position: relative;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.liquidations-panel__description-text {
  display: inline-block;
  padding-right: 100px;
  animation: marquee 45s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.liquidations-panel__description::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(270deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
}

.liquidations-panel__description::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
}

.liquidations-panel__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* Exchange Table */
.exchange-table {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 24px;
  box-sizing: border-box;
}

.exchange-table__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.exchange-table__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exchange-table__icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.exchange-table__title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.exchange-table__subtitle {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.exchange-table__info-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  cursor: pointer;
}

.exchange-table__info-icon:hover {
  opacity: 0.8;
}

.exchange-table__controls {
  display: flex;
  gap: 4px;
}

.exchange-table__dropdown-wrapper {
  position: relative;
}

.exchange-table__dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: linear-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.038%), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: none;
  border-radius: 56px;
  padding: 6px 8px 6px 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.exchange-table__dropdown-wrapper:nth-child(1) .exchange-table__dropdown {
  width: 104px;
}

.exchange-table__dropdown-wrapper:nth-child(2) .exchange-table__dropdown {
  width: 96px;
}

.exchange-table__dropdown span {
  white-space: nowrap;
}

.exchange-table__dropdown svg {
  width: 12px;
  height: 16px;
  will-change: transform;
  transition: transform 0.5s var(--easeOutQuart);
}

.exchange-table__dropdown svg path {
  transition: stroke-opacity 0.5s var(--easeOutQuart);
}

.exchange-table__dropdown:hover {
  background: linear-gradient(rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 74.038%), linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);
}

.exchange-table__dropdown.active svg {
  transform: rotate(180deg);
}

.exchange-table__dropdown.active svg path {
  stroke-opacity: 1;
}

.exchange-table__dropdown-menu.show {
  opacity: 1;
  pointer-events: auto;
}

.exchange-table__dropdown-menu {
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--0-f-0-f-113-paints, radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0f0f11);
  min-width: 100px;
  z-index: 10;
}

.exchange-table__dropdown-menu::after {
  position: absolute;
  width: 100%;
  height: 10px;
  background: transparent;
  left: 0;
  right: 0;
  content: "";
  bottom: 100%;
}

.exchange-table__dropdown-menu a {
  display: flex;
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  min-width: 164px;
  position: relative;
  background: transparent;
  transition: background 0.4s var(--easeOutQuart);
  white-space: nowrap;
}

.exchange-table__dropdown-menu a span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.exchange-table__dropdown-menu a:hover,
.exchange-table__dropdown-menu a.active {
  background: transparent;
}

.exchange-table__dropdown-menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
  will-change: background;
  transition: background 0.4s var(--easeOutQuart);
}

.exchange-table__dropdown-menu a:hover::after,
.exchange-table__dropdown-menu a.active::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.096) 0%, rgba(255, 255, 255, 0.48) 50.39%, rgba(255, 255, 255, 0.096) 100%);
}

.exchange-table__dropdown-menu a:last-child {
  border-radius: 0 0 16px 16px;
}

.exchange-table__dropdown-menu a:last-child::after {
  width: calc(100% - 18px);
}

.exchange-table__body {
  display: flex;
  flex-direction: column;
}

.exchange-table__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.exchange-table__row:hover:not(.exchange-table__row--header) {
  background: rgba(255, 255, 255, 0.03);
}

.exchange-table__row--header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  border-radius: 0;
}

.exchange-table__row--active {
  background: rgba(255, 255, 255, 0.04);
}

.exchange-table__cell {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
}

.exchange-table__row--header .exchange-table__cell {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.exchange-table__cell--name {
  gap: 8px;
}

.exchange-table__exchange-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.exchange-table__exchange-icon--placeholder {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-block;
}

.exchange-table__rate {
  font-size: 14px;
  font-weight: 500;
}

.exchange-table__rate--positive {
  color: #22C55E;
}

.exchange-table__rate--negative {
  color: #F43F5F;
}

/* BTC Returns Chart */
.btc-liquidations-chart {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.btc-liquidations-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.btc-liquidations-chart__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btc-liquidations-chart__icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.btc-liquidations-chart__title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.btc-liquidations-chart__subtitle {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.btc-liquidations-chart__info-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  cursor: pointer;
}

.btc-liquidations-chart__info-icon:hover {
  opacity: 0.8;
}

.btc-liquidations-chart__body {
  height: 450px;
}

/* Balance Table */
.balance-table {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 24px;
  box-sizing: border-box;
  margin-top: 16px;
}

.balance-table__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.balance-table__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.balance-table__icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.balance-table__title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.balance-table__subtitle {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.balance-table__info-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  cursor: pointer;
}

.balance-table__info-icon:hover {
  opacity: 0.8;
}

.balance-table__body {
  display: flex;
  flex-direction: column;
}

.balance-table__row {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.balance-table__row:hover:not(.balance-table__row--header) {
  background: rgba(255, 255, 255, 0.03);
}

.balance-table__row--active {
  background: rgba(255, 255, 255, 0.04);
}

.balance-table__row--header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 16px;
  border-radius: 0;
}

.balance-table__cell {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
}

.balance-table__row--header .balance-table__cell {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.balance-table__cell--exchange {
  gap: 8px;
}

.balance-table__exchange-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.balance-table__exchange-icon--placeholder {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-block;
}

.balance-table__change {
  font-size: 14px;
  font-weight: 500;
}

.balance-table__change--positive {
  color: #22C55E;
}

.balance-table__change--negative {
  color: #F43F5F;
}

.balance-table__change--neutral {
  color: rgba(255, 255, 255, 0.9);
}

/* Liquidations Card */
.liquidations-card {
  width: 346px;
  height: 142px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 16px 24px;
  box-sizing: border-box;
}

.liquidations-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.liquidations-card__timeframe {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.liquidations-card__total {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
}

.liquidations-card__positions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.liquidations-card__position {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.liquidations-card__position--long .liquidations-card__amount {
  color: #22C55E;
}

.liquidations-card__position--short .liquidations-card__amount {
  color: #F43F5F;
}

.liquidations-card__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
}

.liquidations-card__amount {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Media Queries */
@media (max-width: 1200px) {
  .liquidations-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto;
  }
  .liquidations-panel__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .liquidations-panel__footer {
    gap: 24px;
    padding: 12px 16px;
  }
  .liquidations-panel__description {
    font-size: 16px;
    line-height: 24px;
  }
  .liquidations-panel__data {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .liquidations-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px auto;
    overflow-x: hidden;
  }
  .liquidations-panel__cards {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }
  .liquidations-card {
    width: 100%;
  }
  .liquidations-panel__data {
    overflow-x: hidden;
  }
  .liquidations-panel__footer {
    gap: 16px;
    padding: 12px;
  }
  .liquidations-panel__icon {
    width: 16px;
    height: 16px;
  }
  .liquidations-panel__description {
    font-size: 14px;
    line-height: 22px;
  }
  .liquidations-panel__description::before,
  .liquidations-panel__description::after {
    width: 40px;
  }
  .exchange-table {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .exchange-table__body {
    min-width: 600px;
  }
  .exchange-table__row {
    padding: 8px 4px;
  }
  .exchange-table__cell {
    font-size: 12px;
  }
  .exchange-table__row--header .exchange-table__cell {
    font-size: 11px;
  }
  .btc-liquidations-chart {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btc-liquidations-chart__chart-container {
    min-width: 800px;
  }
  .exchange-table__dropdown {
    font-size: 12px;
    padding: 4px 6px 4px 10px;
  }
  .balance-table {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .balance-table__body {
    min-width: 600px;
  }
  .balance-table__row {
    padding: 8px 4px;
  }
  .balance-table__cell {
    font-size: 12px;
  }
  .balance-table__row--header .balance-table__cell {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .liquidations-panel {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto 12px auto;
    overflow-x: hidden;
  }
  .liquidations-panel__cards {
    overflow-x: hidden;
  }
  .liquidations-card {
    width: 100%;
  }
  .liquidations-panel__data {
    overflow-x: hidden;
  }
  .liquidations-panel__footer {
    gap: 12px;
    padding: 12px;
  }
  .liquidations-panel__description {
    font-size: 13px;
    line-height: 20px;
  }
  .exchange-table {
    padding: 12px;
  }
  .exchange-table__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .exchange-table__body {
    min-width: 500px;
  }
  .exchange-table__cell {
    font-size: 11px;
  }
  .exchange-table__row--header .exchange-table__cell {
    font-size: 10px;
  }
  .btc-liquidations-chart {
    padding: 12px;
  }
  .btc-liquidations-chart__chart-container {
    min-width: 600px;
  }
  .btc-liquidations-chart__y-label {
    font-size: 10px;
  }
  .btc-liquidations-chart__x-label {
    font-size: 9px;
  }
  .balance-table {
    padding: 12px;
  }
  .balance-table__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .balance-table__body {
    min-width: 500px;
  }
  .balance-table__cell {
    font-size: 11px;
  }
  .balance-table__row--header .balance-table__cell {
    font-size: 10px;
  }
}
.news-flash-chart-container {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
  min-width: 0;
  height: 800px;
}

.news-flash-chart-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 20px;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}
.news-flash-chart-header span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.news-flash-chart-timeframe-selector {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}

.timeframe-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 56px;
  padding: 4px 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.43;
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.5;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.timeframe-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
  opacity: 1;
}
.timeframe-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #fff;
  opacity: 1;
}

.news-flash-chart-icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.news-flash-chart-body {
  flex: 1;
  min-height: 0;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-sizing: border-box;
}

.news-flash-chart-main {
  width: 100%;
  height: 100%;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
}

.news-chart-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 48px;
  border: 1px solid rgba(244, 63, 95, 0.2);
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(185, 28, 28, 0.28);
  backdrop-filter: blur(32px);
  cursor: pointer;
  transition: transform 0.2s;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  z-index: 100;
  isolation: isolate;
}
.news-chart-icon:hover, .news-chart-icon.active {
  transform: translate(-50%, -50%) scale(1.1);
}
.news-chart-icon.stack-inactive {
  opacity: 0.4;
}

.news-chart-icon__logo {
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.news-tooltip {
  position: absolute;
  width: 366px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(248, 113, 113, 0.16) 0%, rgba(248, 113, 113, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  color: #fff;
  font-family: "Open Runde", sans-serif;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.news-tooltip.visible {
  opacity: 1;
}

.news-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.news-tooltip-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-tooltip-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.news-tooltip-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #F87171;
}

.news-tooltip-timestamp {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.news-tooltip-separator {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.news-tooltip-content {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
}

.news-tooltip-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}

.news-tooltip-pagination-count {
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.news-tooltip-pagination-next {
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.measurement-tooltip {
  position: absolute;
  pointer-events: none;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  color: #fff;
  font-family: "Open Runde", sans-serif;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s;
}
.measurement-tooltip.visible {
  opacity: 1;
}

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

.measurement-tooltip-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.measurement-tooltip-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.measurement-tooltip-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.measurement-tooltip-separator {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.02) 100%);
}

.measurement-tooltip-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.measurement-tooltip-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.measurement-tooltip-value {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.43;
  color: #fff;
}
.measurement-tooltip-value.positive {
  color: #22C55E;
}
.measurement-tooltip-value.negative {
  color: #EF4444;
}

.measurement-tooltip-dates {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.measurement-tooltip-date-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.measurement-tooltip-date-group.end {
  align-items: flex-end;
}

.measurement-tooltip-date-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.measurement-tooltip-date-value {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.72) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1200px) {
  .news-flash-chart-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 768px) {
  .news-flash-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
  }
  .news-flash-chart-header > span {
    display: none;
  }
}
@media (max-width: 480px) {
  .news-flash-chart-container {
    width: 100% !important;
    height: 400px !important;
  }
  .news-flash-chart-icon {
    width: 10px !important;
    height: 10px !important;
  }
}
.symbol-selector {
  position: relative;
}

.symbol-selector__button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 56px;
  padding: 4px 8px 4px 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.43;
  font-family: "Open Runde", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.symbol-selector__button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
}
.symbol-selector__button img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.symbol-selector__button span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.symbol-selector__chevron {
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.symbol-selector__menu.open ~ .symbol-selector__button .symbol-selector__chevron {
  transform: rotate(180deg);
}

.symbol-selector__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  display: none;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  overflow: hidden;
}
.symbol-selector__menu.open {
  display: flex;
}

.symbol-selector__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%) 1;
}

.symbol-selector__search-icon {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.symbol-selector__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
}
.symbol-selector__search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.symbol-selector__list {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}
.symbol-selector__list::-webkit-scrollbar {
  width: 4px;
}
.symbol-selector__list::-webkit-scrollbar-track {
  background: transparent;
}
.symbol-selector__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.symbol-selector__item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 32px 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%) 1;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}
.symbol-selector__item:last-child {
  border-bottom: none;
}
.symbol-selector__item:hover, .symbol-selector__item.selected {
  background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) 1;
}

.symbol-selector__item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.symbol-selector__item-text {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:root {
  /* Positive Bubbles (Green) - Based on Figma design */
  --bubble-pos-fill: rgba(34, 197, 94, 0.08);
  --bubble-pos-radial-inner: rgba(34, 197, 94, 0.08);
  --bubble-pos-radial-outer: rgba(34, 197, 94, 0);
  --bubble-pos-border-top: rgba(34, 197, 94, 0.2);
  --bubble-pos-border-bottom: rgba(34, 197, 94, 0.1);
  --bubble-pos-glow: rgba(34, 197, 94, 0.3);
  /* Negative Bubbles (Red) */
  --bubble-neg-fill: rgba(244, 63, 95, 0.08);
  --bubble-neg-radial-inner: rgba(244, 63, 95, 0.08);
  --bubble-neg-radial-outer: rgba(244, 63, 95, 0);
  --bubble-neg-border-top: rgba(244, 63, 95, 0.2);
  --bubble-neg-border-bottom: rgba(244, 63, 95, 0.1);
  --bubble-neg-glow: rgba(244, 63, 95, 0.3);
  /* General Settings */
  --bubble-border-width: 4;
  --bubble-glow-offset: -0.2;
  --bubble-glow-size: 0.7;
  /* Labels and UI */
  --bubble-label: #ffffff;
  --bubble-btn-active: #35b833;
  /* Compatibility with existing code */
  --bubble-pos-center: rgba(34, 197, 94, 0);
  --bubble-pos-border: rgba(34, 197, 94, 0.20);
  --bubble-neg-center: rgba(228, 18, 11, 0);
  --bubble-neg-border: rgba(228, 18, 11, 0.78);
  --bubble-inner-glow: rgba(47, 254, 0, 0.12);
  --bubble-inner-glow-edge: rgba(255,255,255,0);
}

.controls {
  display: flex;
  align-items: center;
}

.bubbles-info-icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  margin-left: auto;
}
.bubbles-info-icon:hover {
  opacity: 1;
}

.bubbles-info-icon-img {
  width: 16px;
  height: 16px;
  display: block;
}

.search-box input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #333;
  background: #2a2a2a;
  color: white;
}

.filters select {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #333;
  background: #2a2a2a;
  color: white;
}

.bubbles-wrapper {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#bubbles-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  gap: 8px;
}

#progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.8) 100%);
  border-radius: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: none;
  z-index: 1;
}

#progress-timer {
  position: relative;
  z-index: 2;
  font-family: "Open Runde";
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.bubble-svg {
  fill: #181818;
  stroke: none;
  stroke-width: 0;
  vector-effect: non-scaling-stroke;
  transition: filter 0.2s ease;
}

.bubble.positive .bubble-svg {
  fill: url(#bubble-gradient-green);
  filter: none;
}

.bubble.negative .bubble-svg {
  fill: url(#bubble-gradient-red);
  filter: none;
}

.bubble-text {
  fill: #fff !important;
  font-weight: bold;
  text-anchor: middle;
  font-family: "Inter", Arial, sans-serif;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 3px;
  letter-spacing: 0.5px;
  filter: drop-shadow(0 0 6px #000);
}

.bubble image {
  border-radius: 50%;
  background: transparent;
}

.sort-by-group {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.sort-btn {
  font-family: "Open Runde";
  color: #fff;
  border: none;
  line-height: 20px;
  padding: 4px 12px;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 56px;
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.sort-btn span {
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sort-btn.active, .sort-btn:focus {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border-radius: 56px;
}

.sort-btn.active span, .sort-btn:focus span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sort-btn:hover:not(.active) {
  background: #333;
  color: #00ff55;
}

.market-radar-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100vw;
  background: #0F0F11 !important;
  padding: 20px 20px;
  gap: 16px;
  box-sizing: border-box;
}
.market-radar-layout h3,
.market-radar-layout .etf-overview-title,
.market-radar-layout .macro-card__subtitle,
.market-radar-layout .sentiment-poll-title,
.market-radar-layout .etf-legend-label {
  letter-spacing: 0 !important;
}

.market-radar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: var(--root-background-color);
  z-index: 998;
  padding-top: 16px;
  padding-bottom: 16px;
  width: 100vw;
}

@media (min-width: 64em) {
  .market-radar-nav {
    padding-top: 24px;
    padding-bottom: 0;
  }
}
.market-radar-nav::after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 12px;
  top: 100%;
  left: 0;
  right: 0;
  background: transparent;
}

@media (min-width: 64em) {
  .market-radar-nav::after {
    background: var(--root-background-color);
  }
}
.market-radar-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px 12px 12px;
  border-radius: 24px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.market-radar-nav-item span {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  opacity: 0.4;
  white-space: nowrap;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
  background: var(--text-background-white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.market-radar-nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);
  box-shadow: 0 0 1000px #ffffff;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s var(--easeOutQuart);
}

.market-radar-nav-item.active span,
.market-radar-nav-item:hover span {
  opacity: 1;
}

.market-radar-nav-item.active::after,
.market-radar-nav-item:hover::after {
  opacity: 1;
}

.market-radar-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1432px;
  gap: 16px;
}

.crypto-bubbles-container {
  flex: 1;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.02);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1015 570" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect x="0" y="0" height="100%" width="100%" fill="url(/%23grad)" opacity="0.05999999865889549"/><defs><radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="10" gradientTransform="matrix(2.2955e-13 28.519 -79.211 1.0911e-13 507.5 -6.9611e-13)"><stop stop-color="rgba(255,255,255,1)" offset="0"/><stop stop-color="rgba(255,255,255,0)" offset="1"/></radialGradient></defs></svg>');
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 0;
  gap: 8px;
  position: relative;
}

.btc-chart-widget {
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  height: 738px;
}

.btc-chart-wrapper {
  position: relative;
  padding-bottom: 32px;
}

.btc-chart-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
}

.btc-chart-header span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btc-chart-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border-radius: 0 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  box-sizing: border-box;
}

.btc-chart-footer span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tradingview-widget-container {
  width: 100%;
  height: 738px;
  min-height: 738px;
  position: relative;
}

#tradingview_btc_chart {
  width: 100%;
  height: 100%;
  min-height: 738px;
}

.gauge-modern {
  position: relative;
  width: 240px;
  height: 260px;
  margin: 0 auto 12px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-modern svg {
  display: block;
  margin: 0 auto;
}

.gauge-segments, .gauge-segment {
  display: none;
}

.gauge-segment {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 22px;
  height: 90px;
  border-radius: 22px;
  transform-origin: bottom center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1333333333);
}

.seg1 {
  background: #ff3300;
  transform: translateX(-50%) rotate(-90deg);
}

.seg2 {
  background: #ff8c00;
  transform: translateX(-50%) rotate(-54deg);
}

.seg3 {
  background: #ffcc00;
  transform: translateX(-50%) rotate(-18deg);
}

.seg4 {
  background: #99c221;
  transform: translateX(-50%) rotate(18deg);
}

.seg5 {
  background: #27a843;
  transform: translateX(-50%) rotate(54deg);
}

.gauge-needle {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.sentiment-btn__icon {
  display: block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 15px;
}

.sentiment-btn__icon--bearish {
  transform: rotate(180deg);
}

.sentiment-btn.bullish .sentiment-btn__icon {
  color: #00ff55;
}

.sentiment-btn.bearish .sentiment-btn__icon {
  color: #ff2222;
}

.sentiment-vote-message .bullish {
  color: var(--bubble-pos-border, #3bae3a) !important;
  font-weight: 700;
}

.sentiment-vote-message .bearish {
  color: var(--bubble-neg-border, #841b16) !important;
  font-weight: 700;
}

.market-cap-short {
  display: none;
}

@media (max-width: 1200px) {
  .market-cap-full {
    display: none;
  }
  .market-cap-short {
    display: inline;
  }
  .market-radar-main {
    width: 100%;
    align-items: center;
    gap: 16px;
  }
  .crypto-bubbles-container {
    width: 100%;
    min-width: 0;
  }
  .btc-chart-wrapper {
    width: 353px !important;
    min-width: 353px !important;
    max-width: 353px !important;
    height: auto;
  }
  .market-radar-widgets-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    height: auto !important;
  }
  .news-flash {
    width: 353px !important;
    min-width: 353px !important;
    max-width: 353px !important;
    height: auto;
    order: 1 !important;
  }
  .alert-box {
    width: 100% !important;
    min-width: unset !important;
    max-width: 353px !important;
    height: auto;
    order: 2 !important;
  }
  .market-radar-widgets-row .research-container {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: auto;
    order: 3 !important;
  }
  .macro-dashboard {
    width: 353px !important;
    margin: 0 auto !important;
  }
  .macro-dashboard__row {
    display: grid !important;
    gap: 8px !important;
  }
  .macro-dashboard__row--small {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, auto) !important;
  }
  .macro-dashboard__row--large {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, 88px) !important;
    gap: 8px !important;
  }
  .macro-card--small {
    width: 100% !important;
    height: 88px !important;
    box-sizing: border-box !important;
  }
  .macro-card--large {
    width: 100% !important;
    height: 88px !important;
    box-sizing: border-box !important;
  }
  .finance-widgets-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 353px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .finance_data_widget {
    width: 100% !important;
  }
  .charts_section {
    width: 100% !important;
  }
  .time-selector.spot, .time-selector.derivatives, .time-selector.funding {
    margin-top: 16px !important;
    justify-content: center !important;
  }
  .finance-widgets-row > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .sentiment-container {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }
}
.research__inner__timelines__item__left {
  width: 500px !important;
}

.news-flash, .alert-box {
  width: 100% !important;
  max-width: 466px !important;
  min-width: unset !important;
  height: auto !important;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5333333333);
  padding: 24px 24px 0px 24px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}

.news-flash__header, .alert-box__header {
  background: none;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
  border-radius: 16px 16px 0 0;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.news-flash__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  padding: 0px 12px 10px 6px;
  position: relative;
  min-height: 0;
  width: 100%;
}

.news-flash::after,
.alert-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
  z-index: 5;
}

@supports selector(::-webkit-scrollbar) {
  .news-flash__list, .alert-box__list {
    scrollbar-width: auto;
  }
  .news-flash__list::-webkit-scrollbar, .alert-box__list::-webkit-scrollbar {
    width: 4px;
    height: 1px;
  }
  .news-flash__list::-webkit-scrollbar-thumb, .alert-box__list::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.32);
    min-height: 164px;
  }
  .news-flash__list::-webkit-scrollbar-track, .alert-box__list::-webkit-scrollbar-track {
    background: transparent;
  }
}
/* Move alert box scrollbar to the right */
.alert-box__list {
  padding: 0;
}

.alert-box__list::-webkit-scrollbar {
  width: 4px;
  margin-right: 4px; /* Move scrollbar to the right */
}

#sentiment-info-popover .news-flash__list,
#bubbles-info-popover .news-flash__list,
#aggregator-info-popover .news-flash__list {
  scrollbar-width: none;
}
#sentiment-info-popover .news-flash__list::-webkit-scrollbar,
#bubbles-info-popover .news-flash__list::-webkit-scrollbar,
#aggregator-info-popover .news-flash__list::-webkit-scrollbar {
  display: none;
}

.news-flash__item {
  display: flex;
  align-items: flex-end;
  background: none;
  box-shadow: none;
  min-height: 64px;
  margin-bottom: 16px;
  gap: 6px;
  overflow: visible;
}

.news-flash__item:last-child {
  margin-bottom: 0;
}

.news-flash__icon--circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #191a1e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 45px;
  margin-right: -8px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.news-flash__body {
  position: relative;
  flex: 1;
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  background: radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 12px !important;
}

.news-flash__body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: radial-gradient(62.16% 49.86% at 62.53% -0.26%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  z-index: 0;
  pointer-events: none;
}

/* Tail styles removed */
.news-flash__content {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
  padding: 0 !important;
}

.news-flash__meta {
  color: #FFF !important;
  font-family: "Open Runde" !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-flash__msg {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 4px;
  flex: 1;
  position: relative;
  /* Allow text to flow naturally without height restrictions */
  overflow: visible;
  word-wrap: break-word;
  white-space: normal;
}

.news-flash__time {
  align-self: flex-end;
  margin-top: auto;
  font-size: 12px;
  color: #8e9297;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-box__item {
  background: radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2666666667);
  width: 100%;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box;
}

.alert-box__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.alert-box__row--header {
  gap: 8px;
}

.alert-box__header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alert-box__icon-img {
  width: 16px;
  height: 16px;
}

.alert-box__row--stats {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.alert-box__stat {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.alert-box__value {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.alert-box__value--positive {
  color: #22C55E;
}

.alert-box__value--negative {
  color: #F43F5F;
}

.alert-box__divider {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.alert-box__footer {
  display: flex;
  align-items: center;
}

.alert-box__footer-text {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.alert-box__row.alert-box__row--meta {
  gap: 6px;
}

.alert-box__time {
  font-family: "Open Runde";
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: right;
  color: rgba(255, 255, 255, 0.4);
}

.alert-box__icon {
  font-size: 18px;
}

.alert-box__meta {
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
}

.alert-box__time {
  font-size: 12px;
  color: #9ca3af;
}

.alert-bullish .alert-box__icon {
  color: #22c55e;
}

.alert-bearish .alert-box__icon {
  color: #ef4444;
}

.alert-box__title {
  font-family: "Open Runde";
  font-size: clamp(12px, 3.5vw, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  flex: 1;
}

.alert-box__desc {
  color: rgba(255, 255, 255, 0.5);
  font-family: "Open Runde";
  font-size: clamp(10px, 3vw, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.alert-box__list {
  flex: 1 1 100% !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
}

.alert-box__list:empty {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: 0 !important;
}

/* ULTRA-SPECIFIC HEIGHT CONTROL FOR PRODUCTION */
div.alert-box__item,
.alert-box div.alert-box__item,
.market-radar-widgets-row .alert-box div.alert-box__item,
[class*=alert-box] div[class*=alert-box__item],
*[class~=alert-box__item] {
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  flex: 0 0 160px !important;
  flex-basis: 160px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

.news-flash, .alert-box {
  overflow: hidden;
}

.alert-box__date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4ade80;
  font-size: 13px;
  font-weight: 600;
  min-width: 80px;
  margin-top: 2px;
}

.alert-box__body {
  width: auto;
  max-width: 100%;
  height: 160px;
  background: none;
  border: none;
  padding: 0 2px 0 0;
}

.alert-box__body > *:not(:first-child) {
  margin-top: 8px;
}

.alert-box__body > .alert-box__desc:last-child {
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.alert-box__title {
  font-family: "Open Runde";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.alert-box__desc {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  word-break: break-word;
}

.alert-box__time {
  white-space: nowrap;
}

.market-radar-widgets-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.market-radar-widgets-row > * {
  flex: 1 1 0;
  min-width: 0;
  max-width: 296px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 622px !important;
}

.market-radar-widgets-row .research-container,
.market-radar-widgets-row .news-flash,
.market-radar-widgets-row .alert-box {
  height: 622px !important;
  width: 466px !important;
  display: flex;
  flex-direction: column;
}

.research__inner, .news-flash__header, .alert-box__header {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.news-flash__item, .alert-box__item, .research__inner__timelines > * {
  font-size: 15px;
  line-height: 1.5;
}

.news-flash__meta, .alert-box__date, .research__inner__timelines time {
  font-size: 13px;
  color: #8e9297;
}

.market-radar-widgets-row .research-container,
.market-radar-widgets-row .research-container > .gradient-border_inner,
.market-radar-widgets-row .research-container .research {
  width: 100% !important;
  max-width: 466px !important;
  min-width: unset;
  height: 622px !important;
}

.market-radar-widgets-row .research__inner__timelines__item__left {
  width: 100% !important;
  max-width: 100% !important;
}

.research__inner__timelines__item__right {
  display: none !important;
}

.market-radar-widgets-row .research-container .research__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.market-radar-widgets-row .research-container .research__inner__timelines {
  flex: 1 1 auto;
  max-height: 100% !important;
  overflow-y: auto;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.market-radar-widgets-row .research-container .research__inner__shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
}

.news-flash__item > div > div:nth-child(2) {
  overflow: visible;
  white-space: normal;
  line-height: 20px;
  position: relative;
}

@media (max-width: 600px) {
  .tradingview-widget-container {
    height: 320px;
    min-height: 220px;
  }
  #tradingview_btc_chart {
    height: 100%;
    min-height: 220px;
  }
}
.macro-dashboard {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box !important;
}

.macro-dashboard__row {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
}

.macro-dashboard__row--small {
  justify-content: flex-start;
}

.macro-dashboard__row--large {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px;
}

.macro-card {
  background: #393b3f;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 18px;
  min-width: 110px;
  min-height: 48px;
  color: #fff;
  font-family: "Inter", Arial, sans-serif;
}

.finance_data_widget {
  width: 1432px;
  padding: 0;
}

.charts_section {
  width: 1432px;
  padding: 0;
  margin: 0 auto;
}

.macro-card--small {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: #0F0F11; /* Base background */
  border-bottom: none;
}

/* Inner background layer for base macro-card--small */
/* Removed ::before to avoid duplicate gradients */
.macro-card--small {
  box-shadow: none;
  flex-grow: 1;
  flex-basis: 0;
  height: 88px;
  padding: 16px 24px;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.macro-card--small.up, .macro-card--large.up {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: none; /* Remove bottom border to use gradient underline instead */
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
}

.macro-card--small.up::before, .macro-card--large.up::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgb(34, 197, 94) 0%, transparent 100%);
  opacity: 0.15;
  z-index: 0;
}

.macro-card--small.down, .macro-card--large.down {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: none; /* Remove bottom border to use gradient underline instead */
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
}

.macro-card--small.down::before, .macro-card--large.down::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgb(244, 63, 95) 0%, transparent 100%);
  opacity: 0.15;
  z-index: 0;
}

.macro-card--small.neutral, .macro-card--large.neutral {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: none; /* Remove bottom border to use gradient underline instead */
  /* Gradiente radial blanco suave para neutral */
  background: radial-gradient(ellipse 70% 30% at 50% 95%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
}

.macro-card__title, .macro-card__subtitle {
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1; /* Above the border underline */
}

.macro-card__title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.macro-card__value {
  font-size: 1.05em;
  font-weight: 700;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6ee7b7;
  position: relative;
  z-index: 1; /* Above the border underline */
}

.macro-card__value.up {
  color: #6ee7b7;
}

.macro-card__value.down {
  color: #f87171;
}

.macro-card--large {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: none; /* Remove bottom border to use gradient underline instead */
  background: #0F0F11; /* Base background */
}

/* Inner background layer for base macro-card--large */
/* Removed ::before to avoid duplicate gradients */
.macro-card--large {
  box-shadow: none;
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  height: 92px;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0;
  box-sizing: border-box !important;
}

.macro-card__subtitle {
  grid-column: 1/span 2;
  margin-bottom: 8px;
}

.macro-card__main {
  color: #FFF;
  /* text-2x/medium */
  font-family: "Open Runde";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 133.333% */
  letter-spacing: -1px;
  position: relative;
  z-index: 1; /* Above the border underline */
}

.macro-card__sub {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1em;
  color: #bdbdbd;
  font-weight: 500;
  position: relative;
  z-index: 1; /* Above the border underline */
}

.news-flash__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  position: relative;
  z-index: 2;
}

.news-flash__icon-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.news-flash-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 1432px;
}
.news-flash-section .news-flash-chart-container {
  flex: 2;
  min-width: 0;
}
.news-flash-section .news-panel {
  flex: 1;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}
.news-flash-section .news-panel .news-panel__header,
.news-flash-section .news-panel .news-panel__list {
  padding-left: 24px;
  padding-right: 24px;
}

.market-radar-container .market-radar-header {
  margin-bottom: 2rem;
}

.market-radar-grid .card .card-body {
  padding: 1.5rem;
  height: 100%;
}

.btc-chart-icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
}

.news-flash__header span, .alert-box__header span {
  font-family: "Open Runde";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.alert-box__icon img {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0px;
}

.alert-positive {
  color: #22C55E;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.alert-negative {
  color: #F43F5F;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.alert-current-oi {
  color: #FFF;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/* --- Fix overflow horizontal en Alert Box --- */
.alert-box__list {
  left: 0px;
  width: 100% !important;
  overflow-x: hidden;
}

.alert-box__body {
  width: auto;
  max-width: 100%;
}

.value-text {
  font-family: "Open Runde";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.value-text.up {
  color: #22C55E;
}

.value-text.down {
  color: #F43F5F;
}

.macro-card--small, .macro-card--large {
  position: relative;
  overflow: hidden; /* Evita que los colores y gradientes se salgan del contenedor */
  border-radius: 12px; /* Mantiene las esquinas redondeadas */
}

.macro-card--small.down::after, .macro-card--large.down::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* At the very bottom edge */
  right: 0;
  height: 1px;
  z-index: 0; /* Behind content */
  pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 63, 95, 0) 0%, #F43F5F 50%, rgba(244, 63, 95, 0) 100%);
}

.macro-card--small.up::after, .macro-card--large.up::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* At the very bottom edge */
  right: 0;
  height: 1px;
  z-index: 0; /* Behind content */
  pointer-events: none;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0) 0%, #22C55E 50%, rgba(34, 197, 94, 0) 100%);
}

.macro-card--small.neutral::after, .macro-card--large.neutral::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* At the very bottom edge */
  right: 0;
  height: 1px;
  z-index: 0; /* Behind content */
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 100%);
}

html body #home-page .macro-card--large,
html body .market-radar-layout .macro-card--large,
html body .macro-card--large,
#home-page .macro-card--large,
.market-radar-layout .macro-card--large,
.macro-card--large {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  box-sizing: border-box !important;
  flex: 1 1 100% !important;
}

html body #home-page .macro-dashboard__row--large,
html body .market-radar-layout .macro-dashboard__row--large,
html body .macro-dashboard__row--large,
#home-page .macro-dashboard__row--large,
.market-radar-layout .macro-dashboard__row--large,
.macro-dashboard__row--large {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 1 100% !important;
}

html body #home-page .macro-dashboard,
html body .market-radar-layout .macro-dashboard,
html body .macro-dashboard,
#home-page .macro-dashboard,
.market-radar-layout .macro-dashboard,
.macro-dashboard {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px) {
  .macro-card--large {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box !important;
  }
  .macro-dashboard__row--large {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 768px) {
  .macro-card--large {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
  }
  .macro-dashboard__row--large {
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .macro-card--large {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
  }
  .macro-dashboard__row--large {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
}
.market-radar-plus-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plus-content-first,
.plus-content-second {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.macro-card-tooltip-wrapper {
  position: relative;
  flex: 1;
  display: flex;
}

.macro-card-tooltip-wrapper .macro-card {
  flex: 1;
}

.macro-card__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: max-content;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.macro-card__tooltip-content {
  padding: 12px 16px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Open Runde";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.macro-card-tooltip-wrapper:hover .macro-card__tooltip {
  opacity: 1;
  visibility: visible;
}

.macro-card-tooltip-wrapper--bottom .macro-card__tooltip {
  bottom: auto;
  top: calc(100% + 8px);
}

.economic-calendar {
  width: 1432px;
  height: 664px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.economic-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  gap: 16px;
}

.economic-calendar__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.economic-calendar__icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6 0L12 6L6 12L0 6L6 0Z"/></svg>') no-repeat center/contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6 0L12 6L6 12L0 6L6 0Z"/></svg>') no-repeat center/contain;
}

.economic-calendar__title-group > span {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar__subtitle {
  opacity: 0.9;
}

.economic-calendar__info-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.economic-calendar__info-btn:hover {
  color: rgb(255, 255, 255);
}

.economic-calendar__filters {
  display: flex;
  align-items: center;
  gap: 4px;
}

.economic-calendar__filter-btn {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  opacity: 0.5;
}
.economic-calendar__filter-btn--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #FFF;
  opacity: 1;
}
.economic-calendar__filter-btn:hover:not(.economic-calendar__filter-btn--active) {
  opacity: 0.7;
}

.economic-calendar__refresh-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.economic-calendar__refresh-btn:hover {
  color: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.12);
}

.economic-calendar__content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.economic-calendar__table {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.economic-calendar__table-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.economic-calendar__header-row {
  display: grid;
  grid-template-columns: 80px 60px 200px 104px 104px 104px 104px;
  gap: 32px;
  padding: 11px 24px;
  align-items: center;
}

.economic-calendar__header-cell {
  font-family: "Open Runde";
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.4);
}

.economic-calendar__table-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}
.economic-calendar__table-body::-webkit-scrollbar {
  width: 4px;
}
.economic-calendar__table-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 100px;
}
.economic-calendar__table-body::-webkit-scrollbar-track {
  background: transparent;
}

.economic-calendar__row {
  display: grid;
  grid-template-columns: 80px 60px 200px 104px 104px 104px 104px;
  gap: 32px;
  padding: 13px 24px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.economic-calendar__row:last-child {
  border-bottom: none;
}

.economic-calendar__cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.economic-calendar__time-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(244, 63, 95, 0.4);
  background: linear-gradient(90deg, rgba(244, 63, 95, 0.4) 0%, rgba(244, 63, 95, 0.4) 100%), radial-gradient(70% 100% at 50% 0%, rgba(244, 63, 95, 0.08) 0%, transparent 100%);
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
}
.economic-calendar__time-badge--high {
  border-color: rgb(244, 63, 95);
}

.economic-calendar__flag {
  width: 16px;
  height: 12px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.economic-calendar__cell--country span {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar__event-name {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: white;
}

.economic-calendar__event-month {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.4);
}

.economic-calendar__value {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}
.economic-calendar__value--positive {
  color: #22C55E;
}
.economic-calendar__value--negative {
  color: #F43F5F;
}

.economic-calendar__divider {
  padding: 11px 24px;
}

.economic-calendar__divider-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.economic-calendar__scrollbar {
  position: absolute;
  right: 8px;
  top: 80px;
  width: 4px;
  height: 335px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 100px;
}

.economic-calendar__sidebar {
  width: 499px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.economic-calendar__sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.economic-calendar__sidebar-filters {
  display: flex;
  align-items: center;
  gap: 4px;
}
.economic-calendar__sidebar-filters--chart {
  justify-content: flex-start;
}

.economic-calendar__sidebar-title-placeholder {
  width: 155px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 48px;
}

.economic-calendar__sidebar-filter-btn {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  opacity: 0.5;
}
.economic-calendar__sidebar-filter-btn--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #FFF;
  opacity: 1;
}

.economic-calendar__collapse-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transform: rotate(180deg);
  transition: all 0.2s ease;
}
.economic-calendar__collapse-btn:hover {
  color: rgb(255, 255, 255);
}

.economic-calendar__sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 116px;
}
.economic-calendar__sidebar-content::-webkit-scrollbar {
  display: none;
}

.economic-calendar__news-item {
  width: 100%;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 48px;
}

.economic-calendar__chart {
  width: 100%;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 24px;
  box-sizing: border-box;
}

.economic-calendar__chart-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.economic-calendar__chart-placeholder {
  width: 100%;
  height: 192px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.economic-calendar__indicators {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
}

.economic-calendar__indicator-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 11px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.economic-calendar__indicator-row:last-child {
  border-bottom: none;
}
.economic-calendar__indicator-row--header {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), #0F0F11;
}
.economic-calendar__indicator-row--data {
  padding: 8px 24px;
}

.economic-calendar__indicator-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
}
.economic-calendar__indicator-cell--yield {
  justify-content: flex-start;
}

.economic-calendar__indicator-cell:not(:has(span)):not(:has(div)) {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 48px;
}

.economic-calendar__indicator-label {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar__indicator-value {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar__indicator-arrow {
  width: 12px;
  height: 11px;
}
.economic-calendar__indicator-arrow--down {
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
}
.economic-calendar__indicator-arrow--up {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
}

.economic-calendar__sidebar-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
  z-index: 5;
}

.economic-calendar__sidebar-scrollbar {
  position: absolute;
  right: 8px;
  top: 80px;
  width: 4px;
  height: 335px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 100px;
}

@media (max-width: 1200px) {
  .economic-calendar {
    width: 353px;
    flex-direction: column;
  }
  .economic-calendar__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .economic-calendar__sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .economic-calendar__header-row,
  .economic-calendar__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .economic-calendar__table-body {
    max-height: 300px;
  }
}
.time-btn-spot, .time-btn-derivatives, .time-btn-funding {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
}

.time-btn-spot.active, .time-btn-derivatives.active, .time-btn-funding.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.12);
  border-radius: 56px;
  color: #FFFFFF;
}

@media (max-width: 1200px) {
  .alert-box__item {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    padding: 15px 17px !important;
    gap: 9px !important;
    box-sizing: border-box !important;
  }
  .alert-box__title {
    font-size: 15px !important;
    line-height: 22px !important;
  }
  .alert-box__desc {
    font-size: 13px !important;
    line-height: 19px !important;
  }
  .alert-box__meta {
    font-size: 13px !important;
    line-height: 19px !important;
  }
}
@media (max-width: 768px) {
  .alert-box__item {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    padding: 14px 16px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .alert-box__title {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .alert-box__desc {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  .alert-box__meta {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  .news-flash-section {
    flex-direction: column;
    width: 100%;
  }
  .news-flash-section .news-flash-chart-container {
    width: 100%;
    flex: none;
  }
  .news-flash-section .news-panel {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .alert-box__item {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    padding: 13px 15px !important;
    gap: 7px !important;
    box-sizing: border-box !important;
  }
  .alert-box__title {
    font-size: 13px !important;
    line-height: 19px !important;
  }
  .alert-box__desc {
    font-size: 11px !important;
    line-height: 17px !important;
  }
  .alert-box__meta {
    font-size: 11px !important;
    line-height: 17px !important;
  }
}
@media (max-width: 479px) {
  .market-radar-widgets-row .alert-box,
  .market-radar-widgets-row .news-flash,
  .market-radar-widgets-row .research-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    height: 622px !important;
    box-sizing: border-box !important;
  }
  .alert-box__item {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    padding: 12px 14px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .alert-box__title {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  .alert-box__desc {
    font-size: 10px !important;
    line-height: 16px !important;
  }
  .alert-box__meta {
    font-size: 10px !important;
    line-height: 16px !important;
  }
}
@media (max-width: 360px) {
  .alert-box__item {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .alert-box__title {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  .alert-box__desc {
    font-size: 10px !important;
    line-height: 16px !important;
  }
  .alert-box__meta {
    font-size: 10px !important;
    line-height: 16px !important;
  }
}
.alert-box[style*="width: 353px"] .alert-box__item,
.alert-box[style*="width: 353px !important"] .alert-box__item,
.alert-box[style*="width: 353px;"] .alert-box__item,
.alert-box .alert-box__item {
  width: 100% !important;
  max-width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  box-sizing: border-box !important;
  flex: 0 0 160px !important;
  align-self: stretch !important;
}
.alert-box[style*="width: 353px"] .alert-box__title,
.alert-box[style*="width: 353px !important"] .alert-box__title,
.alert-box[style*="width: 353px;"] .alert-box__title,
.alert-box .alert-box__title {
  font-size: clamp(14px, 4vw, 16px) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}
.alert-box[style*="width: 353px"] .alert-box__desc,
.alert-box[style*="width: 353px !important"] .alert-box__desc,
.alert-box[style*="width: 353px;"] .alert-box__desc,
.alert-box .alert-box__desc {
  font-size: clamp(12px, 3.5vw, 14px) !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}
.alert-box[style*="width: 353px"] .alert-box__meta,
.alert-box[style*="width: 353px !important"] .alert-box__meta,
.alert-box[style*="width: 353px;"] .alert-box__meta,
.alert-box .alert-box__meta {
  font-size: clamp(12px, 3.5vw, 14px) !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

.market-radar-widgets-row .alert-box .alert-box__item {
  width: 100% !important;
  max-width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  box-sizing: border-box !important;
  flex: 0 0 160px !important;
  align-self: stretch !important;
}
.market-radar-widgets-row .alert-box .alert-box__title {
  font-size: clamp(14px, 4vw, 16px) !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}
.market-radar-widgets-row .alert-box .alert-box__desc {
  font-size: clamp(12px, 3.5vw, 14px) !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}
.market-radar-widgets-row .alert-box .alert-box__meta {
  font-size: clamp(12px, 3.5vw, 14px) !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

.alert-box:has(.alert-box__item) .alert-box__item {
  width: 100% !important;
  max-width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  box-sizing: border-box !important;
  flex: 0 0 160px !important;
  align-self: stretch !important;
}

@media (max-width: 480px) {
  .market-radar-layout {
    padding: 20px 16px 0 16px;
    width: 100%;
    box-sizing: border-box;
  }
  .market-radar-widgets-row {
    width: 100%;
    padding: 0;
  }
  .market-radar-widgets-row .news-flash,
  .market-radar-widgets-row .alert-box,
  .market-radar-widgets-row .research-container {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: unset !important;
    margin: 0 auto;
  }
  .market-radar-widgets-row .research-container,
  .market-radar-widgets-row .research-container > .gradient-border_inner,
  .market-radar-widgets-row .research-container .research {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: unset !important;
  }
  .market-radar-widgets-row .research-container .research__inner,
  .market-radar-widgets-row .research-container .research__inner__timelines,
  .market-radar-widgets-row .research-container .research__inner__timelines__item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
  .market-radar-widgets-row .research-container .research__inner__timelines__item__left {
    width: 100% !important;
    max-width: 100% !important;
  }
  .news-flash__list {
    width: 100% !important;
    max-width: 100%;
  }
  .news-flash__content {
    width: 100% !important;
    max-width: 100%;
  }
  .news-flash__time {
    align-self: flex-end;
    margin-top: auto;
  }
  .alert-box__list {
    width: 100% !important;
    max-width: 100%;
  }
  .alert-box__body {
    width: 100% !important;
    max-width: 100%;
  }
  .crypto-bubbles-container,
  .btc-chart-wrapper,
  .macro-dashboard,
  .finance-widgets-row {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: unset !important;
  }
  .etf-flows,
  .etf-flows__sidebar,
  .etf-flows__cards,
  .etf-flows-card {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    min-width: unset !important;
  }
}
#liquidation-heatmap-aggr {
  margin-top: 24px;
}

/* FLEXIBLE NEWS FLASH IN MOBILE */
@media (max-width: 768px) {
  .news-flash .news-flash__body,
  .news-flash__list .news-flash__item .news-flash__body,
  div.news-flash div.news-flash__body {
    background: radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11 !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 16px !important;
    flex: 1 !important;
    height: auto !important;
    min-height: 100px !important;
    max-height: none !important;
  }
  .news-flash__icon {
    width: 36px !important;
    height: 36px !important;
  }
  .news-flash__icon-img {
    width: 36px !important;
    height: 36px !important;
  }
  .news-flash .news-flash__content,
  .news-flash__list .news-flash__item .news-flash__content,
  div.news-flash div.news-flash__content {
    width: 269px !important;
    height: auto !important;
    min-height: 100px !important;
  }
}
@media (max-width: 480px) {
  .news-flash .news-flash__body,
  .news-flash__list .news-flash__item .news-flash__body,
  div.news-flash div.news-flash__body {
    background: radial-gradient(77.54% 50.03% at 49.68% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11 !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 16px !important;
    flex: 1 !important;
    height: auto !important;
    min-height: 100px !important;
    max-height: none !important;
  }
  .news-flash__icon {
    width: 36px !important;
    height: 36px !important;
  }
  .news-flash__icon-img {
    width: 36px !important;
    height: 36px !important;
  }
  .news-flash .news-flash__content,
  .news-flash__list .news-flash__item .news-flash__content,
  div.news-flash div.news-flash__content {
    width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
  }
}
.aggregator-buttons-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.aggregator-coin-dropdown {
  position: relative;
  display: inline-block;
}

.aggregator-coin-dropdown-btn {
  display: flex;
  padding: 4px 8px 4px 12px;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border: none;
  cursor: pointer;
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.2s ease;
}
.aggregator-coin-dropdown-btn span:not(.aggregator-coin-dropdown-icon) {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aggregator-coin-dropdown-btn:hover, .aggregator-coin-dropdown-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
}

.aggregator-coin-dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aggregator-coin-dropdown-icon img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.aggregator-coin-dropdown-chevron {
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.aggregator-coin-dropdown-chevron.rotated {
  transform: rotate(180deg);
}

.aggregator-coin-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  width: 160px;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  overflow: hidden;
}
.aggregator-coin-dropdown-menu.show {
  display: flex;
}

.aggregator-coin-dropdown-item {
  display: flex;
  padding: 10px 32px 10px 12px;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%) 1;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
  width: 100%;
}
.aggregator-coin-dropdown-item span:not(.aggregator-coin-dropdown-multicoin-icons) {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.aggregator-coin-dropdown-item:last-child {
  border-bottom: none;
}
.aggregator-coin-dropdown-item:hover, .aggregator-coin-dropdown-item.active {
  background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) 1;
}
.aggregator-coin-dropdown-item:hover span:not(.aggregator-coin-dropdown-multicoin-icons), .aggregator-coin-dropdown-item.active span:not(.aggregator-coin-dropdown-multicoin-icons) {
  opacity: 1;
}

.aggregator-coin-dropdown-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
}

.aggregator-coin-dropdown-multicoin-icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
}
.aggregator-coin-dropdown-multicoin-icons .multicoin-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.aggregator-coin-dropdown-multicoin-icons .multicoin-left {
  left: 0;
  z-index: 1;
}
.aggregator-coin-dropdown-multicoin-icons .multicoin-center {
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.aggregator-coin-dropdown-multicoin-icons .multicoin-right {
  right: 0;
  z-index: 2;
}

.aggregator-timeframe-dropdown {
  position: relative;
  display: inline-block;
}

.aggregator-timeframe-dropdown-btn {
  display: flex;
  padding: 4px 8px 4px 12px;
  align-items: center;
  gap: 24px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border: none;
  cursor: pointer;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  transition: background 0.2s ease;
}
.aggregator-timeframe-dropdown-btn span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aggregator-timeframe-dropdown-btn:hover, .aggregator-timeframe-dropdown-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
}

.aggregator-timeframe-dropdown-chevron {
  width: 16px;
  height: 16px;
  opacity: 1;
  transition: transform 0.2s ease;
}

.aggregator-timeframe-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  width: 148px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}
.aggregator-timeframe-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aggregator-timeframe-dropdown-item {
  display: flex;
  padding: 10px 12px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
}
.aggregator-timeframe-dropdown-item span {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}
.aggregator-timeframe-dropdown-item:last-child {
  border-bottom: none;
}
.aggregator-timeframe-dropdown-item:hover {
  border-style: solid;
  border-width: 0 0 1px 0;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) 1;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}
.aggregator-timeframe-dropdown-item:hover span {
  color: #FFFFFF;
}
.aggregator-timeframe-dropdown-item.active {
  gap: 8px;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) 1;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}
.aggregator-timeframe-dropdown-item.active span {
  color: #FFFFFF;
}

.aggregator-controls-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.aggregator-filter-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.aggregator-controls-separator {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.16);
}

.aggregator-audio-btn {
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 9px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
}
.aggregator-audio-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
}
.aggregator-audio-btn.muted {
  opacity: 0.72;
}

.aggregator-audio-btn-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aggregator-audio-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.aggregator-audio-label {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
}

.liquidation-heatmap-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 24px;
  max-width: 1432px;
  width: 100%;
}

.market-radar-heatmap {
  height: 800px;
  min-height: 800px;
}

.liquidation-heatmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 10px;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.liquidation-heatmap-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.liquidation-heatmap-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.liquidation-btn {
  font-family: "Open Runde";
  color: #fff;
  border: none;
  line-height: 20px;
  padding: 4px 12px;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 56px;
  background: rgba(255, 255, 255, 0.04);
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.liquidation-btn span {
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.36) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.liquidation-btn.active, .liquidation-btn:focus {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  border-radius: 56px;
}

.liquidation-btn.active span, .liquidation-btn:focus span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.liquidation-btn-icon {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.6;
  flex-shrink: 0;
}

.liquidation-btn svg.liquidation-btn-icon {
  color: rgba(255, 255, 255, 0.6);
}

.liquidation-btn:hover .liquidation-btn-icon,
.liquidation-btn.active .liquidation-btn-icon {
  opacity: 1;
}

.liquidation-btn:hover svg.liquidation-btn-icon,
.liquidation-btn.active svg.liquidation-btn-icon {
  color: rgba(255, 255, 255, 0.9);
}

.liquidation-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
}

.liquidation-btn[data-action=reset-zoom] {
  padding: 4px 12px 4px 8px;
}

.liquidation-info-icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.liquidation-info-icon:hover {
  opacity: 1;
}

.liquidation-info-icon-img {
  width: 16px;
  height: 16px;
  display: block;
}

.liquidation-heatmap-title-group > span {
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.liquidation-heatmap-icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.liquidation-heatmap-body {
  flex: 1;
  display: flex;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
}

.liquidation-heatmap-footer {
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 0 0 8px 8px;
}

.liquidation-color-scale {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.color-scale-gradient-wrapper {
  flex: 1;
  width: 20px;
  margin: 8px 0;
  position: relative;
  box-shadow: 0 0 10px rgba(255, 147, 51, 0.3);
}

.color-scale-gradient-blur,
.color-scale-gradient-sharp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to top, #FFFFFF 0%, #FFE6CC 16.7%, #FFCC99 33.3%, #FFB266 50%, #FF9933 66.7%, #FF7F1A 83.3%, #F97316 100%);
}

.color-scale-gradient-blur {
  filter: blur(8px);
  z-index: 1;
}

.color-scale-gradient-sharp {
  z-index: 2;
}

.color-scale-max,
.color-scale-min {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 500;
}

.liquidation-heatmap-chart {
  flex: 1;
  overflow: hidden;
  background: transparent;
  overscroll-behavior: contain;
  touch-action: none;
  min-height: 0;
  position: relative;
}

.aggregator-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(13, 17, 23);
  z-index: 10;
  opacity: 1;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}
.aggregator-loading-overlay.hidden {
  opacity: 0;
}

.aggregator-loading-logo {
  width: 60px;
  height: auto;
  animation: pulse-logo 2s ease-in-out infinite;
}

@keyframes pulse-logo {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
.aggregator-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}

.aggregator-watermark-logo {
  width: 509px;
  height: auto;
  opacity: 0.3;
  animation: none;
}

@media (max-width: 1400px) {
  .aggregator-watermark-logo {
    width: 400px;
  }
}
@media (max-width: 1024px) {
  .aggregator-watermark-logo {
    width: 300px;
  }
}
@media (max-width: 768px) {
  .aggregator-watermark-logo {
    width: 250px;
  }
}
@media (max-width: 480px) {
  .aggregator-watermark-logo {
    width: 200px;
  }
}
@media (max-width: 1200px) {
  .liquidation-heatmap-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto;
  }
}
@media (max-width: 768px) {
  .liquidation-heatmap-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    margin: 0 auto 16px auto;
  }
  .liquidation-heatmap-header {
    height: 42px;
    padding: 0 12px;
  }
  .liquidation-heatmap-title-group > span {
    display: none;
  }
  .liquidation-heatmap-body {
    padding: 0;
  }
  .liquidation-color-scale {
    width: 50px !important;
  }
  .color-scale-max,
  .color-scale-min {
    font-size: 10px !important;
    display: block !important;
    visibility: visible !important;
  }
  .liquidation-heatmap-chart {
    min-height: 300px !important;
  }
}
@media (max-width: 480px) {
  .liquidation-heatmap-container {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    height: 400px !important;
    margin: 0 auto 12px auto;
  }
  .liquidation-heatmap-header {
    height: 42px;
    padding: 0 8px;
    font-size: 12px;
  }
  .liquidation-heatmap-body {
    padding: 0;
    gap: 8px;
  }
  .liquidation-color-scale {
    width: 40px !important;
  }
  .color-scale-max,
  .color-scale-min {
    font-size: 8px !important;
  }
  .liquidation-heatmap-icon {
    width: 10px !important;
    height: 10px !important;
  }
  .liquidation-heatmap-chart {
    min-height: 250px !important;
  }
}
.economic-calendar-container {
  display: flex;
  gap: 16px;
  max-width: 1432px;
  position: relative;
}
.economic-calendar-container .economic-calendar-table {
  flex: 2;
  min-width: 0;
}
.economic-calendar-container .economic-calendar-detail {
  flex: 1;
  min-width: 0;
}
.economic-calendar-container #economic-calendar {
  display: contents;
}
.economic-calendar-container #economic-calendar[aria-busy=true],
.economic-calendar-container #economic-calendar[busy] {
  display: contents;
}

.economic-calendar-table {
  height: 664px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.economic-calendar-table__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px 24px;
  gap: 16px;
}

.economic-calendar-table__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.economic-calendar-table__icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.economic-calendar-table__title-group > span {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar-table__subtitle {
  opacity: 0.9;
}

.economic-calendar-table__info-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.economic-calendar-table__info-btn:hover {
  color: rgb(255, 255, 255);
}

.economic-calendar-table__filters {
  display: flex;
  align-items: center;
  gap: 4px;
}

.economic-calendar-table__filter-btn {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  opacity: 0.5;
}
.economic-calendar-table__filter-btn--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #FFF;
  opacity: 1;
}
.economic-calendar-table__filter-btn:hover:not(.economic-calendar-table__filter-btn--active) {
  opacity: 0.7;
}

.economic-calendar-table__refresh-btn {
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.economic-calendar-table__refresh-btn:hover {
  color: rgb(255, 255, 255);
}

.economic-calendar-table__content-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.economic-calendar-table__content {
  display: block;
  height: 100%;
}

.economic-calendar-table__skeleton-wrapper {
  display: none;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#economic-calendar[aria-busy=true],
#economic-calendar[busy] {
  opacity: 1 !important;
}
#economic-calendar[aria-busy=true] .economic-calendar-table__content,
#economic-calendar[busy] .economic-calendar-table__content {
  display: none;
}
#economic-calendar[aria-busy=true] .economic-calendar-table__skeleton-wrapper,
#economic-calendar[busy] .economic-calendar-table__skeleton-wrapper {
  display: block;
}
#economic-calendar[aria-busy=true] .economic-calendar-detail__content,
#economic-calendar[busy] .economic-calendar-detail__content {
  display: none;
}
#economic-calendar[aria-busy=true] .economic-calendar-detail__skeleton-wrapper,
#economic-calendar[busy] .economic-calendar-detail__skeleton-wrapper {
  display: block;
}

#economic-calendar-detail[aria-busy=true] .economic-calendar-detail__content,
#economic-calendar-detail[busy] .economic-calendar-detail__content {
  display: none;
}
#economic-calendar-detail[aria-busy=true] .economic-calendar-detail__skeleton-wrapper,
#economic-calendar-detail[busy] .economic-calendar-detail__skeleton-wrapper {
  display: block;
}

.economic-calendar-table__scroll-container {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  padding: 0 0 24px;
}
.economic-calendar-table__scroll-container::-webkit-scrollbar {
  display: none;
}

.economic-calendar-table__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: max-content;
}

.economic-calendar-table__day-section {
  margin-top: 0;
}

.economic-calendar-table__day-header {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
}
.economic-calendar-table__day-header td, .economic-calendar-table__day-header th {
  padding: 8px 16px;
}

.economic-calendar-table__day-title {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.economic-calendar-table__column-header {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-weight: 500;
  min-width: 59px;
}

.economic-calendar-table__event-row:hover, .economic-calendar-table__event-row--active {
  background: rgba(255, 255, 255, 0.08);
}
.economic-calendar-table__event-row td {
  padding: 8px 16px;
  vertical-align: middle;
}

.economic-calendar-table__row-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

.economic-calendar-table__event-time {
  width: 80px;
}

.economic-calendar-table__time-badge {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 600;
  width: 80px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(244, 63, 95, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(244, 63, 95, 0.08) 0%, rgba(244, 63, 95, 0) 100%), rgba(244, 63, 95, 0.4);
  box-sizing: border-box;
}
.economic-calendar-table__time-badge span {
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.economic-calendar-table__time-badge--empty {
  border: none;
  background: none;
}
.economic-calendar-table__time-badge--empty span {
  color: rgba(255, 255, 255, 0.9);
  background: none;
  -webkit-text-fill-color: inherit;
}

.economic-calendar-table__event-country {
  width: auto;
}
.economic-calendar-table__event-country .economic-calendar-table__row-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.economic-calendar-table__event-country span {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
}

.economic-calendar-table__flag {
  border-radius: 1px;
  flex-shrink: 0;
}
.economic-calendar-table__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.economic-calendar-table__event-name .economic-calendar-table__row-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.economic-calendar-table__event-name span:first-child {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
}

.economic-calendar-table__event-month {
  font-family: "Open Runde";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.economic-calendar-table__data-value {
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
  min-width: 59px;
  text-align: left;
}
.economic-calendar-table__data-value--negative {
  color: #F43F5F;
}
.economic-calendar-table__data-value--positive {
  color: #22C55E;
}
.economic-calendar-table__data-value--neutral {
  color: rgba(255, 255, 255, 0.6);
}

.economic-calendar-table__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: linear-gradient(180deg, rgba(15, 15, 17, 0) 0%, #0F0F11 100%);
  pointer-events: none;
}

.economic-calendar-table__skeleton {
  width: 100%;
}

.economic-calendar-table__skeleton-day-section {
  margin-bottom: 0;
}

.economic-calendar-table__skeleton-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
}

.economic-calendar-table__skeleton-columns {
  display: flex;
  gap: 78px;
  align-items: center;
  width: 481px;
}

.economic-calendar-table__skeleton-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 24px;
  box-sizing: border-box;
}
.economic-calendar-table__skeleton-row--highlighted {
  background: rgba(255, 255, 255, 0.08);
}

.economic-calendar-table__skeleton-bar {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 48px;
  height: 14px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.economic-calendar-table__skeleton-bar--title {
  width: 182px;
}
.economic-calendar-table__skeleton-bar--small {
  width: 58px;
}
.economic-calendar-table__skeleton-bar--medium {
  width: 58px;
  height: 16px;
}
.economic-calendar-table__skeleton-bar--time {
  width: 80px;
}

.economic-calendar-table__skeleton-progress {
  flex: 1;
  min-width: 200px;
  height: 20px;
  border-radius: 48px;
  position: relative;
}

.economic-calendar-table__skeleton-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 85%;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 48px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.economic-calendar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
}
.economic-calendar-empty-state__message {
  font-family: "Open Runde", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}
.economic-calendar-empty-state__subtext {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 300px;
}

.economic-calendar-detail {
  height: 664px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.economic-calendar-detail__content-wrapper {
  height: 100%;
  position: relative;
}

.economic-calendar-detail__content {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.economic-calendar-detail__content::-webkit-scrollbar {
  display: none;
}

.economic-calendar-detail__skeleton-wrapper {
  display: none;
  height: 100%;
  padding: 24px;
  overflow: hidden;
}

.economic-calendar-detail__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.economic-calendar-detail__empty-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.economic-calendar-detail__empty-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  max-width: 360px;
}

.economic-calendar-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.economic-calendar-detail__header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.economic-calendar-detail__title {
  font-family: "Open Runde";
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar-detail__tabs {
  display: flex;
  gap: 4px;
}

.economic-calendar-detail__tab {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.5;
  transition: all 0.2s ease;
}
.economic-calendar-detail__tab--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  opacity: 1;
}
.economic-calendar-detail__tab:hover:not(.economic-calendar-detail__tab--active) {
  opacity: 0.7;
}

.economic-calendar-detail__tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.economic-calendar-detail__collapse-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transform: rotate(180deg) scaleY(-1);
  transition: all 0.3s ease;
}
.economic-calendar-detail__collapse-btn:hover {
  color: rgb(255, 255, 255);
}

.economic-calendar-detail__description {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.economic-calendar-detail__no-data {
  padding: 40px 20px;
  text-align: center;
  color: white;
}

.economic-calendar-detail__period-filters {
  display: flex;
  gap: 4px;
}

.economic-calendar-detail__period-btn {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.5;
  transition: all 0.2s ease;
}
.economic-calendar-detail__period-btn--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  opacity: 1;
}
.economic-calendar-detail__period-btn:hover:not(.economic-calendar-detail__period-btn--active) {
  opacity: 0.7;
}

.economic-calendar-detail__stats-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  margin-top: 0;
  border-top: 1px solid hsla(0, 0%, 100%, 0.04);
}
.economic-calendar-detail__stats-footer .economic-calendar-detail__stats-source {
  font-size: 12px;
  color: #94A3B8;
}

.economic-calendar-detail__stats-buttons {
  display: flex;
  gap: 4px;
}

.economic-calendar-detail__chart-container {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 24px 16px 16px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.economic-calendar-detail__chart-wrapper {
  display: flex;
  gap: 8px;
}

.economic-calendar-detail__chart {
  flex: 1;
  position: relative;
  height: 300px;
}

.economic-calendar-detail__stats-chart {
  flex: 1;
  position: relative;
  height: 400px;
}

.economic-calendar-detail__chart-placeholder {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg width="375" height="192" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="48" x2="375" y2="48" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="0" y1="96" x2="375" y2="96" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="0" y1="144" x2="375" y2="144" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="53.57" y1="0" x2="53.57" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="107.14" y1="0" x2="107.14" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="160.71" y1="0" x2="160.71" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="214.28" y1="0" x2="214.28" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="267.85" y1="0" x2="267.85" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="321.42" y1="0" x2="321.42" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.economic-calendar-detail__chart-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 375 192" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M 0,120 L 40,80 L 80,60 L 120,100 L 160,90 L 200,120 L 240,80 L 280,100 L 320,40 L 360,60 L 375,80" stroke="rgba(79,140,255,1)" stroke-width="2" fill="none"/></svg>') no-repeat center/100% 100%;
}

.economic-calendar-detail__chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 192px;
}
.economic-calendar-detail__chart-y-axis span {
  font-family: "Inter";
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.economic-calendar-detail__chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding-right: 36px;
}
.economic-calendar-detail__chart-x-axis span {
  font-family: "Inter";
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.economic-calendar-detail__bonds-table {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  overflow: visible;
}

.economic-calendar-detail__bonds-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
  border-radius: 12px 12px 0 0;
}
.economic-calendar-detail__bonds-header .economic-calendar-detail__bonds-cell {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.economic-calendar-detail__bonds-header .economic-calendar-detail__bonds-cell:first-child {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.economic-calendar-detail__bonds-header .economic-calendar-detail__bonds-cell--arrow {
  width: 32px;
}

.economic-calendar-detail__bonds-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 24px;
}

.economic-calendar-detail__bonds-cell {
  flex: 1;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
.economic-calendar-detail__bonds-cell--arrow {
  flex: none;
  width: 32px;
  justify-content: center;
}

.economic-calendar-detail__arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.economic-calendar-detail__arrow--down {
  border-top: 7px solid #FF6B6B;
}
.economic-calendar-detail__arrow--up {
  border-bottom: 7px solid #51CF66;
}

.economic-calendar-detail__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
}

.economic-calendar-detail__skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.economic-calendar-detail__skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.economic-calendar-detail__skeleton-header-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.economic-calendar-detail__skeleton-tabs {
  display: flex;
  gap: 4px;
}

.economic-calendar-detail__skeleton-tab {
  width: 60px;
  height: 28px;
  border-radius: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  opacity: 0.5;
}
.economic-calendar-detail__skeleton-tab--active {
  background: linear-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.economic-calendar-detail__skeleton-collapse-btn {
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.economic-calendar-detail__skeleton-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.economic-calendar-detail__skeleton-period-filters {
  display: flex;
  gap: 4px;
}

.economic-calendar-detail__skeleton-period-btn {
  width: 60px;
  height: 28px;
  border-radius: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  opacity: 0.5;
}
.economic-calendar-detail__skeleton-period-btn--active {
  background: linear-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.economic-calendar-detail__skeleton-bar {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 48px;
  height: 16px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.economic-calendar-detail__skeleton-bar--title {
  width: 155px;
  height: 24px;
}
.economic-calendar-detail__skeleton-bar--line {
  width: 100%;
}
.economic-calendar-detail__skeleton-bar--small {
  width: 58px;
  height: 14px;
}

.economic-calendar-detail__skeleton-chart-container {
  width: 100%;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 24px 16px 16px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.economic-calendar-detail__skeleton-chart-wrapper {
  display: flex;
  gap: 8px;
  height: 192px;
}

.economic-calendar-detail__skeleton-chart {
  flex: 1;
  position: relative;
}

.economic-calendar-detail__skeleton-chart-grid {
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="375" height="192" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="48" x2="375" y2="48" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="0" y1="96" x2="375" y2="96" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="0" y1="144" x2="375" y2="144" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="53.57" y1="0" x2="53.57" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="107.14" y1="0" x2="107.14" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="160.71" y1="0" x2="160.71" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="214.28" y1="0" x2="214.28" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="267.85" y1="0" x2="267.85" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/><line x1="321.42" y1="0" x2="321.42" y2="192" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/></svg>') no-repeat;
  background-size: 100% 100%;
}

.economic-calendar-detail__skeleton-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 192px;
}
.economic-calendar-detail__skeleton-chart-y-axis span {
  font-family: "Inter";
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.economic-calendar-detail__skeleton-chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding-right: 36px;
}
.economic-calendar-detail__skeleton-chart-x-axis span {
  font-family: "Inter";
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.economic-calendar-detail__skeleton-bonds-table {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  overflow: hidden;
}

.economic-calendar-detail__skeleton-bonds-header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 24px;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #0F0F11;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.economic-calendar-detail__skeleton-bar-spacer {
  width: 32px;
}

.economic-calendar-detail__skeleton-bonds-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 11px 24px;
}

.economic-calendar-detail__skeleton-real-text {
  flex: 1;
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.economic-calendar-detail__skeleton-arrow {
  width: 32px;
  height: 11px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@media (max-width: 1200px) {
  .economic-calendar-container {
    grid-template-columns: 1fr;
  }
  .economic-calendar-table {
    width: 100%;
    order: 1;
  }
  .economic-calendar-detail {
    width: 100%;
    order: 2;
  }
}
@media (max-width: 1440px) {
  .economic-calendar-table__header {
    flex-wrap: wrap;
    padding: 16px;
  }
  .economic-calendar-table__title-group {
    flex: 1 1 100%;
  }
  .economic-calendar-table__filters {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-top: 8px;
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  #economic-calendar {
    height: auto !important;
  }
  #economic-calendar > turbo-frame {
    display: block;
    height: auto !important;
  }
  .economic-calendar-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    overflow-x: hidden;
    flex-direction: column;
    height: auto !important;
  }
  .economic-calendar-table {
    height: 664px !important;
    min-height: 664px !important;
    flex-shrink: 0;
  }
  .economic-calendar-detail {
    height: 664px !important;
    min-height: 664px !important;
    flex-shrink: 0;
  }
  .economic-calendar-table__content-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .economic-calendar-detail__chart-container {
    width: 100%;
  }
  .economic-calendar-detail__skeleton-chart-container {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .market-radar-nav {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .market-radar-nav::-webkit-scrollbar {
    display: none;
  }
  .market-radar-nav-item {
    flex-shrink: 0;
  }
  .market-radar-blurred,
  .market-radar-layout > div {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    flex-direction: column;
  }
  #economic-calendar {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  #economic-calendar > turbo-frame {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .economic-calendar-container {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    overflow-x: hidden;
  }
  .economic-calendar-table {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: 664px !important;
    flex-shrink: 0;
  }
  .economic-calendar-table__content-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .economic-calendar-table__table {
    min-width: 600px;
  }
  .economic-calendar-detail {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: 664px !important;
    flex-shrink: 0;
  }
}
.market-radar-preview-image {
  width: 100%;
  max-width: 1432px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.market-radar-blurred {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.market-radar-blurred::after {
  content: "";
  position: absolute;
  top: -16px;
  left: -100px;
  right: -100px;
  bottom: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 10;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 16px), linear-gradient(to right, transparent 0px, black 100px, black calc(100% - 100px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0px, black 16px), linear-gradient(to right, transparent 0px, black 100px, black calc(100% - 100px), transparent 100%);
  mask-composite: intersect;
  background: linear-gradient(to bottom, #0F0F11 0px, transparent 16px), linear-gradient(to right, #0F0F11 0px, rgba(0, 0, 0, 0.4) 100px, rgba(0, 0, 0, 0.4) calc(100% - 100px), #0F0F11 100%);
}
@media (max-width: 768px) {
  .market-radar-blurred::after {
    left: -20px;
    right: -20px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 16px);
    mask-image: linear-gradient(to bottom, transparent 0px, black 16px);
    background: linear-gradient(to bottom, #0F0F11 0px, transparent 16px);
  }
}
.market-radar-blurred.reveal-active::after {
  -webkit-mask-image: radial-gradient(circle 400px at var(--reveal-x) var(--reveal-y), transparent 0%, transparent 20%, black 100%);
  mask-image: radial-gradient(circle 400px at var(--reveal-x) var(--reveal-y), transparent 0%, transparent 20%, black 100%);
}
.market-radar-blurred .desktop-only {
  display: block;
}
@media (max-width: 768px) {
  .market-radar-blurred .desktop-only {
    display: none;
  }
}
.market-radar-blurred .mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .market-radar-blurred .mobile-only {
    display: flex;
    flex-direction: column;
  }
}

.sentiment-container {
  background-color: transparent;
  border: none;
  padding: 0;
  color: #f0f0f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gauge segment opacity control */
}
.sentiment-container .sentiment-title {
  font-family: "Open Runde";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sentiment-container .sentiment-title__icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}
.sentiment-container .sentiment-description {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.sentiment-container .gauge-modern {
  width: 206px;
  height: 115px;
  margin: 48px auto 16px;
  position: relative;
}
.sentiment-container .gauge-modern .gauge-segment {
  display: inline !important;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.sentiment-container .gauge-modern .gauge-segment.active {
  opacity: 1;
}
.sentiment-container .sentiment-indicator {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sentiment-container .sentiment-indicator__img {
  width: 100%;
  height: 100%;
}
.sentiment-container .sentiment-score-container {
  position: absolute;
  top: 84%;
  left: 50%;
  transform: translate(-50%, -65%);
  text-align: center;
}
.sentiment-container .sentiment-score {
  font-family: "Open Runde";
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.286px;
  text-align: center;
  color: #ffffff;
}
.sentiment-container .sentiment-label {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-family: "Open Runde";
  font-size: 15.429px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.571px;
  margin-top: 4px;
}
.sentiment-container .sentiment-top {
  --sentiment-color: #FDE047;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  border: 1px solid #333;
  border-radius: 16px;
  padding: 16px 24px;
  text-align: center;
  margin-bottom: 16px;
  width: 400px;
  height: 320px;
  position: relative;
  overflow: hidden;
}
.sentiment-container .sentiment-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-radius: 0 0 12px 12px;
  opacity: 0.6;
  background: linear-gradient(90deg, transparent 0%, var(--sentiment-color) 35%, var(--sentiment-color) 65%, transparent 100%);
}
.sentiment-container .sentiment-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, var(--sentiment-color) 0%, transparent 100%);
  opacity: 0.1;
  z-index: 0;
}
.sentiment-container .sentiment-bottom {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(15, 15, 17, 0.5);
  padding: 20px;
  width: 100%;
  max-width: 400px;
  height: auto;
  min-height: 234px;
  margin-left: auto;
  margin-right: auto;
}
.sentiment-container .sentiment-bottom .sentiment-poll {
  background-color: transparent;
  padding: 0;
  border: none;
}
.sentiment-container .sentiment-poll-container {
  gap: 24px;
}
.sentiment-container .sentiment-poll {
  gap: 6px;
}
.sentiment-container .sentiment-poll-title {
  font-family: "Open Runde";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  text-align: center;
  margin-bottom: 8px;
}
.sentiment-container .sentiment-poll-question {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-family: "Open Runde";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  margin-bottom: 24px;
}
.sentiment-container .sentiment-poll-options {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.sentiment-container .sentiment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  flex: 1;
  min-width: 100px;
  padding: 12px 8px;
  align-self: stretch;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.sentiment-container .sentiment-btn .sentiment-btn__icon {
  width: 20px;
  height: 20px;
}
.sentiment-container .sentiment-btn.bearish {
  opacity: 0.4;
  border: 1px solid rgba(244, 63, 95, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(244, 63, 95, 0.08) 0%, rgba(244, 63, 95, 0) 100%), rgba(244, 63, 95, 0.08);
  color: #F43F5F;
}
.sentiment-container .sentiment-btn.neutral {
  border-radius: 12px;
  border: 1px solid rgba(253, 224, 71, 0.2);
  opacity: 0.4;
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(253, 224, 71, 0.08) 0%, rgba(253, 224, 71, 0) 100%), rgba(253, 224, 71, 0.08);
  color: #FFFFFF;
}
.sentiment-container .sentiment-btn.bullish {
  opacity: 0.4;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0) 100%), rgba(34, 197, 94, 0.08);
  color: #22C55E;
}
.sentiment-container .sentiment-btn.active {
  font-weight: 700;
  opacity: 1;
}
.sentiment-container .sentiment-btn.active.neutral {
  border: 1px solid rgba(253, 224, 71, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(253, 224, 71, 0.16) 0%, rgba(253, 224, 71, 0) 100%), rgba(253, 224, 71, 0.16);
}
.sentiment-container .sentiment-btn.active.bearish {
  border: 1px solid rgba(244, 63, 95, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(244, 63, 95, 0.16) 0%, rgba(244, 63, 95, 0) 100%), rgba(244, 63, 95, 0.16);
}
.sentiment-container .sentiment-btn.active.bullish {
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(34, 197, 94, 0.16) 0%, rgba(34, 197, 94, 0) 100%), rgba(34, 197, 94, 0.16);
}
.sentiment-container .sentiment-btn__label {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
.sentiment-container .sentiment-poll-footer {
  text-align: center;
  font-size: 12px;
  color: #777;
}
.sentiment-container .sentiment-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: 230px;
  pointer-events: none;
  z-index: -1;
}
.sentiment-container .sentiment-poll-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  font-family: "Open Runde";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}
.sentiment-container .sentiment-poll-meta .sentiment-poll-meta__value {
  font-weight: 500;
  color: #ffffff;
}

.sentiment-header {
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .sentiment-container {
    max-width: 100%;
  }
  .sentiment-top {
    width: 100% !important;
    max-width: 400px;
    padding: 16px 20px;
    height: auto;
    min-height: 320px;
  }
  .sentiment-bottom {
    width: 100% !important;
    max-width: 100%;
    padding: 18px;
    height: auto;
    min-height: 200px;
  }
  .gauge-modern {
    width: 180px;
    height: 100px;
    margin: 40px auto 16px;
  }
  .sentiment-score {
    font-size: 42px;
    line-height: 42px;
  }
  .sentiment-label {
    font-size: 14px;
    line-height: 18px;
  }
}
@media (max-width: 480px) {
  .sentiment-top {
    width: 100% !important;
    padding: 16px;
    height: auto;
    min-height: 300px;
  }
  .sentiment-bottom {
    width: 100% !important;
    padding: 16px;
    height: auto;
    min-height: 180px;
  }
  .sentiment-title {
    font-size: 16px;
    line-height: 20px;
  }
  .sentiment-description {
    font-size: 11px;
    line-height: 15px;
    max-width: 100%;
  }
  .gauge-modern {
    width: 160px;
    height: 90px;
    margin: 32px auto 12px;
  }
  .sentiment-score {
    font-size: 36px;
    line-height: 36px;
  }
  .sentiment-label {
    font-size: 13px;
    line-height: 16px;
  }
  .sentiment-poll-title {
    font-size: 14px;
    line-height: 20px;
  }
  .sentiment-poll-question {
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 20px;
  }
  .sentiment-poll-options {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 20px;
    justify-content: center;
  }
  .sentiment-btn {
    flex: 1;
    min-width: 85px;
    height: 40px;
    padding: 8px 4px;
    font-size: 12px;
  }
  .sentiment-btn .sentiment-btn__icon {
    width: 16px;
    height: 16px;
  }
  .sentiment-poll-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 15px;
  }
  .sentiment-poll-footer {
    font-size: 11px;
    line-height: 15px;
  }
}
@media (max-width: 360px) {
  .sentiment-top {
    padding: 12px;
    min-height: 280px;
  }
  .sentiment-bottom {
    padding: 12px;
    min-height: 160px;
  }
  .gauge-modern {
    width: 140px;
    height: 80px;
    margin: 28px auto 10px;
  }
  .sentiment-score {
    font-size: 32px;
    line-height: 32px;
  }
  .sentiment-poll-options {
    gap: 4px;
  }
  .sentiment-btn {
    flex: 1;
    min-width: 75px;
    height: 36px;
    padding: 6px 2px;
    font-size: 11px;
  }
  .sentiment-btn .sentiment-btn__icon {
    width: 14px;
    height: 14px;
  }
  .sentiment-poll-meta {
    gap: 8px;
    font-size: 10px;
    line-height: 14px;
  }
}
@media (max-width: 768px) {
  #sentiment-info-popover .gradient-border_inner {
    width: 90vw !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: 80vh !important;
    padding: 20px !important;
    overflow-y: auto !important;
  }
  #sentiment-info-popover .news-flash__list {
    width: 100% !important;
    padding: 0 !important;
  }
  #sentiment-info-popover .sentiment-description,
  #sentiment-info-popover p,
  #sentiment-info-popover li {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  #sentiment-info-popover .gradient-border_inner {
    width: 95vw !important;
    max-width: 320px !important;
    padding: 16px !important;
    max-height: 85vh !important;
  }
  #sentiment-info-popover .settings_modal_header_main_heading {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  #sentiment-info-popover .sentiment-description,
  #sentiment-info-popover p,
  #sentiment-info-popover li {
    font-size: 13px !important;
    line-height: 18px !important;
  }
  #sentiment-info-popover h6 {
    font-size: 13px !important;
    line-height: 18px !important;
  }
  #sentiment-info-popover ul {
    margin: 12px 0 0 12px !important;
  }
  #sentiment-info-popover .dd-audio-divider {
    margin: 16px 0 !important;
  }
}
.etf-tracker-panel {
  background: transparent;
  border-radius: 12px;
  margin-bottom: 32px;
  box-shadow: none;
  width: 100%;
  max-width: 1432px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  overflow: hidden;
}

.etf-tracker-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  height: 455.3px;
}

.etf-summary-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 320px;
  flex-shrink: 0;
  height: 455.3px;
  justify-content: space-between;
}

.etf-overview-card {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 16px;
  width: 100%;
}
.etf-overview-card h3 {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.etf-current-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.etf-current-flow .etf-flow-value {
  font-family: "Open Runde";
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
.etf-current-flow .etf-flow-value.positive {
  color: #22C55E;
}
.etf-current-flow .etf-flow-value.negative {
  color: #F43F5F;
}

.etf-historical-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.etf-historical-item:last-child {
  border-bottom: none;
}
.etf-historical-item .etf-period {
  font-size: 13px;
  color: #8e9297;
  line-height: 1.3;
}
.etf-historical-item .etf-value {
  font-weight: 600;
  font-size: 15px;
}
.etf-historical-item .etf-value.positive {
  color: #22C55E;
}
.etf-historical-item .etf-value.negative {
  color: #F43F5F;
}

.etf-chart-column {
  flex: 1;
  min-width: 0;
  height: 100%;
}

.etf-chart-section {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  height: 455.3px;
  display: flex;
  flex-direction: column;
}

.etf-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.etf-chart-header h3 {
  font-family: "Open Runde";
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.etf-chart-controls-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.etf-control-group {
  display: flex;
  gap: 4px;
}

.etf-filter-btn {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
}
.etf-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.etf-filter-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.12);
  border-radius: 56px;
  color: #FFFFFF;
}

.etf-control-btn {
  font-family: "Open Runde", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 50px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
}
.etf-control-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.etf-control-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.12);
  border-radius: 56px;
  color: #FFFFFF;
}

.etf-chart-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.etf-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.etf-legend-item .etf-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.etf-legend-item .etf-legend-dot.btc {
  background: #F7931A;
}
.etf-legend-item .etf-legend-dot.eth {
  background: #627EEA;
}
.etf-legend-item .etf-legend-label {
  font-size: 13px;
  color: #8e9297;
}
.etf-legend-item .etf-legend-value {
  font-weight: 600;
  font-size: 13px;
}
.etf-legend-item .etf-legend-value.positive {
  color: #22C55E;
}
.etf-legend-item .etf-legend-value.negative {
  color: #F43F5F;
}

.etf-chart-container {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.etf-chart-real {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
  padding: 16px;
  min-height: 0;
}

.etf-chart-y-axis {
  position: absolute;
  left: 16px;
  top: 16px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #6B7280;
  font-size: 11px;
  font-weight: 500;
}
.etf-chart-y-axis .etf-y-label {
  position: relative;
}
.etf-chart-y-axis .etf-y-label::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}

.etf-chart-bars {
  flex: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 16px 50px 50px 50px;
  gap: 6px;
  min-height: 0;
}

.etf-chart-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 35px;
}
.etf-chart-bar .etf-bar-segment {
  width: 100%;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.etf-chart-bar .etf-bar-segment.btc {
  background: #F7931A;
}
.etf-chart-bar .etf-bar-segment.eth {
  background: #627EEA;
}
.etf-chart-bar .etf-bar-segment:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}

.etf-chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  margin-top: 8px;
}
.etf-chart-x-axis .etf-x-label {
  font-size: 10px;
  color: #6B7280;
  font-weight: 500;
  text-align: center;
  flex: 1;
  max-width: 35px;
}

@media (max-width: 1440px) {
  .etf-tracker-panel {
    width: 100%;
    max-width: 1432px;
  }
}
@media (max-width: 1024px) {
  .etf-tracker-panel {
    height: auto;
    min-height: 430px;
    padding: 0 !important;
  }
  .etf-tracker-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .etf-summary-column {
    order: 2;
    width: 100%;
  }
  .etf-chart-column {
    order: 1;
  }
}
@media (max-width: 768px) {
  .etf-tracker-panel {
    padding: 0 !important;
    margin-bottom: 24px;
  }
  .etf-chart-header {
    flex-direction: column;
    gap: 14px;
  }
  .etf-chart-controls {
    align-items: flex-start;
  }
  .etf-chart-legend {
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .etf-tracker-panel {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px 24px 16px;
    padding: 0 !important;
    border-radius: 8px;
  }
  .etf-tracker-layout {
    gap: 16px;
  }
  .etf-summary-column {
    gap: 12px;
  }
  .etf-overview-card {
    padding: 12px;
    border-radius: 12px;
  }
  .etf-chart-section {
    padding: 16px;
    border-radius: 8px;
  }
  .etf-chart-header {
    gap: 12px;
    margin-bottom: 12px;
  }
  .etf-chart-header h3 {
    font-size: 15px;
  }
  .etf-chart-controls-row {
    gap: 12px;
  }
  .etf-filter-btn {
    min-width: 60px;
    padding: 4px 8px;
    font-size: 11px;
  }
  .etf-control-btn {
    min-width: 40px;
    padding: 4px 8px;
    font-size: 11px;
  }
  .etf-chart-legend {
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .etf-chart-bars {
    padding: 12px 30px 40px 30px;
    gap: 4px;
  }
  .etf-chart-x-axis {
    padding: 0 30px;
  }
  .etf-chart-y-axis {
    left: 12px;
    top: 12px;
    bottom: 40px;
  }
}
html body #home-page .etf-tracker-panel,
html body .market-radar-layout .etf-tracker-panel,
html body .etf-tracker-panel,
#home-page .etf-tracker-panel,
.market-radar-layout .etf-tracker-panel,
.etf-tracker-panel {
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.etf-tracker-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.etf-chart-column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  box-sizing: border-box !important;
}

.etf-chart-bars,
.etf-chart-x-axis,
.etf-chart-y-axis {
  width: 100% !important;
  box-sizing: border-box !important;
}

.etf-chart-bars {
  padding: 16px 5% 50px 5% !important;
  gap: 6px !important;
}

.etf-chart-x-axis {
  padding: 0 5% !important;
}

.etf-chart-y-axis {
  left: 5% !important;
  top: 16px !important;
  bottom: 50px !important;
  width: auto !important;
}

@media (max-width: 1200px) {
  html body #home-page .etf-tracker-panel,
  html body .market-radar-layout .etf-tracker-panel,
  html body .etf-tracker-panel,
  #home-page .etf-tracker-panel,
  .market-radar-layout .etf-tracker-panel,
  .etf-tracker-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 32px auto !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .etf-tracker-layout {
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  .etf-chart-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
  .etf-chart-bars {
    padding: 16px 5% 50px 5% !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-x-axis {
    padding: 0 5% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-y-axis {
    left: 5% !important;
    top: 16px !important;
    bottom: 50px !important;
    width: auto !important;
  }
}
@media (max-width: 768px) {
  html body #home-page .etf-tracker-panel,
  html body .market-radar-layout .etf-tracker-panel,
  html body .etf-tracker-panel,
  #home-page .etf-tracker-panel,
  .market-radar-layout .etf-tracker-panel,
  .etf-tracker-panel {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px 24px 16px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 8px !important;
  }
  .etf-tracker-layout {
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .etf-chart-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .etf-summary-column {
    gap: 12px !important;
  }
  .etf-overview-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .etf-chart-section {
    padding: 16px !important;
    border-radius: 8px !important;
  }
  .etf-chart-header {
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .etf-chart-header h3 {
    font-size: 15px !important;
  }
  .etf-chart-controls-row {
    gap: 12px !important;
  }
  .etf-filter-btn {
    min-width: 60px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .etf-control-btn {
    min-width: 50px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .etf-chart-legend {
    gap: 12px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
  }
  .etf-chart-bars {
    padding: 14px 4% 45px 4% !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-x-axis {
    padding: 0 4% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-y-axis {
    left: 4% !important;
    top: 14px !important;
    bottom: 45px !important;
    width: auto !important;
  }
}
@media (max-width: 480px) {
  html body #home-page .etf-tracker-panel,
  html body .market-radar-layout .etf-tracker-panel,
  html body .etf-tracker-panel,
  #home-page .etf-tracker-panel,
  .market-radar-layout .etf-tracker-panel,
  .etf-tracker-panel {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px 24px 16px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  .etf-tracker-layout {
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .etf-chart-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .etf-summary-column {
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .etf-overview-card {
    padding: 8px !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .etf-chart-section {
    padding: 12px !important;
    border-radius: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .etf-chart-header {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .etf-chart-header h3 {
    font-size: 14px !important;
  }
  .etf-chart-controls-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .etf-filter-btn {
    min-width: 50px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
  .etf-control-btn {
    min-width: 35px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
  .etf-chart-legend {
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
  }
  .etf-chart-bars {
    padding: 8px 3% 30px 3% !important;
    gap: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-x-axis {
    padding: 0 3% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-y-axis {
    left: 3% !important;
    top: 8px !important;
    bottom: 30px !important;
    width: auto !important;
  }
}
@media (max-width: 360px) {
  html body #home-page .etf-tracker-panel,
  html body .market-radar-layout .etf-tracker-panel,
  html body .etf-tracker-panel,
  #home-page .etf-tracker-panel,
  .market-radar-layout .etf-tracker-panel,
  .etf-tracker-panel {
    margin: 0 8px 16px 8px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: calc(100vw - 16px) !important;
  }
  .etf-tracker-layout {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .etf-chart-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .etf-chart-header h3 {
    font-size: 13px !important;
  }
  .etf-chart-bars {
    padding: 6px 2% 20px 2% !important;
    gap: 1px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-x-axis {
    padding: 0 2% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .etf-chart-y-axis {
    left: 2% !important;
    top: 6px !important;
    bottom: 20px !important;
    width: auto !important;
  }
  .etf-filter-btn,
  .etf-control-btn {
    min-width: 40px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
}
/* ETF Flows Container */
.etf-flows {
  width: 1432px;
}

.etf-flows__sidebar-toggle {
  display: none;
}

.etf-flows__layout {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 16px;
  transition: grid-template-columns 0.3s ease;
}

.etf-flows__sidebar-toggle:checked ~ .etf-flows__layout {
  grid-template-columns: 0 1fr;
  gap: 0;
}

.etf-flows__sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.etf-flows__sidebar-toggle:checked ~ .etf-flows__layout .etf-flows__sidebar {
  opacity: 0;
  pointer-events: none;
}

.etf-flows__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.etf-flows__main {
  display: flex;
  flex-direction: column;
}

/* ETF Flows Card */
.etf-flows-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(247, 147, 26, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(247, 147, 26, 0.16) 0%, rgba(247, 147, 26, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  padding: 16px 24px;
  width: 246px;
  height: 116px;
}

.etf-flows-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(247, 147, 26, 0.6) 0%, rgba(247, 147, 26, 0.2) 44%, rgba(247, 147, 26, 0) 84%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.etf-flows-card--eth {
  border: 1px solid rgba(98, 126, 234, 0.04);
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(98, 126, 234, 0.16) 0%, rgba(98, 126, 234, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
}

.etf-flows-card--eth::before {
  background: linear-gradient(180deg, rgba(98, 126, 234, 0.6) 0%, rgba(98, 126, 234, 0.2) 44%, rgba(98, 126, 234, 0) 84%);
}

.etf-flows-card__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}

.etf-flows-card__title {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 24px;
  margin-bottom: 0;
}

.etf-flows-card__coin-icon {
  width: 24px;
  height: 24px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.etf-flows-card__date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 16px;
}

.etf-flows-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.etf-flows-card__amount {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -1px;
}

.etf-flows-card__amount--positive {
  color: #00ff88;
}

.etf-flows-card__amount--negative {
  color: #ff4466;
}

/* ETF Flows AUM */
.etf-flows-aum {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px;
  width: 500px;
  height: 372px;
}

.etf-flows-aum__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.etf-flows-aum__title-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.etf-flows-aum__title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.etf-flows-aum__controls {
  display: flex;
  gap: 4px;
}

.etf-flows-aum__btn {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  opacity: 0.5;
}

.etf-flows-aum__btn:hover:not(.etf-flows-aum__btn--active) {
  opacity: 0.7;
}

.etf-flows-aum__btn--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #FFF;
  opacity: 1;
}

.etf-flows-aum__stats {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}

.etf-flows-aum__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etf-flows-aum__stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-aum__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.etf-flows-aum__dot--btc {
  background: #f7931a;
  box-shadow: 0px 0px 0px 2px rgba(247, 147, 26, 0.2);
}

.etf-flows-aum__dot--eth {
  background: #627eea;
  box-shadow: 0px 0px 0px 2px rgba(98, 126, 234, 0.2);
}

.etf-flows-aum__stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 16px;
}

.etf-flows-aum__stat-value {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 24px;
}

.etf-flows-aum__chart {
  margin-top: 0;
  height: 208px;
}

.etf-flows-aum__chart-wrapper {
  display: flex;
  gap: 16px;
  height: 100%;
}

.etf-flows-aum__chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  padding-top: 0;
  padding-bottom: 16px;
}

.etf-flows-aum__chart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.etf-flows-aum__chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}

.etf-flows-aum__chart-label {
  font-family: "Open Runde", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
}

.etf-flows-aum__chart-x-axis .etf-flows-aum__chart-label {
  text-align: center;
}

.etf-flows-aum__chart-simulated {
  flex: 1;
  position: relative;
  background: repeating-linear-gradient(to bottom, transparent, transparent 49px, rgba(255, 255, 255, 0.05) 49px, rgba(255, 255, 255, 0.05) 50px);
  overflow: hidden;
}

.etf-flows-aum__chart-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ETF Flows Historical */
.etf-flows-historical {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 16px 24px;
  height: 160px;
}

.etf-flows-historical__header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}

.etf-flows-historical__title {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: 112px;
}

.etf-flows-historical__labels {
  display: flex;
  gap: 22px;
}

.etf-flows-historical__label {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: 88px;
}

.etf-flows-historical__table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.etf-flows-historical__tbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.etf-flows-historical__row {
  display: flex;
  gap: 22px;
}

.etf-flows-historical__period {
  font-size: 12px;
  color: #888888;
  width: 112px;
}

.etf-flows-historical__value {
  font-size: 14px;
  font-weight: 500;
  width: 88px;
}

.etf-flows-historical__value--positive {
  color: #00ff88;
}

.etf-flows-historical__value--negative {
  color: #ff4466;
}

/* ETF Flows Chart */
.etf-flows-chart {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 0;
  width: 916px;
  overflow: hidden;
  transition: width 0.3s ease;
}

.etf-flows__sidebar-toggle:checked ~ .etf-flows__layout .etf-flows-chart {
  width: 100%;
}

.etf-flows-chart__top-bar {
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), rgba(15, 15, 17, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.etf-flows-chart__top-bar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.etf-flows-chart__collapse-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.etf-flows-chart__collapse-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.etf-flows-chart__collapse-btn svg path {
  stroke: rgba(255, 255, 255, 0.6);
  transition: stroke 0.3s ease;
}

.etf-flows-chart__collapse-btn:hover svg path {
  stroke: #FFFFFF;
}

.etf-flows-chart__title-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-chart__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-chart__logo-icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.etf-flows-chart__logo-text {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
}

.etf-flows-chart__info-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.etf-flows-chart__top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-chart__toggle-group {
  display: flex;
  gap: 4px;
}

.etf-flows-chart__separator {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
}

.etf-flows-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.etf-flows-chart__title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-chart__title {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
}

.etf-flows-chart__icon {
  width: 16px;
  height: 16px;
}

.etf-flows-chart__toggles {
  display: flex;
  gap: 4px;
}

.etf-flows-chart__toggle {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  opacity: 0.5;
}

.etf-flows-chart__toggle:hover:not(.etf-flows-chart__toggle--active) {
  opacity: 0.7;
}

.etf-flows-chart__toggle--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #FFF;
  opacity: 1;
}

.etf-flows-chart__content {
  height: 592px;
  display: flex;
  flex-direction: column;
}

.etf-flows-chart__legend {
  display: flex;
  gap: 24px;
  padding: 24px 24px 0 24px;
}

.etf-flows-chart__legend-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etf-flows-chart__legend-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-chart__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.etf-flows-chart__dot--inflow {
  width: 10px;
  height: 10px;
  border-radius: 0;
}

.etf-flows-chart__dot--assets {
  background: #ffffff;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.2);
}

.etf-flows-chart__dot--price {
  background: #f7931a;
  box-shadow: 0px 0px 0px 2px rgba(247, 147, 26, 0.2);
}

.etf-flows-chart__dot--eth-price {
  background: #627eea;
  box-shadow: 0px 0px 0px 2px rgba(98, 126, 234, 0.2);
}

.etf-flows-chart__label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 16px;
}

.etf-flows-chart__value {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 24px;
}

.etf-flows-chart__value--positive {
  color: #00ff88;
}

.etf-flows-chart__value--negative {
  color: #ff4466;
}

.etf-flows-chart__container {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.etf-flows-chart__wrapper {
  display: flex;
  gap: 16px;
  flex: 1;
}

.etf-flows-chart__y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 32px;
}

.etf-flows-chart__y-axis--left {
  width: 50px;
  align-items: flex-end;
  padding-right: 8px;
}

.etf-flows-chart__y-axis--right {
  width: 50px;
  align-items: flex-start;
  padding-left: 8px;
}

.etf-flows-chart__content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.etf-flows-chart__x-axis {
  display: flex;
  justify-content: space-between;
}

.etf-flows-chart__x-axis .etf-flows-chart__axis-label {
  font-family: "Open Runde", sans-serif;
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.4);
  transform: rotate(-45deg);
  transform-origin: top left;
}

.etf-flows-chart__axis-label {
  font-family: "Open Runde", sans-serif;
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.4);
}

.etf-flows-main-chart-simulated {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  padding: 0 8px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 94px, rgba(255, 255, 255, 0.05) 94px, rgba(255, 255, 255, 0.05) 95px);
}

.etf-bar-container {
  flex: 1;
  position: relative;
  height: 100%;
}

.etf-bar {
  width: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.etf-bar--positive {
  border: 1px solid #22C55E;
  background: rgba(34, 197, 94, 0.5);
  border-radius: 2px 2px 0 0;
  bottom: 50%;
}

.etf-bar--negative {
  border: 1px solid #F43F5F;
  background: rgba(244, 63, 95, 0.5);
  border-radius: 0 0 2px 2px;
  top: 50%;
}

.etf-flows-chart__bottom-bar {
  background: radial-gradient(circle at bottom, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), rgba(15, 15, 17, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 10px;
  height: 32px;
  border-radius: 0 0 12px 12px;
}

/* ETF Flows Table */
.etf-flows-table {
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 100%), #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
  width: 1432px;
  height: 508px;
  position: relative;
  overflow: hidden;
}
.etf-flows-table::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 128px;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, #141416 100%);
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}

.etf-flows-table__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  height: 28px;
}

.etf-flows-table__title {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-table__icon {
  width: 16px;
  height: 16px;
}

.etf-flows-table__toggles {
  display: flex;
  gap: 8px;
}

.etf-flows-table__toggle {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
  opacity: 0.5;
}

.etf-flows-table__toggle:hover:not(.etf-flows-table__toggle--active) {
  opacity: 0.7;
}

.etf-flows-table__toggle--active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 74.04%), rgba(255, 255, 255, 0.1);
  color: #FFF;
  opacity: 1;
}

.etf-flows-table__exchange {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-table__exchange-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2a2a2a;
}

.etf-flows-table__title-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-table__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etf-flows-table__logo-icon {
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  mask: url(/assets/icons/Vector-2c2331fe30f95743047afe2098c9d8d4005ccf44f139c595757f8a02fae074b8.svg) no-repeat center/contain;
  flex-shrink: 0;
}

.etf-flows-table__logo-text {
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.etf-flows-table__info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.etf-flows-table__info-btn:hover {
  opacity: 0.8;
}

.etf-flows-table__controls {
  display: flex;
  gap: 4px;
}

.etf-flows-table__wrapper {
  overflow: auto;
  position: relative;
  max-height: 430px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
.etf-flows-table__wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.etf-flows-table__wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 100px;
}
.etf-flows-table__wrapper::-webkit-scrollbar-thumb:horizontal {
  background: rgb(255, 255, 255);
}
.etf-flows-table__wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.etf-flows-table__wrapper::-webkit-scrollbar-corner {
  background: transparent;
}

.etf-flows-table__grid {
  border-collapse: separate;
  border-spacing: 0 16px;
  width: 100%;
}

.etf-flows-table__grid thead {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 16px;
}

.etf-flows-table__grid thead tr {
  display: flex;
  gap: 0;
}

.etf-flows-table__grid tbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.etf-flows-table__grid tbody tr {
  display: flex;
  gap: 0;
}

.etf-flows-table__grid--expanded thead tr,
.etf-flows-table__grid--expanded tbody tr {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

.etf-flows-table__cell {
  font-family: "Open Runde";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  width: 89.66px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.54) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.etf-flows-table__grid--expanded .etf-flows-table__cell {
  width: auto;
}

.etf-flows-table__cell--header {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6);
}

.etf-flows-table__cell--time-header {
  width: 128px;
}

.etf-flows-table__cell--time {
  font-weight: 500;
  text-align: center;
  width: 128px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.etf-flows-table__cell--time-alltime {
  text-align: center;
}

.etf-flows-table__cell--positive {
  color: #22C55E;
  font-weight: 500;
  width: 89.66px;
  background: none;
  -webkit-text-fill-color: #22C55E;
}

.etf-flows-table__cell--negative {
  color: #F43F5F;
  font-weight: 500;
  width: 89.66px;
  background: none;
  -webkit-text-fill-color: #F43F5F;
}

.etf-flows-table__cell--regular {
  text-align: left;
}

.etf-flows-table__cell--wide {
  text-align: center;
  width: 180px;
}

.etf-flows-table__gradient {
  display: none;
}

@media (max-width: 768px) {
  .etf-flows {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto;
    overflow-x: hidden;
  }
  .etf-flows__layout {
    grid-template-columns: 1fr;
  }
  .etf-flows__main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .etf-flows__cards {
    grid-template-columns: 1fr;
  }
  .etf-flows-card {
    width: 100%;
  }
  .etf-flows-aum {
    width: 100%;
  }
  .etf-flows-chart {
    width: 100%;
    overflow: hidden;
  }
  .etf-flows-chart__content {
    height: auto;
  }
  .etf-flows-chart__legend {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 16px 16px 0 16px;
  }
  .etf-flows-chart__container {
    padding: 16px;
  }
  .etf-flows-chart__top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: auto;
    padding: 8px 10px;
  }
  .etf-flows-chart__top-bar-right {
    overflow-x: auto;
    max-width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .etf-flows-chart__top-bar-right::-webkit-scrollbar {
    display: none;
  }
  .etf-flows-historical {
    width: 100%;
    padding: 16px 16px;
  }
  .etf-flows-historical__header {
    gap: 12px;
    margin-bottom: 16px;
  }
  .etf-flows-historical__title {
    font-size: 12px;
    width: 90px;
  }
  .etf-flows-historical__labels {
    gap: 12px;
  }
  .etf-flows-historical__label {
    font-size: 11px;
    width: 70px;
  }
  .etf-flows-historical__table {
    gap: 16px;
  }
  .etf-flows-historical__tbody {
    gap: 16px;
  }
  .etf-flows-historical__row {
    gap: 12px;
  }
  .etf-flows-historical__period {
    font-size: 11px;
    width: 90px;
  }
  .etf-flows-historical__value {
    font-size: 12px;
    width: 70px;
  }
  .etf-flows-table {
    padding: 16px;
    width: 100% !important;
    height: auto;
    overflow-y: visible;
  }
  .etf-flows-table__wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 440px;
    -webkit-overflow-scrolling: touch;
  }
  .etf-flows-table__wrapper::-webkit-scrollbar {
    display: block;
    height: 8px;
  }
  .etf-flows-table__wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }
  .etf-flows-table__grid {
    min-width: 1200px;
  }
  .etf-flows-table__cell {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .etf-flows {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px auto;
    overflow-x: hidden;
  }
  .etf-flows__sidebar {
    width: 100%;
  }
  .etf-flows__main {
    width: 100%;
  }
  .etf-flows__cards {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .etf-flows-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .etf-flows-aum {
    width: 100%;
  }
  .etf-flows-chart {
    width: 100%;
    overflow: hidden;
  }
  .etf-flows-chart__content {
    height: auto;
  }
  .etf-flows-chart__top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: auto;
    padding: 8px 10px;
  }
  .etf-flows-historical {
    width: 100%;
    padding: 16px 16px;
  }
  .etf-flows-historical__header {
    gap: 10px;
    margin-bottom: 16px;
  }
  .etf-flows-historical__title {
    font-size: 11px;
    width: 85px;
  }
  .etf-flows-historical__labels {
    gap: 10px;
  }
  .etf-flows-historical__label {
    font-size: 10px;
    width: 65px;
  }
  .etf-flows-historical__table {
    gap: 16px;
  }
  .etf-flows-historical__tbody {
    gap: 16px;
  }
  .etf-flows-historical__row {
    gap: 10px;
  }
  .etf-flows-historical__period {
    font-size: 10px;
    width: 85px;
  }
  .etf-flows-historical__value {
    font-size: 11px;
    width: 65px;
  }
  .etf-flows-table {
    padding: 12px;
    width: 100% !important;
    height: auto;
    overflow-y: visible;
  }
  .etf-flows-table__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    height: 48px;
  }
  .etf-flows-table__wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 440px;
    -webkit-overflow-scrolling: touch;
  }
  .etf-flows-table__wrapper::-webkit-scrollbar {
    display: block;
    height: 8px;
  }
  .etf-flows-table__wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }
  .etf-flows-table__grid {
    min-width: 1200px;
  }
  .etf-flows-table__cell {
    font-size: 11px;
  }
  .etf-flows-table__cell--time {
    font-size: 10px;
  }
}
turbo-frame[busy] {
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
}

.turbo-progress-bar {
  background: var(--orange);
}

.admin-resources {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 0;
  gap: 24px;
}

.admin-resources__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.admin-resources__title {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px; /* 133.333% */
  letter-spacing: -1px;
}

.admin-resources__subtitle {
  color: #71717A;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.admin-resources__new {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #0A84FF;
  box-shadow: 0px 0px 0px 1px rgba(41, 20, 184, 0.76), 0px 1px 2px 0px rgba(41, 20, 184, 0.4);
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  letter-spacing: -0.14px;
  text-decoration: none;
}
.admin-resources__new--full-width {
  width: 100%;
  justify-content: center;
}

.admin-resources__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin: 0;
}

.admin-resources__items--empty {
  text-align: center;
  color: white;
}

.admin-resources__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-resources__item-image {
  flex-shrink: 0;
}

.admin-resources__item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFF;
  font-family: Inter, "sans-serif";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
}

.admin-resources__item-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #71717A;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.admin-resources__item-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.admin-resources__item-delete {
  color: #FF453A;
  font-family: Inter, "sans-serif";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  text-decoration: none;
  padding: 4px 8px;
}

.admin-resources__item-edit {
  color: #0A84FF;
  font-family: Inter, "sans-serif";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  text-decoration: none;
  padding: 4px 8px;
}

.admin-resources-new {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 24px;
  max-width: 608px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .admin-resources-new {
    padding: 20px;
  }
}
.admin-resources-new__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.admin-resources-new__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  transition: background 0.2s;
}
.admin-resources-new__back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.admin-resources-new__title {
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  color: #FFF;
}

.admin-resources-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-resources-form__input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}
.admin-resources-form__input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.admin-resources-form__input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}
.admin-resources-form__editor {
  margin: 16px 0;
}
.admin-resources-form__editor .ql-toolbar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px 8px 0 0;
  padding: 12px !important;
}
.admin-resources-form__editor .ql-container {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, 0.02);
}
.admin-resources-form__editor .ql-editor {
  min-height: 200px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.summaries-form__visibility {
  color: #FFF;
  font-size: 14px;
  font-family: Inter;
  padding: 0 12px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.summaries-form__category {
  color: #FFF;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  margin: 0;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  border-radius: 24px;
  height: 24px;
  padding: 0 12px;
  display: flex;
  will-change: transform, background;
  transition: all 0.4s var(--easeOutQuart);
  cursor: pointer;
}

.summaries-form__metadata {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.summaries-form__categorization {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.summaries-form__timestamp {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0 12px;
  border-radius: 24px;
  -webkit-appearance: none;
  -moz-appearance: textfield; /* For Mozilla Firefox */
  cursor: pointer;
}

.summaries-form__timestamp::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.summaries-form__dojo-score-container {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0 12px;
  border-radius: 24px;
  color: white;
  font-size: 14px;
  gap: 8px;
}

.summaries-form__dojo-score {
  color: white;
}

.summaries-form__intro {
  color: #D4D4D8;
}

.summaries-form__outro {
  color: #D4D4D8;
}

.summaries-form__section-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.summaries-form__sections-tabs-items {
  display: flex;
  /*padding: 0 12px;*/
  gap: 16px;
}

.summaries-form__section {
  display: none;
}

.summaries-form__section_active {
  display: block;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.summmaries-form__section-rd {
  display: flex;
  gap: 16px;
}

.summaries-form__section-rename {
  color: #0A84FF;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  opacity: 85%;
}
.summaries-form__section-rename:hover {
  opacity: 100%;
}

.summaries-form__section-delete {
  color: #FF453A;
  opacity: 85%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.summaries-form__section-delete:hover {
  opacity: 100%;
}

.summaries-index {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 46.49375em) {
  .section-summaries {
    margin-top: 16px !important;
  }
}
.summaries-form__deletion {
  color: #FF453A;
  opacity: 85%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  margin-left: auto;
}
.summaries-form__deletion:hover {
  opacity: 100%;
}

.ql-editor {
  font: var(--post-regular);
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
}

.ql-editor-content {
  white-space: normal;
  padding: 0;
}

.ql-editor li {
  white-space: collapse;
}

.ql-editor .ql-size-huge {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  margin-bottom: 32px;
}

.ql-editor .ql-size-large {
  font: var(--xl-medium);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 24px;
}

.ql-editor p {
  margin-bottom: 24px;
}

.ql-editor p:has(br:only-child) {
  margin-bottom: 0;
}

.ql-editor p:empty {
  margin-bottom: 0;
}

.ql-editor ol {
  padding-left: 0;
  list-style-position: inside;
}

.ql-snow .ql-editor .ql-code-block-container {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  margin-bottom: 24px;
  font: var(--post-regular);
  color: white;
}

.ql-snow .ql-editor hr {
  height: 1px;
  width: 100%;
  margin: 32px 0;
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.12) 50.39%, rgba(255, 255, 255, 0.024) 100%);
}

.ql-snow .ql-editor blockquote {
  color: #9f9fa0;
  border-left: 2px solid hsla(0, 0%, 100%, 0.2);
  padding: 16px 32px;
}

.ql-snow img {
  overflow: hidden;
  border-radius: 12px;
}

.ql-snow a {
  color: #60A5FA !important;
}

@media (min-width: 768px) {
  .ql-snow img {
    border-radius: 16px;
  }
}
.ql-container.ql-snow {
  border: none;
}

.ql-toolbar.ql-snow {
  border: none;
}

.summaries-form__title {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -1px;
  border: none;
  resize: none;
  height: auto;
  caret-color: #e4e4e7;
}

.summaries-form__description {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -1px;
  border: none;
  resize: none;
  height: auto;
  caret-color: #e4e4e7;
}

.summaries-form__editor-container {
  position: relative;
  margin-bottom: 24px;
}

.summaries-form__section-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.summaries-form__section-rename {
  color: #0A84FF;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  opacity: 85%;
}
.summaries-form__section-rename:hover {
  opacity: 100%;
}

.summaries-form__section-delete {
  color: #FF453A;
  opacity: 85%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.summaries-form__section-delete:hover {
  opacity: 100%;
}

.summaries-form__section-tab {
  background: none;
  border: 1px solid #E4E4E7;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  color: #71717A;
  transition: all 0.2s ease;
}
.summaries-form__section-tab:hover {
  background: #F4F4F5;
}
.summaries-form__section-tab.active {
  background: #F4F4F5;
  border-color: #A1A1AA;
  color: #18181B;
}

#summaries-form__section-tabs-new {
  background: none;
  border: 1px dashed #A1A1AA;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  color: #71717A;
  transition: all 0.2s ease;
}
#summaries-form__section-tabs-new:hover {
  background: #F4F4F5;
}

.summary-editor {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.summary-editor__info, .summary-editor__sections {
  background: #18181B;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.summary-editor__info {
  padding: 24px;
}
.summary-editor__metadata {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.summary-editor__category {
  color: #FFF;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
}
.summary-editor__date {
  color: #71717A;
  font-size: 14px;
}
.summary-editor__description {
  color: #FFF;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
}
.summary-editor__sections {
  padding: 24px;
}
.summary-editor__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.summary-editor__section-header h3 {
  color: #FFF;
  font-size: 18px;
  font-weight: 500;
}
.summary-editor__button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #0A84FF;
  border-radius: 6px;
  color: #FFF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.summary-editor__button:hover {
  opacity: 0.9;
}
.summary-editor__sections-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.summary-editor__section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background 0.2s;
}
.summary-editor__section-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.summary-editor__section-drag-handle {
  color: #71717A;
  cursor: grab;
  font-size: 18px;
  user-select: none;
}
.summary-editor__section-drag-handle:active {
  cursor: grabbing;
}
.summary-editor__section-name {
  flex: 1;
  color: #FFF;
  font-size: 14px;
}
.summary-editor__section-edit {
  color: #71717A;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  background: transparent;
}
.summary-editor__section-edit svg {
  width: 16px;
  height: 16px;
}
.summary-editor__section-edit:hover {
  color: #0A84FF;
  background: rgba(255, 255, 255, 0.05);
}
.summary-editor__empty-state {
  text-align: center;
  padding: 48px 24px;
  color: #71717A;
  font-size: 14px;
}

.admin-research {
  max-width: 608px;
  margin: 0 auto;
}

.admin-resources-new__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.admin-resources-new__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  transition: background 0.2s;
}
.admin-resources-new__back:hover {
  background: rgba(255, 255, 255, 0.1);
}
.admin-resources-new__title {
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  color: #FFF;
}
.admin-resources-new__button {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 56px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), #fff;
  color: #0f0f11;
  font-family: "Open Runde";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.admin-resources-new__button--secondary {
  background: rgba(255, 69, 58, 0.1);
  color: #FF453A;
  border: 1px solid rgba(255, 69, 58, 0.2);
}
.admin-resources-new__button--secondary:hover {
  background: rgba(255, 69, 58, 0.15);
  border-color: rgba(255, 69, 58, 0.3);
}

.ql-editor .ql-indent-1 {
  padding-left: 48px !important;
}
.ql-editor .ql-indent-2 {
  padding-left: 72px !important;
}
.ql-editor .ql-indent-3 {
  padding-left: 96px !important;
}
.ql-editor .ql-indent-4 {
  padding-left: 120px !important;
}
.ql-editor .ql-indent-5 {
  padding-left: 144px !important;
}
.ql-editor .ql-indent-6 {
  padding-left: 168px !important;
}
.ql-editor .ql-indent-7 {
  padding-left: 192px !important;
}
.ql-editor .ql-indent-8 {
  padding-left: 216px !important;
}
.ql-editor .ql-indent-9 {
  padding-left: 240px !important;
}
.ql-editor ol, .ql-editor ul {
  padding-left: 0;
}
.ql-editor .ql-custom-block-container {
  width: 100%;
  border-radius: 12px;
  background: rgb(37, 37, 37);
  padding: 16px;
  margin-bottom: 20px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 16px;
  border: 1px solid #333336;
  background: radial-gradient(78.04% 50.03% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.04);
}
.ql-editor .ql-custom-block {
  font-weight: 600;
  color: white;
}

.ql-snow .ql-editor blockquote {
  padding-left: 16px;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 600;
  border-left: 3px solid hsla(0, 0%, 100%, 0.2);
  margin-top: 0;
  margin-bottom: 16px;
  white-space: normal;
}

table.quill-better-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
  background: #18181a;
  border: 1px solid #2c2c2e;
}

table.quill-better-table td {
  border-top: none;
  border-left: none;
  border-right: 1px solid #2c2c2e;
  border-bottom: 1px solid #2c2c2e;
  padding: 16px;
  color: #9f9fa0;
}

/* Remove last column's right border */
table.quill-better-table td:last-child {
  border-right: none;
}

/* Remove last row's bottom border */
table.quill-better-table tr:last-child td {
  border-bottom: none;
}

/* First row cells text style */
table.quill-better-table tr:first-child td,
table.quill-better-table tr:first-child td div {
  color: white;
  font-weight: 500;
}

/* First column cells text style */
table.quill-better-table td:first-child,
table.quill-better-table td:first-child div {
  color: white;
  font-weight: 500;
}

.tagify_input::before {
  color: white;
}

.tagify__input:focus:empty::before {
  color: white;
}

.tagify--empty .tagify__input::before {
  color: white;
}

.flash-message {
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  animation: flash-fade-in 0.3s ease;
}

.flash-message--notice {
  background: rgba(52, 199, 89, 0.1);
  border: 1px solid rgba(52, 199, 89, 0.2);
  color: #34C759;
}

.flash-message--alert {
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  color: #FF3B30;
}

.form-errors {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  animation: flash-fade-in 0.3s ease;
}

.form-errors__title {
  color: #FF3B30;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.form-errors__list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgba(255, 59, 48, 0.9);
  font-size: 14px;
}

.form-errors__item {
  margin-bottom: 8px;
}
.form-errors__item:last-child {
  margin-bottom: 0;
}

@keyframes flash-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.black_button {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
  transition-duration: 0.4s;
}

.black_button:hover {
  background: radial-gradient(49.38% 49.38% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), rgba(255, 255, 255, 0.15) !important;
  transition-duration: 0.4s;
  cursor: pointer;
}

.max-400 {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  grid-column: 1/-1;
  padding: 0;
}
@media (min-width: 64em) {
  .max-400 {
    padding: 0 20px;
  }
}

.max-600 {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  grid-column: 1/-1;
  padding: 0;
}
@media (min-width: 64em) {
  .max-600 {
    padding: 0 20px;
  }
}

html {
  scroll-padding-top: 75px;
}

.medium-zoom-image {
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

.hammer-zoom-overlay {
  z-index: 1000;
}

.hammer-zoom-container {
  z-index: 1001;
}

.hammer-zoomed-image {
  cursor: zoom-out;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  max-height: 100%;
}

.hammer-zoom-close:hover, .hammer-zoom-close:focus {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
  outline: none;
}
.hammer-zoom-close:active {
  transform: scale(0.95);
}

.medium-zoom-overlay {
  z-index: 1000;
}

.medium-zoom-image--opened {
  z-index: 1001;
  cursor: zoom-out;
  border-radius: 16px;
}

textarea,
input {
  caret-color: white;
}

textarea:focus::placeholder,
input:focus::placeholder {
  opacity: 0;
}

/*# sourceMappingURL=application_compiled.css.map */