:root {
  /* ------ COLOR ------ */

  /* --- Background-color --- */
  --BG-black-color: #0d0d0d;
  --BG-gray-color: #181818;

  /* --- Text Color --- */
  --White-color: #ffffff;
  --Gray-color: #d9d9d9;

  /* --- Brand-color --- */
  --L-Accent-color: #a9f203;
  --M-Accent-color: #97d906;
  --D-Accent-color: #74a605;

  /* --- Status-color --- */
  ----add-color: #28c7a2;
  --Platinum-add-color: #060607;
  --Gold-add-color: #d5a715;
  --Bronze-add-color: #ab441b;
  --Silver-add-color: #73859e;

  /* --- Add-color --- */
  --Red-add-color: #f52b35;
  --Green-add-color: #00c950;

  /* --- Gradient-color --- */
  --G-Bronze-rank: linear-gradient(
    45deg,
    var(--BG-black-color) 0%,
    #5c2814 50%,
    var(--Bronze-add-color) 100%
  );
  --G-Silver-rank: linear-gradient(
    45deg,
    var(--BG-black-color) 0%,
    #404956 50%,
    var(--Silver-add-color) 100%
  );
  --G-Gold-rank: linear-gradient(
    45deg,
    var(--BG-black-color) 0%,
    #715a11 50%,
    var(--Gold-add-color) 100%
  );
  --G-Platinum-rank: linear-gradient(
    45deg,
    var(--BG-black-color) 0%,
    #1a3258 50%,
    var(--Platinum-add-color) 100%
  );
  --G-Vip-rank: linear-gradient(
    45deg,
    var(--BG-black-color) 0%,
    #1b6a58 50%,
    var(--Vip-add-color) 100%
  );

  /* ------ Font ------ */

  --font-family-H: "Orbitron", sans-serif;
  --font-family-B: "Rajdhani", sans-serif;

  --font-bold: 700;
  --font-seimBold: 600;
  --font-medium: 500;
  --font-regular: 400;
  --font-light: 300;

  /* ------ TEXT ------ */

  /* --- Text-Headline-size --- */
  --text-headline: 48px;
  --text-subheading: 36px;
  --text-label: 28px;
  --text-descryption: 18px;

  /* --- Text-Body-size --- */
  --text-body: 18px;
  --text-smail: 14px;
  --text-ultra-desc: 12px;

  /* ------ Padding, Margin, Border and Other ------ */

  /* --- Padding-size  --- */
  --Padding-xl: 32px;
  --Padding-lg: 24px;
  --Padding-md: 16px;
  --Padding-sm: 12px;
  --Padding-xs: 8px;
  --Padding-none: 0px;

  /* --- Margin-size  --- */
  --Margin-xl: 48px;
  --Margin-lg: 32px;
  --Margin-md: 24px;
  --Margin-sm: 16px;
  --Margin-xs: 12px;
  --Margin-none: 0px;

  /* --- Border-size  --- */
  --Border-xl: 16px;
  --Border-lg: 8px;
  --Border-md: 6px;
  --Border-sm: 4px;
  --Border-xs: 2px;
  --Border-none: 0px;

  /* --- Neon-Effect  --- */
  --glow-soft: 0px 0px 10px 0px rgba(167, 242, 5, 0.3);
  --glow-medium: 0px 0px 20px 0px rgba(167, 242, 5, 0.5);
  --glow-strong: 0px 0px 30px 0px rgba(167, 242, 5, 0.7);
  --glow-interface: 0px 0px 40px 0px rgba(167, 242, 5, 0.8),
    0px 0px 60px 0px rgba(167, 242, 5, 0.4);

  --shadow-m-black: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
  --shadow-m-green: 0px 0px 20px 0px rgba(167, 242, 5, 0.3);
  --shadow-s-green: 0px 0px 10px 0px rgba(167, 242, 5, 0.3);
  --shadow-s-red: 0px 0px 10px 0px rgba(245, 43, 53, 0.3);

  /* --- Blure-Effect  --- */
  --blure-light: 8px;
  --blure-medium: 12px;
  --blure-heavy: 20px;
  --blure-extreme: 40px;
}
* {
  margin: var(--Margin-none);
  padding: var(--Padding-none);
  box-sizing: border-box;
  text-decoration: none;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: var(--BG-gray-color);
  color: var(--Gray-color);
  font-family: var(--font-family-B);
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--Padding-md) var(--Padding-sm);
  justify-content: space-between;
}
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: scroll;
}

