/* ------------------------------------------------------------------
   swipe.fun — app pages (launch, coins, spending, receipts, get a card,
   dashboard, docs).
   Same design language as the landing page, using its own tokens and
   typefaces so moving between them feels like one site.
   Class names are unchanged, so page markup and app.js stay as they are.
   ------------------------------------------------------------------ */
@font-face{font-family:"PP Frama";src:url("/fonts/PPFrama-Medium.woff2") format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"PP Frama";src:url("/fonts/PPFrama-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PP Frama Text";src:url("/fonts/PPFramaText-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PP Frama Text";src:url("/fonts/PPFramaText-Bold.woff2") format("woff2");font-weight:600 800;font-display:swap}

:root{
  --bg:#f2f2f2;            /* page, from the landing page */
  --surface:#fff;          /* cards */
  --surface-2:#fafafa;
  --ink:#201d1d;           /* body text */
  --black:#000;
  --muted:#666;
  --dim:#8a8a8a;
  --line:rgba(32,29,29,.12);
  --line-soft:rgba(32,29,29,.2);
  --accent:#7F37FC;        /* the landing page's purple */
  --accent-soft:rgba(127,55,252,.1);
  --lime:#9bff60;
  --pos:#0f8a4f;
  --neg:#c62828;
  --dark:#131313;          /* the dark stat panel */
  --radius:12px;
  --radius-sm:8px;
  --font-title:"PP Frama","Helvetica Neue",Arial,sans-serif;
  --font-body:"PP Frama Text","Helvetica Neue",Arial,sans-serif;
}

.bp{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.bp *{box-sizing:border-box}
.bp a{color:inherit}
.bp ::selection{background:var(--accent);color:#fff}

/* ---- header: the landing page's floating white bar ---- */
.bp-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1240px;margin:16px auto 0;padding:12px 18px;position:sticky;top:16px;z-index:30;
  background:var(--white,#fff);border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 30px rgba(0,0,0,.06)}
.brand-mark{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand-logo{height:26px;width:auto;display:block}
.brand-text{font-family:var(--font-title);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--black)}
.bp-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.bp-nav a{padding:8px 13px;border-radius:999px;font-size:14px;text-decoration:none;color:var(--muted);transition:.15s}
.bp-nav a:hover{color:var(--black);background:rgba(0,0,0,.05)}
.bp-nav a.active{color:var(--black);background:var(--accent-soft)}
.navx{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:4px;
  border-radius:999px;color:var(--muted);transition:.15s}
.navx:hover{color:var(--black);background:rgba(0,0,0,.05)}
.walletbtn{margin-left:8px;border:0;background:var(--accent);color:#fff;border-radius:999px;
  padding:10px 20px;font:600 13px/1 var(--font-body);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.walletbtn:hover{filter:brightness(1.08)}
.walletbtn.connected{background:var(--black)}
.walletbtn .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.walletbtn small{font-weight:400;opacity:.7}

/* ---- layout ---- */
.bp-main{max-width:1240px;margin:0 auto;padding:56px 24px 110px}
.bp h1{font-family:var(--font-title);font-size:clamp(40px,6.4vw,76px);line-height:.98;letter-spacing:-.035em;
  margin:0 0 18px;font-weight:700;color:var(--black)}
.bp h1 em{font-style:normal;color:var(--accent)}
.bp h2{font-family:var(--font-title);font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;line-height:1.05;
  margin:0 0 16px;font-weight:700;color:var(--black)}
.bp .lede{font-size:19px;line-height:1.5;max-width:660px;color:var(--muted);margin:0 0 40px}
.bp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}

/* ---- controls ---- */
.bp-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;
  border-radius:999px;padding:14px 26px;font:600 14px/1 var(--font-body);cursor:pointer;text-decoration:none}
.bp-btn:hover{filter:brightness(1.08)}
.bp-btn.ghost{background:transparent;color:var(--black);border:1px solid var(--line-soft)}
.bp-btn.ghost:hover{border-color:var(--black);filter:none;background:rgba(0,0,0,.03)}
.bp-btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
.bp label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:18px 0 7px}
.bp input,.bp select,.bp textarea{width:100%;padding:13px 15px;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink)}
.bp input:focus,.bp select:focus,.bp textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bp input::placeholder,.bp textarea::placeholder{color:var(--dim)}
.bp input[readonly]{background:var(--surface-2);color:var(--muted)}
.bp .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bp .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.bp .muted{color:var(--dim);font-size:13px}

/* ---- pills ---- */
.bp .pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(0,0,0,.05);color:var(--muted);border:1px solid var(--line)}
.bp .pill.active,.bp .pill.ok{background:rgba(15,138,79,.1);color:var(--pos);border-color:rgba(15,138,79,.25)}
.bp .pill.frozen{background:var(--accent-soft);color:var(--accent);border-color:rgba(127,55,252,.25)}
.bp .pill.terminated,.bp .pill.failed,.bp .pill.bad{background:rgba(198,40,40,.09);color:var(--neg);border-color:rgba(198,40,40,.22)}
.bp .pill.k-spend,.bp .pill.k-purchase{background:var(--accent-soft);color:var(--accent)}
.bp .pill.k-issue,.bp .pill.k-load{background:rgba(15,138,79,.1);color:var(--pos)}
.bp .pill.k-park,.bp .pill.official{background:rgba(255,176,0,.14);color:#8a5a00}
.bp .pos{color:var(--pos)}.bp .neg{color:var(--neg)}

/* ---- tables ---- */
.bp table{width:100%;border-collapse:collapse;font-size:14px}
.bp th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);
  text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.bp td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.bp td b,.bp td strong{color:var(--black)}
.bp tr:last-child td{border-bottom:0}
.bp .mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted)}
.bp .out{white-space:pre-wrap;background:var(--dark);color:#e8e8e8;padding:18px;border-radius:var(--radius);
  font-family:ui-monospace,Menlo,monospace;font-size:12px;margin-top:18px;min-height:60px}
