/* Account: the wallet. An app screen on a phone, a tidy dashboard on a desktop.
   Orange is money coming in. Green is a lead still moving. */

.soon{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px dashed rgba(255,255,255,.42);font:700 .72rem/1 var(--sans);letter-spacing:.02em;color:var(--text-2);white-space:nowrap}

/* ---------- page head ---------- */
.acct{padding:clamp(16px,3vw,44px) 0 clamp(40px,6vw,84px)}
.acct__head{margin-bottom:clamp(14px,2.4vw,28px)}
.acct__who{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;color:var(--text-2)}
.acct__av,.who__av{display:grid;place-items:center;flex:none;border-radius:50%;background:linear-gradient(180deg,#2c322c,#131613);box-shadow:inset 0 0 0 1px var(--line-3),inset 0 1px 0 rgba(255,255,255,.2);font-family:var(--display);font-weight:800;color:var(--text)}
.acct__av{width:28px;height:28px;font-size:.64rem;letter-spacing:.02em}
.acct h1{margin-top:8px;font-size:clamp(2.2rem,6.6vw,3.5rem)}
.acct__grid{display:grid;gap:18px}
.acct__grid>*{min-width:0}

/* ---------- the balance card: the logo's gloss tile ---------- */
.bal{padding:20px}
.bal::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(120% 86% at 50% 110%,rgba(255,138,36,.8),rgba(255,138,36,0) 64%)}
.bal.is-down::after{background:radial-gradient(120% 86% at 50% 110%,rgba(255,255,255,.3),rgba(255,255,255,0) 64%)}
.bal__top{display:flex;align-items:center;gap:10px;min-height:28px}
.bal__label{font-weight:700;color:var(--text-2)}
.bal__num{display:grid;gap:12px;margin-top:34px}
.bal__n{display:block;font:900 clamp(3.9rem,21vw,6rem)/.86 var(--display);letter-spacing:-.04em;color:#fff;text-shadow:0 0 54px rgba(255,138,36,.38)}
.bal[data-len="m"] .bal__n{font-size:clamp(3rem,15.4vw,4.6rem)}
.bal[data-len="s"] .bal__n{font-size:clamp(2.2rem,11vw,3.4rem)}
.bal__unit{display:inline-flex;align-items:center;gap:9px;font:800 1.15rem/1 var(--display);color:var(--orange-pale)}
.bal__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bal__claim .icon{width:13px;height:13px;stroke-width:3}
.bal__act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.bal__act .btn{min-height:54px;padding:0 .8em}

/* a small glass coin in the corner of the card */
.wcoin{position:absolute;right:16px;top:16px;width:80px;height:80px;border-radius:50%;pointer-events:none;background:
  conic-gradient(from -52deg,rgba(255,234,196,.72) 0,rgba(255,214,150,0) 12%,rgba(92,28,0,.46) 30%,rgba(255,198,122,.56) 46%,rgba(255,226,172,.2) 53%,rgba(92,28,0,.42) 70%,rgba(255,214,150,0) 88%,rgba(255,234,196,.72) 100%),
  radial-gradient(closest-side,#170800 74%,#ffd2a0 76%,#a34603 78.4%,#ec6d06 82.6%,#ff8a1e 86.6%,#ffc27a 89.4%,#ff9026 92%,#ea6a04 95%,#b04c04 97.6%,#ffa85c 98.8%,#6a2c00 100%);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.95),0 0 34px rgba(255,138,36,.42)}
.wcoin::before{content:"";position:absolute;inset:4%;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(255,255,255,.95);transform:rotate(-40deg)}
.wcoin__in{position:absolute;inset:12.5%;display:grid;place-items:center;border-radius:50%;overflow:hidden;clip-path:circle(50%);background:radial-gradient(130% 96% at 50% 0%,#282d28 0,#131613 44%,#060706 100%);box-shadow:inset 0 0 0 1px rgba(12,4,0,.9),inset 0 2px 1px rgba(255,255,255,.2),inset 0 -14px 14px -8px rgba(255,138,36,.52)}
.wcoin__in::before{content:"";position:absolute;left:-32%;right:-32%;top:-76%;height:124%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.17) 100%)}
.wcoin picture{position:relative;width:72%}
.wcoin img{width:100%;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.bal[data-len="s"] .wcoin{transform:scale(.72);transform-origin:100% 0}
.anim .bal.is-up::after,.anim .bal.is-down::after{animation:bal-pulse 1.2s var(--ease)}
.anim .bal.is-up .wcoin{animation:wcoin-flip 1s var(--ease)}
.anim .bal.is-down .wcoin{animation:wcoin-dip .7s var(--ease)}
@keyframes bal-pulse{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
@keyframes wcoin-flip{0%{transform:perspective(420px) rotateY(0) scale(1)}55%{transform:perspective(420px) rotateY(300deg) scale(1.16)}100%{transform:perspective(420px) rotateY(360deg) scale(1)}}
@keyframes wcoin-dip{0%,100%{transform:translateY(0)}45%{transform:translateY(7px) scale(.94)}}

/* ---------- the two coin slots ---------- */
.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.slot{display:grid;align-content:start;gap:8px;min-width:0;padding:14px;border-radius:var(--r-md);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.slot__top{display:flex;align-items:center;gap:8px;min-width:0}
.slot__name{min-width:0;font-weight:700;font-size:.95rem;line-height:1.2}
.slot .coin{font-size:1.05rem}
.slot__blank{flex:none;width:1.2rem;height:1.2rem;border-radius:50%;border:1.5px dashed var(--line-3);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.4),rgba(255,255,255,.05) 62%)}
.slot__amt{font:800 1.75rem/1 var(--display);letter-spacing:-.02em}
.slot--soon{border-style:dashed;border-color:var(--line-3);background:rgba(255,255,255,.025);box-shadow:none}
.slot--soon .slot__amt{color:var(--text-3)}
.slot__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px}
.acct__rule{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:.98rem;line-height:1.45;color:var(--text-2)}
.acct__rule .icon{width:20px;height:20px;margin-top:2px;color:var(--orange-hi)}
.acct__rule .link{display:flex;align-items:center;width:max-content;min-height:44px;white-space:nowrap;text-decoration:none}
.acct__rule .link::after{content:"";width:.5em;height:.5em;margin-left:.5em;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg)}

/* ---------- tabs and panels ---------- */
.acct__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.acct__tabs .tab{justify-content:center;min-height:44px;padding:0 8px}
.tab__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.tab[aria-selected="true"] .tab__dot{background:var(--green-ink);box-shadow:none}
.anim .tab__dot{animation:dot-beat 1.2s ease-in-out infinite}
@keyframes dot-beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.panel{margin-top:12px;padding:4px 18px 10px}
.panel:focus-visible{outline-offset:4px;border-radius:var(--r-lg)}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:8px 0;border-bottom:1px solid var(--line)}
.panel__head h2{font-size:1.28rem}
.panel__meta{font-size:.86rem;color:var(--text-3);text-align:right}

/* activity */
.tx__row{position:relative}
.tx__ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%}
.tx__ic .icon{width:20px;height:20px}
.tx__ic--in{background:rgba(255,138,36,.15);box-shadow:inset 0 0 0 1px rgba(255,138,36,.42);color:var(--orange-hi)}
.tx__ic--out{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line-3);color:var(--text-2)}
.tx__label{display:block;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tx .sub{margin-top:2px;overflow-wrap:anywhere}
.tx .amt{font-size:1.08rem}
.tx__row.is-new::before{content:"";position:absolute;inset:4px -10px;border-radius:14px;pointer-events:none;opacity:0;background:rgba(255,138,36,.16)}
.anim .tx__row.is-new{animation:tx-in .6s var(--ease)}
.anim .tx__row.is-new::before{animation:tx-flash 1.8s var(--ease)}
@keyframes tx-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes tx-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* leads */
.leads>li{padding:16px 0 18px;border-bottom:1px solid var(--line)}
.leads>li:last-child{border-bottom:0}
.lead__top{display:flex;align-items:flex-start;gap:12px}
.lead__top .grow{flex:1;min-width:0}
.lead__need{display:block;font:800 1.14rem/1.2 var(--display);overflow-wrap:anywhere}
.lead__sub{display:block;margin-top:3px;font-size:.92rem;line-height:1.4;color:var(--text-3);overflow-wrap:anywhere}
.lead .pill{flex:none;margin-top:1px}
.pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.anim .pill__dot{animation:dot-beat 1.2s ease-in-out infinite}
.lsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.lsteps li{position:relative;padding-top:13px;font-size:.78rem;font-weight:700;color:var(--text-3)}
.lsteps li::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:6px;background:rgba(255,255,255,.13)}
.lsteps li.is-done{color:var(--green-pale)}
.lsteps li.is-done::before{background:var(--green);box-shadow:0 0 10px rgba(99,217,54,.6)}
.lsteps li.is-done.is-pay{color:var(--orange-pale)}
.lsteps li.is-done.is-pay::before{background:var(--orange);box-shadow:0 0 10px rgba(255,138,36,.65)}
.anim .lsteps li.is-now:not(.is-pay)::before{animation:step-beat 1.2s ease-in-out infinite}
@keyframes step-beat{0%,100%{opacity:1}50%{opacity:.45}}
.lead__pay{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-top:12px;font-size:.95rem;color:var(--text-2)}
.lead__pay .amt{font-size:1.08rem}
.lead__when{font-size:.86rem;color:var(--text-3)}