/* --- SCROL AND OTHER EFFECT --- */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #97d906 #0d0d0d;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}

*::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: #0d0d0d;
}

*::-webkit-scrollbar-track:hover {
  background-color: #181818;
}

*::-webkit-scrollbar-track:active {
  background-color: #181818;
}

*::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #97d906;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #97d906;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #74a605;
}

/* CHECKBOX */
.flipswitch {
  position: relative;
  width: 60px;
  user-select: none;
}
.flipswitch input[type="checkbox"] {
  display: none;
}
.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--L-Accent-color);
  border-radius: 8px;
}
.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before,
.flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 28px;
  padding: 0;
  color: var(--White-color);
  font-family: var(--font-family-B);
  font-weight: var(--font-regular);
  font-size: var(--text-ultra-desc);
  line-height: 28px;
  box-sizing: border-box;
}
.flipswitch-inner:before {
  content: "ON";
  padding-left: var(--Padding-xs);
  background-color: var(--BG-black-color);
  color: var(--L-Accent-color);
}
.flipswitch-inner:after {
  content: "OFF";
  padding-right: var(--Padding-xs);
  background-color: var(--BG-black-color);
  color: var(--Gray-color);
  text-align: right;
}
.flipswitch-switch {
  width: 16px;
  margin: 6px;
  background: #a9f203;
  border: 2px solid #a9f203;
  border-radius: var(--Border-lg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 28px;
  transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

/* --- Range Input */
input[type="range"] {
  position: absolute;
  height: 26px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background-color: transparent;
  border: none;
  padding: var(--Padding-none);
}
input[type="range"]:focus {
  outline: none;
}
/* Track Styles */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 1px #0d0d0d;
  background: #0d0d0d;
  border-radius: 8px;
  border: 2px solid #97d906;
}
/* Thumb Styles */
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #74a605;
  border: 2px solid #a9f203;
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background: #97d906;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #0d0d0d;
}
/* Firefox Styles */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  box-shadow: 0px 0px 1px #0d0d0d;
  background: #0d0d0d;
  border-radius: 8px;
  border: 2px solid #97d906;
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #74a605;
  border: 2px solid #a9f203;
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background: #97d906;
  cursor: pointer;
}
/* MS Styles */
input[type="range"]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: #0d0d0d;
  border: 2px solid #97d906;
  border-radius: 16px;
  box-shadow: 0px 0px 1px #0d0d0d;
}
input[type="range"]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 1px #74a605;
  border: 2px solid #a9f203;
  height: 18px;
  width: 18px;
  border-radius: 12px;
  background: #97d906;
  cursor: pointer;
}

