/* =====================================================================
   Poppins — self-hosted, no external Google Fonts request.
   Files in assets/fonts/. Two subsets per weight (latin + latin-ext)
   split by unicode-range so the browser only downloads what a page needs.
   Chinese text falls back to the system CJK stack declared in --font.
   ===================================================================== */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-ext-400.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-ext-500.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-ext-600.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-ext-700.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

/* =====================================================================
   Community DApp — mobile theme
   Dark teal glass · mint-cyan CTAs · Poppins · generous spacing
   Component class names are stable; app.js targets them.
   ===================================================================== */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1614;
  /* deep teal-black base            */
  --bg2: #0d1e1b;
  /* card-well / raised base         */
  --glow: #5fe6d4;
  /* cyan light bloom                */
  --card: rgba(255, 255, 255, .045);
  /* glassy panel                    */
  --card-solid: #12211f;
  /* opaque panel where blur is off  */
  --card-raise: rgba(255, 255, 255, .07);
  /* raised glass surface (cards over any bg) */
  --ink: #eaf6f2;
  --muted: #93aca6;
  --faint: #5f7a73;
  --border: rgba(255, 255, 255, .09);
  --chip: rgba(255, 255, 255, .06);
  --chip-ink: #bcd4ce;
  --accent: #8ceadb;
  /* bright mint-cyan CTA            */
  --accent-2: #67dcc8;
  /* CTA gradient end               */
  --accent-ink: #8ceadb;
  /* links / accents on dark        */
  --on-accent: #06231f;
  /* text on the bright CTA         */
  --accent-soft: rgba(140, 234, 219, .14);
  --green: #57e0a0;
  --green-soft: rgba(87, 224, 160, .15);
  --amber: #f2b072;
  --amber-soft: rgba(242, 176, 114, .15);
  --lime: #d6f26e;
  /* referral promo accent          */
  --red: #ff7a7a;
  --red-soft: rgba(255, 122, 122, .15);
  --bar-rel: #5fe6d4;
  --bar-spon: #57e0a0;
  --bar-team: #d2c25f;                  /* V/A ladder income, third arc */
  --bar-rest: rgba(255, 255, 255, .08);
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --shadow-cta: 0 10px 26px rgba(103, 220, 200, .28);
  --tab: rgba(16, 30, 28, .72);
  --blur: blur(7px);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent
}

/* Mobile browsers "boost" text they judge too small inside a scrolling
   container, which made the wallet balances jump a size on tap. The app
   sets its own type scale and auto-fits the balances, so opt out. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}

html,
body {
  margin: 0;
  height: 100%
}

body {
  background: var(--bg2);
  color: var(--ink);
  font: 14px/1.5 var(--font);
  letter-spacing: .005em;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

b,
strong {
  font-weight: 600
}

.m {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums
}

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em
}

/* Both Chinese variants show the .zh span. zh-Hant's text is converted
   from it at render time (see hant.js), so the markup carries one Chinese
   copy rather than two that can drift apart. */
html[data-lang="zh"] .en,
html[data-lang="zh-Hant"] .en {
  display: none
}

html:not([data-lang="zh"]):not([data-lang="zh-Hant"]) .zh {
  display: none
}

/* ---------- phone shell ---------- */
#phone {
  width: 100%;
  max-width: 700px;
  height: 100dvh;
  max-height: 100dvh;
  background:
    radial-gradient(120% 55% at 85% -6%, color-mix(in srgb, var(--glow) 34%, transparent) 0%, transparent 46%),
    radial-gradient(90% 40% at 12% 4%, color-mix(in srgb, var(--glow) 12%, transparent) 0%, transparent 40%),
    var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.statusbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto
}

.statusbar .sb-r {
  display: flex;
  gap: 6px;
  align-items: center;
  opacity: .9
}

.appbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  /* lives inside <main> so it scrolls away with the page;
     main supplies the 18px side padding */
  padding: 14px 0 14px;
  position: relative;
  z-index: 5
}

.appbar .title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  flex: 1 1 auto;
  min-width: 0
}

.appbar .sub {
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 400;
  margin-top: 1px
}

.iconbtn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
}

.iconbtn:active {
  transform: scale(.93)
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  flex: 0 0 auto;
  cursor: pointer;
  text-decoration: none;
}

main {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 26px;
  scroll-behavior: smooth;
  /* Some pages scroll and some do not. Without a reserved gutter the
     scrollbar appears and disappears as you move between them, shifting
     every page sideways - which reads as the content "jumping" on each
     tab press. Overlay scrollbars ignore this; classic ones need it. */
  scrollbar-gutter: stable;
  /* Held back until app.js has filled the lists and the webfont has
     landed - see FIRST PAINT in app.js. Opacity only, so the page still
     lays out underneath and nothing reflows when it appears. The
     animation is a fail-safe: if the script never runs, the content
     shows anyway rather than staying invisible. */
  opacity: 0;
  animation: forcereveal 0s linear 1.5s forwards;
}

html.ready main {
  opacity: 1;
  animation: none;
  transition: opacity .14s ease
}

@keyframes forcereveal {
  to { opacity: 1 }
}

main::-webkit-scrollbar {
  width: 0
}

/* Empty space held at the end of the page while a filter is on, so that
   shrinking the list cannot pull the scroll position out from under the
   member. app.js sizes it and gives it back as they scroll up. */
.holdspace {
  width: 100%;
  pointer-events: none
}

/* ---------- generic ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.card+.card {
  margin-top: 12px
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint)
}

.sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 26px 4px 14px
}

.sechead h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  letter-spacing: -.01em
}

.sechead a {
  font-size: 12px;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer
}

.muted {
  color: var(--muted)
}

.faint {
  color: var(--faint)
}

.tiny {
  font-size: 11.5px
}

.row {
  display: flex;
  align-items: center;
  gap: 10px
}

.grow {
  flex: 1 1 auto;
  min-width: 0
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 14px -16px
}

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  letter-spacing: .01em
}

.pill.live {
  background: var(--green-soft);
  color: var(--green)
}

.pill.tbc {
  background: var(--amber-soft);
  color: var(--amber)
}

.pill.soon {
  background: var(--chip);
  color: var(--chip-ink)
}

.pill.hot {
  background: var(--accent-soft);
  color: var(--accent-ink)
}

.pill.stop {
  background: var(--red-soft);
  color: var(--red)
}

.btn {
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border-radius: 999px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-cta);
  letter-spacing: .01em;
  text-decoration: none;
}

.btn:active {
  transform: scale(.985)
}

.btn.ghost {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur)
}

.btn.soft {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: none
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none
}

.btn.sm {
  padding: 9px 14px;
  font-size: 12.5px;
  width: auto;
  display: inline-block
}

.seg {
  display: flex;
  background: var(--chip);
  border-radius: 999px;
  padding: 4px;
  gap: 3px
}

.seg button {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap
}

/* The active segment used a raised panel colour plus a drop shadow, which
   read as the tab jumping forward on tap. It is a flat tinted pill now:
   the colour carries the state, nothing lifts or appears to grow. */
