/* Portgainy app layout and screens. Mobile-first: compact, thumb-reachable, app-like. */

/* ---------------------------------------------------------------- shell */

.shell { min-height: 100dvh; padding-bottom: calc(var(--tab-h) + var(--safe-b)); }
.rail { display: none; }
.stage { min-width: 0; }
.content { width: 100%; max-width: 760px; margin: 0 auto; padding: 4px 12px 22px; }
.foot { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 12px 0;
  background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.avatar-btn { display: grid; place-items: center; flex: none; }
.search-pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; color: var(--text-3); background: var(--s3);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); font-size: 13px; font-weight: 600; text-align: left;
}
.search-pill .ic { width: 16px; height: 16px; flex: none; }
.search-pill span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-pill kbd { display: none; padding: 2px 7px; background: var(--s5); color: var(--text-3); font: 600 11px var(--f-hud); }
.top-live, .top-deposit, .hide-sm { display: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(4, 4, 5, 0.94); backdrop-filter: blur(16px); border-top: 1px solid var(--line-2);
}
.tab-item { position: relative; display: grid; place-content: center; justify-items: center; gap: 3px; color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.04em; transition: color 0.2s; }
.tab-item .ic { width: 22px; height: 22px; transition: transform 0.25s var(--spring); }
.tab-item.is-active { color: var(--text); }
.tab-item.is-active .ic { color: var(--lime); transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(200, 247, 81, 0.6)); }
.tab-item.is-active::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.tab-item.is-hero .nav-ic { display: grid; place-items: center; width: 44px; height: 48px; margin-top: -16px; background: var(--s4); color: var(--text); clip-path: var(--hex); box-shadow: inset 0 0 0 1px var(--line-3); transition: background 0.2s; }
.tab-item.is-hero .nav-ic .ic { width: 22px; height: 22px; }
.tab-item.is-hero.is-active .nav-ic { background: linear-gradient(160deg, var(--lime-hi), var(--lime)); }
.tab-item.is-hero.is-active .nav-ic .ic { color: var(--lime-ink); filter: none; }
.tab-item.is-hero.is-active::before { display: none; }
.tab-item.is-hero { padding-top: 0; gap: 1px; }