/* RANK */
.rank-bronze,
.rank-silver,
.rank-gold,
.rank-platinum,
.rank-vip {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.rank-bronze {
  background-color: var(--G-Bronze-rank);
  background-image: url("/static/images/ranks/bronze.png");
}

.rank-silver {
  background-color: var(--G-Silver-rank);
  background-image: url("/static/images/ranks/silver.png");
}

.rank-gold {
  background-color: var(--G-Gold-rank);
  background-image: url("/static/images/ranks/gold.png");
}

.rank-platinum {
  background-color: var(--G-Platinum-rank);
  background-image: url("/static/images/ranks/platinum.png");
}

.rank-vip {
  background-color: var(--G-Vip-rank);
  background-image: url("/static/images/ranks/vip.png");
}

/* TABS */
.tabs-pill {
  display: flex;
  gap: 8px;
  padding: var(--Padding-xs);
  border-radius: var(--Border-lg);
  background-color: rgba(13, 13, 13, 0.6);
  justify-content: center;
  align-items: center;
}
.tab-btn {
  flex: 1;
  text-transform: capitalize;
  gap: 4px;
  padding: var(--Padding-xs) var(--Padding-md);
  border-radius: var(--Border-lg);
  background: transparent;
  color: var(--White-color);
  cursor: pointer;
  transition: 0.2s;
  text-wrap: nowrap;
}
.tasks-page > .tabs-pill {
  min-height: 48px;
  display: flex;
  gap: 8px;
  padding: var(--Padding-xs);
  border-radius: var(--Border-md);
  background-color: rgba(13, 13, 13, 0.6);

  overflow-x: auto;
  overflow-y: hidden;

  justify-content: flex-start;
  align-items: center;
  scrollbar-width: none;
}
.tasks-page > .tabs-pill::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.tasks-page > .tabs-pill > .tab-btn {
  flex: 0 0 auto;
  min-width: 120px;
  height: 39px;

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

  padding: 0 var(--Padding-md);
  border-radius: var(--Border-lg);

  background: transparent;
  color: var(--White-color);
  cursor: pointer;

  white-space: nowrap;
  line-height: 1;
}
.tab-btn.active,
.tasks-page > .tabs-pill > .tab-btn.active {
  background: var(--M-Accent-color);
  color: var(--BG-black-color);
  font-weight: var(--font-bold);
  border-radius: var(--Border-lg);
  box-shadow: var(--shadow-s-green);
}
.task-completed {
  opacity: 0.6;
}
/* CARDS */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  padding: var(--Padding-xs);
}
.icon-box > img {
  width: 100%;
  height: 100%;
}
.btn-go {
  background: var(--lime);
  color: #000;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 12px;
  box-shadow: 0 0 15px rgba(163, 230, 53, 0.3);
}

h1,
.headline-text {
  font-family: var(--font-family-H);
  font-size: var(--text-headline);
  font-weight: var(--font-bold);
  letter-spacing: -2px;
}
h2,
.subheadline-text {
  font-family: var(--font-family-H);
  font-size: var(--text-subheading);
  font-weight: var(--font-seimBold);
  letter-spacing: -1%;
}
h3,
.displayMo-text {
  font-family: var(--font-family-H);
  font-size: var(--text-label);
  font-weight: var(--font-seimBold);
  letter-spacing: -0.5%;
}
h4,
.descrypt-text {
  font-family: var(--font-family-H);
  font-size: var(--text-descryption);
  font-weight: var(--font-regular);
  letter-spacing: auto;
}
.body-text {
  font-family: var(--font-family-B);
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  letter-spacing: auto;
}
.smail-text {
  font-family: var(--font-family-B);
  font-size: var(--text-smail);
  font-weight: var(--font-regular);
  letter-spacing: auto;
}
.ultra-desc {
  font-family: var(--font-family-B);
  font-size: var(--text-ultra-desc);
  font-weight: var(--font-light);
  letter-spacing: 2%;
}