.seg button.on {
  background: #3b7971;
  color: #fff;
  box-shadow: none
}

.note {
  border-left: 2px solid var(--amber);
  background: var(--amber-soft);
  border-radius: 0 12px 12px 0;
  padding: 10px 13px;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.55
}

input[type=number],
input[type=text] {
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

input::placeholder {
  color: var(--faint)
}

input[type=range] {
  width: 100%;
  accent-color: var(--accent)
}

button:focus-visible,
input:focus-visible,
a:focus-visible,
.tap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

/* ---------- login ---------- */
/* The logo carries its own sphere, lighting and colour, so the tile that
   used to hold a flat glyph is gone: no gradient plate, no cyan glow, and
   a box sized to the image so it cannot ride over the wordmark below. */
.brandmark {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 8px auto 18px;
}

.brandmark svg {
  width: 36px;
  height: 36px
}

.logintitle {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0
}

.loginsub {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin: 8px auto 22px;
  max-width: 31ch;
  line-height: 1.6
}

.wrow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  cursor: pointer;
  margin-bottom: 9px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur)
}

.wrow:active {
  transform: scale(.99)
}

.wrow.busy {
  border-color: var(--accent)
}

.wlogo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: 0 0 auto
}

.wname {
  font-weight: 600;
  font-size: 14px
}

.wmeta {
  font-size: 11px;
  color: var(--faint)
}

.wrow .spin {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none
}

.wrow.busy .spin {
  display: block
}

.wrow.busy .chev {
  display: none
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.chev {
  color: var(--faint);
  font-size: 16px
}

.checkrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 16px 4px
}

.checkrow input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--accent)
}

/* ---------- balance hero ---------- */
.hero {
  background:
    radial-gradient(130% 80% at 88% 0%, color-mix(in srgb, var(--glow) 20%, transparent), transparent 55%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.balrow {
  display: flex;
  align-items: flex-end;
  gap: 8px
}

.balnum {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.balcur {
  font-size: 13px;
  color: var(--faint);
  font-weight: 600;
  padding-bottom: 5px
}

.walletchips {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
  margin-top: 16px
}

.wchip {
  background: var(--card-raise);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 11px
}

.wchip .wl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  gap: 3px;
  align-items: center
}

.wchip .wv {
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums
}

.wchip .wu {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px
}

.wchip.lock {
  border-color: color-mix(in srgb, var(--amber) 55%, transparent)
}

.wchip.coin {
  border-color: color-mix(in srgb, var(--green) 55%, transparent)
}

.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 14px
}

.quick.quick-3 {
  grid-template-columns: repeat(3, 1fr)
}

.quick.quick-2 {
  grid-template-columns: repeat(2, 1fr)
}

.qa {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 11px 4px;
  text-align: center;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted)
}

.qa .qi {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 5px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 16px
}

.qa:active {
  transform: scale(.96)
}

/* referral promo (lime accent, from the reference) */
.promo {
  position: relative;
  border-radius: var(--r-lg);
  padding: 16px;
  margin-top: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 16%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent);
  /* these cards sit over the dashboard video like every other card, so
     they frost the same way - without this the figure reads straight
     through the copy */
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.promo h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600
}

.promo p {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--muted)
}

.promo .btn {
  width: auto;
  display: inline-block;
  padding: 10px 20px
}

.promo .spark {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime), transparent 68%);
  opacity: .35
}

/* ---------- cap ring (signature) ---------- */
.capcard {
  display: flex;
  gap: 16px;
  align-items: center
}

.ring {
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  position: relative
}

.ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%
}

.ring circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round
}

.ring .trk {
  stroke: var(--bar-rest)
}

.ring .rel {
  stroke: var(--bar-rel);
  transition: stroke-dasharray .5s ease
}

.ring .spo {
  stroke: var(--bar-spon);
  transition: stroke-dasharray .5s ease
}

.ring .team {
  stroke: var(--bar-team);
  transition: stroke-dasharray .5s ease
}

.ringtxt {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center
}

.ringtxt .rp {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em
}

.ringtxt .rl {
  font-size: 9px;
  color: var(--faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0
}

.kv .k {
  color: var(--muted)
}

.kv .v {
  font-weight: 600;
  font-variant-numeric: tabular-nums
}

.legend {
  display: flex;
  gap: 14px;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 10px;
  flex-wrap: wrap
}

.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px
}

/* today's rate strip */
.ratebar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px
}

.ratebar .rn {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums
}

.spark2 {
  flex: 1 1 auto;
  height: 30px
}

/* ---------- packages ---------- */
.pkg {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 9px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur)
}

.pkg:active {
  transform: scale(.99)
}

.pkg .mult {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  background: var(--accent-soft);
  color: var(--accent-ink)
}

.pkg.x4 .mult {
  background: var(--amber-soft);
  color: var(--amber)
}

.pkg .pn {
  font-weight: 600;
  font-size: 14px
}

.pkg .pm {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px
}

.pkg .pp {
  font-weight: 700;
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums
}

.pkg .pc {
  font-size: 10px;
  color: var(--faint);
  text-align: right
}

/* ---------- transactions ---------- */
.tx {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.tx:last-child {
  border-bottom: 0
}

.txi {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: 0 0 auto;
  background: var(--chip)
}

.txi.rel {
  background: var(--accent-soft);
  color: var(--accent-ink)
}

.txi.spon {
  background: var(--green-soft);
  color: var(--green)
}

.txi.dep {
  background: var(--chip);
  color: var(--chip-ink)
}

.txi.out {
  background: var(--amber-soft);
  color: var(--amber)
}

.txt {
  font-weight: 500;
  font-size: 13px
}

.txm {
  font-size: 11px;
  color: var(--faint);
  margin-top: 1px
}

.txv {
  font-weight: 600;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.txv.pos {
  color: var(--green)
}

.txs {
  font-size: 10.5px;
  color: var(--faint);
  text-align: right
}

/* ---------- community ---------- */
.rankstrip {
  display: flex;
  gap: 7px;
  margin: 0 0 20px
}

.rk {
  flex: 1 1 0;
  text-align: center;
  background: var(--chip);
  color: var(--chip-ink);
  border-radius: 10px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums
}

.rk.done {
  background: var(--accent-soft);
  color: var(--accent-ink)
}

.rk.cur {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent)
}

.bar {
  height: 8px;
  border-radius: 5px;
  background: var(--bar-rest);
  overflow: hidden;
  margin: 9px 0 0
}

.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 5px;
  transition: width .4s ease
}

