/* ============================================================
   AURUM AI — App protocol · ROYAL
   Velvet burgundy · gold ornament · Cormorant display + Poppins UI
   IBM Plex Mono for micro technical labels
   Screens: login · register · 5-tab dashboard · connect sheet · review
   ============================================================ */
:root{
  --bg:#F3EEE6; --bg2:#EAE3D7; --card:#FFFFFF; --cardline:rgba(28,20,12,.10);
  --ink:#17120C; --ink2:#5B5144; --mut:#97896F;
  --gold:#B8923F; --goldL:#D9BC72; --goldD:#8A6A24; --burg:#B3453A;
  --goldCard:#EBD79E; --redCard:#F2BFAF;          /* the two asset-card colours */
  --grn:#177A4C; --grnD:rgba(23,122,76,.12); --red:#C7443C;
  --mono:"Space Grotesk","Be Vietnam Pro",sans-serif;
  --tech:"Space Grotesk","Be Vietnam Pro",ui-monospace,monospace;
  --sans:"Inter","Be Vietnam Pro",-apple-system,system-ui,sans-serif;
  --serif:"Space Grotesk","Be Vietnam Pro",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
/* Base type scale. Every size in this file is in rem, so raising the root
   enlarges the whole app proportionally and keeps the hierarchy intact.
   16px → 18px = everything reads ~12% larger. */
html{font-size:112.5%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input{font:inherit}
[hidden]{display:none !important}
.mono{font-family:var(--mono);font-weight:600}
.up{color:var(--grn)} .red{color:var(--red)} .mut{color:var(--mut)} .gold{color:var(--goldL)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:1px solid rgba(184,146,64,.65);outline-offset:2px}

/* micro technical labels → IBM Plex Mono (legibility floor) */
.ap-live,.ap-idle,.ap-bal,.sysbar,.spark__meta,.stat span,.lk span,.lk i,
.cal__title span,.cal__dow,.d,.cal__day,.cal__lg,.fr,
.rank__tabs button,.rank__period button,.vb,.tag,.side,.pos__meta,.pos__pnl span,
.rrow__id i,.rrow__amt i,.pcard__meta,.notice i,.sl b,.me span,.connect__steps span,
.ev-shot__tag,.ev-post__date,.demo-badge,.fld span,.eq__meta,.eq__ax,.mrow,.pill,
.range-lab,.led b,.stamp,.seal__s,.sh-rail .st span,.ck-hint{
  font-family:var(--tech);font-weight:500}

.stage{position:relative;width:100%;height:100vh;height:100dvh;max-width:520px;margin-inline:auto;overflow:hidden;background:var(--bg)}

/* ---- velvet chamber backdrop ---- */
.velvet{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(140,28,52,.55), transparent 62%),
    radial-gradient(60% 40% at 12% 78%, rgba(110,20,35,.35), transparent 65%),
    radial-gradient(55% 38% at 88% 62%, rgba(200,162,75,.10), transparent 65%),
    linear-gradient(180deg,#170710,#0E0407 55%,#080205);
  animation:velvetDrift 18s ease-in-out infinite alternate}
@keyframes velvetDrift{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-8px)}}

/* ---- faux status bar ---- */
.sysbar{position:absolute;top:0;left:0;right:0;z-index:35;display:flex;justify-content:space-between;
  align-items:center;padding:6px 16px 0;pointer-events:none;color:rgba(231,212,154,.72);
  font-size:.6rem;letter-spacing:.06em}