button,
.btn {
  display: flex;
  width: fit-content;
  height: fit-content;

  font-family: var(--font-family-H);
  color: var(--White-color);
  background-color: transparent;
  border: none;
  border-radius: var(--Border-sm);
  padding: var(--Padding-xs) var(--Padding-md);

  justify-content: center;
  align-content: center;

  cursor: pointer;
}
.button:disabled {
  box-shadow: var(--btn-shadow-disabled);
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-line {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-link {
  display: flex;
  width: 100%;
  gap: 8px;
  padding: var(--Padding-xs) var(--Padding-md);
  border-radius: var(--Border-lg);
  background-color: var(--BG-black-color);
  justify-content: space-between;
  align-items: center;
}

.btn-black {
  background-color: rgba(13, 13, 13, 0.6);
  box-shadow: var(--shadow-m-black);
  transition: box-shadow 0.35s ease-in-out;
}
.btn-gray {
  background-color: rgba(24, 24, 24, 0.6);
  box-shadow: var(--shadow-m-black);
  transition: box-shadow 0.35s ease-in-out;
}
.btn-green {
  background-color: var(--D-Accent-color);
  box-shadow: var(--glow-soft);
  transition: box-shadow 0.35s ease-in-out;
}
.btn-black:hover,
.btn-black:focus-visible,
.btn-black:active:not(:disabled),
.btn-gray:hover,
.btn-gray:focus-visible,
.btn-gray:active:not(:disabled),
.btn-green:hover,
.btn-green:focus-visible,
.btn-green:active:not(:disabled),
.btn-link:hover,
.btn-link:focus-visible,
.btn-link:active:not(:disabled) {
  box-shadow: var(--glow-soft);
}

/* HEADER */
.header {
  height: fit-content;
  display: flex;
  gap: 8px;
  padding: var(--Padding-xs);
  border-radius: var(--Border-lg);

  justify-content: space-between;
  align-items: center;
}
.titlebar {
  background: none !important;
}
.header-title {
  display: flex;
  gap: 8px;
  padding: var(--Padding-xs);
  justify-content: space-between;
  align-items: center;
}
.user-pill {
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  align-items: center;
}
.user-avatar,
.podium-avatar {
  position: relative;
  width: 60px;
  height: 60px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  display: flex;
  align-items: center;
  justify-content: center;
}
.user-avatar .avatar {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  z-index: 1;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-name {
  text-wrap: nowrap;
  font-family: var(--font-family-H);
  font-weight: var(--font-regular);
  font-size: var(--text-ultra-desc);
}
.progres-bar-container {
  width: 99%;
  height: 4px;
  display: flex;
  gap: 8px;
  padding: 1px;
  border-radius: var(--Border-lg);
  background-color: rgba(13, 13, 13, 0.2);
  align-items: center;
  justify-content: flex-start;
}
.progres-bar-container > .progress-bar {
  width: 100%;
  height: 100%;
  background-color: var(--M-Accent-color);
  border-radius: var(--Border-lg);
}

.user-rank {
  display: flex;
  flex-direction: row;
  color: var(--Gray-color);

  font-family: var(--font-family-B);
  font-weight: var(--font-light);
  font-size: var(--text-ultra-desc);
  letter-spacing: 2px;

  justify-content: flex-start;
  align-items: center;
}
.user-progress-xp {
  height: 2px;
  width: 100%;
  background: var(--lime);
  border-radius: 2px;
}

.logotype-box {
  width: auto;
  height: fit-content;
  display: flex;
  padding: var(--Padding-xs);
  justify-content: center;
  align-items: center;
}
.logotype-box > img {
  max-height: 18px;
  width: 100%;
  height: 100%;
}

.headeer-user-btn {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.icon-btn {
  width: fit-content;
  height: 24px;
  display: flex;
  gap: 4px;
  padding: var(--Padding-xs) / 2;
  border-radius: var(--Border-sm);
  color: var(--White-color);
  background-color: rgba(13, 13, 13, 0.9);
  justify-content: center;
  align-items: center;
}
.icon-btn > span {
  font-family: var(--font-family-B);
  color: var(--Gray-color);
  font-size: var(--text-ultra-desc);
  font-weight: var(--font-light);
}
.icon-btn > img {
  width: 100%;
  height: 100%;
}

/* NAV */
.nav {
  height: fit-content;
  display: flex;
  gap: var(--Padding-sm);
  padding: 0px;
  align-items: center;
  justify-content: space-between;
}
.nav-btn {
  min-width: fit-content;
  width: 100%;
  height: fit-content;

  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--Padding-xs);

  color: var(--White-color);
  background-color: rgba(13, 13, 13, 0.6);
  border-radius: var(--Border-sm);

  align-items: center;
  justify-content: center;

  box-shadow: var(--shadow-m-black);
  cursor: pointer;
  transition: box-shadow 0.35s ease-in-out;
}
.nav-btn:hover,
.nav-btn:focus-visible,
.nav-btn:active:not(:disabled) {
  box-shadow: var(--glow-soft);
  .nav-icon {
    fill: var(--L-Accent-color);
  }
}
.nav-btn.active {
  color: var(--L-Accent-color);
  box-shadow: var(--glow-soft);
  transform: translateY(-2px);
  .nav-icon {
    fill: var(--L-Accent-color);
  }
}

.nav-btn span {
  font-family: var(--font-family-B);
  font-size: var(--text-ultra-desc);
  font-weight: var(--font-light);
  letter-spacing: 2px;
  color: var(--White-color);
}
.nav-icon {
  width: 24px;
  height: 24px;
  padding: 2px;
  fill: var(--Gray-color);
}

/* FARM */
.farm-page,
.profile-page,
.tasks-page,
.tap-page,
.trade-page,
.admin-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: scroll;
  /* padding: var(--Padding-xs); */
}

.zone-tap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0px var(--Padding-xl);
  justify-content: center;
  align-items: center;
}

/* CSS COIN TAP */
.float-number {
  position: absolute;
  font-size: var(--text-subheading);
  font-weight: var(--font-seimBold);
  pointer-events: none;
  animation: floatUp 0.8s ease forwards;
  user-select: none;
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  animation: particleMove 0.8s ease forwards;
  user-select: none;
}

.click-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #a9f203;
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.6s ease forwards;
  user-select: none;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}