.bar i.g {
  background: var(--bar-spon)
}

.stat3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
  text-align: center
}

.stat3 .s {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 4px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur)
}

.stat3 .sv {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em
}

.stat3 .sl {
  font-size: 10px;
  color: var(--faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 3px
}

.member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border)
}

.member:last-child {
  border-bottom: 0
}

.mav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--chip-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto
}

.mav.act {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: var(--on-accent)
}

.mn {
  font-weight: 500;
  font-size: 13px;
  font-family: var(--mono)
}

.mm {
  font-size: 11px;
  color: var(--faint);
  margin-top: 1px
}

.tree {
  margin-left: 6px;
  border-left: 1.5px dashed var(--border);
  padding-left: 14px
}

.tnode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 12px;
  position: relative
}

.tnode::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--border)
}

.lvlbadge {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--chip);
  color: var(--chip-ink);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 600
}

/* ---------- companies ---------- */
.co {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 11px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.cohead {
  display: flex;
  gap: 12px;
  align-items: center
}

.colog {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  flex: 0 0 auto;
  color: #fff
}

.con {
  font-weight: 600;
  font-size: 14px
}

.cos {
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px
}

.cogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 13px
}

.cocell {
  background: var(--card-raise);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 11px
}

.cocell .cl {
  font-size: 9.5px;
  color: var(--faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em
}

.cocell .cvv {
  font-size: 14px;
  font-weight: 600;
  margin-top: 3px;
  font-variant-numeric: tabular-nums
}

/* ---------- staking ---------- */
.pool {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  gap: 13px;
  align-items: center;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur)
}

.pool.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft)
}

.pd {
  width: 54px;
  flex: 0 0 auto;
  text-align: center
}

.pd .pdn {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.pd .pdl {
  font-size: 10px;
  color: var(--faint);
  font-weight: 600;
  text-transform: uppercase
}

.apr {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  text-align: right;
  font-variant-numeric: tabular-nums
}

.aprl {
  font-size: 10px;
  color: var(--faint);
  text-align: right;
  font-weight: 600;
  text-transform: uppercase
}

.stakepos {
  background: var(--card-raise);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 9px
}

/* ---------- account ---------- */
.setrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.setrow:last-child {
  border-bottom: 0
}

.seti {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--chip);
  color: var(--chip-ink);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex: 0 0 auto
}

/* ---------- floating glass tab bar ---------- */
.tabbar {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  margin: 0 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--tab);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 7px 8px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
}

.tab {
  flex: 1 1 0;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px 0;
  color: var(--faint);
  font: inherit;
  font-size: 9.5px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  border-radius: 18px;
}

.tab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* The pill already carries the active state, so the label keeps the same
   weight as the others. Changing weight also re-measures the text, which
   nudges the icon and label a fraction on every press. */
.tab.on {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2))
}

/* ---------- sheet / scrim / toast ---------- */
#scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 9, .6);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease
}

#scrim.on {
  opacity: 1;
  pointer-events: auto
}

#sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88%;
  overflow-y: auto;
  transform: translateY(102%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .4);
}

#sheet.on {
  transform: none
}

.grab {
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: var(--border);
  margin: 2px auto 14px
}

.sheethead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px
}

.sheethead h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  letter-spacing: -.01em
}

@media (prefers-reduced-motion:reduce) {
  #sheet {
    transition: none
  }
}

#toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 14px);
  z-index: 40;
  background: var(--ink);
  color: var(--bg);
  border-radius: 14px;
  padding: 11px 17px;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
  max-width: 86%;
  text-align: center;
}

#toast.on {
  opacity: 1;
  transform: translate(-50%, 0)
}

/* mini line chart */
.spark,
.spark2 {
  display: block;
  width: 100%;
  overflow: visible
}

/* =====================================================================
   Utility helpers — small, reusable classes so the HTML carries no
   inline style="" attributes. Add to these rather than inlining.
   ===================================================================== */
.mt-1 {
  margin-top: 4px
}

.mt-2 {
  margin-top: 8px
}

.mt-3 {
  margin-top: 12px
}

.mt-4 {
  margin-top: 16px
}

.mb-1 {
  margin-top: 0;
  margin-bottom: 4px
}

.mb-2 {
  margin-bottom: 8px
}

.mb-3 {
  margin-bottom: 12px
}

.gap-2 {
  gap: 8px
}

.txt-center {
  text-align: center
}

.txt-right {
  text-align: right
}

.w-full {
  width: 100%
}

.static-row {
  cursor: default
}

/* non-interactive .tx / list rows */
.text-green {
  color: var(--green)
}

.text-red {
  color: var(--red)
}

.chip-amber {
  background: var(--amber-soft);
  color: var(--amber)
}

.chip-red {
  background: var(--red-soft);
  color: var(--red)
}

.chip-grey {
  background: var(--chip);
  color: var(--faint)
}

.txlist-card {
  margin-top: 9px;
  padding: 0 14px
}

.rowspread {
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.mono-strong {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px
}

.mono-mid {
  font-family: var(--mono);
  font-weight: 700
}

.finehint {
  margin: 6px 2px 0
}

.blockhint {
  margin: 0 2px 8px
}

.foot-note {
  text-align: center;
  margin-top: 18px;
  line-height: 1.6
}

.center-pad {
  text-align: center;
  padding: 4px 0
}

.center-mt {
  text-align: center;
  margin-top: 8px
}

/* rank big label on the community page */
.ranktag {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums
}

/* avatar size override used on the account header */
.avatar.lg {
  width: 46px;
  height: 46px;
  font-size: 14px
}

/* stock-wallet hero (companies page) uses accent as its surface */
.hero-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--on-accent)
}

.hero-accent .eyebrow {
  color: color-mix(in srgb, var(--on-accent) 65%, transparent)
}

.hero-accent .balcur {
  color: color-mix(in srgb, var(--on-accent) 65%, transparent)
}

