/* Shared verified profile and wallet. Product worlds keep their own colors.
   22.10 (zone 2, one system): radii, spacing and colors come from the shop tokens (--radius-*, --space-*,
   --feature / --on-feature, --orange-soft …) — the last screens no longer look like another app. */
.page-profile .app-main,.page-wallet .app-main { max-width:1000px; width:100%; margin:auto; }
.wallet-profile-link { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); color:var(--ink); background:var(--surface-soft); text-decoration:none; border:1px solid var(--line); border-radius:var(--radius-card); }
.wallet-profile-link > span:nth-child(2) { display:flex; flex-direction:column; gap:var(--space-1); flex:1; min-width:0; }
.wallet-profile-link strong { font:800 20px/26px var(--font-sans); letter-spacing:-0.01em; }
.wallet-profile-link small { font:500 13px/18px var(--font-sans); color:var(--ink-2); }
.wallet-profile-link > .gp-icon { flex:none; width:28px; height:28px; }
.wallet-profile-link > span:last-child { font-size:22px; }
.wallet-login { display:flex; flex-direction:column; gap:var(--space-4); max-width:570px; padding:var(--space-6); }
.wallet-balances { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-5); margin-top:var(--space-2); }
.wallet-balance { display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-raised); }
.wallet-balance > div { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.wallet-balance p { margin:0; max-width:320px; font:500 13px/20px var(--font-sans); color:var(--ink-2); }
.wallet-balance--cash { position:relative; overflow:hidden; background:var(--feature); color:var(--on-feature); border-color:var(--feature); }
.wallet-balance--cash::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--brand-gradient); }
.wallet-balance--cash p { color:var(--on-feature-2); }
.wallet-balance--cash .gp-btn { margin-top:auto; }
.wallet-amount { font-size:clamp(34px,4vw,50px); font-weight:800; letter-spacing:-0.03em; line-height:1.12; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wallet-shortcuts { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.wallet-shortcuts a { display:flex; flex:1; justify-content:space-between; gap:var(--space-5); padding:var(--space-4) var(--space-5); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius-control); text-decoration:none; font:600 13px/18px var(--font-sans); }
.wallet-section { display:flex; flex-direction:column; gap:var(--space-5); padding-top:var(--space-8); border-top:1px solid var(--line); scroll-margin-top:130px; }
.wallet-section-head { display:flex; align-items:center; gap:var(--space-3); }
.wallet-section-head .title { margin:0; }
.wallet-coupon { display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); padding:var(--space-6); background:var(--orange-soft); color:var(--ink); border:1px dashed var(--line-strong); border-radius:var(--radius-card); }
.wallet-coupon .label { margin:0; color:var(--ink-2); }
.wallet-coupon strong { display:block; margin:var(--space-3) 0; color:var(--orange-ink); font:800 48px/1 var(--font-sans); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.wallet-coupon p:not(.label) { margin:0; font:500 13px/18px var(--font-sans); }
.wallet-coupon-intent { margin-bottom:var(--space-6); padding:var(--space-4) var(--space-5); border:1px dashed var(--line-strong); border-radius:var(--radius-control); font:500 14px/20px var(--font-sans); }
.wallet-topup-form,.wallet-topup-review { display:flex; flex-direction:column; gap:var(--space-5); max-width:570px; }
.wallet-topup-input { display:flex; align-items:center; padding:0 var(--space-5); border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--surface-raised); }
.wallet-topup-input .app-input { min-width:0; height:auto; padding:var(--space-3) 0; border:0; background:transparent; font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; }
.wallet-topup-input > span { font-size:26px; color:var(--ink-2); }
.wallet-topup-presets { display:flex; gap:var(--space-2); }
.wallet-topup-presets button { flex:1; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface-soft); color:var(--ink); font:600 13px/18px var(--font-sans); font-variant-numeric:tabular-nums; cursor:pointer; }
.wallet-future { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-6); border-radius:var(--radius-card); background:var(--surface-soft); }
.wallet-future .headline, .wallet-future p { margin:0; }
.wallet-topup-review { padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-raised); }
.wallet-history { margin:0; padding:0; list-style:none; }
.wallet-history li { display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); padding:var(--space-4) 0; border-bottom:1px solid var(--line); }
.wallet-history li > div { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.wallet-history strong,.wallet-history b { font:700 14px/20px var(--font-sans); }
.wallet-history span { font:500 12px/18px var(--font-sans); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.wallet-history b { white-space:nowrap; font-variant-numeric:tabular-nums; }
.wallet-positive { color:var(--green-ink); }
.wallet-choices { display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-1) 0; padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-control); }
.wallet-choices legend { padding:0 var(--space-1); }
.wallet-choice { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-1) 0; cursor:pointer; }
.wallet-choice > span:first-child { min-width:0; }
.wallet-choice strong,.wallet-choice small { display:block; }
.wallet-choice strong { font:700 13px/18px var(--font-sans); }
.wallet-choice small { margin-top:2px; color:var(--ink-2); font:500 12px/16px var(--font-sans); font-variant-numeric:tabular-nums; }
.wallet-choice-control { display:flex; align-items:center; gap:var(--space-2); font:600 12px/16px var(--font-sans); }
.wallet-choice--coupon { padding-bottom:var(--space-3); border-bottom:1px dashed var(--line-strong); }
.wallet-choices .footnote { margin:0; }
/* Supplier instructions can contain a long literal URL on a 320px screen. */
.app-steps .callout { min-width:0; overflow-wrap:anywhere; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .wallet-profile-link { transition:transform var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); }
  .wallet-profile-link:hover { transform:translateY(-2px); background:var(--surface-raised); }
}
@media (max-width:700px) {
  .wallet-balances { grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
  .wallet-balance { gap:var(--space-4); padding:var(--space-5); }
  .wallet-amount { font-size:40px; }
  .wallet-profile-link { gap:var(--space-3); padding:var(--space-5) var(--space-4); }
  .wallet-profile-link strong { font-size:18px; line-height:24px; }
  .wallet-coupon { gap:var(--space-4); padding:var(--space-5); }
  .wallet-shortcuts a { gap:var(--space-2); padding:var(--space-3); font-size:12px; }
  .wallet-section { padding-top:var(--space-6); scroll-margin-top:110px; }
  .wallet-history li { gap:var(--space-3); }
  .wallet-history strong,.wallet-history b { font-size:13px; }
  .wallet-topup-review { padding:var(--space-5); }
  .app-tabbar .gp-tab { font-size:10px; }
}
@media (max-width:360px) {
  .app-order .gp-key__actions { grid-template-columns:1fr; }
}
/* 21.10: same box as .gp-check — the native checkbox was a bright white square on the dark ChatGPT sheet */
.wallet-choice input { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:22px; height:22px; margin:0; border-radius:7px; border:1.5px solid var(--ink-2); background:var(--surface-raised); cursor:pointer; transition:background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); }
.wallet-choice input::after { content:""; position:absolute; left:6.5px; top:2.5px; width:5px; height:10px; border:solid var(--on-action); border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); transition:transform var(--dur-quick) var(--ease-out); }
.wallet-choice input:checked { background:var(--action); border-color:var(--action); }
.wallet-choice input:checked::after { transform:rotate(45deg) scale(1); }
.wallet-choice input:disabled { opacity:var(--opacity-disabled); cursor:default; }
.wallet-choice input:focus-visible { outline:none; box-shadow:var(--focus-ring); }