@keyframes particleMove {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty));
  }
}

@keyframes ripple {
  0% {
    opacity: 0.7;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(5);
  }
}
/* DELTA TAP BALANCE */
.balance-delta {
  z-index: 10;
  position: absolute;
  top: -10px;
  left: 10%;
  color: #0f0;
  font-weight: bold;
  animation: floatUp 1s forwards;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@keyframes floatDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Farm Balance */
.coin-balance {
  position: relative;
  height: fit-content;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.coin-balance-count {
  font-family: var(--font-family-H);
  font-weight: var(--font-seimBold);
  font-size: var(--text-label);
  letter-spacing: -0.5px;
}
.coin-balance > .coin-name {
  width: auto;
  height: 100%;
  padding: var(--Padding-sm);
}

.coin-container {
  width: 290px;
  height: 290px;
  position: relative;
  display: flex;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    var(--BG-gray-color) 0%,
    var(--D-Accent-color) 80%
  );
  box-shadow: var(--glow-strong);

  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Важный фикс для мобилок */
  -webkit-tap-highlight-color: transparent;
}

.coin-inner {
  position: absolute;
  inset: 0px;

  display: flex;

  background-image: url(/static/images/coin_lime.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  border-radius: 50%;
  border: 0.5px solid rgba(163, 230, 53, 0.3);

  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.zone-info {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.zone-info > .progres-bar-container {
  height: 8px;
}
.zone-info > .progres-bar-container > .progress-bar {
  transition: width 0.35s ease-out;
}
.zone-info > #booster-btn-modal {
  gap: 2px;
  padding: var(--Padding-md) var(--Padding-xs);
  border-radius: var(--Border-sm);
  font-family: var(--font-family-B);
  align-items: center;
}
.zone-info > #booster-btn-modal > .btn-icon {
  width: 24px;
  height: 24px;
  padding: 2px;
}
.zone-info > #booster-btn-modal > .btn-title {
  font-size: var(--text-ultra-desc);
  font-weight: var(--font-light);
  text-decoration: underline;
  letter-spacing: 2px;
}
.energy-bar-wrap {
  width: 100%;
  display: flex;
  gap: 4px;
  /* padding: var(--Padding-xs); */
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family-B);
  font-size: var(--text-smail);
  color: var(--Gray-color);
}
.energy-bar-wrap > #booster-btn-modal {
  padding: 0px;
}
.energy-bar-wrap > .energy-info {
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
}
.farm-page {
  justify-content: space-around;
}
.farm-page > .progres-bar-container {
  height: 8px;
  overflow: hidden;
}
.farm-page > .progres-bar-container > .progress-bar {
  height: 100%;
  background: var(--M-Accent-color);
  border-radius: var(--Border-sm);
  box-shadow: var(--glow-soft);
  transition: width 0.1s;
}

