:root {
  color-scheme: dark;
  --bg: #030812;
  --bg-deep: #01040a;
  --surface: #091322;
  --surface-raised: #0c1829;
  --surface-light: #101d30;
  --line: rgba(147, 169, 222, .16);
  --line-strong: rgba(154, 123, 255, .54);
  --text: #f5f6ff;
  --muted: #9da9c4;
  --muted-dim: #71809e;
  --accent: #9a6cff;
  --accent-strong: #6418f0;
  --accent-soft: #c6b3ff;
  --good: #12e15b;
  --warning: #ffc76b;
  --danger: #ff8b96;
  --shadow: 0 24px 52px rgba(0, 0, 0, .38);
  font-family: Manrope, Arial, sans-serif;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }

html { background: var(--bg-deep); }

html[lang="ar"] {
  font-family: "Noto Sans Arabic", Manrope, Arial, sans-serif;
}

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .reference-asset-card,
html[dir="rtl"] .gpu-choice-card-photo,
html[dir="rtl"] .language-option { text-align: right; }
html[dir="rtl"] .page-back,
html[dir="rtl"] .profile-menu-item > i,
html[dir="rtl"] .language-option > i { transform: scaleX(-1); }
html[dir="rtl"] .gpum-page-left,
html[dir="rtl"] .gpum-page-actions { flex-direction: row-reverse; }
html[dir="rtl"] .bottom-nav-item small,
html[dir="rtl"] .screen-heading-row h2,
html[dir="rtl"] .statistics-heading h2,
html[dir="rtl"] .modal-header h2,
html[dir="rtl"] .rate-modal-header h2 { letter-spacing: 0; }
html[dir="rtl"] .screen-heading-row,
html[dir="rtl"] .statistics-heading,
html[dir="rtl"] .modal-header,
html[dir="rtl"] .offer-modal-body,
html[dir="rtl"] .rate-modal-header,
html[dir="rtl"] .payout-network-choice,
html[dir="rtl"] .payment-option { text-align: right; }
html[dir="rtl"] .payout-network-choice,
html[dir="rtl"] .profile-menu-item,
html[dir="rtl"] .language-option { flex-direction: row-reverse; }
html[dir="rtl"] .partners-link-control .text-input,
html[dir="rtl"] #payout-address,
html[dir="rtl"] #withdraw-address { direction: ltr; text-align: left; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 42rem 34rem at 108% 31%, rgba(105, 44, 247, .14), transparent 65%),
    radial-gradient(ellipse 31rem 26rem at -12% 51%, rgba(32, 83, 157, .14), transparent 68%),
    linear-gradient(160deg, #020711 0%, #030914 42%, #020711 100%);
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

.app-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px calc(120px + env(safe-area-inset-bottom));
}

.loading-screen {
  min-height: 84vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted);
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(190, 164, 255, .54);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #a276ff, #5412e5);
  box-shadow: 0 10px 30px rgba(112, 52, 255, .35);
  font-size: 24px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) auto minmax(74px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 1px 1px 17px;
}

.topbar-close,
.more-control {
  border: 0;
  color: #1680ff;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.topbar-close { padding: 8px 0; }

.more-control {
  justify-self: end;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 2px solid #1680ff;
  border-radius: 50%;
  padding: 0;
  letter-spacing: 1px;
}

.more-control span { transform: translateY(-3px); }

.brand { min-width: 0; text-align: center; }
.brand h1 { margin: 0; color: #f5f5fd; font-size: 20px; font-weight: 780; letter-spacing: .02em; }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1; }

.demo-banner,
.risk-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 199, 107, .27);
  border-radius: 15px;
  color: #fbd799;
  background: rgba(111, 78, 24, .2);
  font-size: 12px;
  line-height: 1.48;
}