.hero-accent .tiny {
  color: color-mix(in srgb, var(--on-accent) 82%, transparent)
}

.btn-onaccent {
  background: var(--on-accent);
  color: var(--accent-ink);
  flex: 1
}

.btn-onaccent-ghost {
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--on-accent) 25%, transparent);
  color: var(--on-accent);
  flex: 1
}

/* progress-bar fill widths as data-driven modifiers (avoid inline width) */
.bar i[data-w] {
  width: 0
}

/* legend swatches (dashboard) */
.sw-rel {
  background: var(--bar-rel)
}

.sw-spon {
  background: var(--bar-spon)
}

.sw-team {
  background: var(--bar-team)
}

.sw-rest {
  background: var(--bar-rest)
}

.pill-lg {
  padding: 5px 10px
}

/* wallet brand tints (login) — kept as classes, not inline */
.w-metamask {
  background: rgba(246, 133, 27, .10);
  color: #f6851b
}

.w-walletconnect {
  background: rgba(59, 153, 252, .10);
  color: #3b99fc
}

.w-trust {
  background: rgba(51, 117, 187, .10);
  color: #3375bb
}

.w-binance {
  background: rgba(240, 185, 11, .10);
  color: #c99a09
}

/* company logo tints */
.co-a {
  background: #2f7d5b
}

.co-b {
  background: #b3690f
}

.co-c {
  background: #4a63e7
}

.co-tint-a {
  background: rgba(47, 125, 91, .12);
  color: #2f7d5b
}

/* =====================================================================
   Classes for markup rendered by app.js (sheets, lists, cards) so the
   generated DOM is also inline-style-free.
   ===================================================================== */
.pill-mt {
  margin-left: 4px
}

.static-row {
  cursor: default
}

.empty {
  text-align: center;
  padding: 22px 0
}

.card-center {
  margin-top: 10px;
  text-align: center
}

.qrbox {
  width: 150px;
  height: 150px;
  margin: 4px auto 10px;
  border-radius: 14px;
  background: var(--chip);
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 11px
}

.addr-break {
  font-size: 12.5px;
  word-break: break-all
}

.link-break {
  font-size: 12px;
  margin-top: 6px;
  word-break: break-all
}

.note-mt {
  margin-top: 10px
}

.row-mt {
  margin-top: 6px
}

.pill-pad {
  padding: 7px 12px
}

.swap-arrow {
  text-align: center;
  color: var(--faint);
  margin: 8px 0
}

.sheet-step {
  font-weight: 700;
  margin-bottom: 4px
}

.input-mt {
  margin-top: 6px
}

.btn-mt {
  margin-top: 12px
}

.row-gap-mt {
  display: flex;
  gap: 8px;
  margin-top: 12px
}

.bar-mt {
  margin-top: 11px
}

.hint-mt {
  margin-top: 8px
}

.co-btn {
  width: 100%;
  margin-top: 11px
}

.pool-note {
  font-weight: 700;
  font-size: 13px
}

.member-right {
  text-align: right
}

.stat-lg {
  font-weight: 700;
  font-size: 13px
}

/* data-driven fills/colours set from JS via CSS custom properties.
   JS assigns el.style.setProperty('--w', pct) — that's a value binding,
   not presentational CSS, and keeps the class here. */
.bar i {
  width: var(--w, 0)
}

.fill-w {
  width: var(--w, 0)
}

.colog {
  background: var(--co, #4a63e7)
}

.delta-up {
  color: var(--green)
}

.delta-down {
  color: var(--red)
}

.hint-mt5 {
  margin-top: 5px
}

.down-arrow {
  text-align: center;
  color: var(--faint);
  margin: 10px 0
}

.balrow-mt {
  margin-top: 4px
}

.seti.ok {
  background: var(--green-soft);
  color: var(--green)
}

/* ===== Ventures: media-style marketplace ===== */
.walletchips.two {
  grid-template-columns: 1fr 1fr
}

.vsec {
  margin-top: 18px
}

.vhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px
}

.vhead h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0
}

.vhead .all {
  font-size: 12px;
  color: var(--accent-ink);
  cursor: pointer
}

.vrow {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 18px 4px;
  margin: 0 -18px;
  scrollbar-width: none
}

.vrow::-webkit-scrollbar {
  display: none
}

.poster {
  flex: 0 0 auto;
  width: 152px;
  cursor: pointer
}

.poster:active {
  transform: scale(.985)
}

.poster .art {
  position: relative;
  aspect-ratio: 420/800;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 80% at 28% 10%, color-mix(in srgb, #fff 16%, transparent), transparent 55%),
    linear-gradient(155deg, var(--co, #2a6b5e), color-mix(in srgb, var(--co, #2a6b5e) 26%, #05100d))
}

.poster .art .glyph {
  font-size: 46px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45))
}

.poster .art .rate {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums
}

.poster .art .soontag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(4, 10, 9, .72);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 9px
}

.poster .art .plogo {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .65)
}

.poster .pt {
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 7px;
  line-height: 1.25
}

.poster .ps {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px
}

.detail {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden
}

.detail.on {
  transform: none;
  visibility: visible
}

@media (prefers-reduced-motion:reduce) {
  .detail {
    transition: none
  }
}

.dhero {
  position: relative;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background:
    linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--bg) 86%, transparent) 84%, var(--bg) 100%),
    radial-gradient(120% 70% at 72% 8%, color-mix(in srgb, #fff 13%, transparent), transparent 55%),
    linear-gradient(160deg, var(--co, #2a6b5e), color-mix(in srgb, var(--co, #2a6b5e) 22%, #05100d))
}

.dhero .dglyph {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 104px;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45))
}

.dtopbtns {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between
}

.dcirc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(4, 10, 9, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  font-size: 18px;
  line-height: 1
}

.dtitle {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.02em;
  position: relative
}

.dpartner {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  position: relative
}

.dctarow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
  position: relative
}

.dcta {
  flex: 1
}

.dicon {
  width: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: var(--card-solid);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 19px;
  color: var(--ink);
  cursor: pointer
}

.dbody {
  padding: 16px
}

.dmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px
}

.dmeta .mrate {
  color: var(--accent-ink);
  font-weight: 700
}

.dmeta .dot {
  color: var(--faint)
}

.ddesc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink)
}

/* ===== Ventures search bar ===== */
.searchbar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card-raise);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 13px
}

.searchbar .si {
  color: var(--faint);
  font-size: 17px;
  flex: 0 0 auto
}