.bp .out a{color:#fff;text-decoration:underline}
.bp .steps{counter-reset:s;list-style:none;padding:0;margin:0}
.bp .steps li{counter-increment:s;padding:16px 0 16px 46px;position:relative;border-bottom:1px solid var(--line);color:var(--muted)}
.bp .steps li:last-child{border-bottom:0}
.bp .steps li b{color:var(--black)}
.bp .steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:17px;
  font-family:ui-monospace,monospace;font-size:12px;color:var(--accent)}

/* ---- the card face: a real card, so it stays dark on the light page ---- */
.cardface{position:relative;border-radius:18px;padding:24px;color:#fff;max-width:430px;
  background:linear-gradient(140deg,#0a0415 0%,#241046 55%,#7F37FC 210%);
  box-shadow:0 20px 50px rgba(32,29,29,.22)}
.cardface.pending{background:linear-gradient(140deg,#1b1b1b,#3a3a3a);opacity:.9}
.cardface.frozen{background:linear-gradient(140deg,#0a0415,#2b3f6b)}
.cardface.terminated{background:linear-gradient(140deg,#1a1a1a,#3a2020);filter:grayscale(.45)}
.cardface-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cardface-brand{font-family:var(--font-title);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.cardface .pill{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.2)}
.cardface-balance{margin:30px 0 20px}
.cardface-balance span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cardface-balance b{font-family:var(--font-title);font-size:40px;letter-spacing:-.03em;line-height:1.05}
.cardface-pan{font-family:ui-monospace,Menlo,monospace;font-size:17px;letter-spacing:.16em;color:#e4dcf7}
.cardface-foot{display:flex;justify-content:space-between;gap:10px;margin-top:16px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#d8cff0}
.cardface-foot .muted{color:rgba(255,255,255,.5)}
.cardface-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.cardface-stats span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cardface-stats b{font-family:var(--font-title);font-size:17px}

/* ---- misc ---- */
.chart{height:280px;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line)}
.bp-footer{max-width:1240px;margin:0 auto;padding:36px 24px 70px;font-size:12px;
  color:var(--dim);border-top:1px solid var(--line);line-height:1.7}
.bp-footer a{color:var(--muted)}
.cabar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:10px 16px;background:var(--dark);color:#fff;font-size:13px}
.cabar code{color:#c6a8ff;word-break:break-all}
.pill.official-token{background:var(--accent);color:#fff;border-color:transparent}
.cabtn{border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:999px;
  padding:4px 11px;font:600 11px var(--font-body);cursor:pointer;text-decoration:none}
.cabtn:hover{border-color:#fff}
@media (max-width:860px){
  .bp .row,.bp .row3{grid-template-columns:1fr}
  .bp-header{margin:10px 10px 0;top:10px;padding:10px 14px;border-radius:var(--radius)}
  .bp-nav a{padding:7px 9px;font-size:13px}
  .bp-main{padding:36px 16px 80px}
}

/* ------------------------------------------------------------------
   Landing-page overrides. The closing mark sat inside a filled purple
   tile from the original template; the logo now stands on its own.
   ------------------------------------------------------------------ */
.closer__mark{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.closer__mark img{width:clamp(110px,11vw,180px) !important;height:auto}