.demo-banner strong { color: #ffe4ad; }

.dashboard-main { display: grid; gap: 26px; }

.topbar-home { display: none; }
.demo-banner-home { margin: 0 0 10px; padding: 7px 10px; border-radius: 11px; font-size: 10px; }

.reference-home { display: grid; gap: 23px; }
.reference-home-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 2px 7px 0; }
.reference-logo { display: grid; width: 70px; height: 70px; place-items: center; color: #a566ff; filter: drop-shadow(0 0 13px rgba(132, 74, 255, .7)); }
.reference-logo svg { width: 100%; height: 100%; stroke-width: 1.8; }
.reference-energy-pill { display: flex; align-items: center; gap: 12px; min-height: 55px; padding: 8px 13px 8px 16px; border: 1px solid rgba(85, 133, 255, .85); border-radius: 999px; color: #f5f7ff; background: linear-gradient(105deg, rgba(8, 25, 56, .94), rgba(20, 11, 58, .96)); box-shadow: inset 0 1px 0 rgba(180, 213, 255, .16), 0 0 19px rgba(46, 109, 255, .18); }
.reference-energy-pill > span { color: #1599ff; font-size: 31px; line-height: 1; text-shadow: 0 0 14px rgba(20, 152, 255, .8); }
.reference-energy-pill strong { font-size: clamp(16px, 5.3vw, 27px); font-weight: 590; letter-spacing: -.045em; white-space: nowrap; }
.reference-energy-pill i { padding-left: 4px; color: #a74dff; font-size: 33px; font-style: normal; font-weight: 300; line-height: .8; text-shadow: 0 0 12px rgba(175, 78, 255, .8); }
.reference-hero-card { position: relative; min-height: 267px; overflow: hidden; padding: 34px 27px; border: 1px solid rgba(201, 103, 255, .67); border-radius: 25px; background: radial-gradient(circle 16rem at 101% 32%, rgba(38, 65, 153, .22), transparent 63%), linear-gradient(130deg, rgba(2, 9, 20, .99), rgba(2, 9, 21, .96)); box-shadow: inset 0 1px 0 rgba(226, 194, 255, .06), 0 13px 29px rgba(0, 0, 0, .24); }
.reference-hero-card::before { content: ""; position: absolute; right: -18%; bottom: -67%; width: 82%; height: 155%; border: 2px solid rgba(43, 117, 255, .72); border-radius: 50%; box-shadow: 0 0 24px rgba(51, 77, 255, .5), inset 0 0 19px rgba(101, 31, 255, .28); transform: rotate(-28deg); }
.reference-hero-card::after { content: ""; position: absolute; top: 0; right: 0; width: 58%; height: 100%; opacity: .72; background-image: radial-gradient(rgba(116, 98, 255, .46) 1px, transparent 1px); background-size: 8px 8px; mask-image: linear-gradient(135deg, #000, transparent 80%); }
.reference-hero-copy { position: relative; z-index: 2; max-width: 53%; }
.reference-hero-copy h2 { margin: 0; color: #fff; font-size: clamp(37px, 10.2vw, 58px); font-weight: 760; line-height: .98; letter-spacing: -.07em; }
.reference-hero-copy p { margin: 21px 0 0; color: #a4aecb; font-size: clamp(13px, 3.8vw, 18px); line-height: 1.52; }
.reference-gpu-art { position: absolute; z-index: 1; right: -18px; bottom: -15px; width: 67%; transform: rotate(-3deg); }
.reference-gpu-art .gpu-artwork { filter: drop-shadow(-19px 21px 18px rgba(0, 0, 0, .75)) saturate(1.35) contrast(1.1); }
.reference-network-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reference-network-grid article { position: relative; min-height: 162px; overflow: hidden; padding: 15px 13px; border: 1px solid rgba(13, 160, 194, .52); border-radius: 19px; background: linear-gradient(145deg, rgba(3, 17, 34, .98), rgba(2, 10, 22, .98)); }
.reference-network-grid article > span:not(.reference-stat-icon) { display: block; margin-top: 9px; color: #a2a7c7; font-size: 10px; line-height: 1.2; }
.reference-network-grid strong { display: block; margin-top: 15px; overflow: hidden; color: #f7f8ff; font-size: clamp(17px, 5.4vw, 27px); font-weight: 540; line-height: 1; letter-spacing: -.06em; text-overflow: ellipsis; white-space: nowrap; }
.reference-network-grid small { display: block; margin-top: 12px; color: #858dad; font-size: 9px; line-height: 1.25; }
.reference-stat-icon { display: block; height: 29px; color: #17d63d; font-size: 31px; line-height: .8; text-shadow: 0 0 12px rgba(20, 230, 58, .65); }
.reference-power-stat .reference-stat-icon { color: #178bff; text-shadow: 0 0 13px rgba(36, 143, 255, .8); }
.reference-load-stat { display: grid; grid-template-rows: auto 1fr auto; justify-items: start; }
.reference-load-stat > span { color: #a2a7c7; font-size: 10px; }
.reference-load-ring { position: relative; display: grid; width: 76px; height: 76px; place-items: center; margin: 5px auto 0; border-radius: 50%; background: conic-gradient(#1d99ff 0 calc(var(--load) * .48), #9842ff calc(var(--load) * .48) var(--load), rgba(66, 75, 127, .25) var(--load) 100%); box-shadow: 0 0 16px rgba(76, 56, 255, .36); }
.reference-load-ring::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #061025; }
.reference-load-ring b { position: relative; z-index: 1; color: #c86bff; font-size: 18px; font-weight: 570; letter-spacing: -.05em; }
.reference-load-stat small { margin-top: 0; white-space: nowrap; }
.reference-load-stat .online-dot { width: 8px; height: 8px; margin-right: 4px; }

.reference-assets { display: grid; gap: 20px; }
.reference-asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.reference-asset-card { position: relative; min-height: 322px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 24px 19px 19px; border: 1px solid rgba(151, 112, 255, .78); border-radius: 23px; color: #f5f5ff; background: radial-gradient(circle 14rem at 48% 50%, rgba(72, 47, 255, .2), transparent 58%), linear-gradient(145deg, rgba(6, 13, 30, .99), rgba(4, 10, 23, .99)); text-align: left; box-shadow: inset 0 0 22px rgba(91, 51, 255, .15), 0 0 18px rgba(102, 55, 255, .18); }
.reference-asset-card::before { content: ""; position: absolute; top: -30%; left: -23%; width: 145%; height: 145%; border: 1px solid rgba(73, 117, 255, .22); border-radius: 50%; box-shadow: 0 0 0 22px rgba(41, 88, 255, .04), 0 0 0 47px rgba(87, 53, 255, .025); }
.reference-asset-card.energy { border-color: rgba(94, 121, 255, .82); background: radial-gradient(circle 14rem at 48% 50%, rgba(35, 101, 255, .18), transparent 58%), linear-gradient(145deg, rgba(5, 14, 33, .99), rgba(3, 9, 23, .99)); }
.reference-asset-title { position: relative; z-index: 1; color: #a88aff; font-size: clamp(20px, 6.7vw, 35px); font-weight: 680; letter-spacing: -.055em; }
.reference-asset-card.energy .reference-asset-title { color: #8eb4ff; }
.reference-asset-card > strong { position: relative; z-index: 1; display: block; margin-top: 32px; overflow: hidden; color: #fff; font-size: clamp(46px, 14.5vw, 76px); font-weight: 580; line-height: .82; letter-spacing: -.09em; text-overflow: ellipsis; white-space: nowrap; }
.reference-asset-card > em { position: relative; z-index: 1; display: block; margin-top: 13px; color: #b544ff; font-size: clamp(19px, 6.2vw, 33px); font-style: normal; font-weight: 600; letter-spacing: -.05em; }
.reference-asset-card.energy > strong em { color: #f3f6ff; font-size: .45em; font-style: normal; letter-spacing: -.04em; }
.reference-asset-card > p { position: relative; z-index: 1; margin: 20px 0 0; color: #dfe3f2; font-size: 14px; line-height: 1.3; }
.reference-asset-card > small { position: relative; z-index: 1; display: block; margin-top: 9px; color: #9ca5c2; font-size: 11px; line-height: 1.3; }
.reference-asset-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 51px; margin-top: auto; border: 1px solid rgba(219, 188, 255, .56); border-radius: 13px; color: #fff; background: linear-gradient(115deg, #5619e5, #7a1fff 72%, #a13dff); box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 8px 17px rgba(88, 30, 240, .33); font-size: 13px; font-weight: 700; }
.reference-asset-action i { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 25px; font-style: normal; font-weight: 300; line-height: 1; }
.reference-earnings-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; border: 1px solid rgba(20, 160, 195, .55); border-radius: 20px; background: linear-gradient(135deg, rgba(3, 19, 37, .99), rgba(2, 10, 24, .99)); }
.reference-earnings-card > div { min-width: 0; padding: 22px 18px; }
.reference-earnings-card > div + div { border-left: 1px solid rgba(135, 151, 206, .21); }
.reference-earnings-card span { display: block; color: #a4acc7; font-size: 12px; }
.reference-earnings-card strong { display: block; margin-top: 13px; overflow: hidden; color: #18a7ff; font-size: clamp(28px, 9vw, 48px); font-weight: 510; line-height: .9; letter-spacing: -.085em; text-overflow: ellipsis; white-space: nowrap; }
.reference-earnings-card strong em { color: #5a81c6; font-size: .43em; font-style: normal; letter-spacing: -.04em; }
.reference-earnings-card.personal-monthly-income { grid-template-columns: minmax(0, 1fr); }
.reference-earnings-card.personal-monthly-income > div { display: grid; min-height: 96px; place-content: center; padding: 17px 18px; text-align: center; }
.reference-earnings-card.personal-monthly-income small { display: block; margin-top: 8px; color: #839bc8; font-size: 10px; line-height: 1.2; }

/* Compact Telegram Mini App pass for the GPUM reference layout. */
.dashboard-main { gap: 15px; }
.demo-banner-home { margin-bottom: 6px; padding: 5px 8px; font-size: 9px; }
.reference-home { gap: 14px; }
.reference-home-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 45px; padding: 0 2px; }
.reference-brand { display: flex; align-items: center; gap: 5px; min-width: 0; }
.reference-brand > strong { color: #eeeaff; font-size: 13px; font-weight: 780; letter-spacing: .02em; }
.reference-wallet-pill { display: flex; align-items: center; justify-self: end; gap: 6px; min-width: 0; max-width: 86px; min-height: 37px; padding: 5px 7px; border: 1px solid rgba(35, 155, 255, .52); border-radius: 12px; color: #e7f3ff; background: rgba(7, 26, 52, .86); text-align: left; }
.reference-wallet-pill > span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #148dff, #2764ff); font-size: 17px; font-weight: 700; }
.reference-wallet-pill div { min-width: 0; }
.reference-wallet-pill small,
.reference-wallet-pill strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-wallet-pill small { color: #92a8c8; font-size: 8px; line-height: 1; }
.reference-wallet-pill strong { margin-top: 3px; color: #e6f2ff; font-size: 9px; font-weight: 720; }
.reference-brand .reference-logo { width: 37px; height: 37px; flex: 0 0 auto; overflow: hidden; border-radius: 10px; background: #030812; }
.reference-brand .reference-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-energy-pill { justify-self: end; gap: 5px; min-width: 0; min-height: 37px; padding: 5px 8px; border-radius: 12px; }
.reference-energy-pill > span { font-size: 24px; }
.reference-energy-pill div { min-width: 0; }
.reference-energy-pill small { display: block; color: #8494bb; font-size: 7px; line-height: 1; }
.reference-energy-pill strong { display: block; overflow: hidden; margin-top: 2px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reference-energy-pill i { padding-left: 0; font-size: 21px; }
.reference-hero-card { min-height: 178px; padding: 21px 18px; border-radius: 20px; }
.reference-hero-card::before { right: -13%; bottom: -68%; width: 77%; height: 154%; }
.reference-hero-copy { max-width: 53%; }
.reference-hero-copy h2 { font-size: clamp(29px, 8.6vw, 40px); }
.reference-hero-copy p { max-width: 172px; margin-top: 12px; font-size: 11px; line-height: 1.42; }
.reference-gpu-art { right: 0; bottom: 0; width: 61%; height: 100%; object-fit: cover; object-position: 70% center; transform: none; filter: saturate(1.08) contrast(1.06); }
.reference-network-grid { gap: 7px; }
.reference-network-grid article { min-height: 116px; padding: 10px 9px; border-radius: 15px; }
.reference-network-grid article > span:not(.reference-stat-icon) { margin-top: 6px; font-size: 9px; }
.reference-network-grid strong { margin-top: 9px; font-size: clamp(15px, 4.8vw, 21px); }
.reference-network-grid small { margin-top: 7px; font-size: 8px; }
.reference-stat-icon { height: 22px; font-size: 24px; }
.reference-load-stat { display: block; }
.reference-load-ring { width: 54px; height: 54px; margin: 4px auto 0; }
.reference-load-ring::after { inset: 6px; }
.reference-load-ring b { font-size: 13px; }
.reference-load-chart { position: absolute; right: 7px; bottom: 27px; width: 42px; color: #a44dff; filter: drop-shadow(0 0 6px rgba(164, 77, 255, .72)); }
.reference-load-stat small { position: absolute; bottom: 8px; left: 9px; margin: 0; }
.reference-assets { gap: 13px; }
.reference-asset-grid { gap: 9px; }
.reference-asset-card { min-height: 224px; padding: 15px 12px 12px; border-radius: 18px; }
.reference-asset-title { font-size: clamp(18px, 5.7vw, 26px); }
.reference-asset-card > strong { margin-top: 21px; font-size: clamp(34px, 10.5vw, 49px); }
.reference-asset-card > em { margin-top: 8px; font-size: clamp(15px, 4.8vw, 22px); }
.reference-asset-card > p { margin-top: 12px; font-size: 10px; }
.reference-asset-card > small { margin-top: 6px; font-size: 9px; }
.reference-asset-action { min-height: 39px; gap: 7px; border-radius: 10px; font-size: 10px; }
.reference-asset-action i { width: 24px; height: 24px; font-size: 20px; }
.reference-earnings-card { border-radius: 17px; }
.reference-earnings-card > div { padding: 15px 13px; }
.reference-earnings-card span { font-size: 10px; }
.reference-earnings-card strong { margin-top: 8px; font-size: clamp(23px, 7.4vw, 34px); }
.reference-earnings-card > div:last-child strong { font-size: clamp(16px, 5.2vw, 25px); }

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(103, 129, 194, .3);
  border-radius: 28px;
  background:
    radial-gradient(circle 18rem at 92% 14%, rgba(92, 41, 243, .26), transparent 64%),
    linear-gradient(132deg, rgba(8, 19, 36, .98), rgba(6, 13, 27, .98));
  box-shadow: inset 0 1px 0 rgba(214, 226, 255, .04), var(--shadow);
}

.hero-dashboard { min-height: 460px; padding: 42px 26px 25px; }

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .48;
  background-image: linear-gradient(rgba(155, 135, 223, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 135, 223, .045) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 74%);
  pointer-events: none;
}

.hero-copy-wrap,
.hero-stat-grid { position: relative; z-index: 2; }

.eyebrow {
  margin: 0 0 7px;
  color: var(--accent-soft);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero h2 {
  max-width: 260px;
  margin: 0;
  color: #f8f8ff;
  font-size: clamp(37px, 10vw, 52px);
  font-weight: 780;
  line-height: .99;
  letter-spacing: -.065em;
}

.hero-copy {
  max-width: 274px;
  margin: 19px 0 0;
  color: #c2c8db;
  font-size: 16px;
  line-height: 1.45;
}

.hero-gpu-visual {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: -44px;
  width: min(68%, 400px);
  pointer-events: none;
}

.gpu-artwork { display: block; width: 100%; height: auto; filter: drop-shadow(-13px 20px 22px rgba(0, 0, 0, .42)); }

.hero-stat-grid {
  position: absolute;
  right: 12px;
  bottom: 25px;
  left: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-stat {
  min-height: 147px;
  overflow: hidden;
  padding: 20px 18px 15px;
  border: 1px solid rgba(157, 178, 236, .16);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(17, 29, 50, .88), rgba(13, 23, 43, .78));
  box-shadow: inset 0 1px 0 rgba(231, 235, 255, .035);
}

.hero-stat span,
.hero-stat small { display: block; }
.hero-stat span { color: #b1b9cf; font-size: 12px; }
.hero-stat strong { display: block; margin-top: 8px; color: #fbfbff; font-size: clamp(31px, 8.6vw, 42px); font-weight: 520; line-height: 1; letter-spacing: -.065em; }
.hero-stat strong em { color: #f7f7fc; font-size: .49em; font-style: normal; letter-spacing: -.03em; }
.hero-stat small { margin-top: 17px; color: #aeb8cc; font-size: 11px; line-height: 1.35; }

.online-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px rgba(18, 225, 91, .8);
  vertical-align: middle;
}

.hero-load { padding-right: 14px; background: linear-gradient(145deg, rgba(25, 29, 57, .93), rgba(14, 20, 41, .86)); }
.hero-load strong { color: #9d61ff; }
.load-chart { display: block; width: 100%; height: 44px; margin: -1px 0 1px; overflow: visible; }
.load-pending { display: grid; height: 44px; place-items: center start; color: var(--muted-dim); font-size: 10px; }
.hero-load small { margin-top: 4px; }

.dashboard-indicators { margin-top: -1px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 3px 13px; }
.section-heading h2 { margin: 0; color: #f7f8ff; font-size: 27px; line-height: 1.1; letter-spacing: -.052em; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.38; }
.dashboard-heading { margin-bottom: 17px; }

.earnings-panel {
  position: relative;
  min-height: 179px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 26px 24px;
  border: 1px solid #8d50ff;
  border-radius: 24px;
  background:
    radial-gradient(circle 11rem at 90% 46%, rgba(132, 63, 255, .34), transparent 68%),
    radial-gradient(circle 14rem at 12% -60%, rgba(178, 139, 255, .22), transparent 67%),
    linear-gradient(125deg, #15113e, #080f27 58%, #100b32);
  box-shadow: inset 0 0 24px rgba(119, 73, 255, .11), 0 18px 38px rgba(22, 8, 83, .28);
}

.earnings-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 48%, transparent 57%);
  transform: translateX(-80%);
  animation: sheen 8s ease-in-out infinite;
  pointer-events: none;
}

.earnings-copy { position: relative; z-index: 2; min-width: 0; }
.earnings-copy > span { display: block; color: #c3b7f6; font-size: 15px; }
.earnings-copy strong { display: block; margin-top: 15px; color: #f7f5ff; font-size: clamp(48px, 16vw, 79px); font-weight: 450; line-height: .86; letter-spacing: -.085em; white-space: nowrap; }
.earnings-copy strong em { color: #b398ff; font-size: .42em; font-style: normal; letter-spacing: -.04em; }
.earnings-copy small { display: block; margin-top: 15px; color: #a58afa; font-size: 14px; }

.earning-orbit {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -1px;
  width: 132px;
  height: 132px;
  border: 2px solid rgba(158, 109, 255, .82);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 10px rgba(147, 91, 255, .08), 0 0 0 19px rgba(147, 91, 255, .06), 0 0 27px rgba(126, 59, 255, .7), inset 0 0 22px rgba(124, 62, 255, .22);
}

.earning-orbit::before,
.earning-orbit::after { content: ""; position: absolute; border: 1px solid rgba(177, 139, 255, .38); border-radius: 50%; }
.earning-orbit::before { inset: 10px; }
.earning-orbit::after { inset: 21px; }
.earning-orbit span { position: absolute; inset: 0; display: grid; place-items: center; color: #b98bff; font-size: 70px; font-weight: 300; line-height: 1; text-shadow: 0 0 18px rgba(163, 100, 255, .9); }

.personal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.personal-stat { position: relative; min-height: 176px; overflow: hidden; padding: 15px 12px 17px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(13, 26, 45, .95), rgba(8, 18, 33, .95)); box-shadow: inset 0 1px 0 rgba(218, 228, 255, .025); }
.stat-icon { display: grid; width: 35px; height: 35px; place-items: center; margin-bottom: 11px; border-radius: 9px; color: var(--accent-soft); background: rgba(128, 72, 255, .17); font-size: 22px; font-weight: 700; line-height: 1; }
.personal-stat.share .stat-icon { color: #5cf480; background: rgba(42, 189, 68, .16); font-size: 20px; }
.personal-stat.capacity .stat-icon { color: #3596ff; background: rgba(30, 120, 255, .15); }
.personal-stat.revenue .stat-icon { color: #b387ff; background: rgba(128, 72, 255, .19); }
.personal-stat div > span { display: block; min-height: 31px; color: #aeb7cd; font-size: 12px; line-height: 1.24; }
.personal-stat strong { display: block; margin-top: 6px; color: #f7f8ff; font-size: clamp(21px, 6vw, 31px); font-weight: 520; line-height: .97; letter-spacing: -.06em; white-space: nowrap; }
.personal-stat strong em { font-size: .5em; font-style: normal; letter-spacing: -.025em; }
.personal-stat small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.22; }
.personal-stat b { position: absolute; right: 12px; bottom: 17px; left: 12px; height: 4px; overflow: hidden; border-radius: 10px; background: rgba(75, 92, 125, .32); }
.personal-stat b::after { content: ""; display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6b20ff, #b365ff); box-shadow: 0 0 12px rgba(142, 84, 255, .62); }
.personal-stat.share b::after { background: linear-gradient(90deg, #17e65f, #44bb52); box-shadow: 0 0 12px rgba(25, 220, 91, .42); }
.personal-stat.capacity b::after { background: linear-gradient(90deg, #1387ff, #3e8cff); box-shadow: 0 0 12px rgba(45, 124, 255, .42); }

.dashboard-actions { display: grid; grid-template-columns: 1.08fr 1fr; gap: 12px; margin-top: 21px; }
.primary-button,
.secondary-button,
.ghost-button,
.chip-button { border-radius: 15px; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover { transform: translateY(-1px); }
.primary-button { border: 1px solid rgba(206, 185, 255, .5); padding: 13px 16px; color: #fff; background: linear-gradient(112deg, #5c16e7, #8f2cff 75%, #a354ff); box-shadow: 0 9px 22px rgba(93, 23, 236, .34), inset 0 1px 0 rgba(255,255,255,.18); font-weight: 750; }
.primary-button:hover { background: linear-gradient(112deg, #6a1bf3, #9c40ff 75%, #ae62ff); }
.primary-button.wide { width: 100%; }
.secondary-button { border: 1px solid rgba(88, 136, 231, .54); padding: 12px 14px; color: #f2f5ff; background: linear-gradient(135deg, rgba(13, 29, 54, .9), rgba(15, 25, 52, .95)); font-weight: 700; }
.secondary-button:hover { border-color: rgba(136, 170, 255, .78); background: rgba(30, 45, 81, .92); }
.ghost-button { border: 0; padding: 10px 0; color: var(--muted); background: transparent; font-weight: 700; }
.ghost-button.wide { width: 100%; }
.chip-button { border: 1px solid var(--line); padding: 8px 11px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 12px; }
.chip-button.active { border-color: rgba(148, 102, 255, .56); color: var(--accent-soft); background: rgba(128, 72, 255, .11); }
.action-button { min-height: 63px; font-size: 16px; }
.action-button span { display: inline-grid; width: 34px; height: 34px; place-items: center; margin: -7px 10px -7px -8px; border: 2px solid currentColor; border-radius: 50%; font-size: 27px; font-weight: 350; line-height: 1; vertical-align: middle; }
.secondary-button.action-button span { font-size: 25px; }

.network-status { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-top: 20px; padding: 17px 16px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(130deg, rgba(12, 24, 44, .93), rgba(10, 20, 36, .9)); }
.status-shield { display: grid; width: 45px; height: 50px; place-items: center; clip-path: polygon(50% 0, 92% 15%, 92% 56%, 50% 100%, 8% 56%, 8% 15%); color: #ab7aff; background: linear-gradient(145deg, #b58dff, #5f19ec); box-shadow: 0 0 20px rgba(135, 76, 255, .58); font-size: 26px; font-weight: 800; }
.network-status strong { display: block; color: #f4f6ff; font-size: 16px; letter-spacing: -.025em; }
.network-status p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.status-meta { text-align: right; white-space: nowrap; }
.status-meta b,
.status-meta small { display: block; }
.status-meta b { color: var(--good); font-size: 12px; font-weight: 620; }
.status-meta small { margin-top: 7px; color: var(--muted); font-size: 11px; }
.scenario-disclaimer { margin: 12px 2px 0; color: var(--muted-dim); font-size: 11px; line-height: 1.4; text-align: center; }

.catalogue-section,
.screen-section { scroll-margin-top: 16px; }
.card-stack { display: grid; gap: 12px; }
.gpu-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(132deg, rgba(13, 27, 48, .94), rgba(8, 18, 34, .96)); box-shadow: inset 0 1px 0 rgba(223, 230, 255, .025); }
.gpu-card-pending { border-style: dashed; opacity: .78; }
.gpu-card::before { content: ""; position: absolute; top: -38px; right: -25px; width: 125px; height: 125px; border: 20px solid rgba(132, 72, 255, .09); border-radius: 50%; }
.gpu-card-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.gpu-card h3 { max-width: 75%; margin: 0; color: #f7f8ff; font-size: 18px; letter-spacing: -.04em; }
.gpu-card .chip { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.tag { flex: 0 0 auto; padding: 5px 8px; border-radius: 99px; color: var(--accent-soft); background: rgba(132, 72, 255, .14); font-size: 10px; font-weight: 780; }
.metric-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin: 19px 0 16px; }
.metric { min-width: 0; }
.metric span { display: block; color: var(--muted); font-size: 10px; line-height: 1.25; }
.metric strong { display: block; margin-top: 5px; overflow: hidden; color: #f2f5ff; font-size: 14px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.metric strong.accent { color: var(--accent-soft); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.availability { color: var(--muted); font-size: 11px; }
.availability b { color: var(--good); }

.network-section { margin-bottom: 23px; }
.network-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; padding: 17px; border: 1px solid rgba(150, 106, 255, .32); border-radius: 20px; background: linear-gradient(132deg, rgba(32, 20, 72, .78), rgba(10, 23, 44, .95)); }
.network-overview span,
.telemetry-card span { display: block; color: var(--muted); font-size: 10px; line-height: 1.3; }
.network-overview strong { display: block; margin-top: 7px; color: #f7f8ff; font-size: 22px; letter-spacing: -.05em; }
.network-overview small { display: block; margin-top: 6px; color: var(--muted-dim); font-size: 10px; line-height: 1.35; }
.telemetry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.telemetry-card { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 22, 39, .82); }
.telemetry-card strong { display: block; margin-top: 4px; color: #eff3ff; font-size: 13px; letter-spacing: -.03em; }
.telemetry-card strong.accent { color: var(--accent-soft); }
.scenario-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 19px; background: rgba(12, 24, 43, .82); }
.scenario-card .stat-icon { margin: 0; }
.scenario-card strong { display: block; color: #f4f5ff; font-size: 14px; line-height: 1.3; }
.scenario-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.38; }
.inline-link { border: 0; padding: 4px 0; color: #a98aff; background: transparent; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.portfolio-card { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(12, 25, 44, .95), rgba(8, 18, 33, .96)); }
.portfolio-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.portfolio-card h3 { margin: 0; color: #f6f7ff; font-size: 17px; letter-spacing: -.035em; }
.portfolio-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.ownership { flex: 0 0 auto; padding: 6px 8px; border-radius: 9px; color: var(--accent-soft); background: rgba(132, 72, 255, .13); font-size: 11px; font-weight: 780; }
.portfolio-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }
.portfolio-metrics div { padding: 10px 0 0; border-top: 1px solid var(--line); }
.portfolio-metrics span { display: block; color: var(--muted); font-size: 10px; }
.portfolio-metrics strong { display: block; margin-top: 5px; color: #f3f5ff; font-size: 13px; letter-spacing: -.035em; }
.referral-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 17px; border: 1px solid rgba(146, 104, 255, .38); border-radius: 20px; background: linear-gradient(135deg, rgba(34, 20, 82, .76), rgba(8, 20, 38, .95)); }
.referral-card .stat-icon { margin: 0; }
.referral-card span:not(.stat-icon) { display: block; color: var(--muted); font-size: 11px; }
.referral-card strong { display: block; margin-top: 4px; overflow: hidden; color: var(--text); font-size: 18px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.referral-card .secondary-button { padding: 10px 11px; font-size: 11px; }
.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.referral-stats div { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 22, 39, .8); }
.referral-stats span { display: block; color: var(--muted); font-size: 10px; }
.referral-stats strong { display: block; margin-top: 5px; color: var(--text); font-size: 19px; }
.referral-claim { margin-top: 14px; }
.referral-claim > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.referral-claim .primary-button { padding: 10px 12px; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.empty-state { padding: 36px 20px; border: 1px dashed rgba(157, 169, 204, .34); border-radius: 19px; color: var(--muted); background: rgba(9, 20, 35, .64); text-align: center; }
.empty-state h3 { margin: 0 0 7px; color: var(--text); font-size: 17px; }
.empty-state p { margin: 0 auto 16px; max-width: 320px; font-size: 13px; line-height: 1.5; }

.activity-list { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: rgba(9, 19, 34, .92); }
.activity-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--accent-soft); background: rgba(128, 72, 255, .14); font-size: 17px; }
.activity-item h3 { margin: 0; overflow: hidden; color: #f0f3ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.activity-item p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.activity-amount { color: var(--text); font-size: 12px; font-weight: 750; text-align: right; }
.activity-status { display: block; margin-top: 3px; color: var(--good); font-size: 10px; text-align: right; }
.activity-status.pending { color: var(--warning); }
.risk-callout { margin-top: 22px; color: #c5cede; border-color: var(--line); background: rgba(11, 23, 40, .78); }
.risk-callout b { color: var(--text); }

.screen-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 2px 2px 16px; }
.screen-heading-row h2 { margin: 0; color: #f8f8ff; font-size: 34px; line-height: 1; letter-spacing: -.065em; }
.screen-heading-row > div > p:not(.eyebrow) { max-width: 390px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.marketplace-state { flex: 0 0 auto; max-width: 130px; margin-top: 6px; padding: 7px 9px; border: 1px solid rgba(255, 199, 107, .35); border-radius: 99px; color: #f6d99c; background: rgba(122, 86, 26, .18); font-size: 9px; font-weight: 760; line-height: 1.2; text-align: center; }
.marketplace-state.preview { border-color: rgba(117, 171, 255, .42); color: #a6c9ff; background: rgba(32, 95, 181, .15); }

.marketplace-screen,
.partners-screen,
.payouts-screen,
.energy-screen,
.purchase-screen { display: grid; gap: 14px; }
.marketplace-hero,
.partners-hero { position: relative; overflow: hidden; min-height: 232px; padding: 26px 22px; border: 1px solid rgba(165, 105, 255, .55); border-radius: 24px; background: radial-gradient(circle 14rem at 96% 20%, rgba(123, 55, 255, .37), transparent 66%), linear-gradient(135deg, rgba(30, 13, 72, .94), rgba(8, 20, 42, .98)); box-shadow: inset 0 1px 0 rgba(243, 235, 255, .08), 0 20px 42px rgba(12, 2, 46, .34); }
.marketplace-hero::before,
.partners-hero::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(176, 133, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(176, 133, 255, .08) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(90deg, #000, transparent 78%); }
.marketplace-hero-copy,
.partners-hero > div:first-child { position: relative; z-index: 2; max-width: 250px; }
.marketplace-hero-copy > span,
.partners-hero > div:first-child > span { display: block; color: #cab7ff; font-size: 12px; }
.marketplace-hero-copy strong,
.partners-hero strong { display: block; margin-top: 9px; color: #fff; font-size: clamp(30px, 8vw, 43px); font-weight: 720; line-height: .98; letter-spacing: -.07em; }
.marketplace-hero-copy p,
.partners-hero p { margin: 13px 0 0; color: #b9c1d7; font-size: 12px; line-height: 1.48; }
.marketplace-art { position: absolute; z-index: 1; right: -60px; bottom: -26px; width: 65%; opacity: .93; transform: rotate(-5deg); }
.marketplace-art .gpu-artwork { filter: drop-shadow(-12px 18px 22px rgba(0, 0, 0, .48)) hue-rotate(10deg) saturate(1.25); }
.marketplace-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.marketplace-summary-grid article,
.partner-stats-grid article { min-height: 116px; padding: 15px 12px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(13, 26, 46, .98), rgba(8, 17, 33, .96)); }
.marketplace-summary-grid span,
.partner-stats-grid span { display: block; min-height: 25px; color: var(--muted); font-size: 10px; line-height: 1.2; }
.marketplace-summary-grid strong,
.partner-stats-grid strong { display: block; margin-top: 8px; overflow: hidden; color: #f8f9ff; font-size: clamp(18px, 5.6vw, 28px); font-weight: 560; line-height: .96; letter-spacing: -.065em; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-summary-grid strong em { color: #b695ff; font-size: .48em; font-style: normal; letter-spacing: -.025em; }
.marketplace-summary-grid small,
.partner-stats-grid small { display: block; margin-top: 8px; color: var(--muted-dim); font-size: 9px; line-height: 1.25; }
.marketplace-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px; border: 1px solid rgba(158, 117, 255, .38); border-radius: 20px; background: linear-gradient(120deg, rgba(40, 17, 93, .7), rgba(10, 25, 47, .94)); }
.marketplace-panel > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marketplace-panel h3 { margin: 0; color: #f6f6ff; font-size: 15px; letter-spacing: -.035em; }
.marketplace-panel p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.marketplace-panel .primary-button { flex: 0 0 auto; padding: 11px 12px; font-size: 11px; }
.marketplace-panel-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(194, 165, 255, .55); border-radius: 13px; color: #c7b1ff; background: rgba(123, 59, 255, .18); font-size: 25px; }
.marketplace-guard,
.partners-guard { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--muted); background: rgba(9, 22, 40, .74); }
.marketplace-guard span,
.partners-guard span { color: #8c67ff; font-size: 18px; }
.marketplace-guard p,
.partners-guard p { margin: 0; font-size: 11px; line-height: 1.45; }

.partners-hero { border-color: rgba(43, 184, 255, .42); background: radial-gradient(circle 15rem at 92% 16%, rgba(49, 110, 255, .28), transparent 66%), linear-gradient(135deg, rgba(10, 25, 59, .97), rgba(8, 17, 36, .98)); }
.partners-graphic { position: absolute; z-index: 2; right: 25px; bottom: 37px; display: flex; align-items: center; gap: 6px; color: #b992ff; }
.partners-graphic i { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid currentColor; border-radius: 50%; color: #4fb8ff; font-style: normal; font-size: 0; box-shadow: 0 0 20px rgba(54, 166, 255, .42); }
.partners-graphic i:last-child { color: #c077ff; }
.partners-graphic b { color: #e2d6ff; font-size: 25px; text-shadow: 0 0 15px rgba(188, 131, 255, .8); }
.partner-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.partner-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.partner-steps article { min-height: 132px; padding: 13px 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(8, 19, 35, .78); text-align: center; }
.partner-steps b { display: grid; width: 27px; height: 27px; place-items: center; margin: 0 auto 10px; border: 1px solid rgba(185, 144, 255, .65); border-radius: 50%; color: #c7adff; background: rgba(111, 56, 244, .16); font-size: 12px; }
.partner-steps span,
.partner-steps small { display: block; }
.partner-steps span { color: #f0f2ff; font-size: 11px; font-weight: 720; line-height: 1.25; }
.partner-steps small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.28; }

.payout-hero { position: relative; display: flex; align-items: center; min-height: 196px; overflow: hidden; padding: 25px 22px; border: 1px solid rgba(166, 92, 255, .75); border-radius: 24px; background: radial-gradient(circle 13rem at 93% 48%, rgba(113, 53, 255, .42), transparent 68%), linear-gradient(135deg, #1d124f, #09112a 61%, #170c3d); box-shadow: inset 0 0 26px rgba(128, 72, 255, .16); }
.payout-hero > div:first-child { position: relative; z-index: 2; }
.payout-hero span { display: block; color: #cfbcff; font-size: 14px; }
.payout-hero strong { display: block; margin-top: 14px; color: #fbfaff; font-size: clamp(43px, 13vw, 66px); font-weight: 520; line-height: .88; letter-spacing: -.09em; white-space: nowrap; }
.payout-hero strong em { color: #c3a2ff; font-size: .38em; font-style: normal; letter-spacing: -.035em; }
.payout-hero small { display: block; margin-top: 15px; color: #ad94e7; font-size: 11px; }
.payout-orbit { position: absolute; right: -11px; top: 50%; width: 142px; height: 142px; border: 2px solid rgba(183, 135, 255, .72); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 11px rgba(152, 95, 255, .08), 0 0 0 21px rgba(152, 95, 255, .05), 0 0 28px rgba(116, 55, 255, .74), inset 0 0 24px rgba(122, 69, 255, .24); }
.payout-orbit::before,
.payout-orbit::after { content: ""; position: absolute; border: 1px solid rgba(192, 160, 255, .35); border-radius: inherit; }
.payout-orbit::before { inset: 11px; }
.payout-orbit::after { inset: 24px; }
.payout-orbit span { position: absolute; inset: 0; display: grid; place-items: center; color: #cbaeff; font-size: 70px; text-shadow: 0 0 17px rgba(185, 128, 255, .9); }
.payout-wallet-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: rgba(9, 20, 37, .9); }
.payout-wallet-card span { display: block; color: var(--muted); font-size: 11px; }
.payout-wallet-card strong { display: block; margin-top: 5px; color: #f3f5ff; font-size: 16px; letter-spacing: .025em; }
.payout-wallet-card .secondary-button { flex: 0 0 auto; padding: 10px 12px; font-size: 11px; }
.payout-action { min-height: 58px; font-size: 17px; }
.payout-state-copy { margin: -3px 3px 5px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.payout-history-heading { margin: 10px 2px 0; }
.payout-history-heading h3 { margin: 0; color: #f6f7ff; font-size: 21px; letter-spacing: -.05em; }

.energy-hero,
.purchase-hero { position: relative; overflow: hidden; min-height: 210px; padding: 25px 22px; border: 1px solid rgba(72, 165, 255, .5); border-radius: 24px; background: radial-gradient(circle 13rem at 91% 42%, rgba(31, 145, 255, .3), transparent 66%), linear-gradient(135deg, rgba(8, 35, 65, .98), rgba(7, 19, 40, .98)); box-shadow: inset 0 1px 0 rgba(220, 242, 255, .07), 0 18px 40px rgba(2, 25, 61, .28); }
.energy-hero > div:first-child,
.purchase-hero > div:first-child { position: relative; z-index: 2; }
.energy-hero > div:first-child > span { display: block; color: #8dd7ff; font-size: 13px; }
.energy-hero strong { display: block; margin-top: 11px; color: #f8fbff; font-size: clamp(60px, 17vw, 86px); font-weight: 520; line-height: .84; letter-spacing: -.095em; }
.energy-hero p { margin: 15px 0 0; max-width: 230px; color: #a9c2da; font-size: 12px; line-height: 1.45; }
.energy-orbit { position: absolute; top: 50%; right: -7px; width: 142px; height: 142px; border: 2px solid rgba(96, 193, 255, .65); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 11px rgba(57, 158, 255, .07), 0 0 0 21px rgba(57, 158, 255, .045), 0 0 29px rgba(32, 145, 255, .56), inset 0 0 24px rgba(28, 124, 255, .2); }
.energy-orbit::before,
.energy-orbit::after { content: ""; position: absolute; border: 1px solid rgba(142, 214, 255, .34); border-radius: inherit; }
.energy-orbit::before { inset: 11px; }
.energy-orbit::after { inset: 24px; }
.energy-orbit span { position: absolute; inset: 0; display: grid; place-items: center; color: #8ed7ff; font-size: 72px; font-weight: 350; text-shadow: 0 0 18px rgba(59, 171, 255, .85); }
.energy-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.energy-stat-grid article { min-height: 113px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(10, 29, 52, .96), rgba(7, 18, 34, .98)); }
.energy-stat-grid span { display: block; min-height: 24px; color: var(--muted); font-size: 10px; line-height: 1.2; }
.energy-stat-grid strong { display: block; margin-top: 8px; overflow: hidden; color: #f8fbff; font-size: clamp(18px, 5.8vw, 28px); font-weight: 560; line-height: .96; letter-spacing: -.065em; text-overflow: ellipsis; white-space: nowrap; }
.energy-stat-grid small { display: block; margin-top: 8px; color: var(--muted-dim); font-size: 9px; line-height: 1.25; }
.energy-fleet-card { overflow: hidden; border: 1px solid rgba(84, 154, 231, .3); border-radius: 20px; background: linear-gradient(135deg, rgba(9, 29, 54, .86), rgba(7, 17, 33, .96)); }
.energy-fleet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 16px; border-bottom: 1px solid var(--line); }
.energy-fleet-heading h3 { margin: 0; color: #f3f7ff; font-size: 16px; letter-spacing: -.04em; }
.energy-fleet-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.energy-fleet-heading > span { flex: 0 0 auto; padding: 6px 8px; border-radius: 10px; color: #a8dcff; background: rgba(38, 133, 255, .13); font-size: 10px; font-weight: 750; }
.energy-fleet-list { display: grid; }
.energy-fleet-list article { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.energy-fleet-list article:last-child { border-bottom: 0; }
.energy-fleet-list strong,
.energy-fleet-list small,
.energy-fleet-list span,
.energy-fleet-list b { display: block; }
.energy-fleet-list strong { color: #edf6ff; font-size: 13px; }
.energy-fleet-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.energy-fleet-list article > div:last-child { text-align: right; }
.energy-fleet-list span { color: var(--muted); font-size: 10px; }
.energy-fleet-list b { margin-top: 4px; color: #9fdcff; font-size: 15px; letter-spacing: -.03em; }
.energy-guard,
.purchase-risk-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--muted); background: rgba(8, 20, 37, .78); }
.energy-guard > span,
.purchase-risk-card > span { color: #7fcaff; font-size: 18px; }
.energy-guard p,
.purchase-risk-card p { margin: 0; font-size: 11px; line-height: 1.48; }

.purchase-navigation { display: flex; align-items: center; gap: 10px; min-height: 38px; margin: 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.back-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: #cbb9ff; background: rgba(123, 69, 255, .12); font-size: 22px; line-height: 1; }
.purchase-hero { border-color: rgba(165, 105, 255, .55); background: radial-gradient(circle 13rem at 91% 42%, rgba(133, 56, 255, .36), transparent 66%), linear-gradient(135deg, rgba(35, 14, 80, .98), rgba(8, 18, 39, .98)); }
.purchase-hero h2 { margin: 0; color: #fff; font-size: clamp(39px, 11vw, 57px); font-weight: 750; line-height: .94; letter-spacing: -.08em; }
.purchase-hero p:not(.eyebrow) { max-width: 240px; margin: 15px 0 0; color: #c1c6dc; font-size: 13px; line-height: 1.43; }
.purchase-token-mark { position: absolute; right: 21px; bottom: 22px; display: grid; width: 105px; height: 105px; place-items: center; border: 2px solid rgba(203, 168, 255, .7); border-radius: 50%; color: #d2baff; background: radial-gradient(circle at 34% 28%, rgba(220, 195, 255, .3), rgba(92, 35, 232, .28) 55%, rgba(13, 13, 47, .72)); box-shadow: 0 0 0 11px rgba(127, 65, 255, .08), 0 0 25px rgba(123, 53, 255, .6); font-size: 51px; font-weight: 620; letter-spacing: -.09em; }
.purchase-offering-card,
.purchase-quantity-card,
.purchase-payment-card { padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(13, 26, 48, .96), rgba(8, 18, 34, .98)); }
.purchase-offering-card { position: relative; overflow: hidden; display: grid; gap: 16px; }
.purchase-offering-card > div:first-child > span { display: block; color: var(--muted); font-size: 11px; }
.purchase-offering-card > div:first-child > strong { display: block; margin-top: 5px; color: #f6f7ff; font-size: 20px; letter-spacing: -.05em; }
.purchase-offering-card > div:first-child > small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.purchase-offering-card > .tag { position: absolute; top: 17px; right: 17px; }
.purchase-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.purchase-metrics div { min-width: 0; padding-top: 11px; border-top: 1px solid var(--line); }
.purchase-metrics span { display: block; color: var(--muted); font-size: 9px; line-height: 1.2; }
.purchase-metrics strong { display: block; margin-top: 5px; overflow: hidden; color: #f4f5ff; font-size: 13px; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.purchase-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: #e2e9ff; font-size: 12px; font-weight: 730; }
.purchase-field-heading button { border: 0; padding: 0; color: var(--accent-soft); background: transparent; font-size: 11px; font-weight: 700; }
.quantity-control { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 8px; }
.quantity-control > button { display: grid; height: 49px; place-items: center; border: 1px solid rgba(155, 119, 255, .43); border-radius: 14px; color: #d6c5ff; background: rgba(114, 55, 234, .12); font-size: 26px; line-height: 1; }
.quantity-control .number-input { height: 49px; padding: 8px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; }
.purchase-payment-card .segmented { margin-top: 1px; }
.purchase-quote { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.purchase-quote > div { min-width: 0; text-align: right; }
.purchase-quote strong { color: #fff; font-size: 21px; letter-spacing: -.045em; }
.purchase-quote small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.purchase-risk-card strong { display: block; margin-bottom: 4px; color: #ebf1ff; font-size: 12px; }
.purchase-confirm { min-height: 60px; font-size: 17px; }

.bottom-nav {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin: 0 auto;
  padding: 14px 13px max(13px, env(safe-area-inset-bottom));
  border: 1px solid rgba(126, 146, 194, .18);
  border-bottom: 0;
  border-radius: 25px 25px 0 0;
  background: rgba(9, 20, 36, .91);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(221, 232, 255, .035);
  backdrop-filter: blur(18px);
}

.bottom-nav-item { display: grid; place-items: center; gap: 6px; min-height: 54px; border: 0; border-radius: 14px; padding: 2px 3px; color: #737f99; background: transparent; }
.bottom-nav-item span { display: grid; width: 28px; height: 28px; place-items: center; }
.bottom-nav-item svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav-item small { color: inherit; font-size: 10px; font-weight: 600; line-height: 1; }
.bottom-nav-item.active { color: var(--accent); background: linear-gradient(180deg, rgba(122, 60, 255, .14), transparent); }
.bottom-nav-item.active small { color: #b486ff; }

.modal-layer { position: fixed; z-index: 30; inset: 0; display: grid; align-items: end; padding: 12px; visibility: hidden; background: rgba(0, 3, 10, .72); opacity: 0; transition: opacity .17s ease, visibility .17s ease; }
.modal-layer.open { visibility: visible; opacity: 1; }
.modal { width: min(100%, 650px); max-height: min(88vh, 770px); margin: 0 auto; overflow: auto; border: 1px solid rgba(159, 174, 225, .18); border-radius: 25px 25px 19px 19px; background: linear-gradient(145deg, #0e1d31, #091523); box-shadow: 0 -15px 50px rgba(0,0,0,.4); }
.compact-modal { max-width: 440px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 20px 12px; }
.modal-header h2 { margin: 0; color: #f5f6ff; font-size: 21px; letter-spacing: -.045em; }
.modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.close-button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.03); font-size: 18px; }
.modal-body { padding: 4px 20px 23px; }
.modal-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 18px; }
.modal-summary div { padding: 12px; border: 1px solid rgba(154, 171, 220, .09); border-radius: 13px; background: rgba(255,255,255,.035); }
.modal-summary span { display: block; color: var(--muted); font-size: 10px; }
.modal-summary strong { display: block; margin-top: 5px; color: #f2f5ff; font-size: 15px; }
.field-label { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; color: #d7e0f4; font-size: 12px; font-weight: 750; }
.field-label button { border: 0; padding: 0; color: var(--accent-soft); background: transparent; font-size: 11px; }
.number-input, .text-input { width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 13px; outline: none; color: var(--text); background: rgba(0,0,0,.15); }
.number-input:focus, .text-input:focus { border-color: rgba(151, 101, 255, .7); box-shadow: 0 0 0 3px rgba(131, 73, 255, .13); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.payment-option { border: 1px solid var(--line); border-radius: 13px; padding: 12px; color: var(--muted); background: rgba(255,255,255,.025); text-align: left; }
.payment-option.selected { border-color: rgba(151, 101, 255, .68); color: var(--text); background: rgba(128, 72, 255, .11); }
.payment-option strong, .payment-option span { display: block; }
.payment-option strong { font-size: 13px; }
.payment-option span { margin-top: 3px; font-size: 10px; }
.payment-option:disabled { border-style: dashed; }
.quote-row { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin: 18px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.quote-row strong { color: var(--text); font-size: 16px; }
.modal-note { margin: 13px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.risk-list { display: grid; gap: 9px; margin: 12px 0 22px; padding: 0; list-style: none; }
.risk-list li { position: relative; padding-left: 19px; color: #c4cde2; font-size: 12px; line-height: 1.45; }
.risk-list li::before { content: "•"; position: absolute; left: 4px; color: var(--accent-soft); }
.wallet-status { display: flex; align-items: center; gap: 12px; margin: 12px 0 19px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.wallet-status-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: #d6c6ff; background: rgba(128, 72, 255, .2); font-size: 20px; font-weight: 700; }
.wallet-status span:not(.wallet-status-icon) { display: block; color: var(--muted); font-size: 10px; }
.wallet-status strong { display: block; margin-top: 3px; color: #f2f4ff; font-size: 13px; }
.onboarding-kicker { margin: 0 0 6px; color: var(--accent-soft); font-size: 10px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.onboarding-mark { display: grid; width: 64px; height: 64px; place-items: center; margin: 12px auto 20px; border: 1px solid rgba(180, 146, 255, .52); border-radius: 22px; color: #fff; background: radial-gradient(circle at 30% 25%, #bf9fff, #6a20ed 56%, #291061); box-shadow: 0 16px 34px rgba(92, 34, 224, .32); font-size: 31px; }
.onboarding-copy { margin: 0; color: #d7ddef; font-size: 14px; line-height: 1.55; text-align: center; }

.toast-region { position: fixed; z-index: 40; right: 14px; bottom: max(105px, calc(18px + env(safe-area-inset-bottom))); display: grid; width: min(370px, calc(100vw - 28px)); gap: 8px; pointer-events: none; }
.toast { padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgba(14, 28, 50, .97); box-shadow: var(--shadow); font-size: 13px; line-height: 1.4; animation: enter .18s ease; }
.toast.error { border-color: rgba(255, 139, 150, .35); color: #ffd4d9; }
.toast.success { border-color: rgba(151, 101, 255, .48); }

@keyframes enter { from { transform: translateY(10px); opacity: 0; } }
@keyframes sheen { 0%, 65% { transform: translateX(-85%); } 84%, 100% { transform: translateX(120%); } }

@media (min-width: 520px) {
  .app-shell { padding-right: 22px; padding-left: 22px; }
  .reference-home { gap: 16px; }
  .reference-hero-card { min-height: 218px; padding: 24px 23px; }
  .reference-network-grid article { min-height: 132px; padding: 13px; }
  .reference-asset-card { min-height: 260px; padding: 18px 16px 14px; }
  .hero-dashboard { min-height: 430px; padding: 43px 34px 26px; }
  .hero-gpu-visual { top: 0; right: -12px; width: 51%; }
  .hero-stat-grid { right: 26px; bottom: 26px; left: 26px; }
  .personal-stats { gap: 13px; }
  .personal-stat { padding: 17px 16px; }
  .personal-stat b { right: 16px; left: 16px; }
  .bottom-nav { border-radius: 25px 25px 0 0; }
  .modal-layer { align-items: center; }
  .modal { border-radius: 25px; }
}

@media (max-width: 385px) {
  .app-shell { padding-right: 11px; padding-left: 11px; }
  .reference-home { gap: 17px; }
  .reference-home-top { min-height: 63px; padding-right: 3px; padding-left: 3px; }
  .reference-logo { width: 58px; height: 58px; }
  .reference-energy-pill { min-height: 47px; gap: 8px; padding: 7px 10px 7px 12px; }
  .reference-energy-pill > span { font-size: 27px; }
  .reference-energy-pill strong { font-size: 15px; }
  .reference-energy-pill i { font-size: 27px; }
  .reference-hero-card { min-height: 235px; padding: 28px 20px; }
  .reference-hero-copy p { max-width: 175px; margin-top: 15px; font-size: 12px; }
  .reference-network-grid { gap: 7px; }
  .reference-network-grid article { min-height: 145px; padding: 12px 9px; }
  .reference-network-grid strong { margin-top: 11px; font-size: 17px; }
  .reference-network-grid small { margin-top: 9px; font-size: 8px; }
  .reference-stat-icon { height: 25px; font-size: 26px; }
  .reference-load-ring { width: 65px; height: 65px; }
  .reference-load-ring b { font-size: 15px; }
  .reference-asset-grid { gap: 9px; }
  .reference-asset-card { min-height: 281px; padding: 18px 13px 13px; border-radius: 19px; }
  .reference-asset-card > strong { margin-top: 27px; font-size: 43px; }
  .reference-asset-card > p { margin-top: 16px; font-size: 11px; }
  .reference-asset-card > small { font-size: 9px; }
  .reference-asset-action { min-height: 44px; gap: 7px; border-radius: 11px; font-size: 10px; }
  .reference-asset-action i { width: 25px; height: 25px; font-size: 20px; }
  .reference-earnings-card > div { padding: 18px 13px; }
  .reference-earnings-card span { font-size: 10px; }
  .reference-earnings-card strong { margin-top: 10px; font-size: 29px; }
  .topbar { grid-template-columns: minmax(62px, 1fr) auto minmax(62px, 1fr); }
  .topbar-close { font-size: 14px; }
  .more-control { width: 38px; height: 38px; }
  .hero-dashboard { min-height: 436px; padding: 35px 20px 20px; }
  .hero h2 { font-size: 39px; }
  .hero-copy { max-width: 235px; font-size: 14px; }
  .hero-gpu-visual { top: 29px; right: -57px; width: 71%; }
  .hero-stat-grid { right: 9px; bottom: 20px; left: 9px; gap: 8px; }
  .hero-stat { min-height: 139px; padding: 16px 13px 12px; }
  .hero-stat strong { font-size: 32px; }
  .hero-stat small { margin-top: 13px; font-size: 10px; }
  .earnings-panel { min-height: 164px; padding: 22px 18px; }
  .earnings-copy strong { font-size: 52px; }
  .earning-orbit { right: -31px; width: 120px; height: 120px; }
  .personal-stat { min-height: 165px; padding: 13px 10px; }
  .personal-stat b { right: 10px; bottom: 13px; left: 10px; }
  .personal-stat div > span { font-size: 10px; }
  .personal-stat strong { font-size: 22px; }
  .personal-stat small { font-size: 9px; }
  .stat-icon { width: 32px; height: 32px; margin-bottom: 8px; }
  .dashboard-actions { gap: 8px; }
  .action-button { min-height: 58px; padding-right: 8px; padding-left: 8px; font-size: 14px; }
  .action-button span { width: 29px; height: 29px; margin-right: 6px; font-size: 23px; }
  .network-status { grid-template-columns: 43px minmax(0, 1fr); gap: 10px; padding: 14px 12px; }
  .status-shield { width: 39px; height: 44px; font-size: 22px; }
  .status-meta { grid-column: 2; display: flex; gap: 8px; text-align: left; }
  .status-meta small { margin-top: 0; }
  .metric-row { grid-template-columns: 1.2fr 1fr; }
  .metric:last-child { grid-column: span 2; }
  .network-overview { grid-template-columns: 1fr; }
  .telemetry-grid { grid-template-columns: 1fr; }
  .telemetry-card { grid-template-columns: 1.3fr 1fr 1fr; align-items: end; }
  .scenario-card { grid-template-columns: auto minmax(0, 1fr); }
  .scenario-card .inline-link { grid-column: 2; justify-self: start; }
  .energy-stat-grid { grid-template-columns: 1fr 1fr; }
  .energy-stat-grid article:last-child { grid-column: span 2; }
  .energy-hero { min-height: 195px; }
  .energy-hero strong { font-size: 61px; }
  .purchase-hero { min-height: 192px; }
  .purchase-token-mark { right: 13px; bottom: 19px; width: 87px; height: 87px; font-size: 43px; }
  .purchase-metrics { grid-template-columns: 1.2fr 1fr; }
  .purchase-metrics div:last-child { grid-column: span 2; }
  .bottom-nav { gap: 0; padding-right: 8px; padding-left: 8px; }
  .bottom-nav-item { gap: 4px; min-height: 53px; padding-right: 1px; padding-left: 1px; }
  .bottom-nav-item span { width: 27px; height: 27px; }
  .bottom-nav-item svg { width: 25px; height: 25px; }
  .bottom-nav-item small { font-size: 9px; }
}

@media (max-width: 520px) {
  .reference-home { gap: 14px; }
  .reference-home-top { min-height: 51px; }
  .reference-logo { width: 45px; height: 45px; }
  .reference-energy-pill { min-height: 41px; gap: 6px; padding: 5px 8px 5px 10px; }
  .reference-energy-pill > span { font-size: 24px; }
  .reference-energy-pill strong { font-size: 13px; }
  .reference-energy-pill i { font-size: 24px; }
  .reference-hero-card { min-height: 178px; padding: 21px 18px; }
  .reference-hero-copy p { max-width: 172px; margin-top: 12px; font-size: 11px; }
  .reference-network-grid article { min-height: 116px; padding: 10px 9px; }
  .reference-load-ring { width: 54px; height: 54px; }
  .reference-asset-card { min-height: 224px; padding: 15px 12px 12px; }
  .reference-asset-card > strong { margin-top: 21px; font-size: clamp(34px, 10.5vw, 49px); }
  .reference-asset-action { min-height: 39px; }
}

/* Keep the reference's separate blocks inside a narrow Telegram viewport. */
@media (max-width: 520px) {
  .app-shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .dashboard-home { display: flex; min-height: calc(100svh - 94px); flex-direction: column; gap: 10px; }
  .dashboard-home .reference-home { gap: 10px; }
  .dashboard-home .reference-home-top { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 38px; gap: 5px; padding: 0; }
  .dashboard-home .reference-brand { gap: 4px; }
  .dashboard-home .reference-brand .reference-logo { width: 38px; height: 38px; }
  .dashboard-home .reference-brand > strong { font-size: 12px; }
  .dashboard-home .reference-energy-pill { min-height: 38px; padding: 5px 8px; border-radius: 12px; }
  .dashboard-home .reference-energy-pill small { font-size: 7px; }
  .dashboard-home .reference-energy-pill strong { margin-top: 2px; font-size: 11px; }
  .dashboard-home .reference-hero-card { min-height: 156px; padding: 17px 16px; border-radius: 18px; }
  .dashboard-home .reference-hero-card::before { right: -12%; bottom: -78%; width: 75%; height: 168%; }
  .dashboard-home .reference-hero-copy { max-width: 60%; }
  .dashboard-home .reference-hero-copy h2 { font-size: clamp(27px, 8.1vw, 34px); line-height: .94; }
  .dashboard-home .reference-hero-copy p { max-width: 188px; margin-top: 9px; font-size: 10px; line-height: 1.35; }
  .dashboard-home .reference-gpu-art { width: 54%; object-position: 72% center; }
  .dashboard-home .reference-network-grid { gap: 7px; }
  .dashboard-home .reference-network-grid article { display: flex; min-height: 98px; flex-direction: column; align-items: flex-start; padding: 9px; border-radius: 14px; }
  .dashboard-home .reference-network-grid article > span:not(.reference-stat-icon) { margin-top: 5px; font-size: 8px; }
  .dashboard-home .reference-network-grid strong { margin-top: 8px; font-size: clamp(13px, 4.3vw, 17px); }
  .dashboard-home .reference-network-grid small { margin-top: auto; font-size: 7px; }
  .dashboard-home .reference-stat-icon { height: 18px; font-size: 20px; }
  .dashboard-home .reference-pool-stat strong,
  .dashboard-home .reference-power-stat strong { align-self: center; text-align: center; }
  .dashboard-home .reference-pool-stat small,
  .dashboard-home .reference-power-stat small { align-self: center; text-align: center; }
  .dashboard-home .reference-load-stat strong { margin-top: auto; color: #c16bff; font-size: clamp(21px, 6.2vw, 28px); }
  .dashboard-home .reference-assets { gap: 10px; margin-top: auto; }
  .dashboard-home .reference-asset-grid { gap: 9px; }
  .dashboard-home .reference-asset-card { min-height: 218px; align-items: center; padding: 15px 12px 12px; border-radius: 18px; text-align: center; }
  .dashboard-home .reference-asset-title { width: 100%; font-size: 18px; }
  .dashboard-home .reference-asset-card > strong { width: 100%; margin-top: 19px; overflow: visible; font-size: clamp(38px, 11vw, 47px); line-height: .86; text-align: center; }
  .dashboard-home .reference-asset-card > em { margin-top: 6px; color: #c354ff; font-size: 16px; }
  .dashboard-home .reference-asset-card.energy > em { color: #b9d2ff; }
  .dashboard-home .reference-asset-card > small { width: 100%; margin-top: 12px; color: #aeb7d0; font-size: 9px; line-height: 1.42; text-align: center; }
  .dashboard-home .reference-asset-action { min-height: 32px; gap: 6px; margin-top: auto; border-radius: 10px; font-size: 9px; }
  .dashboard-home .reference-asset-action i { width: 21px; height: 21px; font-size: 17px; }
  .dashboard-home .reference-earnings-card { border-radius: 16px; }
  .dashboard-home .reference-earnings-card > div { display: flex; min-height: 80px; flex-direction: column; justify-content: center; padding: 11px 12px; }
  .dashboard-home .reference-earnings-card span { font-size: 10px; }
  .dashboard-home .reference-earnings-card strong,
  .dashboard-home .reference-earnings-card > div:last-child strong { margin-top: 7px; font-size: clamp(18px, 5.7vw, 24px); line-height: 1; }
  .bottom-nav { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); border-radius: 19px 19px 0 0; }
  .bottom-nav-item { min-height: 46px; gap: 3px; }
  .bottom-nav-item span { width: 24px; height: 24px; }
  .bottom-nav-item svg { width: 23px; height: 23px; }
  .bottom-nav-item small { font-size: 9px; }
}

@media (max-width: 520px) and (max-height: 700px) {
  .dashboard-home { min-height: auto; }
  .dashboard-home .reference-hero-card { min-height: 112px; }
  .dashboard-home .reference-network-grid article { min-height: 74px; }
  .dashboard-home .reference-asset-card { min-height: 154px; padding: 10px; }
  .dashboard-home .reference-asset-title { font-size: 15px; }
  .dashboard-home .reference-asset-card > strong { margin-top: 12px; font-size: 34px; }
  .dashboard-home .reference-asset-card > em { margin-top: 3px; font-size: 13px; }
  .dashboard-home .reference-asset-card > small { margin-top: 6px; font-size: 7px; }
  .dashboard-home .reference-asset-action { min-height: 26px; font-size: 8px; }
  .dashboard-home .reference-earnings-card > div { min-height: 58px; }
}

/* GPUM production-screen pass: one compact language for the home and every tab. */
.app-screen { display: grid; gap: 14px; }

.gpum-page-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; }
.gpum-page-left { display: flex; align-items: center; min-width: 0; gap: 7px; }
.gpum-page-brand { display: flex; align-items: center; gap: 6px; min-width: 0; border: 0; padding: 0; color: #f2efff; background: transparent; }
.gpum-page-brand > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 11px; background: #030812; box-shadow: 0 0 14px rgba(121, 69, 255, .22); }
.gpum-page-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gpum-page-brand strong { overflow: hidden; font-size: 13px; font-weight: 780; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.page-back { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(151, 119, 255, .5); border-radius: 11px; color: #d8c7ff; background: rgba(92, 45, 198, .13); font-size: 20px; line-height: 1; }
.page-energy-pill { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; min-height: 38px; padding: 5px 8px; border: 1px solid rgba(85, 133, 255, .7); border-radius: 12px; color: #f5f7ff; background: linear-gradient(105deg, rgba(8, 25, 56, .94), rgba(20, 11, 58, .96)); text-align: left; }
.page-energy-pill > span { color: #1599ff; font-size: 22px; line-height: 1; text-shadow: 0 0 12px rgba(20, 152, 255, .72); }
.page-energy-pill div { min-width: 0; }
.page-energy-pill small, .page-energy-pill strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-energy-pill small { color: #8494bb; font-size: 7px; line-height: 1; }
.page-energy-pill strong { margin-top: 2px; font-size: 11px; font-weight: 670; }
.page-energy-pill i { color: #a74dff; font-size: 18px; font-style: normal; font-weight: 300; line-height: .8; }

.reference-network-grid article,
.dashboard-home .reference-network-grid article { display: flex; min-height: 104px; flex-direction: column; align-items: center; padding: 10px 8px; text-align: center; }
.reference-stat-heading { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; color: #b5bed7; font-size: 10px; font-weight: 650; line-height: 1.1; white-space: nowrap; }
.reference-stat-heading .reference-stat-icon { display: inline-grid; width: auto; height: auto; place-items: center; color: #17d63d; font-size: 19px; line-height: 1; text-shadow: 0 0 10px rgba(20, 230, 58, .55); }
.reference-power-stat .reference-stat-heading .reference-stat-icon { color: #178bff; text-shadow: 0 0 11px rgba(36, 143, 255, .72); }
.reference-load-stat .reference-stat-heading .reference-stat-icon { color: #ba5eff; text-shadow: 0 0 11px rgba(179, 87, 255, .68); }
.reference-network-grid strong,
.dashboard-home .reference-network-grid strong,
.dashboard-home .reference-load-stat strong { display: block; align-self: center; margin-top: 12px; overflow: visible; color: #f7f8ff; font-size: clamp(14px, 4.5vw, 19px); font-weight: 620; line-height: 1; letter-spacing: -.065em; text-align: center; white-space: nowrap; }
.reference-load-stat,
.dashboard-home .reference-load-stat { display: flex; grid-template-rows: none; justify-items: initial; }
.reference-load-stat strong,
.dashboard-home .reference-load-stat strong { color: #c16bff; }
.reference-network-grid small,
.dashboard-home .reference-network-grid small { align-self: center; margin-top: auto; color: #a0a9c4; font-size: 9px; line-height: 1.2; text-align: center; }
.reference-load-ring,
.reference-load-chart { display: none !important; }

.dashboard-home .reference-asset-card { min-height: 226px; }
.dashboard-home .reference-asset-card > small { margin-top: 12px; color: #c0c8df; font-size: 10px; line-height: 1.45; }
.dashboard-home .reference-asset-action { min-height: 40px; gap: 7px; font-size: 10px; }
.dashboard-home .reference-asset-action i { width: 19px; height: 19px; font-size: 16px; }
.dashboard-home .reference-earnings-card > div { min-height: 82px; }

.buy-price-card,
.energy-balance-card,
.leaderboard-hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 174px; overflow: hidden; padding: 22px 20px; border: 1px solid rgba(166, 92, 255, .65); border-radius: 22px; background: radial-gradient(circle 12rem at 94% 47%, rgba(114, 53, 255, .44), transparent 68%), linear-gradient(135deg, #1c104b, #071326 65%, #180c3d); box-shadow: inset 0 1px 0 rgba(230, 214, 255, .1), 0 16px 35px rgba(16, 2, 51, .28); }
.buy-price-card > div:first-child,
.energy-balance-card > div:first-child,
.leaderboard-hero > div:first-child { position: relative; z-index: 1; }
.buy-price-card span,
.energy-balance-card span,
.leaderboard-hero span { display: block; color: #d3bfff; font-size: 12px; }
.buy-price-card strong,
.energy-balance-card strong,
.leaderboard-hero strong { display: block; margin-top: 9px; color: #fff; font-size: clamp(44px, 13vw, 64px); font-weight: 570; line-height: .84; letter-spacing: -.09em; white-space: nowrap; }
.buy-price-card small,
.energy-balance-card small,
.leaderboard-hero small { display: block; margin-top: 11px; color: #b8b2d9; font-size: 11px; line-height: 1.35; }
.buy-price-mark,
.energy-balance-symbol,
.leaderboard-cup { position: absolute; right: 18px; bottom: 18px; display: grid; width: 104px; height: 104px; place-items: center; border: 2px solid rgba(214, 182, 255, .62); border-radius: 50%; color: #d0b1ff; background: radial-gradient(circle at 33% 28%, rgba(241, 224, 255, .32), rgba(95, 37, 234, .28) 55%, rgba(11, 13, 48, .72)); box-shadow: 0 0 0 9px rgba(127, 65, 255, .08), 0 0 25px rgba(123, 53, 255, .45); font-size: 46px; text-shadow: 0 0 14px rgba(218, 182, 255, .72); }
.buy-offering-card { gap: 13px; }
.buy-summary-card { display: grid; gap: 0; padding: 4px 17px; }
.buy-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.buy-summary-row:last-child { border-bottom: 0; }
.buy-summary-row strong { color: #f5f6ff; font-size: 14px; letter-spacing: -.025em; text-align: right; }
.buy-summary-row:nth-child(3) strong { color: #9bd0ff; }

.energy-balance-card { border-color: rgba(72, 165, 255, .62); background: radial-gradient(circle 12rem at 94% 47%, rgba(31, 145, 255, .3), transparent 68%), linear-gradient(135deg, rgba(8, 35, 65, .98), rgba(7, 19, 40, .98)); }
.energy-balance-card span { color: #8dd7ff; }
.energy-balance-symbol { border-color: rgba(127, 211, 255, .62); color: #9ce0ff; background: radial-gradient(circle at 33% 28%, rgba(189, 234, 255, .25), rgba(23, 119, 255, .27) 55%, rgba(7, 21, 49, .72)); }
.energy-package-list,
.marketplace-listings,
.leaderboard-list { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(10, 24, 44, .94), rgba(6, 15, 29, .98)); }
.list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 15px 11px; }
.list-heading h3 { margin: 0; color: #f0f2ff; font-size: 15px; letter-spacing: -.035em; }
.list-heading span { flex: 0 0 auto; color: #a78cff; font-size: 10px; font-weight: 730; }
.energy-package { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 65px; border: 0; border-top: 1px solid var(--line); padding: 10px 15px; color: #e9efff; background: transparent; text-align: left; }
.energy-package.selected { background: linear-gradient(90deg, rgba(44, 114, 255, .18), rgba(86, 51, 233, .09)); }
.energy-radio { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(141, 170, 226, .55); border-radius: 50%; }
.energy-package.selected .energy-radio::after { content: ""; width: 9px; height: 9px; border-radius: inherit; background: #75caff; box-shadow: 0 0 10px rgba(84, 182, 255, .75); }
.energy-package strong,
.energy-package small { display: block; }
.energy-package strong { color: #f5f8ff; font-size: 14px; }
.energy-package small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.energy-package b { color: #b8dfff; font-size: 15px; letter-spacing: -.03em; }
.energy-purchase-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid rgba(59, 147, 255, .28); border-radius: 17px; background: rgba(7, 22, 41, .86); }
.energy-purchase-summary div { min-width: 0; padding: 13px 10px; border-right: 1px solid var(--line); }
.energy-purchase-summary div:last-child { border-right: 0; }
.energy-purchase-summary span { display: block; min-height: 24px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.energy-purchase-summary strong { display: block; margin-top: 7px; overflow: hidden; color: #eef7ff; font-size: 14px; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.energy-purchase-action { min-height: 57px; font-size: 16px; }

.marketplace-summary-grid { grid-template-columns: 1fr 1fr; }
.marketplace-listing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 66px; border-top: 1px solid var(--line); padding: 10px 13px; }
.listing-avatar,
.leader-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; color: #c5a8ff; background: rgba(107, 52, 234, .18); font-size: 16px; }
.marketplace-listing strong,
.marketplace-listing small,
.marketplace-listing b { display: block; }
.marketplace-listing strong { color: #f0f2ff; font-size: 12px; }
.marketplace-listing small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.marketplace-listing > div:nth-child(3) { text-align: right; }
.marketplace-listing > div:nth-child(3) b { color: #f4f0ff; font-size: 13px; }
.marketplace-listing .secondary-button { min-height: 31px; padding: 7px 9px; font-size: 10px; }

.leaderboard-hero { border-color: rgba(219, 157, 67, .53); background: radial-gradient(circle 13rem at 92% 46%, rgba(255, 150, 38, .26), transparent 65%), linear-gradient(135deg, #341f0d, #091326 65%, #221209); }
.leaderboard-cup { border-color: rgba(255, 209, 124, .65); color: #ffcf7a; background: radial-gradient(circle at 33% 28%, rgba(255, 238, 186, .31), rgba(202, 130, 29, .24) 55%, rgba(39, 24, 7, .72)); }
.leaderboard-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.leaderboard-metrics article { min-height: 107px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(14, 27, 47, .96), rgba(7, 16, 31, .98)); }
.leaderboard-metrics span,
.leaderboard-metrics small { display: block; color: var(--muted); font-size: 10px; }
.leaderboard-metrics strong { display: block; margin-top: 9px; color: #f7f5ff; font-size: 29px; font-weight: 560; line-height: .9; letter-spacing: -.07em; }
.leaderboard-metrics small { margin-top: 9px; color: var(--muted-dim); font-size: 9px; line-height: 1.25; }
.leaderboard-list > article { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 58px; border-top: 1px solid var(--line); padding: 8px 13px; }
.leader-rank { color: #9d91ba; font-size: 12px; text-align: center; }
.leaderboard-list .leader-avatar { width: 28px; height: 28px; border-radius: 9px; }
.leaderboard-list article:nth-child(2) .leader-avatar { color: #ffd372; background: rgba(227, 161, 45, .16); }
.leaderboard-list article:nth-child(3) .leader-avatar { color: #dad5f0; background: rgba(184, 189, 218, .15); }
.leaderboard-list article:nth-child(4) .leader-avatar { color: #d49b6f; background: rgba(184, 105, 57, .16); }
.leaderboard-list article strong,
.leaderboard-list article small { display: block; }
.leaderboard-list article strong { overflow: hidden; color: #eef0ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-list article small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.leaderboard-list article em { color: #b497ff; font-size: 11px; font-style: normal; }

.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 520px) {
  .app-screen { gap: 11px; }
  .gpum-page-header { min-height: 38px; }
  .gpum-page-brand > span { width: 34px; height: 34px; border-radius: 10px; }
  .gpum-page-brand strong { font-size: 12px; }
  .page-back { width: 31px; height: 31px; border-radius: 10px; font-size: 18px; }
  .page-energy-pill { min-height: 36px; padding: 5px 7px; }
  .page-energy-pill > span { font-size: 20px; }
  .page-energy-pill strong { font-size: 10px; }
  .page-energy-pill i { font-size: 16px; }
  .reference-stat-heading { font-size: 10px; }
  .reference-network-grid article,
  .dashboard-home .reference-network-grid article { min-height: 101px; }
  .reference-network-grid strong,
  .dashboard-home .reference-network-grid strong,
  .dashboard-home .reference-load-stat strong { margin-top: 11px; font-size: clamp(13px, 4.2vw, 17px); }
  .reference-network-grid small,
  .dashboard-home .reference-network-grid small { font-size: 8px; }
  .dashboard-home .reference-asset-card { min-height: 224px; }
  .dashboard-home .reference-asset-card > small { font-size: 10px; }
  .buy-price-card,
  .energy-balance-card,
  .leaderboard-hero { min-height: 158px; padding: 19px 17px; border-radius: 19px; }
  .buy-price-card strong,
  .energy-balance-card strong,
  .leaderboard-hero strong { font-size: clamp(39px, 12vw, 54px); }
  .buy-price-mark,
  .energy-balance-symbol,
  .leaderboard-cup { right: 14px; bottom: 14px; width: 88px; height: 88px; font-size: 39px; }
  .energy-package { min-height: 61px; padding-right: 13px; padding-left: 13px; }
  .energy-purchase-summary div { padding: 12px 8px; }
  .energy-purchase-summary strong { font-size: 12px; }
  .marketplace-summary-grid { gap: 8px; }
  .marketplace-summary-grid article { min-height: 104px; padding: 13px 10px; }
  .marketplace-listing { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .marketplace-listing .secondary-button { display: none; }
  .leaderboard-metrics article { min-height: 98px; padding: 13px 11px; }
  .bottom-nav { gap: 0; padding-right: 5px; padding-left: 5px; }
  .bottom-nav-item { min-height: 47px; gap: 2px; padding-right: 0; padding-left: 0; }
  .bottom-nav-item span { width: 22px; height: 22px; }
  .bottom-nav-item svg { width: 21px; height: 21px; }
  .bottom-nav-item small { font-size: 8px; letter-spacing: -.02em; }
}

@media (max-width: 520px) and (max-height: 700px) {
  .dashboard-home .reference-network-grid article { min-height: 76px; padding: 7px 5px; }
  .dashboard-home .reference-stat-heading { gap: 3px; font-size: 8px; }
  .dashboard-home .reference-stat-heading .reference-stat-icon { font-size: 15px; }
  .dashboard-home .reference-network-grid strong,
  .dashboard-home .reference-load-stat strong { margin-top: 6px; font-size: 13px; }
  .dashboard-home .reference-network-grid small { display: none; }
  .dashboard-home .reference-asset-card { min-height: 166px; }
  .dashboard-home .reference-asset-card > small { margin-top: 7px; font-size: 8px; }
  .dashboard-home .reference-asset-action { min-height: 31px; font-size: 8px; }
  .dashboard-home .reference-asset-action i { width: 16px; height: 16px; font-size: 13px; }
}

/* Home conversion details and the GPUM share-package purchase flow. */
.dashboard-home .reference-hero-card { min-height: 184px; }
.dashboard-home .reference-hero-copy { max-width: 61%; }
.dashboard-home .reference-hero-copy p { max-width: 205px; margin-top: 9px; }
.hero-details-button { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; margin-top: 10px; border: 1px solid rgba(147, 119, 255, .56); border-radius: 9px; padding: 5px 9px; color: #e8ddff; background: rgba(100, 51, 218, .16); font-size: 10px; font-weight: 740; line-height: 1; }
.hero-details-button span { color: #ac82ff; font-size: 14px; line-height: .7; }

.reference-stat-heading { gap: 7px; color: #c1c9e0; font-size: 12px; font-weight: 700; }
.reference-stat-heading .reference-stat-icon { width: 22px; height: 22px; color: #42e76a; }
.reference-stat-heading .reference-stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reference-power-stat .reference-stat-heading .reference-stat-icon { color: #3ca9ff; }
.reference-load-stat .reference-stat-heading .reference-stat-icon { color: #c16bff; }
.reference-network-grid article,
.dashboard-home .reference-network-grid article { min-height: 122px; padding: 12px 8px; }
.reference-network-grid strong,
.dashboard-home .reference-network-grid strong,
.dashboard-home .reference-load-stat strong { margin-top: 14px; font-size: clamp(20px, 6vw, 29px); font-weight: 590; letter-spacing: -.075em; }
.reference-network-grid strong em { color: #aebbe0; font-size: .46em; font-style: normal; font-weight: 620; letter-spacing: -.04em; }
.reference-power-stat strong { font-size: clamp(17px, 5vw, 24px); }
.reference-network-grid small,
.dashboard-home .reference-network-grid small { color: #b0bad3; font-size: 10px; }

.share-package-card { overflow: hidden; border: 1px solid rgba(165, 105, 255, .58); border-radius: 22px; background: radial-gradient(circle 14rem at 98% 5%, rgba(69, 91, 255, .25), transparent 61%), linear-gradient(145deg, rgba(18, 12, 59, .98), rgba(7, 17, 34, .98)); box-shadow: inset 0 1px 0 rgba(233, 219, 255, .08), 0 15px 34px rgba(23, 3, 67, .23); }
.share-package-price { position: relative; display: flex; align-items: center; min-height: 164px; overflow: hidden; padding: 20px 18px 14px; border-bottom: 1px solid rgba(171, 141, 255, .18); }
.share-package-price > div:first-child { position: relative; z-index: 1; max-width: 63%; }
.share-package-price span { display: block; color: #d4c2ff; font-size: 13px; }
.share-package-price strong { display: block; margin-top: 7px; color: #fbfaff; font-size: clamp(45px, 13vw, 63px); font-weight: 560; line-height: .85; letter-spacing: -.095em; white-space: nowrap; }
.share-package-price strong em { color: #bfa7ff; font-size: .35em; font-style: normal; letter-spacing: -.04em; }
.share-package-price small { display: block; margin-top: 12px; color: #b7b5d3; font-size: 10px; line-height: 1.35; }
.share-package-art { position: absolute; right: -1px; bottom: -2px; width: 47%; height: 86%; }
.share-package-art .buy-share-art { display: block; width: 100%; height: 100%; filter: drop-shadow(-10px 13px 16px rgba(0, 0, 0, .42)); }
.share-package-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.share-package-heading > span { color: #f4f2ff; font-size: 14px; font-weight: 720; }
.share-package-heading > small { color: #a99acb; font-size: 10px; }
.share-package-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 0 12px 14px; }
.share-package { display: grid; min-width: 0; min-height: 56px; place-items: center; border: 1px solid rgba(119, 145, 239, .4); border-radius: 12px; padding: 6px 2px; color: #c5cce4; background: rgba(6, 18, 42, .63); }
.share-package strong, .share-package small { display: block; line-height: 1; }
.share-package strong { color: #f5f4ff; font-size: 18px; font-weight: 680; letter-spacing: -.06em; }
.share-package small { margin-top: 4px; color: #929dbd; font-size: 8px; }
.share-package.selected { border-color: rgba(187, 121, 255, .9); color: #fff; background: linear-gradient(145deg, rgba(122, 47, 242, .75), rgba(40, 99, 255, .44)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 16px rgba(133, 62, 255, .36); }
.share-package.selected strong { color: #fff; }
.share-package.selected small { color: #eadfff; }

.buy-screen-heading h2 { font-size: clamp(33px, 9.3vw, 48px); }
.buy-screen-heading p { margin-top: 7px; font-size: 13px; }
.buy-summary-card { padding: 4px 15px; }
.buy-summary-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 54px; font-size: 13px; }
.buy-summary-icon { display: grid; width: 22px; height: 22px; place-items: center; color: #a86cff; }
.buy-summary-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.buy-summary-row strong { font-size: 16px; }
.buy-summary-row:nth-child(3) strong { color: #bda5ff; }
.buy-payment-card .payment-option { min-height: 64px; }
.purchase-settlement-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: -4px 0 2px; color: #a9a2c9; font-size: 11px; line-height: 1.35; text-align: center; }
.purchase-settlement-note span { color: #ab73ff; font-size: 20px; line-height: 1; }

.share-details-list { display: grid; gap: 9px; margin: 2px 0 18px; }
.share-details-list article { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid rgba(145, 157, 218, .14); border-radius: 15px; background: linear-gradient(145deg, rgba(10, 24, 47, .88), rgba(8, 14, 34, .78)); }
.share-detail-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(178, 136, 255, .48); border-radius: 11px; color: #c190ff; background: rgba(112, 52, 237, .14); }
.share-detail-icon.rent { color: #69b9ff; border-color: rgba(86, 178, 255, .43); background: rgba(44, 125, 255, .12); }
.share-detail-icon.return { color: #7fe3ff; border-color: rgba(95, 207, 255, .38); background: rgba(34, 142, 217, .12); }
.share-detail-icon.airdrop { color: #ffc879; border-color: rgba(255, 191, 91, .42); background: rgba(242, 157, 43, .12); }
.share-detail-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share-details-list strong { display: block; color: #f3f4ff; font-size: 13px; }
.share-details-list p { margin: 4px 0 0; color: #abb4ce; font-size: 11px; line-height: 1.42; }

@media (max-width: 520px) {
  .dashboard-home .reference-hero-card { min-height: 179px; }
  .dashboard-home .reference-hero-copy h2 { font-size: clamp(25px, 7.6vw, 33px); }
  .dashboard-home .reference-hero-copy p { max-width: 194px; font-size: 10px; line-height: 1.3; }
  .hero-details-button { min-height: 25px; margin-top: 8px; font-size: 9px; }
  .reference-stat-heading { gap: 4px; font-size: 11px; }
  .reference-stat-heading .reference-stat-icon,
  .reference-stat-heading .reference-stat-icon svg { width: 19px; height: 19px; }
  .reference-network-grid article,
  .dashboard-home .reference-network-grid article { min-height: 116px; padding: 10px 5px; }
  .reference-network-grid strong,
  .dashboard-home .reference-network-grid strong,
  .dashboard-home .reference-load-stat strong { margin-top: 12px; font-size: clamp(19px, 5.8vw, 24px); }
  .reference-power-stat strong { font-size: clamp(16px, 5.1vw, 21px); }
  .reference-network-grid small,
  .dashboard-home .reference-network-grid small { font-size: 9px; }
  .share-package-price { min-height: 151px; padding: 18px 15px 12px; }
  .share-package-price strong { font-size: clamp(40px, 12vw, 54px); }
  .share-package-price small { max-width: 192px; font-size: 9px; }
  .share-package-art { width: 46%; height: 82%; }
  .share-package-heading { padding: 12px 13px 9px; }
  .share-package-heading > span { font-size: 13px; }
  .share-package-heading > small { font-size: 9px; }
  .share-package-grid { gap: 4px; padding: 0 9px 11px; }
  .share-package { min-height: 50px; border-radius: 10px; }
  .share-package strong { font-size: 16px; }
  .share-package small { font-size: 7px; }
  .buy-summary-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; min-height: 48px; font-size: 11px; }
  .buy-summary-icon { width: 20px; height: 20px; }
  .buy-summary-icon svg { width: 19px; height: 19px; }
  .buy-summary-row strong { font-size: 13px; }
}

@media (max-width: 520px) and (max-height: 700px) {
  .dashboard-home .reference-hero-card { min-height: 144px; }
  .dashboard-home .reference-hero-copy p { display: none; }
  .dashboard-home .reference-network-grid article { min-height: 88px; }
  .dashboard-home .reference-stat-heading { font-size: 9px; }
  .dashboard-home .reference-network-grid strong,
  .dashboard-home .reference-load-stat strong { margin-top: 8px; font-size: 16px; }
  .dashboard-home .reference-power-stat strong { font-size: 13px; }
}

/* Latest home-header and stat hierarchy refinement. */
.reference-energy-pill,
.page-energy-pill { justify-content: flex-start; }
.reference-energy-pill > div,
.page-energy-pill > div { display: grid; min-width: 0; gap: 2px; }
.reference-energy-label,
.page-energy-label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.reference-energy-label small,
.page-energy-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-energy-icon,
.page-energy-icon { display: grid; width: 14px; height: 14px; flex: 0 0 auto; place-items: center; color: #3ca9ff; }
.reference-energy-icon svg,
.page-energy-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(60, 169, 255, .65)); }
.reference-energy-plus,
.page-energy-plus { flex: 0 0 auto; margin: 0; padding: 0; color: #a74dff; font-size: 20px; font-style: normal; font-weight: 300; line-height: .8; text-shadow: 0 0 11px rgba(175, 78, 255, .75); }
.reference-energy-pill strong,
.page-energy-pill strong { margin-top: 0; }

.reference-network-grid strong,
.dashboard-home .reference-network-grid strong,
.dashboard-home .reference-load-stat strong { font-size: clamp(23px, 6.7vw, 33px); }
.reference-power-stat strong { font-size: clamp(19px, 5.6vw, 27px); }

@media (max-width: 520px) {
  .reference-energy-pill { gap: 5px; }
  .reference-energy-icon { width: 13px; height: 13px; }
  .reference-energy-icon svg { width: 13px; height: 13px; }
  .reference-energy-plus { font-size: 18px; }
  .page-energy-plus { font-size: 16px; }
  .reference-network-grid strong,
  .dashboard-home .reference-network-grid strong,
  .dashboard-home .reference-load-stat strong { font-size: clamp(22px, 6.5vw, 28px); }
  .reference-power-stat strong { font-size: clamp(18px, 5.5vw, 24px); }
}

@media (max-width: 520px) and (max-height: 700px) {
  .dashboard-home .reference-network-grid strong,
  .dashboard-home .reference-load-stat strong { font-size: 19px; }
  .dashboard-home .reference-power-stat strong { font-size: 16px; }
}

/* GPU choice follows the choose_gpu reference before the package checkout. */
.gpu-choice-screen { display: grid; gap: 14px; }
.gpu-choice-heading h2 { font-size: clamp(32px, 9.2vw, 48px); letter-spacing: -.07em; }
.gpu-choice-heading p { margin-top: 7px; font-size: 13px; }
.gpu-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.gpu-choice-card { position: relative; display: flex; min-width: 0; min-height: 312px; flex-direction: column; overflow: hidden; padding: 14px 12px 12px; border: 1px solid rgba(166, 105, 255, .55); border-radius: 21px; background: radial-gradient(circle 9rem at 74% 31%, rgba(63, 91, 255, .18), transparent 62%), linear-gradient(145deg, rgba(13, 12, 42, .98), rgba(5, 12, 28, .98)); box-shadow: inset 0 1px 0 rgba(230, 220, 255, .05); }
.gpu-choice-card.selected { border-color: rgba(54, 170, 255, .95); background: radial-gradient(circle 10rem at 72% 30%, rgba(42, 143, 255, .25), transparent 62%), linear-gradient(145deg, rgba(20, 12, 58, .99), rgba(5, 15, 36, .99)); box-shadow: inset 0 1px 0 rgba(230, 244, 255, .12), 0 0 20px rgba(49, 131, 255, .42), 0 0 28px rgba(151, 64, 255, .22); }
.gpu-choice-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gpu-choice-card-title h3 { margin: 0; color: #f5f4ff; font-size: clamp(19px, 5.4vw, 29px); line-height: 1; letter-spacing: -.055em; }
.gpu-choice-card-title span { display: block; margin-top: 4px; color: #aaa5c5; font-size: 10px; }
.gpu-choice-check { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #e6efff; background: linear-gradient(145deg, #9c55ff, #2e86ff); box-shadow: 0 0 10px rgba(88, 136, 255, .62); font-size: 15px; font-weight: 800; }
.gpu-choice-art-wrap { height: 104px; margin: 4px -9px 0; }
.gpu-choice-art { display: block; width: 100%; height: 100%; filter: drop-shadow(-6px 10px 12px rgba(0, 0, 0, .5)); }
.gpu-choice-price { margin-top: 2px; }
.gpu-choice-price > span { display: block; color: #a4abc7; font-size: 9px; }
.gpu-choice-price strong { display: block; margin-top: 4px; color: #f5f3ff; font-size: clamp(21px, 6.5vw, 35px); font-weight: 570; line-height: .95; letter-spacing: -.075em; white-space: nowrap; }
.gpu-choice-card.selected .gpu-choice-price strong { color: #b46aff; text-shadow: 0 0 14px rgba(156, 84, 255, .45); }
.gpu-choice-price small { display: block; margin-top: 5px; color: #b5b8d2; font-size: 10px; line-height: 1.2; }
.gpu-choice-metrics { display: grid; gap: 5px; margin-top: 11px; color: #b9bfd8; font-size: 10px; line-height: 1.2; }
.gpu-choice-metrics span { display: flex; align-items: center; gap: 6px; }
.gpu-choice-metrics i { color: #b866ff; font-size: 18px; font-style: normal; line-height: .6; }
.gpu-choice-select { min-height: 37px; width: 100%; margin-top: auto; border: 1px solid rgba(187, 119, 255, .7); border-radius: 11px; color: #c38cff; background: rgba(41, 18, 103, .15); font-size: 12px; font-weight: 760; }
.gpu-choice-select.selected { border-color: rgba(190, 154, 255, .68); color: #fff; background: linear-gradient(110deg, #351fff, #7820fa 68%, #9c38ff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 7px 15px rgba(75, 26, 232, .28); }
.gpu-choice-selection { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 13px; border: 1px solid rgba(184, 112, 255, .63); border-radius: 19px; background: linear-gradient(135deg, rgba(30, 14, 78, .88), rgba(7, 18, 38, .96)); }
.gpu-choice-selection-art { height: 66px; }
.gpu-choice-selection-art .gpu-choice-art { height: 100%; }
.gpu-choice-selection-main span { display: block; color: #bb99ff; font-size: 10px; }
.gpu-choice-selection-main strong { display: block; margin-top: 3px; color: #f5f4ff; font-size: 21px; line-height: 1; letter-spacing: -.045em; }
.gpu-choice-selection-main small { display: block; margin-top: 5px; color: #b1b7d1; font-size: 9px; line-height: 1.25; }
.gpu-choice-selection-metrics { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-top: 1px solid rgba(155, 165, 215, .16); padding-top: 10px; }
.gpu-choice-selection-metrics div { min-width: 0; padding-left: 11px; border-left: 1px solid rgba(155, 165, 215, .16); }
.gpu-choice-selection-metrics div:first-child { border-left: 0; padding-left: 0; }
.gpu-choice-selection-metrics span { display: block; color: #9da8c5; font-size: 9px; }
.gpu-choice-selection-metrics strong { display: block; margin-top: 4px; overflow: hidden; color: #f2f3ff; font-size: 14px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.gpu-choice-continue { min-height: 59px; font-size: 18px; }
.gpu-choice-note { margin: -4px 5px 2px; color: #9ea9c6; font-size: 10px; line-height: 1.4; text-align: center; }

@media (max-width: 520px) {
  .gpu-choice-screen { gap: 11px; }
  .gpu-choice-card { min-height: 292px; padding: 12px 10px 10px; border-radius: 17px; }
  .gpu-choice-card-title h3 { font-size: clamp(18px, 5.2vw, 23px); }
  .gpu-choice-card-title span { font-size: 9px; }
  .gpu-choice-art-wrap { height: 89px; margin-right: -8px; margin-left: -8px; }
  .gpu-choice-price strong { font-size: clamp(20px, 6vw, 28px); }
  .gpu-choice-price small { font-size: 9px; }
  .gpu-choice-metrics { margin-top: 9px; gap: 4px; font-size: 9px; }
  .gpu-choice-metrics i { font-size: 16px; }
  .gpu-choice-select { min-height: 34px; font-size: 11px; }
  .gpu-choice-selection { grid-template-columns: 79px minmax(0, 1fr); padding: 11px; }
  .gpu-choice-selection-art { height: 58px; }
  .gpu-choice-selection-main strong { font-size: 19px; }
  .gpu-choice-continue { min-height: 54px; font-size: 16px; }
}

@media (max-width: 370px) {
  .gpu-choice-card { min-height: 272px; }
  .gpu-choice-art-wrap { height: 75px; }
  .gpu-choice-price strong { font-size: 19px; }
  .gpu-choice-metrics { font-size: 8px; }
}

/* Revenue-first home metrics and offer modal follow the GPUM references. */
.reference-income-stat .reference-stat-icon { color: #53c8ff; text-shadow: 0 0 13px rgba(59, 181, 255, .72); }
.reference-income-stat strong { color: #74d6ff; text-shadow: 0 0 14px rgba(39, 163, 255, .18); }
.reference-income-stat small { color: #aebee3; }
.reference-load-stat .reference-stat-icon { color: #c16bff; text-shadow: 0 0 13px rgba(189, 98, 255, .68); }
.reference-load-stat strong { color: #d1a1ff; text-shadow: 0 0 14px rgba(161, 75, 255, .22); }

.offer-modal { max-width: 440px; max-height: min(calc(100dvh - 16px), 830px); overflow: auto; border-color: rgba(171, 93, 255, .72); border-radius: 26px; background: radial-gradient(circle 17rem at 8% 1%, rgba(57, 38, 177, .28), transparent 54%), radial-gradient(circle 18rem at 100% 68%, rgba(42, 109, 255, .12), transparent 62%), linear-gradient(155deg, #06081a 0%, #080d25 58%, #050815 100%); box-shadow: 0 22px 65px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(212, 192, 255, .08); }
.offer-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 0; }
.offer-modal-header-single { justify-content: flex-end; }
.offer-close-button { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(195, 99, 255, .88); border-radius: 16px; color: #e6dcff; background: rgba(20, 10, 50, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 14px rgba(154, 57, 255, .16); font-size: 33px; font-weight: 200; line-height: 1; }
.offer-modal-body { padding: 18px 20px 22px; }
.offer-modal-body h2 { margin: 0; color: #f8f7ff; font-size: clamp(39px, 11.7vw, 54px); font-weight: 720; line-height: .98; letter-spacing: -.065em; }
.offer-modal-lead { margin: 14px 0 25px; color: #8594be; font-size: 15px; line-height: 1.35; }
.offer-feature-list { display: grid; gap: 12px; }
.offer-feature-list article { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 17px; min-height: 124px; padding: 15px; border: 1px solid rgba(188, 100, 255, .63); border-radius: 22px; background: radial-gradient(circle 10rem at 5% 25%, rgba(92, 54, 255, .16), transparent 65%), linear-gradient(135deg, rgba(9, 13, 38, .96), rgba(6, 12, 29, .93)); box-shadow: inset 0 1px 0 rgba(230, 214, 255, .04); }
.offer-feature-icon { display: grid; width: 86px; height: 86px; place-items: center; border: 1px solid rgba(178, 104, 255, .77); border-radius: 19px; color: #bc7eff; background: radial-gradient(circle at 50% 42%, rgba(108, 52, 255, .24), rgba(9, 12, 35, .5) 66%); box-shadow: 0 0 16px rgba(135, 55, 255, .27), inset 0 0 18px rgba(138, 72, 255, .12); }
.offer-feature-icon.rent { border-color: rgba(40, 179, 255, .72); color: #51bdff; background: radial-gradient(circle at 50% 42%, rgba(34, 136, 255, .23), rgba(9, 12, 35, .5) 66%); box-shadow: 0 0 16px rgba(43, 137, 255, .25), inset 0 0 18px rgba(38, 100, 255, .12); }
.offer-feature-icon.return { border-color: rgba(142, 90, 255, .8); color: #bb7dff; }
.offer-feature-icon.airdrop { border-color: rgba(126, 92, 255, .78); color: #a68cff; }
.offer-feature-icon svg { width: 51px; height: 51px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px currentColor); }
.offer-feature-list h3 { margin: 0; color: #f7f5ff; font-size: clamp(20px, 5.7vw, 27px); font-weight: 690; line-height: 1.08; letter-spacing: -.045em; }
.offer-feature-list p { margin: 8px 0 0; color: #aab5d3; font-size: 13px; line-height: 1.42; }
@media (max-width: 520px) {
  .dashboard-home .reference-network-grid article { align-items: center; text-align: center; }
  .dashboard-home .reference-stat-heading { justify-content: center; }
  .dashboard-home .reference-income-stat strong,
  .dashboard-home .reference-income-stat small,
  .dashboard-home .reference-load-stat strong,
  .dashboard-home .reference-load-stat small { align-self: center; text-align: center; }
  .reference-income-stat strong { font-size: clamp(20px, 6vw, 27px); }
  .offer-modal-header { padding: 17px 16px 0; }
  .offer-modal-body { padding: 16px 16px 18px; }
  .offer-close-button { width: 45px; height: 45px; border-radius: 15px; font-size: 30px; }
  .offer-modal-body h2 { font-size: clamp(37px, 11.3vw, 48px); }
  .offer-modal-lead { margin: 10px 0 19px; font-size: 13px; }
  .offer-feature-list { gap: 10px; }
  .offer-feature-list article { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; min-height: 108px; padding: 12px; border-radius: 18px; }
  .offer-feature-icon { width: 70px; height: 70px; border-radius: 16px; }
  .offer-feature-icon svg { width: 42px; height: 42px; }
  .offer-feature-list h3 { font-size: clamp(18px, 5.5vw, 23px); }
  .offer-feature-list p { margin-top: 6px; font-size: 11px; line-height: 1.38; }
}

@media (max-width: 385px) {
  .dashboard-home .reference-network-grid { gap: 6px; }
  .dashboard-home .reference-network-grid article { min-height: 110px; padding: 10px 6px; }
  .dashboard-home .reference-stat-heading { gap: 3px; font-size: 8px; }
  .dashboard-home .reference-stat-heading .reference-stat-icon,
  .dashboard-home .reference-stat-heading .reference-stat-icon svg { width: 15px; height: 15px; }
  .dashboard-home .reference-pool-stat strong { margin-top: 11px; font-size: clamp(31px, 10.5vw, 38px); }
  .dashboard-home .reference-pool-stat strong em { display: none; }
  .dashboard-home .reference-income-stat strong { margin-top: 13px; font-size: clamp(17px, 5.9vw, 22px); }
  .dashboard-home .reference-load-stat strong { margin-top: 13px; font-size: clamp(18px, 6.2vw, 24px); }
  .dashboard-home .reference-network-grid small { margin-top: 7px; font-size: 7px; }
}

/* Compact home, tap-through GPU cards, and buy-share package stage. */
.reference-brand .reference-logo { width: 42px; height: 42px; overflow: hidden; border-radius: 13px; background: #030812; filter: drop-shadow(0 0 10px rgba(108, 81, 255, .55)); }
.reference-brand .reference-logo img,
.gpum-page-brand > span img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; transform: none; }
.reference-energy-pill,
.page-energy-pill { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; padding: 5px 8px; }
.reference-energy-pill > .reference-energy-icon,
.page-energy-pill > .page-energy-icon { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; color: #62c8ff; }
.reference-energy-pill > .reference-energy-icon svg,
.page-energy-pill > .page-energy-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(61, 184, 255, .72)); }
.reference-energy-value,
.page-energy-value { display: flex; align-items: baseline; gap: 3px; min-width: 0; color: #f1f5ff; }
.reference-energy-value strong,
.page-energy-value strong { display: block; margin: 0; color: #fff; font-size: 15px; font-weight: 730; letter-spacing: -.05em; white-space: nowrap; }
.reference-energy-value em,
.page-energy-value em { color: #aebce1; font-size: 9px; font-style: normal; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.reference-energy-plus,
.page-energy-plus { margin: 0 0 0 2px; padding: 0; color: #b879ff; font-size: 20px; font-style: normal; font-weight: 300; line-height: .8; text-shadow: 0 0 10px rgba(187, 105, 255, .78); }

.dashboard-home .reference-network-grid { gap: 8px; }
.dashboard-home .reference-network-grid article { min-height: 96px; padding: 10px 8px; }
.dashboard-home .reference-network-grid strong { margin-top: 11px; font-size: clamp(20px, 6.1vw, 29px); }
.dashboard-home .reference-network-grid small { display: none; }
.dashboard-home .reference-stat-heading { justify-content: center; }

.single-share-asset { grid-template-columns: minmax(0, 1fr); }
.single-share-asset .reference-asset-card { min-height: 166px; padding: 16px 17px; }
.single-share-asset .reference-asset-title { font-size: clamp(20px, 6vw, 28px); }
.single-share-asset .reference-asset-card > strong { margin-top: 11px; font-size: clamp(38px, 11vw, 54px); }
.single-share-asset .reference-asset-card > em { margin-top: 5px; font-size: 17px; }
.single-share-asset .reference-asset-card > small { margin-top: 7px; }
.single-share-asset .reference-asset-action { position: relative; right: auto; bottom: auto; align-self: stretch; width: 100%; min-height: 38px; margin: 12px 0 0; font-size: 10px; }
.single-share-asset .reference-asset-action i { width: 21px; height: 21px; font-size: 17px; }
.dashboard-home .single-share-asset .reference-empty-shares { align-items: stretch; justify-content: space-between; text-align: left; }
.dashboard-home .single-share-asset .reference-empty-shares > div { width: 100%; text-align: left; }
.dashboard-home .single-share-asset .reference-empty-shares > div > strong { width: auto; margin: 0; color: #fff; font-size: clamp(30px, 9vw, 45px); line-height: .94; text-align: left; }
.dashboard-home .single-share-asset .reference-empty-shares > div > p { margin: 0; color: #adb8d6; font-size: 11px; line-height: 1.38; text-align: left; }
.dashboard-home .single-share-asset .reference-empty-shares .reference-asset-action { margin-top: 13px; }

.gpu-choice-card-photo { display: flex; width: 100%; min-height: 398px; flex-direction: column; border: 1px solid rgba(167, 96, 255, .62); padding: 12px; color: #eef0ff; background: radial-gradient(circle 12rem at 77% 27%, rgba(46, 107, 255, .2), transparent 63%), linear-gradient(145deg, rgba(9, 12, 35, .99), rgba(4, 11, 25, .99)); text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.gpu-choice-card-photo:not(:disabled):active { transform: scale(.98); }
.gpu-choice-card-photo:not(:disabled):hover { border-color: rgba(63, 178, 255, .9); box-shadow: 0 0 20px rgba(48, 130, 255, .22); }
.gpu-choice-card-photo .gpu-choice-card-title { align-items: flex-start; }
.gpu-choice-card-photo .gpu-choice-card-title h3 { font-size: clamp(18px, 5.4vw, 25px); }
.gpu-choice-card-state { margin-top: 2px; color: #b59aff; font-size: 8px; line-height: 1.2; text-align: right; }
.gpu-choice-photo { position: relative; height: 112px; overflow: hidden; margin: 7px -2px 3px; border: 1px solid rgba(94, 133, 255, .24); border-radius: 14px; background: radial-gradient(circle at 50% 38%, rgba(55, 73, 176, .38), rgba(3, 8, 21, .96) 72%); }
.gpu-choice-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 4, 29, .48), transparent 45%); pointer-events: none; }
.gpu-choice-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(1.12) contrast(1.06); }
.gpu-choice-photo span { position: absolute; z-index: 1; bottom: 8px; left: 9px; color: #eef1ff; font-size: 10px; font-weight: 780; letter-spacing: .04em; text-shadow: 0 2px 8px #03040e; }
.gpu-choice-share-price { display: flex; align-items: baseline; gap: 5px; margin-top: 5px; }
.gpu-choice-share-price strong { color: #f4f1ff; font-size: clamp(30px, 9.7vw, 45px); font-weight: 610; line-height: .9; letter-spacing: -.085em; }
.gpu-choice-share-price em { color: #bd8eff; font-size: 16px; font-style: normal; font-weight: 720; letter-spacing: -.05em; }
.gpu-choice-return { display: grid; grid-template-columns: max-content max-content; align-items: end; max-width: 100%; column-gap: 4px; margin-top: 7px; }
.gpu-choice-return > span { grid-column: 1 / -1; color: #9ba8c9; font-size: 8px; font-weight: 650; line-height: 1.15; }
.gpu-choice-return strong { color: #d4b1ff; font-size: clamp(24px, 7.4vw, 30px); line-height: .96; letter-spacing: -.075em; text-shadow: 0 0 12px rgba(177, 97, 255, .28); white-space: nowrap; }
.gpu-choice-return em { margin-bottom: 1px; color: #9fc8ff; font-size: clamp(10px, 3vw, 12px); white-space: nowrap; }
.gpu-choice-bullets { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.gpu-choice-bullets li { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; border-top: 1px solid rgba(138, 153, 211, .13); padding-top: 5px; color: #9ea9ca; font-size: 8px; line-height: 1.2; }
.gpu-choice-bullets b { color: #e9eaff; font-size: 9px; font-weight: 650; text-align: right; }
.gpu-choice-bullets .gpu-choice-load { color: #d4a7ff; text-shadow: 0 0 9px rgba(189, 104, 255, .42); }
.gpu-choice-bullets .gpu-choice-load small { display: block; margin-top: 2px; color: #8f9bc2; font-size: 7px; font-weight: 600; line-height: 1.1; text-shadow: none; }
.gpu-choice-sale-window { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; margin-top: auto; border-top: 1px solid rgba(138, 153, 211, .2); padding-top: 9px; color: #9db8e7; font-size: 8px; line-height: 1.15; }
.gpu-choice-sale-window strong { color: #80d2ff; font-size: 9px; font-weight: 730; text-align: right; white-space: nowrap; }
.gpu-choice-sale-window.cooldown { color: #a8a9c5; }
.gpu-choice-sale-window.cooldown strong { color: #cf9dff; }

.package-stage { position: relative; overflow: hidden; padding: 4px 0 5px; }
.package-stage-track { display: grid; grid-template-columns: minmax(72px, .75fr) minmax(150px, 1.16fr) minmax(72px, .75fr); align-items: center; gap: 9px; }
.package-stage-card { display: grid; min-width: 0; min-height: 177px; place-items: center; overflow: hidden; border: 1px solid rgba(152, 96, 255, .58); border-radius: 19px; padding: 11px 7px; color: #edf0ff; background: radial-gradient(circle 8rem at 50% 31%, rgba(62, 56, 222, .21), transparent 67%), linear-gradient(145deg, rgba(9, 11, 35, .99), rgba(5, 10, 25, .99)); text-align: center; }
.package-stage-card.selected { min-height: 219px; border-color: rgba(65, 173, 255, .95); background: radial-gradient(circle 11rem at 50% 28%, rgba(50, 91, 255, .32), transparent 68%), linear-gradient(145deg, rgba(20, 10, 61, .99), rgba(5, 14, 35, .99)); box-shadow: 0 0 20px rgba(49, 139, 255, .46), 0 0 28px rgba(153, 59, 255, .25); }
.package-stage-count { display: block; }
.package-stage-count strong { color: #f7f5ff; font-size: 28px; line-height: .9; letter-spacing: -.075em; }
.package-stage-count em { margin-left: 4px; color: #c8c6de; font-size: 13px; font-style: normal; }
.package-stage-card.selected .package-stage-count strong { font-size: 45px; }
.package-stage-card.selected .package-stage-count em { font-size: 21px; }
.package-stage-art { display: block; width: 94px; height: 72px; margin: 4px auto; }
.package-stage-card.selected .package-stage-art { width: 130px; height: 99px; margin: 5px auto 7px; }
.package-stage-art .buy-share-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.package-stage-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)) saturate(1.08); }
.package-stage-card b { color: #b48bff; font-size: 19px; font-weight: 620; letter-spacing: -.06em; }
.package-stage-card.selected b { color: #dbb5ff; font-size: 32px; text-shadow: 0 0 13px rgba(172, 83, 255, .5); }
.package-stage-card small,
.package-stage-card i { display: block; color: #a6b0ce; font-size: 8px; font-style: normal; line-height: 1.3; }
.package-stage-card i { margin-top: 5px; color: #a587ff; }
.package-stage-card.nearby small,
.package-stage-card.nearby i { display: none; }
.package-stage-dots { display: flex; justify-content: center; gap: 8px; margin-top: 11px; }
.package-stage-dots i { width: 7px; height: 7px; border-radius: 50%; background: #30395e; }
.package-stage-dots i.active { background: #ba8bff; box-shadow: 0 0 10px rgba(181, 121, 255, .85); }
.package-summary-card { padding: 4px 15px; }
.package-summary-card .buy-total-row strong { color: #a8d9ff; font-size: 18px; text-shadow: 0 0 12px rgba(77, 174, 255, .18); }
.buy-share-rate-label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.buy-annual-return { display: inline-flex; align-items:baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.buy-annual-return s { color: #8794bd; font-size: .76em; font-weight: 560; text-decoration-color: #d16eaa; text-decoration-thickness: 1.5px; }
.buy-annual-return.discounted > span { color: #bda5ff; }
.share-rate-info-button { display: grid; width: 15px; height: 15px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(153, 178, 238, .6); border-radius: 50%; padding: 0; color: #c8dbff; background: rgba(55, 105, 198, .15); font-size: 10px; font-weight: 800; font-style: italic; line-height: 1; }
.share-rate-tier-list { display: grid; gap: 8px; margin: 13px 0; }
.share-rate-tier-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid rgba(133, 154, 224, .16); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.share-rate-tier-list strong { color: #d9c1ff; font-size: 14px; }
.share-rate-tier-list span { color: #a5b2d1; font-size: 10px; text-align: right; }
.rate-modal { overflow: hidden; border-color: rgba(174, 102, 255, .76); border-radius: 28px; background: radial-gradient(circle 19rem at 50% -9%, rgba(117, 43, 255, .3), transparent 58%), linear-gradient(153deg, #1b0a40, #0c1132 57%, #12072d); box-shadow: 0 22px 60px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 242, 255, .1); }
.rate-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 23px 14px; }
.rate-modal-header p { margin: 0 0 5px; color: #b9a8e9; font-size: 11px; font-weight: 670; }
.rate-modal-header h2 { margin: 0; color: #fbf9ff; font-size: clamp(31px, 9vw, 43px); font-weight: 660; line-height: .94; letter-spacing: -.07em; }
.rate-modal-close { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(221, 193, 255, .35); border-radius: 50%; color: #f4ebff; background: rgba(25, 12, 61, .6); font-size: 21px; line-height: 1; }
.rate-modal-body { padding: 4px 18px 18px; }
.rate-package-summary { display: grid; gap: 4px; margin: 4px 0 13px; border: 1px solid rgba(101, 163, 255, .4); border-radius: 16px; padding: 12px 13px; background: linear-gradient(130deg, rgba(19, 60, 132, .47), rgba(34, 20, 84, .58)); }
.rate-package-summary > span { color: #a9bee9; font-size: 10px; }
.rate-package-summary > strong { color: #f1f3ff; font-size: 13px; font-weight: 650; }
.rate-package-summary > b { display: inline-flex; align-items: baseline; gap: 7px; color: #e6b2ff; font-size: 24px; letter-spacing: -.06em; }
.rate-package-summary > b s { color: #8d9abc; font-size: .6em; font-weight: 560; text-decoration-color: #da78ad; text-decoration-thickness: 1.5px; }
.rate-tier-list { display: grid; gap: 9px; margin: 12px 0 15px; }
.rate-tier { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 74px; border: 1px solid rgba(172, 151, 235, .22); border-radius: 17px; padding: 12px 13px; background: linear-gradient(120deg, rgba(45, 28, 105, .62), rgba(12, 21, 57, .72)); }
.rate-tier.active { border-color: rgba(190, 130, 255, .85); background: radial-gradient(circle 9rem at 100% 50%, rgba(156, 77, 255, .22), transparent 67%), linear-gradient(120deg, rgba(76, 31, 157, .74), rgba(17, 26, 66, .88)); box-shadow: inset 0 1px 0 rgba(255, 241, 255, .13), 0 0 18px rgba(131, 55, 255, .18); }
.rate-tier > i { width: 17px; height: 17px; border: 1.5px solid #9ca5d5; border-radius: 50%; }
.rate-tier.active > i { border-color: #f0d7ff; box-shadow: inset 0 0 0 4px #9b5bff, 0 0 12px rgba(181, 110, 255, .76); }
.rate-tier strong { display: block; color: #f0edff; font-size: 14px; font-weight: 680; }
.rate-tier span { display: block; margin-top: 4px; color: #b2b9db; font-size: 10px; line-height: 1.25; }
.rate-tier b { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; color: #d9a5ff; font-size: 19px; font-weight: 650; letter-spacing: -.06em; text-align: right; white-space: nowrap; }
.rate-tier b s { color: #8391b5; font-size: .61em; font-weight: 560; text-decoration-color: #d16eaa; text-decoration-thickness: 1.5px; }
.rate-tier.active b { color: #f0c5ff; text-shadow: 0 0 12px rgba(213, 135, 255, .45); }
.rate-modal-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; border: 1px solid rgba(114, 147, 255, .35); border-radius: 14px; padding: 11px; color: #bdc9ed; background: rgba(13, 29, 69, .64); }
.rate-modal-notice i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(149, 193, 255, .85); border-radius: 50%; color: #9fcaff; font-size: 12px; font-style: normal; font-weight: 800; }
.rate-modal-notice p { margin: 0; font-size: 10px; line-height: 1.4; }
.rate-modal-action { min-height: 51px; margin-top: 14px; border-color: rgba(230, 170, 255, .72); background: linear-gradient(105deg, #4326ec, #8e27ed 67%, #bf5cff); font-size: 16px; }
.gram-wallet-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.gram-wallet-control > div { min-width: 0; }
.gram-wallet-control span { display: block; color: #9ca8c8; font-size: 10px; }
.gram-wallet-control strong { display: block; margin-top: 4px; overflow: hidden; color: #eef2ff; font-size: 13px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.gram-wallet-control .secondary-button { min-height: 34px; flex: 0 0 auto; padding: 0 12px; font-size: 10px; }
.payment-readiness { margin: 10px 0 0; color: #9daac8; font-size: 10px; line-height: 1.35; }

@media (max-width: 520px) {
  .reference-brand .reference-logo { width: 38px; height: 38px; border-radius: 11px; }
  .reference-energy-pill { min-height: 37px; }
  .reference-energy-value strong { font-size: 14px; }
  .reference-energy-value em { font-size: 8px; }
  .page-energy-value strong { font-size: 12px; }
  .page-energy-value em { font-size: 8px; }
  .dashboard-home .reference-network-grid article { min-height: 88px; padding: 8px 5px; }
  .dashboard-home .reference-network-grid strong { margin-top: 10px; font-size: clamp(19px, 5.9vw, 25px); }
  .single-share-asset .reference-asset-card { min-height: 153px; padding: 14px; }
  .single-share-asset .reference-asset-action { min-height: 34px; margin-top: 10px; font-size: 9px; }
  .gpu-choice-card-photo { min-height: 371px; padding: 10px; border-radius: 17px; }
  .gpu-choice-photo { height: 94px; border-radius: 12px; }
  .gpu-choice-bullets { gap: 4px; margin-top: 9px; }
  .gpu-choice-bullets li { padding-top: 4px; font-size: 7px; }
  .gpu-choice-bullets b { font-size: 8px; }
  .gpu-choice-return strong { font-size: clamp(22px, 7vw, 27px); }
  .gpu-choice-return em { font-size: 10px; }
  .package-stage-track { grid-template-columns: minmax(65px, .71fr) minmax(142px, 1.13fr) minmax(65px, .71fr); gap: 7px; }
  .package-stage-card { min-height: 157px; border-radius: 16px; padding: 9px 5px; }
  .package-stage-card.selected { min-height: 197px; }
  .package-stage-count strong { font-size: 23px; }
  .package-stage-count em { display: block; margin: 3px 0 0; font-size: 10px; }
  .package-stage-card.selected .package-stage-count strong { font-size: 38px; }
  .package-stage-card.selected .package-stage-count em { font-size: 16px; }
  .package-stage-art { width: 70px; height: 58px; }
  .package-stage-card.selected .package-stage-art { width: 108px; height: 82px; }
  .package-stage-card b { font-size: 16px; }
  .package-stage-card.selected b { font-size: 27px; }
}

@media (max-width: 385px) {
  .dashboard-home .reference-network-grid article { min-height: 84px; }
  .single-share-asset .reference-asset-card { min-height: 149px; }
  .single-share-asset .reference-asset-card > strong { font-size: 38px; }
  .gpu-choice-card-photo { min-height: 352px; padding: 9px; }
  .gpu-choice-photo { height: 83px; }
  .gpu-choice-share-price strong { font-size: 31px; }
  .gpu-choice-share-price em { font-size: 13px; }
  .gpu-choice-return strong { font-size: clamp(20px, 6.7vw, 24px); }
  .gpu-choice-return em { font-size: 9px; }
  .package-stage-track { grid-template-columns: minmax(57px, .68fr) minmax(132px, 1.12fr) minmax(57px, .68fr); gap: 5px; }
  .package-stage-card { min-height: 149px; }
  .package-stage-card.selected { min-height: 189px; }
  .package-stage-card.selected .package-stage-count strong { font-size: 33px; }
  .package-stage-card.selected .package-stage-art { width: 94px; height: 72px; }
  .package-stage-card.selected b { font-size: 23px; }
}

/* Statistics screens follow the GPUM reference while keeping Telegram widths compact. */
.reference-network-stat-link {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 96px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(13, 160, 194, .52);
  border-radius: 17px;
  padding: 10px 8px;
  color: #f6f7ff;
  background: linear-gradient(145deg, rgba(3, 17, 34, .98), rgba(2, 10, 22, .98));
  text-align: center;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.reference-network-stat-link:active { transform: scale(.975); }
.reference-network-stat-link:focus-visible,
.reference-asset-open:focus-visible,
.reference-asset-action:focus-visible { outline: 2px solid #80caff; outline-offset: 3px; }
.reference-network-stat-link:hover { border-color: rgba(76, 154, 255, .86); box-shadow: 0 0 17px rgba(48, 130, 255, .16); }
.reference-network-stat-link .reference-stat-heading { justify-content: center; }
.reference-network-stat-link strong { display: block; align-self: center; margin-top: auto; color: #f8f9ff; font-size: clamp(20px, 6vw, 29px); font-weight: 650; line-height: 1; letter-spacing: -.065em; white-space: nowrap; }
.reference-network-stat-link strong em { color: #aebbe0; font-size: .48em; font-style: normal; font-weight: 650; letter-spacing: -.03em; }
.reference-network-stat-link.reference-income-stat strong { color: #74d6ff; }
.reference-network-stat-link.reference-load-stat strong { color: #d1a1ff; }

.reference-asset-card-interactive { align-items: stretch; }
.reference-empty-shares { align-items: stretch; justify-content: space-between; min-height: 208px; }
.reference-empty-shares > div { position: relative; z-index: 1; display: grid; gap: 9px; }
.reference-empty-shares > div > span { color: #aa8aff; font-size: 10px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.reference-empty-shares > div > strong { display: block; color: #fbfaff; font-size: clamp(31px, 9vw, 47px); font-weight: 680; line-height: .93; letter-spacing: -.075em; }
.reference-empty-shares > div > p { max-width: 280px; margin: 0; color: #aeb9d7; font-size: 11px; line-height: 1.4; }
.reference-empty-shares .reference-asset-action { margin-top: 14px; }
.reference-asset-open {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: center;
}
.reference-asset-open .reference-asset-title { width: 100%; }
.reference-asset-open > strong {
  display: block;
  width: 100%;
  margin-top: 11px;
  overflow: visible;
  color: #fff;
  font-size: clamp(38px, 11vw, 54px);
  font-weight: 580;
  line-height: .82;
  letter-spacing: -.09em;
  text-align: center;
}
.reference-asset-open > em {
  display: block;
  width: 100%;
  margin-top: 5px;
  color: #c354ff;
  font-size: 17px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: -.05em;
  text-align: center;
}
.reference-asset-open > small {
  display: block;
  width: 100%;
  margin-top: 7px;
  color: #c0c8df;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}
.reference-asset-card-interactive .reference-asset-action {
  flex: 0 0 auto;
  margin-top: 10px;
  cursor: pointer;
}

.statistics-screen { gap: 18px; padding-bottom: 6px; }
.statistics-heading { margin: 3px 2px 1px; }
.statistics-heading h2 { margin: 0; color: #fbfaff; font-size: clamp(34px, 10.7vw, 52px); font-weight: 730; line-height: .98; letter-spacing: -.065em; }
.statistics-heading p { margin: 11px 0 0; color: #9db4d5; font-size: clamp(13px, 3.8vw, 16px); line-height: 1.32; }
.statistics-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.statistics-overview-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 145px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid rgba(180, 104, 255, .68);
  border-radius: 19px;
  padding: 15px 9px 13px;
  background: radial-gradient(circle at 50% 0, rgba(122, 63, 255, .17), transparent 53%), linear-gradient(145deg, rgba(10, 12, 35, .98), rgba(5, 10, 25, .99));
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(244, 227, 255, .05), 0 9px 24px rgba(0, 0, 0, .16);
}
.statistics-overview-card.blue { border-color: rgba(63, 142, 255, .76); background: radial-gradient(circle at 50% 0, rgba(46, 123, 255, .16), transparent 53%), linear-gradient(145deg, rgba(8, 17, 44, .98), rgba(5, 10, 28, .99)); }
.statistics-overview-card.cyan { border-color: rgba(36, 205, 226, .7); background: radial-gradient(circle at 50% 0, rgba(23, 184, 255, .14), transparent 53%), linear-gradient(145deg, rgba(5, 26, 41, .98), rgba(4, 12, 28, .99)); }
.statistics-overview-card.fuchsia { border-color: rgba(212, 91, 255, .74); background: radial-gradient(circle at 50% 0, rgba(192, 65, 255, .15), transparent 53%), linear-gradient(145deg, rgba(21, 10, 42, .98), rgba(7, 9, 27, .99)); }
.statistics-overview-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #d378ff;
  background: rgba(91, 39, 174, .12);
  box-shadow: 0 0 17px rgba(186, 96, 255, .26), inset 0 0 14px rgba(185, 105, 255, .12);
}
.statistics-overview-card.blue .statistics-overview-icon { color: #56b6ff; background: rgba(31, 103, 255, .11); box-shadow: 0 0 17px rgba(42, 134, 255, .25), inset 0 0 14px rgba(57, 142, 255, .11); }
.statistics-overview-card.cyan .statistics-overview-icon { color: #36ddff; background: rgba(19, 158, 224, .1); box-shadow: 0 0 17px rgba(31, 202, 255, .23), inset 0 0 14px rgba(65, 235, 255, .1); }
.statistics-overview-card.fuchsia .statistics-overview-icon { color: #e471ff; background: rgba(151, 35, 236, .1); box-shadow: 0 0 17px rgba(211, 87, 255, .24), inset 0 0 14px rgba(225, 92, 255, .11); }
.statistics-overview-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px currentColor); }
.statistics-overview-card > span:not(.statistics-overview-icon) { margin-top: 12px; color: #c0c9df; font-size: 12px; line-height: 1.15; }
.statistics-overview-card strong { margin-top: auto; overflow: visible; color: #eeedff; font-size: clamp(22px, 7.2vw, 30px); font-weight: 570; line-height: .95; letter-spacing: -.07em; white-space: nowrap; }
.statistics-overview-card.violet strong,
.statistics-overview-card.fuchsia strong { color: #d98cff; }
.statistics-overview-card.blue strong { color: #76caff; }
.statistics-overview-card.cyan strong { color: #51e3fa; }
.statistics-overview-card strong em { color: #aebae1; font-size: .5em; font-style: normal; font-weight: 650; letter-spacing: -.025em; }
.statistics-overview-card.wide { grid-column: 1 / -1; min-height: 145px; gap: 0; padding: 15px 9px 13px; text-align: center; }
.statistics-overview-card.wide > span:not(.statistics-overview-icon) { margin-top: 12px; }
.statistics-overview-card.wide strong { margin-top: auto; font-size: clamp(27px, 8vw, 35px); }

.statistics-positions { display: grid; gap: 12px; }
.statistics-positions > h3 { margin: 0 2px; color: #f5f4ff; font-size: clamp(24px, 7.2vw, 32px); font-weight: 650; line-height: 1; letter-spacing: -.055em; }
.statistics-position-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.statistics-position-card {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(193, 105, 255, .72);
  border-radius: 22px;
  padding: 17px 16px 14px;
  background: radial-gradient(circle 14rem at 100% 0, rgba(117, 49, 255, .16), transparent 62%), linear-gradient(145deg, rgba(12, 9, 35, .99), rgba(4, 10, 25, .99));
  box-shadow: inset 0 1px 0 rgba(242, 225, 255, .05), 0 10px 24px rgba(0, 0, 0, .19);
}
.statistics-position-card.blue { border-color: rgba(65, 141, 255, .76); background: radial-gradient(circle 14rem at 100% 0, rgba(36, 113, 255, .16), transparent 62%), linear-gradient(145deg, rgba(7, 18, 43, .99), rgba(4, 10, 27, .99)); }
.statistics-position-card.fuchsia { border-color: rgba(222, 97, 255, .7); }
.statistics-position-card.cyan { border-color: rgba(33, 192, 240, .7); background: radial-gradient(circle 14rem at 100% 0, rgba(16, 170, 255, .13), transparent 62%), linear-gradient(145deg, rgba(6, 23, 41, .99), rgba(4, 11, 26, .99)); }
.statistics-position-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 51px; }
.statistics-position-card h3 { margin: 0; color: #f7f6ff; font-size: clamp(26px, 7.9vw, 34px); font-weight: 600; line-height: .94; letter-spacing: -.065em; }
.statistics-position-card header span { display: block; margin-top: 6px; color: #aeb8d5; font-size: 10px; line-height: 1.2; }
.statistics-position-card header img { width: 84px; height: 48px; flex: 0 0 auto; object-fit: contain; object-position: center; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .46)) saturate(1.14); }
.statistics-position-details { display: grid; gap: 8px; margin: 0; }
.statistics-position-details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 11px; min-width: 0; }
.statistics-position-details dt { display: flex; align-items: center; min-width: 0; gap: 8px; margin: 0; color: #c4ccde; font-size: 13px; line-height: 1.2; }
.statistics-position-details dt i { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; color: #c472ff; font-style: normal; }
.statistics-position-card.blue .statistics-position-details dt i { color: #5baeff; }
.statistics-position-card.cyan .statistics-position-details dt i { color: #3cd9ff; }
.statistics-position-details dt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px currentColor); }
.statistics-position-details dd { margin: 0; color: #f1f3ff; font-size: 14px; font-weight: 590; line-height: 1.2; text-align: right; white-space: nowrap; }
.statistics-position-details > div:nth-child(2) dd { color: #73c7ff; }
.statistics-position-details > div:nth-child(3) dd { color: #4ee5f7; }
.statistics-position-details > div:nth-child(4) dd { color: #d88bff; }
.statistics-position-details dd em { display: inline-block; margin-left: 6px; color: #d8a1ff; font-size: .78em; font-style: normal; font-weight: 700; }
.statistics-position-details > .statistics-position-detail-wide { align-items: center; margin-top: 3px; border: 1px solid rgba(163, 109, 255, .38); border-radius: 12px; padding: 9px 10px; background: rgba(78, 35, 158, .14); }
.statistics-position-details > .statistics-position-detail-wide dd { display: grid; gap: 3px; color: #e0a3ff; font-size: 17px; font-weight: 700; }
.statistics-position-details > .statistics-position-detail-wide dd small { color: #aeb9da; font-size: 9px; font-weight: 560; }
.statistics-trend { min-width: 0; padding-top: 3px; }
.statistics-trend svg { display: block; width: 100%; height: 85px; overflow: visible; }
.statistics-trend-axis { display: flex; justify-content: space-between; margin-top: 1px; color: #aeb7ce; font-size: 9px; line-height: 1; }
.statistics-availability-chart { padding-top: 5px; }
.statistics-availability-chart svg { height: 57px; margin-top: 7px; overflow: visible; }
.statistics-availability-legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #c2cbdf; font-size: 9px; line-height: 1; }
.statistics-availability-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.statistics-availability-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: #31405f; box-shadow: 0 0 5px rgba(43, 61, 102, .56); }
.statistics-availability-legend i.active { box-shadow: 0 0 7px currentColor; }
.statistics-trend-unavailable { display: grid; min-height: 85px; place-content: center; border-top: 1px dashed rgba(157, 172, 221, .22); color: #bdc8e3; text-align: center; }
.statistics-trend-unavailable span { font-size: 11px; font-weight: 650; }
.statistics-trend-unavailable small { margin-top: 5px; color: #8695b7; font-size: 9px; line-height: 1.35; }

.statistics-empty { display: grid; grid-template-columns: 37px minmax(0, 1fr); align-items: center; gap: 11px; border: 1px solid rgba(155, 167, 215, .22); border-radius: 18px; padding: 14px; background: rgba(12, 19, 42, .7); }
.statistics-empty > span { display: grid; width: 36px; height: 36px; place-items: center; color: #c77bff; }
.statistics-empty > span svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px currentColor); }
.statistics-empty strong { display: block; color: #eff1ff; font-size: 14px; }
.statistics-empty p { margin: 4px 0 0; color: #9eaac8; font-size: 10px; line-height: 1.35; }
.statistics-empty .secondary-button { grid-column: 1 / -1; min-height: 37px; font-size: 11px; }

@media (min-width: 500px) {
  .statistics-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .statistics-overview-card { min-height: 161px; padding: 16px 8px 14px; }
  .statistics-overview-card > span:not(.statistics-overview-icon) { font-size: 11px; }
  .statistics-overview-card strong { font-size: 24px; }
  .statistics-overview-card.cyan strong { font-size: 24px; }
  .statistics-overview-card.wide { min-height: 161px; }
  .statistics-position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistics-position-card { gap: 12px; padding: 15px 13px 12px; }
  .statistics-position-card h3 { font-size: 26px; }
  .statistics-position-card header img { width: 72px; height: 41px; }
  .statistics-position-details { gap: 7px; }
  .statistics-position-details dt { gap: 6px; font-size: 11px; }
  .statistics-position-details dd { font-size: 12px; }
  .statistics-trend svg { height: 73px; }
  .statistics-availability-chart svg { height: 57px; }
  .statistics-trend-axis { font-size: 8px; }
}

@media (max-width: 385px) {
  .reference-network-stat-link { min-height: 84px; padding: 8px 5px; }
  .reference-network-stat-link strong { font-size: clamp(18px, 5.7vw, 23px); }
  .reference-asset-open > strong { font-size: 38px; }
  .statistics-screen { gap: 14px; }
  .statistics-heading h2 { font-size: 33px; }
  .statistics-overview-card { min-height: 137px; padding: 13px 7px 11px; }
  .statistics-overview-icon { width: 39px; height: 39px; }
  .statistics-overview-icon svg { width: 23px; height: 23px; }
  .statistics-overview-card > span:not(.statistics-overview-icon) { margin-top: 9px; font-size: 11px; }
  .statistics-overview-card strong { font-size: 22px; }
  .statistics-overview-card.cyan strong { font-size: 16px; }
  .statistics-overview-card.wide { min-height: 137px; padding: 13px 7px 11px; }
  .statistics-overview-card.wide strong { font-size: 26px; }
  .statistics-position-card { gap: 11px; padding: 15px 13px 12px; }
  .statistics-position-card h3 { font-size: 25px; }
  .statistics-position-card header img { width: 70px; height: 41px; }
  .statistics-position-details dt { gap: 6px; font-size: 12px; }
  .statistics-position-details dd { font-size: 13px; }
  .statistics-total-metrics > div { padding: 0 6px; }
  .statistics-total-metrics small { font-size: 9px; }
}

/* Payout screen follows the compact payout reference and keeps live balances distinct from the visual 30-day result. */
.payouts-screen { gap: 16px; }
.payout-heading { margin: 0 2px 1px; }
.payout-heading h2 { font-size: clamp(36px, 10.5vw, 52px); }
.payout-heading > div > p:not(.eyebrow) { margin-top: 9px; color: #aeb8d9; font-size: 15px; }
.payout-hero { min-height: 204px; align-items: stretch; padding: 25px 22px 20px; border-color: rgba(190, 92, 255, .88); border-radius: 25px; background: radial-gradient(circle 14rem at 102% 38%, rgba(78, 73, 255, .34), transparent 67%), radial-gradient(circle 11rem at 18% 2%, rgba(128, 41, 255, .17), transparent 58%), linear-gradient(136deg, #080621, #050b20 58%, #0b0630); box-shadow: inset 0 1px 0 rgba(233, 207, 255, .11), 0 17px 38px rgba(7, 0, 37, .38); }
.payout-hero::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(137, 87, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 112, 255, .1) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(135deg, transparent 5%, #000 57%, transparent 100%); pointer-events: none; }
.payout-hero-copy { position: relative; z-index: 2; width: min(64%, 250px); }
.payout-hero .payout-hero-copy > span { color: #c7b9ef; font-size: 14px; }
.payout-hero .payout-hero-copy > strong { margin-top: 15px; color: #fffdfd; font-size: clamp(43px, 12.5vw, 65px); font-weight: 540; line-height: .86; letter-spacing: -.09em; text-shadow: 0 0 18px rgba(210, 156, 255, .16); }
.payout-hero .payout-hero-copy > small { margin-top: 15px; color: #a784ff; font-size: 13px; line-height: 1.25; }
.payout-art-wrap { position: absolute; z-index: 1; right: -10px; bottom: 0; width: min(59%, 285px); height: 100%; overflow: hidden; pointer-events: none; }
.payout-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 58%; filter: drop-shadow(-14px 16px 17px rgba(0, 0, 0, .52)) saturate(1.16); }
.payout-withdraw-card { display: grid; gap: 14px; border: 1px solid rgba(183, 102, 255, .7); border-radius: 23px; padding: 20px; background: radial-gradient(circle 18rem at 100% 0, rgba(73, 62, 238, .14), transparent 63%), linear-gradient(145deg, rgba(8, 12, 38, .98), rgba(4, 10, 26, .99)); box-shadow: inset 0 1px 0 rgba(229, 217, 255, .06); }
.payout-withdraw-card h3 { margin: 0; color: #fbfaff; font-size: clamp(23px, 6.5vw, 31px); font-weight: 640; line-height: 1; letter-spacing: -.055em; }
.payout-wallet-hint { margin: -5px 0 0; color: #aeb8d0; font-size: 11px; line-height: 1.4; }
.payout-wallet-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px; }
.payout-address-input { min-width: 0; min-height: 58px; border-color: rgba(129, 141, 204, .44); padding: 0 16px; color: #d9dcf3; font-size: 14px; background: rgba(4, 10, 28, .86); }
.payout-wallet-line .secondary-button { min-width: 110px; min-height: 58px; border-color: rgba(64, 133, 255, .82); color: #5fb1ff; background: linear-gradient(135deg, rgba(10, 44, 103, .42), rgba(8, 15, 49, .82)); font-size: 15px; }
.payout-action-row { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(106px, .84fr); gap: 10px; }
.payout-action { width: 100%; min-height: 62px; border: 1px solid rgba(186, 98, 255, .9); border-radius: 14px; background: linear-gradient(107deg, #2b2dff, #6f1cf0 62%, #9e0ff5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 9px 23px rgba(87, 17, 232, .42); font-size: clamp(17px, 5vw, 22px); font-weight: 610; }
.payout-spend-action { min-height: 62px; border-color: rgba(75, 168, 255, .76); color: #a8ddff; background: linear-gradient(135deg, rgba(13, 68, 146, .47), rgba(20, 20, 73, .86)); font-size: 12px; font-weight: 700; line-height: 1.15; }
.payout-state-copy { margin: -7px 8px 1px; color: #aeb8d0; font-size: 11px; }
.payout-history-card { border: 1px solid rgba(172, 97, 255, .62); border-radius: 23px; padding: 20px; background: linear-gradient(145deg, rgba(8, 12, 35, .96), rgba(4, 10, 25, .99)); box-shadow: inset 0 1px 0 rgba(228, 215, 255, .04); }
.payout-history-card h3 { margin: 0 0 18px; color: #f7f5ff; font-size: clamp(25px, 7.1vw, 34px); font-weight: 640; line-height: 1; letter-spacing: -.055em; }
.payout-history-table { overflow: hidden; border: 1px solid rgba(107, 129, 204, .31); border-radius: 15px; background: rgba(3, 9, 25, .78); }
.payout-history-row { display: grid; grid-template-columns: minmax(82px, 1.2fr) minmax(70px, .9fr) minmax(60px, .78fr) auto; align-items: center; gap: 9px; min-height: 57px; border-bottom: 1px solid rgba(120, 140, 205, .19); padding: 8px 12px; }
.payout-history-row:last-child { border-bottom: 0; }
.payout-history-row time { color: #b7c0e0; font-size: 11px; line-height: 1.2; }
.payout-history-row strong { overflow: hidden; color: #faf9ff; font-size: 14px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.payout-history-row > span { overflow: hidden; color: #b4b9de; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.payout-history-row b { justify-self: end; border: 1px solid rgba(22, 217, 98, .62); border-radius: 999px; padding: 5px 8px; color: #5cff9e; background: rgba(8, 103, 53, .17); font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; }
.payout-history-row b.pending { border-color: rgba(63, 150, 255, .72); color: #62b5ff; background: rgba(16, 75, 170, .17); }
.payout-history-empty { display: grid; grid-template-columns: 33px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 86px; padding: 14px; }
.payout-history-empty > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(159, 117, 255, .56); border-radius: 10px; color: #bd90ff; background: rgba(107, 52, 235, .13); font-size: 18px; }
.payout-history-empty strong { display: block; color: #eaf0ff; font-size: 13px; }
.payout-history-empty p { margin: 4px 0 0; color: #9eaac8; font-size: 10px; line-height: 1.35; }
.annual-return-list { display: grid; gap: 8px; margin: 14px 0; }
.annual-return-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(128, 147, 225, .2); border-radius: 13px; padding: 12px; background: linear-gradient(145deg, rgba(11, 21, 49, .9), rgba(5, 12, 31, .76)); }
.annual-return-list strong { display: block; color: #f0efff; font-size: 14px; }
.annual-return-list span { display: block; margin-top: 4px; color: #97a6cb; font-size: 10px; }
.annual-return-list b { color: #c792ff; font-size: 16px; letter-spacing: -.04em; white-space: nowrap; }

@media (max-width: 520px) {
  .payout-heading > div > p:not(.eyebrow) { font-size: 13px; }
  .payout-hero { min-height: 192px; padding: 20px 17px 16px; border-radius: 20px; }
  .payout-hero-copy { width: 65%; }
  .payout-hero .payout-hero-copy > span { font-size: 12px; }
  .payout-hero .payout-hero-copy > strong { margin-top: 10px; font-size: clamp(38px, 12vw, 52px); }
  .payout-hero .payout-hero-copy > small { margin-top: 11px; font-size: 10px; }
  .payout-art-wrap { right: -14px; bottom: 0; width: 59%; }
  .payout-withdraw-card,
  .payout-history-card { border-radius: 19px; padding: 16px; }
  .payout-withdraw-card { gap: 11px; }
  .payout-wallet-line { gap: 8px; }
  .payout-address-input,
  .payout-wallet-line .secondary-button { min-height: 49px; }
  .payout-address-input { border-radius: 12px; padding: 0 12px; font-size: 12px; }
  .payout-wallet-line .secondary-button { min-width: 88px; padding: 0 9px; font-size: 12px; }
  .payout-action-row { grid-template-columns: minmax(0, 1.3fr) minmax(89px, .8fr); gap: 8px; }
  .payout-action,
  .payout-spend-action { min-height: 53px; border-radius: 12px; }
  .payout-action { font-size: 16px; }
  .payout-spend-action { font-size: 10px; }
  .payout-history-card h3 { margin-bottom: 14px; }
  .payout-history-row { grid-template-columns: minmax(64px, 1.12fr) minmax(56px, .88fr) minmax(38px, .58fr) auto; gap: 6px; min-height: 52px; padding: 7px 8px; }
  .payout-history-row time { font-size: 9px; }
  .payout-history-row strong { font-size: 11px; }
  .payout-history-row > span { font-size: 8px; }
  .payout-history-row b { padding: 4px 6px; font-size: 7px; }
}

@media (max-width: 370px) {
  .payout-hero { min-height: 198px; }
  .payout-hero .payout-hero-copy > strong { font-size: 36px; }
  .payout-art-wrap { width: 58%; }
  .payout-wallet-line .secondary-button { min-width: 76px; font-size: 10px; }
  .payout-action-row { grid-template-columns: minmax(0, 1.22fr) minmax(78px, .78fr); gap: 6px; }
  .payout-spend-action { font-size: 9px; }
  .payout-history-row { grid-template-columns: minmax(59px, 1.15fr) minmax(50px, .88fr) 33px auto; gap: 4px; padding: 7px 6px; }
  .payout-history-row b { font-size: 6px; }
}

/* Reference refresh: compact navigation, share inventory, TOP and partners. */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.gpu-choice-sale-window.availability { display: grid; align-items: stretch; gap: 6px; }
.gpu-choice-availability-heading,
.gpu-choice-availability-range { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gpu-choice-availability-heading > span { color: #9db8e7; }
.gpu-choice-availability-heading > strong { color: #80d2ff; font-size: 9px; }
.gpu-choice-availability-track { position: relative; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(107, 129, 195, .25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .48); }
.gpu-choice-availability-track > i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #4c91ff, #ad6aff); box-shadow: 0 0 8px rgba(98, 145, 255, .78); }
.gpu-choice-availability-range { color: #7785aa; font-size: 7px; }
.gpu-choice-availability-range b { color: #aeb9d9; font-size: 7px; font-weight: 650; }

.statistics-ownership-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 14px; overflow: hidden; border: 1px solid rgba(163, 105, 255, .68); border-radius: 22px; padding: 15px; background: radial-gradient(circle 15rem at 100% 0, rgba(101, 52, 241, .19), transparent 60%), linear-gradient(145deg, rgba(11, 11, 38, .98), rgba(5, 10, 26, .99)); box-shadow: inset 0 1px 0 rgba(245, 230, 255, .05); }
.statistics-ownership-pie { position: relative; width: 128px; height: 128px; }
.statistics-ownership-pie svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.statistics-ownership-pie circle { fill: none; stroke-width: 15; }
.statistics-ownership-pie .ownership-track { stroke: rgba(80, 101, 157, .48); }
.statistics-ownership-pie .ownership-issued { stroke: #bf73ff; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(190, 112, 255, .75)); }
.statistics-ownership-pie > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.statistics-ownership-pie strong { display: block; color: #f1c4ff; font-size: 23px; font-weight: 670; letter-spacing: -.075em; }
.statistics-ownership-pie span { display: block; margin-top: 3px; color: #aeb9d8; font-size: 9px; }
.statistics-ownership-copy p { margin: 0; color: #b79be8; font-size: 10px; font-weight: 700; }
.statistics-ownership-copy h3 { margin: 4px 0 12px; color: #f5f3ff; font-size: clamp(21px, 6vw, 27px); font-weight: 650; line-height: .98; letter-spacing: -.06em; }
.statistics-ownership-copy dl { display: grid; gap: 8px; margin: 0; }
.statistics-ownership-copy dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.statistics-ownership-copy dt { display: inline-flex; align-items: center; gap: 6px; color: #c2cae1; font-size: 10px; }
.statistics-ownership-copy dt i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.statistics-ownership-copy dt i.issued { background: #bf73ff; box-shadow: 0 0 8px rgba(188, 110, 255, .8); }
.statistics-ownership-copy dt i.company { background: #435273; }
.statistics-ownership-copy dd { margin: 0; color: #eff1ff; font-size: 11px; font-weight: 650; white-space: nowrap; }
.statistics-position-details .share-rate-info-button { margin-left: 1px; }

.leaderboard-reference-screen,
.partners-reference-screen { gap: 15px; }
.leaderboard-reference-heading,
.partners-reference-heading { margin: 2px 2px 0; }
.leaderboard-reference-heading .eyebrow,
.partners-reference-heading .eyebrow { margin: 0 0 7px; color: #ba96ff; font-size: 10px; font-weight: 760; letter-spacing: .08em; }
.leaderboard-reference-heading h2,
.partners-reference-heading h2 { margin: 0; color: #fbfaff; font-size: clamp(39px, 11vw, 55px); font-weight: 720; line-height: .9; letter-spacing: -.075em; }
.leaderboard-reference-heading > p:not(.eyebrow),
.partners-reference-heading > div > p:not(.eyebrow) { margin: 10px 0 0; color: #acb7d8; font-size: 13px; line-height: 1.38; }

.leaderboard-reference-hero { position: relative; min-height: 278px; overflow: hidden; border: 1px solid rgba(172, 99, 255, .78); border-radius: 24px; padding: 21px 18px 96px; background: radial-gradient(circle 14rem at 100% 25%, rgba(80, 72, 255, .36), transparent 62%), radial-gradient(circle 12rem at 3% 0, rgba(131, 44, 255, .18), transparent 59%), linear-gradient(145deg, #12083d, #070d27 68%, #09061f); box-shadow: inset 0 1px 0 rgba(240, 226, 255, .09), 0 18px 38px rgba(12, 2, 45, .26); }
.leaderboard-reference-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(166, 106, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(89, 131, 255, .075) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(135deg, #000, transparent 78%); pointer-events: none; }
.leaderboard-reference-copy { position: relative; z-index: 2; width: min(61%, 235px); }
.leaderboard-reference-copy > span { display: block; color: #c7acff; font-size: 11px; font-weight: 720; }
.leaderboard-reference-copy h3 { margin: 10px 0 0; color: #fcfaff; font-size: clamp(34px, 10.3vw, 48px); font-weight: 700; line-height: .91; letter-spacing: -.08em; }
.leaderboard-reference-copy p { margin: 13px 0 0; color: #b5bad9; font-size: 11px; line-height: 1.42; }
.leaderboard-reference-hero > img { position: absolute; z-index: 1; right: -27px; top: -2px; width: min(63%, 270px); height: 190px; object-fit: cover; object-position: 75% 50%; filter: saturate(1.12) drop-shadow(-11px 17px 21px rgba(0, 0, 0, .54)); mix-blend-mode: screen; }
.leaderboard-reference-meta { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1.22fr 1fr .7fr; border-top: 1px solid rgba(177, 143, 255, .26); background: rgba(4, 7, 25, .72); backdrop-filter: blur(10px); }
.leaderboard-reference-meta > div { min-width: 0; padding: 11px 10px; border-right: 1px solid rgba(171, 148, 232, .16); }
.leaderboard-reference-meta > div:last-child { border-right: 0; }
.leaderboard-reference-meta span,
.leaderboard-reference-meta strong { display: block; }
.leaderboard-reference-meta span { color: #9ca9ca; font-size: 8px; line-height: 1.15; }
.leaderboard-reference-meta strong { margin-top: 5px; overflow: hidden; color: #eceaff; font-size: 9px; font-weight: 670; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-reference-meta > div:last-child strong { color: #b98dff; font-size: 13px; }
.leaderboard-reference-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.leaderboard-reference-metrics article { min-height: 128px; padding: 15px 13px; border: 1px solid rgba(139, 113, 230, .36); border-radius: 19px; background: linear-gradient(145deg, rgba(11, 22, 49, .97), rgba(5, 13, 30, .98)); box-shadow: inset 0 1px 0 rgba(239, 233, 255, .045); }
.leaderboard-reference-metrics article.points { border-color: rgba(60, 184, 255, .54); background: radial-gradient(circle 9rem at 15% 0, rgba(32, 151, 255, .18), transparent 65%), linear-gradient(145deg, rgba(7, 29, 58, .98), rgba(5, 13, 31, .98)); }
.leaderboard-reference-metrics article.position { border-color: rgba(186, 104, 255, .55); background: radial-gradient(circle 9rem at 83% 0, rgba(163, 67, 255, .18), transparent 64%), linear-gradient(145deg, rgba(27, 12, 53, .98), rgba(7, 12, 30, .98)); }
.leaderboard-reference-metrics span,
.leaderboard-reference-metrics small { display: block; color: #aebbd9; font-size: 10px; line-height: 1.25; }
.leaderboard-reference-metrics strong { display: block; margin-top: 13px; color: #71d2ff; font-size: clamp(30px, 9.4vw, 42px); font-weight: 600; line-height: .88; letter-spacing: -.08em; }
.leaderboard-reference-metrics .position strong { color: #d39aff; }
.leaderboard-reference-metrics small { margin-top: 10px; color: #8294ba; font-size: 9px; }
.leaderboard-ways { display: grid; gap: 10px; }
.leaderboard-ways h3,
.partners-how-it-works h3,
.partners-section-heading h3 { margin: 0 2px; color: #f4f3ff; font-size: clamp(22px, 6.7vw, 30px); font-weight: 650; line-height: 1; letter-spacing: -.06em; }
.leaderboard-ways > div { overflow: hidden; border: 1px solid rgba(110, 128, 193, .29); border-radius: 19px; background: linear-gradient(145deg, rgba(10, 20, 43, .96), rgba(5, 12, 28, .98)); }
.leaderboard-ways button { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 70px; border: 0; border-top: 1px solid rgba(112, 132, 193, .19); padding: 11px 13px; color: #eef1ff; background: transparent; text-align: left; }
.leaderboard-ways button:first-child { border-top: 0; }
.leaderboard-way-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(161, 112, 255, .55); border-radius: 12px; color: #c28aff; background: rgba(103, 55, 231, .14); }
.leaderboard-way-icon.energy { border-color: rgba(72, 179, 255, .58); color: #65c6ff; background: rgba(20, 106, 206, .13); }
.leaderboard-way-icon.partners { border-color: rgba(82, 208, 255, .52); color: #69d2ff; background: rgba(16, 123, 181, .13); }
.leaderboard-way-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.leaderboard-ways button strong,
.leaderboard-ways button small { display: block; }
.leaderboard-ways button strong { color: #eff2ff; font-size: 13px; font-weight: 700; }
.leaderboard-ways button small { margin-top: 4px; color: #8998bc; font-size: 9px; line-height: 1.25; }
.leaderboard-ways button > i { color: #a993e7; font-size: 20px; font-style: normal; }
.leaderboard-reference-note { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border: 1px solid rgba(151, 124, 224, .3); border-radius: 16px; color: #9eacd0; background: rgba(11, 17, 40, .78); }
.leaderboard-reference-note i { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(169, 133, 255, .58); border-radius: 50%; color: #c7adff; font-size: 11px; font-style: normal; font-weight: 800; }
.leaderboard-reference-note p { margin: 0; font-size: 10px; line-height: 1.4; }

.partners-reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.partners-reference-heading > div { min-width: 0; }
.partners-program-state { flex: 0 0 auto; margin-top: 8px; border: 1px solid rgba(178, 126, 255, .4); border-radius: 99px; padding: 7px 9px; color: #c5a6ff; background: rgba(96, 49, 198, .12); font-size: 9px; font-weight: 750; line-height: 1; white-space: nowrap; }
.partners-program-state.active { border-color: rgba(67, 206, 255, .48); color: #82dcff; background: rgba(19, 119, 181, .13); }
.partners-reference-hero { position: relative; min-height: 201px; overflow: hidden; border: 1px solid rgba(63, 181, 255, .64); border-radius: 23px; padding: 20px 18px; background: radial-gradient(circle 12rem at 100% 10%, rgba(66, 111, 255, .3), transparent 63%), radial-gradient(circle 9rem at 15% 0, rgba(163, 47, 255, .16), transparent 58%), linear-gradient(145deg, #071a3b, #08102c 66%, #12072e); box-shadow: inset 0 1px 0 rgba(214, 245, 255, .06), 0 17px 35px rgba(3, 22, 58, .24); }
.partners-reference-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(90, 180, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(165, 111, 255, .07) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.partners-reference-copy { position: relative; z-index: 2; width: min(60%, 230px); }
.partners-reference-copy > span { display: block; color: #90d8ff; font-size: 11px; font-weight: 720; }
.partners-reference-copy strong { display: flex; align-items: baseline; gap: 7px; margin-top: 11px; color: #f9fbff; font-size: clamp(42px, 12.2vw, 58px); font-weight: 620; line-height: .85; letter-spacing: -.09em; }
.partners-reference-copy strong em { color: #c491ff; font-size: .47em; font-style: normal; letter-spacing: -.06em; }
.partners-reference-copy p { margin: 13px 0 0; color: #b3c4df; font-size: 11px; line-height: 1.4; }
.partners-reference-hero > img { position: absolute; z-index: 1; right: -22px; bottom: -17px; width: min(62%, 265px); height: 210px; object-fit: cover; object-position: 73% 50%; filter: saturate(1.15) drop-shadow(-14px 14px 21px rgba(0, 0, 0, .56)); mix-blend-mode: screen; }
.partners-earnings-grid { display: grid; grid-template-columns: 1.28fr .72fr; gap: 10px; }
.partners-earnings-grid article { min-height: 124px; overflow: hidden; border: 1px solid rgba(102, 127, 209, .34); border-radius: 19px; padding: 14px 12px; background: linear-gradient(145deg, rgba(11, 23, 47, .98), rgba(6, 14, 30, .98)); }
.partners-earnings-grid .partners-earned-card { border-color: rgba(190, 106, 255, .55); background: radial-gradient(circle 10rem at 10% 0, rgba(128, 58, 255, .16), transparent 63%), linear-gradient(145deg, rgba(24, 12, 52, .98), rgba(6, 13, 30, .98)); }
.partners-earnings-grid span,
.partners-earnings-grid small { display: block; color: #aebbd9; font-size: 10px; line-height: 1.2; }
.partners-earnings-grid strong { display: block; margin-top: 11px; color: #a5dfff; font-size: clamp(27px, 8vw, 37px); font-weight: 600; line-height: .9; letter-spacing: -.075em; white-space: nowrap; }
.partners-earnings-grid .partners-earned-card strong { color: #d3a5ff; }
.partners-earnings-grid small { margin-top: 9px; color: #8292b7; font-size: 8px; }
.partners-mini-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(105, 124, 192, .27); border-radius: 17px; background: rgba(8, 17, 35, .86); }
.partners-mini-metrics article { min-width: 0; padding: 12px; border-right: 1px solid rgba(115, 136, 197, .2); }
.partners-mini-metrics article:last-child { border-right: 0; }
.partners-mini-metrics span { display: block; color: #98a9cc; font-size: 10px; line-height: 1.2; }
.partners-mini-metrics strong { display: block; margin-top: 7px; color: #f1f4ff; font-size: 22px; font-weight: 620; line-height: 1; letter-spacing: -.06em; }
.partners-link-card { display: grid; gap: 12px; border: 1px solid rgba(174, 103, 255, .56); border-radius: 21px; padding: 16px; background: radial-gradient(circle 13rem at 100% 0, rgba(100, 57, 239, .18), transparent 61%), linear-gradient(145deg, rgba(18, 11, 47, .97), rgba(6, 13, 30, .98)); }
.partners-link-card > div:first-child > span { display: block; color: #aeb9d8; font-size: 11px; }
.partners-link-card > div:first-child > strong { display: block; margin-top: 5px; color: #f3efff; font-size: 16px; letter-spacing: .04em; }
.partners-link-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.partners-link-control .text-input { min-width: 0; height: 43px; border-color: rgba(125, 140, 205, .4); padding: 0 11px; color: #afbbdc; font-size: 10px; background: rgba(3, 8, 23, .7); }
.partners-link-control .primary-button { min-height: 43px; padding: 0 11px; font-size: 11px; }
.partners-how-it-works { display: grid; gap: 11px; }
.partners-how-it-works .partner-steps { gap: 9px; }
.partners-how-it-works .partner-steps article { min-height: 121px; border-color: rgba(101, 122, 194, .29); background: linear-gradient(145deg, rgba(10, 22, 44, .94), rgba(5, 13, 29, .98)); }
.partners-how-it-works .partner-steps b { border-color: rgba(73, 193, 255, .65); color: #86d7ff; background: rgba(25, 127, 211, .14); }
.partners-accruals { overflow: hidden; border: 1px solid rgba(105, 124, 192, .29); border-radius: 19px; background: linear-gradient(145deg, rgba(9, 19, 40, .95), rgba(5, 12, 28, .98)); }
.partners-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 15px 14px 11px; }
.partners-section-heading h3 { margin: 0; font-size: 18px; }
.partners-section-heading > span { color: #a892e5; font-size: 9px; font-weight: 700; text-align: right; }
.partners-accruals-empty { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 72px; border-top: 1px solid rgba(113, 134, 197, .18); padding: 11px 14px; }
.partners-accruals-empty > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(180, 112, 255, .46); border-radius: 10px; color: #c690ff; background: rgba(111, 54, 228, .13); font-size: 15px; }
.partners-accruals-empty p { margin: 0; color: #98a7c9; font-size: 10px; line-height: 1.35; }
.partners-claim-card { display: grid; gap: 8px; border: 1px solid rgba(105, 127, 194, .3); border-radius: 17px; padding: 13px; background: rgba(8, 18, 37, .76); }
.partners-claim-card > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.partners-claim-card .text-input { min-width: 0; height: 41px; font-size: 11px; }
.partners-claim-card .secondary-button { min-height: 41px; padding: 0 11px; font-size: 11px; }

@media (max-width: 520px) {
  .statistics-ownership-card { grid-template-columns: 105px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 18px; }
  .statistics-ownership-pie { width: 105px; height: 105px; }
  .statistics-ownership-pie strong { font-size: 19px; }
  .statistics-ownership-copy h3 { font-size: 20px; }
  .leaderboard-reference-hero { min-height: 256px; border-radius: 20px; padding: 18px 15px 87px; }
  .leaderboard-reference-copy { width: 62%; }
  .leaderboard-reference-copy h3 { font-size: clamp(31px, 10vw, 42px); }
  .leaderboard-reference-copy p { margin-top: 10px; font-size: 10px; }
  .leaderboard-reference-hero > img { right: -35px; width: 64%; height: 176px; }
  .leaderboard-reference-meta > div { padding: 10px 8px; }
  .leaderboard-reference-meta strong { font-size: 8px; }
  .leaderboard-reference-metrics article { min-height: 115px; padding: 13px 11px; border-radius: 16px; }
  .leaderboard-reference-metrics strong { margin-top: 11px; font-size: clamp(27px, 8.8vw, 35px); }
  .leaderboard-ways button { min-height: 64px; padding: 10px 12px; }
  .partners-reference-hero { min-height: 185px; border-radius: 20px; padding: 17px 15px; }
  .partners-reference-copy p { margin-top: 10px; font-size: 10px; }
  .partners-reference-hero > img { right: -35px; width: 65%; height: 188px; }
  .partners-earnings-grid article { min-height: 113px; padding: 12px 10px; border-radius: 16px; }
  .partners-earnings-grid strong { font-size: clamp(24px, 7.6vw, 32px); }
  .partners-link-card { gap: 10px; border-radius: 18px; padding: 13px; }
  .partners-link-control .text-input { height: 40px; font-size: 9px; }
  .partners-link-control .primary-button { min-height: 40px; padding: 0 9px; font-size: 10px; }
  .partners-how-it-works .partner-steps article { min-height: 106px; padding: 11px 7px; }
}

@media (max-width: 370px) {
  .leaderboard-reference-heading h2,
  .partners-reference-heading h2 { font-size: 37px; }
  .leaderboard-reference-hero { min-height: 246px; }
  .leaderboard-reference-meta > div { padding-right: 6px; padding-left: 6px; }
  .leaderboard-reference-meta span { font-size: 7px; }
  .leaderboard-reference-meta strong { font-size: 7px; }
  .partners-reference-heading { gap: 8px; }
  .partners-program-state { padding: 6px 7px; font-size: 8px; }
  .partners-reference-copy strong { font-size: 39px; }
  .partners-earnings-grid { gap: 8px; }
  .partners-earnings-grid span { font-size: 9px; }
  .partners-earnings-grid strong { font-size: 23px; }
  .partners-link-control { gap: 6px; }
  .partners-link-control .primary-button { padding: 0 7px; font-size: 9px; }
}

/* Earnings, payout-network selection and Season 1 use the same compact mobile hierarchy. */
.reference-earnings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.reference-earnings-grid .reference-earnings-card { grid-template-columns: minmax(0, 1fr); }
.reference-earnings-grid .reference-earnings-card > div { display: grid; min-height: 82px; place-content: center; padding: 12px 11px; text-align: center; }
.reference-earnings-grid .reference-earnings-card span { font-size: 9px; }
.reference-earnings-grid .reference-earnings-card strong { margin-top: 7px; font-size: clamp(18px, 5.7vw, 25px); line-height: 1; }

.payout-spend-hero { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; border: 1px solid rgba(118, 190, 255, .66); border-radius: 999px; padding: 8px 11px; color: #b8e4ff; background: rgba(14, 73, 161, .34); font-size: 10px; font-weight: 720; }
.payout-spend-hero span { color: #e9f7ff; font-size: 15px; line-height: .5; }
.payout-saved-wallet,
.payout-wallet-empty { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid rgba(102, 142, 224, .4); border-radius: 16px; padding: 12px; background: rgba(4, 12, 31, .62); }
.payout-wallet-empty { border-color: rgba(174, 112, 255, .5); }
.payout-saved-wallet > div,
.payout-wallet-empty > div { min-width: 0; }
.payout-saved-wallet span:not(.payout-network-logo),
.payout-wallet-empty strong { display: block; color: #b7c3e1; font-size: 10px; }
.payout-saved-wallet strong { display: block; margin-top: 4px; overflow: hidden; color: #f4f4ff; font-size: 16px; font-weight: 650; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.payout-saved-wallet small { display: block; margin-top: 4px; color: #83bfee; font-size: 9px; }
.payout-wallet-empty p { margin: 4px 0 0; color: #9aa9cc; font-size: 9px; line-height: 1.3; }
.payout-saved-wallet .secondary-button,
.payout-wallet-empty .primary-button { min-height: 37px; padding: 0 10px; font-size: 10px; white-space: nowrap; }
.payout-network-logo { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(105, 186, 255, .62); border-radius: 13px; color: #78d2ff; background: linear-gradient(145deg, rgba(19, 101, 189, .31), rgba(10, 25, 69, .78)); }
.payout-network-logo.tron { border-color: rgba(255, 100, 118, .62); color: #ff7287; background: linear-gradient(145deg, rgba(174, 29, 65, .29), rgba(62, 10, 33, .77)); }
.payout-network-logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.payout-action-row { grid-template-columns: minmax(0, 1fr); }
.payout-wallet-modal .modal-header .eyebrow { margin: 0 0 5px; color: #bd9cff; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.payout-network-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.payout-network-choice { display: flex; align-items: center; gap: 9px; min-height: 66px; border: 1px solid rgba(107, 125, 187, .4); border-radius: 15px; padding: 9px; color: #dce4ff; background: rgba(7, 15, 35, .78); text-align: left; }
.payout-network-choice.selected { border-color: rgba(143, 105, 255, .86); background: linear-gradient(135deg, rgba(79, 45, 187, .35), rgba(10, 26, 59, .82)); box-shadow: inset 0 0 0 1px rgba(212, 185, 255, .11); }
.payout-network-choice .payout-network-logo { width: 34px; height: 34px; border-radius: 10px; }
.payout-network-choice .payout-network-logo svg { width: 19px; height: 19px; }
.payout-network-choice strong,
.payout-network-choice small { display: block; }
.payout-network-choice strong { color: #f2f4ff; font-size: 12px; }
.payout-network-choice small { margin-top: 3px; color: #9eafd3; font-size: 8px; }

.leaderboard-reference-hero > img { right: -6px; top: 8px; width: min(55%, 236px); height: 174px; object-fit: contain; object-position: 100% 50%; }
.leaderboard-reference-copy { width: min(63%, 245px); }
.leaderboard-details-button { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; border: 1px solid rgba(193, 151, 255, .55); border-radius: 999px; padding: 7px 10px; color: #e6d7ff; background: rgba(94, 51, 195, .19); font-size: 10px; font-weight: 720; }
.leaderboard-reference-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leaderboard-reference-metrics.single { grid-template-columns: minmax(0, 1fr); }
.leaderboard-reference-metrics.single article.points { display: grid; min-height: 139px; place-content: center; text-align: center; }
.leaderboard-reference-metrics.single article.points strong { margin-top: 11px; font-size: clamp(39px, 12vw, 53px); }
.leaderboard-reference-metrics.single article.points small { margin-top: 9px; }
.leaderboard-ways article { display: grid; grid-template-columns: 39px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 70px; border-top: 1px solid rgba(112, 132, 193, .19); padding: 11px 13px; }
.leaderboard-way-icon.duration { border-color: rgba(104, 205, 255, .52); color: #76d4ff; background: rgba(13, 108, 181, .13); font-size: 21px; }
.leaderboard-ways article strong,
.leaderboard-ways article small { display: block; }
.leaderboard-ways article strong { color: #eff2ff; font-size: 13px; font-weight: 700; }
.leaderboard-ways article small { margin-top: 4px; color: #8998bc; font-size: 9px; line-height: 1.25; }
.gpum-season-lead { margin: 0 0 14px; color: #bec9e7; font-size: 12px; line-height: 1.45; }
.gpum-season-benefits { display: grid; gap: 9px; }
.gpum-season-benefits article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid rgba(134, 112, 211, .35); border-radius: 14px; padding: 11px; background: rgba(11, 19, 45, .76); }
.gpum-season-benefits article > span { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid rgba(185, 143, 255, .68); border-radius: 10px; color: #cba0ff; background: rgba(110, 55, 233, .15); font-size: 17px; font-weight: 760; }
.gpum-season-benefits strong { display: block; color: #f0efff; font-size: 12px; }
.gpum-season-benefits p { margin: 3px 0 0; color: #9fabca; font-size: 9px; line-height: 1.35; }

.partners-reference-hero > img { right: 0; bottom: 2px; width: min(53%, 230px); height: 190px; object-fit: contain; object-position: 100% 100%; }
.partners-link-card > div:first-child > strong { display: none; }

@media (max-width: 520px) {
  .reference-earnings-grid { gap: 8px; }
  .reference-earnings-grid .reference-earnings-card > div { min-height: 70px; padding: 10px 8px; }
  .reference-earnings-grid .reference-earnings-card strong { font-size: clamp(16px, 5.2vw, 22px); }
  .payout-spend-hero { margin-top: 12px; padding: 7px 9px; font-size: 9px; }
  .payout-saved-wallet,
  .payout-wallet-empty { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .payout-network-logo { width: 35px; height: 35px; border-radius: 11px; }
  .payout-network-logo svg { width: 19px; height: 19px; }
  .payout-saved-wallet strong { font-size: 13px; }
  .payout-wallet-empty strong { font-size: 10px; }
  .payout-wallet-empty p { font-size: 8px; }
  .payout-saved-wallet .secondary-button,
  .payout-wallet-empty .primary-button { min-height: 33px; padding: 0 8px; font-size: 9px; }
  .leaderboard-reference-hero > img { right: -1px; top: 12px; width: 53%; height: 160px; }
  .leaderboard-details-button { margin-top: 10px; padding: 6px 9px; font-size: 9px; }
  .leaderboard-reference-metrics.single article.points { min-height: 121px; }
  .leaderboard-reference-metrics.single article.points strong { font-size: clamp(34px, 11vw, 46px); }
  .leaderboard-ways article { min-height: 64px; padding: 10px 12px; }
  .partners-reference-hero > img { right: -2px; bottom: 3px; width: 53%; height: 172px; }
}

/* Final production pass: startup, package transitions and the buy-energy reference. */
.startup-splash { display: grid; min-height: calc(100vh - 150px); place-content: center; justify-items: center; gap: 9px; padding: 28px; color: #a9b7dd; text-align: center; }
.startup-logo-wrap { position: relative; display: grid; width: 102px; height: 102px; place-items: center; margin-bottom: 8px; border-radius: 29px; background: radial-gradient(circle at 50% 42%, rgba(86, 136, 255, .2), transparent 66%); filter: drop-shadow(0 0 20px rgba(110, 79, 255, .46)); }
.startup-logo-wrap::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(123, 167, 255, .47); border-radius: 24px; box-shadow: 0 0 19px rgba(121, 65, 255, .38), inset 0 0 17px rgba(78, 132, 255, .12); animation: startup-logo-pulse 1.7s ease-in-out infinite; }
.startup-logo-wrap img { position: relative; z-index: 1; display: block; width: 79px; height: 79px; object-fit: contain; animation: startup-logo-breathe 1.7s ease-in-out infinite; }
.startup-splash > strong { color: #f7f7ff; font-size: clamp(25px, 8vw, 37px); font-weight: 630; line-height: 1; letter-spacing: -.075em; }
.startup-splash > span { color: #98a8cc; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.startup-progress { width: min(176px, 72vw); height: 5px; overflow: hidden; border: 1px solid rgba(119, 140, 211, .25); border-radius: 999px; background: rgba(10, 22, 50, .9); box-shadow: inset 0 1px 4px rgba(0, 0, 0, .5); }
.startup-progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #27aaff, #6f4fff 54%, #d159ff); box-shadow: 0 0 12px rgba(103, 120, 255, .9); transition: width .18s ease-out; }
@keyframes startup-logo-pulse { 0%, 100% { opacity: .55; transform: scale(.93); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes startup-logo-breathe { 0%, 100% { transform: scale(.96); filter: brightness(.92); } 50% { transform: scale(1.04); filter: brightness(1.18); } }

.statistics-position-details dd .share-percent { color: #fff; text-shadow: 0 0 9px rgba(255, 255, 255, .16); }
.buy-share-transition,
.rate-share-transition { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 5px; max-width: 100%; color: #e9ebff; white-space: nowrap; }
.buy-share-transition > span,
.rate-share-transition > span { display: inline-flex; align-items: baseline; gap: 3px; }
.buy-share-transition > i,
.rate-share-transition > i { color: #99a7cf; font-size: .9em; font-style: normal; }
.buy-share-transition .share-transition-before { color: #9ca9cb; }
.buy-share-transition .share-transition-before em { color: #b4bfdc; }
.buy-share-transition .share-transition-after { color: #f7f4ff; }
.buy-share-transition .share-transition-after em { color: #d3a7ff; }
.buy-share-transition em,
.rate-share-transition em { display: inline-block; margin-left: 0; color: #d3a7ff; font-size: .78em; font-style: normal; font-weight: 700; }
.rate-share-transition { justify-content: flex-start; margin-top: 2px; color: #f4f4ff; font-size: 14px; }
.rate-share-transition > span:first-child:not(:last-child) { color: #aab7d8; }
.rate-share-transition > span:first-child:not(:last-child) em { color: #c1cae4; }
.rate-modal-header { padding-bottom: 16px; }
.rate-modal-header h2 { font-size: clamp(34px, 9.5vw, 45px); }
.rate-modal-header p { max-width: 300px; margin: 12px 0 0; color: #aeb9d9; font-size: 12px; font-weight: 500; line-height: 1.44; }
.rate-package-summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 12px; margin-top: 0; padding: 13px; }
.rate-package-summary > span { grid-column: 1 / -1; }
.rate-package-summary > strong { min-width: 0; }
.rate-package-summary > b { justify-self: end; }
.rate-tier-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rate-tier-heading .rate-tier-badge { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 19px; border: 1px solid rgba(154, 144, 204, .48); border-radius: 999px; padding: 3px 6px; color: #d5d8ef; background: rgba(119, 127, 181, .13); font-size: 8px; font-weight: 760; letter-spacing: .02em; line-height: 1; text-shadow: none; }
.rate-tier-heading .rate-tier-badge.up-to-25 { border-color: rgba(117, 180, 255, .55); color: #8ed5ff; background: rgba(31, 128, 226, .13); }
.rate-tier-heading .rate-tier-badge.up-to-50 { border-color: rgba(201, 135, 88, .6); color: #ffc18f; background: rgba(148, 81, 38, .17); }
.rate-tier-heading .rate-tier-badge.up-to-75 { border-color: rgba(193, 204, 231, .56); color: #edf2ff; background: rgba(136, 153, 192, .16); }
.rate-tier-heading .rate-tier-badge.from-75 { border-color: rgba(255, 202, 103, .66); color: #ffe0a2; background: rgba(185, 128, 25, .16); }
.rate-tier.active .rate-tier-heading .rate-tier-badge { box-shadow: 0 0 10px rgba(177, 118, 255, .28); }

.energy-purchase-reference-screen { gap: 17px; }
.energy-purchase-reference-heading { margin: 7px 2px 1px; }
.energy-purchase-reference-heading h2 { margin: 0; color: #fbfbff; font-size: clamp(36px, 10.2vw, 51px); font-weight: 680; line-height: .93; letter-spacing: -.075em; }
.energy-purchase-reference-heading p { margin: 12px 0 0; color: #aab6d8; font-size: 14px; line-height: 1.35; }
.energy-purchase-reference-balance { position: relative; min-height: 202px; overflow: hidden; border: 1px solid rgba(184, 82, 255, .86); border-radius: 23px; padding: 25px 22px; background: radial-gradient(circle 13rem at 87% 33%, rgba(64, 71, 255, .25), transparent 62%), linear-gradient(145deg, rgba(5, 12, 34, .99), rgba(3, 9, 26, .99)); box-shadow: inset 0 1px 0 rgba(242, 222, 255, .08), 0 16px 36px rgba(9, 0, 47, .28); }
.energy-purchase-reference-balance::before { content: ""; position: absolute; right: -10%; bottom: -28%; width: 58%; height: 76%; opacity: .6; background-image: radial-gradient(rgba(74, 145, 255, .55) 1px, transparent 1px); background-size: 10px 10px; mask-image: linear-gradient(135deg, transparent, #000 42%, transparent 88%); transform: perspective(120px) rotateX(59deg) rotateZ(-14deg); }
.energy-purchase-reference-balance > div:first-child { position: relative; z-index: 2; }
.energy-purchase-reference-balance span { display: block; color: #b9c4e2; font-size: 15px; }
.energy-purchase-reference-balance strong { display: block; margin-top: 17px; color: #fff; font-size: clamp(46px, 13.5vw, 66px); font-weight: 570; line-height: .83; letter-spacing: -.09em; white-space: nowrap; }
.energy-purchase-reference-balance strong em { margin-left: 4px; color: #f1efff; font-size: .63em; font-style: normal; font-weight: 550; letter-spacing: -.06em; }
.energy-purchase-reference-balance p { margin: 24px 0 0; color: #adb9d6; font-size: 17px; }
.energy-purchase-reference-balance p b { color: #31aeff; font-weight: 620; }
.energy-reference-bolt { position: absolute; z-index: 1; right: 19px; bottom: 23px; color: #d8e8ff; font-size: clamp(95px, 29vw, 142px); font-weight: 250; line-height: .72; text-shadow: 0 0 5px #fff, 0 0 17px rgba(78, 118, 255, .92), 0 0 35px rgba(143, 63, 255, .77); transform: rotate(-8deg); }
.energy-checkout-hero-art { position: absolute; z-index: 1; right: -5px; bottom: -7px; display: block; width: min(55%, 240px); height: 100%; object-fit: contain; object-position: 100% 100%; mix-blend-mode: screen; filter: saturate(1.05) drop-shadow(0 13px 20px rgba(0, 0, 0, .52)); pointer-events: none; }
.energy-package-stage { overflow: hidden; border: 1px solid rgba(176, 83, 255, .64); border-radius: 21px; padding: 12px; background: radial-gradient(circle 15rem at 50% 0, rgba(49, 92, 255, .17), transparent 66%), linear-gradient(145deg, rgba(7, 13, 35, .98), rgba(3, 9, 25, .99)); }
.energy-package-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
.energy-package-stage-card { display: grid; min-width: 0; min-height: 125px; place-items: center; align-content: center; gap: 7px; overflow: hidden; border: 1px solid rgba(114, 137, 216, .42); border-radius: 15px; padding: 10px 6px; color: #e9eeff; background: rgba(4, 10, 27, .72); text-align: center; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.energy-package-stage-card:active { transform: scale(.975); }
.energy-package-stage-card.selected { border-color: rgba(83, 174, 255, .95); background: radial-gradient(circle 7rem at 50% 29%, rgba(51, 112, 255, .31), transparent 68%), linear-gradient(145deg, rgba(19, 29, 85, .97), rgba(19, 8, 59, .98)); box-shadow: inset 0 0 0 1px rgba(140, 99, 255, .58), 0 0 16px rgba(55, 118, 255, .28); }
.energy-package-stage-icon { display: grid; width: 30px; height: 30px; place-items: center; color: #73d8ff; }
.energy-package-stage-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(85, 205, 255, .52)); }
.energy-package-stage-card > span:nth-child(2) { display: grid; gap: 2px; }
.energy-package-stage-card strong { color: #f7f8ff; font-size: clamp(21px, 6.8vw, 30px); font-weight: 670; line-height: .9; letter-spacing: -.075em; }
.energy-package-stage-card em { color: #bfc9e4; font-size: 10px; font-style: normal; font-weight: 620; }
.energy-package-stage-card b { color: #a5b8e7; font-size: 12px; font-weight: 650; letter-spacing: -.035em; }
.energy-package-stage-card.selected b { color: #c9e5ff; }
.energy-package-summary .buy-summary-row:nth-child(2) strong,
.energy-package-summary .buy-summary-row:nth-child(3) strong,
.energy-package-summary .buy-summary-row:nth-child(4) strong { color: #89d7ff; }
.energy-package-summary .buy-total-row strong { color: #d6b5ff; }
.energy-payment-card { padding-bottom: 15px; }
.checkout-terms-notice { margin: -2px 10px 0; color: #aeb8d6; font-size: 10px; line-height: 1.45; text-align: center; }
.checkout-terms-notice a { color: var(--accent-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.energy-reference-package-card { border: 1px solid rgba(176, 83, 255, .7); border-radius: 22px; padding: 20px 17px 17px; background: radial-gradient(circle 14rem at 100% 0, rgba(67, 58, 241, .12), transparent 64%), linear-gradient(145deg, rgba(7, 13, 35, .98), rgba(3, 9, 25, .99)); box-shadow: inset 0 1px 0 rgba(235, 218, 255, .05); }
.energy-reference-package-card h3 { margin: 0 0 16px; color: #f2f2ff; font-size: clamp(22px, 6.4vw, 29px); font-weight: 600; letter-spacing: -.055em; }
.energy-reference-package-card > div { display: grid; gap: 9px; }
.energy-reference-package { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 66px; border: 1px solid rgba(91, 123, 204, .48); border-radius: 15px; padding: 11px 14px; color: #eef2ff; background: rgba(4, 10, 27, .76); text-align: left; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.energy-reference-package.selected { border-color: rgba(180, 81, 255, .94); background: radial-gradient(circle 9rem at 6% 50%, rgba(39, 122, 255, .25), transparent 59%), linear-gradient(105deg, rgba(14, 41, 106, .88), rgba(30, 10, 74, .86)); box-shadow: inset 0 0 0 1px rgba(101, 164, 255, .8), 0 0 16px rgba(93, 63, 255, .34); }
.energy-radio { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid rgba(128, 138, 211, .73); border-radius: 50%; }
.energy-reference-package.selected .energy-radio { border-color: #8a69ff; box-shadow: 0 0 11px rgba(134, 86, 255, .7); }
.energy-reference-package.selected .energy-radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #f7f5ff; box-shadow: 0 0 0 4px #7444f1, 0 0 11px rgba(129, 89, 255, .85); }
.energy-reference-package strong { color: #f6f6ff; font-size: 19px; font-weight: 590; letter-spacing: -.04em; }
.energy-reference-package b { color: #b6c0e0; font-size: 17px; font-weight: 530; letter-spacing: -.05em; }
.energy-reference-package.selected b { color: #f4f0ff; }
.energy-reference-summary { overflow: hidden; border: 1px solid rgba(176, 83, 255, .7); border-radius: 21px; padding: 8px 17px; background: linear-gradient(145deg, rgba(8, 15, 39, .98), rgba(4, 10, 26, .99)); }
.energy-reference-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 47px; border-bottom: 1px dashed rgba(79, 125, 208, .47); }
.energy-reference-summary > div:last-child { border-bottom: 0; }
.energy-reference-summary span { color: #c0c8df; font-size: 14px; }
.energy-reference-summary strong { overflow: hidden; color: #c8d2f1; font-size: 17px; font-weight: 560; letter-spacing: -.045em; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.energy-reference-summary > div:nth-child(3) strong,
.energy-reference-summary > div:nth-child(4) strong,
.energy-reference-summary > div:nth-child(5) strong { color: #28aaff; }
.energy-purchase-reference-screen .energy-purchase-action { min-height: 65px; border: 1px solid rgba(195, 137, 255, .9); border-radius: 18px; background: linear-gradient(105deg, #2529ff, #6322e8 55%, #9e2cfa); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 13px 28px rgba(87, 26, 235, .4); font-size: clamp(20px, 6vw, 25px); font-weight: 650; }
.energy-purchase-reference-screen .energy-purchase-action:disabled { border-color: rgba(155, 129, 205, .36); color: #c3bbdc; background: linear-gradient(105deg, rgba(57, 55, 119, .68), rgba(67, 35, 128, .65)); box-shadow: none; opacity: .78; }
.energy-reference-note { margin: 0 4px; color: #94a4c8; font-size: 11px; line-height: 1.4; text-align: center; }

.payout-art-wrap { overflow: visible; }
.payout-ton-logo { position: absolute; z-index: 2; top: 16px; right: 27px; display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(188, 228, 255, .68); border-radius: 50%; background: rgba(3, 32, 70, .46); box-shadow: 0 0 17px rgba(39, 161, 255, .72); }
.payout-ton-logo svg { display: block; width: 30px; height: 30px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }

.leaderboard-reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.leaderboard-reference-heading > div { min-width: 0; }
.leaderboard-reference-heading > div > p { margin: 10px 0 0; color: #acb7d8; font-size: 13px; line-height: 1.38; }
.leaderboard-season-badge { flex: 0 0 auto; margin-top: 6px; border: 1px solid rgba(190, 131, 255, .63); border-radius: 999px; padding: 7px 10px; color: #eadbff; background: rgba(119, 54, 218, .2); box-shadow: inset 0 1px 0 rgba(255, 235, 255, .12); font-size: 9px; font-weight: 760; line-height: 1; white-space: nowrap; }

.partners-reference-hero > img { right: auto; left: 39%; bottom: 0; width: min(60%, 260px); height: 195px; object-position: 100% 100%; mix-blend-mode: screen; filter: saturate(1.1) drop-shadow(-10px 13px 18px rgba(0, 0, 0, .45)); }
.partners-reference-hero.partners-reference-art-only { min-height: 154px; padding: 0; }
.partners-reference-hero.partners-reference-art-only::before { mask-image: none; opacity: .38; }
.partners-reference-hero.partners-reference-art-only > img { bottom: -3px; left: 50%; width: min(76%, 310px); height: 162px; object-position: 50% 100%; transform: translateX(-58%); }

@media (max-width: 520px) {
  .startup-splash { min-height: calc(100vh - 126px); }
  .startup-logo-wrap { width: 88px; height: 88px; border-radius: 25px; }
  .startup-logo-wrap::before { border-radius: 20px; }
  .startup-logo-wrap img { width: 69px; height: 69px; }
  .buy-share-transition { gap: 3px; font-size: 12px; }
  .energy-purchase-reference-screen { gap: 14px; }
  .energy-purchase-reference-heading { margin-top: 4px; }
  .energy-purchase-reference-heading p { margin-top: 9px; font-size: 12px; }
  .energy-purchase-reference-balance { min-height: 181px; border-radius: 20px; padding: 20px 17px; }
  .energy-purchase-reference-balance span { font-size: 13px; }
  .energy-purchase-reference-balance strong { margin-top: 14px; font-size: clamp(40px, 13vw, 56px); }
  .energy-purchase-reference-balance p { margin-top: 19px; font-size: 15px; }
  .energy-reference-bolt { right: 13px; bottom: 20px; font-size: clamp(82px, 28vw, 120px); }
  .energy-checkout-hero-art { right: -8px; bottom: -6px; width: min(56%, 216px); }
  .energy-package-stage { border-radius: 18px; padding: 9px; }
  .energy-package-stage-grid { gap: 6px; }
  .energy-package-stage-card { min-height: 105px; border-radius: 12px; padding: 8px 4px; }
  .energy-package-stage-icon { width: 25px; height: 25px; }
  .energy-package-stage-icon svg { width: 24px; height: 24px; }
  .energy-package-stage-card strong { font-size: clamp(19px, 6.2vw, 25px); }
  .energy-package-stage-card em { font-size: 8px; }
  .energy-package-stage-card b { font-size: 10px; }
  .energy-reference-package-card { border-radius: 19px; padding: 16px 13px 13px; }
  .energy-reference-package-card h3 { margin-bottom: 12px; font-size: 21px; }
  .energy-reference-package { min-height: 58px; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 9px; border-radius: 13px; padding: 9px 11px; }
  .energy-radio { width: 22px; height: 22px; }
  .energy-reference-package.selected .energy-radio::after { width: 10px; height: 10px; box-shadow: 0 0 0 3px #7444f1, 0 0 9px rgba(129, 89, 255, .85); }
  .energy-reference-package strong { font-size: 17px; }
  .energy-reference-package b { font-size: 15px; }
  .energy-reference-summary { border-radius: 18px; padding: 6px 13px; }
  .energy-reference-summary > div { min-height: 42px; }
  .energy-reference-summary span { font-size: 12px; }
  .energy-reference-summary strong { font-size: 14px; }
  .energy-purchase-reference-screen .energy-purchase-action { min-height: 57px; border-radius: 16px; font-size: 19px; }
  .payout-ton-logo { top: 13px; right: 21px; width: 32px; height: 32px; }
  .payout-ton-logo svg { width: 26px; height: 26px; }
  .leaderboard-reference-heading > div > p { font-size: 11px; }
  .leaderboard-season-badge { margin-top: 4px; padding: 6px 8px; font-size: 8px; }
  .partners-reference-hero > img { left: 36%; bottom: 2px; width: 62%; height: 174px; }
  .partners-reference-hero.partners-reference-art-only { min-height: 134px; }
  .partners-reference-hero.partners-reference-art-only > img { bottom: -2px; left: 50%; width: 78%; height: 143px; transform: translateX(-58%); }
}

@media (max-width: 370px) {
  .buy-share-transition { font-size: 10px; letter-spacing: -.03em; }
  .rate-package-summary { grid-template-columns: minmax(0, 1fr); }
  .rate-package-summary > b { justify-self: start; }
  .rate-tier { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .rate-tier strong { font-size: 12px; }
  .rate-tier b { font-size: 17px; }
  .rate-tier-heading { gap: 4px; }
  .rate-tier-heading .rate-tier-badge { padding: 3px 5px; font-size: 7px; }
  .partners-reference-hero > img { left: 34%; }
  .partners-reference-hero.partners-reference-art-only > img { width: 84%; }
}

/* Energy-gated portfolio states, welcome gift and the $GPUM reference screen. */
.reference-share-state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reference-share-state-grid .reference-earnings-card > div { min-height: 88px; padding: 12px 10px; }
.reference-share-state-grid .reference-earnings-card span { min-height: 22px; font-size: 9px; line-height: 1.16; }
.reference-share-state-grid .reference-earnings-card strong { margin-top: 3px; font-size: clamp(17px, 5vw, 23px); letter-spacing: -.055em; }
.reference-status-card strong.is-active { color: #56d6a3; }
.reference-status-card strong.is-stopped { color: #f5aa7f; }
.reference-status-card small { display: block; margin-top: 7px; color: #99a8ca; font-size: 8px; line-height: 1.25; }
.reference-status-action { display: inline-flex; align-items: center; justify-content: center; min-height: 23px; margin-top: 7px; border: 1px solid rgba(116, 160, 255, .55); border-radius: 8px; padding: 3px 6px; color: #d9e8ff; background: rgba(47, 102, 214, .16); font: inherit; font-size: 8px; font-weight: 700; line-height: 1; white-space: nowrap; }
.reference-status-action:active { transform: scale(.98); }
.annual-rate-stack { display: inline-grid; justify-items: end; gap: 3px; line-height: 1.03; white-space: nowrap; }
.annual-rate-stack s { color: #8795bb; font-size: .7em; font-weight: 600; text-decoration-thickness: 1px; }
.annual-rate-stack > span { color: #f4efff; }
.rate-tier > b .annual-rate-stack { min-width: 54px; }
.rate-package-summary > b .annual-rate-stack { min-width: 64px; }
.buy-annual-return .annual-rate-stack { justify-items: end; }
.buy-annual-return-row { min-height: 58px; }

.modal.welcome-gift-modal { width: min(100%, 390px); overflow: hidden; border-color: rgba(182, 111, 255, .84); border-radius: 27px; padding: 0 20px 20px; background: radial-gradient(circle 15rem at 50% -10%, rgba(65, 133, 255, .36), transparent 62%), radial-gradient(circle 13rem at 50% 39%, rgba(139, 67, 255, .25), transparent 66%), linear-gradient(150deg, #101a47, #080f2a 58%, #050a1d); box-shadow: 0 25px 70px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(232, 227, 255, .15); }
.welcome-gift-art { display: grid; height: 184px; place-items: end center; margin: 0 -12px; background: radial-gradient(circle 8rem at 50% 69%, rgba(86, 71, 255, .38), transparent 69%); }
.welcome-gift-art svg { display: block; width: min(220px, 70vw); max-height: 181px; filter: drop-shadow(0 13px 16px rgba(5, 6, 35, .48)); }
.welcome-gift-copy { text-align: center; }
.welcome-gift-copy > span { color: #a6cfff; font-size: 9px; font-weight: 780; letter-spacing: .14em; }
.welcome-gift-copy h2 { margin: 7px 0 0; color: #fff; font-size: clamp(30px, 9vw, 40px); font-weight: 670; line-height: .98; letter-spacing: -.07em; }
.welcome-gift-copy p { margin: 9px 0 0; color: #cad5f1; font-size: 13px; line-height: 1.35; }
.welcome-gift-copy p b { color: #fff; font-weight: 720; }
.welcome-gift-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin-top: 18px; border: 1px solid rgba(137, 151, 255, .39); border-radius: 15px; background: rgba(116, 139, 231, .26); }
.welcome-gift-balance > div { min-height: 70px; padding: 12px; background: rgba(7, 15, 42, .72); }
.welcome-gift-balance span { display: block; color: #a5b5da; font-size: 9px; }
.welcome-gift-balance strong { display: block; margin-top: 7px; color: #fff; font-size: 18px; font-weight: 640; letter-spacing: -.055em; }
.welcome-gift-balance strong em { color: #c8d6ff; font-size: .65em; font-style: normal; }
.welcome-gift-balance strong.received { color: #58d8ac; font-size: 14px; letter-spacing: -.02em; }
.welcome-gift-note { margin: 13px 3px 16px; color: #9dadce; font-size: 10px; line-height: 1.4; text-align: center; }
.welcome-gift-action { min-height: 54px; border-color: rgba(210, 160, 255, .78); border-radius: 15px; background: linear-gradient(104deg, #2d5aff, #7a35ed 58%, #b03efa); box-shadow: 0 11px 25px rgba(81, 45, 232, .38); font-size: 17px; }

.modal.gpum-token-modal { width: min(100%, 400px); overflow: hidden; border-color: rgba(160, 107, 255, .82); border-radius: 27px; padding: 16px 18px 19px; background: radial-gradient(circle 15rem at 50% 16%, rgba(67, 107, 255, .36), transparent 62%), radial-gradient(circle 16rem at 50% 51%, rgba(119, 42, 240, .26), transparent 70%), linear-gradient(160deg, #101944, #070c25 64%, #050817); }
.gpum-token-header { display: flex; align-items: center; justify-content: space-between; }
.gpum-token-wordmark { color: #f4f2ff; font-size: 14px; font-weight: 800; letter-spacing: .09em; }
.gpum-token-header .close-button { background: rgba(20, 31, 72, .72); }
.gpum-token-hero { display: grid; justify-items: center; margin-top: 5px; }
.gpum-token-coin { position: relative; display: grid; width: 128px; height: 128px; place-items: center; overflow: hidden; border: 2px solid rgba(204, 181, 255, .78); border-radius: 50%; background: radial-gradient(circle at 31% 24%, #e0d1ff 0 3%, #8660ff 20%, #4527ca 56%, #121a55 100%); box-shadow: 0 0 0 10px rgba(129, 71, 255, .1), 0 0 37px rgba(120, 83, 255, .61), inset 0 0 24px rgba(241, 231, 255, .33); }
.gpum-token-coin::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(231, 220, 255, .5); border-radius: inherit; }
.gpum-token-coin > span { position: relative; z-index: 1; color: #fff; font-size: 72px; font-weight: 760; line-height: 1; letter-spacing: -.1em; text-shadow: 0 4px 14px rgba(13, 10, 78, .62); transform: translateX(-3px); }
.gpum-token-coin > i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #bdefff; box-shadow: 0 0 10px #8cd6ff; }
.gpum-token-coin > i:nth-of-type(1) { top: 27px; right: 30px; }
.gpum-token-coin > i:nth-of-type(2) { right: 20px; bottom: 39px; }
.gpum-token-coin > i:nth-of-type(3) { bottom: 24px; left: 40px; }
.gpum-token-chain { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; border: 1px solid rgba(120, 192, 255, .43); border-radius: 999px; padding: 6px 9px; color: #cbe6ff; background: rgba(15, 71, 153, .2); font-size: 9px; font-weight: 720; }
.gpum-token-chain svg { width: 17px; height: 17px; }
.gpum-token-copy { margin-top: 18px; text-align: center; }
.gpum-token-copy p { margin: 0; color: #adc2f4; font-size: 10px; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }
.gpum-token-copy h2 { margin: 5px 0 0; color: #fff; font-size: clamp(41px, 12vw, 54px); font-weight: 720; letter-spacing: -.09em; line-height: .87; }
.gpum-token-copy strong { display: block; margin-top: 14px; color: #f0f2ff; font-size: 17px; line-height: 1.08; letter-spacing: -.045em; }
.gpum-token-copy > span { display: block; margin-top: 7px; color: #aebbdc; font-size: 10px; }
.gpum-token-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.gpum-token-benefits article { min-height: 112px; border: 1px solid rgba(133, 139, 235, .42); border-radius: 16px; padding: 12px 10px; background: rgba(12, 20, 56, .73); }
.gpum-token-benefits article > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(202, 167, 255, .58); border-radius: 9px; color: #f0e5ff; background: rgba(129, 68, 237, .26); font-size: 16px; font-weight: 760; }
.gpum-token-benefits strong { display: block; margin-top: 10px; color: #f2f3ff; font-size: 11px; }
.gpum-token-benefits p { margin: 5px 0 0; color: #9eadd0; font-size: 8px; line-height: 1.33; }
.gpum-token-note { margin: 14px 3px 15px; color: #9eacd0; font-size: 9px; line-height: 1.42; text-align: center; }
.gpum-token-action { min-height: 51px; border-radius: 15px; font-size: 16px; }
.payout-ton-logo { display: none; }
.payout-network-logo.gram { border-color: rgba(108, 191, 255, .7); background: linear-gradient(145deg, rgba(20, 82, 180, .4), rgba(48, 34, 121, .52)); box-shadow: 0 0 16px rgba(55, 148, 255, .2); }
.payout-network-logo.gram svg { width: 23px; height: 23px; }

@media (max-width: 520px) {
  .reference-share-state-grid .reference-earnings-card > div { min-height: 82px; padding: 10px 8px; }
  .reference-share-state-grid .reference-earnings-card span { min-height: 20px; font-size: 8px; }
  .reference-share-state-grid .reference-earnings-card strong { font-size: clamp(15px, 4.9vw, 21px); }
  .reference-status-card small { margin-top: 6px; font-size: 7px; }
  .reference-status-action { min-height: 21px; margin-top: 6px; padding: 3px 5px; font-size: 7px; }
  .modal.welcome-gift-modal { border-radius: 23px; padding: 0 15px 15px; }
  .welcome-gift-art { height: 160px; }
  .welcome-gift-art svg { width: min(196px, 66vw); max-height: 158px; }
  .welcome-gift-copy h2 { font-size: 31px; }
  .welcome-gift-copy p { font-size: 12px; }
  .welcome-gift-balance { margin-top: 15px; }
  .welcome-gift-balance > div { min-height: 63px; padding: 10px; }
  .modal.gpum-token-modal { border-radius: 23px; padding: 14px 14px 15px; }
  .gpum-token-coin { width: 112px; height: 112px; }
  .gpum-token-coin > span { font-size: 64px; }
  .gpum-token-benefits article { min-height: 104px; padding: 10px 9px; }
}

@media (max-width: 370px) {
  .reference-share-state-grid { gap: 6px; }
  .reference-share-state-grid .reference-earnings-card > div { min-height: 78px; padding: 9px 6px; }
  .reference-share-state-grid .reference-earnings-card span { min-height: 19px; font-size: 7px; }
  .reference-share-state-grid .reference-earnings-card strong { font-size: 14px; }
  .reference-status-card small { font-size: 6.5px; }
  .reference-status-action { max-width: 100%; padding: 3px 4px; font-size: 6.5px; }
  .annual-rate-stack { gap: 2px; }
}

/* First-day offer: compact header timer, truthful discounted package price, and offer screen. */
.gpum-page-actions,
.reference-home-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.reference-home-actions { justify-self: end; }
.intro-offer-pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 83px; min-height: 38px; border: 1px solid rgba(255, 178, 93, .72); border-radius: 12px; padding: 4px 7px; color: #fff7ec; background: radial-gradient(circle at 25% 14%, rgba(255, 190, 78, .26), transparent 55%), linear-gradient(135deg, rgba(92, 32, 79, .96), rgba(49, 18, 54, .96)); box-shadow: inset 0 1px 0 rgba(255, 240, 217, .12), 0 0 16px rgba(236, 104, 142, .18); text-align: left; white-space: nowrap; }
.intro-offer-pill:active { transform: scale(.97); }
.intro-offer-pill-discount { color: #ffd37e; font-size: 13px; font-weight: 820; letter-spacing: -.06em; line-height: 1; text-shadow: 0 0 9px rgba(255, 197, 87, .34); }
.intro-offer-pill-copy { display: grid; gap: 1px; }
.intro-offer-pill-copy small { color: #ffc8bd; font-size: 6px; font-weight: 760; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.intro-offer-pill-copy strong { color: #fff8f0; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 760; letter-spacing: -.03em; line-height: 1; }

.package-stage-price,
.buy-quote-price { display: inline-grid; justify-items: center; gap: 3px; line-height: 1; }
.package-stage-price s,
.buy-quote-price s { color: #8992b3; font-size: .62em; font-weight: 600; text-decoration-color: #f084ad; text-decoration-thickness: 1.5px; }
.package-stage-price b,
.buy-quote-price b { display: block; }
.package-stage-card.selected .package-stage-price { gap: 5px; }
.package-stage-card.selected .package-stage-price s { font-size: 12px; }
.package-summary-card .buy-total-row strong .buy-quote-price { justify-items: end; }
.package-summary-card .buy-total-row strong .buy-quote-price s { font-size: 10px; }
.intro-offer-screen { gap: 13px; }
.intro-offer-hero { position: relative; overflow: hidden; border: 1px solid rgba(255, 169, 105, .7); border-radius: 23px; padding: 20px 18px; background: radial-gradient(circle 13rem at 100% 5%, rgba(255, 141, 63, .28), transparent 65%), radial-gradient(circle 11rem at 12% 100%, rgba(151, 64, 255, .3), transparent 65%), linear-gradient(140deg, #3b1544, #11122f 62%, #090d24); box-shadow: inset 0 1px 0 rgba(255, 229, 214, .12), 0 16px 34px rgba(23, 3, 34, .32); }
.intro-offer-hero::after { content: '50'; position: absolute; right: -9px; bottom: -27px; color: rgba(255, 195, 114, .08); font-size: 151px; font-weight: 820; letter-spacing: -.15em; line-height: 1; pointer-events: none; }
.intro-offer-eyebrow { position: relative; z-index: 1; display: block; color: #ffc694; font-size: 9px; font-weight: 810; letter-spacing: .13em; text-transform: uppercase; }
.intro-offer-hero-main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 12px; }
.intro-offer-hero h2 { margin: 0; color: #fff8f1; font-size: clamp(47px, 14vw, 62px); font-weight: 760; letter-spacing: -.09em; line-height: .82; text-shadow: 0 0 20px rgba(255, 178, 111, .18); }
.intro-offer-hero h2 small { display: block; margin-top: 9px; color: #e1d5ff; font-size: .36em; font-weight: 660; letter-spacing: -.045em; line-height: 1; }
.intro-offer-hero p { max-width: 215px; margin: 12px 0 0; color: #d7d3ed; font-size: 11px; line-height: 1.4; }
.intro-offer-clock { display: grid; min-width: 86px; justify-items: center; gap: 5px; border: 1px solid rgba(255, 215, 173, .43); border-radius: 13px; padding: 9px 8px; background: rgba(20, 13, 48, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.intro-offer-clock span { color: #dcbce9; font-size: 7px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; }
.intro-offer-clock strong { color: #fff5e9; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 760; letter-spacing: -.055em; }
.intro-offer-hero-ended { display: grid; gap: 13px; }
.intro-offer-hero-ended h2 { position: relative; z-index: 1; margin-top: 3px; }
.intro-offer-hero-ended p { position: relative; z-index: 1; max-width: 270px; margin: 0; }
.intro-offer-hero-ended .primary-button { position: relative; z-index: 1; }
.intro-offer-benefits { display: grid; gap: 8px; }
.intro-offer-benefits article { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 65px; border: 1px solid rgba(143, 151, 232, .27); border-radius: 16px; padding: 10px; background: linear-gradient(126deg, rgba(20, 27, 66, .86), rgba(11, 16, 42, .9)); }
.intro-offer-benefits article > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255, 170, 132, .48); border-radius: 10px; color: #ffd294; background: linear-gradient(145deg, rgba(202, 70, 139, .28), rgba(92, 56, 210, .25)); font-size: 17px; font-weight: 800; }
.intro-offer-benefits strong { display: block; color: #f2efff; font-size: 12px; font-weight: 700; }
.intro-offer-benefits p { margin: 3px 0 0; color: #aeb8d6; font-size: 9px; line-height: 1.33; }
.intro-offer-note { margin: 0 4px; color: #9faecc; font-size: 9px; line-height: 1.42; text-align: center; }
.intro-offer-action { min-height: 54px; border-color: rgba(255, 181, 137, .73); border-radius: 16px; background: linear-gradient(104deg, #e75583, #8f37ee 55%, #4d78ff); box-shadow: 0 11px 26px rgba(139, 47, 207, .33); font-size: 16px; }

.intro-offer-reference { position: relative; display: grid; justify-items: center; gap: 15px; overflow: hidden; border: 1px solid rgba(177, 102, 255, .66); border-radius: 24px; padding: 18px 16px 17px; text-align: center; background: radial-gradient(circle 13rem at 4% 88%, rgba(61, 116, 255, .26), transparent 66%), radial-gradient(circle 12rem at 96% 8%, rgba(221, 76, 243, .25), transparent 65%), linear-gradient(145deg, #181039, #080e25 68%, #070c1d); box-shadow: inset 0 1px 0 rgba(240, 230, 255, .12), 0 16px 38px rgba(13, 2, 42, .38); }
.intro-offer-reference::after { content: '50'; position: absolute; right: -7px; bottom: -46px; color: rgba(195, 132, 255, .08); font-size: 168px; font-weight: 860; letter-spacing: -.16em; line-height: 1; pointer-events: none; }
.intro-offer-live-badge, .intro-offer-timer, .intro-offer-reference-copy, .intro-offer-reference-highlight { position: relative; z-index: 1; }
.intro-offer-live-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; border: 1px solid rgba(214, 120, 255, .72); border-radius: 999px; padding: 6px 12px; color: #e9b4ff; background: rgba(71, 18, 135, .37); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 0 16px rgba(168, 78, 255, .2); font-size: 9px; font-weight: 820; letter-spacing: .1em; }
.intro-offer-live-badge i { color: #a79cff; font-size: 14px; font-style: normal; line-height: 1; }
.intro-offer-timer { display: grid; width: min(100%, 315px); justify-items: center; gap: 4px; border: 1px solid rgba(213, 148, 255, .51); border-radius: 18px; padding: 12px 11px 10px; background: rgba(10, 10, 39, .62); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 24px rgba(111, 57, 255, .2); }
.intro-offer-timer > span { color: #d5b6f2; font-size: 8px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.intro-offer-timer strong { color: #fff8ff; font-size: clamp(37px, 11vw, 53px); font-variant-numeric: tabular-nums; font-weight: 770; letter-spacing: -.075em; line-height: .95; text-shadow: 0 0 20px rgba(220, 178, 255, .3); }
.intro-offer-timer small { color: #9fa6d3; font-size: 6px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; }
.intro-offer-reference-copy h2 { margin: 0; color: #f9f2ff; font-size: clamp(31px, 10.3vw, 47px); font-weight: 810; letter-spacing: -.075em; line-height: .91; text-transform: uppercase; text-shadow: 0 0 24px rgba(199, 123, 255, .2); }
.intro-offer-reference-copy p { max-width: 290px; margin: 10px auto 0; color: #d2d6ed; font-size: 12px; line-height: 1.42; }
.intro-offer-reference-copy p b { color: #e7ff47; font-size: 1.15em; }
.intro-offer-reference-highlight { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(172, 97, 255, .5); border-radius: 13px; padding: 10px; color: #d7b3ff; background: rgba(42, 19, 82, .46); }
.intro-offer-reference-highlight span { color: #e1adff; font-size: 19px; line-height: 1; }
.intro-offer-reference-highlight p { margin: 0; font-size: 12px; line-height: 1.25; }
.intro-offer-reference-highlight b { color: #f6d5ff; text-transform: uppercase; }
.intro-offer-reference-ended { align-items: start; justify-items: start; min-height: 252px; padding: 24px 20px; text-align: left; }
.intro-offer-reference-ended h2 { position: relative; z-index: 1; margin: 0; color: #f6f0ff; font-size: clamp(31px, 10vw, 44px); line-height: .95; letter-spacing: -.065em; }
.intro-offer-reference-ended p { position: relative; z-index: 1; max-width: 280px; margin: 0; color: #c4c8df; font-size: 12px; line-height: 1.45; }
.intro-offer-reference-ended .primary-button { position: relative; z-index: 1; }

.checkout-payment-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payment-option-icon { display: flex; min-height: 72px; align-items: center; gap: 7px; padding: 9px 7px; }
.payment-option-icon > i { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; overflow: hidden; border-radius: 50%; color: #a996ff; background: rgba(133, 96, 255, .16); }
.payment-option-icon > i svg { width: 18px; height: 18px; }
.payment-option-icon > i .checkout-payment-logo { display: block; width: 100%; height: 100%; object-fit: cover; }
.payment-option-icon > span { display: block; min-width: 0; margin: 0; }
.payment-option-icon > span strong { color: inherit; font-size: 10px; line-height: 1.1; }
.payment-option-icon > span small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.2; }
.payment-option-icon.usdt > i { color: #45ddb0; background: rgba(34, 178, 125, .16); }
.payment-option-icon.stars > i { color: #ffd161; background: rgba(255, 192, 74, .14); }
.payment-option-icon:disabled { opacity: .48; }
.purchase-payment-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.purchase-payment-total strong { color: #f4f5ff; font-size: 15px; letter-spacing: -.035em; }
.payment-surcharge-note { margin: 8px 0 0; color: #e8c46e; font-size: 9px; line-height: 1.35; }
.terms-frame-wrap { height: min(65vh, 530px); overflow: hidden; margin: 0 12px 14px; border: 1px solid rgba(159, 174, 225, .14); border-radius: 15px; background: #0d1f30; }
.terms-frame-wrap iframe { width: 100%; height: 100%; border: 0; background: #0d1f30; }

@media (max-width: 520px) {
  .gpum-page-actions,
  .reference-home-actions { gap: 5px; }
  .intro-offer-pill { min-width: 77px; min-height: 37px; gap: 4px; padding: 4px 6px; }
  .intro-offer-pill-discount { font-size: 12px; }
  .intro-offer-pill-copy strong { font-size: 9px; }
  .package-stage-price s { font-size: 9px; }
  .package-stage-card.selected .package-stage-price s { font-size: 10px; }
  .intro-offer-hero { border-radius: 20px; padding: 17px 15px; }
  .intro-offer-hero-main { gap: 9px; margin-top: 10px; }
  .intro-offer-hero h2 { font-size: clamp(43px, 13.2vw, 56px); }
  .intro-offer-hero p { max-width: 190px; font-size: 10px; }
  .intro-offer-clock { min-width: 76px; padding: 8px 6px; }
  .intro-offer-clock strong { font-size: 13px; }
  .intro-offer-benefits article { min-height: 61px; border-radius: 14px; padding: 9px; }
  .payment-option-icon { min-height: 68px; gap: 5px; padding: 8px 6px; }
  .payment-option-icon > i { width: 24px; height: 24px; flex-basis: 24px; }
  .payment-option-icon > span strong { font-size: 9px; }
  .payment-option-icon > span small { font-size: 7px; }
}

@media (max-width: 385px) {
  .intro-offer-pill { min-width: 65px; padding: 4px 5px; }
  .intro-offer-pill-copy small { display: none; }
  .intro-offer-pill-copy strong { font-size: 9px; }
  .intro-offer-pill-discount { font-size: 11px; }
  .intro-offer-hero-main { grid-template-columns: minmax(0, 1fr) 71px; }
  .intro-offer-clock { min-width: 71px; }
  .intro-offer-clock strong { font-size: 12px; }
  .payment-option-icon { align-items: flex-start; min-height: 64px; }
  .payment-option-icon > i { width: 21px; height: 21px; flex-basis: 21px; }
  .payment-option-icon > i svg { width: 14px; height: 14px; }
  .payment-option-icon > span strong { font-size: 8px; }
  .payment-option-icon > span small { font-size: 6.5px; }
}

/* Current account states and full $GPUM programme view. */
.reference-asset-heading { position: relative; z-index: 1; display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 10px; }
.reference-asset-open .reference-asset-heading .reference-asset-title { width: auto; color: #f4f2ff; text-align: left; }
.reference-share-status { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; margin-top: 1px; text-align: left; }
.reference-share-status-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(99, 228, 168, .66); border-radius: 50%; color: #61e0aa; background: rgba(18, 126, 80, .16); box-shadow: 0 0 13px rgba(58, 216, 145, .2); }
.reference-share-status-icon svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.reference-share-status > span:last-child { display: grid; gap: 3px; min-width: 0; }
.reference-share-status strong { display: block; color: #62e2aa; font-size: 10px; font-weight: 780; line-height: 1; white-space: nowrap; }
.reference-share-status small { display: block; color: #a3b4d6; font-size: 8px; line-height: 1.08; white-space: nowrap; }
.reference-stopped-status { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 68px; border: 1px solid rgba(239, 164, 113, .5); border-radius: 17px; padding: 11px 13px; color: #f7f3ff; background: linear-gradient(135deg, rgba(74, 37, 47, .82), rgba(13, 19, 42, .94)); text-align: left; box-shadow: inset 0 1px 0 rgba(255, 233, 217, .05); }
.reference-stopped-status:active { transform: scale(.985); }
.reference-stopped-status > i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255, 183, 132, .68); border-radius: 11px; color: #ffb482; background: rgba(197, 94, 51, .14); }
.reference-stopped-status > i svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reference-stopped-status > span { display: grid; gap: 4px; }
.reference-stopped-status strong { color: #fff1e8; font-size: 14px; font-weight: 730; line-height: 1; }
.reference-stopped-status small { color: #d6b7ad; font-size: 10px; line-height: 1.1; }
.reference-share-earnings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reference-share-earnings-grid .reference-earnings-card > div { min-height: 82px; padding: 11px 10px; }
.reference-share-earnings-grid .reference-earnings-card span { min-height: 20px; font-size: 9px; line-height: 1.18; }
.reference-share-earnings-grid .reference-earnings-card strong { margin-top: 4px; font-size: clamp(19px, 5.5vw, 25px); letter-spacing: -.06em; }

.energy-visual { position: absolute; z-index: 1; top: 50%; right: -5px; width: min(49%, 184px); height: 176px; transform: translateY(-50%); pointer-events: none; }
.energy-visual .energy-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 11px 14px rgba(2, 15, 50, .48)); }
.energy-hero-visual { isolation: isolate; filter: saturate(1.12); }
.energy-hero-visual::before { content: ""; position: absolute; z-index: -1; top: 21%; right: 13%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(63, 166, 255, .22); filter: blur(18px); }

.redemption-screen { gap: 16px; padding-bottom: 18px; }
.redemption-hero { position: relative; display: grid; min-height: 228px; overflow: hidden; border: 1px solid rgba(153, 117, 255, .76); border-radius: 24px; padding: 21px 18px; background: radial-gradient(circle 13rem at 93% 21%, rgba(103, 167, 255, .28), transparent 61%), radial-gradient(circle 11rem at 8% 100%, rgba(156, 64, 255, .25), transparent 66%), linear-gradient(145deg, #171040, #080d29 68%, #10062b); box-shadow: inset 0 1px 0 rgba(242, 231, 255, .1), 0 16px 37px rgba(13, 2, 42, .28); }
.redemption-hero > div:first-child { position: relative; z-index: 1; width: min(63%, 250px); }
.redemption-hero .eyebrow { margin: 0; color: #cdb4ff; font-size: 9px; font-weight: 790; letter-spacing: .12em; }
.redemption-hero h2 { margin: 9px 0 0; color: #f9f7ff; font-size: clamp(39px, 11.6vw, 54px); font-weight: 720; line-height: .86; letter-spacing: -.082em; }
.redemption-hero p:not(.eyebrow) { margin: 14px 0 0; color: #bdc7e5; font-size: 11px; line-height: 1.43; }
.redemption-hero-mark { position: absolute; right: -7px; bottom: 16px; display: grid; width: 130px; height: 130px; place-content: center; border: 1px solid rgba(161, 181, 255, .53); border-radius: 50%; color: #d4b5ff; background: radial-gradient(circle at 34% 26%, rgba(196, 226, 255, .32), rgba(88, 87, 244, .29) 55%, rgba(12, 16, 53, .68)); box-shadow: 0 0 0 11px rgba(124, 93, 255, .08), 0 0 31px rgba(99, 91, 255, .48), inset 0 0 27px rgba(123, 190, 255, .18); text-align: center; }
.redemption-hero-art { position: absolute; z-index: 0; right: -18px; bottom: -13px; display: block; width: min(53%, 238px); height: 100%; object-fit: contain; object-position: 100% 100%; mix-blend-mode: screen; filter: saturate(1.08) drop-shadow(0 13px 19px rgba(0, 0, 0, .44)); pointer-events: none; }
.redemption-hero-mark svg { width: 35px; height: 35px; margin: 0 auto 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.redemption-hero-mark span { display: block; color: #fff; font-size: 38px; font-weight: 700; line-height: .84; letter-spacing: -.08em; }
.redemption-hero-mark small { display: block; margin-top: 5px; color: #cbd4ff; font-size: 9px; font-weight: 700; }
.redemption-rules { display: grid; gap: 8px; }
.redemption-rules article { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 70px; border: 1px solid rgba(128, 145, 218, .31); border-radius: 17px; padding: 10px 11px; background: linear-gradient(145deg, rgba(11, 20, 50, .96), rgba(5, 11, 29, .98)); }
.redemption-rules article > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(177, 134, 255, .64); border-radius: 9px; color: #d8b9ff; background: rgba(117, 65, 235, .17); font-size: 8px; font-weight: 800; }
.redemption-rules strong { display: block; color: #f1f2ff; font-size: 12px; font-weight: 720; }
.redemption-rules p { margin: 4px 0 0; color: #9caaca; font-size: 9px; line-height: 1.28; }
.redemption-positions { overflow: hidden; border: 1px solid rgba(138, 157, 225, .32); border-radius: 20px; background: linear-gradient(145deg, rgba(8, 17, 42, .96), rgba(4, 10, 26, .99)); }
.redemption-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 15px 14px 13px; border-bottom: 1px solid rgba(122, 143, 203, .19); }
.redemption-section-heading .eyebrow { margin: 0; color: #bf9dff; font-size: 8px; font-weight: 790; letter-spacing: .11em; }
.redemption-section-heading h3 { margin: 5px 0 0; color: #f4f4ff; font-size: 20px; font-weight: 660; letter-spacing: -.055em; }
.redemption-section-heading > span { flex: 0 0 auto; color: #8fd6ff; font-size: 9px; font-weight: 700; white-space: nowrap; }
.redemption-item-list { display: grid; }
.redemption-item { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 88px; border-bottom: 1px solid rgba(122, 143, 203, .16); padding: 11px 13px; }
.redemption-item:last-child { border-bottom: 0; }
.redemption-item-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(153, 132, 255, .51); border-radius: 10px; color: #c4b5ff; background: rgba(102, 69, 226, .15); }
.redemption-item-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.redemption-item-copy { min-width: 0; }
.redemption-item-copy strong, .redemption-item-copy small, .redemption-item-copy span { display: block; }
.redemption-item-copy strong { overflow: hidden; color: #eef1ff; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.redemption-item-copy small { margin-top: 4px; overflow: hidden; color: #9eadce; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.redemption-item-copy span { margin-top: 5px; color: #8395bd; font-size: 8px; }
.redemption-item-copy b { color: #bdd1ff; font-weight: 700; }
.redemption-item-state { max-width: 80px; border-radius: 999px; padding: 5px 6px; font-size: 7px; font-weight: 780; line-height: 1.1; text-align: center; }
.redemption-item-state.ready { border: 1px solid rgba(96, 233, 174, .56); color: #72e5b2; background: rgba(29, 150, 95, .16); }
.redemption-item-state.waiting { border: 1px solid rgba(153, 128, 237, .48); color: #c5b5ff; background: rgba(97, 61, 200, .16); }
.redemption-item-state.redeemed { border: 1px solid rgba(106, 190, 255, .55); color: #9bd5ff; background: rgba(38, 105, 183, .17); }
.redemption-item-actions { display: grid; grid-column: 2 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-top: -3px; }
.redemption-item-actions .secondary-button,
.redemption-item-actions .primary-button { min-height: 34px; padding: 0 8px; font-size: 9px; }
.redemption-decision-modal .modal-summary strong { font-size: 16px; }
.redemption-empty { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 10px; padding: 17px 13px; }
.redemption-empty > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(153, 132, 255, .44); border-radius: 10px; color: #c4b5ff; background: rgba(102, 69, 226, .13); }
.redemption-empty svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.redemption-empty strong { display: block; color: #eef1ff; font-size: 12px; }
.redemption-empty p { margin: 4px 0 0; color: #99a7c8; font-size: 9px; line-height: 1.3; }
.redemption-empty .secondary-button { grid-column: 1 / -1; min-height: 39px; margin-top: 2px; font-size: 10px; }
.redemption-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; border: 1px solid rgba(141, 126, 218, .35); border-radius: 16px; padding: 11px; color: #aebad8; background: rgba(10, 17, 41, .78); }
.redemption-note i { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(194, 161, 255, .67); border-radius: 50%; color: #d7bbff; font-size: 10px; font-style: normal; font-weight: 800; }
.redemption-note p { margin: 0; font-size: 9px; line-height: 1.42; }

.payout-art-wrap { right: 5px; }
.payout-network-logo.gram svg,
.payout-network-choice .payout-network-logo.gram svg { fill: currentColor; stroke: none; }
.payout-network-logo.gram svg path,
.payout-network-choice .payout-network-logo.gram svg path { fill: currentColor; stroke: none; }

.leaderboard-reference-hero > img { right: 4px; top: 18px; width: min(50%, 214px); height: 151px; object-fit: contain; object-position: center; }
.leaderboard-reference-copy { width: min(59%, 225px); }
.leaderboard-reference-meta { grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; }
.leaderboard-reference-meta > div { width: 100%; border-right: 0; }
.leaderboard-reference-meta strong { color: #c6a2ff; font-size: 13px; }

.gpum-token-page { gap: 16px; padding-bottom: 25px; }
.gpum-token-page-hero { position: relative; overflow: hidden; border: 1px solid rgba(166, 108, 255, .82); border-radius: 25px; padding: 22px 18px 21px; background: radial-gradient(circle 13rem at 82% 15%, rgba(69, 139, 255, .3), transparent 62%), radial-gradient(circle 16rem at 4% 88%, rgba(136, 55, 255, .32), transparent 65%), linear-gradient(150deg, #151049, #080d29 59%, #12072d); box-shadow: inset 0 1px 0 rgba(243, 230, 255, .12), 0 17px 37px rgba(10, 1, 42, .34); text-align: center; }
.gpum-token-page-hero::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(185, 143, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 153, 255, .08) 1px, transparent 1px); background-size: 21px 21px; mask-image: linear-gradient(145deg, #000, transparent 83%); pointer-events: none; }
.gpum-token-page-eyebrow { position: relative; z-index: 1; display: block; color: #c5a7ff; font-size: 9px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; }
.gpum-token-page-coin-wrap { position: relative; z-index: 1; display: grid; justify-items: center; margin-top: 17px; }
.gpum-token-page-coin { width: 145px; height: 145px; }
.gpum-token-page-coin > span { font-size: 82px; }
.gpum-token-page-copy { position: relative; z-index: 1; margin-top: 18px; }
.gpum-token-page-copy > p { margin: 0; color: #b9c8ef; font-size: 10px; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.gpum-token-page-copy h2 { margin: 6px 0 0; color: #fff; font-size: clamp(51px, 15vw, 66px); font-weight: 740; letter-spacing: -.095em; line-height: .82; text-shadow: 0 0 21px rgba(189, 139, 255, .23); }
.gpum-token-page-copy strong { display: block; margin-top: 16px; color: #f3f2ff; font-size: clamp(19px, 5.8vw, 25px); font-weight: 660; line-height: 1.05; letter-spacing: -.05em; }
.gpum-token-page-copy > span { display: block; margin-top: 8px; color: #aebbdc; font-size: 10px; }
.gpum-token-page-section { display: grid; gap: 11px; }
.gpum-token-section-heading { margin: 1px 3px; }
.gpum-token-section-heading > span { display: block; color: #ba9cff; font-size: 9px; font-weight: 790; letter-spacing: .11em; }
.gpum-token-section-heading h3 { margin: 6px 0 0; color: #f7f5ff; font-size: clamp(25px, 7.4vw, 34px); font-weight: 670; line-height: .95; letter-spacing: -.065em; }
.gpum-token-page-benefits { display: grid; gap: 8px; }
.gpum-token-page-benefits article { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 78px; border: 1px solid rgba(134, 139, 231, .37); border-radius: 18px; padding: 12px; background: linear-gradient(135deg, rgba(17, 25, 65, .94), rgba(8, 14, 37, .98)); }
.gpum-token-page-benefits article > span { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(190, 144, 255, .66); border-radius: 12px; color: #dbb4ff; background: linear-gradient(145deg, rgba(139, 58, 243, .3), rgba(52, 75, 194, .24)); font-size: 19px; font-weight: 790; }
.gpum-token-page-benefits strong { display: block; color: #f3f3ff; font-size: 14px; font-weight: 700; }
.gpum-token-page-benefits p { margin: 4px 0 0; color: #aab7d8; font-size: 10px; line-height: 1.35; }
.gpum-token-page-how { overflow: hidden; border: 1px solid rgba(110, 130, 208, .36); border-radius: 20px; padding: 16px 14px 7px; background: radial-gradient(circle 13rem at 100% 0, rgba(82, 93, 255, .15), transparent 66%), linear-gradient(145deg, rgba(9, 19, 47, .95), rgba(5, 11, 28, .99)); }
.gpum-token-page-how .gpum-token-section-heading { margin: 0 2px 10px; }
.gpum-token-page-how ol { display: grid; margin: 0; padding: 0; list-style: none; }
.gpum-token-page-how li { display: grid; grid-template-columns: 33px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 69px; border-top: 1px solid rgba(118, 139, 208, .2); padding: 10px 2px; }
.gpum-token-page-how li b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(107, 191, 255, .57); border-radius: 10px; color: #91d7ff; background: rgba(21, 114, 196, .14); font-size: 10px; font-weight: 800; }
.gpum-token-page-how li strong,
.gpum-token-page-how li small { display: block; }
.gpum-token-page-how li strong { color: #f1f4ff; font-size: 12px; font-weight: 700; }
.gpum-token-page-how li small { margin-top: 4px; color: #9eadd0; font-size: 9px; line-height: 1.3; }
.gpum-token-page-note { display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: start; gap: 9px; border: 1px solid rgba(154, 126, 224, .34); border-radius: 16px; padding: 12px; color: #aebbd8; background: rgba(12, 17, 42, .8); }
.gpum-token-page-note i { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(190, 151, 255, .68); border-radius: 50%; color: #d5b7ff; font-size: 11px; font-style: normal; font-weight: 800; }
.gpum-token-page-note p { margin: 0; font-size: 10px; line-height: 1.43; }

@media (max-width: 520px) {
  .reference-share-status { grid-template-columns: 20px minmax(0, 1fr); gap: 5px; }
  .reference-share-status-icon { width: 20px; height: 20px; }
  .reference-share-status strong { font-size: 9px; }
  .reference-share-status small { font-size: 7px; }
  .reference-stopped-status { min-height: 63px; border-radius: 15px; padding: 10px 11px; }
  .reference-stopped-status > i { width: 31px; height: 31px; }
  .reference-stopped-status strong { font-size: 13px; }
  .reference-share-earnings-grid .reference-earnings-card > div { min-height: 74px; padding: 10px 8px; }
  .reference-share-earnings-grid .reference-earnings-card strong { font-size: clamp(17px, 5.2vw, 22px); }
  .energy-visual { right: -9px; width: 48%; height: 151px; }
  .redemption-screen { gap: 13px; }
  .redemption-hero { min-height: 210px; padding: 18px 15px; border-radius: 21px; }
  .redemption-hero > div:first-child { width: 64%; }
  .redemption-hero h2 { font-size: clamp(35px, 11vw, 47px); }
  .redemption-hero p:not(.eyebrow) { max-width: 205px; margin-top: 12px; font-size: 10px; }
  .redemption-hero-mark { right: -10px; bottom: 13px; width: 112px; height: 112px; }
  .redemption-hero-art { right: -19px; bottom: -12px; width: 55%; }
  .redemption-hero-mark span { font-size: 33px; }
  .redemption-rules article { min-height: 65px; padding: 9px 10px; }
  .redemption-item { grid-template-columns: 31px minmax(0, 1fr) auto; gap: 8px; min-height: 82px; padding: 10px; }
  .redemption-item-icon { width: 30px; height: 30px; }
  .redemption-item-state { max-width: 72px; font-size: 6.5px; }
  .payout-art-wrap { right: 0; }
  .leaderboard-reference-hero > img { right: 1px; top: 17px; width: 48%; height: 142px; }
  .leaderboard-reference-copy { width: 60%; }
  .gpum-token-page { gap: 14px; }
  .gpum-token-page-hero { border-radius: 21px; padding: 18px 14px; }
  .gpum-token-page-coin { width: 126px; height: 126px; }
  .gpum-token-page-coin > span { font-size: 71px; }
  .gpum-token-page-copy strong { font-size: 19px; }
  .gpum-token-page-benefits article { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; min-height: 73px; border-radius: 16px; padding: 10px; }
  .gpum-token-page-benefits article > span { width: 35px; height: 35px; border-radius: 11px; font-size: 17px; }
  .gpum-token-page-how { border-radius: 18px; padding: 14px 12px 5px; }
}

@media (max-width: 370px) {
  .reference-asset-heading { gap: 6px; }
  .reference-share-status { grid-template-columns: 18px minmax(0, 1fr); gap: 4px; }
  .reference-share-status-icon { width: 18px; height: 18px; }
  .reference-share-status strong { font-size: 8px; }
  .reference-share-status small { font-size: 6px; }
  .reference-share-earnings-grid { gap: 6px; }
  .reference-share-earnings-grid .reference-earnings-card > div { padding: 9px 6px; }
  .reference-share-earnings-grid .reference-earnings-card span { font-size: 7px; }
  .reference-share-earnings-grid .reference-earnings-card strong { font-size: 15px; }
  .leaderboard-reference-copy { width: 61%; }
  .leaderboard-reference-hero > img { width: 47%; height: 132px; }
}

/* Navigation uses bespoke icon tiles so labels remain readable in Telegram's compact viewport. */
.bottom-nav {
  gap: 5px;
  padding-top: 11px;
  background: linear-gradient(180deg, rgba(15, 28, 49, .96), rgba(6, 15, 29, .97));
}

.bottom-nav-item {
  min-height: 58px;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #97a5c3;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.bottom-nav-item span {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(135, 157, 211, .18);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(46, 65, 104, .42), rgba(12, 24, 45, .3));
  box-shadow: inset 0 1px 0 rgba(228, 239, 255, .06);
}

.bottom-nav-item svg { width: 20px; height: 20px; stroke-width: 2; }
.bottom-nav-item small { font-size: 11px; font-weight: 720; letter-spacing: .012em; line-height: 1.05; white-space: nowrap; }
.bottom-nav-item.active {
  border-color: rgba(157, 112, 255, .34);
  color: #e2d5ff;
  background: linear-gradient(180deg, rgba(135, 72, 255, .25), rgba(49, 37, 115, .1));
  box-shadow: inset 0 1px 0 rgba(235, 220, 255, .08);
}
.bottom-nav-item.active span {
  border-color: rgba(201, 168, 255, .63);
  color: #f4ecff;
  background: linear-gradient(145deg, #a76bff, #6325d8);
  box-shadow: 0 5px 16px rgba(102, 45, 232, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.bottom-nav-item.active small { color: #e1d1ff; }

@media (max-width: 520px) {
  .bottom-nav { gap: 3px; padding: 9px 7px max(9px, env(safe-area-inset-bottom)); }
  .bottom-nav-item { min-height: 55px; gap: 4px; border-radius: 14px; }
  .bottom-nav-item span { width: 27px; height: 27px; border-radius: 10px; }
  .bottom-nav-item svg { width: 18px; height: 18px; }
  .bottom-nav-item small { font-size: clamp(9px, 2.7vw, 10.5px); letter-spacing: .004em; }
}

@media (max-width: 370px) {
  .bottom-nav { gap: 1px; padding-right: 4px; padding-left: 4px; }
  .bottom-nav-item { min-height: 52px; gap: 3px; }
  .bottom-nav-item span { width: 24px; height: 24px; border-radius: 9px; }
  .bottom-nav-item svg { width: 17px; height: 17px; }
  .bottom-nav-item small { font-size: 9px; }
}

/* Profile / language: compact enough to live beside energy in the Mini App header. */
.profile-control { position: relative; display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(181, 140, 255, .66); border-radius: 13px; padding: 0; color: #e7dcff; background: radial-gradient(circle at 35% 28%, rgba(184, 119, 255, .42), rgba(58, 31, 145, .52) 55%, rgba(13, 17, 52, .94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 16px rgba(117, 67, 255, .2); }
.profile-control > span { display: grid; width: 26px; height: 26px; place-items: center; }
.profile-control svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(211, 184, 255, .58)); }
.profile-control > i { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border: 2px solid #101830; border-radius: 50%; background: #22d96c; box-shadow: 0 0 8px rgba(34, 217, 108, .8); }

.profile-modal { overflow: hidden; border-color: rgba(174, 116, 255, .72); border-radius: 24px; background: radial-gradient(circle 13rem at 100% -10%, rgba(109, 55, 237, .37), transparent 58%), linear-gradient(150deg, #11142f, #091326 66%, #080d21); }
.profile-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 19px 17px; }
.profile-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.profile-identity > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(202, 166, 255, .78); border-radius: 16px; color: #f2eaff; background: radial-gradient(circle at 34% 25%, #bd84ff, #5528d0 59%, #1a154f); box-shadow: 0 0 19px rgba(131, 75, 255, .34); }
.profile-identity svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.profile-identity h2 { max-width: 220px; margin: 0; overflow: hidden; color: #f8f5ff; font-size: 21px; font-weight: 720; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity p { margin: 4px 0 0; overflow: hidden; color: #9faacf; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-list { display: grid; gap: 1px; border-top: 1px solid rgba(166, 178, 231, .12); background: rgba(178, 191, 237, .08); }
.profile-menu-item { display: grid; grid-template-columns: 39px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 72px; border: 0; padding: 12px 18px; color: #f1f4ff; background: linear-gradient(145deg, rgba(10, 21, 44, .98), rgba(8, 15, 32, .99)); text-align: left; }
.profile-menu-item > span:nth-child(2) { min-width: 0; }
.profile-menu-item strong, .profile-menu-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-item strong { font-size: 14px; font-weight: 700; }
.profile-menu-item small { margin-top: 4px; color: #9da9c7; font-size: 10px; }
.profile-menu-item > i { color: #b99aff; font-size: 26px; font-style: normal; line-height: 1; text-align: right; }
.profile-menu-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(167, 139, 255, .45); border-radius: 12px; color: #c9b0ff; background: rgba(112, 65, 234, .15); }
.profile-menu-icon.support { border-color: rgba(97, 186, 255, .45); color: #8bd2ff; background: rgba(28, 124, 230, .13); }
.profile-menu-icon.onboarding { border-color: rgba(169, 117, 255, .58); color: #e0bcff; background: rgba(129, 52, 236, .15); }
.profile-menu-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.language-modal { overflow: hidden; border-color: rgba(150, 128, 248, .58); border-radius: 23px; }
.language-options { display: grid; gap: 8px; padding: 5px 18px 18px; }
.language-option { display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 11px; min-height: 60px; border: 1px solid rgba(149, 166, 222, .2); border-radius: 16px; padding: 9px 11px; color: #eff2ff; background: rgba(7, 17, 36, .8); text-align: left; }
.language-option.selected { border-color: rgba(180, 126, 255, .74); background: linear-gradient(105deg, rgba(105, 48, 222, .34), rgba(38, 75, 174, .21)); box-shadow: inset 0 1px 0 rgba(248, 229, 255, .13); }
.language-option > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #d5c2ff; background: rgba(135, 77, 246, .19); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.language-option strong { font-size: 14px; }
.language-option i { color: #d6b9ff; font-size: 16px; font-style: normal; text-align: right; }

/* Full-height three-step onboarding follows onboarding1–3 while keeping all copy readable in Telegram. */
.modal-layer.onboarding-open { align-items: stretch; padding: 0; background: #02040e; }
.onboarding-reference-modal { display: grid; width: min(100%, 560px); min-height: 100dvh; max-height: 100dvh; grid-template-rows: 4px auto minmax(0, 1fr) auto; margin: 0 auto; overflow: hidden; border: 1px solid rgba(148, 164, 227, .17); border-radius: 0; background: radial-gradient(circle 28rem at 50% 31%, rgba(82, 48, 223, .19), transparent 58%), radial-gradient(circle 22rem at 108% 72%, rgba(20, 119, 255, .12), transparent 62%), linear-gradient(155deg, #040716, #05091d 62%, #020510); box-shadow: none; }
.onboarding-progress { height: 4px; margin: 0 auto; overflow: hidden; border-radius: 0 0 999px 999px; background: rgba(132, 73, 255, .16); }
.onboarding-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5620ee, #b951ff 50%, #4d8fff); box-shadow: 0 0 12px rgba(128, 57, 255, .8); transition: width .24s ease; }
.onboarding-reference-header { display: flex; align-items: center; justify-content: space-between; padding: max(20px, env(safe-area-inset-top)) 24px 8px; }
.onboarding-reference-header img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(99, 140, 255, .6)); }
.onboarding-reference-header button { border: 0; padding: 7px 0 7px 13px; color: #c17aff; background: transparent; font-size: 17px; font-weight: 600; }
.onboarding-reference-body { display: grid; min-height: 0; grid-template-rows: minmax(195px, 34dvh) auto; align-content: start; gap: 13px; overflow: auto; padding: 0 24px; scrollbar-width: none; }
.onboarding-reference-body::-webkit-scrollbar { display: none; }
.onboarding-art { position: relative; min-height: 195px; overflow: hidden; }
.onboarding-art::after { content: ""; position: absolute; inset: 13% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(90, 79, 255, .32), transparent 68%); filter: blur(11px); pointer-events: none; }
.onboarding-art img { position: absolute; z-index: 1; display: block; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .55)) saturate(1.18); }
.onboarding-art-shares img { right: -16%; bottom: -11%; width: 116%; height: 117%; object-position: center; }
.onboarding-grid { position: absolute; z-index: 0; inset: 19% 3% 0; background-image: linear-gradient(rgba(109, 114, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 114, 255, .18) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(transparent, #000 24%, transparent); transform: perspective(240px) rotateX(56deg); }
.onboarding-price { position: absolute; z-index: 2; display: grid; min-width: 49px; min-height: 29px; place-items: center; border: 1px solid rgba(170, 120, 255, .85); border-radius: 8px; padding: 4px 7px; color: #e8d9ff; background: rgba(22, 15, 70, .81); box-shadow: 0 0 13px rgba(145, 75, 255, .46); font-size: 13px; font-weight: 800; }
.onboarding-price::after { content: ""; position: absolute; top: calc(100% + 2px); left: 50%; height: 26px; border-left: 1px dashed rgba(157, 139, 255, .72); transform: translateX(-50%); }
.price-one { top: 13%; left: 5%; }.price-two { top: 5%; left: 45%; }.price-three { top: 18%; right: 3%; }
.onboarding-art-ai img { right: 13%; bottom: 12%; width: 72%; height: 62%; }
.onboarding-ai-orbit { position: absolute; z-index: 0; right: 13%; bottom: 7%; width: 71%; height: 48%; border: 1px solid rgba(83, 140, 255, .55); border-radius: 50%; box-shadow: 0 0 30px rgba(64, 89, 255, .28), inset 0 0 24px rgba(107, 50, 255, .25); }
.onboarding-ai-chip { position: absolute; z-index: 2; min-width: 54px; border: 1px solid rgba(107, 164, 255, .72); border-radius: 9px; padding: 7px 10px; color: #d9e8ff; background: rgba(15, 25, 74, .85); box-shadow: 0 0 13px rgba(57, 114, 255, .35); font-size: 11px; font-weight: 800; }
.chip-left { top: 12%; left: 7%; }.chip-right { top: 18%; right: 4%; }.chip-bottom { bottom: 6%; left: 9%; }
.onboarding-art-ai > b { position: absolute; z-index: 3; right: 3%; bottom: 5%; padding: 8px 11px; border: 1px solid rgba(222, 126, 255, .77); border-radius: 10px; color: #eacbff; background: rgba(44, 19, 91, .85); box-shadow: 0 0 14px rgba(174, 62, 255, .44); font-size: 15px; }
.onboarding-art-token { display: grid; place-items: center; }
.onboarding-token-coin { position: relative; z-index: 2; display: grid; width: min(41vw, 156px); height: min(41vw, 156px); place-content: center; border: 2px solid rgba(177, 121, 255, .9); border-radius: 50%; color: #f5ddff; background: radial-gradient(circle at 33% 24%, #bc77ff, #5a2bd8 48%, #0e1d5f 72%, #080d2c); box-shadow: 0 0 0 9px rgba(100, 66, 255, .12), 0 0 38px rgba(108, 61, 255, .67), inset 0 0 21px rgba(239, 218, 255, .25); text-align: center; }
.onboarding-token-coin small { font-size: 18px; font-weight: 800; }.onboarding-token-coin strong { font-size: clamp(18px, 6vw, 28px); letter-spacing: -.07em; }.onboarding-token-coin span { margin-top: 4px; color: #76d3ff; font-size: 18px; }
.onboarding-token-orbit { position: absolute; z-index: 0; width: 85%; height: 45%; border: 1px solid rgba(113, 150, 255, .47); border-radius: 50%; box-shadow: 0 0 22px rgba(68, 88, 255, .35); }.orbit-a { transform: rotate(23deg); }.orbit-b { transform: rotate(-31deg); }
.onboarding-token-node { position: absolute; z-index: 1; width: 26px; height: 26px; border: 1px solid rgba(180, 128, 255, .78); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #e7b6ff, #672ad8 62%, #12145e); box-shadow: 0 0 13px rgba(146, 72, 255, .58); }.node-a { top: 15%; left: 14%; }.node-b { top: 17%; right: 13%; }.node-c { right: 12%; bottom: 13%; }.node-d { bottom: 13%; left: 14%; }
.onboarding-art-generated { display: grid; place-items: center; padding: 0 2px; }
.onboarding-art-generated img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 17px 20px rgba(0, 0, 0, .54)) saturate(1.06); }
.onboarding-reference-copy { text-align: center; }.onboarding-reference-copy h2 { margin: 0; color: #fbfaff; font-size: clamp(30px, 9.2vw, 44px); font-weight: 740; line-height: 1.04; letter-spacing: -.07em; }.onboarding-reference-copy h2 b { font-weight: inherit; background: linear-gradient(95deg, #d558ff, #8e65ff 49%, #1ca9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }.onboarding-reference-copy p { max-width: 420px; margin: 13px auto 0; color: #aeb9d4; font-size: 13px; line-height: 1.52; }
.onboarding-reference-footer { display: grid; gap: 10px; padding: 13px 24px max(20px, env(safe-area-inset-bottom)); }.onboarding-dots { display: flex; justify-content: center; gap: 12px; }.onboarding-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b70; }.onboarding-dots i.active { width: 18px; border: 2px solid #2b8eff; background: #a247ff; box-shadow: 0 0 12px rgba(95, 82, 255, .74); }.onboarding-reference-footer p { margin: 0; color: #7987aa; font-size: 9px; line-height: 1.35; text-align: center; }.onboarding-reference-action { min-height: 55px; border-color: rgba(174, 103, 255, .93); border-radius: 17px; background: linear-gradient(105deg, #1d20ef, #6426ec 53%, #ad27eb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .23), 0 10px 25px rgba(77, 37, 228, .38); font-size: 21px; font-weight: 650; }.onboarding-reference-action span { margin-left: 8px; font-size: 32px; font-weight: 320; line-height: .5; vertical-align: -3px; }

@media (max-width: 385px), (max-height: 690px) {
  .onboarding-reference-header { padding: max(14px, env(safe-area-inset-top)) 18px 6px; }.onboarding-reference-header img { width: 39px; height: 39px; }.onboarding-reference-header button { font-size: 15px; }.onboarding-reference-body { grid-template-rows: minmax(158px, 29dvh) auto; gap: 10px; padding: 0 18px; }.onboarding-art { min-height: 158px; }.onboarding-reference-copy h2 { font-size: clamp(26px, 8.7vw, 36px); }.onboarding-reference-copy p { margin-top: 8px; font-size: 11px; line-height: 1.42; }.onboarding-reference-footer { gap: 8px; padding: 10px 18px max(14px, env(safe-area-inset-bottom)); }.onboarding-reference-footer p { display: none; }.onboarding-reference-action { min-height: 48px; border-radius: 14px; font-size: 18px; }.onboarding-token-node { width: 21px; height: 21px; }
}

@media (max-width: 370px) {
  .profile-control { width: 34px; height: 34px; border-radius: 11px; }.profile-control > span { width: 23px; height: 23px; }.profile-control svg { width: 22px; height: 22px; }.profile-control > i { width: 7px; height: 7px; }
}

/* Keep supporting copy legible in Telegram's compact mobile viewport. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.intro-offer-pill-copy small,
.intro-offer-timer small,
.intro-offer-clock span { font-size: 8px; }
.payment-option-icon > span strong { font-size: 11px; }
.payment-option-icon > span small { font-size: 9px; }
.reference-share-state-grid .reference-earnings-card span,
.reference-share-earnings-grid .reference-earnings-card span { min-height: 23px; font-size: 10px; }
.reference-status-card small,
.reference-share-status small { font-size: 9px; line-height: 1.2; }
.reference-status-action { min-height: 25px; font-size: 9px; }
.payout-history-row > span,
.payout-history-row b,
.payout-history-row time,
.payout-saved-wallet small,
.payout-wallet-empty p,
.payout-network-choice small { font-size: 9px; }
.gpu-choice-availability-heading > strong,
.gpu-choice-availability-range,
.gpu-choice-availability-range b { font-size: 9px; }
.statistics-ownership-pie span,
.leaderboard-reference-meta span,
.leaderboard-reference-meta strong,
.leaderboard-ways button small,
.partners-earnings-grid small,
.partners-program-state,
.partners-section-heading > span,
.partners-accruals-empty p,
.gpum-season-benefits p,
.rate-tier-heading .rate-tier-badge,
.gpum-token-benefits p,
.gpum-token-note,
.gpum-token-chain { font-size: 10px; }
.partners-link-control .text-input { font-size: 11px; }
.welcome-gift-copy > span,
.welcome-gift-balance span,
.welcome-gift-note { font-size: 10px; }
.redemption-item-copy small,
.redemption-item-copy span,
.redemption-item-state,
.redemption-note p { font-size: 9px; }
.onboarding-reference-footer p { font-size: 10px; }

@media (max-width: 385px), (max-height: 690px) {
  .payment-option-icon > span strong { font-size: 10px; }
  .payment-option-icon > span small { font-size: 8px; }
}

/* Supplied onboarding artwork is intentionally full-bleed; copy remains below it. */
.onboarding-reference-body { grid-template-rows: auto auto; gap: 22px; overflow-x: hidden; }
.onboarding-art-generated { display: block; width: calc(100% + 48px); height: clamp(300px, 94vw, 450px); min-height: 0; margin: 0 -24px; padding: 0; }
.onboarding-art-generated::after { z-index: 2; inset: auto 0 0; height: 30%; border-radius: 0; background: linear-gradient(to bottom, transparent, #040716 100%); filter: none; }
.onboarding-art-generated img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.onboarding-reference-copy { padding-top: 4px; }

/* Fade the opaque edges of visual assets into their cards instead of exposing a rectangular image boundary. */
.energy-purchase-reference-balance,
.redemption-hero,
.leaderboard-reference-hero { isolation: isolate; }
.energy-checkout-hero-art,
.redemption-hero-art,
.leaderboard-reference-hero > img {
  -webkit-mask-image: radial-gradient(ellipse 92% 95% at 65% 53%, #000 48%, rgba(0, 0, 0, .96) 68%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: radial-gradient(ellipse 92% 95% at 65% 53%, #000 48%, rgba(0, 0, 0, .96) 68%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.energy-checkout-hero-art { right: -18px; bottom: -17px; width: min(64%, 260px); height: 116%; object-fit: cover; object-position: 66% 58%; }
.redemption-hero-art { right: -30px; bottom: -20px; width: min(64%, 270px); height: 119%; object-fit: cover; object-position: 64% 56%; }
.leaderboard-reference-hero > img { right: -15px; top: 2px; width: min(61%, 255px); height: 190px; object-fit: cover; object-position: 62% 54%; }

@media (max-width: 520px) {
  .energy-checkout-hero-art { right: -16px; bottom: -15px; width: 65%; height: 117%; }
  .redemption-hero-art { right: -28px; bottom: -18px; width: 65%; height: 119%; }
  .leaderboard-reference-hero > img { right: -12px; top: 7px; width: 61%; height: 178px; }
}

@media (max-width: 385px), (max-height: 690px) {
  .onboarding-reference-body { grid-template-rows: auto auto; gap: 18px; }
  .onboarding-art-generated { width: calc(100% + 36px); height: clamp(266px, 88vw, 336px); margin: 0 -18px; }
  .onboarding-reference-copy { padding-top: 2px; }
}