.searchbar input {
  border: 0;
  background: transparent;
  flex: 1;
  padding: 12px 0;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0
}

.searchbar input::placeholder {
  color: var(--faint)
}

.searchbar:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent)
}

/* ===== wallet detail (dashboard) ===== */
.wdtop {
  padding: 14px 16px 0
}

.wdhero {
  text-align: center;
  padding: 6px 16px 18px
}

.wcoin {
  width: 92px;
  height: 92px;
  margin: 6px auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 42px;
  background:
    radial-gradient(58% 52% at 34% 28%, color-mix(in srgb, #fff 36%, transparent), transparent 62%),
    linear-gradient(160deg, var(--co, #2f7d5b), color-mix(in srgb, var(--co, #2f7d5b) 36%, #05100d));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5), inset 0 2px 8px rgba(255, 255, 255, .3), inset 0 -7px 15px rgba(0, 0, 0, .32);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent)
}

.wcname {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase
}

.wcbal {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 7px;
  line-height: 1
}

.wccur {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted)
}

.wcsub {
  font-size: 13px;
  color: var(--faint);
  margin-top: 9px
}

.wcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2px 16px;
  margin-bottom: 16px
}

.irow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0
}

.irow+.irow {
  border-top: 1px solid var(--border)
}

.irow .ii {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--bg2);
  font-size: 16px;
  color: var(--accent-ink)
}

.irow .il {
  font-size: 14px;
  font-weight: 500
}

.irow .ir {
  margin-left: auto;
  text-align: right
}

.irow .irv {
  font-size: 14px;
  font-weight: 600
}

.irow .irs {
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px
}

.hint-mt5.center {
  text-align: center
}

.wchip.tap {
  cursor: pointer;
  transition: border-color .15s, transform .05s
}

.wchip.tap:active {
  transform: scale(.99)
}

.wchip.tap:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border))
}

.hide {
  display: none !important
}

/* ===== dashboard wallet slider ===== */
.wslider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 15px -18px 0;
  padding: 0 18px 4px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 18px
}

.wslider::-webkit-scrollbar {
  display: none
}

.wslide {
  flex: 0 0 63%;
  scroll-snap-align: start;
  position: relative;
  background: var(--card-raise);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 15px;
  cursor: pointer;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  transition: border-color .15s, transform .05s
}

.wslide:active {
  transform: scale(.99)
}

.wslide:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border))
}

.wc-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: radial-gradient(58% 52% at 34% 28%, color-mix(in srgb, #fff 30%, transparent), transparent 62%), linear-gradient(160deg, var(--co, #2f7d5b), color-mix(in srgb, var(--co, #2f7d5b) 36%, #05100d));
  box-shadow: inset 0 1px 4px rgba(255, 255, 255, .25), 0 6px 14px rgba(0, 0, 0, .35)
}

.wc-txt {
  /* claim the leftover width so balance auto-fit has a real box to measure
     against (content-sized would be circular) */
  flex: 1 1 0;
  min-width: 0
}

.wc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted)
}

.wc-bal {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-top: 3px;
  font-variant-numeric: tabular-nums
}

.wc-sub {
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 2px
}

.wc-go {
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 15px;
  pointer-events: none
}

/* ===== VIP rank badge (V1–V5) ===== */
.vipbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 15px 6px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--vc, #ffcf47);
  background: color-mix(in srgb, var(--vc, #ffcf47) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--vc, #ffcf47) 42%, transparent)
}

.vipbadge .vipmark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--vc, #0b0b0b) 45%, transparent))
}

.vip-v1 {
  --vc: #c8823c
}

/* bronze  */
.vip-v2 {
  --vc: #cdd6df
}

/* silver  */
.vip-v3 {
  --vc: #ffcf47
}

/* gold    */
.vip-v4 {
  --vc: #5fe6d4
}

/* platinum/cyan */
.vip-v5 {
  --vc: #c9a3ff
}

/* diamond/violet */
.vip-none {
  --vc: #8aa39c
}

/* ===== dashboard background video (fades in, freezes on last frame) ===== */
.dashvideo {
  position: absolute;
  inset: 0;
  width: 140%;
  height: auto;
  object-fit: cover;
  z-index: -1;
  transition: opacity .5s ease;
  pointer-events: none;
  background: var(--bg);
  filter: brightness(.82) saturate(.92);
  top: 0;
  left: 0px;
}

.dashvideo.on {
  opacity: 1
}

/* cinematic grade — video reads at the top, sinks into the base colour by mid-page
   so cards and text stay legible over it */
.dashscrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 30%, transparent) 0%,
      color-mix(in srgb, var(--bg) 42%, transparent) 32%,
      color-mix(in srgb, var(--bg) 72%, transparent) 58%,
      color-mix(in srgb, var(--bg) 92%, transparent) 78%,
      var(--bg) 100%)
}

@media (prefers-reduced-motion:reduce) {
  .dashvideo {
    transition: none
  }
}
/* ===== notched "tab" Total Value card (dashboard) =====
   The VIP badge sits in a cutout at the card's top-right. The card is glass,
   so the notch has to be a real clip-path on the card itself — overlaying
   solid shapes would seam against the translucent surface.
   The path is generated in app.js (applyHeroNotch) because it depends on the
   badge's measured width. No filter/opacity/transform on .herowrap: those
   would create a backdrop root and stop .hero frosting the video behind it. */
.herowrap {
  position: relative;
  /* flow-root stops .hero's top margin collapsing out of the wrapper,
     which would drag the absolutely-positioned badge out of its notch */
  display: flow-root;
  /* how far the card sits below the app bar — more video on show.
     The badge is anchored to the same offset so it stays in its notch. */
  --hero-offset: 60px
}

.herowrap .vipbadge {
  position: absolute;
  top: var(--hero-offset);
  right: 0;
  z-index: 2
}

.hero.notched {
  margin-top: var(--hero-offset);
  clip-path: var(--heroclip, none);
  /* the default .hero glow sits at 88% 0% — directly under the notch, which
     read as a haze around the badge. Move it left and soften it. */
  background:
    radial-gradient(125% 80% at 16% 0%, color-mix(in srgb, var(--glow) 15%, transparent), transparent 58%),
    var(--card);
  /* clip-path slices a normal border/shadow, so the edge is stroked
     as an SVG overlay (.heroedge) that follows the notch outline */
  box-shadow: none;
  border-color: transparent
}