.page { display: grid; gap: 10px; align-content: start; animation: page-in 0.35s var(--glide) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px 2px; }
.page-head h1 { font: 800 30px/1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
.page-head p { margin-top: 3px; color: var(--text-3); font-size: 12.5px; }
.block { display: grid; gap: 0; }
.col { display: contents; }

/* ---------------------------------------------------------------- hero */

.hero-card {
  --cut: 16px; position: relative; padding: 16px 14px 14px; overflow: hidden; clip-path: var(--chamfer);
  background: radial-gradient(120% 90% at 100% 0%, rgba(200, 247, 81, 0.16), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(155, 123, 255, 0.16), transparent 60%), linear-gradient(180deg, #101013, #050506);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.hero-card::before { content: ''; position: absolute; inset: 0; opacity: 0.35; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
.hero-card > * { position: relative; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font: 600 11px var(--f-hud); letter-spacing: 0.12em; text-transform: uppercase; }
.eye-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--text-3); }
.eye-btn .ic { width: 16px; height: 16px; }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; background: rgba(255, 255, 255, 0.07); color: var(--text-2); font: 700 11px var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.hero-num { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.hero-num strong { font: 800 clamp(40px, 12vw, 58px)/1 var(--f-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.hero-num span { color: var(--text-3); font: 700 14px var(--f-hud); letter-spacing: 0.08em; }
.hero-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 4px; color: var(--text-3); font-size: 12.5px; }
.pnl { display: inline-flex; align-items: baseline; gap: 6px; font: 700 12.5px var(--f-hud); }
.pnl small { color: var(--text-4); font-weight: 500; }
.pnl-note b { color: var(--text); }
.hero-xp { display: grid; gap: 5px; margin-top: 12px; }
.hero-xp > span { color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.hero-xp > small { color: var(--text-4); font-size: 11px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.quick button { display: grid; justify-items: center; gap: 7px; color: var(--text-2); font: 600 11.5px var(--f-hud); letter-spacing: 0.03em; }
.quick-ic { display: grid; place-items: center; width: 100%; max-width: 74px; height: 46px; background: rgba(255, 255, 255, 0.08); color: var(--text); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background 0.2s, color 0.2s, transform 0.2s var(--spring); }
.quick button:hover .quick-ic { background: var(--lime); color: var(--lime-ink); }
.quick button:active .quick-ic { transform: scale(0.94); }
.quick-ic .ic { width: 21px; height: 21px; }
.hero-card.is-compact .hero-num strong { font-size: clamp(34px, 10vw, 46px); }

/* claim strip + promo */
.claim-strip { --cut: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; clip-path: var(--chamfer); background: linear-gradient(90deg, rgba(200, 247, 81, 0.1), var(--s2) 70%); box-shadow: inset 0 0 0 1px var(--line-2); }
.claim-strip.is-ready { box-shadow: inset 0 0 0 1.5px var(--lime); animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 50% { background: linear-gradient(90deg, rgba(200, 247, 81, 0.22), var(--s2) 70%); } }
.claim-gem { display: grid; place-items: center; flex: none; width: 40px; height: 44px; background: linear-gradient(160deg, var(--lime-hi), var(--lime)); color: var(--lime-ink); clip-path: var(--hex); }
.claim-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.claim-copy small { color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; }
.claim-copy strong { font: 700 15px var(--f-hud); }
.claim-copy strong b { color: var(--lime); font-variant-numeric: tabular-nums; }

.promo { --cut: 10px; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; clip-path: var(--chamfer); background: linear-gradient(100deg, rgba(255, 71, 148, 0.16), rgba(155, 123, 255, 0.14) 60%, var(--s2)); box-shadow: inset 0 0 0 1px rgba(255, 71, 148, 0.4); }
.promo.is-flat { margin-bottom: 10px; }
.promo-rate { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 800 20px/1 var(--f-display); color: var(--text-3); }
.promo-rate .ic { width: 14px; height: 14px; }
.promo-rate .hi, .promo-rate b.hi { color: var(--lime); text-shadow: 0 0 14px rgba(200, 247, 81, 0.7); }
.promo-rate.big { font-size: 42px; gap: 10px; }
.promo-rate.big .ic { width: 22px; height: 22px; }
.promo-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.promo-copy strong { font: 700 13.5px var(--f-hud); }
.promo-copy small { color: var(--text-3); font-size: 11.5px; }
.promo > .ic { color: var(--text-3); }
.promo-card { --cut: 14px; display: grid; gap: 10px; padding: 16px; clip-path: var(--chamfer); background: radial-gradient(100% 100% at 100% 0, rgba(255, 71, 148, 0.2), transparent 60%), linear-gradient(180deg, var(--s2), var(--s1)); box-shadow: inset 0 0 0 1px rgba(255, 71, 148, 0.35); }
.promo-card.is-unlocked { box-shadow: inset 0 0 0 1.5px var(--lime); background: radial-gradient(100% 100% at 100% 0, rgba(200, 247, 81, 0.2), transparent 60%), linear-gradient(180deg, var(--s2), var(--s1)); }
.promo-card.is-ended { opacity: 0.7; }
.promo-card-top { display: flex; align-items: center; justify-content: space-between; }
.promo-card h2, .notice h2 { font: 800 26px/1.05 var(--f-display); text-transform: uppercase; }
.promo-card p, .notice p { color: var(--text-2); font-size: 12.5px; }
.prog { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-3); font: 600 11px var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; }
.prog b { color: var(--text); font-size: 14px; letter-spacing: 0; }
.notice { display: grid; gap: 12px; padding-bottom: 4px; }


/* allocation */
.alloc-bar { display: flex; gap: 3px; height: 10px; }
.alloc-bar i { display: block; min-width: 4px; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.alloc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; }
.alloc-legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.alloc-legend i { width: 8px; height: 8px; flex: none; }
.alloc-legend b { margin-left: auto; font: 700 12px var(--f-hud); }

/* market lists */
.mlist { display: grid; }
.mrow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; width: 100%; padding: 10px 2px; border-bottom: 1px solid var(--line); text-align: left; transition: background 0.15s; }
.mrow:last-child { border-bottom: 0; }
.mrow:active { background: rgba(255, 255, 255, 0.04); }
.mrow-name { display: grid; min-width: 0; }
.mrow-name b { font: 700 15px var(--f-hud); letter-spacing: 0.02em; }
.mrow-name small, .mrow-price small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-price { display: grid; justify-items: end; }
.mrow-price b { font: 700 15px var(--f-hud); font-variant-numeric: tabular-nums; }
.star { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -4px; color: var(--text-4); }
.star .ic { width: 16px; height: 16px; }
.star.is-on { color: var(--amber); }
.star.is-on .ic { fill: currentColor; }
.mhead { display: grid; grid-template-columns: 1fr auto 72px; gap: 10px; padding: 10px 14px 8px; color: var(--text-4); font: 600 10.5px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.mhead span:nth-child(2), .mhead span:nth-child(3) { text-align: right; }
.card.flush .mlist { padding: 0 12px 6px; }
.movers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mover { --cut: 10px; display: grid; gap: 4px; padding: 12px; clip-path: var(--chamfer); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.mover-top { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.mover-top b { font: 700 14px var(--f-hud); }
.mover strong { font: 800 24px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.mood-top { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-3); font: 600 11px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.mood-top b { font-size: 18px; letter-spacing: 0.04em; }
.mood-bar { height: 8px; margin: 10px 0 8px; background: var(--down); }
.mood-bar i { display: block; height: 100%; background: var(--up); box-shadow: 0 0 12px var(--up); transition: width 0.6s var(--glide); }
.mood-legend { display: flex; justify-content: space-between; font: 600 11.5px var(--f-hud); }

/* activity */
.acts { display: grid; }
.act { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: 0; }
.act-ic { display: grid; place-items: center; flex: none; width: 36px; height: 40px; background: var(--s4); color: var(--text-2); clip-path: var(--hex); }
.act-ic .ic { width: 16px; height: 16px; }
.act-ic.earn, .act-ic.referral, .act-ic.deposit { background: rgba(200, 247, 81, 0.16); color: var(--lime); }
.act-ic.withdraw { background: rgba(255, 74, 110, 0.15); color: var(--down); }
.act-ic.transfer { background: rgba(69, 214, 255, 0.14); color: var(--cyan); }
.act-copy { display: grid; flex: 1; min-width: 0; }
.act-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px var(--f-hud); }
.act-copy small { color: var(--text-3); font-size: 11.5px; }
.act-amt { display: grid; justify-items: end; font: 700 14px var(--f-hud); font-variant-numeric: tabular-nums; }
.act-amt small { color: var(--text-4); font-size: 10px; letter-spacing: 0.08em; }
.st { margin-left: 4px; padding: 1px 7px; background: rgba(255, 255, 255, 0.08); color: var(--text-2); font: 700 9.5px var(--f-hud); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.st-confirmed { background: var(--up-bg); color: var(--up); }
.st-rejected, .st-failed { background: var(--down-bg); color: var(--down); }
.st-requested, .st-approved, .st-submitted, .st-pending { background: rgba(255, 201, 58, 0.14); color: var(--amber); }

/* -------------------------------------------------------------- trade */

.pair-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 0; }
.pair-btn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pair-btn > span { display: grid; text-align: left; }
.pair-btn b { font: 800 26px/1 var(--f-display); letter-spacing: 0.02em; }
.pair-btn b small { color: var(--text-3); font-size: 16px; }
.pair-btn em { color: var(--text-3); font: 500 11.5px var(--f-body); font-style: normal; }
.pair-actions { display: flex; gap: 6px; }
.trade-grid { display: grid; gap: 10px; }
.px-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.px-big { font: 800 38px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.px-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-3); font-size: 12px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; }
.stat-row span { display: grid; gap: 2px; color: var(--text-4); font: 600 10px var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; }
.stat-row b { color: var(--text); font: 700 13px var(--f-hud); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ranges { display: flex; gap: 4px; margin-bottom: 6px; }
.ranges button { flex: 1; min-height: 30px; background: var(--s3); color: var(--text-3); text-align: center; font: 700 11.5px var(--f-hud); letter-spacing: 0.06em; }
.ranges button.is-on { background: var(--lime); color: var(--lime-ink); }
.chart-wrap { position: relative; height: 210px; }
.chart-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 12px; pointer-events: none; }
.range-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-3); font: 600 10.5px var(--f-hud); }
.range-bar div { position: relative; height: 4px; background: linear-gradient(90deg, var(--down), var(--amber), var(--up)); }
.range-bar i { position: absolute; top: -4px; width: 4px; height: 12px; background: #fff; box-shadow: 0 0 8px #fff; transform: translateX(-50%); }
.order-card { display: grid; gap: 12px; }
.avail { display: flex; align-items: center; gap: 8px; color: var(--text-3); font: 600 11px var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; }
.avail b { color: var(--text); font-size: 13px; letter-spacing: 0; }
.pcts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pcts button { min-height: 32px; background: var(--s3); color: var(--text-2); text-align: center; font: 700 12px var(--f-hud); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.pcts button:active { background: var(--lime); color: var(--lime-ink); }
.est { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-3); font-size: 12.5px; }
.est b { color: var(--text); font: 700 14px var(--f-hud); }
.pos { display: grid; }
.pos-row button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.pos-row:last-child button { border-bottom: 0; }
.pos-name { display: grid; flex: 1; }
.pos-name b { font: 700 14.5px var(--f-hud); }
.pos-name small, .pos-val small { color: var(--text-3); font-size: 11.5px; }
.pos-val { display: grid; justify-items: end; }
.pos-val b { font: 700 14px var(--f-hud); }
.alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--text-3); font-size: 12px; }
.facts { display: grid; }
.facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--text-3); font-size: 12.5px; }
.facts dd { text-align: right; font: 700 13px var(--f-hud); word-break: break-word; }
.quote-hero { display: grid; justify-items: center; gap: 6px; padding: 8px 0 14px; text-align: center; }
.quote-hero strong { font: 800 38px/1 var(--f-display); }
.quote-hero strong small { color: var(--text-3); font-size: 20px; }
.quote-hero span { color: var(--text-3); }
.quote-timer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--text-3); font: 600 12px var(--f-hud); }
.quote-timer .ic { width: 14px; height: 14px; }
.quote-timer b { color: var(--lime); }

