/* GhostFi PayMe pages (/@handle pay page, /payme claim and dashboard). Kit tokens only (ghostfi.css), app.css patterns:
   no new visual language. Mobile first at 390 px; addresses and hashes wrap in full, never an ellipsis. */

/* the eye-off line: the one PayMe promise, set as body text with the kit's mint icon */
.v .pmline{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--tx);max-width:60ch;text-wrap:pretty}
.v .pmline .ic{flex:none;color:var(--mint);margin-top:1px}

/* ---------------------------------------------------------------- pay page */
.v .ord.pm{gap:16px}
.v .ord.pm[aria-busy=true]{min-height:70svh}
.v .pmgets{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 6px;border-radius:var(--pill);border:1px solid var(--ln2);
  background:var(--pn);font:500 12px/1 var(--fm);color:var(--fg);max-width:100%;overflow-wrap:anywhere}
.v .pmgets .bd{flex:none}
.v .pmgets .cd{flex:none}
.v .oh h1{overflow-wrap:anywhere}
.v .pmreq{display:grid;gap:4px;padding:16px 18px;border-radius:var(--r);background:linear-gradient(135deg,rgba(185,167,255,.14),rgba(122,240,224,.08));border:1px solid rgba(122,240,224,.25)}
.v .pmreq b{font:700 30px/1.1 var(--fd);color:var(--fg);letter-spacing:-.02em;overflow-wrap:anywhere}
.v .pmreq p{color:var(--tx);font-size:14px;overflow-wrap:anywhere}
.v .pmlock{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--fm);color:var(--mint)}
.v .pmlock[hidden]{display:none}
.v .pmlockline{display:flex;align-items:center;gap:6px}
.v .pmlockline .ic{flex:none;color:var(--mint)}
/* the amount set by the link reads as fixed: no caret, the kit field without the focus glow */
.v .fld.locked{background:rgba(0,0,0,.18);border-style:dashed}
.v .fld.locked .amt{cursor:default}
.v .fld.locked:focus-within{box-shadow:none;border-color:rgba(122,240,224,.45)}
/* the receive side is set by the link owner: the kit pick shape, not a control */
.v .pick.static{cursor:default;box-shadow:none;background:transparent}
.v .pick.static:hover{background:transparent}
.v .pick[aria-disabled]{opacity:.55;cursor:not-allowed}
/* single-line text fields (note, display name, handle, referral code) inside the kit .fld */
.v .fld.pmtext,.v .fld.pmhandle{height:54px;padding-right:12px}
.v .fld .in{flex:1;min-width:0;width:100%;background:transparent;border:0;outline:0;padding:0;font:400 15px var(--fb);color:var(--fg)}
.v .fld .in::placeholder{color:var(--mu)}
.v .fld .in[readonly]{color:var(--tx)}
.v .pm .cv .qmsg:empty,.v .pm .qmsg[hidden]{display:none}
.v .pmshare .pmshare-b,.v .pmlinkbox .pmshare-b{display:grid;gap:8px;min-width:0}
.v .pmshare code.addr,.v .pmlinkbox code.addr{font-size:14px}
.v .nf .pillst{margin-bottom:-4px}

/* ---------------------------------------------------------------- /payme */
.v .pm .ph1{max-width:68ch}
.v .pmgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media (min-width:960px){ .v .pmgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px} }
.v .pmclaim,.v .pmopen{gap:16px}
.v .pmopen{max-width:600px;width:100%}
.v .pmclaim .ph2,.v .pmopen .ph2{margin-bottom:-2px}
.v .pmpre{flex:none;font:400 15px var(--fm);color:var(--mu);letter-spacing:-.01em}
.v .pmhandle .in{font-family:var(--fm);letter-spacing:-.01em}
.v .fld.pmhandle .ok{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(122,240,224,.14);color:var(--mint);flex:none}
.v .fld.pmhandle .ok[hidden]{display:none}
.v .pmstatus{font-size:13px;line-height:1.4;color:var(--tx);min-height:18px}
.v .pmstatus[data-k="ok"]{color:var(--mint)}
.v .pmstatus[data-k="bad"]{color:var(--red)}
.v .pmstatus[data-k="warn"]{color:var(--yel)}
.v .pmrecv{display:flex}
.v .pmsigner{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--ln)}
.v .pmh3{font:700 15px var(--fd);color:var(--fg);letter-spacing:-.01em}
.v .pmsignp{font-size:13px;color:var(--tx);max-width:60ch}
.v .pmsign .btn{flex:1 1 220px}
.v .pmsign .btn[hidden]{display:none}
.v .pmsign .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.v .pmsign .btn[aria-busy=true]{opacity:.7;cursor:progress}
.v .pmhave{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--tx)}
.v .more.pminline{color:var(--mint);font-size:13px;padding:6px 0;margin:-6px 0;text-decoration:underline;text-underline-offset:3px}
.v .pmhow{gap:12px}
.v .pmhow .rl .pi{width:40px;height:40px}
.v .pmsoon{justify-items:center}
.v .pmsoon .demo-tag{justify-self:center}