/* 1px outline tracing the notched shape — matches the border on other cards */
.heroedge {
  position: absolute;
  inset: var(--hero-offset) 0 0 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible
}

.heroedge path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke
}

/* larger badge for the Team rank card, plus the A-rank alongside it */
.vipbadge.lg {
  font-size: 17px;
  padding: 7px 16px 7px 12px;
  gap: 7px;
  vertical-align: middle
}

.vipbadge.lg .vipmark {
  width: 21px;
  height: 21px
}

.arank {
  font-size: 19px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 9px;
  vertical-align: middle
}

/* ===== language picker ===== */
.langlist {
  padding: 4px 16px
}

.langrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  font-size: 14.5px
}

.langrow + .langrow {
  border-top: 1px solid var(--border)
}

.langrow .langshort {
  width: 38px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted)
}

.langrow.on .langshort {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-ink)
}

.langrow.on {
  font-weight: 600
}

.langtick {
  color: var(--accent-ink);
  font-weight: 700
}

/* ===== Team rank card — breathing room ===== */
.rankline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px
}

/* small round "?" that opens the rank explainer */
.helpbtn {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .15s, border-color .15s
}

.helpbtn:hover {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent)
}

/* caption above each rank ladder */
.laddercap {
  font-size: 12px;
  color: var(--muted);
  margin: 18px 0 9px
}

/* each progress metric gets its own block of space */
.progrow + .progrow {
  margin-top: 18px
}

.progrow .kv {
  padding: 0
}

.mb-3 {
  margin-bottom: 14px
}

/* Text glyphs used as coin marks (e.g. ₮ for USDT) read as solid white on the
   coin gradient. Emoji ignore colour/weight, so this is a no-op for them. */
.wc-ico,
.wcoin {
  color: #fff;
  font-weight: 700
}

/* balances are auto-fitted in JS (fitBalances) — they must never wrap,
   otherwise the overflow check that drives the sizing cannot see the spill */
.balnum,
.wc-bal,
.wcbal,
.wchip .wv,
.stat3 .sv {
  white-space: nowrap
}

.balrow {
  min-width: 0
}

/* ===== Ventures poster tiles =====
   Products with commissioned artwork render it edge-to-edge. The rest are
   composed to the same recipe so the row reads as one set. */
.poster .artimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.poster .art.composed {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 11px 10px 12px;
  place-items: stretch
}

.poster .pcat {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  align-self: flex-start
}

.poster .pglyph {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  font-size: 52px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5))
}

.poster .pstat {
  align-self: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 8px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px)
}

.poster .ptitle {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

.poster .ptag {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66)
}

/* product artwork behind the detail hero, faded into the page below it */
.dhero.hasart {
  min-height: 470px
}

.dheroimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%)
}

.dhero.hasart {
  isolation: isolate
}

/* ===== DAMI token mark =====
   The real logo replaces the placeholder emoji. It already carries its own
   sphere and lighting, so it sits flat rather than inside the generated
   coin gradient the other wallets use. */
.wc-ico.brandcoin{
  background:none;
  box-shadow:none;
  padding:0;
}
.wc-ico.brandcoin img{width:100%;height:100%;object-fit:contain;display:block}

.wcoin .coinimg{width:100%;height:100%;object-fit:contain;display:block}
.wcoin:has(.coinimg){
  background:none;
  box-shadow:0 14px 32px rgba(0,0,0,.42);
  border:0;
}

/* connect screen */
.brandmark img{width:100%;height:100%;object-fit:contain;display:block}

/* locked stock: the same mark, desaturated, with a padlock over it */
.wc-ico.locked,
.wcoin:has(.lockbadge){position:relative}
.lockbadge{
  position:absolute;
  right:-2px;bottom:-2px;
  width:19px;height:19px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:10px;line-height:1;
  background:var(--bg2);
  border:1.5px solid var(--bg);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.lockbadge.lg{width:30px;height:30px;font-size:16px;right:2px;bottom:2px;border-width:2px}

/* ===== Ventures balance chips with the coin mark =====
   Same treatment as the dashboard wallet cards: the mark sits beside the
   figure rather than above it, because these chips are half the width. */
.wchip:has(.chipcoin){display:flex;align-items:flex-start;gap:11px}
.chipcoin{
  position:relative;
  width:34px;height:34px;flex:0 0 auto;
  margin-top:2px;
}
.chipcoin img{width:100%;height:100%;object-fit:contain;display:block}
.chiptext{min-width:0;flex:1 1 auto}
.lockbadge.sm{width:15px;height:15px;font-size:8px;right:-3px;bottom:-3px;border-width:1.5px}

/* =====================================================================
   NO ZOOM ON TAP

   iOS zooms the whole page when a focused field renders under 16px, and
   there is no way to zoom back out by hand. Every text-entry control is
   therefore pinned to 16px. The visual size is unchanged elsewhere in the
   app; only these fields step up, and 16px is a reasonable size for a
   field you are typing into anyway.

   Range inputs and checkboxes are excluded: they take no keyboard, so
   they never trigger the zoom, and forcing a font size on them would
   change the thumb metrics.
   ===================================================================== */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: 16px;
}

/* Nothing in the app should grow on tap. Press feedback only ever shrinks
   (scale below 1), so a control cannot jump larger under a finger. */
button:active,
.tap:active,
a:active,
[role="button"]:active {
  font-size: inherit;
}

/* ===== a member's own position inside a product detail ===== */
.poscard + .poscard{margin-top:10px}
.posamt{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:9px;font-variant-numeric:tabular-nums}
.chev-hint{color:var(--faint);margin-top:3px}


/* the account button is a person glyph rather than initials */
.avatar svg{width:20px;height:20px}
.avatar.lg svg{width:24px;height:24px}

