/* fund-portal — the investor site at fund.apesmartchain.xyz. Same tokens as the desk. */
:root {
  --bg: #f5f5f7; --surface: #fff; --surface-2: #fbfbfd; --surface-3: #f2f2f5;
  --text: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b;
  --hair: rgba(0,0,0,.08); --hair-2: rgba(0,0,0,.14); --track: rgba(0,0,0,.065);
  --accent: #0071e3; --accent-hover: #0077ed; --accent-fill: rgba(0,113,227,.10);
  --up: #0a8a43; --up-fill: rgba(52,199,89,.14); --up-mark: #34c759;
  --down: #d7263d; --down-fill: rgba(255,59,48,.12); --down-mark: #ff453a;
  --warn: #b25e00; --warn-fill: rgba(255,159,10,.14);
  --font: "DM Sans", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Noto Sans Thai", monospace;
  --r-card: 22px; --r-sm: 14px; --r-xs: 10px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.10);
  --ease: cubic-bezier(.22,.61,.36,1); --spring: cubic-bezier(.32,.72,0,1);
  --max: 1160px; --gutter: 24px; --pad: 30px; --gap: 20px; --nav-h: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; }
svg { display: block; }
code { font: 13px var(--mono); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,.35); border-radius: 8px; }
::selection { background: rgba(0,113,227,.18); }
[hidden] { display: none !important; }
.num, .tab { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .dim { color: var(--text-2); } .faint { color: var(--text-3); }
.cap { font-size: 13px; color: var(--text-2); } .cap2 { font-size: 12.5px; color: var(--text-3); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 30; height: var(--nav-h); background: rgba(251,251,253,.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair);
  transition: background .3s var(--ease), box-shadow .3s var(--ease); }
body.scrolled .nav { background: rgba(251,251,253,.94); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.08); }
.nav-in { max-width: calc(var(--max) + 2 * var(--gutter)); height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; } .brand img { width: 30px; height: 30px; transition: transform .5s var(--spring); } .brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand span { color: var(--text-2); font-weight: 500; }
.seg { position: relative; display: flex; gap: 2px; padding: 3px; margin: 0 auto; background: rgba(0,0,0,.045); border-radius: var(--r-pill); }
.seg a { position: relative; z-index: 1; padding: 6px 15px; border-radius: var(--r-pill); color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .2s var(--ease); }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a[aria-current="page"] { color: var(--text); }
.seg-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-pill); background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04); transition: transform .45s var(--spring), width .45s var(--spring); }
.nav-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #0071e3, #34c759); }

/* ── buttons, chips ──────────────────────────────────────────────────── */
.btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill);
  padding: 9px 18px; font: 500 14px var(--font); cursor: pointer; white-space: nowrap; color: var(--text); background: rgba(0,0,0,.05);
  transition: background .15s, transform .12s var(--ease), box-shadow .2s; text-decoration: none !important; }
.btn:hover { background: rgba(0,0,0,.085); } .btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(0,113,227,.28); }
.btn.tint { background: var(--accent-fill); color: var(--accent); }
.btn.lg { padding: 13px 26px; font-size: 16px; } .btn.sm { padding: 6px 13px; font-size: 13px; } .btn.block { width: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
  background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.chip.up { background: var(--up-fill); color: var(--up); } .chip.down { background: var(--down-fill); color: var(--down); }
.chip.warn { background: var(--warn-fill); color: var(--warn); } .chip.acc { background: var(--accent-fill); color: var(--accent); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.live .dot { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* ── layout ──────────────────────────────────────────────────────────── */
main { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 110px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: 1 / -1; }
.sec { margin-top: 48px; } .sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 4px 18px; flex-wrap: wrap; }
.sec-h h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.page-head { margin: 8px 4px 28px; } .page-head h1 { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.page-head p { margin: 8px 0 0; font-size: 17px; color: var(--text-2); }
.card { position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--pad); min-width: 0; }
.coverage-card { min-height: 178px; }
.coverage-coins { display:flex; align-items:center; min-height:44px; margin-bottom:16px; }
.coverage-coins .real-coin + .real-coin { margin-left:-9px; }
.real-coin { position:relative; display:inline-grid; place-items:center; width:34px; height:34px; flex:none; overflow:hidden; border:2px solid var(--surface); border-radius:50%; background:var(--surface-3); color:var(--text-3); font:700 9px var(--mono); box-shadow:0 5px 16px rgba(8,12,10,.12); }
.real-coin img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--surface); }
.real-coin.lg { width:46px; height:46px; border-width:1px; }
.withdraw-lock { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; }
.withdraw-lock > svg { width:40px; color:var(--accent); }
.withdraw-lock h3 { margin:14px 0 6px; }
.withdraw-lock p { max-width:440px; margin:0 0 18px; color:var(--text-2); line-height:1.6; }
.capital-reset { display:flex; gap:8px; flex-direction:column; margin-bottom:var(--gap); }
.coverage-card h3 { margin: 0 0 7px; font-size: 18px; }
.coverage-card p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.coverage-disclaimer { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(230px, 1.25fr) auto; gap: 16px 22px; margin-top: 14px; padding: 19px 20px 16px; border: 1px solid var(--hair); border-radius: var(--r-card); background: linear-gradient(135deg, var(--surface-2), var(--surface)); color: var(--text-2); font-size: 13px; overflow: hidden; }
.coverage-status { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coverage-status > div, .coverage-copy { min-width: 0; }
.coverage-status > div { display: flex; flex-direction: column; gap: 3px; }
.coverage-status b { color: var(--text); font: 700 12px var(--mono); letter-spacing: .08em; }
.coverage-status small { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.coverage-copy > b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.coverage-copy p { margin: 0; color: var(--text-2); line-height: 1.45; }
.coverage-live-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--up-mark); box-shadow: 0 0 0 5px var(--up-fill); }
.coverage-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.coverage-actions a { white-space: nowrap; }
.coverage-gates { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 7px; }
.coverage-gates span { padding: 6px 9px; border: 1px solid var(--hair-2); border-radius: var(--r-pill); color: var(--text-3); background: var(--surface); font: 700 10px var(--mono); letter-spacing: .04em; }
.coverage-gates span::before { content: "✓"; margin-right: 5px; color: var(--up); }
.coverage-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hair); color: var(--text-3); font-size: 12px; line-height: 1.45; }
.coverage-foot b { flex: none; color: var(--text-2); font-weight: 500; }
@media (max-width: 900px) { .coverage-disclaimer { grid-template-columns: 1fr 1fr; } .coverage-status, .coverage-copy, .coverage-gates, .coverage-foot { grid-column: 1 / -1; } .coverage-actions { justify-content: flex-start; } }
@media (max-width: 520px) { .coverage-disclaimer { grid-template-columns: 1fr; padding: 17px 16px 15px; } .coverage-foot { flex-direction: column; gap: 5px; } }
.discord-btn { background: #5865f2; color: #fff; box-shadow: 0 8px 20px rgba(88,101,242,.22); }
.discord-btn:hover { background: #4752c4; color: #fff; box-shadow: 0 10px 26px rgba(88,101,242,.32); }
.discord-btn svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.discord-mark { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: rgba(255,255,255,.18); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-t { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 0; } .card-sub { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.lift { transition: transform .35s var(--spring), box-shadow .35s var(--ease); } .lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hr { height: 1px; background: var(--hair); margin: 20px 0; }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 0; overflow: hidden; }
.hero-main { padding: 30px 36px 26px; min-width: 0; }
.hero-side { padding: 30px 36px 28px; border-left: 1px solid var(--hair); background: var(--surface-2); display: flex; flex-direction: column; min-width: 0; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-bottom: 20px; }
.lbl { font-size: 15px; color: var(--text-2); margin-bottom: 2px; }
.display { font-size: clamp(46px, 7.4vw, 80px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.display .unit, .big .unit { font-size: .3em; font-weight: 500; color: var(--text-2); letter-spacing: -.005em; margin-left: 10px; }
.delta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; min-height: 26px; }
.delta { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta-p { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 8px; font-size: 14px; background: rgba(0,0,0,.05); }
.delta.up .delta-p { background: var(--up-fill); } .delta.down .delta-p { background: var(--down-fill); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.foot b { font-weight: 500; color: var(--text-2); }
.sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); margin: 0 10px; opacity: .6; }
.big { font-size: 46px; line-height: 1.05; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 12px; }
.big .unit { font-size: 17px; }
.split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0 20px; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.kpi-l { font-size: 13px; color: var(--text-2); margin-bottom: 4px; } .kpi-v { font-size: 22px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-s { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.meter { margin-top: auto; } .meter-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-bottom: 8px; } .meter-top b { color: var(--text); font-variant-numeric: tabular-nums; }
.meter-bar { position: relative; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0071e3, #40a0ff); width: 0; transition: width 1.1s var(--spring); }
.in .meter-bar i, .meter-bar.in i { width: var(--w); }

/* ── chart ───────────────────────────────────────────────────────────── */
.chart { position: relative; margin: 20px -6px 0 -4px; height: 150px; touch-action: pan-y; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .area { opacity: 0; transition: opacity .9s var(--ease) .5s; }
.chart .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart .base { stroke: rgba(0,0,0,.16); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart.in .line { animation: draw 1.4s var(--ease) forwards; } .chart.in .area { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .end { opacity: 0; transition: opacity .3s 1.3s; } .chart.in .end { opacity: 1; }
.chart .endpulse { transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite 1.6s; opacity: 0; }
@keyframes ring { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.chart .hov { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.18); pointer-events: none; opacity: 0; transition: opacity .15s; }
.chart .hdot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--accent); pointer-events: none; opacity: 0; transition: opacity .15s; }
.chart .tip { position: absolute; top: -8px; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 10px; background: rgba(29,29,31,.92); color: #fff;
  font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; }
.chart.hover .hov, .chart.hover .hdot, .chart.hover .tip { opacity: 1; }
.chart .mk { fill: #fff; stroke: var(--accent); stroke-width: 2.2; }
html[data-theme="dark"] .chart .mk { fill: #151619; }
.chart-empty { display: grid; place-items: center; height: 150px; margin-top: 20px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); font-size: 13px; }

/* ── tiles, lists ────────────────────────────────────────────────────── */
.tile { display: flex; flex-direction: column; min-height: 210px; }
.tile-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.tile-h h3 { margin: 0; font-size: 17px; font-weight: 600; }
.tile-big { font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.tile-note { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.ico-b { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-fill); color: var(--accent); flex: none; }
.ico-b svg { width: 22px; height: 22px; } .ico-b.up { background: var(--up-fill); color: var(--up); } .ico-b.warn { background: var(--warn-fill); color: var(--warn); }
.countdown { display: flex; gap: 10px; margin-top: 4px; }
.countdown div { flex: 1; text-align: center; padding: 12px 6px; border-radius: var(--r-sm); background: var(--surface-3); }
.countdown b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12px; color: var(--text-2); }
.act { list-style: none; margin: 0; padding: 0; }
.act li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); }
.act li:first-child { border-top: 0; padding-top: 2px; }
.act .ai { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.act .ai svg { width: 18px; height: 18px; } .act .ai.in { background: var(--up-fill); color: var(--up); } .act .ai.out { background: var(--accent-fill); color: var(--accent); }
.act .at { min-width: 0; flex: 1; } .act .at b { display: block; font-weight: 500; font-size: 14.5px; } .act .at span { font-size: 12.5px; color: var(--text-3); }
.act .av { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12.5px; padding: 0 12px 10px; white-space: nowrap; }
td { padding: 13px 12px; border-top: 1px solid var(--hair); vertical-align: middle; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr { transition: background .15s; } tbody tr:hover td { background: var(--surface-2); }
.tbl { overflow-x: auto; margin: 0 -12px; }
.empty { display: grid; place-items: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--text-3); font-size: 14px; }
.empty svg { width: 34px; height: 34px; color: var(--text-3); opacity: .7; }
dl.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; }
dl.kv dt, dl.kv dd { padding: 12px 0; border-top: 1px solid var(--hair); margin: 0; font-size: 14.5px; }
dl.kv dt { color: var(--text-2); padding-right: 18px; } dl.kv dd { text-align: right; font-weight: 500; }
dl.kv dt:first-of-type, dl.kv dd:first-of-type { border-top: 0; }

/* ── deposit / forms ─────────────────────────────────────────────────── */
.addr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-3); border-radius: var(--r-sm); padding: 12px 14px; margin: 8px 0; }
.addr code { flex: 1; word-break: break-all; font-size: 13.5px; }
.addr-act { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr { width: 188px; padding: 12px; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--hair), var(--shadow); flex: none; }
.qr svg { width: 100%; height: auto; }
.dep { display: flex; gap: 28px; align-items: flex-start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { position: relative; padding: 0 0 22px 52px; counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 4px 12px rgba(0,113,227,.25); }
.steps li::after { content: ""; position: absolute; left: 16.5px; top: 36px; bottom: 2px; width: 1.5px; background: linear-gradient(var(--accent-fill), var(--hair)); }
.steps li:last-child { padding-bottom: 0; } .steps li:last-child::after { display: none; }
.steps b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; } .steps span { font-size: 14px; color: var(--text-2); }
.field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; } .field label { font-size: 13px; color: var(--text-2); }
.input, select.input { width: 100%; min-height: 48px; border: 1px solid var(--hair-2); background: #fff; border-radius: 13px; padding: 11px 14px; font: 15.5px var(--font); color: var(--text);
  transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,113,227,.14); }
.input.mono { font-family: var(--mono); font-size: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.flash { border-radius: var(--r-sm); padding: 14px 18px; margin: 0 0 20px; font-weight: 500; display: flex; gap: 10px; align-items: center; animation: drop .5s var(--spring); }
.flash.ok { background: var(--up-fill); color: var(--up); } .flash.err { background: var(--down-fill); color: var(--down); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }

/* ── landing ─────────────────────────────────────────────────────────── */
.land { position: relative; }
.glow { position: absolute; inset: -140px -10% auto; height: 620px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55;
  background: radial-gradient(40% 50% at 20% 30%, rgba(0,113,227,.28), transparent 70%), radial-gradient(35% 45% at 80% 20%, rgba(52,199,89,.22), transparent 70%),
    radial-gradient(30% 40% at 55% 70%, rgba(175,82,222,.16), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(3%, 4%, 0) scale(1.05); } }
.land-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 28px 4px 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.land-hero h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.04; letter-spacing: -.045em; font-weight: 600; margin: 18px 0 14px; }
.grad { background: linear-gradient(95deg, #0071e3 10%, #34c759 60%, #0a8a43); -webkit-background-clip: text; background-clip: text; color: transparent; }
.land-hero p.lead { font-size: 19px; line-height: 1.55; color: var(--text-2); margin: 0 0 28px; max-width: 34em; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.feat .ico-b { margin-bottom: 16px; } .feat h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; } .feat p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.foot-site { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--text-3); }

/* ── auth ────────────────────────────────────────────────────────────── */
.auth { max-width: 460px; margin: 6vh auto 0; }
.auth .card { padding: 36px 34px; text-align: center; }
.auth-logo { width: 76px; height: 76px; margin: 0 auto 16px; animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-3deg); } }
.auth h1 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; }
.auth p { color: var(--text-2); margin: 0 0 6px; }
.auth form { text-align: left; margin-top: 18px; }
.auth .alt { margin-top: 22px; font-size: 14px; color: var(--text-2); }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; font-size: 12.5px; color: var(--text-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ── members: tabbed panels ──────────────────────────────────────────── */
.tabs-on [data-panel] { display: none; }
.tabs-on [data-panel].on { display: block; animation: panel-in .45s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.tabbar { display: none; }

/* ── motion ──────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal.in { opacity: 1; transform: none; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; padding: 11px 18px; border-radius: var(--r-pill);
  background: rgba(29,29,31,.92); color: #fff; font-size: 14px; font-weight: 500; transition: opacity .25s, transform .35s var(--spring); pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); }
html[data-theme="dark"] .toast { background: rgba(245,245,247,.95); color: #1d1d1f; border-color: rgba(0,0,0,.2); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; } .chart .line { stroke-dashoffset: 0; } .chart .area, .chart .end { opacity: 1; }
}

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --gutter: 16px; --pad: 20px; --gap: 14px; --nav-h: 52px; }
  .hero, .land-hero { grid-template-columns: 1fr; }
  .hero-main, .hero-side { padding: 22px 20px; } .hero-side { border-left: 0; border-top: 1px solid var(--hair); }
  .s3, .s4, .s5, .s6, .s7, .s8 { grid-column: 1 / -1; }
  .seg.members { display: none; } .who .nm { display: none; }
  .tabbar { display: flex; position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); height: 64px; padding: 6px;
    border-radius: 26px; background: rgba(251,251,253,.82); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
    box-shadow: 0 10px 34px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 20px; color: var(--text-3);
    font-size: 10.5px; font-weight: 500; transition: color .2s, background .3s var(--spring); }
  .tabbar a:hover { text-decoration: none; } .tabbar svg { width: 23px; height: 23px; }
  .tabbar a[aria-current="page"] { color: var(--accent); background: var(--accent-fill); }
  main { padding-top: 22px; }
  .dep { flex-direction: column; align-items: center; } .qr { width: 200px; }
  .display { font-size: 52px; } .big { font-size: 40px; }
  .page-head h1 { font-size: 32px; }
  .split { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kpi-v { font-size: 18px; }
  .land-nav-links { display: none; }
  .countdown b { font-size: 24px; }
}
.chart i.end, .chart i.endpulse { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; pointer-events: none; }
.chart i.endpulse { opacity: 0; }
.chart.in i.endpulse { animation: ring 2.4s ease-out infinite 1.6s; }
/* active tab: the pill sits on the link itself (no measured indicator to go stale) */
.seg-ind { display: none; }
.seg a { transition: color .2s var(--ease), background .3s var(--spring), box-shadow .3s var(--ease); }
.seg a[aria-current="page"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04); }
.side-kv { margin: 0 0 18px; }
.side-kv dt, .side-kv dd { padding: 9px 0; font-size: 14px; }
@media (max-width: 900px) { .nav-r form { display: none; } }

/* ── guest nav: readable links on wide screens, a menu on phones ─────── */
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); color: var(--text); font-size: 14px; font-weight: 500;
  white-space: nowrap; transition: background .2s var(--ease); }