/* dashboard */
.v .pmdash{display:grid;gap:28px}
.v .pmdash-top{display:grid;gap:6px}
.v .pmid{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v .pmh{font-size:clamp(32px,6vw,48px);overflow-wrap:anywhere;outline:0}
.v .pmdash .sub{font-size:16.5px}
.v .pmmuted{color:var(--mu)}
.v .pmcols{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:960px){ .v .pmcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px} }
.v .pmcol{display:grid;gap:16px;align-content:start;min-width:0}
.v .pmlink{display:grid;gap:12px;min-width:0}
.v .pmlinkbox .qr{width:132px;height:132px}
.v .pmreqb{display:grid;gap:10px}
.v .pmrecvbox{min-width:0}
.v .pmrecvbox b{font-size:24px}
.v .pmrecvbox code.addr{font-size:13.5px}
.v .pmpend p{color:var(--fg);font-size:14px;margin-top:4px}
.v .pmpend code.addr{margin-top:6px;font-size:13px}
.v .pmpend .pmsmall{color:var(--tx);font-size:13px}
.v .pmtiles{grid-template-columns:minmax(0,1fr)}
@media (min-width:480px){ .v .pmtiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
.v .pmtiles .tile{min-width:0}
.v .pmtiles .tile b{font-size:24px;overflow-wrap:anywhere}
.v .pmpays{gap:14px}
.v .pmtable .pmsub{display:block;font-size:12px;color:var(--tx)}
.v .pmtable .pmmemo{display:block;margin-top:4px;font-size:12.5px;color:var(--tx);overflow-wrap:anywhere}
.v .pmtable td{overflow-wrap:anywhere}
.v .pmtable .pmtx{width:36%}
.v .pmtable .hash{font:400 12.5px var(--fm);word-break:break-all}
.v .pmtable .hash .g{display:inline;margin:0}
.v .pmtable .hash .g:nth-child(even){opacity:.62}
.v .pmtable .hash .tail{white-space:nowrap}
.v .pmtable .txv a{color:var(--mint)}
.v .pmtable .txv a .ic{display:inline-block;vertical-align:-1px;margin-left:3px}
.v .pmst{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg)}
.v .pmst::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}
.v .pmst[data-s="awaiting_deposit"]::before,.v .pmst[data-s="new"]::before{background:var(--yel)}
.v .pmst[data-s="refunded"]::before,.v .pmst[data-s="refunding"]::before,.v .pmst[data-s="expired"]::before{background:var(--mu)}
.v .pmst[data-s="failed_manual"]::before{background:var(--red)}
@media (max-width:760px){ .v .pmtable .pmtx{width:auto;grid-column:1/-1} }
.v .pmset{gap:16px;justify-items:stretch}
.v .pmsetgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:860px){ .v .pmsetgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px} }
.v .pmsetf{display:grid;gap:10px;align-content:start;min-width:0}
.v .pmh4{font:600 14.5px var(--fb);color:var(--fg)}
.v .pmsetf .btn:disabled{opacity:.7;cursor:progress}
.v .pmfoot{display:grid;gap:10px;justify-items:start}
.v .pmfoot .note.pmerr{color:var(--red)}
.v .pmfoot .demo-tag{justify-self:start}

/* phones: full-width actions, the link box stacks (the kit .dep already does under 560 px) */
@media (max-width:560px){
  .v .pmsign .btn,.v .pmsetf .sb .btn{width:100%}
  .v .pmlinkbox .qr,.v .pmshare .qr{justify-self:center}
  .v .pmreq b{font-size:26px}
}
.v #pNf .sb{justify-content:center}