/* ------------------------------------------------------------- assets */

.acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct > div { display: flex; align-items: center; gap: 10px; }
.acct > div > span { display: grid; }
.acct > div b { font: 700 15px var(--f-hud); }
.acct small { color: var(--text-3); font-size: 11.5px; }
.acct > strong { font: 800 28px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.bals { display: grid; gap: 0; }
.bal { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bal:last-child { border-bottom: 0; }
.bal-main { display: flex; align-items: center; gap: 10px; }
.bal-name { display: grid; flex: 1; }
.bal-name b { font: 700 16px var(--f-hud); }
.bal-name small, .bal-val small { color: var(--text-3); font-size: 11.5px; }
.bal-val { display: grid; justify-items: end; }
.bal-val b { font: 700 16px var(--f-hud); font-variant-numeric: tabular-nums; }
.bal-pnl { display: flex; justify-content: space-between; color: var(--text-3); font-size: 12px; }
.bal-pnl b { font: 700 12.5px var(--f-hud); }
.bal-btns { display: flex; justify-content: flex-end; gap: 6px; }
.dep { display: grid; gap: 12px; justify-items: center; }
.dep > * { width: 100%; }
.dep-net { display: flex; justify-content: center; gap: 6px; }
.qr { display: grid; place-items: center; padding: 10px; background: #fff; justify-self: center; width: auto; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.steps { display: grid; gap: 8px; color: var(--text-2); font-size: 12.5px; }
.steps li { display: flex; gap: 9px; align-items: flex-start; }
.steps .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--lime); }
.route { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; background: var(--s3); font: 700 13px var(--f-hud); }
.route span { display: inline-flex; align-items: center; gap: 7px; }
.route > .ic { color: var(--lime); }
.summary { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px; background: var(--s3); color: var(--text-3); font-size: 12.5px; }
.summary b { color: var(--text); font: 700 13px var(--f-hud); text-align: right; }
.net-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: var(--s3); color: var(--text-2); font: 700 12px var(--f-hud); justify-self: start; }
.net-chip .ic { width: 14px; height: 14px; color: var(--lime); }
.pages-list { display: grid; }
.pages-list button { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); font: 700 14px var(--f-hud); }
.pages-list button .ic:first-child { color: var(--lime); }
.pages-list span { flex: 1; }