.nav-links a:hover { background: rgba(0,0,0,.055); text-decoration: none; }
.nav-links svg { width: 14px; height: 14px; color: var(--text-2); }
.menu { position: relative; display: none; }
.menu summary { list-style: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text);
  background: rgba(0,0,0,.05); transition: background .2s; -webkit-tap-highlight-color: transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; }
.menu[open] summary { background: rgba(0,0,0,.1); }
.menu-sheet { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 24px)); padding: 8px; border-radius: 20px; background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  transform-origin: top right; animation: menu-in .28s var(--spring); z-index: 40; }
@keyframes menu-in { from { opacity: 0; transform: scale(.94) translateY(-6px); } }
.menu-sheet a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--text); font-size: 15.5px; font-weight: 500; }
.menu-sheet a:hover, .menu-sheet a:active { background: var(--surface-3); text-decoration: none; }
.menu-sheet a svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
.menu-sheet a svg:last-child:not(:first-child) { width: 15px; height: 15px; margin-left: auto; }
.menu-sheet a[aria-current="page"] { background: var(--surface-3); text-decoration: none; }
.menu-sheet a[aria-current="page"] svg { color: var(--accent); }
.menu-sep { height: 1px; background: var(--hair); margin: 6px 4px; }
/* ── dropdown nav (member phones): same tokens, no JS ── */
.menu.members { display: none; margin: 0 auto; }
.menu.members summary { width: auto; height: auto; padding: 7px 8px 7px 16px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; background: rgba(0,0,0,.045); }
.menu.members summary svg { width: 18px; height: 18px; color: var(--text-2); }
.menu.members[open] summary { background: rgba(0,0,0,.09); }
@media (max-width: 900px) {
  .nav-links, .nav-login { display: none; }
  .menu { display: block; }
  .menu.members { display: block; }
  .nav-in { gap: 10px; }
  .brand { font-size: 16px; } .brand img { width: 28px; height: 28px; }
}
@media (max-width: 360px) { .brand span { display: none; } }
/* phones: pin the dropdown to the viewport with even side margins (never hugs an edge) */
@media (max-width: 560px) {
  .menu-sheet { position: fixed; top: calc(var(--nav-h) + 8px); left: 12px; right: 12px; width: auto; transform-origin: top center; }
}

/* ── deposit networks ────────────────────────────────────────────────── */
.netpick { display: flex; flex-wrap: wrap; gap: 6px; }
.net { appearance: none; border: 1px solid var(--hair-2); background: var(--surface); color: var(--text); border-radius: var(--r-pill); padding: 0 14px; min-height: 36px;
  font: 500 13.5px var(--font); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .12s var(--ease); }