/* ===== announcements ===== */
.newscard + .newscard{margin-top:10px}
.newscard.unread{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.newstitle{font-size:15px;font-weight:600;line-height:1.3;margin:9px 0 6px}
.newsbody{line-height:1.55}
#newsUnread{min-width:20px;text-align:center}

/* unread dot on the News tab */
.tab{position:relative}
.tabdot{
  position:absolute;top:6px;right:calc(50% - 16px);
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px var(--tab);
}

/* ===== announcement list ===== */
.newsrow{display:flex;align-items:flex-start;gap:11px;margin-top:9px}
.newsthumb{width:62px;height:62px;flex:0 0 auto;border-radius:12px;overflow:hidden;background:var(--bg2)}
.newsthumb img{width:100%;height:100%;object-fit:cover;display:block}
.newschev{flex:0 0 auto;color:var(--faint);font-size:20px;line-height:1;align-self:center}

/* two lines, then an ellipsis - the full post opens on tap */
.clamp2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.newscard .newstitle{margin:0 0 4px}
.newscard .newsbody{white-space:normal}

/* ===== full post ===== */
.postbanner{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.postbanner img{width:100%;height:100%;object-fit:cover;display:block}
.postbanner .postback{position:absolute;top:14px;left:14px;background:rgba(4,10,9,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.posttitle{font-size:23px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:11px 0 14px}
.postbody{font-size:14px;line-height:1.65;color:var(--ink);white-space:pre-wrap;word-break:break-word}

/* images inside a full post */
.postimg{margin:14px 0;border-radius:14px;overflow:hidden;background:var(--bg2)}
.postimg img{width:100%;display:block}
.postimg.broken{display:none}
.postcap{padding:8px 12px;font-size:11.5px;color:var(--faint);line-height:1.5}
.postbody + .postbody{margin-top:12px}

/* ===== dashboard notice board =====
   Same shape as the Refer promo, tinted with the accent instead of lime so
   the two read as siblings rather than two versions of one card. */
.newspromo{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--card)), var(--card));
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
}
.newspromo.unread{border-color:color-mix(in srgb, var(--accent) 58%, transparent)}
.newspromo .nphead{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.newspromo h3{margin:0 0 5px}
.newspromo p{margin:0 0 13px;line-height:1.55}
.newspromo > *{position:relative;z-index:1}
.seeall{
  font-size:12px;font-weight:600;color:var(--accent-ink);
  text-decoration:none;white-space:nowrap;
}

/* the card carries its own section heading, so it reads as a titled block
   rather than needing a separate header row above it */
.npsect{
  margin:0 0 11px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
}
.newspromo .nphead{margin-bottom:10px}

/* ===== identity verification ===== */
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kycstep{
  display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;margin:16px 0 8px;
}
.kycn{
  width:21px;height:21px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:var(--chip);color:var(--muted);
  font-size:11px;font-weight:700;
}
.kycn.ok{background:var(--accent);color:var(--on-accent)}
.kycfield + .kycfield{margin-top:11px}
.kycfield label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.kycfield input{
  width:100%;padding:11px 13px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  color:var(--ink);font:inherit;
}
.kycdoc{display:flex;align-items:center;gap:11px;padding:11px 0}
.kycdoc + .kycdoc{border-top:1px solid var(--border)}
.kycdt{font-size:13.5px;font-weight:500}
.kycdoc.has .kycdt{color:var(--ink)}
.kycthumb{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.kycdoc label.btn{flex:0 0 auto;cursor:pointer}
.kycagree{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--muted)}
.kycagree input{margin-top:3px;flex:0 0 auto}
.kycresult{text-align:center}
.kycbig{font-size:17px;font-weight:600;line-height:1.3;margin:11px 0 6px}

/* ===== document camera =====
   Full-screen viewfinder with a guide frame at the real card ratio. Sits
   above the sheet, since it is opened from inside one. */
.camview{
  position:absolute;inset:0;z-index:60;
  background:#000;
  display:none;
  overflow:hidden;
}
.camview.on{display:block}
.camview video{width:100%;height:100%;object-fit:cover;display:block}

/* everything outside the frame is dimmed, so the frame reads as the target */
.camdim{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:none}
.camframe{
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);
  pointer-events:none;
}
/* corner ticks rather than a full outline - it reads as a target, and the
   edges of the document stay visible against the border */
.camframe .cc{position:absolute;width:26px;height:26px;border:3px solid #fff}
.camframe .tl{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.camframe .tr{top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.camframe .bl{bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 14px}
.camframe .br{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 14px 0}

.camhint{
  position:absolute;left:0;right:0;top:calc(46% + 4px);
  transform:translateY(140px);
  text-align:center;color:#fff;font-size:13px;font-weight:500;
  text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none;
}
.cambar{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px 22px calc(26px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));
}
.camshoot{
  width:66px;height:66px;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);background:transparent;
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.camshoot span{width:52px;height:52px;border-radius:50%;background:#fff;display:block;transition:transform .1s}
.camshoot:active span{transform:scale(.9)}
.camcancel{
  border:0;background:none;color:#fff;font:inherit;font-size:14px;
  cursor:pointer;padding:10px;min-width:64px;
}

/* the row's secondary file-picker button */
.kycpick{padding-left:11px;padding-right:11px}

/* ===== nationality picker ===== */
.natbtn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:11px 13px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.natbtn .chev{color:var(--faint)}
.natflag{font-size:17px;line-height:1;flex:0 0 auto}

.natpick{
  position:absolute;inset:0;z-index:70;
  background:var(--bg);
  display:none;flex-direction:column;
}
.natpick.on{display:flex}
.natbar{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.natbar input{
  flex:1 1 auto;min-width:0;
  padding:11px 14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:999px;
  color:var(--ink);font:inherit;
}
.natlist{flex:1 1 auto;overflow-y:auto;padding:6px 10px 22px}
.natrow{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:13px 12px;border:0;background:none;border-radius:12px;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.natrow + .natrow{border-top:1px solid var(--border2)}
.natrow:hover,.natrow:focus-visible{background:var(--card)}

/* ===== age validation ===== */
.kycfield input.bad{border-color:var(--red)}
.kycerr{display:none;margin-top:6px;font-size:11.5px;color:var(--red);line-height:1.45}
.kycerr.on{display:block}

/* ===== captured photo preview ===== */
.kycthumb{
  width:42px;height:42px;flex:0 0 auto;padding:0;
  border:1px solid var(--border);border-radius:9px;overflow:hidden;
  background:var(--bg2);cursor:pointer;display:block;
}
.kycthumb img{width:100%;height:100%;object-fit:cover;display:block}
.kycthumb:hover,.kycthumb:focus-visible{border-color:var(--accent)}

.photoview{
  position:absolute;inset:0;z-index:80;
  background:#05100d;
  display:none;flex-direction:column;
}
.photoview.on{display:flex}
.pvbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.pvname{font-size:14px;font-weight:600}
.pvwrap{
  flex:1 1 auto;display:grid;place-items:center;
  padding:16px;overflow:auto;min-height:0;
}
.pvwrap img{max-width:100%;max-height:100%;border-radius:12px;display:block}
.pvbtns{
  display:flex;gap:10px;padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
}
.pvbtns .btn{flex:1 1 0}

/* ===== ladder bonus card ===== */
.ldtop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ldnum{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ldsplit{display:flex;gap:10px;flex:0 0 auto}
.ldside{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 12px;border-radius:12px;background:var(--bg2);min-width:62px;
}
.ldside b{font-size:14px;font-variant-numeric:tabular-nums}
.rtab{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.rtab th{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  font-weight:600;text-align:left;padding:0 0 7px;border-bottom:1px solid var(--border);
}
.rtab th.num,.rtab td.num{text-align:right}
.rtab td{padding:8px 0;border-bottom:1px solid var(--border2)}
.rtab tr.on td{color:var(--accent-ink);font-weight:600}
.rtab tr:last-child td{border-bottom:0}

/* ===== downline tree =====
   A file-explorer list: one line per account, depth carried by indent.
   A deep team indents past the viewport, so the list scrolls sideways
   rather than capping the indent - depth stays visually honest, and a
   swipe brings the numbers back. Rows are max-content wide so every row
   scrolls as one piece and the columns stay aligned. */
.orgtree{
  font-size:12.5px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.treehead,
.trow,
.tmore{width:max-content;min-width:100%}

.treehead{
  display:flex;align-items:center;gap:8px;
  padding:0 2px 7px;border-bottom:1px solid var(--border);
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:600;
  position:sticky;top:0;
}
.treehead .thid{flex:1 1 auto;min-width:110px}
.treehead .thamt{width:58px;text-align:right;flex:0 0 auto}
.treehead .thsub{width:62px;text-align:right;flex:0 0 auto}
.treehead .thchip{width:56px;text-align:right;flex:0 0 auto}

.trow{
  display:flex;align-items:center;gap:8px;
  padding:9px 2px;
  padding-left:calc(2px + var(--d, 0) * 15px);
  border-bottom:1px solid var(--border2);
  white-space:nowrap;
}
.trow.has{cursor:pointer}
.trow.has:hover,.trow.has:focus-visible{background:var(--card)}
.trow.me{font-weight:600}

.tcar{
  width:14px;flex:0 0 auto;text-align:center;
  color:var(--muted);font-size:15px;line-height:1;
  transition:transform .15s ease;
}
.tcar.open{transform:rotate(90deg)}
.tcar.leaf{color:var(--border);font-size:12px}
.trow.me .tcar{color:var(--accent)}

/* the name column keeps a floor so the numbers never crowd it, and grows
   with the indent rather than truncating */
/* sized so the top level fits without scrolling; deeper rows push past
   it and the list scrolls sideways */
.tid{flex:1 1 auto;min-width:110px}
.tamt{width:58px;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.tsub{
  width:62px;flex:0 0 auto;text-align:right;
  color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;
}
.tchips{width:56px;flex:0 0 auto;display:flex;gap:3px;justify-content:flex-end}
.rkchip{
  font-size:9.5px;font-weight:700;font-style:normal;
  padding:2px 5px;border-radius:999px;background:var(--chip);color:var(--muted);
}
.rkchip.v{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent-ink)}
.rkchip.a{background:color-mix(in srgb,var(--lime) 18%,transparent);color:var(--lime)}

.tn.bigleg > .trow{background:var(--bg2)}
.tlegend{margin-top:10px}

/* paging + depth marker for large trees */
.tmore{
  padding:9px 2px;
  padding-left:calc(2px + var(--d, 0) * 15px + 22px);
  font-size:11.5px;color:var(--accent-ink);cursor:pointer;
  border-bottom:1px solid var(--border2);
}
.tmore:hover{background:var(--card);border-radius:8px}
.tdepth{
  flex:0 0 auto;font-size:9px;font-weight:700;
  color:var(--faint);background:var(--chip);
  padding:2px 4px;border-radius:5px;margin-right:2px;
}

/* On a narrow phone the fixed columns alone overflow at the top level, so
   trim them there. Deeper rows still scroll, which is the intent - it is
   only the first screen that should not need a swipe. */
@media (max-width: 400px) {
  .treehead .thid,
  .tid { min-width: 84px }
  .treehead .thamt,
  .tamt { width: 52px }
  .treehead .thsub,
  .tsub { width: 54px }
  .treehead .thchip,
  .tchips { width: 50px }
  .treehead,
  .trow { gap: 6px }
  .trow { padding-left: calc(2px + var(--d, 0) * 13px) }
}

/* ===== withdrawal amount ===== */
.amtrow{display:flex;align-items:center;gap:9px;margin-top:13px}
.amtrow input{
  flex:1 1 auto;min-width:0;
  padding:12px 14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  color:var(--ink);font:inherit;font-size:17px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.amtrow input:focus{border-color:var(--accent);outline:none}
/* hide the spinner arrows - they are useless on a currency field */
.amtrow input::-webkit-outer-spin-button,
.amtrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amtrow input[type=number]{-moz-appearance:textfield}
.amtcur{color:var(--muted);font-size:13px;flex:0 0 auto}
.amthint{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.45}
.amthint.warn-text{color:var(--amber)}

/* The reviewer's message, shown to the member word for word. Newlines are
   kept because an operator writing two instructions puts them on two
   lines, and a long ID number must wrap rather than widen the sheet. */
.kycmsg {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 6px 0 4px;
  font-size: 12.5px;
  line-height: 1.55
}

/* Today's offer. One plan, operator-set: a card rather than a segmented
   control, because there is nothing to choose between. */
.offer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card-raise)
}

.offermult {
  display: grid;
  place-content: center;
  min-width: 54px;
  height: 54px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em
}

.offername {
  font-size: 15px;
  font-weight: 600
}

/* Team card when the member has no running package: the figures are what
   the team would pay, but nothing is being paid, so the card reads as
   inactive rather than as earnings. */
.ldpaused .ldnum,
.ldpaused .ldside b {
  color: var(--faint)
}

/* Operator messages on the account page */
.msgrow {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.06))
}

.msgrow:last-child {
  border-bottom: 0
}

.msgrow.unread {
  background: rgba(95, 230, 212, .05)
}

.msgtop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600
}

.msgbody {
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted)
}

/* Unread marker on the account avatar — the route to Messages from any page */
.avatar {
  position: relative
}

.avdot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--bar-rel);
  border: 2px solid var(--bg)
}

.msgpromo {
  display: block;
  text-decoration: none;
  color: inherit
}

.msgpromo .npsect {
  display: flex;
  align-items: center;
  gap: 8px
}

/* icons drawn as svg rather than a glyph sit slightly high in the grid */
.seti svg {
  display: block
}