/* --------------------------------------------------------------- earn */

.earn-hero { --cut: 16px; display: grid; gap: 14px; padding: 16px; clip-path: var(--chamfer); background: radial-gradient(90% 70% at 0 0, rgba(200, 247, 81, 0.16), transparent 60%), linear-gradient(180deg, #101013, #050506); box-shadow: inset 0 0 0 1px var(--line-2); }
.gauge-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.gauge { --p: 66; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 220deg, var(--lime) calc(var(--p) * 2.7deg), var(--s4) 0 270deg, transparent 0); mask: radial-gradient(circle, transparent 58%, #000 59%); -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%); filter: drop-shadow(0 0 14px rgba(200, 247, 81, 0.45)); }
.gauge-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-in b { font: 800 44px/0.9 var(--f-display); color: var(--lime); }
.gauge-in b small { font-size: 22px; }
.gauge-in em { color: var(--text-3); font: 600 10px var(--f-hud); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; }
.earn-hero-copy { display: grid; gap: 6px; text-align: center; }
.earn-hero-copy h2 { font: 800 25px/1.05 var(--f-display); text-transform: uppercase; }
.earn-hero-copy p { color: var(--text-2); font-size: 12.5px; }
.claim-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; background: rgba(255, 255, 255, 0.045); }
.claim-box.is-ready { background: rgba(200, 247, 81, 0.09); box-shadow: inset 0 0 0 1px rgba(200, 247, 81, 0.4); }
.claim-box small { display: block; color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.claim-box strong { font: 800 26px/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.claim-box strong span { color: var(--text-3); font-size: 13px; font-family: var(--f-hud); }
.claim-box .btn, .claim-box .form-msg { grid-column: 1 / -1; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { --cut: 10px; display: grid; align-content: start; gap: 4px; padding: 12px; clip-path: var(--chamfer); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.tile small { color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.tile strong { font: 800 26px/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.tile-ic { display: grid; place-items: center; width: 34px; height: 38px; margin-bottom: 4px; background: rgba(200, 247, 81, 0.15); color: var(--lime); clip-path: var(--hex); }
.tile-ic.is-cyan { background: rgba(69, 214, 255, 0.15); color: var(--cyan); }
.tile .btn-row { margin-top: 8px; }
.tile .btn { padding: 0 4px; font-size: 10.5px; gap: 4px; letter-spacing: 0.04em; min-width: 0; }
.tile .btn .ic { width: 14px; height: 14px; }
.tile.mini { justify-items: center; text-align: center; }
.tile .big { font: 800 44px/1 var(--f-display); color: var(--lime); }
.tile .big small { font-size: 22px; color: var(--lime); letter-spacing: 0; }
.tile p { color: var(--text-3); font-size: 12px; }
.tile .count { margin-top: 4px; font: 700 20px var(--f-display); }
.tile .count small { font: 600 11px var(--f-hud); color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.stats3 { grid-template-columns: repeat(3, 1fr); }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.calc-out span { display: grid; gap: 3px; padding: 10px 6px; background: var(--s3); text-align: center; }
.calc-out small { color: var(--text-4); font: 600 10px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.calc-out b { color: var(--lime); font: 700 12.5px var(--f-hud); }
.rules { display: grid; gap: 8px; }
.rules article { display: flex; gap: 12px; padding: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.rules .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--lime); }
.rules b { font: 700 13.5px var(--f-hud); }
.rules p { margin-top: 2px; color: var(--text-3); font-size: 12px; }

/* ---------------------------------------------------------- referrals */

.invite { --cut: 14px; display: grid; gap: 10px; padding: 16px; clip-path: var(--chamfer); background: radial-gradient(100% 100% at 0 0, rgba(69, 214, 255, 0.14), transparent 60%), linear-gradient(180deg, var(--s2), var(--s1)); box-shadow: inset 0 0 0 1px var(--line-2); }
.invite-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.invite-code code { font: 800 34px/1 var(--f-display); letter-spacing: 0.1em; color: var(--lime); text-shadow: 0 0 18px rgba(200, 247, 81, 0.4); }
.invite-link { display: block; padding: 10px 12px; overflow: hidden; background: var(--s3); color: var(--text-2); font: 500 12px var(--f-hud); text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ profile */

.profile-hero { --cut: 16px; display: grid; justify-items: center; gap: 8px; padding: 22px 16px 18px; text-align: center; clip-path: var(--chamfer); background: radial-gradient(80% 70% at 50% 0, rgba(200, 247, 81, 0.16), transparent 70%), linear-gradient(180deg, #101013, #050506); box-shadow: inset 0 0 0 1px var(--line-2); }
.profile-hero h1 { font: 800 30px/1 var(--f-display); text-transform: uppercase; }
.profile-hero p { margin-top: -4px; color: var(--text-3); }
.profile-hero .hero-xp { width: 100%; max-width: 360px; margin-top: 8px; }
.profile-badge { filter: drop-shadow(0 0 22px rgba(200, 247, 81, 0.45)); animation: floaty 5s ease-in-out infinite; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting > span { display: flex; align-items: center; gap: 12px; }
.setting > span > span { display: grid; }
.setting b { font: 700 13.5px var(--f-hud); }
.setting small { color: var(--text-3); font-size: 11.5px; }
.setting .ic { color: var(--lime); }
.card .form + .facts { margin-top: 12px; }
.links { padding: 4px 14px; }
.links button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 14px var(--f-hud); }
.links button:last-child { border-bottom: 0; }
.links button span { flex: 1; }
.links .ic:first-child { color: var(--lime); }
.links .ic:last-child { color: var(--text-4); }

/* ------------------------------------------------------------ support */

.chat { display: grid; gap: 10px; }
.chat-head { display: flex; align-items: center; gap: 10px; }
.chat-head > div { display: grid; }
.chat-head b { font: 700 14px var(--f-hud); }
.chat-head small { color: var(--text-3); font-size: 11.5px; }
.bot-ic { display: grid; place-items: center; width: 38px; height: 42px; background: linear-gradient(160deg, var(--cyan), var(--violet)); color: #000; clip-path: var(--hex); }
.chat-log { display: grid; align-content: start; gap: 8px; max-height: 300px; min-height: 140px; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 88%; padding: 9px 12px; font-size: 13px; line-height: 1.45; }
.msg.bot { background: var(--s4); clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.msg.user { justify-self: end; background: var(--lime); color: var(--lime-ink); font-weight: 600; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.msg-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-links button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; background: rgba(255, 255, 255, 0.1); font: 700 11px var(--f-hud); }
.msg-links .ic { width: 12px; height: 12px; }
.msg.typing { display: flex; gap: 4px; width: 56px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: typing 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; }
.msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 50% { transform: translateY(-4px); background: var(--lime); } }
.chat-suggest { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chat-suggest button { flex: none; padding: 6px 10px; background: var(--s3); color: var(--text-2); font: 600 11.5px var(--f-hud); }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; outline: 0; background: var(--s3); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; }
.chat-form input:focus { box-shadow: inset 0 0 0 1.5px var(--lime); }
.faq { display: grid; gap: 6px; }
.faq-item { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; cursor: pointer; list-style: none; font: 700 13.5px var(--f-hud); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { color: var(--text-3); transition: transform 0.2s; }
.faq-item[open] summary .ic { transform: rotate(180deg); color: var(--lime); }
.faq-item p { padding: 0 14px 14px; color: var(--text-2); font-size: 12.5px; }

/* -------------------------------------------------------------- about */

.about-hero { --cut: 18px; display: grid; justify-items: center; gap: 12px; padding: 28px 16px; text-align: center; clip-path: var(--chamfer); background: radial-gradient(70% 60% at 50% 0, rgba(155, 123, 255, 0.22), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(200, 247, 81, 0.12), transparent), linear-gradient(180deg, #0e0e12, #030304); box-shadow: inset 0 0 0 1px var(--line-2); }
.about-hero h1 { font: 800 clamp(34px, 9vw, 52px)/1 var(--f-display); text-transform: uppercase; }
.about-hero h1 span { color: var(--lime); }
.about-hero p { max-width: 460px; color: var(--text-2); }
.pillars { display: grid; gap: 8px; }
.pillars article { --cut: 10px; position: relative; display: grid; gap: 6px; padding: 14px; clip-path: var(--chamfer); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.pillar-n { position: absolute; right: 14px; top: 8px; color: var(--s5); font: 800 38px/1 var(--f-display); }
.pillar-ic { display: grid; place-items: center; width: 36px; height: 40px; background: rgba(200, 247, 81, 0.15); color: var(--lime); clip-path: var(--hex); }
.pillars h3 { font: 800 20px/1 var(--f-display); text-transform: uppercase; }
.pillars p, .status-card p, .disclaimer p { color: var(--text-2); font-size: 12.5px; }

/* -------------------------------------------------------------- admin */

.page.admin { grid-template-columns: minmax(0, 1fr); }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metric { display: grid; gap: 4px; padding: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.metric span { display: flex; align-items: center; gap: 6px; color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; }
.metric span .ic { width: 13px; height: 13px; color: var(--lime); }
.metric strong { font: 800 20px/1.1 var(--f-display); word-break: break-word; }
.admin-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.admin-card { --cut: 10px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; padding: 12px; clip-path: var(--chamfer); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.admin-card small { color: var(--text-3); font-size: 11.5px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-row b { overflow: hidden; text-overflow: ellipsis; font: 700 13.5px var(--f-hud); }
.admin-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; color: var(--text-3); font-size: 12px; }
.admin-kv > :nth-child(even) { justify-self: end; color: var(--text); }
.admin-addr { display: flex; align-items: center; gap: 6px; }
.admin-addr code { flex: 1; min-width: 0; padding: 8px 10px; overflow: hidden; background: var(--s3); font: 500 11.5px var(--f-hud); text-overflow: ellipsis; }
.admin-pages { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-3); font-size: 12px; }
.admin-pages > div { display: flex; gap: 6px; }

/* --------------------------------------------------------------- auth */

.auth { min-height: 100dvh; display: grid; align-content: start; }
.auth-hero { position: relative; display: grid; gap: 14px; padding: calc(14px + var(--safe-t)) 16px 18px; overflow: hidden; background: radial-gradient(70% 55% at 50% 30%, rgba(155, 123, 255, 0.28), transparent 70%), radial-gradient(50% 40% at 90% 100%, rgba(200, 247, 81, 0.14), transparent), #000; }
.auth-hero::before { content: ''; position: absolute; inset: 0; opacity: 0.4; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); pointer-events: none; }
.auth-hero > * { position: relative; }
.auth-top { display: flex; align-items: center; justify-content: space-between; }
.rail-brand { display: inline-flex; align-items: center; gap: 10px; }
.auth-links { display: flex; gap: 14px; }
.auth-links .link-btn { color: var(--text-2); }
.auth-stage { display: grid; justify-items: center; gap: 8px; padding: 6px 0; text-align: center; }
.auth-cube { position: relative; display: grid; place-items: center; }
.auth-cube .ring { position: absolute; inset: 50% auto auto 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border: 1px solid var(--line-2); border-radius: 50%; animation: spin 24s linear infinite; }
.auth-cube .ring::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 12px var(--lime); transform: rotate(45deg); }
.auth-cube .ring.r2 { width: 260px; height: 260px; margin: -130px 0 0 -130px; animation-duration: 36s; animation-direction: reverse; border-style: dashed; }
.auth-cube .ring.r2::after { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.auth-tag { font: 800 24px/1 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; }
.auth-tag b { color: var(--lime); }
.auth-sub { max-width: 320px; color: var(--text-2); font-size: 13px; }
.auth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.auth-stats li { display: grid; gap: 2px; padding: 10px 6px; text-align: center; background: rgba(255, 255, 255, 0.05); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.auth-stats b { color: var(--lime); font: 800 22px/1 var(--f-display); }
.auth-stats span { color: var(--text-3); font: 600 10px var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; }
.auth-card { display: grid; gap: 12px; align-content: start; padding: 18px 16px calc(24px + var(--safe-b)); background: linear-gradient(180deg, #101013, #050506); box-shadow: inset 0 1px 0 var(--line-2); border-radius: 22px 22px 0 0; margin-top: -4px; }
.auth-card h1 { font: 800 30px/1 var(--f-display); text-transform: uppercase; }
.auth-lead { margin-top: -6px; color: var(--text-3); }
.auth-fine { color: var(--text-4); font-size: 11px; line-height: 1.5; }

.loading { display: grid; place-content: center; justify-items: center; gap: 22px; min-height: 100dvh; }
.loading .xp { width: 160px; }
.public { min-height: 100dvh; }
.public-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + var(--safe-t)) 12px 10px; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.public-top nav { display: flex; align-items: center; gap: 12px; }
.public-top .link-btn { color: var(--text-2); }
.public-content { padding-top: 12px; }

/* ----------------------------------------------------------- breakpoints */

@media (min-width: 640px) {
  .content { padding: 8px 20px 30px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 18px; clip-path: none; transform: translateY(30px) scale(0.97); opacity: 0; transition: transform 0.28s var(--glide), opacity 0.22s; }
  .sheet-backdrop.is-open .sheet { opacity: 1; }
  .sheet-grip { display: none; }
  .sheet-backdrop.is-wide { align-items: flex-start; padding-top: 10vh; }
  .sheet-backdrop.is-wide .sheet { min-height: 0; }
}

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); padding-bottom: 0; }
  .tabbar { display: none; }
  .rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 18px; height: 100dvh; padding: 18px 14px; background: #040405; border-right: 1px solid var(--line); }
  .rail-brand { padding: 4px 6px; }
  .rail-nav { display: grid; gap: 4px; }
  .rail-label { margin: 14px 8px 4px; color: var(--text-4); font: 600 10px var(--f-hud); letter-spacing: 0.16em; text-transform: uppercase; }
  .rail-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: var(--text-3); font: 700 13.5px var(--f-hud); letter-spacing: 0.04em; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background 0.2s, color 0.2s; }
  .rail-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
  .rail-item.is-active { background: linear-gradient(90deg, rgba(200, 247, 81, 0.18), rgba(200, 247, 81, 0.04)); color: var(--lime); box-shadow: inset 3px 0 0 var(--lime); }
  .rail-item .nav-ic { display: grid; }
  .rail-rank { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--chamfer); --cut: 10px; }
  .rail-rank > span:last-child { display: grid; flex: 1; min-width: 0; gap: 3px; }
  .rail-rank strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--f-hud); }
  .rail-rank small { color: var(--text-3); font-size: 11px; }
  .topbar { padding: 0 28px; height: 62px; }
  .avatar-btn { display: none; }
  .search-pill { max-width: 420px; flex: 0 1 420px; height: 40px; }
  .search-pill kbd { display: inline-block; }
  .top-live { display: inline-flex; margin-left: auto; }
  .top-deposit, .hide-sm { display: inline-flex; }
  .content { max-width: 1240px; padding: 16px 28px 30px; }
  .foot { display: flex; justify-content: space-between; padding: 14px 28px 22px; color: var(--text-4); font-size: 11.5px; border-top: 1px solid var(--line); }
  .home { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }
  .home > .col { display: grid; gap: 10px; align-content: start; }
  .trade-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); align-items: start; }
  .chart-wrap { height: 340px; }
  .page.markets, .page.earn, .page.referrals, .page.assets, .page.support { max-width: 920px; margin: 0 auto; width: 100%; }
  .earn-hero { grid-template-columns: 170px 1fr 330px; align-items: center; gap: 24px; }
  .earn-hero-copy { text-align: left; }
  .tiles { gap: 10px; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .page.profile, .page.about { max-width: 760px; margin: 0 auto; width: 100%; }
  .toasts { top: 18px; }
}

/* ---- Earn minimum, hero meter, About ---- */
.earn-meter { display: grid; gap: 7px; width: 100%; margin-top: 12px; padding: 9px 11px; text-align: left; background: rgba(255, 255, 255, 0.05); color: var(--text-2); font: 600 12px var(--f-hud); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.earn-meter > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.earn-meter .ic { width: 14px; height: 14px; color: var(--lime); }
.earn-meter b { color: var(--lime); }
.earn-meter .bar { display: block; height: 6px; background: rgba(255, 255, 255, 0.09); }
.earn-meter .bar b { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--lime) 0 9px, var(--lime-lo) 9px 11px); box-shadow: 0 0 12px rgba(200, 247, 81, 0.5); }
.earn-meter.is-active { display: flex; align-items: center; justify-content: space-between; }
.earn-gate { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px; background: rgba(255, 201, 58, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 201, 58, 0.35); }
.earn-gate-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 12.5px var(--f-hud); }
.earn-gate-top span { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); }
.earn-gate-top .ic { width: 15px; height: 15px; }
.earn-gate p { color: var(--text-2); font-size: 12px; }
.claim-strip.is-locked { background: linear-gradient(90deg, rgba(255, 201, 58, 0.1), var(--s2) 70%); }
.claim-strip.is-locked .claim-gem { background: linear-gradient(160deg, #ffe59a, var(--amber)); }
.hexbadge small { display: none; }
.hexbadge.is-sm b { font-size: 18px; }
.about-cta { justify-content: center; width: 100%; max-width: 360px; }
.facts-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.facts-strip div { display: grid; gap: 2px; padding: 14px 10px; text-align: center; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.facts-strip b { color: var(--lime); font: 800 32px/1 var(--f-display); }
.facts-strip span { color: var(--text-3); font: 600 10.5px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.about-sec { display: grid; gap: 10px; }
.about-sec h2 { font: 800 26px/1.05 var(--f-display); text-transform: uppercase; }
.about-sec p { color: var(--text-2); font-size: 13px; }
.eyebrow.warn { color: var(--amber); }
.how { display: grid; gap: 12px; }
.how li { display: flex; gap: 12px; }
.how-n { display: grid; place-items: center; flex: none; width: 34px; height: 38px; background: var(--lime); color: var(--lime-ink); font: 800 20px var(--f-display); clip-path: var(--hex); }
.how b { font: 700 14px var(--f-hud); }
.how p { margin-top: 2px; }
.acct-cards { display: grid; gap: 8px; }
.ticks { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; }
.ticks li { display: flex; gap: 9px; align-items: flex-start; }
.ticks .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--lime); }
.status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.about-end { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center; }
.about-end h2 { font: 800 28px/1 var(--f-display); text-transform: uppercase; }
.about-end p { color: var(--text-3); }
@media (min-width: 640px) { .facts-strip { grid-template-columns: repeat(4, 1fr); } .acct-cards { grid-template-columns: repeat(3, 1fr); } .pillars.safety { grid-template-columns: repeat(3, 1fr); } }

/* ---- Referral card on Home ---- */
.ref-card { display: grid; gap: 10px; background: radial-gradient(90% 100% at 100% 0, rgba(69, 214, 255, 0.12), transparent 60%), linear-gradient(180deg, var(--s2), var(--s1)); }
.ref-card .sec-head { margin-bottom: 0; }
.ref-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ref-top small, .ref-stats small { display: block; color: var(--text-3); font: 600 9.5px var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.ref-top code { display: block; margin-top: 2px; color: var(--lime); font: 800 28px/1 var(--f-display); letter-spacing: 0.1em; text-shadow: 0 0 16px rgba(200, 247, 81, 0.35); }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ref-stats > div { padding: 8px 10px; background: rgba(255, 255, 255, 0.05); }
.ref-stats b { display: block; margin-top: 2px; font: 800 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ref-note { color: var(--text-3); font-size: 12px; }
.ref-card .btn-row { margin-top: 0; }
@media (max-width: 1023px) { .home { grid-template-columns: minmax(0, 1fr); } }