/* PROFILE */

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--Padding-md);
  border-radius: var(--Border-lg);

  border-radius: 24px;
}
.profile-card > .user-info-line {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.profile-card > .user-info-line {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.profile-card > .user-info-line > .user-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.profile-card > .user-info-line > .user-world-rank {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--Padding-xs);
  border-radius: var(--Border-sm);
  text-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
#num-world-rank {
  font-family: var(--font-family-H);
  font-weight: var(--font-seimBold);
  font-size: var(--text-body);
  letter-spacing: -0.5px;
}

.profile-page
  > .profile-card
  > .profile-user-progress
  > .progres-bar-container {
  height: 8px;
  overflow: hidden;
}
.profile-page
  > .profile-card
  > .profile-user-progress
  > .progres-bar-container
  > .progress-bar {
  height: 100%;
  background: var(--M-Accent-color);
  border-radius: var(--Border-sm);
  box-shadow: var(--glow-soft);
  transition: width 0.1s;
}
.profile-user-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 8px;
  justify-items: stretch;
  align-items: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--Padding-xs);
  border-radius: var(--Border-sm);
  background: rgba(13, 13, 13, 0.2);
  text-align: center;
}
.stat-val {
  font-family: var(--font-family-H);
  font-weight: var(--font-seimBold);
  font-size: var(--text-body);
  letter-spacing: -0.5px;
  color: var(--White-color);
}
.btn-link > .btn-link-title {
  display: flex;
  gap: 4px;
  text-wrap: nowrap;
}
.profile-page > .btn-link > .btn-link-title {
  display: flex;
  gap: 4px;
}

/* .tasks-page {
} */
.tasks-page > .task-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--Padding-xs) var(--Padding-md);
  border: var(--Border-lg);
  background-color: var(--BG-black-color);
  color: var(--White-color);
  justify-content: flex-start;
  align-items: center;
}
.task-box > .progres-bar-container {
  height: 8px;
}
.task-box-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.task-box-title > .btn-icon {
  width: 50px;
  height: 50px;
  padding: var(--Padding-xs);
  background-color: var(--BG-gray-color);
  border-radius: var(--Border-xl);
}
.task-box-descryption {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TOP */
.leadboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
}
.podium-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--Padding-xs);
  padding: var(--Padding-xs);
  border-radius: var(--Border-lg);

  text-align: center;
  border-radius: 12px;
  padding: 10px;

  align-items: center;
  justify-content: flex-end;
}
.rank-1 {
  order: 2;
  height: fit-content;
  background: var(--G-Gold-rank);
  border-color: var(--Gold-add-color);
  transform: translateY(-10px);
  box-shadow: 0 0 25px rgba(213, 167, 21, 0.15);
}
.rank-2 {
  order: 1;
  height: fit-content;
  background: var(--G-Silver-rank);
  border-color: var(--Silver-add-color);
}
.rank-3 {
  order: 3;
  height: fit-content;
  background: var(--G-Bronze-rank);
  border-color: var(--Bronze-add-color);
}
.rank-1 > .podium-avatar {
  width: 70px;
  height: 70px;
}
.rank-2 > .podium-avatar {
  width: 58px;
  height: 58px;
}
.rank-3 > .podium-avatar {
  width: 48px;
  height: 48px;
}

