@font-face {
  font-family: Jakarta;
  src: url('/assets/fonts/jakarta-400.ae468f8e8324.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Jakarta;
  src: url('/assets/fonts/jakarta-500.bee127b69605.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Jakarta;
  src: url('/assets/fonts/jakarta-600.41796a3df68f.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Jakarta;
  src: url('/assets/fonts/jakarta-700.a78ece4c1aa4.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Jakarta;
  src: url('/assets/fonts/jakarta-800.55d694753e07.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #050a14;
  --panel: #091222;
  --text: #f5f5ff;
  --muted: #a6b4d4;
  --cyan: #00d5fc;
  --purple: #ab33fa;
  --green: #00e4ad;
  --gold: #ffd04c;
  --border: #28334e;
  --gradient: linear-gradient(105deg, #b820f6 0%, #6030ff 42%, #00d9ec 100%);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #02050d;
  color: var(--text);
  font:
    calc(14px * var(--ui-scale, 1)) / 1.45 Jakarta,
    'Segoe UI',
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, #25134a55, transparent 48%),
    radial-gradient(ellipse at 80% 75%, #032e4944, transparent 50%);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.4;
  filter: saturate(0.3);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid var(--cyan);
  outline-offset: calc(3px * var(--ui-scale, 1));
}
button:active:not(:disabled) {
  transform: translateY(calc(1px * var(--ui-scale, 1)));
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: calc(28px * var(--ui-scale, 1));
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: calc(-0.7px * var(--ui-scale, 1));
}
h2 {
  font-size: calc(17px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: calc(-0.3px * var(--ui-scale, 1));
}
h3 {
  font-size: calc(14px * var(--ui-scale, 1));
  font-weight: 800;
}
small,
.small {
  font-size: calc(11px * var(--ui-scale, 1));
}
.muted {
  color: var(--muted);
}
.cyan {
  color: var(--cyan);
}
.purple {
  color: #ce7dff;
}
.green {
  color: var(--green);
}
.gold {
  color: var(--gold);
}
.red {
  color: #ff6187;
}
.bold {
  font-weight: 800;
}
.mono {
  font-variant-numeric: tabular-nums;
}
.nowrap {
  white-space: nowrap;
}
.spacer {
  flex: 1;
}
.icon {
  width: calc(23px * var(--ui-scale, 1));
  height: calc(23px * var(--ui-scale, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon.small {
  width: calc(17px * var(--ui-scale, 1));
  height: calc(17px * var(--ui-scale, 1));
}
.row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
}
.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
}
.stack {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale, 1));
}
.app {
  position: relative;
  max-width: 470px;
  min-height: 100dvh;
  margin: auto;
  background: linear-gradient(#050c18 0, #040914 100%);
  overflow: hidden;
  box-shadow: 0 0 calc(100px * var(--ui-scale, 1)) #0008;
}
.device-status {
  height: calc(26px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 800;
}
.device-status .icon {
  width: calc(13px * var(--ui-scale, 1));
  height: calc(13px * var(--ui-scale, 1));
}
.topbar {
  height: calc(52px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  padding: calc(6px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  gap: calc(10px * var(--ui-scale, 1));
  position: relative;
  z-index: 3;
}
.brand {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
  border: 0;
  padding: 0;
  background: none;
}
.brand img {
  height: calc(32px * var(--ui-scale, 1));
  width: calc(34px * var(--ui-scale, 1));
  object-fit: contain;
}
.brand b {
  font-size: calc(20px * var(--ui-scale, 1));
  letter-spacing: calc(-0.5px * var(--ui-scale, 1));
}
.mini-tag {
  border: calc(1px * var(--ui-scale, 1)) solid #07517a;
  border-radius: calc(11px * var(--ui-scale, 1));
  background: #06213955;
  padding: calc(4px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  color: #b0c5e6;
  font-size: calc(10px * var(--ui-scale, 1));
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
}
.mini-tag .icon {
  width: calc(13px * var(--ui-scale, 1));
  height: calc(13px * var(--ui-scale, 1));
  color: #00bef4;
}
.top-controls {
  margin-left: auto;
  display: flex;
  gap: calc(7px * var(--ui-scale, 1));
  align-items: center;
}
.top-control {
  height: calc(30px * var(--ui-scale, 1));
  display: flex;
  gap: calc(5px * var(--ui-scale, 1));
  align-items: center;
  padding: 0 calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #38415f;
  border-radius: calc(18px * var(--ui-scale, 1));
  background: linear-gradient(#091323, #040914);
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  white-space: nowrap;
}
.top-control.wallet-pill {
  border-color: #117bb1;
  box-shadow: 0 0 calc(12px * var(--ui-scale, 1)) #006aff20;
}
.top-control .ton-logo {
  background: linear-gradient(140deg, #39d8ff, #007eee);
  border: calc(1px * var(--ui-scale, 1)) solid #7af1ff;
  border-radius: 50%;
  height: calc(19px * var(--ui-scale, 1));
  width: calc(19px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  font-size: calc(14px * var(--ui-scale, 1));
}
.bell {
  width: calc(30px * var(--ui-scale, 1));
  padding: 0;
  justify-content: center;
  position: relative;
}
.bell .icon {
  width: calc(20px * var(--ui-scale, 1));
}
.notification-dot {
  position: absolute;
  right: calc(1px * var(--ui-scale, 1));
  top: 0;
  width: calc(8px * var(--ui-scale, 1));
  height: calc(8px * var(--ui-scale, 1));
  border-radius: 50%;
  background: #ff385d;
  border: calc(1px * var(--ui-scale, 1)) solid #841b44;
}
.chevron {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #b5c1e0;
}
.page {
  padding: 0 calc(14px * var(--ui-scale, 1)) calc(90px * var(--ui-scale, 1));
}
.page-hero {
  position: relative;
  min-height: calc(81px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
.page-hero:before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-12px * var(--ui-scale, 1)) calc(-14px * var(--ui-scale, 1)) calc(-20px * var(--ui-scale, 1));
  background-image:
    linear-gradient(90deg, #050b17 0%, #050b1700 40%), linear-gradient(0deg, #050b17 0%, transparent 30%), var(--hero);
  background-size: cover;
  background-position: center;
  opacity: 0.98;
}
.page-hero h1 {
  text-shadow:
    0 calc(1px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) #19035e,
    0 0 calc(22px * var(--ui-scale, 1)) #6c21ff45;
  max-width: 88%;
}
.page-hero p {
  color: #9e9ded;
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 600;
  margin-top: calc(3px * var(--ui-scale, 1));
  max-width: 75%;
}
.page-hero .tagline {
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 500;
  color: #a9badc;
  margin-top: calc(5px * var(--ui-scale, 1));
}
.page-hero.has-back {
  padding-left: calc(35px * var(--ui-scale, 1));
}
.back-button {
  position: absolute;
  left: calc(1px * var(--ui-scale, 1));
  top: calc(18px * var(--ui-scale, 1));
  background: #07111d;
  border: calc(1px * var(--ui-scale, 1)) solid #283958;
  border-radius: 50%;
  width: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
}
.back-button .icon {
  width: calc(18px * var(--ui-scale, 1));
}
.panel {
  position: relative;
  border: calc(1px * var(--ui-scale, 1)) solid var(--border);
  border-radius: calc(13px * var(--ui-scale, 1));
  background: linear-gradient(125deg, #0b1425e8, #07101ce8);
  padding: calc(13px * var(--ui-scale, 1));
  margin-bottom: calc(9px * var(--ui-scale, 1));
  overflow: hidden;
}
.panel.glow {
  border-color: #7664b2;
  box-shadow:
    inset 0 0 calc(24px * var(--ui-scale, 1)) #3b267520,
    0 0 calc(12px * var(--ui-scale, 1)) #6330fa12;
}
.panel.cyan-border {
  border-color: #007ea6;
}
.panel.gold-border {
  border-color: #986715;
}
.panel.art-card {
  isolation: isolate;
}
.art-card:before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(90deg, #060d1bf5 2%, #060d1b8a 50%, #060d1b00 100%), var(--art);
  background-size: cover;
  background-position: center;
  opacity: 0.95;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
  margin: calc(14px * var(--ui-scale, 1)) 0 calc(9px * var(--ui-scale, 1));
}
.section-title h2 {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
}
.section-title .icon {
  color: #a8b8e7;
}
.section-title button {
  border: 0;
  background: none;
  font-size: calc(11px * var(--ui-scale, 1));
  color: #acbce3;
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale, 1));
}
.iconbox {
  display: grid;
  place-items: center;
  width: calc(39px * var(--ui-scale, 1));
  height: calc(39px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #3149d3;
  border-radius: calc(10px * var(--ui-scale, 1));
  background: linear-gradient(130deg, #052044, #051023);
  color: #7581ff;
  flex-shrink: 0;
}
.iconbox.cyanbox {
  color: #10d5fa;
  border-color: #007caa;
  background: linear-gradient(130deg, #052a44, #051023);
}
.iconbox.purplebox {
  color: #d367fa;
  border-color: #67328a;
  background: linear-gradient(130deg, #35213d, #100b20);
}
.iconbox.greenbox {
  color: #00dcb0;
  border-color: #08605c;
  background: #03312a;
}
.iconbox.goldbox {
  color: #ffcd40;
  border-color: #665522;
  background: #35250d66;
}
.balance-card {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  min-height: calc(65px * var(--ui-scale, 1));
}
.balance-card .amount {
  font-size: calc(24px * var(--ui-scale, 1));
  line-height: 1.2;
  letter-spacing: calc(0.1px * var(--ui-scale, 1));
  font-weight: 800;
}
.balance-card .unit {
  font-size: calc(16px * var(--ui-scale, 1));
  font-weight: 800;
  color: #c67eff;
}
.link-card {
  cursor: pointer;
}
.link-card > .icon {
  margin-left: auto;
  color: #fff;
}
.hero-mining {
  min-height: calc(177px * var(--ui-scale, 1));
  padding: calc(13px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border-color: #8b3ddd;
}
.hero-mining:before {
  background-image: linear-gradient(90deg, #030c19f5 0%, #030c1977 50%, transparent 75%), var(--art);
  background-position: center;
}
.hero-mining .row h2 {
  font-size: calc(17px * var(--ui-scale, 1));
}
.running-dot {
  display: inline-block;
  width: calc(6px * var(--ui-scale, 1));
  height: calc(6px * var(--ui-scale, 1));
  border-radius: 50%;
  background: var(--green);
  margin-right: calc(5px * var(--ui-scale, 1));
  box-shadow: 0 0 calc(8px * var(--ui-scale, 1)) #00e4ad55;
}
.boost-pill {
  align-self: flex-start;
  margin-left: auto;
  border: calc(1px * var(--ui-scale, 1)) solid #e7b025;
  border-radius: calc(20px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  color: var(--gold);
  background: #38270966;
  font-weight: 800;
  font-size: calc(12px * var(--ui-scale, 1));
}
.mining-number {
  font-size: calc(33px * var(--ui-scale, 1));
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: calc(0.3px * var(--ui-scale, 1));
  color: #51e7ff;
  text-shadow: 0 0 calc(15px * var(--ui-scale, 1)) #00d5fc55;
  margin-top: calc(12px * var(--ui-scale, 1));
  white-space: nowrap;
}
.mining-number small {
  font-size: calc(19px * var(--ui-scale, 1));
  color: #c66dff;
}
.claim-meta {
  font-size: calc(11px * var(--ui-scale, 1));
  color: #bdc6df;
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  margin: calc(4px * var(--ui-scale, 1)) 0 calc(10px * var(--ui-scale, 1));
}
.claim-meta .icon {
  width: calc(15px * var(--ui-scale, 1));
  height: calc(15px * var(--ui-scale, 1));
}
.primary {
  border: calc(1px * var(--ui-scale, 1)) solid #9693ff;
  border-right-color: #28f1ff;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: var(--gradient);
  color: white;
  font-weight: 800;
  font-size: calc(16px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  min-height: calc(42px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9px * var(--ui-scale, 1));
  box-shadow:
    0 0 calc(14px * var(--ui-scale, 1)) #7636ff38,
    inset 0 calc(1px * var(--ui-scale, 1)) calc(1px * var(--ui-scale, 1)) #fffa;
  transition: filter 0.15s;
}
.primary:hover:not(:disabled) {
  filter: brightness(1.14);
}
.primary .icon {
  width: calc(21px * var(--ui-scale, 1));
  height: calc(21px * var(--ui-scale, 1));
}
.primary .arrow {
  margin-left: auto;
}
.primary.wide,
.secondary.wide {
  width: 100%;
}
.hero-mining .primary {
  width: 55%;
  min-width: calc(220px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
}
.secondary {
  border: calc(1px * var(--ui-scale, 1)) solid #275274;
  background: linear-gradient(120deg, #091b35, #081325);
  border-radius: calc(10px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  font-size: calc(12px * var(--ui-scale, 1));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: calc(7px * var(--ui-scale, 1));
  min-height: calc(34px * var(--ui-scale, 1));
}
.secondary .icon {
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
}
.secondary.violet {
  border-color: #9544cb;
  background: linear-gradient(100deg, #7016c8, #310c61);
}
.secondary.danger {
  color: #ff7a93;
  border-color: #6a3043;
}
.text-button {
  background: none;
  border: none;
  color: #b4c4e8;
  font-size: calc(11px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1));
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(7px * var(--ui-scale, 1));
  margin-bottom: calc(9px * var(--ui-scale, 1));
}
.stat-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat {
  border: calc(1px * var(--ui-scale, 1)) solid #15334a;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: linear-gradient(#091526, #040c17);
  padding: calc(8px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  min-height: calc(71px * var(--ui-scale, 1));
}
.stat:nth-child(2) {
  border-color: #153c43;
}
.stat:nth-child(3) {
  border-color: #302d3d;
}
.stat .stat-label {
  font-size: calc(10px * var(--ui-scale, 1));
  color: #b3c3e0;
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
}
.stat .stat-label .icon {
  width: calc(17px * var(--ui-scale, 1));
  height: calc(17px * var(--ui-scale, 1));
}
.stat .stat-value {
  font-size: calc(17px * var(--ui-scale, 1));
  font-weight: 800;
  line-height: 1.2;
  margin: calc(6px * var(--ui-scale, 1)) 0 calc(2px * var(--ui-scale, 1));
  padding-left: calc(19px * var(--ui-scale, 1));
}
.stat .stat-unit {
  font-size: calc(10px * var(--ui-scale, 1));
  color: #7f9fc3;
  padding-left: calc(19px * var(--ui-scale, 1));
}
.level-card {
  padding: calc(10px * var(--ui-scale, 1));
  display: flex;
  gap: calc(12px * var(--ui-scale, 1));
  align-items: center;
  min-height: calc(76px * var(--ui-scale, 1));
}
.medal {
  width: calc(63px * var(--ui-scale, 1));
  height: calc(63px * var(--ui-scale, 1));
  object-fit: contain;
  filter: drop-shadow(0 0 calc(8px * var(--ui-scale, 1)) #d17c1a22);
  flex-shrink: 0;
}
.medal-wrap {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.medal-wrap .level-digit {
  position: absolute;
  inset: 26% 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 0 calc(10px * var(--ui-scale, 1)) #ffa500;
}
.level-digit small {
  font-size: calc(9px * var(--ui-scale, 1));
}
.level-digit strong {
  font-size: calc(22px * var(--ui-scale, 1));
}
.progress {
  width: 100%;
  height: calc(8px * var(--ui-scale, 1));
  border-radius: calc(8px * var(--ui-scale, 1));
  background: #121c32;
  border: calc(1px * var(--ui-scale, 1)) solid #3a455c;
  overflow: hidden;
  margin: calc(7px * var(--ui-scale, 1)) 0;
}
.progress > span {
  display: block;
  min-width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ffd65c, #efac22);
  border-radius: calc(8px * var(--ui-scale, 1));
  box-shadow: 0 0 calc(8px * var(--ui-scale, 1)) #ffa62755;
}
.progress.cyan > span {
  background: linear-gradient(90deg, #09d9ea, #1b8af3);
}
.progress.purple > span {
  background: linear-gradient(90deg, #6c4cff, #d858f9);
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(7px * var(--ui-scale, 1));
  margin-bottom: calc(8px * var(--ui-scale, 1));
}
.feature {
  padding: calc(12px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  min-height: calc(102px * var(--ui-scale, 1));
  margin-bottom: 0;
  border-color: #007ba6;
}
.feature:nth-child(2) {
  border-color: #862bd6;
}
.feature h2 {
  font-size: calc(14px * var(--ui-scale, 1));
  margin-bottom: calc(3px * var(--ui-scale, 1));
}
.feature p {
  font-size: calc(9px * var(--ui-scale, 1));
  color: #bdc6df;
  max-width: calc(112px * var(--ui-scale, 1));
  margin: calc(4px * var(--ui-scale, 1)) 0 calc(8px * var(--ui-scale, 1));
}
.feature .secondary {
  font-size: calc(10px * var(--ui-scale, 1));
  min-height: calc(28px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
}
.feature .iconbox {
  height: calc(39px * var(--ui-scale, 1));
  width: calc(39px * var(--ui-scale, 1));
  margin-right: calc(2px * var(--ui-scale, 1));
}
.feature .feature-content {
  max-width: calc(138px * var(--ui-scale, 1));
}
.invite-banner {
  min-height: calc(73px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(11px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  border-color: #a37424;
}
.invite-banner p {
  font-size: calc(10px * var(--ui-scale, 1));
  max-width: calc(206px * var(--ui-scale, 1));
  color: #b3c0da;
}
.invite-banner h2 {
  font-size: calc(15px * var(--ui-scale, 1));
}
.invite-banner .secondary {
  color: var(--gold);
  border-color: #b78928;
  border-radius: calc(20px * var(--ui-scale, 1));
  background: #30250999;
  font-size: calc(10px * var(--ui-scale, 1));
  margin-left: auto;
  white-space: nowrap;
}
.bottom-nav {
  position: fixed;
  z-index: 8;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 470px;
  padding: 0 calc(6px * var(--ui-scale, 1)) max(calc(7px * var(--ui-scale, 1)), env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #040914 15%);
}
.nav-inner {
  height: calc(63px * var(--ui-scale, 1));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(125deg, #071425fa, #030b17fa);
  border: calc(1px * var(--ui-scale, 1)) solid #20314a;
  border-radius: calc(16px * var(--ui-scale, 1));
  backdrop-filter: blur(calc(20px * var(--ui-scale, 1)));
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--ui-scale, 1));
  background: none;
  border: 0;
  color: #adbbda;
  font-size: calc(11px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) 0 calc(8px * var(--ui-scale, 1));
}
.nav-item .icon {
  width: calc(23px * var(--ui-scale, 1));
  height: calc(23px * var(--ui-scale, 1));
}
.nav-item.active {
  color: #e891ff;
}
.nav-item.active .icon {
  color: #d951ff;
  filter: drop-shadow(0 0 calc(8px * var(--ui-scale, 1)) #bd36fb);
  stroke-width: 2.6;
}
.nav-item.active:after {
  content: '';
  position: absolute;
  bottom: calc(6px * var(--ui-scale, 1));
  width: calc(6px * var(--ui-scale, 1));
  height: calc(6px * var(--ui-scale, 1));
  border-radius: 50%;
  background: #e358ff;
  box-shadow: 0 0 calc(9px * var(--ui-scale, 1)) #e65fff;
}
.nav-item.active {
  padding-bottom: calc(12px * var(--ui-scale, 1));
}
.tabs {
  display: flex;
  gap: calc(2px * var(--ui-scale, 1));
  padding: calc(3px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #2c3c5a;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #070f1f;
  margin-bottom: calc(10px * var(--ui-scale, 1));
}
.tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: calc(9px * var(--ui-scale, 1));
  color: #b3c1df;
  padding: calc(9px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 600;
  white-space: nowrap;
}
.tabs button.active {
  background: var(--gradient);
  box-shadow: 0 0 calc(12px * var(--ui-scale, 1)) #781ffb33;
  color: #fff;
}
.pill-row {
  display: flex;
  gap: calc(6px * var(--ui-scale, 1));
  overflow-x: auto;
  scrollbar-width: none;
  margin: calc(10px * var(--ui-scale, 1)) 0;
}
.pill {
  border: calc(1px * var(--ui-scale, 1)) solid #253c5c;
  border-radius: calc(20px * var(--ui-scale, 1));
  background: #07101d;
  padding: calc(6px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  color: #becbe4;
  white-space: nowrap;
}
.pill.active {
  background: var(--gradient);
  border-color: #9660ee;
  color: #fff;
}
.pill.tier1 {
  color: #acb6c8;
}
.pill.tier2 {
  color: #54d9b2;
}
.pill.tier3 {
  color: #54c9ff;
}
.pill.tier4 {
  color: #ca76ff;
}
.pill.tier5 {
  color: #ffd56b;
}
.pill.status {
  padding: calc(3px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  font-size: calc(10px * var(--ui-scale, 1));
  border-color: #116a58;
  color: #00e7af;
  background: #05372a88;
}
.panel-head {
  margin-bottom: calc(10px * var(--ui-scale, 1));
}
.sector-tabs {
  display: flex;
  gap: calc(7px * var(--ui-scale, 1));
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: calc(10px * var(--ui-scale, 1));
}
.sector-tabs button {
  min-width: calc(126px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #242c3c;
  border-radius: calc(10px * var(--ui-scale, 1));
  text-align: left;
  background: #0b1422;
  color: var(--muted);
  font-size: calc(10px * var(--ui-scale, 1));
}
.sector-tabs button.active {
  border-color: #30d3fd;
  box-shadow: 0 0 calc(10px * var(--ui-scale, 1)) #00dcff18;
  color: #fff;
}
.sector-tabs strong {
  display: block;
  font-size: calc(11px * var(--ui-scale, 1));
}
.floor-card.disabled {
  opacity: 0.42;
}
.floor-card h3 {
  font-size: calc(13px * var(--ui-scale, 1));
}
.floor-number {
  height: calc(26px * var(--ui-scale, 1));
  width: calc(26px * var(--ui-scale, 1));
  background: #152333;
  border-radius: calc(9px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 800;
  color: #8edfff;
}
.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6px * var(--ui-scale, 1));
  margin-top: calc(11px * var(--ui-scale, 1));
}
.slot {
  border: calc(1px * var(--ui-scale, 1)) dashed #146581;
  border-radius: calc(9px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3px * var(--ui-scale, 1));
  background: #04121a88;
  min-width: 0;
}
.slot img {
  width: calc(30px * var(--ui-scale, 1));
  height: calc(30px * var(--ui-scale, 1));
  object-fit: contain;
  filter: drop-shadow(0 0 calc(4px * var(--ui-scale, 1)) #00d5ff22);
}
.slot .part-count {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #36d8fa;
  font-weight: 800;
}
.slot small {
  font-size: calc(9px * var(--ui-scale, 1));
  color: #8ea2c3;
}
.slot.complete {
  border-style: solid;
  border-color: #0a7662;
}
.subpanel {
  padding: calc(10px * var(--ui-scale, 1));
  background: #050e1b99;
  border: calc(1px * var(--ui-scale, 1)) solid #263653;
  border-radius: calc(10px * var(--ui-scale, 1));
}
.tower-hero {
  min-height: calc(170px * var(--ui-scale, 1));
}
.tower-hero .tower-main {
  font-size: calc(30px * var(--ui-scale, 1));
  font-weight: 800;
  color: #59eafa;
  margin: calc(8px * var(--ui-scale, 1)) 0;
}
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(9px * var(--ui-scale, 1));
}
.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8px * var(--ui-scale, 1));
}
.equipment-art {
  width: 100%;
  height: calc(95px * var(--ui-scale, 1));
  object-fit: contain;
  filter: drop-shadow(0 0 calc(10px * var(--ui-scale, 1)) #7153ff44);
}
.crate-hero {
  min-height: calc(205px * var(--ui-scale, 1));
  padding: calc(17px * var(--ui-scale, 1));
}
.crate-hero:before {
  background-image: linear-gradient(90deg, #060c1bf9, #060c1b88 55%, transparent), var(--art);
}
.crate-hero .crate-img {
  position: absolute;
  right: 0;
  top: calc(18px * var(--ui-scale, 1));
  width: 46%;
  height: calc(160px * var(--ui-scale, 1));
  object-fit: contain;
  z-index: -1;
  filter: drop-shadow(0 0 calc(14px * var(--ui-scale, 1)) #a13dff66);
}
.crate-hero h2 {
  font-size: calc(23px * var(--ui-scale, 1));
  max-width: 65%;
  margin: 0 0 calc(4px * var(--ui-scale, 1));
}
.crate-hero .crate-price {
  font-size: calc(27px * var(--ui-scale, 1));
  font-weight: 800;
  margin: calc(10px * var(--ui-scale, 1)) 0;
}
.crate-hero .primary {
  width: 57%;
  font-size: calc(14px * var(--ui-scale, 1));
}
.crate-offer {
  padding: calc(10px * var(--ui-scale, 1));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.crate-offer img {
  height: calc(92px * var(--ui-scale, 1));
  max-width: 100%;
  object-fit: contain;
}
.crate-offer h3 {
  font-size: calc(12px * var(--ui-scale, 1));
}
.crate-offer .secondary {
  margin-top: calc(6px * var(--ui-scale, 1));
  min-height: calc(29px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  width: 100%;
}
.drop-row {
  display: grid;
  grid-template-columns: calc(75px * var(--ui-scale, 1)) 1fr calc(35px * var(--ui-scale, 1));
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  margin: calc(6px * var(--ui-scale, 1)) 0;
}
.drop-row .progress {
  margin: 0;
  height: calc(6px * var(--ui-scale, 1));
}
.craft-equation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  margin: calc(13px * var(--ui-scale, 1)) 0;
}
.part-square {
  width: 24%;
  aspect-ratio: 1;
  border: calc(1px * var(--ui-scale, 1)) solid #8147af;
  border-radius: calc(10px * var(--ui-scale, 1));
  background: radial-gradient(#56228066, #0d1023);
  display: grid;
  place-items: center;
}
.part-square img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.craft-plus {
  font-size: calc(20px * var(--ui-scale, 1));
  color: #afc0e3;
}
.inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8px * var(--ui-scale, 1));
}
.inventory-card {
  display: flex;
  gap: calc(8px * var(--ui-scale, 1));
  align-items: center;
  padding: calc(9px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #175d82;
  border-radius: calc(10px * var(--ui-scale, 1));
  background: #07111f;
  text-align: left;
  min-width: 0;
}
.inventory-card img {
  width: calc(58px * var(--ui-scale, 1));
  height: calc(58px * var(--ui-scale, 1));
  object-fit: contain;
}
.inventory-card h3 {
  font-size: calc(12px * var(--ui-scale, 1));
}
.inventory-card .count {
  font-size: calc(15px * var(--ui-scale, 1));
  font-weight: 800;
  color: #b1f3ff;
}
.empty {
  padding: calc(25px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
  text-align: center;
  color: #91a6ca;
  font-size: calc(12px * var(--ui-scale, 1));
}
.empty .icon {
  width: calc(38px * var(--ui-scale, 1));
  height: calc(38px * var(--ui-scale, 1));
  margin: 0 auto calc(10px * var(--ui-scale, 1));
  display: block;
  opacity: 0.7;
}
.hero-percentage {
  font-size: calc(61px * var(--ui-scale, 1));
  line-height: 1;
  color: #ffd55c;
  font-weight: 800;
  text-shadow: 0 0 calc(20px * var(--ui-scale, 1)) #dda42a44;
}
.friends-hero {
  min-height: calc(170px * var(--ui-scale, 1));
  padding-top: calc(18px * var(--ui-scale, 1));
}
.friends-hero .percentage-row {
  display: flex;
  align-items: center;
  gap: calc(13px * var(--ui-scale, 1));
  max-width: 65%;
  margin: calc(15px * var(--ui-scale, 1)) 0;
}
.percentage-row p {
  font-size: calc(13px * var(--ui-scale, 1));
  color: #bec8e8;
}
.ref-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  background: #040d1ccc;
  border: calc(1px * var(--ui-scale, 1)) solid #375c8b;
  border-radius: calc(9px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1));
  margin: calc(10px * var(--ui-scale, 1)) 0;
  min-width: 0;
}
.ref-link span {
  font-size: calc(12px * var(--ui-scale, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ref-link button {
  border: none;
  background: none;
  color: #dce6fb;
  padding: 0;
  display: grid;
  place-items: center;
}
.list-row {
  padding: calc(11px * var(--ui-scale, 1)) 0;
  border-top: calc(1px * var(--ui-scale, 1)) solid #23334a;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  min-width: 0;
}
.list-row:first-child {
  border-top: 0;
}
.list-row .value {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.avatar {
  width: calc(37px * var(--ui-scale, 1));
  height: calc(37px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  border: calc(1px * var(--ui-scale, 1)) solid #744bca;
  border-radius: 50%;
  background: radial-gradient(#472466, #07142b);
  font-size: calc(16px * var(--ui-scale, 1));
  color: #e2b5ff;
  font-weight: 800;
}
.wallet-balance {
  min-height: calc(157px * var(--ui-scale, 1));
  padding: calc(14px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
}
.wallet-balance .wallet-number {
  font-size: calc(27px * var(--ui-scale, 1));
  font-weight: 800;
  margin: calc(5px * var(--ui-scale, 1)) 0 calc(8px * var(--ui-scale, 1));
}
.wallet-balance .wallet-number small {
  font-size: calc(18px * var(--ui-scale, 1));
  color: #d37eff;
}
.wallet-balance .ton-row {
  display: inline-flex;
  gap: calc(9px * var(--ui-scale, 1));
  align-items: center;
  border: calc(1px * var(--ui-scale, 1)) solid #334d71;
  background: #0a19308a;
  border-radius: calc(10px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  font-size: calc(17px * var(--ui-scale, 1));
}
.address {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  color: #bdc6e3;
  margin-top: calc(8px * var(--ui-scale, 1));
}
.address button {
  border: none;
  background: none;
  color: #afc6eb;
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7px * var(--ui-scale, 1));
  margin-bottom: calc(9px * var(--ui-scale, 1));
}
.action-grid button {
  padding: calc(9px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  background: linear-gradient(115deg, #0a3461, #061426);
  border: calc(1px * var(--ui-scale, 1)) solid #0c8dbc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--ui-scale, 1));
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 800;
}
.action-grid button:first-child {
  background: var(--gradient);
  border-color: #a854ff;
}
.action-grid button:last-child {
  background: linear-gradient(115deg, #6116a9, #1b1036);
  border-color: #8642c1;
}
.inline-note {
  border: calc(1px * var(--ui-scale, 1)) solid #0b7a9f;
  border-radius: calc(11px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1));
  display: flex;
  gap: calc(9px * var(--ui-scale, 1));
  align-items: center;
  color: #b6c9e6;
  font-size: calc(11px * var(--ui-scale, 1));
  margin-bottom: calc(10px * var(--ui-scale, 1));
  background: #04213b33;
}
.inline-note .icon {
  color: #31d9fa;
}
.form-label {
  display: block;
  color: #b5c3e3;
  font-size: calc(12px * var(--ui-scale, 1));
  margin: calc(11px * var(--ui-scale, 1)) 0 calc(6px * var(--ui-scale, 1));
}
input,
textarea,
select {
  width: 100%;
  background: #061222;
  border: calc(1px * var(--ui-scale, 1)) solid #3a4a75;
  border-radius: calc(9px * var(--ui-scale, 1));
  color: #f4f4ff;
  padding: calc(11px * var(--ui-scale, 1));
  min-width: 0;
}
input[type='number'] {
  appearance: textfield;
}
input::-webkit-inner-spin-button {
  appearance: none;
}
textarea {
  resize: vertical;
  min-height: calc(95px * var(--ui-scale, 1));
}
.amount-input {
  display: flex;
  align-items: center;
  border: calc(1px * var(--ui-scale, 1)) solid #6265a1;
  border-radius: calc(9px * var(--ui-scale, 1));
  background: linear-gradient(110deg, #0a162b, #050e1a);
  padding: calc(7px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  gap: calc(10px * var(--ui-scale, 1));
}
.amount-input input {
  border: 0;
  background: none;
  font-size: calc(23px * var(--ui-scale, 1));
  font-weight: 800;
  padding: calc(3px * var(--ui-scale, 1)) 0;
  outline: none;
  width: 100%;
}
.amount-input .currency {
  color: #bc8bf5;
  font-size: calc(15px * var(--ui-scale, 1));
  font-weight: 800;
  white-space: nowrap;
}
.amount-input .max {
  background: #06336b;
  border: calc(1px * var(--ui-scale, 1)) solid #0cbbe2;
  border-radius: calc(7px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  font-weight: 800;
}
.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
  color: #b5c4e5;
  font-size: calc(12px * var(--ui-scale, 1));
  margin: calc(8px * var(--ui-scale, 1)) 0;
}
.summary-row strong {
  color: white;
}
.summary-row.total {
  border-top: calc(1px * var(--ui-scale, 1)) solid #2c3c55;
  padding-top: calc(10px * var(--ui-scale, 1));
  font-size: calc(15px * var(--ui-scale, 1));
  font-weight: 800;
}
.summary-row.total strong {
  color: #ce82ff;
}
.chart {
  height: calc(125px * var(--ui-scale, 1));
  width: 100%;
  display: block;
  margin-top: calc(8px * var(--ui-scale, 1));
}
.price-number {
  font-size: calc(25px * var(--ui-scale, 1));
  font-weight: 800;
}
.price-up {
  border: calc(1px * var(--ui-scale, 1)) solid #087150;
  background: #05423577;
  color: #00dfb0;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  border-radius: calc(16px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
}
.range-tabs {
  display: flex;
  border: calc(1px * var(--ui-scale, 1)) solid #2e476b;
  border-radius: calc(10px * var(--ui-scale, 1));
  margin: calc(10px * var(--ui-scale, 1)) 0 0;
  padding: calc(2px * var(--ui-scale, 1));
}
.range-tabs button {
  width: 25%;
  border: none;
  background: none;
  color: #afbddc;
  font-size: calc(11px * var(--ui-scale, 1));
  padding: calc(6px * var(--ui-scale, 1));
  border-radius: calc(8px * var(--ui-scale, 1));
}
.range-tabs button.active {
  background: var(--gradient);
  color: white;
  font-weight: 800;
}
.swap-form .two-cols {
  align-items: center;
  position: relative;
}
.swap-form .two-cols .amount-input input {
  font-size: calc(18px * var(--ui-scale, 1));
}
.swap-form .two-cols .currency {
  font-size: calc(11px * var(--ui-scale, 1));
}
.plan {
  padding: calc(11px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  background: #081224;
  border: calc(1px * var(--ui-scale, 1)) solid #3d3e67;
  border-radius: calc(10px * var(--ui-scale, 1));
  text-align: center;
  font-size: calc(12px * var(--ui-scale, 1));
  color: #bcc9e3;
}
.plan .rate {
  display: block;
  font-size: calc(22px * var(--ui-scale, 1));
  font-weight: 800;
  color: #bf72fa;
  margin-top: calc(7px * var(--ui-scale, 1));
}
.plan.active {
  border-color: #c38aff;
  box-shadow:
    0 0 calc(13px * var(--ui-scale, 1)) #8543e755,
    inset 0 0 calc(30px * var(--ui-scale, 1)) #164bba55;
  background: linear-gradient(120deg, #261563, #07173a);
}
.plan.active .rate {
  color: #35e9ff;
}
.streak-hero {
  min-height: calc(178px * var(--ui-scale, 1));
}
.streak-hero .day-title {
  font-size: calc(30px * var(--ui-scale, 1));
  font-weight: 800;
  color: #ffd766;
  margin-bottom: calc(6px * var(--ui-scale, 1));
}
.streak-hero .reward {
  font-size: calc(31px * var(--ui-scale, 1));
  color: #4eeaff;
  font-weight: 800;
  margin: calc(7px * var(--ui-scale, 1)) 0 calc(10px * var(--ui-scale, 1));
}
.streak-hero .primary {
  width: 60%;
  font-size: calc(14px * var(--ui-scale, 1));
}
.days-row {
  display: flex;
  gap: calc(6px * var(--ui-scale, 1));
  overflow-x: auto;
  scrollbar-width: none;
  padding: calc(7px * var(--ui-scale, 1));
  margin-bottom: calc(10px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #175674;
  border-radius: calc(11px * var(--ui-scale, 1));
  background: #071324;
}
.day-tile {
  min-width: calc((100% - calc(36px * var(--ui-scale, 1))) / 7);
  text-align: center;
  padding: calc(8px * var(--ui-scale, 1)) calc(1px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #283657;
  border-radius: calc(9px * var(--ui-scale, 1));
  background: #091425;
  font-size: calc(10px * var(--ui-scale, 1));
  color: #a0b0cf;
}
.day-tile b {
  display: block;
  font-size: calc(11px * var(--ui-scale, 1));
  margin: calc(3px * var(--ui-scale, 1)) 0;
}
.day-tile.done {
  border-color: #086455;
  color: #00e3ae;
}
.day-tile.today {
  background: linear-gradient(#57236c, #291d35);
  border-color: #e5bc66;
  color: #ffdc64;
  box-shadow: 0 0 calc(7px * var(--ui-scale, 1)) #b233d4;
}
.task-row {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
}
.task-row .task-main {
  flex: 1;
  min-width: 0;
}
.task-row h3 {
  font-size: calc(12px * var(--ui-scale, 1));
}
.task-reward {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  white-space: nowrap;
  color: #db77ff;
}
.task-row .secondary {
  font-size: calc(10px * var(--ui-scale, 1));
  padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  min-height: calc(30px * var(--ui-scale, 1));
}
.league-current {
  min-height: calc(133px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.league-current .medal {
  width: calc(125px * var(--ui-scale, 1));
  height: calc(125px * var(--ui-scale, 1));
}
.league-current .level-digit {
  top: 28%;
}
.league-current .level-digit small {
  font-size: calc(15px * var(--ui-scale, 1));
}
.league-current .level-digit strong {
  font-size: calc(42px * var(--ui-scale, 1));
}
.league-row {
  min-height: calc(58px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  margin-bottom: calc(6px * var(--ui-scale, 1));
  display: flex;
  gap: calc(12px * var(--ui-scale, 1));
  align-items: center;
}
.league-row .medal {
  height: calc(45px * var(--ui-scale, 1));
  width: calc(45px * var(--ui-scale, 1));
}
.league-row .level-digit {
  top: 30%;
}
.league-row .level-digit small {
  font-size: calc(6px * var(--ui-scale, 1));
}
.league-row .level-digit strong {
  font-size: calc(15px * var(--ui-scale, 1));
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(11px * var(--ui-scale, 1));
}
.table th {
  text-align: left;
  color: #829bc6;
  font-weight: 600;
  padding: calc(8px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));
}
.table td {
  padding: calc(8px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));
  border-top: calc(1px * var(--ui-scale, 1)) solid #23314a;
  font-variant-numeric: tabular-nums;
}
.table tr.current {
  background: #58276933;
  color: #dbb0ff;
}
.table-scroll {
  max-height: 55vh;
  overflow: auto;
}
.ambassador-hero {
  min-height: calc(95px * var(--ui-scale, 1));
}
.requirement-row {
  display: grid;
  grid-template-columns: calc(115px * var(--ui-scale, 1)) 1fr calc(60px * var(--ui-scale, 1));
  gap: calc(10px * var(--ui-scale, 1));
  align-items: center;
  font-size: calc(11px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1));
  background: #081329;
  border: calc(1px * var(--ui-scale, 1)) solid #273b5e;
  border-radius: calc(9px * var(--ui-scale, 1));
  margin-top: calc(7px * var(--ui-scale, 1));
}
.requirement-row .progress {
  margin: 0;
  height: calc(7px * var(--ui-scale, 1));
}
.ambassador-tier {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #3a3555;
  border-radius: calc(9px * var(--ui-scale, 1));
  background: #111426;
  margin-bottom: calc(6px * var(--ui-scale, 1));
}
.ambassador-tier .medal {
  width: calc(34px * var(--ui-scale, 1));
  height: calc(34px * var(--ui-scale, 1));
}
.ambassador-tier h3 {
  width: calc(85px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
}
.ambassador-tier b {
  font-size: calc(16px * var(--ui-scale, 1));
  color: #efb572;
}
.ambassador-tier small {
  margin-left: auto;
  color: #b7c6e1;
  font-size: calc(10px * var(--ui-scale, 1));
}
.withdraw-hold {
  border-color: #116255;
}
.withdraw-hold strong {
  font-size: calc(18px * var(--ui-scale, 1));
}
.withdraw-note {
  font-size: calc(10px * var(--ui-scale, 1));
  color: #a3b6d8;
  margin: calc(6px * var(--ui-scale, 1)) 0;
}
.hold-badge {
  font-size: calc(11px * var(--ui-scale, 1));
  color: #00e7ab;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  margin-top: calc(5px * var(--ui-scale, 1));
}
.option-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(14px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1));
  background: none;
  border: 0;
  border-top: calc(1px * var(--ui-scale, 1)) solid #26344a;
  text-align: start;
}
.option-row:first-child {
  border-top: 0;
}
.option-row .icon {
  color: #b58cff;
}
.option-row .arrow {
  margin-left: auto;
  color: #849fca;
}
.option-row small {
  margin-left: auto;
  color: #a5b4d5;
}
.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8px * var(--ui-scale, 1));
}
.language-option {
  display: flex;
  gap: calc(8px * var(--ui-scale, 1));
  align-items: center;
  border: calc(1px * var(--ui-scale, 1)) solid #2b3d61;
  background: #091329;
  border-radius: calc(10px * var(--ui-scale, 1));
  padding: calc(11px * var(--ui-scale, 1));
  text-align: start;
}
.language-option.selected {
  border-color: #9653e9;
  background: #22144a;
}
.sandbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(7px * var(--ui-scale, 1));
}
.sandbox-grid .secondary {
  font-size: calc(11px * var(--ui-scale, 1));
}
.settings-identity {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale, 1));
  padding: calc(15px * var(--ui-scale, 1));
}
.settings-identity .avatar {
  width: calc(48px * var(--ui-scale, 1));
  height: calc(48px * var(--ui-scale, 1));
}
.settings-identity h2 {
  font-size: calc(18px * var(--ui-scale, 1));
}
.notification-card {
  display: flex;
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #30405b;
  border-radius: calc(10px * var(--ui-scale, 1));
  background: #0a172a;
  margin: calc(9px * var(--ui-scale, 1)) 0;
}
.notification-card .icon {
  color: #aa82ff;
}
.initial-loader {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a6b5d8;
  gap: calc(8px * var(--ui-scale, 1));
}
.initial-loader h1 {
  color: white;
}
.loader-crystal {
  height: calc(48px * var(--ui-scale, 1));
  width: calc(34px * var(--ui-scale, 1));
  background: linear-gradient(145deg, #1cdaff, #7418fc 55%, #ed86ff);
  clip-path: polygon(50% 0, 100% 30%, 80% 80%, 50% 100%, 10% 70%, 0 30%);
  filter: drop-shadow(0 0 calc(20px * var(--ui-scale, 1)) #ae33fa);
  animation: float 2s ease-in-out infinite;
  margin: calc(15px * var(--ui-scale, 1));
}
#toast {
  position: fixed;
  z-index: 100;
  bottom: calc(90px * var(--ui-scale, 1));
  left: 50%;
  transform: translate(-50%, calc(15px * var(--ui-scale, 1)));
  background: #122036f2;
  border: calc(1px * var(--ui-scale, 1)) solid #6964ad;
  border-radius: calc(12px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  max-width: calc(430px * var(--ui-scale, 1));
  width: max-content;
  color: #e8edff;
  font-size: calc(12px * var(--ui-scale, 1));
  box-shadow: 0 calc(8px * var(--ui-scale, 1)) calc(40px * var(--ui-scale, 1)) #000b;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #000a;
  backdrop-filter: blur(calc(8px * var(--ui-scale, 1)));
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: calc(10px * var(--ui-scale, 1));
}
.modal {
  width: 100%;
  max-width: calc(450px * var(--ui-scale, 1));
  max-height: 88dvh;
  overflow: auto;
  border: calc(1px * var(--ui-scale, 1)) solid #6b4aa3;
  border-radius: calc(20px * var(--ui-scale, 1));
  background: linear-gradient(135deg, #111831, #071021);
  padding: calc(18px * var(--ui-scale, 1));
  box-shadow: 0 0 calc(60px * var(--ui-scale, 1)) #6223b52a;
  animation: slide-up 0.2s ease-out;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
  margin-bottom: calc(16px * var(--ui-scale, 1));
}
.modal-header h2 {
  font-size: calc(19px * var(--ui-scale, 1));
}
.modal-close {
  border: calc(1px * var(--ui-scale, 1)) solid #344767;
  border-radius: 50%;
  background: #0a1427;
  width: calc(29px * var(--ui-scale, 1));
  height: calc(29px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
}
.modal-close .icon {
  height: calc(16px * var(--ui-scale, 1));
  width: calc(16px * var(--ui-scale, 1));
}
.modal-actions {
  display: flex;
  gap: calc(8px * var(--ui-scale, 1));
  margin-top: calc(16px * var(--ui-scale, 1));
}
.modal-actions > * {
  flex: 1;
}
.reward-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7px * var(--ui-scale, 1));
}
.reward-item {
  border: calc(1px * var(--ui-scale, 1)) solid #42658b;
  border-radius: calc(9px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1));
  text-align: center;
  background: #07152b;
  animation: float 0.8s ease-in-out;
}
.reward-item img {
  height: calc(65px * var(--ui-scale, 1));
  width: 100%;
  object-fit: contain;
}
.reward-item small {
  display: block;
  font-size: calc(10px * var(--ui-scale, 1));
}
.calendar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(7px * var(--ui-scale, 1));
}
.calendar .day-tile {
  min-width: 0;
}
.busy {
  pointer-events: none;
  opacity: 0.65;
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8px * var(--ui-scale, 1));
}
.admin-grid .stat-value {
  padding: 0;
}
.full-error {
  text-align: center;
  padding: calc(60px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
}
.full-error .primary {
  margin-top: calc(20px * var(--ui-scale, 1));
}
.launch-page {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: calc(24px * var(--ui-scale, 1));
  background:
    linear-gradient(0deg, #050a14 5%, #050a1466 65%, #050a14 100%),
    image-set(url('/assets/optimized/home-hero-480.4d9725de7ffb.webp') 1x, url('/assets/optimized/home-hero-960.c4446f65ed83.webp') 2x) center 25% / auto 70% no-repeat;
}
.launch-card {
  display: grid;
  gap: calc(20px * var(--ui-scale, 1));
  text-align: center;
  padding: calc(36px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1));
  border: 1px solid #6e55b788;
  border-radius: calc(24px * var(--ui-scale, 1));
  background: linear-gradient(145deg, #10182be8, #050a14ed);
  box-shadow: 0 0 60px #782aff33;
  backdrop-filter: blur(12px);
}
.launch-logo {
  width: calc(86px * var(--ui-scale, 1));
  height: calc(86px * var(--ui-scale, 1));
  object-fit: contain;
  margin: 0 auto;
}
.launch-eyebrow {
  color: var(--cyan);
  font-size: calc(10px * var(--ui-scale, 1));
  letter-spacing: 0.2em;
}
.rtl {
  direction: rtl;
}
.rtl .top-controls {
  margin-left: 0;
  margin-right: auto;
}
.rtl .nav-item.active:after {
  left: calc(50% - calc(3px * var(--ui-scale, 1)));
}
.rtl .summary-row,
.rtl .between {
  direction: rtl;
}
.rtl .art-card:before {
  transform: scaleX(-1);
}
.rtl .page-hero:before {
  transform: scaleX(-1);
}
.rtl .price-number,
.rtl .mining-number,
.rtl .amount {
  direction: ltr;
  unicode-bidi: isolate;
}
.rtl .value {
  margin-left: 0;
  margin-right: auto;
}
.rtl .option-row .arrow {
  margin-left: 0;
  margin-right: auto;
}
@keyframes float {
  50% {
    transform: translateY(calc(-4px * var(--ui-scale, 1)));
  }
}
@keyframes slide-up {
  from {
    transform: translateY(calc(30px * var(--ui-scale, 1)));
    opacity: 0;
  }
}
@media (min-width: 700px) {
  body {
    padding: calc(20px * var(--ui-scale, 1)) 0;
  }
  .app {
    border: calc(1px * var(--ui-scale, 1)) solid #1c2942;
    border-radius: calc(22px * var(--ui-scale, 1));
    min-height: calc(100dvh - calc(40px * var(--ui-scale, 1)));
  }
  .bottom-nav {
    bottom: calc(18px * var(--ui-scale, 1));
  }
  .modal-backdrop {
    align-items: center;
  }
  .page {
    padding-bottom: calc(100px * var(--ui-scale, 1));
  }
}
@media (max-width: 390px) {
  .topbar {
    gap: calc(5px * var(--ui-scale, 1));
    padding: calc(5px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  }
  .brand {
    gap: calc(5px * var(--ui-scale, 1));
  }
  .brand b {
    font-size: calc(18px * var(--ui-scale, 1));
  }
  .brand img {
    height: calc(27px * var(--ui-scale, 1));
    width: calc(29px * var(--ui-scale, 1));
  }
  .mini-tag {
    padding: calc(3px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
    font-size: calc(9px * var(--ui-scale, 1));
  }
  .top-controls {
    gap: calc(4px * var(--ui-scale, 1));
  }
  .top-control {
    padding: 0 calc(6px * var(--ui-scale, 1));
    font-size: calc(10px * var(--ui-scale, 1));
  }
  .bell {
    width: calc(27px * var(--ui-scale, 1));
    padding: 0;
  }
  .page {
    padding-left: calc(11px * var(--ui-scale, 1));
    padding-right: calc(11px * var(--ui-scale, 1));
  }
  .mining-number {
    font-size: calc(29px * var(--ui-scale, 1));
  }
  .hero-mining .primary {
    min-width: calc(190px * var(--ui-scale, 1));
    font-size: calc(14px * var(--ui-scale, 1));
  }
  .stat .stat-value {
    font-size: calc(15px * var(--ui-scale, 1));
    padding-left: calc(8px * var(--ui-scale, 1));
  }
  .stat .stat-unit {
    padding-left: calc(8px * var(--ui-scale, 1));
  }
  .stat {
    padding: calc(7px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  }
  .feature {
    padding: calc(9px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  }
  .feature .row {
    gap: calc(7px * var(--ui-scale, 1));
  }
  .feature h2 {
    font-size: calc(12px * var(--ui-scale, 1));
  }
  .feature .iconbox {
    width: calc(32px * var(--ui-scale, 1));
    height: calc(35px * var(--ui-scale, 1));
  }
  .invite-banner .secondary {
    padding: calc(6px * var(--ui-scale, 1));
    font-size: calc(9px * var(--ui-scale, 1));
  }
  .invite-banner .iconbox {
    width: calc(31px * var(--ui-scale, 1));
    height: calc(36px * var(--ui-scale, 1));
  }
  .invite-banner p {
    font-size: calc(9px * var(--ui-scale, 1));
  }
  .invite-banner {
    gap: calc(7px * var(--ui-scale, 1));
  }
  .mining-number small {
    font-size: calc(16px * var(--ui-scale, 1));
  }
  .amount-input input {
    font-size: calc(20px * var(--ui-scale, 1));
  }
  .requirement-row {
    grid-template-columns: calc(100px * var(--ui-scale, 1)) 1fr calc(50px * var(--ui-scale, 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.row > img {
  width: calc(36px * var(--ui-scale, 1));
  height: calc(36px * var(--ui-scale, 1));
  object-fit: contain;
}
.floor-card .slots img {
  width: calc(30px * var(--ui-scale, 1));
  height: calc(30px * var(--ui-scale, 1));
}

/* Fluid header preserves the reference proportions at Telegram widths. */
.app {
  container-type: inline-size;
}
.topbar {
  gap: 1.8cqw;
  padding: 1.2cqw 3cqw;
}
.brand {
  gap: 1.5cqw;
}
.brand img {
  width: 7.2cqw;
  height: 6.8cqw;
}
.brand b {
  font-size: 4.25cqw;
}
.mini-tag {
  font-size: 2.1cqw;
  padding: 0.85cqw 1.3cqw;
  gap: 1cqw;
}
.mini-tag .icon {
  width: 2.8cqw;
  height: 2.8cqw;
}
.top-controls {
  gap: 1.2cqw;
}
.top-control {
  font-size: 2.35cqw;
  padding: 0 1.5cqw;
  gap: 0.9cqw;
}
.top-control .ton-logo {
  width: 4.1cqw;
  height: 4.1cqw;
  font-size: 3cqw;
}
.bell {
  width: 6.4cqw;
  padding: 0;
}
.bell .icon {
  width: 4.2cqw;
  height: 4.2cqw;
}
.top-control .chevron {
  font-size: 2.6cqw;
}
.feature .row {
  gap: calc(8px * var(--ui-scale, 1));
}
.feature h2 {
  white-space: nowrap;
  font-size: calc(13px * var(--ui-scale, 1));
}
.feature p {
  max-width: calc(130px * var(--ui-scale, 1));
  margin: calc(5px * var(--ui-scale, 1)) 0 calc(7px * var(--ui-scale, 1));
  font-size: calc(10px * var(--ui-scale, 1));
}
.feature .secondary {
  white-space: nowrap;
  min-height: calc(28px * var(--ui-scale, 1));
  font-size: calc(10px * var(--ui-scale, 1));
}
.feature .iconbox {
  width: calc(31px * var(--ui-scale, 1));
  height: calc(35px * var(--ui-scale, 1));
}
.feature .row .iconbox {
  margin-right: 0;
}
.feature .row {
  min-height: calc(35px * var(--ui-scale, 1));
}
.feature {
  min-height: calc(115px * var(--ui-scale, 1));
}
.hero-mining .primary {
  white-space: nowrap;
}
.page > .small.muted {
  position: relative;
  z-index: 1;
}

.rtl .part-count,
.rtl .tower-main,
.rtl .wallet-number,
.rtl .ton-row,
.rtl .price-number,
.rtl .count,
.rtl .price-up {
  direction: ltr;
  unicode-bidi: isolate;
}

.flag {
  width: calc(18px * var(--ui-scale, 1));
  height: calc(13px * var(--ui-scale, 1));
  object-fit: cover;
  display: inline-block;
  border-radius: 2px;
  vertical-align: middle;
}
.language-option .flag {
  width: calc(24px * var(--ui-scale, 1));
  height: calc(16px * var(--ui-scale, 1));
}