/* ============================================================================
 * create-exchange.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Loads only via the media-gated <link>, applies only beside the AppShell
 * sidebar (body.ptshell, set by ptcargo-shell.js). The MOBILE Source-of-Truth
 * (create-exchange.css) is NEVER touched — phone view stays byte-equal.
 * Direction ref = account-hub.css: neutral canvas (#F4F5F7); the dark coffee
 * ¥⇄฿ hero becomes a white light-2026 card; converter | payment-method cards go
 * 2-column; the fixed summary/action bar de-fixes into an inline light card.
 * Accent PRESERVED = the page's OWN orange (--sun/--sun-deep) — PTSHELL type is
 * 'dashboard' but the visual accent stays orange (do NOT recolor). The page's
 * <header> is hidden fleet-wide by ptcargo-shell.js. NOTE: .hero and .bar are
 * body-level siblings of <main> (not inside it) — centred here to match main.page.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* --- dark ¥⇄฿ hero (body child) → centred white light-2026 card --- */
  body.ptshell .hero{max-width:1180px;margin:8px auto 0;border-radius:20px;padding:26px 28px;
    color:var(--ink);background:#fff;border:1px solid #E8EAEF;box-shadow:0 22px 48px -30px rgba(20,25,35,.28)}
  body.ptshell .hero .bg{display:none}
  body.ptshell .hero .hsub{color:var(--ink-2)}
  body.ptshell .hero .hrate{color:var(--sun-deep)}
  /* swap ring is translucent-white (vanishes on white) → light cream + orange icon */
  body.ptshell .hero .swapring{background:#FFF3E7;border-color:#F6D9BE}
  body.ptshell .hero .swapring svg{color:var(--sun-deep)}

  /* --- content column: converter | payment-method 2-column (howto + trust full) --- */
  body.ptshell main.page{max-width:var(--pt-content-max);margin-inline:auto;padding:18px 24px 40px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 22px;align-items:start}
  body.ptshell main.page>.howto{grid-column:1/-1}
  body.ptshell main.page>.trust{grid-column:1/-1;margin-top:0}
  body.ptshell main.page>.actbar{grid-column:1/-1;width:100%;max-width:none;margin:0;
    border:1px solid #E8EAEF;border-radius:16px;background:#fff}

  /* cards: light-2026 hairline + soft shadow */
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

  /* --- inputs light-2026 (soft #F7F8FA · accent focus) --- */
  body.ptshell .field input{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .field input:focus{background:#fff;border-color:var(--sun);box-shadow:0 0 0 3px rgba(242,86,11,.12)}
  body.ptshell .xin{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .xin:focus-within{background:#fff;border-color:var(--sun);box-shadow:0 0 0 4px rgba(255,122,26,.12)}
  body.ptshell .bankdd .ddbtn{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .mthsel .m{background:#F7F8FA;border-color:#E8EAEF}

  /* --- fixed summary/action bar → inline light-2026 card (not in appshell de-fix list) --- */
  body.ptshell .bar{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:1180px;margin:18px auto 0;
    background:#fff;border:1px solid #E8EAEF;border-top:1px solid #E8EAEF;border-radius:18px;
    box-shadow:0 18px 44px -30px rgba(20,25,35,.26);backdrop-filter:none}
}

@media (min-width:1280px){
  body.ptshell .hero,body.ptshell main.page,body.ptshell .bar{max-width:var(--pt-content-max)}
}