.net:hover { border-color: var(--accent); } .net:active { transform: scale(.96); }
.net.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.netinfo { margin: 12px 0 16px; min-height: 18px; }
.js .netpane { display: none; } .js .netpane.on { display: block; animation: panel-in .35s var(--ease) both; }
.netpane + .netpane { margin-top: 18px; } .js .netpane + .netpane { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.addwal { margin-top: 16px; } .addwal summary { list-style: none; cursor: pointer; } .addwal summary::-webkit-details-marker { display: none; }
.addwal[open] summary { margin-bottom: 4px; }
@media (max-width: 900px) { .net { min-height: 40px; } }

/* ── public getting-started guide ───────────────────────────────────── */
.guide-kicker { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.guide-shell { padding: 30px; }
.wallet-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.wallet-intro h3, .guide-columns h3, .join-flow h3 { margin: 0 0 7px; font-size: 19px; font-weight: 600; }
.wallet-intro p, .wallet-guide-head p { max-width: 68ch; margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.safe-pill { flex: none; padding: 7px 12px; border-radius: var(--r-pill); color: var(--up); background: var(--up-fill); font-size: 12.5px; font-weight: 600; }
.wallet-picks { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.wallet-pick { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 14px 15px; border: 1px solid var(--hair); border-radius: 16px; color: var(--text); background: var(--surface-2); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.wallet-pick:hover { border-color: rgba(0,113,227,.28); box-shadow: 0 8px 22px rgba(0,0,0,.06); transform: translateY(-2px); text-decoration: none; }
.wallet-pick img { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 12px; background: #fff; }
.wallet-pick span { display: flex; flex-direction: column; min-width: 0; }
.wallet-pick b { font-size: 15px; } .wallet-pick small { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-pick svg { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--accent); }
.guide-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair); }
.guide-list { list-style: none; padding: 0; margin: 13px 0 0; counter-reset: g; }
.guide-list li { position: relative; padding: 0 0 16px 38px; counter-increment: g; }
.guide-list li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-fill); font-size: 11px; font-weight: 700; }
.guide-list b, .guide-list span { display: block; } .guide-list b { font-size: 14px; } .guide-list span { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.network-list { margin-top: 13px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.network-list>div { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 11px 13px; border-top: 1px solid var(--hair); font-size: 13px; }
.network-list>div:first-child { border-top: 0; } .network-list span { color: var(--text-2); }
.guide-alert { margin-top: 10px; padding: 10px 12px; border-radius: 10px; color: var(--warn); background: var(--warn-fill); font-size: 12.5px; }
.guide-journey { margin: 22px 0; padding: 26px; border: 1px solid var(--hair); border-radius: var(--r-card); background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow); }
.guide-journey-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.guide-journey-head h3 { margin: 0 0 7px; color: var(--text); font-size: 23px; letter-spacing: -.02em; }
.guide-journey-head p { max-width: 74ch; margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.guide-shot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide-shot { min-width: 0; overflow: hidden; border: 1px solid var(--hair); border-radius: 18px; background: var(--surface); }
.guide-shot figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #09111d; }
.guide-shot figure::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(transparent, rgba(0,0,0,.42)); pointer-events: none; }
.guide-shot figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.guide-shot figure.guide-shot-ui img { object-position: center 20%; }
.guide-shot figure.guide-shot-ui.connect img { object-position: center 54%; }
.guide-shot figure span { position: absolute; z-index: 1; left: 14px; bottom: 12px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill); color: #fff; background: rgba(8,12,20,.68); backdrop-filter: blur(10px); font-size: 10.5px; font-weight: 600; }
.guide-shot-copy { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 13px 12px 14px; }
.guide-shot-copy > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--accent); background: var(--accent-fill); font: 700 10px var(--mono); font-style: normal; }
.guide-shot-copy h4 { margin: 1px 0 5px; color: var(--text); font-size: 14px; line-height:1.35; }
.guide-shot-copy p { margin: 0; color: var(--text-2); font-size: 11.5px; line-height: 1.5; }
.guide-shot-copy ul { display: grid; gap: 4px; margin: 9px 0 0; padding: 0; list-style: none; }
.guide-shot-copy li { position: relative; padding-left: 14px; color: var(--text-3); font-size: 10.5px; line-height:1.4; }
.guide-shot-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--up); font-weight: 700; }
.guide-proof { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 15px; background: var(--surface); }
.guide-proof div { min-width: 0; } .guide-proof b, .guide-proof span { display: block; }
.guide-proof b { color: var(--text); font-size: 12.5px; } .guide-proof span { margin-top: 2px; color: var(--text-3); font-size: 11px; }
.guide-proof > i { color: var(--accent); font-style: normal; }
.guide-custody-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 13px; padding: 13px 15px; border-radius: 14px; color: var(--text-2); background: var(--warn-fill); }
.guide-custody-note > span { flex: none; width: 21px; height: 21px; color: var(--warn); } .guide-custody-note svg { width: 21px; height: 21px; }
.guide-custody-note p { margin: 0; font-size: 12px; line-height: 1.55; } .guide-custody-note b { color: var(--text); }
.wallet-real { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(220px,.75fr); align-items: center; gap: 22px; margin: 28px 0 0; padding: 16px; border: 1px solid var(--hair); border-radius: 18px; background: var(--surface-2); overflow: hidden; }
.wallet-real img { display: block; width: 100%; max-height: 270px; object-fit: cover; object-position: center; border-radius: 12px; }
.wallet-real figcaption b, .wallet-real figcaption span { display: block; } .wallet-real figcaption b { font-size: 15px; } .wallet-real figcaption span { margin-top: 5px; color: var(--text-2); font-size: 12.5px; line-height: 1.55; }
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.exchange-picks { border: 0; padding: 0; margin: 0; min-width: 0; }
.exchange-picks legend { grid-column: 1/-1; margin-bottom: 0; color: var(--text-2); font-size: 13px; }
.exchange-picks { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.exchange-picks label { cursor: pointer; min-width: 0; }
.exchange-picks input { position: absolute; opacity: 0; pointer-events: none; }
.exchange-picks label>span { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 13px; background: var(--surface-2); transition: .18s; }
.exchange-picks img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: #fff; }
.exchange-picks b { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.exchange-picks input:checked+span { border-color: var(--accent); background: var(--accent-fill); box-shadow: 0 0 0 2px rgba(0,113,227,.08); }
.exchange-picks input:focus-visible+span { outline: 3px solid rgba(0,113,227,.32); outline-offset: 2px; }
.join-flow { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--hair); }
.join-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.join-steps>div { display: flex; gap: 10px; padding: 13px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--hair); }
.join-steps>div>b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--accent); font-size: 11px; }
.join-steps span, .join-steps strong { display: block; } .join-steps strong { margin-bottom: 2px; font-size: 13.5px; } .join-steps span { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.guide-danger { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px; padding: 15px 16px; border-radius: 14px; color: var(--down); background: var(--down-fill); }
.guide-danger>span { width: 24px; height: 24px; flex: none; } .guide-danger svg { width: 24px; height: 24px; }
.guide-danger b { display: block; font-size: 14px; } .guide-danger p { margin: 2px 0 0; color: #8c2430; font-size: 12.5px; }
.guide-cta { margin-top: 20px; }
@media (max-width: 1100px) { .guide-shot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .guide-shell { padding: 22px 20px; }
  .wallet-intro { display: block; } .safe-pill { display: inline-flex; margin-top: 12px; }
  .wallet-picks, .guide-columns, .join-steps { grid-template-columns: 1fr; }
  .wallet-real { grid-template-columns: 1fr; }
  .exchange-picks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .guide-columns { gap: 22px; } .wallet-pick { min-height: 72px; }
  .guide-journey { padding: 21px 18px; } .guide-journey-head { display: block; } .guide-journey-head .safe-pill { margin-top: 12px; }
  .guide-proof { grid-template-columns: 1fr 1fr; gap: 12px; } .guide-proof > i { display: none; }
}
@media (max-width: 620px) { .guide-shot-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .guide-journey { margin-inline: -2px; padding: 18px 14px; } .guide-journey-head h3 { font-size: 20px; } .guide-shot-copy { padding: 13px; } .guide-proof { grid-template-columns: 1fr; } }

/* ══ phone + readability pass (audit wf_da218536-fbf, 2026-09-23) ════════════════════════════════
 * Contrast: every small grey/blue/green text now clears WCAG AA 4.5:1 on white and on #f5f5f7.
 * Touch: interactive things are ≥ 40–44 px tall on phones. Inputs are 16 px so iOS does not zoom. */
:root {
  --text-2: #5c5c61; --text-3: #6e6e73;          /* 6.3:1 · 5.1:1 on white (4.7:1 on the page grey) */
  --up: #087a3b; --ink-acc: #0058b0; --ink-up: #066e34; --ink-warn: #8a4700; --ink-down: #b0182f;
  --field-line: rgba(0, 0, 0, .38);
}
html { overflow-x: clip; }                         /* the landing glow may bleed; the page never scrolls sideways */
.land { overflow-x: clip; }
a { color: var(--accent); }
.btn.primary, .menu-sheet a.pri, .tabbar a { text-decoration: none; }
.chip.acc { color: var(--ink-acc); } .chip.up { color: var(--ink-up); } .chip.warn { color: var(--ink-warn); } .chip.down { color: var(--ink-down); }
.btn.tint { color: var(--ink-acc); }
.delta.up { color: var(--up); } .delta.down { color: var(--ink-down); }
.seg a { color: #55555a; padding: 9px 15px; }
.input, select.input, .input.mono { font-size: 16px; border-color: var(--field-line); }
.input.mono { font-family: var(--mono); }
p, dd, label, li span, .cap, .cap2, .tile-note, .card-sub { text-wrap: pretty; }
.page-head p, .land-hero p.lead, .auth p { text-wrap: balance; }
.nw { white-space: nowrap; }
label.check { min-height: 44px; align-items: center; }
.join-grid > .card { align-self: start; }
.split { align-items: end; }
.side-kv dd { white-space: nowrap; }
.addr .btn[data-copy] { min-width: 7.4em; }
.affiliate-card { overflow:hidden; }
.affiliate-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.affiliate-kicker { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; color:#5c5c61; background:#f0f0f2; font-size:10px; font-weight:800; letter-spacing:.12em; }
.affiliate-hero .card-t { margin-top:12px; }
.affiliate-mark { display:grid; place-items:center; width:48px; height:48px; flex:none; border:1px solid rgba(0,0,0,.08); border-radius:15px; color:#0071e3; background:#f5f5f7; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.affiliate-mark svg { width:22px; height:22px; }
.affiliate-lead { max-width:62ch; margin:18px 0 16px; line-height:1.7; }
.ref-card { overflow:hidden; margin:18px 0 20px; padding:15px; border:1px solid rgba(0,0,0,.10); border-radius:18px; background:linear-gradient(145deg,#fff,#f5f5f7); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.ref-card-top, .ref-link, .ref-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ref-card-top { margin-bottom:10px; color:var(--text-3); font-size:10px; font-weight:800; letter-spacing:.12em; }
.ref-card-top b { display:inline-flex; align-items:center; gap:6px; color:var(--up); font-size:11px; letter-spacing:0; }
.ref-card-top i { width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 4px var(--up-fill); }
.ref-link { padding:9px; border:1px solid var(--hair); border-radius:13px; background:var(--surface); }
.ref-link code { min-width:0; overflow:hidden; color:var(--text); font:600 12px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.ref-link .btn { flex:none; min-width:112px; }
.ref-card-foot { justify-content:flex-start; flex-wrap:wrap; margin-top:11px; color:var(--text-3); font-size:11px; }
.ref-card-foot span { display:inline-flex; align-items:center; gap:5px; }
.ref-card-foot svg { width:14px; height:14px; color:var(--accent); }
.ref-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px; }
.ref-steps>div { display:flex; align-items:center; gap:8px; min-width:0; padding:9px; border:1px solid var(--hair); border-radius:12px; background:var(--surface-2); }
.ref-steps b { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; color:#fff; background:var(--accent); font-size:11px; }
.ref-steps span { color:var(--text-2); font-size:11px; font-weight:650; }
.affiliate-bonus { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; padding:16px; border:1px solid rgba(0,113,227,.18); border-radius:18px; background:linear-gradient(135deg,rgba(0,113,227,.08),rgba(175,82,222,.10)); }
.affiliate-bonus-kicker { display:block; color:var(--accent); font-size:10px; font-weight:850; letter-spacing:.13em; }
.affiliate-bonus h3 { margin:5px 0 4px; font-size:16px; letter-spacing:-.02em; }
.affiliate-bonus p { max-width:54ch; margin:0; color:var(--text-2); font-size:12px; line-height:1.65; }
.affiliate-bonus-badge { display:grid; place-items:center; width:58px; height:58px; flex:none; border-radius:17px; color:#fff; background:linear-gradient(145deg,#0071e3,#af52de); box-shadow:0 10px 22px rgba(0,113,227,.22); font-size:10px; font-weight:850; letter-spacing:.08em; transform:rotate(5deg); }
html[data-theme="dark"] .affiliate-kicker { color:#aeb8c8; background:#24262b; }
html[data-theme="dark"] .affiliate-mark { border-color:rgba(255,255,255,.12); color:#66b3ff; background:#202228; box-shadow:0 10px 24px rgba(0,0,0,.22); }
html[data-theme="dark"] .ref-card { border-color:rgba(255,255,255,.12); background:linear-gradient(145deg,#1d1f24,#17191e); box-shadow:0 18px 42px rgba(0,0,0,.22); }
html[data-theme="dark"] .affiliate-bonus { border-color:rgba(102,179,255,.24); background:linear-gradient(135deg,rgba(0,113,227,.16),rgba(175,82,222,.16)); }
@media (max-width:620px) { .ref-link { align-items:stretch; flex-direction:column; } .ref-link code { width:100%; } .ref-link .btn { width:100%; } .ref-steps { gap:6px; } .ref-steps>div { flex-direction:column; justify-content:center; text-align:center; padding:9px 5px; } }

/* Consistent Apple-style spacing rhythm: cards and form controls must breathe on every page. */
.grid { row-gap:24px; }
.sec + .sec { margin-top:56px; }
.grid > .card, .grid > .s5, .grid > .s7 { min-width:0; }
.card-h { margin-bottom:20px; }
.field + .field { margin-top:19px; }
.join-grid { row-gap:24px; }
.signup-form-card .field:first-of-type { margin-top:0; }
.wallet-login-grid { row-gap:16px; }
@media (max-width:900px) {
  .grid { row-gap:18px; }
  .sec + .sec { margin-top:42px; }
  .page-head { margin-bottom:24px; }
  .card-h { margin-bottom:18px; }
  .field + .field { margin-top:18px; }
}
.foot-site a, .auth > p.cap2 a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
.tile-note a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.sec-h h2 { font-size: clamp(20px, 5.6vw, 26px); min-width: 0; }
.sec-h > a { padding: 10px 4px; margin: -10px -4px; flex-shrink: 0; }

/* chart: reveal the drawn line with a clip instead of a dash — the dash length is computed in
 * user units while vector-effect keeps the stroke in screen units, which left a gap at wide widths */
.chart .line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.chart svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease); }
.chart.in svg { clip-path: inset(0 0 0 0); }
.chart.in .line { animation: none; }
@media (prefers-reduced-motion: reduce) { .chart svg { clip-path: none; } }

@media (max-width: 900px) {
  .nav .btn.sm { min-height: 40px; padding: 0 16px; }
  .brand { min-height: 44px; }
  .btn { min-height: 44px; } .btn.sm { min-height: 40px; }
  .tabbar a { font-size: 11.5px; color: #636368; }
  .tabbar a[aria-current="page"] { color: var(--ink-acc); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .kpi-l { text-wrap: balance; }
}
/* activity rows: on narrow phones the amount + status drop under the text instead of squeezing it */
@media (max-width: 420px) {
  .act li { flex-wrap: wrap; row-gap: 6px; }
  .act .at { flex: 1 1 calc(100% - 50px); }
  .act .av { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; padding-left: 50px; text-align: left; }
}
/* tables → one card per row on phones (history: time|item|detail|usdt|status · statement: time|item|usdt|nav|units) */
@media (max-width: 560px) {
  [data-panel="history"] .tbl, .statement .tbl { margin: 0; overflow: visible; }
  [data-panel="history"] .tbl table, [data-panel="history"] .tbl tbody, .statement .tbl table, .statement .tbl tbody { display: block; }
  [data-panel="history"] .tbl thead, .statement .tbl thead { display: none; }
  [data-panel="history"] .tbl tr, .statement .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 14px 0; border-top: 1px solid var(--hair); }
  [data-panel="history"] .tbl tbody tr:first-child, .statement .tbl tbody tr:first-child { border-top: 0; padding-top: 2px; }
  [data-panel="history"] .tbl td, .statement .tbl td { display: block; border: 0; padding: 0; min-width: 0; }
  [data-panel="history"] .tbl td:nth-child(1) { grid-column: 1; grid-row: 3; font-size: 12.5px; color: var(--text-3); white-space: normal !important; }
  [data-panel="history"] .tbl td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; }
  [data-panel="history"] .tbl td:nth-child(3) { grid-column: 1; grid-row: 2; }
  [data-panel="history"] .tbl td:nth-child(4) { grid-column: 2; grid-row: 1; font-weight: 600; }
  [data-panel="history"] .tbl td:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; text-align: right; align-self: start; }
  .statement .tbl td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--text-3); white-space: normal !important; }
  .statement .tbl td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .statement .tbl td:nth-child(3) { grid-column: 2; grid-row: 1; font-weight: 600; }
  .statement .tbl td:nth-child(4) { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--text-2); }
  .statement .tbl td:nth-child(5) { grid-column: 2; grid-row: 3; font-size: 12.5px; color: var(--text-2); }
  .statement .tbl td:nth-child(4)::before { content: "NAV "; } .statement .tbl td:nth-child(5)::before { content: "หน่วย "; }
  tbody tr:hover td { background: none; }
}
/* auth cards: a long name on a full-width button wraps instead of spilling past the pill; titles break at phrases */
.btn.block { white-space: normal; text-wrap: balance; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; height: auto; }
.auth h1 { text-wrap: balance; overflow-wrap: anywhere; }

/* monthly statement: readable on screen, clean on paper (browser Print → Save as PDF) */
.statement .page-head h1 { text-wrap: balance; }
.statement .kv dd { text-wrap: pretty; }
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  .nav, .tabbar, .toast, .menu, .statement form, .statement .btn, .foot-site { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 1px solid #d2d2d7; break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .statement tr { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  .tbl { overflow: visible !important; margin: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── landing hero: full-bleed band ──────────────────────────────────────
 * The gradient used to live inside main (max-width 1208px) and .land clipped it at the container
 * edge, so wide screens showed a boxed gradient with hard sides and a plain header strip above it.
 * Now the band is a normal block (100% of the body, no 100vw so no sideways scroll), pulled up under
 * the translucent sticky header by exactly the header height; only .hero-in keeps the page width. */
.hero-band { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); }
.hero-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #f4f1eb; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; }
.hero-photo span { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250, 249, 247, .99) 0%, rgba(250, 249, 247, .96) 39%, rgba(250, 249, 247, .52) 57%, rgba(250, 249, 247, 0) 76%); }
.hero-band .land-hero > .reveal:first-child { position: relative; z-index: 1; padding: 18px 0; color: #1d1d1f; }
.hero-band .land-hero h1 { color: #1d1d1f; text-shadow: none; }
.hero-band .land-hero .grad { background: linear-gradient(95deg, #52633c 4%, #788a51 48%, #a48639); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-band .land-hero p.lead { color: #515154; text-shadow: none; }
.hero-band .land-hero .chip.acc { color: #4e5e37; background: rgba(91, 110, 62, .11); border-color: rgba(91, 110, 62, .16); }
html[data-theme="light"] .hero-band .land-hero .btn:not(.primary) { color: #fff; background: rgba(29, 29, 31, .88); border-color: transparent; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
html[data-theme="light"] .hero-band .land-hero .btn:not(.primary):hover { background: rgba(29, 29, 31, 1); }
.hero-band .glow { inset: -80px -6% auto; height: calc(100% + 80px); min-height: 600px; opacity: .62;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.hero-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 28px; }
.hero-band + main { padding-top: 8px; }
@media (max-width: 900px) { .hero-in { padding-top: 22px; padding-bottom: 18px; } }
@media (max-width: 900px) { .hero-photo img { object-position: 70% center; } .hero-photo span { background: linear-gradient(90deg, rgba(250, 249, 247, .98), rgba(250, 249, 247, .78) 62%, rgba(250, 249, 247, .28)); } .hero-band .land-hero > .reveal:first-child { padding: 18px 0; } }
@media (prefers-reduced-motion: reduce) { .hero-band .glow { animation: none; } }
@media print { .hero-band { margin-top: 0; padding-top: 0; } .hero-band .glow { display: none; } }

/* ── explainer video (#guide) ─────────────────────────────────────────── */
.intro-video { margin: 0 0 var(--gap); padding: 0; overflow: hidden; }
.intro-frame { position: relative; aspect-ratio: 16 / 9; background: #f5f5f7; }
.intro-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.intro-video figcaption { display: flex; flex-direction: column; gap: 4px; padding: 18px var(--pad) 20px; }
.intro-video figcaption b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.intro-video figcaption span { font-size: 14px; color: var(--text-2); }
.intro-video figcaption small { font-size: 12.5px; color: var(--text-3); line-height: 1.5; text-wrap: pretty; }
@media (max-width: 900px) { .intro-video figcaption { padding: 14px 18px 16px; } }
/* video: compact (owner: "วีดีโอใหญ่ไปมาก") — 600 px beside its caption on desktop, 560 px centred on tablets, full width on phones */
@media (min-width: 900px) {
  .intro-video { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: center; }
  .intro-video .intro-frame { border-radius: var(--r-card) 0 0 var(--r-card); overflow: hidden; }
  .intro-video figcaption { padding: 28px 36px; gap: 8px; }
  .intro-video figcaption b { font-size: 21px; letter-spacing: -.015em; }
  .intro-video figcaption span { font-size: 15px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .intro-video { background: var(--surface); }
  .intro-video .intro-frame { max-width: 560px; margin: 20px auto 0; border-radius: var(--r-sm); overflow: hidden; }
  .intro-video figcaption { max-width: 560px; margin: 0 auto; padding-left: 0; padding-right: 0; }
}

/* ── public pricing, Web3 and FAQ ───────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.price-main, .price-card { min-width: 0; }
.price-main { padding: 26px 28px; background: linear-gradient(145deg, #fff, #f3f8ff); }
.price-value { margin: 8px 0 10px; font-size: clamp(34px, 4vw, 50px); line-height: 1; font-weight: 620; letter-spacing: -.04em; }
.price-value small { color: var(--text-3); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.price-main p, .price-card small { color: var(--text-2); line-height: 1.55; }
.price-main p { max-width: 50ch; margin: 0; font-size: 13.5px; }
.price-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px; }
.price-card>b { font-size: 27px; letter-spacing: -.025em; }
.price-card>span { font-size: 14px; font-weight: 600; }
.price-card>small { margin-top: 5px; font-size: 12.5px; }
.trust-strip { display: flex; align-items: center; gap: 16px; margin-top: var(--gap); padding: 18px 20px; border: 1px solid rgba(0,113,227,.16); border-radius: var(--r-card); background: rgba(0,113,227,.055); }
.trust-strip>span { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; color: var(--accent); background: #fff; }
.trust-strip>span svg { width: 23px; height: 23px; }
.trust-strip>div { flex: 1; min-width: 0; }
.trust-strip b { font-size: 15px; }
.trust-strip p { margin: 3px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.trust-strip .btn svg { width: 14px; height: 14px; }

.web3-story { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.web3-visual { margin: 0; padding: 0; overflow: hidden; background: #f6f8fb; }
.web3-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.web3-copy h2 { margin: 5px 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.web3-copy>p { margin: 0 0 20px; color: var(--text-2); line-height: 1.65; }
.check-list { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--up); background: var(--up-fill); font-size: 12px; font-weight: 800; }
.check-list b, .check-list span { display: block; }
.check-list b { font-size: 14.5px; } .check-list span { margin-top: 1px; color: var(--text-2); font-size: 12.5px; }
.web3-copy .cap2 { display: block; margin-top: 15px; line-height: 1.5; }

.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq-grid details { padding: 0; overflow: hidden; }
.faq-grid summary { position: relative; padding: 20px 52px 20px 22px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.4; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 25px; font-weight: 400; }
.faq-grid details[open] summary::after { content: "−"; }
.faq-grid details[open] summary { padding-bottom: 10px; }
.faq-grid p { margin: 0; padding: 0 22px 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.65; }

.web3-field { display: flex; align-items: stretch; gap: 8px; }
.web3-field .input { min-width: 0; }
.web3-connect { flex: none; min-width: 126px; color: var(--accent); border-color: rgba(0,113,227,.24); background: var(--accent-fill); }
.web3-connect:disabled { opacity: .65; cursor: wait; }
.wallet-status { min-height: 18px; color: var(--text-3); }
.wallet-status.ok { color: var(--up); } .wallet-status.err { color: var(--down); }

@media (max-width: 1050px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-main { grid-column: 1 / -1; }
  .nav-links a { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 900px) {
  .web3-story { grid-template-columns: 1fr; }
  .web3-copy { padding: 0 4px; }
}
@media (max-width: 620px) {
  .pricing-grid, .faq-grid { grid-template-columns: 1fr; }
  .price-main { grid-column: auto; }
  .trust-strip { align-items: flex-start; flex-wrap: wrap; }
  .trust-strip>div { flex-basis: calc(100% - 60px); }
  .trust-strip .btn { margin-left: 58px; }
  .web3-field { flex-direction: column; }
  .web3-connect { width: 100%; }
}

/* compounding-only status line under the member side panel (owner, 2026-09-24) */
.compound-note { margin: -8px 0 18px; line-height: 1.5; }
.deposit-visual { margin: 22px 0 0; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--surface-2); }
.deposit-visual img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center; }
.deposit-visual figcaption { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.deposit-visual figcaption b { font-size: 15px; }
.deposit-visual figcaption span { color: var(--text-2); font-size: 12.5px; line-height: 1.55; }

/* ── premium monochrome hero + authentication ───────────────────────── */
.hero-photo { background: #f2f2f0; }
.hero-photo span { background: linear-gradient(90deg, rgba(248,248,246,.99) 0%, rgba(248,248,246,.95) 40%, rgba(248,248,246,.40) 62%, rgba(248,248,246,.04) 82%); }
.hero-band .land-hero .grad { background: none; color: #111113; -webkit-text-fill-color: currentColor; }
.hero-band .land-hero .chip.acc { color: #343437; background: rgba(255,255,255,.76); border: 1px solid rgba(0,0,0,.10); backdrop-filter: blur(14px); }
.hero-band .land-hero .btn:not(.primary) { color: #fff; background: #1d1d1f; border: 1px solid #1d1d1f; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.hero-band .land-hero .btn:not(.primary):hover { color: #fff; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hero-band .land-hero > .card { border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.86); backdrop-filter: saturate(140%) blur(22px); box-shadow: 0 24px 70px rgba(0,0,0,.14); }

.auth { max-width: 500px; }
.auth::before { content: ""; position: fixed; inset: var(--nav-h) 0 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 8%, rgba(180,158,112,.15), transparent 34%), radial-gradient(circle at 82% 86%, rgba(80,95,67,.10), transparent 32%); }
.auth .card { border: 1px solid rgba(0,0,0,.06); box-shadow: 0 24px 70px rgba(0,0,0,.10); }
.wallet-login-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.wallet-login { appearance: none; min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 9px 13px; border: 1px solid var(--hair-2); border-radius: 15px; background: var(--surface-2); color: var(--text); font: 600 14px var(--font); cursor: pointer; transition: transform .15s var(--ease), border-color .2s, box-shadow .2s; }
.wallet-login:hover { transform: translateY(-1px); border-color: rgba(0,113,227,.38); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.wallet-login:disabled { opacity: .55; cursor: wait; transform: none; }
.wallet-login img { width: 34px; height: 34px; object-fit: contain; border-radius: 9px; background: #fff; }
.signup-wallets { display: flex; align-items: center; gap: 9px; margin-top: 15px; color: var(--text-3); font-size: 12px; }
.signup-wallets img { width: 28px; height: 28px; padding: 3px; object-fit: contain; border: 1px solid var(--hair); border-radius: 9px; background: #fff; }

@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]){ color-scheme: dark; --bg: #090a0c; --surface: #151619; --surface-2: #1b1c20; --surface-3: #222329; --text: #f5f5f7; --text-2: #b6b6bc; --text-3: #929298; --hair: rgba(255,255,255,.10); --hair-2: rgba(255,255,255,.20); --track: rgba(255,255,255,.10); --field-line: rgba(255,255,255,.28); --shadow: 0 1px 2px rgba(0,0,0,.30), 0 14px 38px rgba(0,0,0,.24); }
html:not([data-theme="light"]) .nav{ background: rgba(14,15,17,.78); }
html:not([data-theme="light"]) body.scrolled .nav{ background: rgba(14,15,17,.94); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.5); }
html:not([data-theme="light"]) .seg{ background: rgba(255,255,255,.07); }html:not([data-theme="light"]) .seg-ind{ background: #2b2c31; }
html:not([data-theme="light"]) .btn{ color: var(--text); background: rgba(255,255,255,.10); }html:not([data-theme="light"]) .btn:hover{ background: rgba(255,255,255,.15); }
html:not([data-theme="light"]) .input, html:not([data-theme="light"]) select.input{ background: #1b1c20; color: var(--text); }
html:not([data-theme="light"]) .input::placeholder{ color: #77777e; }
html:not([data-theme="light"]) .menu-sheet{ background: rgba(27,28,32,.97); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px var(--hair); }
html:not([data-theme="light"]) .menu.members summary{ background: rgba(255,255,255,.07); }
html:not([data-theme="light"]) .menu.members[open] summary{ background: rgba(255,255,255,.12); }
html:not([data-theme="light"]) .auth .card{ border-color: var(--hair); box-shadow: 0 28px 80px rgba(0,0,0,.44); }
html:not([data-theme="light"]) .wallet-login{ background: #1b1c20; }
html:not([data-theme="light"]) .price-main{ background: linear-gradient(145deg,#17181b,#111820); }
html:not([data-theme="light"]) .trust-strip>span{ background: #24262b; }
html:not([data-theme="light"]) .chart .base{ stroke: rgba(255,255,255,.18); }
html:not([data-theme="light"]) .chart .hdot{ background: #151619; }
html:not([data-theme="light"]) .hero-photo img{ filter: brightness(.55) contrast(1.08); }
html:not([data-theme="light"]) .hero-photo span{ background: linear-gradient(90deg, rgba(9,10,12,.98) 0%, rgba(9,10,12,.92) 42%, rgba(9,10,12,.42) 65%, rgba(9,10,12,.10) 86%); }
html:not([data-theme="light"]) .hero-band .land-hero > .reveal:first-child, html:not([data-theme="light"]) .hero-band .land-hero h1, html:not([data-theme="light"]) .hero-band .land-hero .grad{ color: #f5f5f7; }
html:not([data-theme="light"]) .hero-band .land-hero p.lead{ color: #c6c6cb; }
html:not([data-theme="light"]) .hero-band .land-hero .chip.acc{ color: #ededf0; background: rgba(20,21,24,.72); border-color: rgba(255,255,255,.15); }
html:not([data-theme="light"]) .hero-band .land-hero .btn:not(.primary){ color: #111113; background: #fff; border-color: #fff; }
html:not([data-theme="light"]) .hero-band .land-hero .btn:not(.primary):hover{ color: #111113; background: #ececf0; }
html:not([data-theme="light"]) .hero-band .land-hero > .card{ border-color: rgba(255,255,255,.12); background: rgba(20,21,24,.84); box-shadow: 0 28px 80px rgba(0,0,0,.42); }
}
@media (max-width: 620px) { .wallet-login-grid { grid-template-columns: 1fr; } }
.theme-toggle { min-width: 58px; padding-inline: 11px; }
.error-code { margin:4px 0 2px; font-size:clamp(58px,10vw,92px); line-height:1; font-weight:700; letter-spacing:-.06em; color:var(--accent); }
.error-actions { justify-content:center; margin-top:24px; }
.secure-dialog { width:min(520px,calc(100% - 28px)); max-height:min(86vh,760px); padding:26px; border:1px solid var(--hair); border-radius:24px; color:var(--text); background:var(--surface); box-shadow:0 32px 100px rgba(0,0,0,.32); overflow:auto; }
.secure-dialog::backdrop { background:rgba(4,6,9,.62); backdrop-filter:blur(12px); }
.secure-dialog[open] { margin:auto; animation:modal-in .24s var(--spring) both; }
body.modal-open, body:has(dialog[open]) { overflow: hidden; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:14px; }
.dialog-head h2 { margin:2px 0 0; font-size:24px; letter-spacing:-.02em; }
.icon-close { appearance:none; width:38px; height:38px; flex:none; border:0; border-radius:50%; color:var(--text); background:var(--surface-3); cursor:pointer; font-size:24px; line-height:1; }
.tfa-launch { margin-top:8px; }
.nav-history { margin-bottom:var(--gap); }
.range-seg { margin:0; }
.range-seg button { appearance:none; border:0; border-radius:var(--r-pill); padding:6px 11px; color:var(--text-2); background:transparent; cursor:pointer; font:600 12px var(--font); }
.range-seg button.on { color:var(--text); background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.10); }
.positions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.position-card { padding:22px; }
.position-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.position-head h3 { margin:0; font-size:18px; }
.position-head .chip { margin-left:auto; }
.coin-badge { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#20211f,#55735f); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(25,35,29,.18); font-size:12px; font-weight:700; }
.profit-calendar { margin-bottom:var(--gap); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.calendar-day { min-height:62px; display:flex; flex-direction:column; justify-content:space-between; padding:9px; border:1px solid var(--hair); border-radius:12px; background:var(--surface-2); }
.calendar-day span { color:var(--text-3); font-size:11px; }
.calendar-day b { font-size:12px; }
.calendar-day.up { background:var(--up-fill); border-color:rgba(52,199,89,.2); }
.calendar-day.down { background:var(--down-fill); border-color:rgba(255,59,48,.18); }
.statement-link { display:flex; align-items:center; gap:14px; }
.statement-link p { margin:2px 0 0; }
.statement-link .btn { margin-left:auto; }
@media (max-width:700px) { .positions-grid { grid-template-columns:1fr; } .calendar-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .statement-link { align-items:flex-start; flex-wrap:wrap; } .statement-link .btn { width:100%; margin-left:0; } }

/* Authentication is a focused product surface, not a long stack of unrelated controls. */
.auth { max-width:1040px; margin:clamp(24px,5vh,64px) auto 0; }
.auth-shell { display:grid; grid-template-columns:minmax(300px,.88fr) minmax(430px,1.12fr); padding:0; overflow:hidden; }
.auth .auth-shell { padding:0; text-align:initial; }
.auth-art { position:relative; min-height:720px; overflow:hidden; background:#111; color:#fff; }
.auth-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.35) contrast(1.04) brightness(.72); }
.auth-art>span { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.82) 100%); }
.auth-art>div { position:absolute; z-index:1; inset:auto 34px 36px; }
.auth-art h2 { margin:10px 0 10px; font-size:clamp(30px,3.2vw,42px); line-height:1.04; letter-spacing:-.04em; }
.auth-art p { margin:0; max-width:30em; color:rgba(255,255,255,.78); font-size:14px; }
.auth-kicker { display:inline-flex; color:var(--text-3); font-size:11px; font-weight:700; letter-spacing:.14em; }
.auth-art .auth-kicker { color:rgba(255,255,255,.7); }
.auth-panel { display:flex; flex-direction:column; justify-content:center; padding:42px clamp(32px,5vw,58px); text-align:left; background:var(--surface); }
.auth-panel .auth-logo { width:64px; height:64px; margin:0 0 18px; }
.auth-panel h1 { font-size:36px; margin-bottom:6px; }
.auth-panel>p { text-align:left; }
.auth-panel form { margin-top:14px; }
.auth-panel .or { margin:20px 0 10px; }
.auth-panel .alt { text-align:center; line-height:1.7; }
.auth-back { text-align:center; margin-top:18px; }
/* ── login modal (desktop): the same auth card, floating ─────────────── */
.login-modal { border:0; padding:0; background:transparent; width:min(1020px,94vw); max-width:94vw; overflow:visible; }
.login-modal::backdrop { background:rgba(4,6,9,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.login-modal .modal-auth { position:relative; max-width:none; margin:0; }
.login-modal .auth-shell { margin:0; max-height:min(88vh,780px); overflow:auto; box-shadow:0 40px 110px rgba(0,0,0,.45); }
.login-modal .auth-art { min-height:480px; }
.modal-x { position:absolute; z-index:5; top:20px; right:20px; width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  color:var(--text-2); background:var(--surface-3); font-size:16px; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.modal-x:hover { color:var(--text); }
/* modal open: background page must not move (dialog is top-layer; contain chain + lock body) */
.login-modal .auth-shell { overscroll-behavior:contain; }
body:has(dialog.login-modal[open]), body.modal-open { overflow:hidden; }
/* 5th wallet (Phantom) spans the full grid row */
.wallet-login-grid [data-wallet-login-sol] { grid-column:1 / -1; }
.login-modal[open] .auth-shell { animation:modal-in .32s var(--spring) both; }
@keyframes modal-in { from { opacity:0; transform:translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .login-modal[open] .auth-shell { animation:none; } }
.wallet-login-grid { gap:14px; }
.wallet-login { min-height:52px; padding:8px 11px; border-radius:13px; background:var(--surface-2); font-size:13px; }
.wallet-login img { width:30px; height:30px; }
.wallet-status { display:block; margin-top:9px; line-height:1.45; }
.auth::before { background:radial-gradient(circle at 12% 8%,rgba(0,0,0,.045),transparent 32%),radial-gradient(circle at 88% 90%,rgba(120,120,128,.08),transparent 34%); }
.join-intro { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr); align-items:center; min-height:300px; padding:0; overflow:hidden; padding:0 !important; }
.join-intro>div { padding:38px 42px; }
.join-intro h1 { max-width:12em; margin:10px 0 10px; font-size:clamp(34px,5vw,54px); line-height:1.03; letter-spacing:-.045em; }
.join-intro p { color:var(--text-2); font-size:17px; }
.join-intro>img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.join-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.join-trust span { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:var(--surface-3); color:var(--text-2); font-size:12px; }
.join-trust svg { width:15px; height:15px; }
.join-title { margin-top:42px; }
.signup-eyebrow, .signup-card-kicker { display:block; color:var(--text-3); font-size:10px; font-weight:800; letter-spacing:.12em; }
.signup-progress { display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--text-3); font-size:11px; font-weight:650; }
.signup-progress span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.signup-progress b { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--hair-2); border-radius:50%; font-size:10px; }
.signup-progress .is-active { color:var(--text); }
.signup-progress .is-active b { color:#fff; border-color:var(--accent); background:var(--accent); }
.signup-progress i { width:32px; height:1px; background:var(--hair-2); }
.signup-referral { margin-bottom:var(--gap); border-color:rgba(0,113,227,.18); background:linear-gradient(145deg,var(--surface),var(--surface-2)); }
.signup-referral h3 { margin:7px 0 4px; font-size:18px; }
.signup-referral .cap { margin:0; }
.signup-form-card .card-h { margin-bottom:22px; }
.signup-form-card .signup-card-kicker { margin-bottom:7px; color:var(--accent); }
.signup-wallets { flex-wrap:wrap; padding:12px; border:1px solid var(--hair); border-radius:15px; background:var(--surface-2); }
.signup-wallet-label { width:100%; color:var(--text-3); font-size:11px; font-weight:700; }
.signup-wallet-icons { display:flex; align-items:center; gap:6px; }
.signup-wallet-icons img { width:30px; height:30px; }
.signup-wallets .signup-wc-qr { margin-left:auto; }
html[data-theme="dark"] .signup-referral { border-color:rgba(41,151,255,.25); background:linear-gradient(145deg,#191b21,#14161b); }
html[data-theme="dark"] .auth-panel { background:#151619; }
html[data-theme="dark"] .auth-art>img { filter:saturate(.28) contrast(1.08) brightness(.55); }
html[data-theme="dark"] .auth::before { background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.04),transparent 32%); }
@media (max-width:760px) {
  .auth { margin:16px auto 0; }
  .auth-shell { grid-template-columns:1fr; }
  .auth-art { min-height:190px; }
  .auth-art>div { inset:auto 22px 20px; }
  .auth-art h2 { margin:6px 0; font-size:28px; }
  .auth-art p { display:none; }
  .auth-panel { padding:28px 22px 30px; }
  .auth-panel .auth-logo { width:52px; height:52px; margin-bottom:12px; }
  .auth-panel h1 { font-size:30px; }
  .wallet-login-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wallet-login { flex-direction:column; justify-content:center; min-height:70px; gap:5px; }
  .join-intro { grid-template-columns:1fr; }
  .join-intro>div { padding:28px 24px; }
  .join-intro>img { min-height:190px; max-height:220px; }
  .join-trust { gap:6px; }
  .signup-progress { gap:5px; justify-content:space-between; font-size:10px; }
  .signup-progress i { width:14px; }
  .signup-wallets .signup-wc-qr { width:100%; margin:4px 0 0; }
}
html[data-theme="light"] { color-scheme:light; --bg:#f5f5f7; --surface:#fff; --surface-2:#fbfbfd; --surface-3:#f0f0f2; --text:#1d1d1f; --text-2:#515154; --text-3:#6e6e73; --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.18); --track:rgba(0,0,0,.07); --accent:#0071e3; --accent-hover:#0077ed; --accent-fill:rgba(0,113,227,.10); }
html[data-theme="ape-pink"] { color-scheme:dark; --bg:#120910; --surface:#1d1019; --surface-2:#281420; --surface-3:#34182a; --text:#fff1f7; --text-2:#e1b9cb; --text-3:#bd8ea7; --hair:rgba(255,130,182,.18); --hair-2:rgba(255,130,182,.30); --track:rgba(255,130,182,.12); --accent:#ff4f9a; --accent-hover:#ff79b3; --accent-fill:rgba(255,79,154,.18); }
html[data-theme="ape-blue"] { color-scheme:dark; --bg:#07101d; --surface:#0f1b2c; --surface-2:#14243a; --surface-3:#1b3150; --text:#edf7ff; --text-2:#b8d1e8; --text-3:#86a7c8; --hair:rgba(71,169,255,.18); --hair-2:rgba(71,169,255,.30); --track:rgba(71,169,255,.12); --accent:#38a5ff; --accent-hover:#71c1ff; --accent-fill:rgba(56,165,255,.18); }
html[data-theme="ape-pink"] body, html[data-theme="ape-blue"] body { background-image:radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, transparent) 0 2px, transparent 2px 12px); }
html[data-theme="ape-pink"] .brand img { filter:hue-rotate(295deg) saturate(1.7) brightness(1.08); }
html[data-theme="ape-blue"] .brand img { filter:hue-rotate(165deg) saturate(1.45) brightness(1.08); }
html[data-theme="dark"] .brand img { filter:brightness(.82) contrast(1.18); }
html[data-theme="light"] body { background:linear-gradient(180deg,#fff 0,#f7f7f9 46%,#f0f0f2 100%); color:var(--text); }
html[data-theme="light"] .hero-photo img { filter:none; }
html[data-theme="light"] .nav { background:rgba(255,255,255,.88); border-color:rgba(0,0,0,.07); box-shadow:0 1px 18px rgba(0,0,0,.045); }
html[data-theme="light"] .card { border:1px solid rgba(0,0,0,.065); box-shadow:0 1px 2px rgba(0,0,0,.035),0 18px 54px rgba(0,0,0,.07); }
html[data-theme="light"] .hero-band .land-hero > .card { background:rgba(255,255,255,.88); border-color:rgba(255,255,255,.92); box-shadow:0 28px 90px rgba(43,49,58,.16); }
html[data-theme="light"] .web3-visual { background:#f5f5f7; box-shadow:0 28px 70px rgba(0,0,0,.10); }
html[data-theme="light"] .glow { opacity:.22; background:radial-gradient(42% 52% at 20% 30%,rgba(0,113,227,.13),transparent 70%),radial-gradient(35% 45% at 80% 20%,rgba(150,150,155,.14),transparent 70%); }
html[data-theme="dark"] { color-scheme: dark; --bg:#090a0c; --surface:#151619; --surface-2:#1b1c20; --surface-3:#222329; --text:#f5f5f7; --text-2:#b6b6bc; --text-3:#929298; --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.20); --track:rgba(255,255,255,.10); }
html[data-theme="dark"] body { background:var(--bg); color:var(--text); }
html[data-theme="dark"] .nav { background:rgba(14,15,17,.86); }
html[data-theme="dark"] .input, html[data-theme="dark"] select.input { background:#1b1c20; color:var(--text); }
html[data-theme="dark"] .hero-photo img { filter:brightness(.55) contrast(1.08); }
html[data-theme="dark"] .hero-photo span { background:linear-gradient(90deg,rgba(9,10,12,.98) 0%,rgba(9,10,12,.92) 42%,rgba(9,10,12,.42) 65%,rgba(9,10,12,.10) 86%); }
html[data-theme="dark"] .hero-band .land-hero > .reveal:first-child,
html[data-theme="dark"] .hero-band .land-hero h1,
html[data-theme="dark"] .hero-band .land-hero .grad { color:#f5f5f7; }
html[data-theme="dark"] .hero-band .land-hero p.lead { color:#c6c6cb; }
html[data-theme="dark"] .hero-band .land-hero .chip.acc { color:#ededf0; background:rgba(20,21,24,.72); border-color:rgba(255,255,255,.15); }
html[data-theme="dark"] .hero-band .land-hero .btn:not(.primary) { color:#111113; background:#fff; border-color:#fff; }
html[data-theme="dark"] .hero-band .land-hero > .card { color:var(--text); border-color:rgba(255,255,255,.12); background:rgba(20,21,24,.88); box-shadow:0 28px 80px rgba(0,0,0,.42); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin:24px 0 0; }
.payout-history { padding:0 18px; }
.payout-history-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--hair); }
.payout-history-row:last-child { border-bottom:0; }
.payout-history-row span, .payout-history-row small { display:block; margin-top:5px; }
.payout-history-amt { display:flex; align-items:flex-end; flex-direction:column; gap:7px; white-space:nowrap; }
.fee-note { margin:10px 0 0; padding:10px 12px; border:1px solid var(--hair); border-radius:12px; color:var(--text-2); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.gallery-card { overflow:hidden; padding:0; }
.gallery-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .25s ease, filter .25s ease; }
.gallery-card a:first-child { display:block; overflow:hidden; }
.gallery-card a:first-child:hover img { transform:scale(1.025); filter:saturate(1.08); }
.gallery-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px 16px; }
@media (max-width:900px) { .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .gallery-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .payout-history-row { align-items:flex-start; flex-direction:column; gap:8px; } .payout-history-amt { align-items:flex-start; flex-direction:row; } }

/* Theme finishing pass: auth, wallet, share and utility controls must never fall back to Light. */
html[data-theme="dark"] .toast { background:rgba(21,22,25,.96); color:var(--text); border-color:var(--hair); }
html[data-theme="dark"] .input, html[data-theme="dark"] select.input, html[data-theme="dark"] textarea.input { border-color:var(--hair-2); background:var(--surface-2); color:var(--text); }
html[data-theme="dark"] .menu-sheet, html[data-theme="dark"] .wallet-login, html[data-theme="dark"] .wc-launch { color:var(--text); background:var(--surface-2); border-color:var(--hair); }
html[data-theme="dark"] .seg-ind { background:var(--surface-3); }
html[data-theme="ape-pink"] .btn.primary { color:#230d18; background:#ff79b3; }
html[data-theme="ape-pink"] .btn.primary:hover { background:#ff9bc7; }
html[data-theme="ape-blue"] .btn.primary { color:#061421; background:#71c1ff; }
html[data-theme="ape-blue"] .btn.primary:hover { background:#9bd6ff; }
html[data-theme="ape-pink"] .btn:not(.primary):not(.tint), html[data-theme="ape-blue"] .btn:not(.primary):not(.tint) { color:var(--text); background:color-mix(in srgb, var(--accent) 13%, transparent); border-color:var(--hair); }
html[data-theme="ape-pink"] .btn:not(.primary):not(.tint):hover, html[data-theme="ape-blue"] .btn:not(.primary):not(.tint):hover { background:color-mix(in srgb, var(--accent) 24%, transparent); }
html[data-theme="ape-pink"] .btn.tint, html[data-theme="ape-blue"] .btn.tint { color:var(--accent-hover); background:var(--accent-fill); border-color:var(--hair); }
html[data-theme="ape-pink"] .input, html[data-theme="ape-pink"] select.input, html[data-theme="ape-pink"] textarea.input,
html[data-theme="ape-blue"] .input, html[data-theme="ape-blue"] select.input, html[data-theme="ape-blue"] textarea.input { color:var(--text); background:var(--surface-2); border-color:var(--hair-2); }
html[data-theme="ape-pink"] .input:focus, html[data-theme="ape-blue"] .input:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-theme="ape-pink"] .auth-panel, html[data-theme="ape-blue"] .auth-panel,
html[data-theme="ape-pink"] .auth .card, html[data-theme="ape-blue"] .auth .card,
html[data-theme="ape-pink"] .join-intro, html[data-theme="ape-blue"] .join-intro { color:var(--text); background:linear-gradient(145deg,var(--surface),var(--surface-2)); border-color:var(--hair); }
html[data-theme="ape-pink"] .join-character { background:radial-gradient(circle at 50% 38%,#592743,#271321 54%,#160b12); }
html[data-theme="ape-blue"] .join-character { background:radial-gradient(circle at 50% 38%,#244e78,#12263d 54%,#08121f); }
html[data-theme="ape-pink"] .wallet-login, html[data-theme="ape-blue"] .wallet-login,
html[data-theme="ape-pink"] .wc-launch, html[data-theme="ape-blue"] .wc-launch { color:var(--text); background:var(--surface-2); border-color:var(--hair); }
html[data-theme="ape-pink"] .wallet-login:hover, html[data-theme="ape-blue"] .wallet-login:hover { border-color:var(--accent); background:var(--surface-3); }
html[data-theme="ape-pink"] .wallet-login img, html[data-theme="ape-blue"] .wallet-login img,
html[data-theme="ape-pink"] .signup-wallets img, html[data-theme="ape-blue"] .signup-wallets img { background:var(--surface-3); }
html[data-theme="ape-pink"] .secure-dialog, html[data-theme="ape-blue"] .secure-dialog,
html[data-theme="ape-pink"] .share-dialog-shell, html[data-theme="ape-blue"] .share-dialog-shell { color:var(--text); background:linear-gradient(145deg,var(--surface),var(--surface-2)); border-color:var(--hair); }
html[data-theme="ape-pink"] .share-modal .share-actions, html[data-theme="ape-blue"] .share-modal .share-actions,
html[data-theme="ape-pink"] .share-facts, html[data-theme="ape-blue"] .share-facts { background:var(--surface-2); border-color:var(--hair); }
html[data-theme="ape-pink"] .share-fact, html[data-theme="ape-blue"] .share-fact { background:var(--surface); border-color:var(--hair); color:var(--text); }
html[data-theme="ape-pink"] .seg-ind, html[data-theme="ape-blue"] .seg-ind { background:var(--surface-3); }
html[data-theme="ape-pink"] .theme-toggle { color:#230d18; background:#ff79b3; border-color:#ff9bc7; }
html[data-theme="ape-blue"] .theme-toggle { color:#061421; background:#71c1ff; border-color:#9bd6ff; }
html[data-theme="dark"] .theme-toggle { color:#fff; background:#0a84ff; border-color:#2997ff; }
@media (max-width:600px) {
  .theme-toggle { width:40px; min-width:40px; height:40px; padding:0; border-radius:50%; font-size:19px; font-weight:800; }
  .theme-toggle span { display:none !important; }
  .nav-r .theme-toggle { order:-1; }
  .nav-title, .brand { letter-spacing:-.02em; }
  .hero-band .land-hero h1 { font-size:clamp(37px,11vw,52px); }
  .hero-band .land-hero .cta .btn { min-height:44px; }
}
html[data-theme="dark"] .menu-sheet { background:rgba(27,28,32,.97); }

/* Fixed navigation: remains visible on every page and does not share the hero stacking context. */
body { padding-top:var(--nav-h); }
.nav { position:fixed; inset:0 0 auto; width:100%; }
.hero-band { margin-top:0; padding-top:0; }
.nav-r { gap:10px; }
@media (max-width:620px) {
  .theme-toggle span { display:none; }
  .theme-toggle { min-width:40px; width:40px; padding:0; }
  .nav-in { padding-inline:14px; }
  .nav-r { gap:6px; }
  .nav-r .btn { padding-inline:12px; }
  .land-hero h1 { overflow-wrap:anywhere; }
  .hero-band .land-hero > .reveal:first-child { margin:8px 0 4px; padding:20px; border:1px solid rgba(255,255,255,.70); border-radius:24px; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(20px) saturate(135%); backdrop-filter:blur(20px) saturate(135%); box-shadow:0 20px 60px rgba(31,38,48,.12); }
  html[data-theme="dark"] .hero-band .land-hero > .reveal:first-child { border-color:rgba(255,255,255,.12); background:rgba(13,15,18,.78); box-shadow:0 24px 70px rgba(0,0,0,.34); }
}

/* Explicit themes must fully win over the operating-system media query. */
html[data-theme="light"] .btn:not(.primary):not(.tint) { color:var(--text); background:rgba(0,0,0,.055); }
html[data-theme="light"] .btn:not(.primary):not(.tint):hover { background:rgba(0,0,0,.09); }
html[data-theme="light"] .btn.tint { color:#0066cc; background:rgba(0,113,227,.10); }
html[data-theme="light"] .input,
html[data-theme="light"] select.input { color:var(--text); background:#fff; border-color:rgba(0,0,0,.28); }
html[data-theme="light"] .wallet-login { color:var(--text); background:#fbfbfd; border-color:rgba(0,0,0,.15); }
html[data-theme="light"] .menu-sheet { color:var(--text); background:rgba(255,255,255,.98); }
html[data-theme="light"] .tabbar { background:rgba(251,251,253,.90); }
html[data-theme="light"] .range-seg button.on { color:#1d1d1f; background:#fff; }
html[data-theme="dark"] .btn:not(.primary):not(.tint) { color:#f5f5f7; background:rgba(255,255,255,.11); }
html[data-theme="dark"] .btn:not(.primary):not(.tint):hover { color:#fff; background:rgba(255,255,255,.17); }
html[data-theme="dark"] .btn.primary { color:#fff; background:#0a84ff; }
html[data-theme="dark"] .btn.primary:hover { color:#fff; background:#2997ff; }
html[data-theme="dark"] .btn.tint { color:#66b3ff; background:rgba(10,132,255,.18); }
html[data-theme="dark"] .chip.acc { color:#77bdff; background:rgba(10,132,255,.18); }
html[data-theme="dark"] .wallet-login { color:#f5f5f7; background:#1b1c20; border-color:rgba(255,255,255,.18); }
html[data-theme="dark"] .wallet-login:hover { color:#fff; border-color:rgba(41,151,255,.65); background:#222329; }
html[data-theme="dark"] .range-seg button { color:#b6b6bc; }
html[data-theme="dark"] .range-seg button.on { color:#fff; background:#303136; }
html[data-theme="dark"] .tabbar { background:rgba(21,22,25,.88); box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="dark"] .tabbar a { color:#929298; }
html[data-theme="dark"] .tabbar a[aria-current="page"] { color:#0a84ff; background:rgba(10,132,255,.16); }
html[data-theme="dark"] .menu-sheet { background:rgba(27,28,32,.98); box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="dark"] .menu-sheet a { color:#f5f5f7; }
html[data-theme="dark"] .menu-sheet a svg { color:#b6b6bc; }
html[data-theme="dark"] .menu summary { background:rgba(255,255,255,.08); color:#f5f5f7; }
html[data-theme="dark"] .menu[open] summary { background:rgba(255,255,255,.14); }
html[data-theme="dark"] .menu.members summary { background:rgba(255,255,255,.08); }
html[data-theme="dark"] .seg { background:rgba(255,255,255,.07); }
html[data-theme="dark"] .seg-ind { background:#2b2c31; }
html[data-theme="light"] .tabbar a { color:#636368; }
html[data-theme="light"] .tabbar a[aria-current="page"] { color:#0071e3; background:rgba(0,113,227,.10); }
html[data-theme="dark"] .net { color:#f5f5f7; background:#1b1c20; }
html[data-theme="dark"] .net.on { color:#fff; background:#0a84ff; }
html[data-theme="dark"] .icon-close { color:#fff; background:#303136; }
html[data-theme="dark"] .input::placeholder { color:#8e8e93; }
html[data-theme="dark"] .input:focus { border-color:#2997ff; box-shadow:0 0 0 4px rgba(41,151,255,.18); }
html[data-theme="light"] .input::placeholder { color:#7a7a7f; }
.withdraw-available { margin:0 0 22px; padding:20px; border-radius:18px; background:var(--surface-3); }
.withdraw-available>span { display:block; color:var(--text-2); font-size:13px; }
.withdraw-available>strong { display:block; margin:3px 0 14px; font-size:clamp(34px,5vw,48px); line-height:1.05; letter-spacing:-.04em; }
.withdraw-available>strong small { color:var(--text-2); font-size:15px; font-weight:500; letter-spacing:0; }
.withdraw-available>div { display:flex; justify-content:space-between; gap:14px; padding-top:13px; border-top:1px solid var(--hair); color:var(--text-2); font-size:12.5px; }
.withdraw-available>div b { color:var(--text); white-space:nowrap; }

/* apeBTC polish pass: detected-wallet picker, branded account flows, and a dark NAV surface
 * designed independently from the light card instead of merely recolouring it. */
.detected-wallets { margin-top:14px; padding:13px; border:1px solid var(--hair); border-radius:17px; background:var(--surface-2); }
.detected-label { display:block; margin:0 2px 9px; color:var(--text-3); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.detected-wallet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.detected-wallet { width:100%; justify-content:flex-start; }
.detected-wallet:not(:has(img))::before { content:"W"; display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px; color:#fff; background:linear-gradient(145deg,#0a84ff,#7157ff); font-size:12px; font-weight:800; }
.wallet-picker { width:min(480px,calc(100% - 28px)); }
.wallet-picker .detected-wallet-grid { margin-top:18px; }
.auth-art>img { filter:saturate(.88) contrast(1.02) brightness(.88); }
.auth-art>span { background:linear-gradient(180deg,rgba(2,7,18,.02) 20%,rgba(3,7,16,.78) 100%); }
.join-character { align-self:stretch; display:grid; place-items:center; min-height:300px; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.86),rgba(238,240,247,.72) 42%,rgba(210,216,230,.72)); overflow:hidden; }
.join-character img { width:100%; height:auto; max-width:100%; max-height:100%; aspect-ratio:1672/941; object-fit:contain; filter:drop-shadow(0 24px 30px rgba(43,52,77,.20)); }
/* The signup art is a 16:9 banner with text baked in: show all of it (cover cropped the logo, headline, button and badges on phones). */
@media (max-width: 900px) { .join-character { min-height:0; padding:12px; } }
.withdraw-confidence { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:22px; margin-top:var(--gap); padding:18px 24px; overflow:hidden; background:linear-gradient(120deg,var(--surface),var(--surface-2)); }
.withdraw-confidence img { width:132px; height:132px; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(22,34,58,.18)); }
.withdraw-confidence h3 { margin:5px 0 6px; font-size:22px; letter-spacing:-.025em; }
.withdraw-confidence p { margin:0; max-width:68ch; color:var(--text-2); font-size:13.5px; line-height:1.6; }
.secure-dialog { background:linear-gradient(145deg,var(--surface),var(--surface-2)); box-shadow:0 38px 120px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08); }
.secure-dialog .field { padding:14px; border:1px solid var(--hair); border-radius:16px; background:var(--surface); }
.tfa-dialog { width:min(430px,calc(100% - 28px)); padding:0; border:0; border-radius:26px; overflow:visible; color:var(--text); background:transparent; box-shadow:none; }
.tfa-dialog::backdrop { background:rgba(4,6,9,.62); backdrop-filter:blur(14px) saturate(115%); -webkit-backdrop-filter:blur(14px) saturate(115%); }
.tfa-dialog-card { position:relative; padding:32px; border:1px solid var(--hair); border-radius:26px; background:linear-gradient(145deg,var(--surface),var(--surface-2)); box-shadow:0 36px 110px rgba(0,0,0,.34); text-align:left; }
.tfa-mark { display:grid; place-items:center; width:48px; height:48px; margin-bottom:20px; border:1px solid rgba(0,113,227,.20); border-radius:15px; color:var(--accent); background:var(--accent-fill); font-size:11px; font-weight:800; letter-spacing:.08em; }
.tfa-dialog-card .guide-kicker { color:var(--text-3); }
.tfa-dialog-card h2 { margin:6px 0 8px; font-size:28px; line-height:1.12; letter-spacing:-.035em; }
.tfa-copy { margin:0 0 24px; color:var(--text-2); font-size:14px; line-height:1.6; }
.tfa-label { display:block; margin-bottom:8px; color:var(--text-2); font-size:12px; font-weight:600; }
.tfa-input { width:100%; height:60px; padding:0 16px; border-radius:16px; text-align:center; font-size:28px; font-weight:700; letter-spacing:.28em; font-variant-numeric:tabular-nums; }
.tfa-input::placeholder { color:var(--text-3); letter-spacing:.25em; opacity:.6; }
.tfa-input:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-fill); }
.tfa-error { min-height:20px; margin:8px 0 0; color:var(--down); font-size:12px; }
.tfa-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.tfa-close { position:absolute; top:18px; right:18px; }
html[data-theme="dark"] .tfa-dialog-card { border-color:rgba(255,255,255,.13); background:linear-gradient(145deg,#1a1b20,#111317); box-shadow:0 38px 120px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .tfa-mark { border-color:rgba(41,151,255,.28); background:rgba(10,132,255,.15); color:#66b3ff; }
html[data-theme="dark"] .tfa-dialog-card .guide-kicker { color:#929298; }
html[data-theme="dark"] .tfa-input { background:#17181d; border-color:rgba(255,255,255,.16); color:#f5f5f7; }
@media (max-width:620px) { .tfa-dialog-card { padding:28px 22px 22px; border-radius:22px; } .tfa-dialog-card h2 { font-size:25px; } .tfa-input { height:56px; font-size:25px; } .tfa-actions .btn { flex:1; } }

html[data-theme="dark"] .price-main {
  position:relative; isolation:isolate; overflow:hidden;
  border-color:rgba(106,174,255,.25);
  background:linear-gradient(140deg,#1b1f27 0%,#111722 50%,#0d121b 100%);
  box-shadow:0 22px 64px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .price-main::after { content:""; position:absolute; z-index:-1; width:220px; height:220px; top:-128px; right:-70px; border-radius:50%; background:radial-gradient(circle,rgba(35,141,255,.30),rgba(80,72,220,.08) 46%,transparent 70%); }
html[data-theme="dark"] .price-main .cap { color:#9fcfff; }
html[data-theme="dark"] .price-main .price-value { color:#fff; text-shadow:0 8px 34px rgba(10,132,255,.24); }
html[data-theme="dark"] .price-main .price-value small { color:#aeb8c8; }
html[data-theme="dark"] .price-main p { color:#b8c0cd; }
html[data-theme="dark"] .price-card { border-color:rgba(255,255,255,.11); background:linear-gradient(150deg,#191a1e,#121317); box-shadow:0 16px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="dark"] .trust-strip { border-color:rgba(41,151,255,.25); background:linear-gradient(110deg,rgba(10,132,255,.12),rgba(87,71,255,.06)); }
html[data-theme="dark"] .web3-visual { border-color:rgba(255,255,255,.12); background:#111318; box-shadow:0 24px 70px rgba(0,0,0,.34); }
html[data-theme="dark"] .auth-art>img { filter:saturate(.74) contrast(1.05) brightness(.68); }
html[data-theme="dark"] .join-character { background:radial-gradient(circle at 50% 38%,#2c3341,#171b24 52%,#111319); }
html[data-theme="dark"] .deposit-visual { background:#111318; border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .withdraw-confidence { border-color:rgba(72,142,255,.20); background:linear-gradient(120deg,#191b21,#101620); }
html[data-theme="dark"] .secure-dialog { border-color:rgba(255,255,255,.14); background:linear-gradient(145deg,#1a1b20,#111317); }
html[data-theme="dark"] .secure-dialog .field { background:#17181d; }

.wallet-picker-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:grid; place-items:center; z-index:1000; animation:fadeIn .2s ease; }
.wallet-picker-overlay .card { width:90%; max-width:340px; background:var(--surface); border:1px solid var(--hair); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.wallet-picker-overlay svg { max-width:100%; height:auto; }
.wallet-picker-overlay .wallet-status { font-size:13px; }

/* Share card + annualized return explainer */
.apr-apy-strip { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:var(--gap); padding:22px 26px; background:linear-gradient(120deg,var(--surface),var(--surface-2)); }
.apr-apy-strip h3 { margin:5px 0 4px; font-size:21px; letter-spacing:-.02em; }
.apr-apy-strip p { max-width:62ch; margin:0; color:var(--text-2); font-size:13px; line-height:1.55; }
.apr-apy-values { display:grid; grid-template-columns:repeat(2,minmax(90px,1fr)); gap:10px 22px; min-width:225px; }
.apr-apy-values div { display:flex; flex-direction:column; gap:3px; }
.apr-apy-values span { color:var(--text-3); font-size:11px; font-weight:700; letter-spacing:.10em; }
.apr-apy-values b { font-size:24px; letter-spacing:-.03em; }
.apr-apy-values small { grid-column:1/-1; color:var(--text-3); font-size:11.5px; }
.share-sec { position:relative; }
.share-open { display:inline-flex; margin: 16px 0 24px; min-height:44px; padding-inline:18px; font-size:14px; }
.share-lock { overflow:hidden; }
body.share-lock { position:fixed; inset:0; width:100%; }
.share-modal { display:none; position:fixed; inset:0; z-index:1200; isolation:isolate; width:100%; height:100dvh; max-width:none !important; max-height:none !important; margin:0 !important; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:clamp(18px,4vw,56px); background:transparent; }
.share-modal::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:rgba(238,243,249,.88); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); }
.share-modal.is-open { display:block; }
.share-dialog-shell { position:relative; z-index:1; width:min(1060px,100%); max-width:1060px; min-width:0; margin:0 auto; overflow:hidden; padding:28px; border:1px solid rgba(0,96,190,.13); border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(19,45,76,.20); }
.share-dialog-shell > .share-close { position:absolute; top:18px; right:18px; }
.share-mark { display:grid; place-items:center; width:46px; height:42px; margin-bottom:14px; border:1px solid rgba(0,113,227,.20); border-radius:13px; color:var(--accent); background:var(--accent-fill); font-size:9px; font-weight:800; letter-spacing:.08em; }
.share-head h2 { margin:6px 0 8px; font-size:28px; line-height:1.12; letter-spacing:-.035em; color:var(--text); }
.share-head .cap { margin:0; color:var(--text-2); font-size:14px; line-height:1.6; }
.share-dialog-shell .guide-kicker { color:var(--text-3); }
.share-dialog-shell > .share-actions { align-items:center; justify-content:space-between; margin-top:18px; padding:8px; border:1px solid #e1e8f0; border-radius:14px; background:#f5f8fb; }
.share-dialog-shell > .share-layout { padding:18px 0 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.share-modal .share-preview { width:100%; margin:0; border-radius:20px; background:#0a111c; border-color:rgba(255,255,255,.14); box-shadow:0 18px 48px rgba(0,0,0,.30); }
.share-modal .share-actions { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:12px; }
.share-modal .share-actions .btn { min-height:40px; min-width:128px; padding:0 16px; border-radius:10px; font-size:12px; }
.share-modal .share-actions .btn:hover { color:var(--text); background:rgba(0,0,0,.06); }
.share-modal .share-actions .btn.is-active, .share-modal .share-actions .btn.primary { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:none; }
.share-actions { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:7px; }
.share-format { display:inline-flex; align-items:center; gap:8px; color:var(--text-2); font-size:12px; font-weight:650; }
.share-format-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-fill); }
.share-layout { display:grid; grid-template-columns:minmax(0,1.58fr) minmax(250px,.72fr); gap:18px; align-items:stretch; padding-top:18px !important; }
.share-preview { overflow:hidden; border:1px solid var(--hair); border-radius:var(--r-card); background:var(--surface-2); box-shadow:var(--shadow); }
.share-preview canvas { display:block; width:100% !important; height:auto !important; aspect-ratio:auto !important; object-fit:contain; background:#11151f; image-rendering:auto; }
.share-preview-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; color:#8995a7; font:10px var(--mono); }
.share-preview-foot span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-facts { display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); gap:8px; min-width:0; padding:5px; border:1px solid #e1e8f0; border-radius:18px; background:#f5f8fb; }
.share-fact { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:11px 13px; border:1px solid #e6ebf1; border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(21,45,72,.04); }
.share-fact span { color:var(--text-2); font-size:12px; }
.share-fact b { color:var(--text); font-size:17px; font-weight:750; letter-spacing:-.015em; text-align:right; font-variant-numeric:tabular-nums; }
.share-fact b.down { color:var(--down); }
.share-facts>p { margin:4px 3px 0; line-height:1.5; }
.share-qr, .share-data { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
html[data-theme="dark"] .apr-apy-strip { border-color:rgba(255,255,255,.11); background:linear-gradient(120deg,#181a20,#11151c); box-shadow:0 16px 48px rgba(0,0,0,.24); }
html[data-theme="dark"] .share-preview { border-color:rgba(255,255,255,.12); background:#10141c; box-shadow:0 22px 64px rgba(0,0,0,.34); }
html[data-theme="dark"] .share-fact { border-color:rgba(255,255,255,.11); background:linear-gradient(145deg,#191b21,#111318); }
html[data-theme="dark"] .share-modal::before { background:rgba(4,8,15,.84); }
html[data-theme="dark"] .share-dialog-shell { border-color:rgba(255,255,255,.13); background:linear-gradient(145deg,#1a1b20,#111317); box-shadow:0 38px 120px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .share-mark { border-color:rgba(41,151,255,.28); background:rgba(10,132,255,.15); color:#66b3ff; }
html[data-theme="dark"] .share-dialog-shell .guide-kicker { color:#929298; }
html[data-theme="dark"] .share-head h2 { color:#f5f7fb; }
html[data-theme="dark"] .share-modal .share-actions { border-color:rgba(255,255,255,.10); background:#0f141d; }
html[data-theme="dark"] .share-modal .share-actions .btn { color:#9ca8b8; }
html[data-theme="dark"] .share-modal .share-actions .btn:hover { color:#e9f2ff; background:rgba(255,255,255,.07); }
html[data-theme="dark"] .share-modal .share-actions .btn.is-active,
html[data-theme="dark"] .share-modal .share-actions .btn.primary { color:#fff; background:#0a84ff; border-color:#2997ff; }
html[data-theme="dark"] .share-fact { border-color:rgba(255,255,255,.11); }
html[data-theme="dark"] .share-fact span { color:#aeb8c8; }
html[data-theme="dark"] .share-fact b { color:#f5f7fb; }
html[data-theme="dark"] .share-fact b.down { color:#ff7c86; }
@media (max-width:800px) {
  .share-dialog-shell { padding:28px 22px 22px; border-radius:22px; }
  .share-head h2 { font-size:25px; }
  .apr-apy-strip { align-items:flex-start; flex-direction:column; }
  .apr-apy-values { width:100%; }
  .share-layout { grid-template-columns:minmax(0,1.55fr) minmax(190px,.85fr); gap:14px; }
  .share-facts { gap:7px; padding:3px; }
  .share-fact { min-height:52px; padding:10px; gap:8px; }
  .share-fact b { font-size:13px; }
  .share-modal .share-actions .btn { min-width:112px; }
}

@media (max-width:620px) {
  .detected-wallet-grid { grid-template-columns:1fr; }
  .withdraw-confidence { grid-template-columns:88px minmax(0,1fr); padding:16px; gap:14px; }
  .withdraw-confidence img { width:86px; height:86px; }
  .withdraw-confidence h3 { font-size:18px; }
  .secure-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 24px); padding:20px; border-radius:20px; }
  .dialog-head { gap:12px; }
  .dialog-head h2 { font-size:21px; }
  .icon-close { width:36px; height:36px; }
}

/* WalletConnect per-wallet buttons (mobile apps, official Reown modal via /wc.js) */
.wc-grid { margin-top: 14px; }
.wc-grid-label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; color:var(--text-2); font-size:13px; font-weight:650; }
.wc-grid-label small { color:var(--text-3); font-size:11px; font-weight:500; }
.wc-qr-badge { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#0a84ff,#7157ff); font-size: 12px; font-weight: 800; }
.signup-wc { appearance: none; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 9px; }
.signup-wc img { width: 28px; height: 28px; padding: 3px; object-fit: contain; border: 1px solid var(--hair); border-radius: 9px; background: #fff; display: block; }
.signup-wc:hover img { border-color: rgba(0,113,227,.5); }
.signup-wc:disabled { opacity: .45; cursor: wait; }
.signup-wc-qr { appearance: none; min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface-2); color: var(--text-3); font: 700 11px var(--font); cursor: pointer; }
.signup-wc-qr:hover { color: var(--text); border-color: rgba(0,113,227,.5); }
.signup-wc-qr:disabled { opacity: .45; cursor: wait; }

/* WalletConnect modal ของเว็บเอง — native <dialog> (top layer) ทับ login dialog ได้ ไม่หลุดธีม */
.wc-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.wc-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.wc-dialog.wc-fallback { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 12px; margin: 0; width: auto; height: auto; background: rgba(0,0,0,.55); }
.wc-card { box-sizing:border-box; width: min(448px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; background: var(--surface-2); color: var(--text); border: 1px solid var(--hair-2); border-radius: 24px; padding: clamp(18px,5vw,28px); box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.wc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.wc-head b { font-size: 16px; display: block; }
.wc-head span { font-size: 12px; color: var(--text-3); }
.wc-x { appearance: none; width: 32px; height: 32px; flex: none; border: 1px solid var(--hair); border-radius: 10px; background: transparent; color: var(--text-3); font-size: 14px; cursor: pointer; }
.wc-x:hover { color: var(--text); border-color: rgba(0,113,227,.5); }
.wc-qrbox { background: #fff; border-radius: 14px; padding: 12px; display: grid; place-items: center; }
.wc-qrbox canvas { width: 232px; height: 232px; display: block; }
.wc-cap { margin: 8px 0 0; font-size: 12px; color: #555; }
.wc-cap2 { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); text-align: center; }
.wc-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: 12px; color: var(--text-3); }
.wc-or::before, .wc-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.wc-apps-label { margin: 16px 0 9px; color: var(--text-2); font-size: 12px; font-weight: 700; }
.wc-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wc-app { min-height: 82px; display: flex; flex-direction: column; align-items: center; justify-content:center; gap: 8px; padding: 11px 7px; background: var(--surface); border: 1px solid var(--hair); border-radius: 15px; color: var(--text); font: 650 11px var(--font); cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s; }
.wc-app img { width: 30px; height: 30px; object-fit: contain; }
.wc-app:hover { border-color: rgba(0,113,227,.5); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.wc-copy { width: 100%; margin-top: 10px; padding: 10px; border: 1px solid var(--hair-2); border-radius: 12px; background: transparent; color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.wc-copy:hover { border-color: rgba(0,113,227,.5); }
.wc-status { margin-top: 10px; font-size: 12.5px; color: var(--text-3); min-height: 18px; text-align: center; }
.wc-status.ok { color: var(--accent, #0071e3); }
.wc-status.err { color: #e64a4a; }
.wc-single { grid-column: 1 / -1; }
.wc-single small { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); margin-top: 2px; }
.wc-launch { width:100%; min-height:76px; flex-direction:row !important; justify-content:flex-start !important; text-align:left; gap:12px !important; padding:12px 14px !important; border-color:rgba(0,113,227,.24) !important; background:linear-gradient(145deg,#fff,#f5f5f7) !important; box-shadow:0 8px 22px rgba(0,0,0,.06); }
.wc-launch:hover { border-color:rgba(0,113,227,.55) !important; background:#fff !important; box-shadow:0 12px 28px rgba(0,113,227,.12); }
.wc-launch .wc-qr-badge { width:42px; height:42px; border-radius:13px; flex:none; background:#0071e3; box-shadow:0 6px 15px rgba(0,113,227,.22); }
.wc-launch-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.wc-launch-copy b { font-size:13px; font-weight:700; }
.wc-launch-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; }
.wc-arrow { flex:none; color:var(--accent); font-size:22px; font-weight:400; }
html[data-theme="dark"] .wc-launch { border-color:rgba(41,151,255,.35) !important; background:linear-gradient(145deg,#202228,#1b1d22) !important; box-shadow:0 10px 24px rgba(0,0,0,.2); }
html[data-theme="dark"] .wc-launch:hover { background:#25272d !important; }
.wc-session { border: 1px solid var(--hair-2); border-radius: 14px; padding: 14px; margin-bottom: 4px; text-align: center; }
.wc-session .wc-cap { color: var(--text-3); }
.wc-session .wc-addr { color: var(--text); font-family: ui-monospace, monospace; }
.wc-session-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.wc-continue { padding: 10px; border: 0; border-radius: 12px; background: #0071e3; color: #fff; font: 600 13px var(--font); cursor: pointer; }
.wc-disconnect { padding: 10px; border: 1px solid var(--hair-2); border-radius: 12px; background: transparent; color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.wc-disconnect:hover { border-color: rgba(0,113,227,.5); }

/* Theme-specific hero contrast: keep the photography, but make every control readable. */
html[data-theme="ape-pink"] .hero-photo img,
html[data-theme="ape-blue"] .hero-photo img {
  filter: brightness(.52) saturate(1.18) contrast(1.08);
}
html[data-theme="ape-pink"] .hero-photo span,
html[data-theme="ape-blue"] .hero-photo span {
  background: linear-gradient(90deg, rgba(8,7,15,.97) 0%, rgba(8,7,15,.90) 48%, rgba(8,7,15,.58) 76%, rgba(8,7,15,.26) 100%);
}
html[data-theme="ape-pink"] .hero-band .land-hero > .reveal:first-child,
html[data-theme="ape-blue"] .hero-band .land-hero > .reveal:first-child,
html[data-theme="ape-pink"] .hero-band .land-hero h1,
html[data-theme="ape-blue"] .hero-band .land-hero h1,
html[data-theme="ape-pink"] .hero-band .land-hero p.lead,
html[data-theme="ape-blue"] .hero-band .land-hero p.lead {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.32);
}
html[data-theme="ape-pink"] .hero-band .land-hero .grad {
  background: linear-gradient(95deg, #fff 0%, #ffd1ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="ape-blue"] .hero-band .land-hero .grad {
  background: linear-gradient(95deg, #fff 0%, #c8ecff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="ape-pink"] .hero-band .land-hero .chip.acc,
html[data-theme="ape-blue"] .hero-band .land-hero .chip.acc,
html[data-theme="ape-pink"] .hero-band .land-hero .btn:not(.primary),
html[data-theme="ape-blue"] .hero-band .land-hero .btn:not(.primary) {
  color: #fff;
  background: rgba(8,8,14,.78);
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
html[data-theme="ape-pink"] .hero-band .land-hero > .card,
html[data-theme="ape-blue"] .hero-band .land-hero > .card {
  color: #fff;
  background: rgba(10,10,18,.82);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
html[data-theme="ape-pink"] .hero-band .land-hero > .card .cap,
html[data-theme="ape-blue"] .hero-band .land-hero > .card .cap,
html[data-theme="ape-pink"] .hero-band .land-hero > .card .cap2,
html[data-theme="ape-blue"] .hero-band .land-hero > .card .cap2,
html[data-theme="ape-pink"] .hero-band .land-hero > .card .kpi-l,
html[data-theme="ape-blue"] .hero-band .land-hero > .card .kpi-l,
html[data-theme="ape-pink"] .hero-band .land-hero > .card .kpi-s,
html[data-theme="ape-blue"] .hero-band .land-hero > .card .kpi-s {
  color: rgba(255,255,255,.76);
}
html[data-theme="ape-pink"] .nav,
html[data-theme="ape-blue"] .nav,
html[data-theme="ape-pink"] body.scrolled .nav,
html[data-theme="ape-blue"] body.scrolled .nav {
  background: rgba(10,8,16,.90);
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
html[data-theme="ape-pink"] .nav-links a,
html[data-theme="ape-blue"] .nav-links a,
html[data-theme="ape-pink"] .nav-title,
html[data-theme="ape-blue"] .nav-title {
  color: #fff;
}
html[data-theme="ape-pink"] .nav-links a:hover,
html[data-theme="ape-blue"] .nav-links a:hover {
  background: rgba(255,255,255,.12);
}
html[data-theme="ape-pink"] .nav-r .btn:not(.primary):not(.theme-toggle),
html[data-theme="ape-blue"] .nav-r .btn:not(.primary):not(.theme-toggle) {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}
html[data-theme="ape-pink"] .nav-r .btn:not(.primary):not(.theme-toggle):hover,
html[data-theme="ape-blue"] .nav-r .btn:not(.primary):not(.theme-toggle):hover {
  background: rgba(255,255,255,.18);
}
@media (max-width: 900px) {
  html[data-theme="ape-pink"] .hero-photo span,
  html[data-theme="ape-blue"] .hero-photo span {
    background: linear-gradient(90deg, rgba(8,7,15,.98) 0%, rgba(8,7,15,.90) 68%, rgba(8,7,15,.56) 100%);
  }
  html[data-theme="ape-pink"] .hero-band .land-hero > .reveal:first-child,
  html[data-theme="ape-blue"] .hero-band .land-hero > .reveal:first-child {
    background: rgba(10,10,18,.82);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 20px 60px rgba(0,0,0,.30);
  }
}