/* TonSurge app. Sizes written as "Nu" are the mockup's own measures on a 393 px wide screen;
   they scale with the screen width, so every phone shows the same proportions as the design. */
@font-face { font-family: "SF Pro Display"; src: url("../fonts/sf-pro-display-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/sf-pro-display-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("../fonts/sf-pro-display-bold.woff") format("woff"); font-weight: 600 700; font-display: swap; }

:root {
  color-scheme: dark;
  --u: calc(min(100vw, 480px) / 393);
  --bg: #000000;
  --bar: #0f0f0f;            /* live activity bar */
  --card: #121212;           /* profile card */
  --tile: #1a1a1a;           /* tiles, list rows, navigation */
  --well: #111111;           /* list background */
  --chip: #2a2a2a;
  --ic: #262626;             /* round icon behind tile icons */
  --blue: #30a1f5;
  --green: #2fd36b;
  --t60: rgba(255, 255, 255, 0.6);
  --t50: rgba(255, 255, 255, 0.5);
  --t40: rgba(255, 255, 255, 0.4);
  --blur: blur(40px) saturate(180%);        /* maximum blur, as asked */
  --blur-sheet: blur(48px) saturate(180%);
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: calc(57 * var(--u));
  --top-h: calc(44.5 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: #fff; font-family: var(--font); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ic { width: 1em; height: 1em; display: block; flex: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- background: pattern waves + light rays ---------- */
.bg-waves { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.bg-waves.on { opacity: 1; }
.bg-rays { position: absolute; left: 0; right: 0; top: 0; height: calc(420 * var(--u)); z-index: 0; pointer-events: none; overflow: hidden; }
.light-rays__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- frame ---------- */
.app { position: relative; z-index: 1; overflow-x: clip; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
.page { position: relative; z-index: 1; padding: calc(17 * var(--u)) calc(14.3 * var(--u)) calc(var(--nav-h) + calc(28 * var(--u)) + env(safe-area-inset-bottom)); }

/* glass: every card is blurred over the moving background (solid colour on weak devices) */
.glass { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* ---------- live activity bar ---------- */
.live {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: var(--top-h); padding-left: calc(5.9 * var(--u)); overflow: hidden;
  background: rgba(15, 15, 15, 0.72);
}
.live-ic { flex: none; width: calc(23.6 * var(--u)); height: calc(23.6 * var(--u)); border-radius: 50%; overflow: hidden; animation: live-pulse 2.4s ease-in-out infinite; }
.live-ic img { width: 100%; height: 100%; object-fit: cover; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(48, 161, 245, 0.55); } 60% { box-shadow: 0 0 0 calc(5 * var(--u)) rgba(48, 161, 245, 0); } }
.live-label { flex: none; margin-left: calc(8.4 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; letter-spacing: 0.02em; }
.live-view {
  position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; margin-left: calc(10 * var(--u)); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(22 * var(--u)), #000 calc(100% - calc(8 * var(--u))), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(22 * var(--u)), #000 calc(100% - calc(8 * var(--u))), transparent);
}
.live-track { display: inline-flex; align-items: center; white-space: nowrap; font-size: calc(12.6 * var(--u)); font-weight: 500; letter-spacing: 0.03em; will-change: transform; }
.live-track .it { display: inline-flex; align-items: center; }
.live-track .it b { font-weight: 500; color: var(--green); margin: 0 0.28em; }
.live-track .sep { margin: 0 0.5em; font-size: 0.9em; }
.live-track.run { animation: live-run var(--dur, 30s) linear infinite; }
@keyframes live-run { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- profile ---------- */
.profile { position: relative; height: calc(77.5 * var(--u)); display: flex; align-items: center; padding-left: calc(14.6 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(18, 18, 18, 0.7); }
.avatar { flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: linear-gradient(145deg, #ff9f43, #7c3aed); color: #fff; font-weight: 600; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile .avatar { width: calc(48.2 * var(--u)); height: calc(48.2 * var(--u)); font-size: calc(17 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.p-txt { min-width: 0; margin-left: calc(16 * var(--u)); padding-top: calc(1 * var(--u)); }
.welcome { margin: 0; font-size: calc(9.4 * var(--u)); color: var(--t60); letter-spacing: 0.01em; }
.name { margin: calc(3.5 * var(--u)) 0 0; font-size: calc(16 * var(--u)); font-weight: 400; letter-spacing: -0.005em; line-height: 1.15; display: flex; flex-wrap: wrap; }
.chips { display: flex; gap: calc(6.8 * var(--u)); margin-top: calc(7 * var(--u)); }
.chip { height: calc(13.4 * var(--u)); display: inline-flex; align-items: center; padding: 0 calc(3.8 * var(--u)); border-radius: 99px; background: var(--chip); font-size: calc(7.8 * var(--u)); letter-spacing: 0.02em; white-space: nowrap; }
.gear { position: absolute; top: calc(6 * var(--u)); right: calc(7.8 * var(--u)); width: calc(20.4 * var(--u)); height: calc(20.4 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: var(--chip); font-size: calc(11.5 * var(--u)); transition: transform 0.35s var(--ease); }
.gear:active { transform: rotate(60deg) scale(0.92); }

/* ---------- tiles ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(15.4 * var(--u)); margin-top: calc(9 * var(--u)); }
.tile { height: calc(47.3 * var(--u)); display: flex; align-items: center; padding-left: calc(5.4 * var(--u)); border-radius: 99px; background: rgba(26, 26, 26, 0.72); min-width: 0; }
.tile-ic { flex: none; width: calc(35.4 * var(--u)); height: calc(35.4 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--ic); font-size: calc(19 * var(--u)); }
.tile-txt { min-width: 0; margin-left: calc(10.2 * var(--u)); }
.tile-label { display: block; font-size: calc(8.6 * var(--u)); color: var(--t60); white-space: nowrap; letter-spacing: 0.01em; }
.tile-val { display: block; margin-top: calc(2 * var(--u)); font-size: calc(17.6 * var(--u)); line-height: 1.12; }
.tile-val > span { display: inline-block; }

/* ---------- referral button ---------- */
.ref-host { margin-top: calc(16.4 * var(--u)); }
.ref-btn { position: relative; width: 100%; height: calc(40 * var(--u)); display: grid; place-items: center; border-radius: 99px; background: var(--blue); font-size: calc(14.2 * var(--u)); letter-spacing: 0.01em; color: #fff; transition: transform 0.18s var(--ease), background 0.2s; }
.ref-btn:active { transform: scale(0.98); }
.ref-btn[data-done="true"] { background: #2b93e0; }

/* ---------- sections, lists ---------- */
.sec-title { margin: calc(18.5 * var(--u)) calc(1.2 * var(--u)) calc(9 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 400; letter-spacing: 0.005em; display: flex; flex-wrap: wrap; }
.list { display: grid; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(6.1 * var(--u)) calc(7.6 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(17, 17, 17, 0.7); }
.row { height: calc(46.4 * var(--u)); display: flex; align-items: center; padding: 0 calc(13 * var(--u)) 0 calc(4.5 * var(--u)); border-radius: calc(11 * var(--u)); background: var(--tile); }
.row-ic { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8.5 * var(--u)); overflow: hidden; }
.row-ic img { width: 100%; height: 100%; }
.row-txt { flex: 1; min-width: 0; margin-left: calc(7.8 * var(--u)); }
.row-title { display: block; font-size: calc(11.9 * var(--u)); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { display: block; margin-top: calc(2.6 * var(--u)); font-size: calc(9 * var(--u)); color: var(--t50); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-amt { flex: none; font-size: calc(15.4 * var(--u)); letter-spacing: 0.01em; }

/* ---------- promo banners ---------- */
.banner { position: relative; height: calc(104.3 * var(--u)); margin-top: calc(19.6 * var(--u)); border-radius: calc(11 * var(--u)); padding: calc(19 * var(--u)) 0 0 calc(14.6 * var(--u)); isolation: isolate; }
.banner + .banner { margin-top: calc(16.3 * var(--u)); }
.banner .art { position: absolute; z-index: 1; pointer-events: none; transform-origin: 60% 60%; }
.banner.blue { background: linear-gradient(180deg, #54bffa 0%, #0097e9 100%); }
.banner.blue .art { right: calc(-14.3 * var(--u)); top: calc(-8.9 * var(--u)); width: calc(128.6 * var(--u)); height: calc(117.9 * var(--u)); animation: float-a 6s ease-in-out infinite; }
.banner.gold { background: linear-gradient(90deg, #e79200 0%, #e99d12 45%, #ecac2b 100%); }
.banner.gold .art { right: calc(-14.3 * var(--u)); top: calc(-11.6 * var(--u)); width: calc(160.8 * var(--u)); height: calc(125 * var(--u)); animation: float-b 7s ease-in-out infinite; }
@keyframes float-a { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(calc(-2.5 * var(--u))) rotate(-1.2deg); } }
@keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-2 * var(--u))); } }
.banner .shine { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.banner .shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-14deg); animation: sweep 5.5s ease-in-out infinite; }
.banner.gold .shine::after { animation-delay: 2.6s; }
@keyframes sweep { 0%, 55% { left: -40%; } 85%, 100% { left: 120%; } }
.b-title { position: relative; z-index: 2; margin: 0; max-width: calc(186 * var(--u)); font-size: calc(13.2 * var(--u)); line-height: 1.17; font-weight: 400; letter-spacing: 0.015em; }
.banner.gold .b-title { font-size: calc(14 * var(--u)); }
.b-text { position: relative; z-index: 2; margin: calc(5 * var(--u)) 0 0; max-width: calc(174 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1.36; letter-spacing: 0.01em; }
.b-btns { position: absolute; z-index: 2; left: calc(9.3 * var(--u)); bottom: calc(10.3 * var(--u)); display: flex; gap: calc(6 * var(--u)); }
.b-btn { height: calc(20.4 * var(--u)); padding: 0 calc(12.5 * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, 0.16); font-size: calc(9.6 * var(--u)); letter-spacing: 0.02em; color: #fff; display: inline-flex; align-items: center; transition: transform 0.18s var(--ease), background 0.2s; }
.banner.blue .b-btn { min-width: calc(66 * var(--u)); justify-content: center; }
.b-btn:active { transform: scale(0.95); background: rgba(0, 0, 0, 0.26); }

/* ---------- bottom navigation (Genesis 95 style: blue icon, white label, line on top) ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 0 calc(6 * var(--u)) env(safe-area-inset-bottom);
  background: rgba(26, 26, 26, 0.78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
@media (min-width: 481px) { .nav { left: 50%; right: auto; width: 480px; margin-left: -240px; } }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: calc(10 * var(--u)); gap: calc(6.6 * var(--u)); color: #62656d; font-size: calc(9.6 * var(--u)); font-weight: 500; letter-spacing: 0.01em; transition: color 0.25s ease; }
.tab .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); transition: color 0.25s ease, transform 0.35s var(--ease); }
.tab:active .ic { transform: scale(0.86); }
.tab[aria-current="page"] { color: #fff; }
.tab[aria-current="page"] .ic { color: var(--blue); }
.nav-ink { position: absolute; top: 0; left: 0; width: calc(28 * var(--u)); height: 2px; margin-left: calc(-14 * var(--u)); border-radius: 0 0 2px 2px; background: var(--blue); box-shadow: 0 0 8px rgba(48, 161, 245, 0.8); transition: transform 0.45s var(--ease); }

/* ---------- skeleton (while data loads) ---------- */
.sk { position: relative; overflow: hidden; color: transparent !important; background: #1b1b1d !important; border-radius: calc(6 * var(--u)); }
.sk * { visibility: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: sk 1.3s ease-in-out infinite; }
@keyframes sk { to { transform: translateX(100%); } }
.sk-line { display: block; height: 0.8em; border-radius: 99px; }
.sk-round { border-radius: 50% !important; }

/* ---------- motion: rise in once ---------- */
.rise { opacity: 0; transform: translateY(calc(14 * var(--u))); }
.rise.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.75s var(--ease); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + calc(16 * var(--u)) + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, calc(10 * var(--u))) scale(0.96); opacity: 0; pointer-events: none; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: 99px; background: rgba(30, 30, 32, 0.78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); font-size: calc(12.5 * var(--u)); white-space: nowrap; transition: opacity 0.25s ease, transform 0.35s var(--ease); }
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- bottom sheet (profile settings) ---------- */
.sheet { position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.3s ease; }
.sheet[hidden] { display: none; }
.sheet.open { opacity: 1; }
.panel {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - var(--nav-h) - 24px); overflow-y: auto; overscroll-behavior: contain; padding: calc(34 * var(--u)) calc(14.3 * var(--u)) calc(22 * var(--u)); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0;
  background: linear-gradient(180deg, rgba(26, 28, 31, 0.82) 0%, rgba(26, 34, 44, 0.84) 55%, rgba(30, 52, 74, 0.88) 100%);
  -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet);
  transform: translateY(100%); transition: transform 0.5s var(--ease); touch-action: pan-y;
}
.sheet.open .panel { transform: none; }
.panel::before { content: ""; position: absolute; top: calc(9 * var(--u)); left: 50%; width: calc(36 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-18 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, 0.18); }
.edit-av { position: relative; width: calc(98 * var(--u)); height: calc(98 * var(--u)); margin: 0 auto; }
.edit-av .avatar { width: 100%; height: 100%; font-size: calc(32 * var(--u)); box-shadow: 0 0 0 calc(4 * var(--u)) var(--blue); }
.cam { position: absolute; right: calc(-6 * var(--u)); bottom: 0; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue); font-size: calc(13 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.35); transition: transform 0.2s var(--ease); }
.cam:active { transform: scale(0.9); }
.field { display: flex; align-items: center; height: calc(49 * var(--u)); margin-top: calc(21 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px; background: rgba(48, 120, 180, 0.16); }
.field span { flex: none; font-size: calc(13.4 * var(--u)); color: var(--t60); }
.field input { flex: 1; min-width: 0; height: 100%; margin-left: calc(12 * var(--u)); border: 0; outline: 0; background: none; color: #fff; text-align: right; font: inherit; font-size: calc(13.4 * var(--u)); }
.field input::placeholder { color: var(--t40); }
.save { width: 100%; height: calc(38 * var(--u)); margin-top: calc(9 * var(--u)); border-radius: 99px; background: var(--blue); font-size: calc(16.5 * var(--u)); color: #fff; transition: transform 0.18s var(--ease), opacity 0.2s; }
.save:active { transform: scale(0.98); }
.save:disabled { opacity: 0.6; }

/* specular button frame (shared with the Genesis 95 site) */
.sb-host { position: relative; display: grid; isolation: isolate; min-width: 0; }
.sb-host > button, .sb-host > a { position: relative; z-index: 1; margin: 0; width: 100%; }
.sb-host > .specular-button__light { position: absolute; inset: -24px; z-index: 2; display: block; width: calc(100% + 48px); height: calc(100% + 48px); pointer-events: none; }
.b-btns .sb-host > a, .b-btns .sb-host > button { width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .rise { opacity: 1; transform: none; }
}

/* ================= app shell: views ================= */
.view { display: none; }
/* "backwards", not "both": a finished page animation must not stay attached, or Chrome on phones stops the cards from blurring what is behind them */
/* no fade on the page itself: an animating page would switch off the cards' blur until it ends.
   Each block fades in on its own instead (app.js enterView), so the frosted look is there from frame one. */
.view.on { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } to { opacity: 1; transform: none; } }
html[data-fx="2"] .view.on { animation-duration: 0.2s; }
.v-head { text-align: center; padding-top: calc(7 * var(--u)); }
.v-title { margin: 0; font-size: calc(33 * var(--u)); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; display: inline-flex; flex-wrap: wrap; justify-content: center; }
.v-sub { margin: calc(7 * var(--u)) 0 0; font-size: calc(15 * var(--u)); color: #858585; letter-spacing: 0.03em; }
body[data-view="insights"] { background: #0a0a0a; }
.btn-blue { display: grid; place-items: center; width: 100%; height: calc(40 * var(--u)); border-radius: 99px; background: var(--blue); color: #fff; font-size: calc(15 * var(--u)); transition: transform 0.18s var(--ease), opacity 0.2s; }
.btn-blue:active { transform: scale(0.98); }
.btn-blue:disabled { opacity: 0.55; }
.btn-ghost { display: grid; place-items: center; width: 100%; height: calc(40 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: calc(14 * var(--u)); transition: transform 0.18s var(--ease); }
.btn-ghost:active { transform: scale(0.98); }

/* ---------- Insights ---------- */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)) calc(6.5 * var(--u)); margin: calc(27 * var(--u)) calc(2.7 * var(--u)) 0; }
.stat { height: calc(84 * var(--u)); padding: calc(15 * var(--u)) 0 0 calc(13 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(17, 17, 17, 0.72); min-width: 0; }
.stat-label { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(10.6 * var(--u)); color: #888; letter-spacing: 0.01em; white-space: nowrap; }
.stat-label .ic { width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: #fff; }
.stat-val { display: block; margin-top: calc(17 * var(--u)); font-size: calc(21.5 * var(--u)); letter-spacing: 0.005em; }
.lb-title { margin: calc(26 * var(--u)) calc(2.7 * var(--u)) 0; font-size: calc(20.5 * var(--u)); font-weight: 500; letter-spacing: 0.005em; display: flex; flex-wrap: wrap; }
.board { margin: calc(17 * var(--u)) calc(2.7 * var(--u)) 0; padding: calc(9 * var(--u)) calc(7 * var(--u)) calc(9 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(17, 17, 17, 0.72); }
.podium { position: relative; height: calc(194 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; background: #1a1a1a; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding: 0 calc(8 * var(--u)); }
.pod { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pod .avatar { width: calc(40 * var(--u)); height: calc(40 * var(--u)); font-size: calc(15 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.pod.p1 .avatar { width: calc(54 * var(--u)); height: calc(54 * var(--u)); font-size: calc(19 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) #fff; }
.pod-name { margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--u)); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-bar { width: calc(66 * var(--u)); margin-top: calc(8 * var(--u)); border-radius: calc(9 * var(--u)) calc(9 * var(--u)) 0 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(11 * var(--u)); transform-origin: bottom; }
.pod-bar b { font-size: calc(20 * var(--u)); font-weight: 500; }
.pod-bar small { margin-top: auto; margin-bottom: calc(9 * var(--u)); font-size: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.75); }
.p1 .pod-bar { height: calc(96 * var(--u)); background: linear-gradient(180deg, #6ccbfe 0%, #31a1f5 100%); }
.p2 .pod-bar { height: calc(67 * var(--u)); background: linear-gradient(180deg, #6b6b6b 0%, #3b3b3b 100%); }
.p3 .pod-bar { height: calc(67 * var(--u)); background: linear-gradient(180deg, #7a4a2c 0%, #4a2a16 100%); }
.board.in .pod-bar { animation: grow 0.9s var(--ease) both; }
.board.in .p2 .pod-bar { animation-delay: 0.08s; } .board.in .p3 .pod-bar { animation-delay: 0.16s; }
@keyframes grow { from { transform: scaleY(0.1); opacity: 0; } to { transform: none; opacity: 1; } }
.pod-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--t50); font-size: calc(12 * var(--u)); }
.lb-list { display: grid; gap: calc(12.4 * var(--u)); margin-top: calc(18 * var(--u)); }
.lb-row { height: calc(49.3 * var(--u)); display: flex; align-items: center; padding: 0 calc(13 * var(--u)) 0 calc(6 * var(--u)); border-radius: calc(14 * var(--u)); background: #1a1a1a; }
.lb-row .avatar { width: calc(37 * var(--u)); height: calc(37 * var(--u)); font-size: calc(13 * var(--u)); }
.lb-txt { flex: 1; min-width: 0; margin-left: calc(9 * var(--u)); }
.lb-name { display: block; font-size: calc(13 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { display: block; margin-top: calc(2 * var(--u)); font-size: calc(8.4 * var(--u)); color: var(--t60); }
.lb-num { text-align: right; flex: none; }
.lb-num b { display: block; font-size: calc(16.5 * var(--u)); font-weight: 400; }
.lb-num small { display: block; font-size: calc(8.4 * var(--u)); color: var(--t60); }
.you { height: calc(52.5 * var(--u)); margin: calc(12 * var(--u)) calc(2.7 * var(--u)) 0; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(17 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, #3b3b3b 0%, #5f5f5f 100%); font-size: calc(16 * var(--u)); letter-spacing: 0.02em; }
.you b { font-weight: 500; }
.logo-av { background: var(--blue) !important; }
.logo-av img { width: 62% !important; height: 62% !important; object-fit: contain !important; }
.pod.p1 .logo-av { background: #000 !important; }

/* ---------- Network ---------- */
.search { display: block; width: 100%; height: calc(28.4 * var(--u)); margin-top: calc(26 * var(--u)); padding: 0 calc(16 * var(--u)); border: 0; border-radius: 99px; background: rgba(26, 26, 26, 0.78); color: #fff; text-align: center; font: inherit; font-size: calc(9.6 * var(--u)); outline: none; -webkit-appearance: none; appearance: none; }
.search::placeholder { color: #8d8d8d; }
.chips-row { margin: calc(3 * var(--u)) calc(-14.3 * var(--u)) 0; padding: 0 0 0 calc(4 * var(--u)); overflow-x: auto; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.jelly-radio { --jr-ease-out: cubic-bezier(0.23, 1, 0.32, 1); display: inline-flex; align-items: center; gap: var(--jr-gap); padding: var(--jr-pad-y) var(--jr-pad-x); user-select: none; -webkit-user-select: none; }
.jelly-radio__chip { position: relative; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; outline: none; transform-origin: 50% 50%; touch-action: manipulation; }
.jelly-radio__chip:focus-visible .jelly-radio__skin { outline: 2px solid var(--blue); outline-offset: 2px; }
.jelly-radio__skin { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--jr-h); padding: 0 var(--jr-px); border-radius: var(--jr-radius); overflow: hidden; background: var(--jr-chip); color: var(--jr-text); font-size: var(--jr-font); font-weight: 400; line-height: 1; white-space: nowrap; transition: transform 160ms var(--jr-ease-out), background-color 200ms ease, color 200ms ease; }
.jelly-radio__chip:active .jelly-radio__skin { transform: scale(0.97); }
.jelly-radio__chip[data-on="true"] .jelly-radio__skin { background: var(--jr-active); color: var(--jr-active-text); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4.6 * var(--u)); margin-top: calc(16 * var(--u)); }
.trio .stat { height: calc(72 * var(--u)); padding: calc(13 * var(--u)) 0 0 calc(11 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, rgba(26, 26, 26, 0.8), rgba(19, 19, 19, 0.8)); }
.trio .stat-val { margin-top: calc(15 * var(--u)); font-size: calc(21.5 * var(--u)); }
.members { display: grid; gap: calc(9.8 * var(--u)); margin-top: calc(15.6 * var(--u)); }
.member { height: calc(49.1 * var(--u)); display: flex; align-items: center; padding: 0 calc(13 * var(--u)) 0 calc(6.5 * var(--u)); border-radius: calc(13 * var(--u)); background: rgba(26, 26, 26, 0.78); }
.member .avatar { width: calc(34 * var(--u)); height: calc(34 * var(--u)); font-size: calc(12 * var(--u)); }
.m-txt { flex: 1; min-width: 0; margin-left: calc(9 * var(--u)); }
.m-name { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap; }
.m-name .g95 { font-size: calc(7.4 * var(--u)); padding: calc(1.5 * var(--u)) calc(5 * var(--u)); border-radius: 99px; background: rgba(48, 161, 245, 0.2); color: #9fd3ff; }
.m-meta { display: block; margin-top: calc(2.6 * var(--u)); font-size: calc(8 * var(--u)); color: var(--t60); letter-spacing: 0.01em; }
.m-num { flex: none; text-align: right; }
.m-num b { display: block; font-size: calc(16.5 * var(--u)); font-weight: 400; }
.m-num small { display: block; font-size: calc(8 * var(--u)); color: var(--t60); }
.more-btn { display: grid; place-items: center; width: calc(170 * var(--u)); height: calc(25.7 * var(--u)); margin: calc(10.7 * var(--u)) auto 0; border-radius: 99px; background: rgba(26, 26, 26, 0.78); color: #9a9a9a; font-size: calc(10.6 * var(--u)); transition: transform 0.18s var(--ease); }
.more-btn:active { transform: scale(0.97); }
.more-btn[hidden] { display: none; }
.empty { padding: calc(26 * var(--u)) calc(10 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); color: var(--t50); }
.invites { margin-top: calc(19 * var(--u)); padding: calc(19 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(18 * var(--u)); background: linear-gradient(100deg, rgba(58, 58, 58, 0.86) 0%, rgba(100, 100, 100, 0.86) 100%); }
.invites h2 { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0 0 calc(17 * var(--u)) calc(8 * var(--u)); font-size: calc(20.5 * var(--u)); font-weight: 400; }
.invites h2 .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.inv-row { display: flex; justify-content: space-between; padding: calc(4.5 * var(--u)) calc(8 * var(--u)); font-size: calc(11.2 * var(--u)); color: rgba(255, 255, 255, 0.55); letter-spacing: 0.03em; }
.inv-row b { font-weight: 400; color: #fff; }
.inv-btn { display: grid; place-items: center; width: 100%; height: calc(32 * var(--u)); margin-top: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(0, 0, 0, 0.28); color: #fff; font-size: calc(16 * var(--u)); letter-spacing: 0.02em; transition: transform 0.18s var(--ease), background 0.2s; }
.inv-btn:active { transform: scale(0.98); background: rgba(0, 0, 0, 0.38); }

/* ---------- Support ---------- */
body[data-view="support"] .page { padding-left: 0; padding-right: 0; }
.sup { min-height: calc(100dvh - var(--top-h) - var(--nav-h)); margin-top: calc(16 * var(--u)); padding: calc(22 * var(--u)) calc(17.8 * var(--u)) calc(30 * var(--u)); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0; background: rgba(18, 18, 18, 0.74); -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet); }
.sup-h { margin: 0; font-size: calc(22 * var(--u)); font-weight: 400; letter-spacing: 0.01em; display: flex; flex-wrap: wrap; }
.sup-s { margin: calc(6 * var(--u)) 0 0; font-size: calc(13.5 * var(--u)); color: #8a8a8a; letter-spacing: 0.03em; }
.sup-sec + .sup-sec { margin-top: calc(38 * var(--u)); }
.docs { display: grid; gap: calc(18.6 * var(--u)); margin-top: calc(30 * var(--u)); }
.doc { height: calc(51 * var(--u)); display: flex; align-items: center; padding: 0 calc(11 * var(--u)) 0 calc(15 * var(--u)); border-radius: calc(14 * var(--u)); background: #0d0d0d; }
.doc .pdf { flex: none; width: calc(19.6 * var(--u)); height: calc(22 * var(--u)); }
.doc > span:not(.dl) { flex: 1; margin-left: calc(11 * var(--u)); font-size: calc(17 * var(--u)); letter-spacing: 0.03em; }
.dl { flex: none; width: calc(28.5 * var(--u)); height: calc(28.5 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; transition: transform 0.2s var(--ease); }
.dl .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.doc:active .dl { transform: translateY(calc(2 * var(--u))) scale(0.94); }
.guides { display: grid; gap: calc(14 * var(--u)); margin-top: calc(30 * var(--u)); }
.guide { padding: calc(16 * var(--u)) calc(13 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #0d0d0d; }
.guide b { display: block; font-size: calc(14.5 * var(--u)); font-weight: 400; letter-spacing: 0.03em; }
.guide p { margin: calc(8 * var(--u)) 0 0; font-size: calc(9.6 * var(--u)); line-height: 1.5; color: #9b9b9b; letter-spacing: 0.02em; }
.faq { margin-top: calc(26 * var(--u)); padding: calc(6 * var(--u)) calc(13 * var(--u)); border-radius: calc(14 * var(--u)); background: #141414; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) 0; font-size: calc(13.5 * var(--u)); color: #9d9d9d; letter-spacing: 0.03em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: calc(16 * var(--u)); color: #6d6d6d; transition: transform 0.3s var(--ease); }
.faq details[open] summary { color: #fff; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { overflow: hidden; }
.faq .ans p { margin: 0 0 calc(12 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.55; color: #a8a8a8; }

/* ---------- registration sheet (Genesis 95 "place bid" slide) ---------- */
.reg .panel, .funds .panel { padding-top: calc(30 * var(--u)); }
.reg-title { margin: 0 0 calc(4 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 500; letter-spacing: -0.01em; }
.reg-sub { margin: 0 0 calc(16 * var(--u)); font-size: calc(12 * var(--u)); color: var(--t60); line-height: 1.45; }
.box { border-radius: calc(20 * var(--u)); background: rgba(0, 0, 0, 0.32); }
.box-row { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); }
.box-row + .box-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.box-ic { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(11 * var(--u)); display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-size: calc(17 * var(--u)); overflow: hidden; }
.box-ic .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.box-ic.av { border-radius: 50%; background: var(--blue); }
.box-ic.av img { width: 62%; height: 62%; object-fit: contain; }
.box-ic.av.photo img { width: 100%; height: 100%; object-fit: cover; }
.box-txt { flex: 1; min-width: 0; }
.box-txt small { display: block; font-size: calc(10.5 * var(--u)); color: var(--t50); }
.box-txt b { display: block; margin-top: calc(2 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link { flex: none; font-size: calc(12.5 * var(--u)); color: var(--t60); padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(6 * var(--u)); }
.link.blue { color: var(--blue); }
.note-blue { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0 calc(10 * var(--u)) calc(12 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(48, 161, 245, 0.12); color: #a9d8ff; font-size: calc(11.5 * var(--u)); line-height: 1.4; }
.note-blue .dot { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: calc(12 * var(--u)); font-weight: 600; }
.up-edit { display: none; gap: calc(8 * var(--u)); padding: 0 calc(14 * var(--u)) calc(13 * var(--u)); }
.up-edit.on { display: flex; }
.up-edit input { flex: 1; min-width: 0; height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: calc(13 * var(--u)); outline: none; }
.up-edit button { flex: none; height: calc(36 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px; background: var(--blue); color: #fff; font-size: calc(13 * var(--u)); }
.total { margin-top: calc(12 * var(--u)); padding: calc(15 * var(--u)) calc(14 * var(--u)); }
.total-top { display: flex; align-items: flex-start; justify-content: space-between; }
.total-top small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(11 * var(--u)); color: var(--t50); }
.total-top b { font-size: calc(16 * var(--u)); font-weight: 400; }
.total-amt { text-align: right; font-size: calc(30 * var(--u)); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.total-amt span { margin-left: calc(4 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 400; color: var(--t60); letter-spacing: 0; }
.fee-line { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(11 * var(--u)); color: var(--t60); line-height: 1.35; }
.fee-line img { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; }
.reg-btn { margin-top: calc(14 * var(--u)); height: calc(46 * var(--u)); font-size: calc(17 * var(--u)); }
.reg-foot { margin: calc(10 * var(--u)) 0 0; text-align: center; font-size: calc(11 * var(--u)); color: var(--t50); }
.reg-foot button { color: var(--blue); font-size: inherit; }
.steps { display: flex; gap: calc(6 * var(--u)); margin: 0 0 calc(16 * var(--u)); }
.steps i { flex: 1; height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; }
.steps i.on::after { content: ""; position: absolute; inset: 0; background: var(--blue); animation: fill 0.6s var(--ease) both; transform-origin: left; }
@keyframes fill { from { transform: scaleX(0); } to { transform: none; } }
.wait { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
.spin { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid rgba(48, 161, 245, 0.2); border-top-color: var(--blue); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wait b { margin-top: calc(16 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 500; }
.wait p { margin: calc(6 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: var(--t60); line-height: 1.45; max-width: calc(290 * var(--u)); }
.done-ic { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; animation: pop 0.6s var(--ease) both; }
.done-ic .ic { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }
.x { position: absolute; top: calc(22 * var(--u)); right: calc(16 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; }
.x .ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.need { display: flex; align-items: center; justify-content: space-between; padding: calc(15 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255, 90, 90, 0.1); margin-top: calc(8 * var(--u)); font-size: calc(13 * var(--u)); }
.need.ok { background: rgba(47, 211, 107, 0.1); }
.need > span:first-child { font-size: calc(15 * var(--u)); }
.need em { font-style: normal; color: var(--t60); }
.need b { font-weight: 500; color: #fff; }
.need .have { color: #ff7b7b; }
.need.ok .have { color: var(--green); }
.how { margin-top: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(0, 0, 0, 0.3); }
.how ol { margin: 0; padding-left: calc(18 * var(--u)); font-size: calc(12 * var(--u)); color: var(--t60); line-height: 1.5; }
.how li { margin-top: calc(9 * var(--u)); }
.how li.warn { color: #ff8a8a; }
.addr { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(7 * var(--u)); }
.addr code { flex: 1; min-width: 0; padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: calc(11 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr button { flex: none; color: var(--blue); font-size: calc(12 * var(--u)); }
.funds-txt { margin: calc(12 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: var(--t60); line-height: 1.5; }
.err { margin: calc(10 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: #ff8a8a; text-align: center; min-height: 1em; }

/* =====================================================================================
   LAYERING + SPACING CORRECTION (10 Nov)
   background -> pattern waves -> dark veil + blur -> frosted cards -> content
   Same colours, fonts, corners and components; only translucency, blur and spacing change.
   ===================================================================================== */
:root {
  /* frosted glass: translucent enough that the blurred background glows through, like the settings sheet */
  --glass-strong: linear-gradient(180deg, rgba(30, 32, 38, 0.52) 0%, rgba(18, 20, 26, 0.6) 100%);
  --glass-mid: linear-gradient(180deg, rgba(32, 34, 40, 0.5) 0%, rgba(20, 22, 28, 0.58) 100%);
  --glass-row: rgba(38, 40, 46, 0.42);
  --blur-strong: blur(42px) saturate(160%);
  --blur-mid: blur(36px) saturate(160%);
  --blur-soft: blur(24px) saturate(160%);
  --gap-sec: calc(28 * var(--u));              /* space between page sections */
}
/* the background (waves + rays) stays exactly as it is: no veil, no blur on it. Only the cards frost what is behind them. */

/* frosted cards: strong on big containers, medium on tiles and rows */
.live { background: rgba(15, 15, 17, 0.62); -webkit-backdrop-filter: var(--blur-mid); backdrop-filter: var(--blur-mid); }
.profile, .list, .board, .invites, .sup { -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }
.profile { background: var(--glass-strong); }
.list { background: var(--glass-strong); }
.board { background: var(--glass-strong); }
.sup { background: linear-gradient(180deg, rgba(26, 28, 33, 0.55) 0%, rgba(14, 15, 19, 0.62) 100%); }
.tile, .stat, .search, .member, .more-btn { -webkit-backdrop-filter: var(--blur-mid); backdrop-filter: var(--blur-mid); }
.tile { background: var(--glass-mid); }
.stat { background: var(--glass-mid); }
.trio .stat { background: var(--glass-mid); }
.search { background: var(--glass-mid); }
.member { background: var(--glass-row); }
.more-btn { background: var(--glass-mid); }
.row { background: var(--glass-row); }
.lb-row { background: var(--glass-row); }
.jelly-radio__chip[data-on="false"] .jelly-radio__skin { -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft); }
.invites { background: linear-gradient(100deg, rgba(58, 58, 62, 0.62) 0%, rgba(100, 100, 104, 0.6) 100%); }
.doc, .guide { background: rgba(0, 0, 0, 0.3); }
.faq { background: rgba(0, 0, 0, 0.24); }
/* the blue referral button keeps its blue; a soft glass sheen on top */
.ref-btn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), var(--blue); }
/* banners: same artwork, a little separated from the moving background */
.banner { box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, 0.9); }
/* weak devices: no live blur, solid versions of the same colours */

/* ---------- spacing: calmer vertical rhythm ---------- */
.page { padding-top: calc(20 * var(--u)); }
.duo { margin-top: calc(12 * var(--u)); }
.ref-host { margin-top: calc(18 * var(--u)); }
.sec-title { margin: var(--gap-sec) calc(1.2 * var(--u)) calc(12 * var(--u)); }
.list { gap: calc(7 * var(--u)); padding: calc(9 * var(--u)) calc(7 * var(--u)); }
.banner { margin-top: var(--gap-sec); }
.banner + .banner { margin-top: calc(16 * var(--u)); }
.v-head { padding-top: calc(10 * var(--u)); }
.v-sub { margin-top: calc(9 * var(--u)); }
.quad { margin-top: calc(30 * var(--u)); gap: calc(10 * var(--u)) calc(8 * var(--u)); }
.lb-title { margin-top: calc(34 * var(--u)); }
.board { margin-top: calc(14 * var(--u)); }
.you { margin-top: calc(16 * var(--u)); }
.search { margin-top: calc(30 * var(--u)); }
.chips-row { margin-top: calc(8 * var(--u)); }
.trio { margin-top: calc(18 * var(--u)); gap: calc(6 * var(--u)); }
.members { margin-top: calc(20 * var(--u)); }
.more-btn { margin-top: calc(16 * var(--u)); }
.invites { margin-top: var(--gap-sec); padding: calc(22 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
.sup { padding: calc(28 * var(--u)) calc(17.8 * var(--u)) calc(36 * var(--u)); }
.sup-sec + .sup-sec { margin-top: calc(44 * var(--u)); }
.docs, .guides { margin-top: calc(24 * var(--u)); }
.faq { margin-top: calc(24 * var(--u)); }

/* ---------- registration slide: same component, roomier grouping ---------- */
.reg .panel, .funds .panel { padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(26 * var(--u)); }
.steps { gap: calc(7 * var(--u)); margin: calc(6 * var(--u)) 0 calc(26 * var(--u)); }
.steps i { height: calc(3.5 * var(--u)); }
.reg-title { margin: 0; font-size: calc(26 * var(--u)); }
.reg-sub { margin: calc(8 * var(--u)) 0 calc(26 * var(--u)); font-size: calc(13 * var(--u)); }
.box { padding: calc(6 * var(--u)) 0; border-radius: calc(22 * var(--u)); background: rgba(255, 255, 255, 0.055); }
.box-row { gap: calc(13 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.box-row + .box-row { border-top: 0; }
.box-ic { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.box-ic.wal { border-radius: 50%; background: var(--blue); color: #fff; }
.box-ic.wal .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.box-txt small { font-size: calc(11 * var(--u)); }
.box-txt b { margin-top: calc(3 * var(--u)); font-size: calc(15 * var(--u)); }
.note-blue { margin: calc(6 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); justify-content: center; text-align: center; border-radius: calc(16 * var(--u)); }
.total { margin-top: calc(18 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)); }
.total-amt { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(34 * var(--u)); }
.total-amt img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; }
.fee-line { margin-top: calc(26 * var(--u)); }
.reg-btn { margin-top: calc(22 * var(--u)); height: calc(50 * var(--u)); }
.wait { padding: calc(18 * var(--u)) 0 calc(10 * var(--u)); }
.funds .reg-sub { margin-bottom: calc(20 * var(--u)); }
.need { margin-top: calc(10 * var(--u)); }

/* ---------- profile settings: disconnect ---------- */
.disc { width: 100%; height: calc(38 * var(--u)); margin-top: calc(10 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.78); font-size: calc(14.5 * var(--u)); transition: transform 0.18s var(--ease), background 0.2s; }
.disc:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.11); }

/* Slow phones: the waves stop moving (see fx.js) but the frosted blur stays, so cards always look the same. */

/* rows inside an already frosted container: lighter tint, no second blur */
.list .row, .board .lb-row { -webkit-backdrop-filter: none; backdrop-filter: none; }
.podium { background: rgba(255, 255, 255, 0.05); }


/* ===================================================================== UI kit (kit.js) */
/* GlareHover: light streak over the banners (clipped to the banner, artwork may still overflow) */
.glare-hover__glare { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; opacity: 0; mix-blend-mode: var(--gh-blend); pointer-events: none; }
.glare-hover__band { position: absolute; top: 50%; left: 50%; background: var(--gh-glare); will-change: transform; }
.glare-hover__rim { position: absolute; inset: 0; padding: 1px; border-radius: inherit; -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-clip: content-box, border-box; mask-composite: exclude; }
.glare-hover__band--rim { background: var(--gh-rim); }

/* Counter: rolling digits */
.counter { position: relative; display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.tile-val > .counter, .stat-val > .counter { display: inline-flex; }
.counter__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.counter__row { display: inline-flex; align-items: baseline; margin: 0 calc(var(--counter-gap, 0px) / -2); user-select: none; -webkit-user-select: none; }
.counter__affix, .counter__digit, .counter__symbol { margin: 0 calc(var(--counter-gap, 0px) / 2 * var(--counter-shown, 1)); opacity: var(--counter-shown, 1); }
.counter__affix { white-space: pre; }
.counter__digit { position: relative; display: inline-block; box-sizing: content-box; line-height: calc(1em + var(--counter-padding, 0px)); text-align: center; }
.counter__sizer { visibility: hidden; }
.counter__window { position: absolute; top: calc(var(--counter-fade, 0em) * -1); right: 0; bottom: calc(var(--counter-fade, 0em) * -1); left: 0; overflow: hidden; pointer-events: none; }
.counter__strip { position: absolute; inset: 0; }
.counter__numeral { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.counter__symbol { position: relative; display: inline-flex; justify-content: center; clip-path: inset(-0.5em 0); }
.counter__symbol-text { display: inline-block; white-space: pre; }
.counter__blur { position: absolute; width: 0; height: 0; overflow: hidden; }
.counter__measure { position: absolute; top: 0; left: 0; height: 0; overflow: hidden; white-space: nowrap; visibility: hidden; pointer-events: none; }
.counter__measure > span { display: inline-block; }

/* Stepper: bars indicator + step transition in the registration sheet */
.stepper__bars { display: flex; gap: calc(6 * var(--u)); margin: calc(6 * var(--u)) 0 calc(26 * var(--u)); }
.stepper__bar { display: flex; flex: 1; align-items: center; height: calc(10 * var(--u)); }
.stepper__bar-track { position: relative; width: 100%; height: calc(3.5 * var(--u)); overflow: hidden; border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, 0.1); }
.stepper__bar-fill { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform 560ms linear(0, 0.0603, 0.2033, 0.3821, 0.5633, 0.7258, 0.8584, 0.9574, 1.0242, 1.0634, 1.0809, 1.0828, 1.0747, 1.0613, 1.046, 1.0313, 1.0186, 1.0085, 1.0012, 0.9965, 0.994, 0.9931, 0.9933, 0.9941, 0.9953, 0.9966, 0.9978, 0.9988, 1); }
.stepper__bar-fill[data-filled] { transform: none; }
#reg-body { position: relative; }
#reg-body.stepper--moving { overflow: hidden; }
.stepper__pane { outline: none; }
.stepper__pane--leaving { position: absolute; top: 0; right: 0; left: 0; pointer-events: none; }

/* AnimatedBeam: "your structure" card on the Network page */
.beam { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(118 * var(--u)); margin-top: calc(24 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }
.beam-svg { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.bn { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); min-width: 0; text-align: center; }
.bn .avatar { width: calc(40 * var(--u)); height: calc(40 * var(--u)); font-size: calc(13 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(10, 12, 16, 0.9); }
.bn-me .avatar { width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: calc(18 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) var(--blue), 0 0 calc(22 * var(--u)) rgba(48, 161, 245, 0.45); }
.bn b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(10.5 * var(--u)); font-weight: 500; }
.bn small { font-size: calc(8.4 * var(--u)); color: var(--t60); white-space: nowrap; }
.bn-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.bn-dir { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.bn-dir .avatar { width: calc(26 * var(--u)); height: calc(26 * var(--u)); font-size: calc(9 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) rgba(10, 12, 16, 0.9); }
.bn-dir .avatar.bn-empty { background: rgba(255, 255, 255, 0.07); color: var(--t40); font-size: calc(12 * var(--u)); font-weight: 400; }
.bn-col > small { font-size: calc(8.4 * var(--u)); color: var(--t60); white-space: nowrap; }

/* RotatingText (blue banner: the last words change) */
.text-rotate { position: relative; display: inline-flex; flex-wrap: wrap; white-space: pre-wrap; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.text-rotate-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.text-rotate-block { display: inline-flex; flex-wrap: wrap; }
.text-rotate-word { display: inline-flex; }
.text-rotate-element { display: inline-block; }
.text-rotate-space { white-space: pre; }

/* ShinyText */
.shiny-text { position: relative; display: inline-block; background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shiny-text__glow { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; filter: blur(0.14em); pointer-events: none; user-select: none; }

/* GradientText (page titles) */
.gradient-text__content { background-image: var(--gt-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* AvatarCircles (Invitations) */
.inv-people { display: flex; align-items: center; justify-content: space-between; margin: calc(-6 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)); }
.inv-people small { font-size: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.55); letter-spacing: 0.03em; }
.avatar-circles { display: flex; }
.avatar-circles .avatar, .avatar-circles__more { width: calc(28 * var(--u)); height: calc(28 * var(--u)); font-size: calc(9.5 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) #3b3b3e; }
.avatar-circles > * + * { margin-left: calc(-9 * var(--u)); }
.avatar-circles__more { display: grid; place-items: center; border-radius: 50%; background: #0b0b0c; color: #fff; font-weight: 500; }

/* AnimatedCircularProgressBar (Main: next milestone) */
.goal { display: flex; align-items: center; gap: calc(13 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }
.goal-ring { position: relative; flex: none; width: calc(52 * var(--u)); height: calc(52 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; }
.acp__svg { display: block; width: 100%; height: 100%; }
.acp__bg { --offset-factor-secondary: calc(1 - var(--offset-factor)); stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference); transform: rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1); transition: all var(--transition-length) ease var(--delay); transform-origin: calc(var(--circle-size) / 2) calc(var(--circle-size) / 2); }
.acp__fg { stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference); transition: var(--transition-length) ease var(--delay), stroke var(--transition-length) ease var(--delay); transition-property: stroke-dasharray, transform; transform: rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg))); transform-origin: calc(var(--circle-size) / 2) calc(var(--circle-size) / 2); }
.acp__value { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; animation: acp-in var(--transition-length) linear var(--delay) both; }
.acp__value::after { content: "%"; font-size: 0.7em; font-weight: 500; opacity: 0.6; }
@keyframes acp-in { from { opacity: 0; } to { opacity: 1; } }
.goal-txt { display: flex; flex-direction: column; min-width: 0; }
.goal-label { font-size: calc(8.6 * var(--u)); color: var(--t60); letter-spacing: 0.01em; }
.goal-title { margin-top: calc(2 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; }
.goal-sub { margin-top: calc(2 * var(--u)); font-size: calc(9.4 * var(--u)); color: var(--t60); }
#rot2 { color: rgba(255, 255, 255, 0.9); }

/* ===================================================================== v12: Option B banners, calmer background, readability */
/* background a little calmer (still visible) */
.bg-waves.on { opacity: 0.72; }

/* banners: frosted glass like the other cards, with a soft colour glow behind the artwork */
.banner.blue, .banner.gold { box-shadow: none; -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }
.banner.blue { background: radial-gradient(90% 120% at 88% 40%, rgba(48, 161, 245, 0.42) 0%, rgba(48, 161, 245, 0) 60%), linear-gradient(180deg, rgba(30, 32, 38, 0.55) 0%, rgba(18, 20, 26, 0.62) 100%); }
.banner.gold { background: radial-gradient(90% 120% at 88% 40%, rgba(255, 190, 60, 0.30) 0%, rgba(255, 190, 60, 0) 60%), linear-gradient(180deg, rgba(30, 32, 38, 0.55) 0%, rgba(18, 20, 26, 0.62) 100%); }
.banner .b-btn { background: var(--blue); }
.banner .b-btn:active { background: #2390e0; }
.banner .b-text { color: rgba(255, 255, 255, 0.72); }

/* rewards: not live yet */
.row-lock { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(21 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 99px; background: rgba(48, 161, 245, 0.14); color: #9fd3ff; font-size: calc(9.4 * var(--u)); letter-spacing: 0.02em; white-space: nowrap; }
.row-lock svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }

/* readability: the smallest texts one step bigger */
.chip { height: calc(15 * var(--u)); padding: 0 calc(5 * var(--u)); font-size: calc(8.8 * var(--u)); }
.tile-label { font-size: calc(9.4 * var(--u)); }
.row-sub { font-size: calc(9.6 * var(--u)); }
.m-meta { font-size: calc(9 * var(--u)); }
.m-name .g95 { font-size: calc(8 * var(--u)); }
.lb-sub, .lb-num small { font-size: calc(9 * var(--u)); }
.goal-label { font-size: calc(9.4 * var(--u)); }
.bn small, .bn-col > small { font-size: calc(9 * var(--u)); }
.welcome { font-size: calc(10 * var(--u)); }

/* live activity: names + time */
.live-track .it b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.live-track .ago { margin-left: 0.4em; font-size: 0.82em; font-weight: 400; color: var(--t50, rgba(255, 255, 255, 0.5)); }

/* official links (Support) */
.links { display: grid; gap: calc(10 * var(--u)); margin-top: calc(24 * var(--u)); }
.lnk { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(0, 0, 0, 0.3); transition: transform 0.18s var(--ease); }
.lnk:active { transform: scale(0.98); }
.lnk-ic { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; }
.lnk-ic svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.lnk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lnk-txt b { font-size: calc(13.5 * var(--u)); font-weight: 500; }
.lnk-txt small { margin-top: calc(2 * var(--u)); font-size: calc(9.6 * var(--u)); color: var(--t60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnk-go { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--t60); }

/* invite sheet: QR + share */
.share .panel { padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(26 * var(--u)); text-align: center; }
.qr-card { position: relative; width: calc(196 * var(--u)); height: calc(196 * var(--u)); margin: calc(4 * var(--u)) auto 0; padding: calc(12 * var(--u)); border-radius: calc(22 * var(--u)); background: #fff; box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(48, 161, 245, 0.7); }
.qr-card canvas { display: block; width: 100%; height: 100%; }
.qr-logo { position: absolute; left: 50%; top: 50%; width: calc(38 * var(--u)); height: calc(38 * var(--u)); margin: calc(-19 * var(--u)) 0 0 calc(-19 * var(--u)); padding: calc(6 * var(--u)); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 calc(4 * var(--u)) #fff; }
.share-link { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(40 * var(--u)); margin-top: calc(18 * var(--u)); padding: 0 calc(5 * var(--u)) 0 calc(14 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.share-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: calc(11.5 * var(--u)); color: rgba(255, 255, 255, 0.85); }
.share-link button { flex: none; height: calc(30 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px; background: var(--blue); color: #fff; font-size: calc(11.5 * var(--u)); }
.share-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); margin-top: calc(18 * var(--u)); }
.share-btn { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); font-size: calc(9.6 * var(--u)); color: rgba(255, 255, 255, 0.8); transition: transform 0.18s var(--ease); }
.share-btn:active { transform: scale(0.94); }
.sh-ic { width: calc(44 * var(--u)); height: calc(44 * var(--u)); display: grid; place-items: center; border-radius: 50%; color: #fff; }
.sh-ic svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.sh-ic.tg { background: #2aa3e6; } .sh-ic.wa { background: #22b35e; } .sh-ic.xx { background: #1b1b1d; } .sh-ic.sv { background: rgba(255, 255, 255, 0.12); }

/* ===================================================================== v13 */
/* live bar: "User 01 joined 1 min ago" */
.live-track .it { gap: 0.3em; }

/* leaderboard: prize zone (ranks 4–10) */
.lb-prize { flex: none; margin-left: calc(8 * var(--u)); height: calc(18 * var(--u)); padding: 0 calc(7 * var(--u)); display: inline-flex; align-items: center; border-radius: 99px; background: rgba(48, 161, 245, 0.16); color: #9fd3ff; font-size: calc(8.6 * var(--u)); font-weight: 600; letter-spacing: 0.04em; }

/* contest rules sheet */
.contest .panel { padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(26 * var(--u)); }
.prizes { display: grid; gap: calc(7 * var(--u)); margin-top: calc(4 * var(--u)); }
.prize { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(50 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.prize .medal { flex: none; min-width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(6 * var(--u)); display: grid; place-items: center; border-radius: 99px; font-size: calc(12 * var(--u)); font-weight: 700; color: #1a1205; }
.prize.p1 { height: calc(62 * var(--u)); background: radial-gradient(90% 140% at 90% 50%, rgba(255, 190, 60, 0.28), rgba(255, 190, 60, 0) 70%), rgba(255, 255, 255, 0.06); }
.prize.p1 .medal { background: linear-gradient(180deg, #ffe27a, #e9a316); }
.prize.p2 .medal { background: linear-gradient(180deg, #f1f4f8, #aeb7c2); }
.prize.p3 .medal { background: linear-gradient(180deg, #f3c39a, #b8743d); }
.prize.pr .medal { background: rgba(48, 161, 245, 0.2); color: #9fd3ff; font-size: calc(10 * var(--u)); }
.pz-txt { display: flex; flex-direction: column; min-width: 0; }
.pz-txt b { font-size: calc(13 * var(--u)); font-weight: 500; }
.pz-txt small { margin-top: calc(2 * var(--u)); font-size: calc(9.6 * var(--u)); color: var(--t60); }
.prize.p1 img { position: absolute; right: calc(-6 * var(--u)); top: 50%; width: calc(74 * var(--u)); transform: translateY(-50%); pointer-events: none; }
.rules-h { margin: calc(20 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; }
.rules { margin: 0; padding: 0 0 0 calc(18 * var(--u)); display: grid; gap: calc(7 * var(--u)); font-size: calc(11.2 * var(--u)); line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.contest .reg-btn { margin-top: calc(20 * var(--u)); }
.contest .btn-ghost { text-decoration: none; }

/* first visit slides */
.onb { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: calc(calc(16 * var(--u)) + env(safe-area-inset-top)) calc(18 * var(--u)) calc(calc(22 * var(--u)) + env(safe-area-inset-bottom)); background: radial-gradient(120% 70% at 50% 0%, rgba(48, 161, 245, 0.22), rgba(48, 161, 245, 0) 60%), rgba(6, 7, 10, 0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; transition: opacity 0.35s ease; }
.onb.on { opacity: 1; }
.onb[hidden] { display: none; }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); }
.lang-mini { display: flex; gap: calc(4 * var(--u)); padding: calc(3 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
.lang-mini button { height: calc(24 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: 99px; font-size: calc(9.6 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.lang-mini button.on { background: #fff; color: #000; }
.onb-skip { font-size: calc(12 * var(--u)); color: rgba(255, 255, 255, 0.65); padding: calc(6 * var(--u)) calc(4 * var(--u)); }
.onb-view { flex: 1; overflow: hidden; margin: 0 calc(-18 * var(--u)); }
.onb-track { display: flex; height: 100%; transition: transform 0.5s var(--ease); touch-action: pan-y; }
.onb-slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(26 * var(--u)); text-align: center; }
.onb-art { width: calc(210 * var(--u)); height: calc(190 * var(--u)); display: grid; place-items: center; margin-bottom: calc(26 * var(--u)); }
.onb-art img { max-width: 100%; max-height: 100%; animation: float-a 6s ease-in-out infinite; }
.onb-art.a1 img { width: calc(130 * var(--u)); height: calc(130 * var(--u)); border-radius: 50%; box-shadow: 0 0 calc(60 * var(--u)) rgba(48, 161, 245, 0.55); }
.onb-slide h2 { margin: 0; font-size: calc(26 * var(--u)); font-weight: 600; letter-spacing: -0.01em; }
.onb-slide p { margin: calc(12 * var(--u)) 0 0; max-width: calc(300 * var(--u)); font-size: calc(13.4 * var(--u)); line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.onb-dots { display: flex; justify-content: center; gap: calc(6 * var(--u)); margin: calc(10 * var(--u)) 0 calc(18 * var(--u)); }
.onb-dots i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.22); transition: width 0.35s var(--ease), background 0.3s; }
.onb-dots i.on { width: calc(22 * var(--u)); background: var(--blue); }
.onb-next { height: calc(48 * var(--u)); font-size: calc(15 * var(--u)); }

/* language picker */
.lang-pick { position: relative; margin-top: calc(12 * var(--u)); text-align: start; }
.sup > .lang-pick { margin: 0 0 calc(26 * var(--u)); }
.lp-btn { width: 100%; height: calc(46 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.07); color: #fff; font-size: calc(13.4 * var(--u)); }
.lp-btn > svg:first-child { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.lp-name { flex: 1; text-align: start; }
.lp-code { font-size: calc(11.5 * var(--u)); color: var(--t60); }
.lp-car { width: calc(16 * var(--u)); height: calc(16 * var(--u)); transform: rotate(180deg); transition: transform 0.3s var(--ease); }
.lang-pick.open .lp-car { transform: none; }
.lp-list { display: grid; gap: calc(4 * var(--u)); max-height: 0; overflow: hidden; margin-top: 0; padding: 0 calc(6 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(255, 255, 255, 0.05); transition: max-height 0.4s var(--ease), margin 0.3s, padding 0.3s; }
.lang-pick.open .lp-list { max-height: calc(320 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(6 * var(--u)); }
.lp-opt { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(16 * var(--u)); color: #fff; font-size: calc(13.4 * var(--u)); text-align: start; }
.lp-opt.on { background: rgba(255, 255, 255, 0.07); }
.lp-badge { flex: none; min-width: calc(34 * var(--u)); height: calc(26 * var(--u)); display: grid; place-items: center; border-radius: calc(9 * var(--u)); background: rgba(255, 255, 255, 0.08); font-size: calc(10.4 * var(--u)); font-weight: 600; }
.lp-opt.on .lp-badge { background: #fff; color: #000; }
.lp-nm { flex: 1; }
.lp-ok { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--blue); }

/* right-to-left (Urdu, Arabic) */
[dir="rtl"] .banner { padding: calc(19 * var(--u)) calc(14.6 * var(--u)) 0 0; }
[dir="rtl"] .banner .art { right: auto; left: calc(-14.3 * var(--u)); }
[dir="rtl"] .b-btns { left: auto; right: calc(9.3 * var(--u)); }
[dir="rtl"] .banner .b-title, [dir="rtl"] .banner .b-text { margin-left: auto; }
[dir="rtl"] .gear { right: auto; left: calc(7.8 * var(--u)); }
[dir="rtl"] .x { right: auto; left: calc(16 * var(--u)); }
[dir="rtl"] .live-view { direction: ltr; }
[dir="rtl"] .live-track { direction: rtl; }
[dir="rtl"] .rules { padding: 0 calc(18 * var(--u)) 0 0; }
[dir="rtl"] .prize.p1 img { right: auto; left: calc(-6 * var(--u)); }
[dir="rtl"] .lnk-go, [dir="rtl"] .lp-car { transform: scaleX(-1); }
[dir="rtl"] .lb-prize { margin-left: 0; margin-right: calc(8 * var(--u)); }
[dir="rtl"] .num, [dir="rtl"] .chip, [dir="rtl"] .share-link span { unicode-bidi: plaintext; }
/* Latin names and server texts keep their own direction inside an Arabic/Urdu page */
[dir="rtl"] .name, [dir="rtl"] .lb-name, [dir="rtl"] .m-name, [dir="rtl"] .pod-name, [dir="rtl"] .bn b, [dir="rtl"] .row-title, [dir="rtl"] .row-sub, [dir="rtl"] .doc > span:not(.dl), [dir="rtl"] .guide, [dir="rtl"] details { unicode-bidi: plaintext; }
.lp-nm { text-align: left; }
[dir="rtl"] .lp-nm { text-align: right; }

/* ===================================================================== v14 */
/* background: softly blurred and a little dimmer, so it sits behind the interface */
.bg-waves canvas { filter: blur(10px) saturate(115%); transform: scale(1.08); }
.bg-waves.on { opacity: 0.78; }

/* sheets: the official dark theme, no blue tint or glow */
.sheet { background: rgba(0, 0, 0, 0.62); }
.panel { background: linear-gradient(180deg, rgba(24, 24, 27, 0.94) 0%, rgba(15, 15, 17, 0.96) 100%); }
.qr-card { box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) calc(-20 * var(--u)) rgba(0, 0, 0, 0.8); }
.prize.p1 { background: rgba(255, 255, 255, 0.07); }
.prize.pr .medal { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* profile chips, icon circles and the settings button stand out in the brand blue */
.chip { background: rgba(48, 161, 245, 0.18); color: #fff; }
.tile-ic { background: rgba(48, 161, 245, 0.18); color: #7cc4ff; }
.gear { background: rgba(48, 161, 245, 0.18); color: #7cc4ff; }

/* "your structure" beam card (now under search + filters), in the official dark/blue look */
.beam { margin-top: calc(16 * var(--u)); }
.bn .avatar { box-shadow: 0 0 0 calc(3 * var(--u)) #111114; }
.bn-up .avatar.logo-av, .bn-me .avatar.logo-av { background: #000 !important; }
.bn-me .avatar { box-shadow: 0 0 0 calc(3 * var(--u)) var(--blue); }
.bn-dir .avatar { background: #1c1c20 !important; color: #fff; box-shadow: 0 0 0 calc(2.5 * var(--u)) #111114; }
.bn-dir .avatar.bn-empty { background: #16161a !important; color: rgba(255, 255, 255, 0.35); }

/* ---------- v15: SF Pro Display Medium on headings and figures ---------- */
.name, .b-title, .banner.gold .b-title, .row-title, .row-amt,
.trio .stat-val, .stat-label, .stat-val, .you, .you b, .lb-num b, .pod-bar b, .m-num b,
.sup-h, .guide b, .invites h2, .sec-title, .lv-n b, .lv-total b { font-weight: 500; }
.stat-label { color: #9a9a9f; }

/* ---------- v15: banner colour theme (slate glass + teal buttons, like the design) ---------- */
.banner.blue, .banner.gold, .banner.g95 {
  box-shadow: none; -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  background: linear-gradient(180deg, rgba(112, 130, 152, 0.34) 0%, rgba(70, 84, 102, 0.40) 100%);
}
.banner.g95 { position: relative; height: calc(104.3 * var(--u)); border-radius: calc(11 * var(--u)); padding: calc(19 * var(--u)) 0 0 calc(14.6 * var(--u)); isolation: isolate; margin-top: calc(16 * var(--u)); }
.banner .b-title { color: #fff; }
.banner .b-text { color: rgba(255, 255, 255, 0.78); }
.banner .b-btn { background: linear-gradient(180deg, #62d7ec 0%, #2fb7d6 100%); color: #fff; text-shadow: 0 1px 1px rgba(0, 60, 80, 0.25); }
.banner .b-btn:active { background: linear-gradient(180deg, #4fc8df 0%, #239fbd 100%); }
.banner.blue .art { right: calc(-10 * var(--u)); top: calc(-12 * var(--u)); width: calc(122 * var(--u)); height: auto; }
.banner.gold .art { right: calc(-12 * var(--u)); top: calc(-9 * var(--u)); width: calc(150 * var(--u)); height: auto; }
.banner.g95 .art { right: calc(-4 * var(--u)); top: calc(-3 * var(--u)); width: calc(96 * var(--u)); height: auto; animation: float-g 6.5s ease-in-out infinite; }
@keyframes float-g { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(6.5deg) translateY(calc(-2.5 * var(--u))); } }
.banner.g95 .b-title { font-size: calc(14 * var(--u)); max-width: calc(170 * var(--u)); }
.banner.g95 .b-text { max-width: calc(160 * var(--u)); }
[dir="rtl"] .banner.g95 .art { right: auto; left: calc(-6 * var(--u)); }

/* ---------- v15: team levels L1–L8 ---------- */
.levels { margin-top: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--glass-mid); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }
.lv-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--u)); }
.lv-head h3 { margin: 0; font-size: calc(14 * var(--u)); font-weight: 500; }
.lv-head small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(9.4 * var(--u)); color: var(--t50); }
.lv-total { text-align: right; font-size: calc(9.4 * var(--u)); color: var(--t50); white-space: nowrap; }
.lv-total b { display: block; font-size: calc(18 * var(--u)); color: #fff; }
.lv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
.lv-n { position: relative; overflow: hidden; padding: calc(8 * var(--u)) 0 calc(7 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, 0.05); text-align: center; }
.lv-n small { display: block; font-size: calc(8.6 * var(--u)); color: var(--t50); letter-spacing: 0.04em; }
.lv-n b { display: block; margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); }
.lv-n i { position: absolute; left: 0; bottom: 0; height: calc(2 * var(--u)); background: linear-gradient(90deg, #30a1f5, #62d7ec); border-radius: calc(2 * var(--u)); transition: width 0.6s var(--ease); }
.lv-n.zero b { color: var(--t40); }

/* ---------- v15: public member card ---------- */
.mem-top { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }
.mem-top .avatar { width: calc(52 * var(--u)); height: calc(52 * var(--u)); font-size: calc(18 * var(--u)); }
.mem-top .reg-title { margin: 0; }
.mem-id { display: block; margin-top: calc(2 * var(--u)); font-size: calc(11 * var(--u)); color: var(--t50); }
.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); margin: calc(18 * var(--u)) 0 calc(16 * var(--u)); }
.mem-grid > div { padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, 0.05); min-width: 0; }
.mem-grid small { display: block; font-size: calc(9 * var(--u)); color: var(--t50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-grid b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mem-join[hidden] { display: none; }