.sysbar__r{display:flex;gap:5px;align-items:center}
.sysbar svg{width:13px;height:10px;display:block}
.sb-s,.sb-b{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* screens */
.scr{position:absolute;inset:0;z-index:1;opacity:0;transform:translateX(26px) scale(.99);
  pointer-events:none;visibility:hidden;
  transition:opacity .65s var(--ease),transform .65s var(--ease),visibility .65s}
.scr.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.scr.out-l{transform:translateX(-26px) scale(.99)}
/* a hidden screen must not leak its active tab/page into hit-testing */
.scr:not(.on) .tab.on,.scr:not(.on) .page.on{pointer-events:none;visibility:hidden}

/* ================= GATE (login + register) ================= */
.scr--gate{display:flex;overflow-y:auto;padding:38px 0 26px;scrollbar-width:none}
.scr--gate::-webkit-scrollbar{display:none}
.gate{position:relative;z-index:2;width:min(360px,88vw);margin:auto;text-align:center;
  animation:gateIn .9s var(--ease) both}
@keyframes gateIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gate__crest{width:54px;margin-inline:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(200,162,75,.5));animation:crest 5s ease-in-out infinite}
@keyframes crest{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.gate__name{font-family:var(--serif);font-size:2.5rem;font-weight:600;letter-spacing:.01em;
  margin-top:12px;line-height:1.05}
.gate__name em{font-style:italic;background:linear-gradient(115deg,#F6E7BC,#C8A24B 55%,#8A6A24);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gate__sub{font-size:.62rem;letter-spacing:.3em;color:var(--gold);margin-top:7px}

/* ornamental rule with a diamond */
.rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 20px}
.rule i{width:56px;height:1px;background:linear-gradient(90deg,transparent,rgba(184,146,64,.6))}
.rule i:last-child{background:linear-gradient(90deg,rgba(184,146,64,.6),transparent)}
.rule span{width:6px;height:6px;transform:rotate(45deg);background:var(--goldL);
  box-shadow:0 0 12px rgba(184,146,64,.75)}

/* the card */
.card{position:relative;background:linear-gradient(165deg,#FFFFFF,#FBF8F2);
  border:1px solid var(--cardline);border-radius:6px;padding:24px 22px;text-align:left;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -34px rgba(23,18,12,.28),inset 0 1px 0 #FFFFFF}
.card--orn::before{content:"";position:absolute;inset:5px;border:1px solid rgba(28,20,12,.10);
  border-radius:3px;pointer-events:none}
.dm{position:absolute;width:7px;height:7px;transform:rotate(45deg);background:var(--goldL);
  box-shadow:0 0 10px rgba(184,146,64,.7);animation:dmGlow 3.2s ease-in-out 2 both}
@keyframes dmGlow{0%,100%{opacity:.55}50%{opacity:1}}
.dm--tl{left:-4px;top:-4px} .dm--tr{right:-4px;top:-4px}
.dm--bl{left:-4px;bottom:-4px} .dm--br{right:-4px;bottom:-4px}
.card__t{font-family:var(--serif);font-size:1.32rem;font-weight:600;margin-bottom:16px;
  letter-spacing:.01em;color:var(--ink)}

.fld{display:block;margin-bottom:12px}
.fld span{display:block;font-size:.58rem;letter-spacing:.14em;color:var(--mut);margin-bottom:6px}
.fld input{width:100%;background:rgba(23,18,12,.05);border:1px solid rgba(28,20,12,.09);border-radius:4px;
  color:var(--ink);padding:12px 13px;font-size:.9rem;outline:none;
  transition:border-color .35s,box-shadow .35s}
.fld input::placeholder{color:#A79A87}
.fld input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,75,.12)}
.fld.err input{border-color:rgba(228,88,107,.6);box-shadow:0 0 0 3px rgba(228,88,107,.08)}
.form-err{font-size:.66rem;color:var(--red);margin:2px 0 10px;line-height:1.5}

.agree{display:flex;gap:9px;align-items:flex-start;margin:4px 0 14px}
.agree input{accent-color:var(--gold);margin-top:2px;flex:none}
.agree span{font-size:.66rem;line-height:1.5;color:var(--ink2)}

/* gold button — shimmer sweeps once on appear, again on hover/focus */
.btn-go{position:relative;overflow:hidden;width:100%;margin-top:4px;
  background:linear-gradient(115deg,#F0DFAE,#C8A24B 52%,#8A6A24);
  color:#17120C;font-weight:700;border-radius:4px;padding:13px;font-size:.92rem;letter-spacing:.02em;
  box-shadow:0 14px 34px -14px rgba(200,162,75,.6);transition:transform .3s var(--ease)}
.btn-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sweep 1.7s ease-out .8s 1 both}
@keyframes sweep{0%{left:-60%}100%{left:130%}}
@keyframes sweepH{0%{left:-60%}100%{left:130%}}
.btn-go i{font-style:normal}
.btn-go:disabled{filter:grayscale(.6);opacity:.55;cursor:default}
.or{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:.6rem;letter-spacing:.3em;margin:14px 0}
.or i{flex:1;height:1px;background:rgba(28,20,12,.10)}
.btn-apple{width:100%;border:1px solid rgba(28,20,12,.18);border-radius:4px;padding:12px;font-weight:600;
  font-size:.86rem;background:#FFFFFF;color:#17120C;transition:transform .3s var(--ease)}
.apple-glyph{font-family:-apple-system,system-ui;margin-right:6px}
.card__fine{font-size:.64rem;color:var(--mut);text-align:center;margin-top:14px;line-height:1.55}

.swap{margin-top:18px;font-size:.76rem;color:var(--ink2)}
.link{font-family:var(--serif);font-size:1rem;font-style:italic;color:var(--goldL);
  border-bottom:1px solid rgba(184,146,64,.45);padding-bottom:1px;transition:color .3s}
.back{position:absolute;left:0;top:-6px;font-size:.68rem;letter-spacing:.14em;color:var(--mut);
  transition:color .3s}

/* compact gate for short viewports (the 300×640 film frame) */
@media (max-height:700px){
  .scr--gate{padding:30px 0 16px}
  .gate__crest{width:40px}
  .gate__name{font-size:2rem;margin-top:8px}
  .rule{margin:10px 0 12px}
  .card{padding:16px}
  .card__t{font-size:1.15rem;margin-bottom:10px}
  .fld{margin-bottom:8px}
  .fld input{padding:9px 11px;font-size:.84rem}
  .agree{margin:2px 0 10px}
  .btn-go{padding:11px}
  .swap{margin-top:12px}
  #scr-reg .or,#scr-reg .btn-apple{display:none}
}

/* ================= APP SHELL ================= */
.scr--app{display:flex;flex-direction:column;padding-top:22px}
.ap-head{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 11px;border-bottom:1px solid rgba(28,20,12,.08);
  background:linear-gradient(180deg,rgba(23,7,16,.9),rgba(23,7,16,.35));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .5s}
.ap-brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:1.16rem;font-weight:600}
.ap-brand img{width:23px;height:23px}
.ap-brand em{font-style:italic;color:var(--goldL)}
.ap-live{font-size:.58rem;letter-spacing:.1em;color:var(--grn);transition:opacity .4s,color .4s}
.ap-live i{display:inline-block;width:5px;height:5px;transform:rotate(45deg);background:var(--grn);
  margin-right:6px;box-shadow:0 0 10px var(--grn);animation:pulse 1.8s ease-in-out infinite}
.ap-live.paused{color:var(--goldL)}
.ap-live.paused i{background:var(--goldL);box-shadow:0 0 10px rgba(184,146,64,.75)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ap-idle{font-size:.58rem;letter-spacing:.1em;color:var(--mut)}
.ap-idle i{display:inline-block;width:5px;height:5px;transform:rotate(45deg);background:var(--mut);
  margin-right:6px}
/* compact balance appears in the header when the hero scrolls away */
.ap-bal{position:absolute;right:18px;top:50%;transform:translateY(calc(-50% + 5px));opacity:0;
  font-size:.62rem;letter-spacing:.06em;color:var(--goldL);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ap-head.scrolled{border-color:rgba(200,162,75,.45)}
.ap-head.scrolled .ap-bal{opacity:1;transform:translateY(-50%)}
.ap-head.scrolled .ap-live{opacity:0;transition-duration:.18s}

/* tabs */
.tabwrap{position:relative;flex:1;min-height:0;z-index:1}
.tab{position:absolute;inset:0;overflow-y:auto;padding:10px 16px 24px;
  opacity:0;transform:translateX(24px);pointer-events:none;visibility:hidden;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;scrollbar-width:none}
.tab::-webkit-scrollbar{display:none;width:0}
.tab.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.tab.out-l{transform:translateX(-24px)}

/* scroll-reveal (JS adds .rv to cards, .in as they enter view) */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.glass{position:relative;isolation:isolate;
  background:linear-gradient(165deg,rgba(30,12,19,.82),rgba(19,7,12,.72));
  border:1px solid var(--cardline);border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(23,18,12,.04)}

/* home */
.hero-bal{text-align:center;padding:16px 0 12px}
.hero-bal>span{font-size:.62rem;letter-spacing:.26em;color:var(--gold)}
.hero-bal b{display:block;font-family:var(--serif);font-size:3.1rem;font-weight:600;letter-spacing:0;
  margin-top:4px;text-shadow:0 6px 30px rgba(200,162,75,.25);font-variant-numeric:tabular-nums}
.hero-bal b i{font-style:normal;color:var(--mut);font-size:1.5rem}
.hero-bal em{font-style:normal;font-size:.76rem;font-weight:600}
.spark{padding:12px 12px 8px;margin-top:6px}
.sp-line{fill:none;stroke:var(--grn);stroke-width:2;filter:drop-shadow(0 0 6px rgba(63,207,149,.55));
  stroke-dasharray:640;stroke-dashoffset:640}
.spark.draw .sp-line{animation:draw 2.2s var(--ease) .25s forwards}
.sp-fill{opacity:0;transition:opacity 1s ease .9s}
.spark.draw .sp-fill{opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
.spark__meta{display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.12em;color:var(--mut);padding:6px 4px 2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.stat{padding:13px 14px;transition:border-color .35s,transform .35s var(--ease)}
.stat span{display:block;font-size:.56rem;letter-spacing:.12em;color:var(--mut)}
.stat b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-top:3px;
  font-variant-numeric:tabular-nums}
.stat i{display:block;font-style:normal;font-size:.64rem;color:var(--ink2);margin-top:1px}
.rowbtns{display:flex;gap:10px;margin-top:14px}
.chipbtn{flex:1;border:1px solid var(--cardline);border-radius:4px;padding:11px 6px;font-size:.72rem;font-weight:600;
  background:rgba(23,18,12,.04);transition:border-color .3s,color .3s,transform .2s var(--ease)}
.chipbtn.on{border-color:rgba(63,207,149,.45);color:var(--grn)}
.chipbtn .cb{display:none;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.chipbtn .cb svg{width:12px;height:12px;flex:none}
.chipbtn .cb--p{display:flex}
.chipbtn.arm .cb--p,.chipbtn.paused .cb--p,.chipbtn.soon2 .cb--p{display:none}
.chipbtn.arm .cb--a,.chipbtn.soon2 .cb--a{display:flex}
.chipbtn.paused .cb--r{display:flex}
.chipbtn.arm{border-color:rgba(184,146,64,.6);color:var(--goldL)}
.chipbtn.paused{border-color:rgba(200,162,75,.5);color:var(--goldL)}

/* inline SVG icon defaults */
.ic{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mi{width:9px;height:9px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.mi-f{fill:currentColor;stroke:none}

/* calendar */
.cal{padding:14px}
.cal__title{display:flex;justify-content:space-between;align-items:baseline}
.cal__title b{font-family:var(--serif);font-size:1.2rem;font-weight:600}
.cal__title span{font-size:.6rem;letter-spacing:.14em;color:var(--gold)}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.58rem;
  color:var(--mut);letter-spacing:.1em;margin-top:12px}
.cal__dow .sun{color:var(--red)} .cal__dow .sat{color:#7FA8E8}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.cal__grid span{min-height:38px}
.d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:.62rem;color:var(--ink2);border-radius:3px;background:rgba(23,18,12,.03);
  transition:background .3s,box-shadow .3s;cursor:pointer;font-variant-numeric:tabular-nums}
.d i{font-style:normal;font-size:.5rem;letter-spacing:0}
.d.red{background:rgba(228,88,107,.15);color:var(--red)}
.d.grn{background:var(--grnD);color:var(--grn)}
.d.fut{opacity:.35;background:transparent;border:1px dashed rgba(28,20,12,.09);cursor:default}
.d.sel{box-shadow:0 0 0 1px var(--goldL),0 0 16px rgba(28,20,12,.14);color:var(--goldL)}
.cal__day{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;
  padding:10px 12px;border:1px solid rgba(28,20,12,.09);border-radius:4px;background:rgba(23,18,12,.04);
  font-size:.58rem;letter-spacing:.08em;color:var(--ink2)}
.cal__day b{font-size:.72rem;font-weight:600}
.cal__foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;
  padding-top:10px;border-top:1px solid rgba(28,20,12,.08)}
.cal__lg{display:flex;gap:10px;font-size:.54rem;letter-spacing:.06em;color:var(--mut)}
.cal__lg .lg{display:inline-block;width:6px;height:6px;border-radius:1px;margin-right:4px;vertical-align:0}
.lg--g{background:var(--grn)} .lg--r{background:var(--red)} .lg--o{background:var(--goldL)}
.cal__foot>b{font-size:.62rem;letter-spacing:.06em}

/* positions */
.sect-t{display:flex;justify-content:space-between;align-items:baseline;margin:18px 2px 9px}
.sect-t b{font-family:var(--serif);font-size:1.2rem;font-weight:600}
.sect-t span{font-size:.6rem;letter-spacing:.14em;color:var(--gold);font-family:var(--tech);font-weight:500}
.pos{padding:14px;margin-bottom:10px;transition:border-color .35s,transform .2s var(--ease)}
.pos__top{display:flex;align-items:center;gap:11px}
.side{font-size:.54rem;letter-spacing:.06em;color:#0B3B25;background:linear-gradient(115deg,#5FE0AC,#2FA877);
  border-radius:3px;padding:4px 7px;font-weight:600;white-space:nowrap}
.side--soon{background:rgba(23,18,12,.06);color:var(--ink2)}
.pos__name{flex:1;min-width:0}
.pos__name b{display:block;font-size:.92rem;font-weight:600}
.pos__name i{display:block;font-style:normal;font-size:.64rem;color:var(--mut);margin-top:2px}
.pos__pnl{text-align:right}
.pos__pnl span{display:block;font-size:.54rem;letter-spacing:.1em;color:var(--mut)}
.pos__pnl b{font-family:var(--serif);font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums}
.pos__meta{display:flex;gap:12px;font-size:.56rem;letter-spacing:.04em;color:var(--mut);margin-top:11px}
/* navigation buttons are gold — green is reserved for P&L */
.linebtn{width:100%;margin-top:12px;border:1px solid rgba(200,162,75,.4);color:var(--goldL);
  border-radius:4px;padding:11px;font-size:.76rem;font-weight:600;
  transition:background .3s,border-color .3s,transform .2s var(--ease)}
.linebtn--red{border-color:rgba(228,88,107,.35);color:var(--red);margin-top:16px}
.linebtn--red.arm{border-color:var(--red);background:rgba(228,88,107,.12)}
.pos.soon{opacity:.5}

/* community */
.rankcard{padding:4px 14px}
.rk{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid rgba(28,20,12,.07)}
.rk:first-child{border-top:0}
.rk__n{position:relative;width:24px;height:24px;display:grid;place-items:center;
  font-size:.64rem;flex:none;color:var(--ink2);line-height:1;z-index:0;isolation:isolate}
.rk__n::before{content:"";position:absolute;inset:0;transform:rotate(45deg);z-index:-1;
  background:#FFFFFF;border:1px solid rgba(28,20,12,.11)}
.rk__n.gold{color:#17120C;font-weight:700}
.rk__n.gold::before{background:linear-gradient(115deg,#F0DFAE,#8A6A24);border-color:transparent;
  box-shadow:0 0 16px rgba(184,146,64,.5)}
.rk b{flex:1;font-size:.84rem;font-weight:500}
.rk__p{font-size:.68rem}
.vb{font-size:.52rem;letter-spacing:.06em;color:var(--goldL);border:1px solid rgba(28,20,12,.16);
  border-radius:100px;padding:3px 7px;white-space:nowrap}
.post{padding:13px 14px;margin-bottom:10px;transition:border-color .35s,transform .2s var(--ease)}
.post b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600}
.post span{display:block;font-size:.64rem;color:var(--mut);margin-top:4px}
.post i{font-style:normal;color:var(--goldL);font-size:.56rem;letter-spacing:.06em;font-family:var(--tech);font-weight:500}

/* data */
.eq{padding:13px 13px 11px;margin-top:2px}
.eq__meta{display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.12em;
  color:var(--mut);margin-bottom:8px}
.eq svg{width:100%;height:auto;display:block}
.eq__g{stroke:rgba(28,20,12,.07);stroke-width:1}
.eq__l{fill:none;stroke:var(--goldL);stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(28,20,12,.16));
  stroke-dasharray:520;stroke-dashoffset:520;stroke-linecap:round}
.eq.in .eq__l{animation:draw 2.4s var(--ease) .35s forwards}
.eq__f{opacity:0;transition:opacity 1.2s ease 1.3s}
.eq.in .eq__f{opacity:1}
.eq__ax{display:flex;justify-content:space-between;font-size:.54rem;letter-spacing:.1em;
  color:var(--mut);padding:6px 2px 0}
.mrow{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.mrow span{text-align:center;font-size:.52rem;letter-spacing:.04em;color:var(--mut);
  border:1px solid rgba(28,20,12,.08);border-radius:3px;padding:6px 2px;background:rgba(23,18,12,.04)}
.mrow b{display:block;font-size:.58rem;margin-top:2px;font-weight:600;font-variant-numeric:tabular-nums}
.fills{padding:6px 14px}
.fr{display:grid;grid-template-columns:1fr 1.2fr 1.1fr 1fr;gap:6px;font-size:.6rem;
  padding:9px 0;border-top:1px solid rgba(28,20,12,.07);color:var(--ink2);
  font-variant-numeric:tabular-nums}
.fr--h{border-top:0;color:var(--gold);font-size:.54rem;letter-spacing:.1em}
.fr span:nth-child(3),.fr span:last-child{text-align:right}

/* my */
.me{display:flex;align-items:center;gap:13px;padding:16px}
.me__ava{position:relative;width:46px;height:46px;display:grid;place-items:center;font-weight:700;
  color:#17120C;font-size:1rem;flex:none;font-family:var(--serif);z-index:0;isolation:isolate}
.me__ava::before{content:"";position:absolute;inset:2px;transform:rotate(45deg);z-index:-1;
  background:linear-gradient(115deg,#F0DFAE,#8A6A24);box-shadow:0 0 22px rgba(184,146,64,.45)}
.me b{display:block;font-size:.92rem;font-weight:600}
.me span{display:block;font-size:.58rem;letter-spacing:.06em;margin-top:4px}
.setl{margin-top:12px;padding:2px 16px}
.sl{display:flex;justify-content:space-between;align-items:center;padding:13px 0;
  border-top:1px solid rgba(28,20,12,.07);font-size:.8rem}
.sl:first-child{border-top:0}
.sl b{font-size:.62rem;letter-spacing:.04em;font-weight:500}
/* a settings row that acts as a button */
.sl--tap{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.sl--tap span{color:var(--ink)}
.sl--tap b{display:flex;align-items:center;gap:7px;color:var(--ink2)}
.sl__go{font-style:normal;color:var(--mut);font-size:1.05rem;line-height:1;font-weight:400}
.sl--tap:active{opacity:.6}

/* tabbar */
.tabbar{position:relative;flex:none;z-index:3;display:flex;background:rgba(14,4,7,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(28,20,12,.10);
  padding:8px 6px calc(10px + env(safe-area-inset-bottom))}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);
  transition:color .35s,transform .2s var(--ease);position:relative}
.tb i{font-style:normal;line-height:0;transition:transform .35s var(--ease)}
.tb i svg{width:17px;height:17px}
.tb span{font-size:.56rem;letter-spacing:.04em;font-weight:500}
.tb.on{color:var(--goldL)}
.tb.on i{transform:translateY(-2px) scale(1.1)}
.tb.on::after{content:"";position:absolute;top:-9px;left:50%;width:5px;height:5px;
  transform:translateX(-50%) rotate(45deg);background:var(--goldL);
  box-shadow:0 0 10px rgba(231,212,154,.9)}

/* demo badge */
.demo-badge{position:absolute;bottom:78px;right:12px;z-index:9;font-size:.56rem;
  letter-spacing:.14em;color:var(--goldL);border:1px solid rgba(200,162,75,.4);border-radius:100px;
  padding:5px 10px;background:rgba(23,18,12,.10)}

/* ================= HOME: services · ranking · posts · notices ================= */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.svc__c{display:block;padding:12px 6px 11px;text-align:center;
  transition:border-color .35s,transform .35s var(--ease)}
.svc__c i{display:block;font-style:normal;color:var(--goldL);margin-bottom:6px;line-height:0}
.svc__c i svg{width:16px;height:16px;filter:drop-shadow(0 0 8px rgba(184,146,64,.5))}
.svc__c b{display:block;font-family:var(--serif);font-size:.92rem;font-weight:600;color:var(--ink);
  line-height:1.2}

.rank{padding:12px 14px 14px}
.rank__tabs,.rank__period{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rank__tabs::-webkit-scrollbar,.rank__period::-webkit-scrollbar{display:none}
.rank__tabs button,.rank__period button{flex:none;font-size:.54rem;letter-spacing:.08em;
  padding:7px 10px;border-radius:3px;border:1px solid rgba(28,20,12,.10);color:var(--mut);
  background:rgba(23,18,12,.04);transition:border-color .3s,color .3s}
.rank__tabs button.on,.rank__period button.on{border-color:rgba(184,146,64,.6);color:var(--goldL);
  background:rgba(200,162,75,.1)}
.rank__tabs button:disabled{opacity:.4;cursor:default}
.rank__period{margin-top:7px;margin-bottom:4px}
.rrow{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid rgba(28,20,12,.07)}
#rank-rows.flip .rrow{animation:rowIn .45s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rrow__id{flex:1;min-width:0}
.rrow__id b{display:block;font-size:.86rem;font-weight:600}
.rrow__id i{display:block;font-style:normal;font-size:.56rem;color:var(--mut);margin-top:2px}
.rrow__amt{text-align:right}
.rrow__amt b{font-family:var(--serif);font-size:1.16rem;font-weight:600;font-variant-numeric:tabular-nums}
.rrow__amt i{display:block;font-style:normal;font-size:.56rem;color:var(--mut);margin-top:1px;
  font-variant-numeric:tabular-nums}

.pcard{display:block;padding:13px 14px;margin-bottom:9px;transition:border-color .35s,transform .2s var(--ease)}
.tag{display:inline-block;font-size:.52rem;letter-spacing:.1em;color:var(--goldL);
  border:1px solid rgba(28,20,12,.16);border-radius:100px;padding:3px 8px}
.pcard b{display:block;font-family:var(--serif);font-size:1.06rem;font-weight:600;margin-top:8px;line-height:1.35}
.pcard__meta{display:block;font-size:.56rem;letter-spacing:.04em;color:var(--mut);margin-top:6px}
.pcard__meta .mi{margin-right:2px}

.notice{display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:8px;
  transition:border-color .35s,transform .2s var(--ease)}
.notice .pin{color:var(--goldL);font-size:.6rem}
.notice b{flex:1;font-size:.8rem;font-weight:500;line-height:1.4}
.notice i{font-style:normal;font-size:.56rem;color:var(--mut);white-space:nowrap}

/* ================= PRE-CONNECTION STATE (no exchange linked) ================= */
#stage:not(.state-new) .setup-only{display:none !important}
#stage.state-new .setup-only{display:block}
#stage.state-new .locked.setup-only{display:grid}
#stage.state-new .lk--wide.setup-only{display:flex}
#stage.state-new .connected-only{display:none !important}

.connect{position:relative;margin-top:10px;padding:26px 20px 20px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, rgba(140,28,52,.42), rgba(20,6,11,.55) 70%)}
.connect__k{font-size:.62rem;letter-spacing:.3em;color:var(--goldL);font-family:var(--mono);font-weight:600}
.connect b{display:block;font-family:var(--serif);font-size:1.85rem;font-weight:600;margin-top:9px;
  line-height:1.15}
.connect__p{font-size:.72rem;line-height:1.65;color:var(--ink2);margin:11px auto 18px;max-width:34ch}
.connect__p em{font-style:italic;font-family:var(--serif);font-size:1.12em;color:var(--goldL)}
.connect .btn-go{max-width:250px;margin-inline:auto}
/* the three steps read as a rail, not as buttons */
.connect__steps{display:flex;flex-direction:column;margin-top:18px;text-align:left}
.connect__steps span{position:relative;font-size:.56rem;letter-spacing:.1em;color:var(--mut);
  padding:8px 0 8px 28px}
.connect__steps span::before{content:"";position:absolute;left:7px;top:13px;width:7px;height:7px;
  transform:rotate(45deg);border:1px solid rgba(184,146,64,.5);background:rgba(200,162,75,.12)}
.connect__steps span::after{content:"";position:absolute;left:10px;top:25px;bottom:-7px;width:1px;
  background:rgba(28,20,12,.10)}
.connect__steps span:last-child::after{display:none}
.connect__steps span:first-child{color:var(--ink2)}
.connect__steps span:first-child::before{background:var(--goldL);box-shadow:0 0 10px rgba(184,146,64,.6)}
.connect__guide{display:inline-block;margin-top:14px;font-size:.66rem;color:var(--goldL);
  border-bottom:1px solid rgba(28,20,12,.16);padding-bottom:1px}

.locked{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.lk{padding:13px 14px;opacity:.55}
.lk span{display:block;font-size:.56rem;letter-spacing:.12em;color:var(--mut)}
.lk b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-top:3px;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.lk i{display:block;font-style:normal;font-size:.56rem;color:var(--mut);margin-top:1px}
.lk--wide{grid-column:1/-1;opacity:.92;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lk--wide span,.lk--wide b,.lk--wide i{display:inline;margin:0}
.lk--wide b{color:var(--goldL);font-size:1.14rem}
.ghost{margin-top:10px;padding:14px 14px 11px;text-align:center}
.ghost svg{width:100%;height:56px;display:block}
.ghost path{fill:none;stroke:rgba(231,212,154,.38);stroke-width:1.5;stroke-dasharray:5 7;stroke-linecap:round}
.ghost span{display:block;font-family:var(--tech);font-weight:500;font-size:.54rem;letter-spacing:.2em;
  color:var(--mut);margin-top:8px}

/* ================= CONNECT SHEET (3-step OKX flow) ================= */
.sheet{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end}
.sheet__bd{position:absolute;inset:0;background:rgba(6,1,3,.72);opacity:0;transition:opacity .4s ease}
.sheet.on .sheet__bd{opacity:1}
.sheet__box{position:relative;width:100%;max-height:88%;display:flex;flex-direction:column;
  border-radius:14px 14px 0 0;background:linear-gradient(175deg,#220C14,#10040A 70%);
  border:1px solid rgba(28,20,12,.14);border-bottom:0;overflow:hidden;
  box-shadow:0 -30px 80px -20px rgba(23,18,12,.28);
  transform:translateY(102%);transition:transform .6s var(--ease)}
.sheet.on .sheet__box{transform:none}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px 4px}
.sheet__kick{font-size:.62rem;letter-spacing:.3em;color:var(--goldL)}
.sh-rail{display:flex;align-items:center;padding:10px 18px 2px}
.sh-rail .st{display:flex;align-items:center;gap:7px;color:var(--mut);transition:color .4s}
.sh-rail .st b{position:relative;width:22px;height:22px;display:grid;place-items:center;z-index:0;
  font-family:var(--serif);font-size:.72rem;font-weight:600;isolation:isolate}
.sh-rail .st b::before{content:"";position:absolute;inset:0;transform:rotate(45deg);z-index:-1;
  border:1px solid rgba(28,20,12,.12);background:rgba(23,18,12,.05);transition:border-color .4s,background .4s}
.sh-rail .st span{font-size:.52rem;letter-spacing:.14em}
.sh-rail .st.on{color:var(--goldL)}
.sh-rail .st.on b::before{border-color:rgba(184,146,64,.7);background:rgba(200,162,75,.15)}
.sh-rail .st.cur b::before{box-shadow:0 0 14px rgba(28,20,12,.16)}
.sh-rail .ln{flex:1;height:1px;background:rgba(28,20,12,.10);margin:0 8px}
.sheet__body{overflow-y:auto;padding:14px 18px calc(20px + env(safe-area-inset-bottom));scrollbar-width:none}
.sheet__body::-webkit-scrollbar{display:none}
.sh-step{display:none}
.sh-step.on{display:block;animation:rise .5s var(--ease) both}
.sh-t{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin:6px 0 6px}
.sh-p{font-size:.7rem;line-height:1.65;color:var(--ink2);margin-bottom:14px}
.sh-p em{font-style:italic;font-family:var(--serif);font-size:1.1em;color:var(--goldL)}
.sh-p--c{text-align:center;margin:12px 0}
.ck-help{display:inline-block;font-size:.66rem;color:var(--goldL);
  border-bottom:1px solid rgba(28,20,12,.16);padding-bottom:1px;margin-bottom:10px}
.ck-hint{font-size:.56rem;letter-spacing:.02em;line-height:1.7;color:var(--mut);
  border:1px solid rgba(28,20,12,.09);border-radius:4px;padding:10px 12px;margin-bottom:12px;
  background:rgba(23,18,12,.05)}
/* permission ledger */
.led{display:flex;align-items:center;gap:10px;padding:12px 13px;margin-top:9px;border-radius:4px;
  border:1px solid rgba(28,20,12,.09);background:rgba(23,18,12,.05);
  opacity:.3;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.led.ok{opacity:1;transform:none}
.led i{width:20px;height:20px;border-radius:50%;border:1px solid;display:grid;place-items:center;flex:none}
.led i svg{width:11px;height:11px}
.led--yes i{border-color:rgba(63,207,149,.5);color:var(--grn)}
.led--no i{border-color:rgba(228,88,107,.5);color:var(--red)}
.led b{flex:1;font-size:.58rem;letter-spacing:.1em;color:var(--ink)}
.led span{font-size:.6rem;color:var(--mut)}
.led svg path{stroke-dasharray:24;stroke-dashoffset:24}
.led.ok svg path{animation:draw .5s ease .15s forwards}
.led--no.ok b{text-decoration:line-through;text-decoration-color:var(--gold);color:var(--mut)}
.stamp{margin:16px auto 2px;width:max-content;padding:8px 16px;color:var(--goldL);
  border:3px double rgba(200,162,75,.8);letter-spacing:.22em;font-size:.58rem;
  transform:rotate(-7deg) scale(1.5);opacity:0}
.stamp.on{animation:stampIn .5s var(--ease) forwards}
@keyframes stampIn{from{opacity:0;transform:rotate(-7deg) scale(1.5)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
/* seed step */
.seedbox{padding:14px;text-align:center;margin-bottom:16px}
.seedbox span{display:block;font-size:.56rem;letter-spacing:.2em;color:var(--gold);
  font-family:var(--tech);font-weight:500}
.seedbox b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:600;margin-top:2px;
  font-variant-numeric:tabular-nums}
.seedbox i{display:block;font-style:normal;font-size:.56rem;letter-spacing:.14em;color:var(--mut);margin-top:2px}
.goldr{width:100%;-webkit-appearance:none;appearance:none;height:2px;border-radius:2px;outline:none;
  background:linear-gradient(90deg,var(--gold),rgba(28,20,12,.12))}
.goldr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(115deg,#F0DFAE,#8A6A24);border:1px solid #F6E7BC;
  box-shadow:0 0 14px rgba(184,146,64,.55);cursor:pointer}
.goldr::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:linear-gradient(115deg,#F0DFAE,#8A6A24);border:1px solid #F6E7BC;
  box-shadow:0 0 14px rgba(184,146,64,.55);cursor:pointer}
.range-lab{display:flex;justify-content:space-between;font-size:.54rem;color:var(--mut);
  letter-spacing:.06em;margin:8px 0 12px}

/* ================= REVIEW EVENT MODAL ================= */
.modal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal__bd{position:absolute;inset:0;background:rgba(6,1,3,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__box{position:relative;width:min(360px,92%);max-height:86%;display:flex;flex-direction:column;
  background:linear-gradient(170deg,#220C14,#12050A 65%);border:1px solid rgba(28,20,12,.14);
  border-radius:6px;box-shadow:0 40px 90px -30px rgba(23,18,12,.30);overflow:hidden;
  animation:modalIn .55s var(--ease) both}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;
  border-bottom:1px solid rgba(28,20,12,.10)}
.modal__kick{font-size:.62rem;letter-spacing:.3em;color:var(--goldL)}
.modal__x{width:28px;height:28px;border-radius:50%;border:1px solid rgba(28,20,12,.12);
  color:var(--ink2);font-size:.72rem;transition:border-color .3s,color .3s}
.modal__body{overflow-y:auto;padding:16px 17px 4px;scrollbar-width:none}
.modal__body::-webkit-scrollbar{display:none}
.modal__foot{padding:14px 17px calc(15px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(28,20,12,.10);background:rgba(10,3,6,.5)}

.ev-banner{position:relative;text-align:center;padding:22px 16px;border-radius:5px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(140,28,52,.5), rgba(20,6,11,.6) 70%);
  border:1px solid rgba(28,20,12,.12)}
.ev-banner p{font-size:.62rem;letter-spacing:.3em;color:var(--goldL)}
.ev-banner b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-top:8px}
.ev-banner em{display:block;font-family:var(--serif);font-style:italic;font-size:1.5rem;font-weight:600;
  background:linear-gradient(115deg,#F6E7BC,#C8A24B 55%,#8A6A24);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.ev-post{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;border-radius:5px;
  background:#FFFFFF;border:1px solid rgba(28,20,12,.09)}
.ev-post__ava{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-family:var(--serif);font-weight:700;color:#17120C;background:linear-gradient(115deg,#F0DFAE,#8A6A24)}
.ev-post__txt{flex:1;min-width:0}
.ev-post__txt b{display:block;font-family:var(--serif);font-size:1rem;font-weight:600}
.ev-post__txt i{display:block;font-style:normal;font-size:.6rem;color:var(--mut);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-post__date{font-size:.54rem;color:var(--mut);white-space:nowrap}
.ev-post__heart{color:var(--red)}
.ev-post__heart .mi{width:12px;height:12px}

.ev-note{font-size:.68rem;line-height:1.6;color:var(--ink2);text-align:center;margin:14px 0 10px}
/* member review mini-cards */
.ev-shots{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ev-shot{position:relative;padding:10px;border-radius:4px;background:rgba(23,18,12,.05);
  border:1px solid rgba(28,20,12,.12)}
.ev-shot__head{display:flex;align-items:center;gap:6px}
.ev-shot__ava{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-family:var(--serif);font-size:.56rem;font-weight:700;color:#17120C;
  background:linear-gradient(115deg,#F0DFAE,#8A6A24)}
.ev-shot__head b{flex:1;font-size:.58rem;font-weight:600;color:var(--ink2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ev-shot__tag{font-size:.5rem;letter-spacing:.04em;color:var(--goldL);white-space:nowrap}
.ev-mini{width:100%;height:34px;display:block;margin-top:9px}
.ev-l{fill:none;stroke:var(--grn);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(63,207,149,.4))}
.ev-shot figcaption{display:flex;flex-direction:column;gap:4px;margin-top:8px;align-items:flex-start}
.ev-shot figcaption .mono{font-size:.5rem;letter-spacing:.1em;color:var(--mut);
  font-family:var(--tech);font-weight:500}
.pill{display:inline-block;font-size:.54rem;letter-spacing:.04em;border-radius:100px;padding:2px 8px}
.pill.up{border:1px solid rgba(63,207,149,.4)}

.ev-hide{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 8px;
  font-size:.66rem;color:var(--ink2)}
.ev-hide input{accent-color:var(--gold)}
.btn-quiet{width:100%;border:1px solid rgba(28,20,12,.11);border-radius:4px;padding:11px;
  font-size:.78rem;font-weight:500;color:var(--ink2);transition:border-color .3s,color .3s,transform .2s var(--ease)}

/* ================= PUSHED PAGE (review application) ================= */
.page{position:absolute;inset:22px 0 0 0;z-index:20;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#170710,#0C0307 60%);
  opacity:0;transform:translateX(30px);pointer-events:none;visibility:hidden;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.page.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.pg-head{display:flex;align-items:center;gap:12px;padding:15px 16px;flex:none;
  border-bottom:1px solid rgba(28,20,12,.09)}
.pg-back{width:26px;height:26px;font-size:1rem;color:var(--ink2);transition:color .3s}
.pg-head b{font-size:.92rem;font-weight:600}
.pg-body{flex:1;overflow-y:auto;padding:18px 16px calc(26px + env(safe-area-inset-bottom));scrollbar-width:none}
.pg-body::-webkit-scrollbar{display:none}
.pg-title{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:.01em}
.pg-kicker{font-size:.62rem;letter-spacing:.3em;color:var(--goldL);margin-top:5px}
.note{padding:14px 15px;margin-top:16px;font-size:.72rem;line-height:1.65;color:var(--ink2)}
.note p+p{margin-top:3px}
.note small{display:block;margin-top:7px;font-size:.62rem;color:var(--mut)}
/* questions carry a gold roman-numeral diamond and a connecting rule */
.q{position:relative;margin-top:22px;padding-left:36px}
.q::before{content:"";position:absolute;left:11px;top:28px;bottom:-16px;width:1px;
  background:linear-gradient(180deg,rgba(231,212,154,.28),transparent)}
.q:last-of-type::before{display:none}
.q__n{position:absolute;left:0;top:0;width:23px;height:23px;display:grid;place-items:center;
  font-family:var(--serif);font-size:.7rem;font-weight:600;color:var(--goldL);z-index:0;isolation:isolate}
.q__n::before{content:"";position:absolute;inset:0;transform:rotate(45deg);z-index:-1;
  border:1px solid rgba(184,146,64,.45);background:rgba(200,162,75,.08)}
.q__t{font-size:.8rem;font-weight:600;margin-bottom:9px;line-height:1.5}
.q__in{width:100%;background:rgba(23,18,12,.05);border:1px solid rgba(28,20,12,.10);border-radius:4px;
  color:var(--ink);padding:12px 13px;font-size:.85rem;outline:none;transition:border-color .3s}
.q__in::placeholder{color:#A79A87}
.q__in:focus{border-color:var(--gold)}
.q__in--fixed{background:rgba(23,18,12,.04);color:var(--ink2)}
.q small{display:block;margin-top:6px;font-size:.62rem;color:var(--mut)}
.q__link{display:block;font-size:.68rem;color:var(--goldL);padding:11px 13px;margin-bottom:9px;
  border:1px solid rgba(28,20,12,.12);border-radius:4px;background:rgba(200,162,75,.06)}
.opt{display:flex;align-items:center;gap:10px;padding:13px;margin-top:8px;border-radius:4px;
  border:1px solid rgba(28,20,12,.10);background:rgba(23,18,12,.05);
  font-size:.76rem;color:var(--ink2);cursor:pointer;transition:border-color .3s,transform .2s var(--ease)}
.opt input{accent-color:var(--gold);flex:none}
.btn-submit{position:relative;overflow:hidden;width:100%;margin-top:22px;border-radius:4px;padding:15px;
  font-size:.9rem;font-weight:700;color:#17120C;
  background:linear-gradient(115deg,#F0DFAE,#C8A24B 52%,#8A6A24);
  box-shadow:0 14px 34px -14px rgba(200,162,75,.6);transition:transform .3s var(--ease),filter .3s,opacity .3s}
.btn-submit::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:sweep 1.7s ease-out 1s 1 both}
.btn-submit:disabled{filter:grayscale(.7);opacity:.5;cursor:default}
.btn-submit:disabled::after{display:none}
.btn-submit.done{background:linear-gradient(115deg,#5FE0AC,#2FA877);color:#0B3B25}
.btn-submit.done::after{display:none}

/* ================= CEREMONY (application received) ================= */
.seal{position:absolute;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(80% 60% at 50% 42%, rgba(60,10,20,.78), rgba(5,1,3,.95));
  opacity:0;transition:opacity .45s ease}
.seal.on{opacity:1}
.seal__box{text-align:center;padding:0 24px}
.seal svg{width:112px;height:112px;display:block;margin:0 auto}
.seal__ring{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:100;stroke-dashoffset:100}
.seal.on .seal__ring{animation:draw 1.15s var(--ease) .15s forwards}
.seal__dm{fill:rgba(200,162,75,.07);stroke:rgba(184,146,64,.7);stroke-width:1;
  stroke-dasharray:100;stroke-dashoffset:100}
.seal.on .seal__dm{animation:draw 1s var(--ease) .55s forwards}
.seal__tx{fill:var(--goldL);font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:3px}
.seal__t{font-family:var(--serif);letter-spacing:.32em;font-size:.86rem;color:var(--goldL);
  margin-top:18px;opacity:0}
.seal.on .seal__t{animation:rise .6s var(--ease) 1.05s forwards}
.seal__s{font-size:.56rem;letter-spacing:.14em;color:var(--mut);margin-top:9px;opacity:0}
.seal.on .seal__s{animation:rise .6s var(--ease) 1.35s forwards}

/* ================= TOUCH + HOVER FEEDBACK ================= */
@media (hover:hover){
  .btn-go:hover{transform:translateY(-2px)}
  .btn-go:hover::after,.btn-go:focus-visible::after{animation:sweepH 1.1s ease-out}
  .btn-apple:hover{transform:translateY(-2px)}
  .btn-submit:hover:not(:disabled){transform:translateY(-2px)}
  .btn-submit:hover:not(:disabled)::after{animation:sweepH 1.1s ease-out}
  .link:hover{color:#F6E7BC}
  .back:hover{color:var(--goldL)}
  .stat:hover{border-color:rgba(184,146,64,.45);transform:translateY(-2px)}
  .chipbtn:hover{border-color:var(--goldL);color:var(--goldL)}
  .svc__c:hover{border-color:rgba(231,212,154,.42);transform:translateY(-2px)}
  .post:hover{border-color:rgba(28,20,12,.16)}
  .pcard:hover{border-color:rgba(231,212,154,.38)}
  .notice:hover{border-color:rgba(231,212,154,.38)}
  .linebtn:hover{background:rgba(200,162,75,.1)}
  .linebtn--red:hover{background:rgba(228,88,107,.1)}
  .modal__x:hover{border-color:var(--goldL);color:var(--goldL)}
  .btn-quiet:hover{border-color:var(--goldL);color:var(--goldL)}
  .opt:hover{border-color:rgba(184,146,64,.45)}
  .pg-back:hover{color:var(--goldL)}
  .ck-help:hover{color:#F6E7BC}
}
.btn-go:active,.btn-apple:active,.btn-submit:active:not(:disabled),.linebtn:active,
.chipbtn:active,.btn-quiet:active,.tb:active{transform:scale(.97);transition-duration:.08s}
.stat:active,.svc__c:active,.post:active,.pcard:active,.notice:active,.pos:active,.opt:active{
  transform:scale(.98);transition-duration:.08s}

/* narrow film frame (300px) */
.tb span{white-space:nowrap}
@media (max-width:340px){
  .stat b{font-size:1.12rem}
  .hero-bal b{font-size:2.7rem}
  .tb span{font-size:.52rem}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  .velvet,.gate,.gate__crest,.dm,.btn-go::after,.btn-submit::after,
  .sp-line,.eq__l,.seal__ring,.seal__dm,.ap-live i{animation:none !important}
  .sp-line,.eq__l,.seal__ring,.seal__dm{stroke-dashoffset:0}
  .sp-fill,.eq__f{opacity:1;transition:none}
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .seal__t,.seal__s{opacity:1;animation:none !important}
  .stamp.on{opacity:1;transform:rotate(-7deg);animation:none !important}
  .led{transition:none}
}


/* ============================================================
   LIGHT EDITION — neo-banking card language, light red + gold
   Rounded cards on warm paper, chunky Space Grotesk numerals,
   a floating dark pill for the tab bar. Same DOM, same hooks.
   ============================================================ */

/* the velvet is gone; the paper is the room */
.velvet{display:none}
.sysbar{color:rgba(23,18,12,.55)}

/* ---- radii: everything sits on soft 20-28px corners ---- */
.card{border-radius:26px;box-shadow:0 24px 60px -30px rgba(23,18,12,.25)}
.card--orn::before{display:none}
.dm{display:none}
.glass{background:#FFFFFF;border:1px solid var(--cardline);border-radius:22px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 12px 32px -22px rgba(23,18,12,.22)}
.fld input{border-radius:14px;background:#F5F1EA;border-color:rgba(28,20,12,.08);padding:13px 15px}
.opt,.q__in,.q__link{border-radius:14px}

/* ---- pills: the CTA is a black pill, like the reference ---- */
.btn-go,.btn-submit{background:#17120C;color:#FFFFFF;border-radius:999px;
  box-shadow:0 16px 34px -16px rgba(23,18,12,.55);font-family:var(--mono);font-weight:600;
  letter-spacing:.02em}
.btn-go::after,.btn-submit::after{display:none}
.btn-go:hover,.btn-submit:hover{transform:translateY(-1px)}
.btn-apple{border-radius:999px;background:#FFFFFF;border:1px solid rgba(28,20,12,.16);color:var(--ink)}
.linebtn{border-radius:999px}
.chipbtn{border-radius:999px;background:#FFFFFF;border-color:rgba(28,20,12,.12)}
.chipbtn.on{background:var(--goldCard);border-color:transparent;color:var(--ink)}
.btn-submit.done{background:var(--grn);color:#fff}

/* ---- the gate: a clean page, the card carries everything ---- */
.scr--gate{background:var(--bg)}
.gate{width:min(430px,92vw)}
.gate__name{font-family:var(--mono);font-weight:700;letter-spacing:-.02em}
.gate__name em{font-style:normal;background:none;color:var(--burg);-webkit-text-fill-color:var(--burg)}
.gate__sub{color:var(--mut);letter-spacing:.24em}
.rule i{background:linear-gradient(90deg,transparent,rgba(28,20,12,.2))}
.rule i:last-child{background:linear-gradient(90deg,rgba(28,20,12,.2),transparent)}
.rule span{box-shadow:none;background:var(--gold)}
.card__t{font-family:var(--mono);font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.swap{color:var(--ink2)}
.link{font-family:var(--mono);font-style:normal;font-weight:600;font-size:.9rem;
  color:var(--burg);border-bottom-color:rgba(179,69,58,.4)}
.link:hover{color:#8F3128}
.back{color:var(--mut)}
.back:hover{color:var(--ink)}

/* ---- app header ---- */
.ap-head{border-bottom:0;background:none;padding-top:18px}
.ap-brand{font-family:var(--mono);font-weight:700}
.ap-brand em{font-style:normal;color:var(--burg)}
.ap-live{color:var(--grn)}
.ap-live i{background:var(--grn);box-shadow:none}
.ap-idle{color:var(--mut)}
.ap-bal{color:var(--ink2)}

/* ---- hero balance: the black card from the reference ---- */
.hero-bal{background:#17120C;border-radius:26px;padding:22px 20px 20px;margin-top:4px;
  box-shadow:0 24px 54px -26px rgba(23,18,12,.6);text-align:left}
.hero-bal>span{color:#B9AC96}
.hero-bal b{color:#FFFFFF;font-family:var(--mono);font-weight:700;letter-spacing:-.02em;
  text-shadow:none;font-size:2.9rem}
.hero-bal b i{color:#7E7361}
.hero-bal em{color:#E9D9A6}
.hero-bal .up{color:#8FD7AE}

/* ---- stat tiles: gold and light-red asset cards, black ink ---- */
.grid2 .stat{border:0;border-radius:22px;padding:15px 16px}
.grid2 .stat:nth-child(1){background:var(--goldCard)}
.grid2 .stat:nth-child(2){background:#FFFFFF;border:1px solid var(--cardline)}
.grid2 .stat:nth-child(3){background:var(--redCard)}
.grid2 .stat:nth-child(4){background:#FFFFFF;border:1px solid var(--cardline)}
.stat span{color:rgba(23,18,12,.55)}
.stat b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.stat i{color:rgba(23,18,12,.6)}
.stat .up{color:var(--grn)}
.stat:hover{border-color:transparent}

/* ---- sparkline card ---- */
.spark{border-radius:22px}
.sp-line{stroke:var(--grn);filter:none}

/* ---- positions / calendar / community / data ---- */
.pos{border-radius:22px}
.side{border-radius:999px}
.d{border-radius:12px;background:#F3EEE6;color:var(--ink2)}
.d.red{background:rgba(199,68,60,.14);color:var(--red)}
.d.grn{background:rgba(23,122,76,.13);color:var(--grn)}
.d.sel{outline:2px solid var(--gold);color:var(--ink);box-shadow:none;background:var(--goldCard)}
.rk__n::before{background:#F3EEE6;border-color:rgba(28,20,12,.1)}
.rk__n.gold::before{background:var(--goldCard);box-shadow:none}
.rk__n.gold{color:var(--ink)}
.vb{color:var(--gold);border-color:rgba(184,146,64,.4)}
.tag{color:var(--burg);border-color:rgba(179,69,58,.35)}
.pcard b,.post b{font-family:var(--sans);font-weight:600}
.me__ava{color:var(--ink)}
.me__ava::before{background:var(--goldCard);box-shadow:none}

/* ---- the floating dark pill nav, icons only ---- */
.tabbar{left:50%;transform:translateX(-50%);right:auto;bottom:14px;width:auto;
  background:#17120C;border:0;border-radius:999px;padding:8px 10px;gap:4px;
  box-shadow:0 22px 46px -18px rgba(23,18,12,.55);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.tb{width:52px;height:52px;flex:none;border-radius:50%;color:#8D8271;justify-content:center;gap:0}
.tb span{display:none}
.tb i{font-size:1.15rem}
.tb.on{background:#F3EEE6;color:var(--ink)}
.tb.on::after{display:none}
.tb.on i{transform:none}

/* connect / pre-connection surfaces */
.connect{background:linear-gradient(165deg,#F7E9C6,#EBD79E);border:0;border-radius:26px}
.connect__k{color:rgba(23,18,12,.55)}
.connect b{font-family:var(--mono);font-weight:700}
.connect__p{color:rgba(23,18,12,.7)}
.connect__p em{color:var(--burg);font-style:normal;font-weight:600}
.connect__steps span{background:rgba(255,255,255,.55);border-color:transparent;border-radius:12px;
  color:rgba(23,18,12,.65)}
.connect__guide{color:var(--burg);border-bottom-color:rgba(179,69,58,.4)}
.lk{border-radius:22px}
.ghost{border-radius:22px}
.ghost svg path{stroke:rgba(23,18,12,.25)}

/* modal + sheet + review page on paper */
.modal__bd{background:rgba(23,18,12,.35)}
.modal__box{background:#FFFFFF;border:0;border-radius:26px;
  box-shadow:0 40px 90px -30px rgba(23,18,12,.4)}
.modal__head{border-bottom-color:rgba(28,20,12,.08)}
.modal__kick{color:var(--burg)}
.modal__x{border-color:rgba(28,20,12,.15);color:var(--ink2)}
.ev-banner{background:linear-gradient(165deg,#F2BFAF,#F7D9CF);border:0;border-radius:20px}
.ev-banner p{color:rgba(23,18,12,.55)}
.ev-banner b,.ev-banner em{color:var(--ink)}
.ev-banner em{background:none;-webkit-text-fill-color:var(--burg)}
.ev-post{background:#F7F3EC;border-color:transparent;border-radius:16px}
.ev-post__ava{background:var(--goldCard);color:var(--ink)}
.ev-shot{background:#F7F3EC;border-color:transparent;border-radius:14px}
.modal__foot{background:#FBF8F2;border-top-color:rgba(28,20,12,.08)}
.btn-quiet{border-radius:999px;border-color:rgba(28,20,12,.16);color:var(--ink2)}
.page{background:var(--bg)}
.pg-head{border-bottom-color:rgba(28,20,12,.08)}
.note{border-radius:18px}
.seal-wrap,.seal{background:transparent}

/* status accents that stayed dark-theme green */
.hero-bal em.up{color:#8FD7AE}

@media (max-width:900px){
  .ap-head,.tab{width:100%;max-width:560px;margin-inline:auto}
}

/* ================= START GUIDE + SUMMARY (reference layout) ================= */
.guide{padding:18px 16px 16px;position:relative}
.guide__restart{position:absolute;top:14px;right:16px;display:flex;align-items:center;gap:6px;
  font-family:var(--tech);font-weight:500;font-size:.72rem;letter-spacing:.02em;color:var(--burg)}
.guide__restart .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.guide__head{display:flex;align-items:flex-start;gap:12px;margin-top:20px}
.guide__ico{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;
  border:1px solid var(--cardline);background:#FFFFFF}
.guide__ico img{width:28px;height:28px}
.guide__tt{flex:1;min-width:0}
.guide__t{display:block;font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--burg)}
.guide__s{font-size:.8rem;color:var(--ink2);margin-top:2px}
.guide__count{font-size:.8rem;color:var(--ink2);font-weight:600;white-space:nowrap}
.guide__barrow{display:flex;align-items:center;gap:10px;margin-top:14px}
.guide__bar{flex:1;height:8px;border-radius:999px;background:#EDE7DB;overflow:hidden}
.guide__bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--burg);
  transition:width .5s var(--ease)}
.guide__pct{font-size:.85rem;font-weight:700;color:var(--burg);min-width:38px;text-align:right}

/* the step carousel — one card with a peek of the next, arrows on the edges */
.car{position:relative;margin-top:14px}
.car__win{overflow:hidden;border-radius:20px}
.car__track{display:flex;gap:12px;transition:transform .45s var(--ease)}
.stepcard{flex:0 0 86%;background:#F6F2EA;border:1px solid rgba(28,20,12,.07);border-radius:20px;
  padding:16px 16px 14px;text-align:left}
.stepcard__top{display:flex;align-items:center;gap:9px}
.stepcard__n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--burg);color:#fff;font-weight:700;font-size:.85rem}
.stepcard__of{font-size:.75rem;color:var(--mut);font-weight:600}
.stepcard__t{display:block;font-family:var(--mono);font-weight:700;font-size:1.02rem;margin-top:11px}
.stepcard__p{font-size:.8rem;color:var(--ink2);margin-top:4px;min-height:2.4em}
.stepbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;
  padding:13px;border-radius:999px;background:var(--burg);color:#fff;
  font-family:var(--mono);font-weight:600;font-size:.9rem;text-align:center;
  transition:transform .25s var(--ease),background .3s;cursor:pointer}
.stepbtn:hover{transform:translateY(-1px);background:#9E3A30}
.stepbtn .ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.stepcard.done .stepcard__n{background:var(--grn)}
.stepcard.done .stepbtn{background:#E8F1EA;color:var(--grn)}
.stepcard.done .stepbtn::before{content:"✓";font-weight:700;margin-right:2px}
.car__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;
  border-radius:50%;background:rgba(23,18,12,.55);color:#fff;font-size:1.25rem;line-height:1;
  display:grid;place-items:center;transition:background .3s}
.car__nav:hover{background:rgba(23,18,12,.75)}
.car__nav--l{left:-6px}
.car__nav--r{right:-6px}
.car__dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.car__dots i{width:8px;height:8px;border-radius:999px;background:#DCD4C4;cursor:pointer;
  transition:width .3s var(--ease),background .3s}
.car__dots i.on{width:26px;background:var(--burg)}

/* my investment summary */
.invsum{padding:18px 16px;margin-top:12px}
.invsum__head{display:flex;align-items:center;gap:10px}
.invsum__ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:rgba(179,69,58,.1);color:var(--burg)}
.invsum__ico .ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.invsum__head b{font-family:var(--mono);font-weight:700;font-size:1.04rem}
.invsum__p{font-size:.84rem;color:var(--ink2);margin-top:12px;line-height:1.6}
.invsum__bal{margin-top:14px;padding:16px;border-radius:18px;background:#17120C;text-align:left}
.invsum__bal span{display:block;font-size:.68rem;letter-spacing:.14em;color:#B9AC96}
.invsum__bal b{display:block;font-size:2rem;font-weight:700;color:#fff;margin-top:4px;letter-spacing:-.02em}
.invsum__bal em{display:block;font-style:normal;font-size:.8rem;margin-top:4px;color:#8FD7AE}
.invsum__btn{margin-top:14px}

/* the five buttons sit dead-centre in a shrink-wrapped pill */
.scr--app .tabbar{inset:auto auto 14px 50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 24px)}

/* ============================================================
   ACCOUNTS · LIVE EXCHANGE DATA · MEMBER REVIEWS
   ============================================================ */

/* a confirmation reads in the same place an error would */
.form-err.ok{color:var(--grn)}

/* quiet one-line problem report under the app header */
.ap-note{margin:0 14px 8px;padding:9px 12px;border-radius:12px;font-size:.68rem;line-height:1.5;
  color:var(--red);background:rgba(199,68,60,.09);border:1px solid rgba(199,68,60,.22)}

/* the promise under the key form */
.ck-safe{margin:12px 2px 0;font-size:.56rem;line-height:1.6;letter-spacing:.04em;
  color:var(--mut);text-align:center}

/* empty states, said plainly rather than left blank */
.pos--none,.post--none{text-align:center;padding:22px 16px}
.pos--none b,.post--none b{display:block;font-family:var(--serif);font-size:1.02rem}
.pos--none span,.post--none span{display:block;font-size:.68rem;color:var(--mut);margin-top:5px}

/* ---------- write a review ---------- */
.rvw{padding:15px 15px 13px;margin-bottom:14px}
.rvw__who{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.rvw__ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--goldCard);color:#2A1D06;font-size:.66rem;font-weight:700;letter-spacing:.04em}
.rvw__who b{font-size:.86rem;font-weight:600}

/* rating in house diamonds, not dingbat stars — no font can drop them */
.rvw__stars{display:flex;gap:9px;margin-bottom:11px}
.str{width:15px;height:15px;padding:0;border:1.4px solid var(--cardline);background:none;
  transform:rotate(45deg);border-radius:2px;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.str.on{background:var(--goldL);border-color:var(--goldL)}
.str:active{transform:rotate(45deg) scale(.86)}

.rvw textarea{width:100%;min-height:74px;resize:vertical;padding:11px 12px;border-radius:12px;
  border:1px solid var(--cardline);background:rgba(255,255,255,.55);color:var(--ink);
  font-family:var(--sans);font-size:.84rem;line-height:1.55}
.rvw textarea:focus{outline:none;border-color:var(--burg);background:#fff}
.rvw textarea::placeholder{color:var(--mut)}

.rvw__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.rvw__foot .mono{font-size:.56rem;letter-spacing:.09em;color:var(--mut)}
.rvw__foot .stepbtn{width:auto;padding:10px 22px;margin:0}

/* ============================================================
   CONNECT SHEET — light-red edition + guide slides
   Scoped to .sheet--red so it overrides the old dark sheet.
   Larger type throughout; dark ink on a soft red panel.
   ============================================================ */
.sheet--red .sheet__box{
  background:linear-gradient(180deg,#FCE9E4 0%,#F7D8D0 62%,#F3C9BF 100%);
  border:1px solid rgba(179,69,58,.18);border-bottom:0;
  box-shadow:0 -30px 80px -18px rgba(120,30,30,.32)}
.sheet--red .sheet__head{padding:20px 20px 6px}
.sheet__title{font-family:var(--mono);font-weight:700;letter-spacing:-.01em;
  font-size:1.9rem;color:var(--burg);line-height:1.05}
.sheet--red .modal__x{color:rgba(120,30,30,.6)}

/* larger body type */
.sheet--red .sheet__body{padding:16px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet--red .sh-t{font-size:1.6rem;color:var(--ink);margin:4px 0 8px;letter-spacing:-.01em}
.sheet--red .sh-p{font-size:.86rem;line-height:1.7;color:#6E4B44;margin-bottom:16px}
.sheet--red .sh-p em{color:var(--burg);font-family:var(--serif);font-size:1.05em}
.sheet--red .sh-p--c{font-size:.82rem;color:#6E4B44}
.sheet--red .fld span{font-size:.64rem;letter-spacing:.16em;color:#9A5A50;margin-bottom:7px}
.sheet--red .fld input{background:#FFFFFF;border:1px solid rgba(179,69,58,.16);
  font-size:.98rem;padding:14px 15px;color:var(--ink)}
.sheet--red .fld input::placeholder{color:#C39B93}
.sheet--red .fld input:focus{border-color:var(--burg);box-shadow:0 0 0 3px rgba(179,69,58,.12)}
.sheet--red .btn-go{font-size:.94rem;padding:16px;margin-top:6px}
.sheet--red .ck-safe{font-size:.62rem;color:#8A5B53;margin-top:14px;text-align:center;line-height:1.7}

/* text-button links inside the sheet */
.sh-link{background:none;border:0;padding:0;cursor:pointer;color:var(--burg);
  font-weight:600;border-bottom:1px solid rgba(179,69,58,.4);font-size:inherit}
.sh-link:hover{color:#8F3128}
.sh-link--sm{display:inline-block;font-size:.72rem;margin:2px 0 8px}

/* show / hide eye toggle */
.fld__wrap{position:relative;display:block}
.fld__wrap input{width:100%;padding-right:46px !important}
.fld__eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;background-color:#B3453A;
  -webkit-mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M1 8s2.6-4.6 7-4.6S15 8 15 8s-2.6 4.6-7 4.6S1 8 1 8Z'/%3E%3Ccircle cx='8' cy='8' r='2.1'/%3E%3C/svg%3E");
  mask:no-repeat center/19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M1 8s2.6-4.6 7-4.6S15 8 15 8s-2.6 4.6-7 4.6S1 8 1 8Z'/%3E%3Ccircle cx='8' cy='8' r='2.1'/%3E%3C/svg%3E")}
.fld__eye.on{background-color:#9A5A50;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M1 8s2.6-4.6 7-4.6c1 0 1.9.24 2.7.6M15 8s-2.6 4.6-7 4.6c-1 0-1.9-.24-2.7-.6'/%3E%3Cpath d='M2 2l12 12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M1 8s2.6-4.6 7-4.6c1 0 1.9.24 2.7.6M15 8s-2.6 4.6-7 4.6c-1 0-1.9-.24-2.7-.6'/%3E%3Cpath d='M2 2l12 12'/%3E%3C/svg%3E")}

/* ---------- guide slides ---------- */
.gd-stage{text-align:center;padding:6px 0 2px}
.gd-shot{margin:0 auto;width:min(250px,74%);border-radius:22px;overflow:hidden;
  background:#fff;border:1px solid rgba(179,69,58,.18);
  box-shadow:0 20px 44px -22px rgba(120,30,30,.4)}
.gd-shot svg{display:block;width:100%;height:auto}
.gd-num{display:block;margin:16px 0 6px;font-size:.6rem;letter-spacing:.2em;color:var(--burg)}
.gd-cap{display:block;font-family:var(--mono);font-weight:700;font-size:1.18rem;
  color:var(--ink);letter-spacing:-.01em}
.gd-sub{margin:8px auto 0;max-width:34ch;font-size:.84rem;line-height:1.6;color:#6E4B44}
.gd-sub code{font-family:var(--tech);background:rgba(179,69,58,.12);color:var(--burg);
  padding:1px 6px;border-radius:5px;font-weight:600}
.gd-dots{display:flex;gap:7px;justify-content:center;margin:18px 0 4px}
.gd-dots i{width:7px;height:7px;border-radius:50%;background:rgba(179,69,58,.24);transition:all .3s}
.gd-dots i.on{background:var(--burg);transform:scale(1.25)}
.gd-nav{display:flex;gap:10px;align-items:center;margin-top:14px}
.gd-nav .btn-quiet{flex:none;min-width:88px}
.gd-nav .btn-go{flex:1;margin-top:0}
.gd-nav .btn-quiet[hidden]{display:none}

@media (max-width:380px){
  .sheet__title{font-size:1.6rem}
  .sheet--red .sh-t{font-size:1.35rem}
}

/* ============================================================================
   DESKTOP — a full page, not a phone in a case
   Mobile is untouched: every rule here lives inside the ≥900px query.
   The single phone column becomes a wide two-column board: cards pair up
   side by side, while headers, charts and tables still run the full width.
   This block sits last on purpose — it has to win over the LIGHT EDITION
   overrides above, which share its specificity.
   ========================================================================== */
@media (min-width:900px){
  body{background:var(--bg)}
  .stage{max-width:none;width:100%;height:100dvh;border-radius:0;border:0;box-shadow:none}
  /* the same stacked flow as the phone, in one centred column that
     breathes — no grid tricks, nothing rearranged */
  .ap-head,.tab,.page .pg-body{width:100%;max-width:760px;margin-inline:auto}
  .ap-head{padding-inline:24px}
  .tab{padding-inline:24px}
  .tabbar{max-width:none}

  /* sheets and modals stay a comfortable reading width, centred */
  .sheet__box{max-width:600px;margin-inline:auto;border-radius:18px 18px 0 0}
  .modal__box{max-width:620px}
  .seal__box{max-width:520px}
}

/* ============================================================================
   DARK MODE — toggled from My → Appearance
   The palette flips at the token level; the rules below repaint the
   surfaces that the LIGHT EDITION had hard-coded to white or black.
   Gold and burgundy stay the house colours, just warmer against the dark.
   ========================================================================== */
/* The night is the house's velvet: near-black plum with gold hairlines,
   not a grey app skin. Cards float on true depth, gold does the talking. */
html[data-theme="dark"]{
  --bg:#0E070A; --bg2:#150B0F; --card:#1C1116; --cardline:rgba(231,212,154,.14);
  --ink:#F6EFE2; --ink2:#CFC2AF; --mut:#8F8172;
  --gold:#C9A55B; --goldL:#E7CE8C; --goldD:#8A6A24; --burg:#C75B4D;
  --goldCard:#E3C77F; --redCard:#8E3A31;
  --grn:#5BCE93; --grnD:rgba(91,206,147,.13); --red:#E4707A;
}
[data-theme="dark"] body,[data-theme="dark"] .stage,[data-theme="dark"] .scr--gate,
[data-theme="dark"] .page{background:var(--bg)}
/* a faint candlelit gradient so the room isn't flat */
[data-theme="dark"] .stage{
  background:radial-gradient(120% 70% at 50% -10%, #21121A 0%, #140A0F 46%, #0C0508 100%)}

/* surfaces — plum-dark cards with a gold hairline, real elevation */
[data-theme="dark"] .glass{
  background:linear-gradient(170deg,#211318 0%,#180D12 100%);
  border-color:var(--cardline);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(231,212,154,.07)}
[data-theme="dark"] .card{
  background:linear-gradient(165deg,#241419 0%,#170C10 100%);
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(231,212,154,.09)}
[data-theme="dark"] .stepcard{background:#241419;border-color:rgba(231,212,154,.10)}
[data-theme="dark"] .modal__box,[data-theme="dark"] .note{background:#1C1116}
[data-theme="dark"] .modal__foot{background:#150B0F;border-top-color:rgba(231,212,154,.10)}
[data-theme="dark"] .grid2 .stat:nth-child(2),
[data-theme="dark"] .grid2 .stat:nth-child(4){background:#1C1116;border-color:var(--cardline)}
[data-theme="dark"] .svc__c{background:#1C1116}
[data-theme="dark"] .guide__bar{background:rgba(231,212,154,.12)}
[data-theme="dark"] .guide__ico{background:#26161C;border:1px solid rgba(231,212,154,.14)}
[data-theme="dark"] .invsum__ico{background:#26161C}
[data-theme="dark"] .car__nav{background:rgba(231,212,154,.16)}
[data-theme="dark"] .car__nav:hover{background:rgba(231,212,154,.3)}

/* the balance cards become the treasure: near-black with gold numerals */
[data-theme="dark"] .hero-bal,[data-theme="dark"] .invsum__bal{
  background:#070304;border:1px solid rgba(231,212,154,.22);
  box-shadow:0 24px 54px -26px rgba(0,0,0,.95),inset 0 0 40px rgba(140,28,52,.14)}
[data-theme="dark"] .hero-bal b,[data-theme="dark"] .invsum__bal b{
  color:#F2E3B6;text-shadow:0 0 22px rgba(231,212,154,.25)}

/* the bottom pill: velvet with a gold-foil active circle */
[data-theme="dark"] .tabbar{background:#231318;box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
[data-theme="dark"] .tb{color:#7E6F60}
[data-theme="dark"] .tb.on{background:linear-gradient(115deg,#EFDCA4,#C39A47);color:#221503}

/* inputs */
[data-theme="dark"] .fld input,[data-theme="dark"] .rvw textarea,
[data-theme="dark"] .q__in{background:#140A0E;border-color:rgba(231,212,154,.16);color:var(--ink)}
[data-theme="dark"] .fld input::placeholder,
[data-theme="dark"] .rvw textarea::placeholder{color:#6E6154}
[data-theme="dark"] .fld input:focus,[data-theme="dark"] .rvw textarea:focus{
  background:#180D12;border-color:rgba(231,212,154,.4);
  box-shadow:0 0 0 3px rgba(231,212,154,.08)}

/* buttons — the main action is gold foil, quiet ones are velvet */
[data-theme="dark"] .btn-go,[data-theme="dark"] .btn-submit{
  background:linear-gradient(115deg,#EFDCA4 0%,#D9B96B 45%,#B8923F 100%);color:#221503;
  box-shadow:0 16px 38px -16px rgba(200,162,75,.45)}
[data-theme="dark"] .btn-apple,[data-theme="dark"] .chipbtn{
  background:#241419;border-color:rgba(231,212,154,.18);color:var(--ink)}
[data-theme="dark"] .btn-quiet{border-color:rgba(231,212,154,.2);color:var(--ink2)}
[data-theme="dark"] .stepcard.done .stepbtn{background:rgba(91,206,147,.12);color:var(--grn)}
[data-theme="dark"] .linebtn{border-color:rgba(231,212,154,.35)}

/* hairlines and small parts */
[data-theme="dark"] .rk,[data-theme="dark"] .sl{border-top-color:rgba(231,212,154,.10)}
[data-theme="dark"] .rk__n::before{background:#241419;border-color:rgba(231,212,154,.18)}
[data-theme="dark"] .d.fut{border-color:rgba(231,212,154,.15)}
[data-theme="dark"] .pg-head{border-bottom-color:rgba(231,212,154,.10)}
[data-theme="dark"] .connect__steps span{background:rgba(231,212,154,.1)}
[data-theme="dark"] .opt{border-color:rgba(231,212,154,.15)}
[data-theme="dark"] .ck-hint{border-color:rgba(231,212,154,.14);background:rgba(231,212,154,.05)}

/* the review-event modal keeps its jewel banner, deepened */
[data-theme="dark"] .ev-banner{
  background:radial-gradient(130% 100% at 50% 0%, rgba(140,28,52,.65), rgba(18,6,10,.9) 75%);
  border:1px solid rgba(231,212,154,.16)}
[data-theme="dark"] .ev-banner b{color:var(--ink)}
[data-theme="dark"] .ev-post,[data-theme="dark"] .ev-shot{background:#241419}

/* the connect + guide sheets: deep velvet, gold title, no glare */
[data-theme="dark"] .sheet--red .sheet__box{
  background:linear-gradient(180deg,#301218 0%,#1F0A10 58%,#14060A 100%);
  border-color:rgba(231,212,154,.2)}
[data-theme="dark"] .sheet--red .sheet__title{color:var(--goldL)}
[data-theme="dark"] .sheet--red .modal__x{color:rgba(231,212,154,.55)}
[data-theme="dark"] .sheet--red .sh-t,[data-theme="dark"] .gd-cap{color:var(--ink)}
[data-theme="dark"] .sheet--red .sh-p,[data-theme="dark"] .sheet--red .sh-p--c,
[data-theme="dark"] .sheet--red .ck-safe,[data-theme="dark"] .gd-sub{color:#C4AC9E}
[data-theme="dark"] .sheet--red .sh-p em{color:var(--goldL)}
[data-theme="dark"] .sheet--red .sh-link{color:var(--goldL);border-bottom-color:rgba(231,212,154,.4)}
[data-theme="dark"] .sheet--red .fld input{background:#120609;border-color:rgba(231,212,154,.18)}
[data-theme="dark"] .sheet--red .fld span{color:#B99C7E}
[data-theme="dark"] .sheet--red .fld input::placeholder{color:#6E5A50}
[data-theme="dark"] .fld__eye{background-color:#C9A55B}
[data-theme="dark"] .gd-shot{border-color:rgba(231,212,154,.22);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.85)}
[data-theme="dark"] .gd-num{color:var(--goldL)}
[data-theme="dark"] .gd-dots i{background:rgba(231,212,154,.22)}
[data-theme="dark"] .gd-dots i.on{background:var(--goldL)}
[data-theme="dark"] .gd-sub code{background:rgba(231,212,154,.14);color:var(--goldL)}
[data-theme="dark"] .seedbox b{color:#F2E3B6}

/* ============================================================================
   THE FLOATING TAB BAR
   It used to be a flex item, so it reserved a solid strip along the bottom
   and the scrolling area stopped dead above it — the page looked cut off.
   Now it is lifted out of the flow and floats over the page: the content
   runs the full height and simply scrolls underneath the pill.
   ========================================================================== */
.scr--app .tabbar{
  position:absolute;inset:auto auto 14px 50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 24px);z-index:6}
/* room to scroll clear of the pill, so nothing hides behind it */
.tab{padding-bottom:118px}
.page .pg-body{padding-bottom:118px}

/* ============================================================================
   TYPE CONSISTENCY — one scale across the app
   The settings rows had drifted: tappable rows rendered ~1rem while plain
   rows stayed .8rem, and several labels sat below comfortable reading size.
   This block (last, so it wins) puts every text on the same coherent scale.
   ========================================================================== */
/* settings list: every row the same size, values readable */
.sl,.sl--tap{font-size:.92rem}
.sl b{font-size:.74rem}
/* profile card */
.me b{font-size:.98rem}
.me span{font-size:.68rem}
/* header status */
.ap-live,.ap-idle{font-size:.64rem}
/* section headers' right-hand tags */
.sect-t span{font-size:.64rem}
/* card metadata that was whispering */
.pos__name i,.post span{font-size:.72rem}
.pos__meta,.pcard__meta,.notice i{font-size:.64rem}
.rk__p{font-size:.74rem}
.stat span{font-size:.6rem}
.stat i{font-size:.7rem}
/* chips + filters */
.rank__tabs button,.rank__period button{font-size:.62rem}
/* forms */
.fld span{font-size:.64rem}
.form-err{font-size:.74rem}
.card__fine,.agree span{font-size:.7rem}
.rvw__foot .mono{font-size:.62rem}
.ck-safe{font-size:.68rem}
/* balance + data labels */
.hero-bal>span{font-size:.66rem}
.spark__meta{font-size:.62rem}
.eq__meta{font-size:.64rem}
.cal__title span{font-size:.64rem}
.cal__day{font-size:.62rem}
.cal__lg{font-size:.6rem}
.fr{font-size:.66rem}
.fr--h{font-size:.58rem}

/* links styled as buttons must still fill their row like a real button */
a.linebtn{display:block;text-align:center}
button.svc__c{width:100%}

/* the strategy card is the tightest row on a phone — at the larger base
   size its three columns need a little give so the name stays on one line */
@media (max-width:430px){
  .pos__top{gap:8px}
  .side{font-size:.5rem;padding-inline:8px}
  .pos__pnl b{font-size:1.05rem}
  .pos__meta{gap:9px;font-size:.6rem}
}

/* ============================================================================
   PHONE LAYOUT FIXES
   Audited at 375x812. Each rule below fixes a specific defect found on a
   real phone viewport; desktop is untouched.
   ========================================================================== */
@media (max-width:560px){

  /* 1 + 2 · The step carousel.
     The ‹ › arrows used to float on top of the card, covering the description,
     and the next card peeked in cut mid-word. On a phone one card now fills
     the width and you swipe; the arrows move below the card, beside the dots,
     where they overlap nothing. */
  .stepcard{flex:0 0 100%}
  /* card on its own row, then a control strip:  ‹  • • • •  ›  */
  .car{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;
    justify-content:center;gap:12px}
  .car__win{order:1;flex:0 0 100%;overflow:hidden;border-radius:20px}
  .car__nav--l{order:2}
  .car__dots{order:3;margin-top:0}
  .car__nav--r{order:4}
  .car__nav{position:static;transform:none;width:38px;height:38px;flex:none;
    background:rgba(23,18,12,.07);color:var(--ink);font-size:1.3rem}
  .car__nav:hover{background:rgba(23,18,12,.15)}
  .car__nav:disabled{opacity:.28}

  /* 3 · "Restart tutorial" was crowding the 1/4 counter. Give it its own line. */
  .guide__restart{position:static;margin:0 0 12px auto;width:max-content}
  .guide__head{margin-top:0}

  /* 6 · "Create an account" was a 24px tap target — below the 44px minimum. */
  .swap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
  .swap .link{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  .back{min-height:44px;display:inline-flex;align-items:center}

  /* 7 · The equity chart ran into the card's rounded corner. */
  .eq{overflow:hidden}
  .eq svg{display:block;width:100%}
}

/* 4 + 5 · The connect sheet.
   On a phone the heading block ate ~450px, pushing "Verify & connect" below
   the fold — the primary action needed a scroll to reach. The header is
   tightened and the sheet is allowed the full height it needs. */
@media (max-width:560px){
  .sheet--red .sheet__box{max-height:94%}
  .sheet--red .sheet__head{padding:16px 20px 2px}
  .sheet__title{font-size:1.5rem}
  .sheet--red .sheet__body{padding-top:10px}
  .sheet--red .sh-t{font-size:1.22rem;margin:2px 0 6px}
  .sheet--red .sh-p{font-size:.8rem;line-height:1.55;margin-bottom:12px}
  .sheet--red .fld{margin-bottom:10px}
  .sheet--red .fld span{margin-bottom:4px}
  .sheet--red .fld input{padding:12px 14px;font-size:.94rem}
  .sheet--red .btn-go{padding:14px;margin-top:4px}
  .sheet--red .ck-safe{margin-top:10px}
  .sh-link--sm{margin:0 0 6px}
}

/* ============================================================================
   THE STEP CAROUSEL — one card per view at every width.
   The floating ‹ › arrows used to sit on top of the card and cover the
   description, with the next card bleeding in cut mid-word. The arrows now
   live in a control strip under the card, either side of the dots.
   ========================================================================== */
.stepcard{flex:0 0 100%}
.car{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.car__win{order:1;flex:0 0 100%;overflow:hidden;border-radius:20px}
.car__nav--l{order:2}
.car__dots{order:3;margin-top:0}
.car__nav--r{order:4}
.car__nav{position:static;transform:none;width:38px;height:38px;flex:none;
  background:rgba(23,18,12,.07);color:var(--ink);font-size:1.3rem}
.car__nav:hover{background:rgba(23,18,12,.15);transform:none}
[data-theme="dark"] .car__nav{background:rgba(231,212,154,.14);color:var(--ink)}

/* ============================================================================
   DESKTOP COMPOSITION — the board, laid out like it was drawn for a screen.
   A centred 1180px board on the paper. Every tab is composed on a 12-column
   grid with an intentional shape — hero pairs, side rails, full-width bands —
   instead of phone cards poured into columns. Scoped ≥900px; the phone
   layout above is untouched.
   ========================================================================== */
@media (min-width:900px){

  /* ---- the board itself ---- */
  .ap-head,.tab,.page .pg-body{width:100%;max-width:1180px;margin-inline:auto}
  .ap-head{padding-inline:36px}
  .tab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:24px;align-items:start;align-content:start;
    padding:18px 36px 122px}
  .tab>*{grid-column:1/-1;min-width:0}

  /* section headers get display weight on a big screen */
  .sect-t{margin:26px 2px 12px}
  .sect-t b{font-size:1.4rem}

  /* section CTAs shrink to elegant centred pills instead of full-width bars */
  .tab>.linebtn{width:auto;justify-self:center;padding:12px 38px;margin-top:14px}
  .tab>.linebtn--red{margin-top:22px}

  /* a little life under the pointer — cards lift, nothing shouts */
  @media (hover:hover){
    .pcard:hover,.svc__c:hover,.notice:hover{transform:translateY(-3px);
      box-shadow:0 22px 44px -26px rgba(23,18,12,.35)}
    .pos:hover,.rankcard:hover{transform:none}
  }

  /* ---- HOME · hero pair: the guide beside the treasury ---- */
  #tab-home>.guide{grid-column:1/8;align-self:stretch}
  #tab-home>.invsum{grid-column:8/13;align-self:stretch;
    display:flex;flex-direction:column}
  #tab-home>.invsum .invsum__bal{flex:1;display:flex;flex-direction:column;
    justify-content:center}
  #tab-home>.invsum .invsum__p{flex:1;display:flex;align-items:center}
  #tab-home>.invsum .invsum__btn{margin-top:auto}

  /* community posts read as a shelf of three */
  #tab-home>.pcard{grid-column:span 4}

  /* services: six doors in one row */
  .svc{grid-template-columns:repeat(6,1fr);gap:12px}
  .svc__c{padding:16px 6px 14px}

  /* ---- MY INVEST · the calendar is the desk, strategies sit beside it ---- */
  #tab-invest>.cal{grid-column:1/8;grid-row:1/9}
  #tab-invest>*:not(.cal){grid-column:8/13}

  /* ---- COMMUNITY · write on the left, read on the right ---- */
  #tab-comm>#rvw-box,#tab-comm>.rvw{grid-column:1/8;align-self:stretch}
  #tab-comm>#rvw-feed{grid-column:8/13;display:flex;flex-direction:column;gap:0}
  #tab-comm .rvw textarea{min-height:120px}

  /* ---- DATA · one wide chart, four stats beneath ---- */
  #tab-data .grid2{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  #tab-data .eq svg{height:300px}

  /* ---- MY · a quiet, centred settings page — the whitespace is symmetric,
          which reads as calm rather than empty ---- */
  #tab-my{max-width:820px;grid-template-columns:1fr}
}

/* very large screens: let the board breathe a touch wider */
@media (min-width:1600px){
  .ap-head,.tab,.page .pg-body{max-width:1280px}
}

/* ============================================================================
   LIVE-MODE FURNITURE — empty states, forgot-password, the gate's way home
   ============================================================================ */
/* honest empty states shown while there is no real data yet */
.nostate{padding:22px 18px;text-align:center;color:var(--mut);
  font-size:.82rem;line-height:1.65;margin-bottom:10px}
[data-theme="dark"] .nostate{color:#8F8172}

/* the gate's link back to the main site */
/* The link sits in the corner of the screen, clear of the crest. The gate
   screens are already positioned, so absolute anchors to the screen itself.
   On a phone the corner works too — same spot the register screen's Back
   button lives. */
.gate__home{position:absolute;top:14px;left:18px;z-index:5}
@media (min-width:900px){
  .gate__home{top:22px;left:28px}
}
.gate__home{display:inline-flex;align-items:center;min-height:44px;
  font-size:.72rem;letter-spacing:.06em;color:var(--mut)}
.gate__home:hover{color:var(--burg)}

/* forgot password */
.fp-row{margin:10px 0 0;text-align:center}
.fp-row .link{font-size:.78rem}
.forgot{margin-top:14px;padding-top:14px;border-top:1px dashed var(--cardline)}
.btn-go--quiet{background:#FFFFFF;color:var(--ink);border:1px solid var(--cardline);box-shadow:none}
.btn-go--quiet:hover{transform:none;background:#F7F3EC}
[data-theme="dark"] .btn-go--quiet{background:#241419;color:var(--ink);border-color:rgba(231,212,154,.18)}

/* live position-history rows carry three columns, not four */
#data-live .fr{grid-template-columns:1.1fr 1.6fr 1fr}
#data-live .fr span:last-child{text-align:right}
#data-live .eq svg{display:block;width:100%}

/* a real screenshot in the guide frame: it is already a phone screen, so it
   needs no white card behind it */
.gd-shot--photo{background:#0B0B0D;border-color:rgba(28,20,12,.25)}
[data-theme="dark"] .gd-shot--photo{border-color:rgba(231,212,154,.22)}
.gd-shot--photo img{display:block;width:100%;height:auto}

/* Guide navigation: Back and Next sit together, centred, at every step —
   the row used to stretch Back full-width and push Next off the edge. */
.gd-nav{justify-content:center;gap:14px}
.gd-nav .btn-quiet,.gd-nav .btn-go{flex:0 0 auto;width:auto;min-width:132px;
  padding-inline:26px;margin-top:0}

/* Tall screenshots (the API list, the key page) must not push the Back/Next
   row below the fold — constrain by height and let width follow. */
.gd-shot--photo{width:auto;max-width:min(250px,74%);margin-inline:auto;
  display:flex;align-items:center;justify-content:center}
.gd-shot--photo img{max-height:42vh;width:auto;max-width:100%}
@media (min-width:900px){ .gd-shot--photo img{max-height:46vh} }