/* top-up — DESKTOP relayout (>=768px, scoped body.ptshell) — matched to wallet-ledger:
   KEEP the dark-brown balance hero (contained rounded card) · equal 1180 width ·
   2-column content grid that fills the width. Mobile file (top-up.css) = SoT, untouched.
   Loads AFTER appshell.css so equal-specificity rules here win. */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}
  body.ptshell .mwrap{max-width:1180px;margin-inline:auto}

  /* ---- HERO: keep brown (same as wallet-ledger) → contained rounded card ---- */
  body.ptshell .cHero{
    max-width:1180px;margin:6px auto 0;border-radius:24px;
    padding:30px 44px 26px !important;                 /* beat appshell .cHero padding */
    box-shadow:0 28px 64px -36px rgba(40,20,0,.62)
  }
  body.ptshell .cHero .bal{font-size:46px}
  body.ptshell .cHero .cStats{gap:34px}
  body.ptshell .cHero .cQa{max-width:520px}            /* keep quick actions from over-stretching */

  /* ---- content: 2-column grid filling the same 1180 width ---- */
  body.ptshell main.page{
    max-width:1180px;margin-inline:auto;padding:20px 0 48px;
    display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start
  }
  body.ptshell main.page>*{margin-top:0}
  body.ptshell .wspan{grid-column:1/-1}
  body.ptshell .wcol-l{grid-column:1}
  body.ptshell .wcol-r{grid-column:2}
  body.ptshell main.page>.card{border:1px solid #E8EAEF;box-shadow:0 20px 46px -30px rgba(20,25,35,.28);padding:18px 20px}

  /* ---- pay bar → centered action at the same width ---- */
  body.ptshell .pybar{max-width:1180px;margin:8px auto 0;border-radius:16px;border:1px solid #E8EAEF}
}
@media (min-width:1280px){
  body.ptshell .mwrap,body.ptshell main.page,body.ptshell .cHero,body.ptshell .pybar{max-width:1240px}
}