/* empty states */
.empty{display:grid;justify-items:center;gap:8px;padding:30px 8px 34px;text-align:center;color:var(--text-2)}
.empty__t{margin-top:6px;font:800 1.25rem/1.2 var(--display);color:var(--text)}
.empty p{max-width:34ch}

/* profile */
.who{display:flex;align-items:center;gap:14px;padding:18px 0 16px}
.who__av{width:58px;height:58px;font-size:1.2rem}
.who__name{font:800 1.35rem/1.15 var(--display)}
.who__sub{margin-top:3px;font-size:.95rem;color:var(--text-3)}
.who__kv{border-top:1px solid var(--line)}
.reset{display:grid;justify-items:start;gap:12px;padding:16px 0 12px;border-top:1px solid var(--line)}
.reset p{max-width:46ch;font-size:.98rem;color:var(--text-2)}

/* ---------- what the wallet is for, on the bright band ---------- */
.why__grid{display:grid;gap:20px}
.why__grid>*{min-width:0}
.why h2{max-width:11ch;font-size:clamp(1.8rem,5vw,2.7rem)}
.why__list{display:grid;gap:10px}
.why__list li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);background:#fff;box-shadow:0 16px 30px -24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.05);font-weight:600;line-height:1.35}
.why__ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:#0b0e0b;color:var(--orange-hi)}
.why__list li:nth-child(2) .why__ic{color:#fff}
.why__list li:nth-child(3) .why__ic{color:var(--green-hi)}

/* ---------- send and receive sheets ---------- */
.sheet__sub{margin-top:6px;max-width:36ch;font-size:1rem;line-height:1.45;color:var(--text-2)}
.sheet__sub b{color:var(--orange-pale)}
.sheet__note{margin-bottom:18px}
.sheet .field{margin-bottom:16px}
.sheet .input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,36,.2)}
.sheet :focus-visible{outline-color:var(--orange-hi)}
.amtbox{position:relative}
.amtbox .input{height:60px;padding-right:118px;font:800 1.5rem/1 var(--display);font-variant-numeric:tabular-nums}
.amtbox .input::placeholder{font-weight:800}
.amtbox__unit{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:.92rem;font-weight:700;color:var(--text-3);pointer-events:none}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.opt{margin-left:6px;font-size:.8rem;font-weight:600;color:var(--text-3)}
dialog.sheet .toasts{top:calc(env(safe-area-inset-top,0px) + 12px);bottom:auto}