.top-page > .top-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.top-page > .top-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.top-box {
  width: 100%;
  display: flex;
  gap: 16px;
  padding: var(--Padding-xs) var(--Padding-md);
  border: var(--Border-lg);
  background-color: var(--BG-black-color);
  color: var(--White-color);
  align-items: center;
  justify-content: space-between;
}
.top-box > .progres-bar-container {
  height: 8px;
}
.top-box > .top-line-row > .user-info,
.top-box > .top-line-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.top-box-title {
  width: 100%;
  display: flex;
  gap: 16px;
}
.top-box-title > .btn-icon {
  width: 50px;
  height: auto;
  padding: var(--Padding-xs);
  background-color: var(--BG-gray-color);
  border-radius: var(--Border-xl);
}
.top-box-descryption {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leadboard > .top-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leadboard > .top-rank-line {
  width: 100%;
  display: flex;
  gap: 16px;
  padding: var(--Padding-md);
  border-radius: var(--Border-lg);
  justify-content: space-between;
  align-items: center;
}
.leadboard > .top-rank-line > .top-rank-name,
.leadboard > .top-rank-line > .top-rank-position {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leadboard > .top-rank-line > .top-rank-position {
  text-align: center;
}

/* TRADING */
.trade-candles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chart-container {
  height: 250px;
  padding: var(--Padding-xs) var(--Padding-sm);
  gap: 12px;
  border-radius: var(--Border-lg);
  background: var(--BG-black-color);
}
.trade-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.btn-trade {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: var(--Padding-xs) var(--Padding-md);
  border-radius: var(--Border-lg);
  font-family: var(--font-family-H);
  font-size: var(--text-body);
  font-weight: var(--font-seimBold);
  text-align: center;
  letter-spacing: -0.5px;
  color: var(--White-color);
  justify-content: center;
  align-items: center;
  border: 0.5px solid;
  transition: 0.4 ease-in-out;
  box-shadow: transparent;
}
.btn-put {
  background-color: var(--Red-add-color);
  border-color: var(--Red-add-color);
  box-shadow: var(--shadow-s-red);
}
.btn-call {
  background-color: var(--Green-add-color);
  border-color: var(--Green-add-color);
  box-shadow: var(--shadow-s-green);
}
.btn-put,
.icon-box-put {
  background-color: rgba(245, 43, 53, 0.5);
  border-color: var(--Red-add-color);
  box-shadow: var(--shadow-s-red);
}
.btn-call,
.icon-box-call {
  background-color: rgba(0, 201, 80, 0.5);
  border-color: var(--Green-add-color);
  box-shadow: var(--shadow-s-green);
}
.trade-limit-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--White-color);
}
.trade-limit-zone > .limit-progress-now {
  font-family: var(--font-family-H);
  font-size: var(--text-body);
  font-weight: var(--font-seimBold);
  letter-spacing: -0.5px;
}
.trade-limit-zone > #trade-limir-bar {
  height: 8px;
}
.trade-limit-zone > .trade-limit-info-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.trade-open {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trade-open > .trade-line {
  display: flex;
  gap: 16px;
  padding: var(--Padding-xs) var(--Padding-md);
  border-radius: var(--Border-lg);
  background-color: var(--BG-black-color);
  justify-content: space-between;
  align-items: center;
}

.trade-open > .trade-line > .trade-line-info {
  width: 100%;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

.trade-open > .trade-line > .trade-line-info > .icon-box {
  width: 50px;
  height: 50px;
  display: flex;
  padding: var(--Padding-xs);
  border-radius: var(--Border-xl);
  justify-content: center;
  align-items: center;
  border: 0.5px solid;
  border: none;
  box-shadow: transparent;
  transition: 0.4 ease-in;
}
#trade-limit-bar {
  position: relative;
  height: 6px;
}
#trade-limit-bar > input {
  border: none;
}

.tv-lightweight-charts {
  width: 100% !important;
  height: 100% !important;
}
.tv-lightweight-charts > table,
.tv-lightweight-charts > table > tr > td > div > canvas {
  width: 100% !important;
  height: 100% !important;
}
/* --- FORM */
.form-group {
  position: relative;
}
input {
  font-size: var(--text-smail);
  padding: var(--Padding-xs);
  width: 100%;
  outline: none;
  background: var(--BG-gray-color);
  color: var(--White-color);
  border: 0.5px solid var(--Gray-color);
  border-radius: var(--Border-lg);
  transition: 0.3s ease;
}

input:focus {
  background: var(--BG-gray-color);
  border: 0.5px solid var(--L-Accent-color);
  border-radius: var(--Border-lg);
}

input::placeholder {
  color: var(--Gray-color);
}
.custom-select {
  position: relative;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-size: 18px;
  padding: 8px 8px;
  background-color: #181818;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: #d9d9d9 !important;
  cursor: pointer;
  outline: none;
}

.form-select:focus {
  background: #181818;
  border: 1px solid #74a605;
  border-radius: 8px;
}
.form-select > option {
  font-size: 12px;
}

.custom-select::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 62%;
  right: 8px;
  transform: translate(0, -50%);
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  clip-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%);
}