.recv{display:grid;justify-items:center;gap:18px}
.qr{display:grid;justify-items:center;gap:10px;margin:0}
.qr__box{position:relative;display:block;width:172px;height:172px;padding:12px;border-radius:22px;background:#f3f7f0;box-shadow:0 22px 44px -24px #000,0 0 0 1px rgba(255,255,255,.12),0 0 50px -12px rgba(255,138,36,.5)}
.qr__box svg{display:block;width:100%;height:100%}
.qr__box::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe3c2 0,#ffa64a 34%,#ee7411 68%,#9c4705 100%);box-shadow:0 0 0 5px #f3f7f0,inset 0 0 0 1.5px rgba(255,255,255,.4)}
.recv__body{display:grid;gap:10px;width:100%;min-width:0}
.recv__l{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700}
.addr{display:flex;flex-wrap:wrap;gap:2px 9px;padding:14px 16px;border-radius:14px;background:#0c0f0c;border:1.5px dashed var(--line-3);font:600 1rem/1.5 var(--mono);color:var(--text);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.addr__pre{text-transform:lowercase}
#copy-addr.is-done{filter:saturate(.9) brightness(1.06)}
.recv__try{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.recv__try p{font-size:.98rem;color:var(--text-2)}

@media (min-width:560px){
  .recv{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:24px}
}
@media (max-width:359.98px){
  .wcoin{width:68px;height:68px}
  .bal{padding:18px 16px}
  .panel{padding-inline:14px}
}
@media (min-width:760px){
  .bal{padding:26px}
  .wcoin{right:22px;top:22px;width:96px;height:96px}
  .bal__num{margin-top:44px}
  .panel{padding:6px 26px 14px}
  .why__list li{padding:16px 18px}
}
@media (min-width:980px){
  .acct__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:30px;align-items:start}
  .acct__side{position:sticky;top:calc(var(--top) + 22px)}
  .acct__tabs{display:inline-grid;width:auto}
  .acct__tabs .tab{padding:0 26px}
  .why__grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;gap:56px}
  .why__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .why__list li{flex-direction:column;align-items:flex-start;gap:12px;height:100%;padding:20px}
}