/* JUWEL OS · Wallet + Invite
   One quiet transactional surface inside the OS. Uses only the shared
   LUXLIQ/FACET token vocabulary; no page-local palette or ambient motion. */
.commerce-app{height:100%;min-height:0;background:var(--surface);color:var(--ink-1);}
.commerce-scroll{height:100%;overflow:auto;overscroll-behavior:contain;padding:24px;}
.commerce-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;padding:4px 0 22px;border-bottom:1px solid var(--line-2);}
.commerce-eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.commerce-title{margin:6px 0 0;font:600 clamp(24px,4vw,34px)/1.08 var(--ff-ui);letter-spacing:-.035em;color:var(--ink);}
.commerce-copy{max-width:56ch;margin:9px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55;}
.commerce-amount{font:600 clamp(40px,8vw,64px)/1 var(--ff-ui);letter-spacing:-.055em;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;}
.commerce-amount-label{margin-top:7px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right;}
.commerce-status{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink-2);font-size:13px;line-height:1.5;}
.commerce-status[hidden]{display:none;}
.commerce-status.ok{border-color:color-mix(in srgb,var(--jade) 32%,var(--line));color:var(--jade-deep);}
.commerce-status.warn{border-color:color-mix(in srgb,var(--topaz) 35%,var(--line));color:var(--accent-ink);}
.commerce-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;}
.commerce-card{min-width:0;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:inset 0 1px 0 var(--edge);}
.commerce-card.wide{grid-column:1/-1;}
.commerce-card h3{margin:0 0 5px;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.commerce-card p{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.5;}
.commerce-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:9px;margin-top:14px;}
.commerce-actions .pbtn{min-height:42px;padding-inline:12px;text-align:center;text-decoration:none;}
.commerce-list{display:grid;gap:0;margin-top:10px;}
.commerce-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding:9px 0;border-top:1px solid var(--line-2);}
.commerce-row:first-child{border-top:0;}
.commerce-row-label{min-width:0;color:var(--ink-2);font-size:12.5px;overflow-wrap:anywhere;}
.commerce-delta{font-family:var(--ff-mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-1);white-space:nowrap;}
.commerce-delta.up{color:var(--jade-deep);}
.commerce-empty{padding:12px 0;color:var(--ink-3);font-size:13px;}
.commerce-state{height:100%;display:grid;place-items:center;padding:28px;}
.commerce-state-card{width:min(420px,100%);padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);text-align:center;}
.commerce-state-card svg{width:28px;height:28px;color:var(--ink-2);}
.commerce-state-card h2{margin:12px 0 6px;font-size:19px;color:var(--ink);}
.commerce-state-card p{margin:0 0 16px;color:var(--ink-2);line-height:1.55;}
.commerce-share{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:14px;}
.commerce-share input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:12px var(--ff-mono);}
.commerce-share .pbtn{min-height:44px;}
.commerce-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;}
.commerce-stat{padding:15px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);text-align:center;}
.commerce-stat b{display:block;font:600 24px/1.1 var(--ff-ui);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums;}
.commerce-stat span{display:block;margin-top:6px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
@media(max-width:620px){
  .commerce-scroll{padding:18px 16px 28px;}
  .commerce-hero{grid-template-columns:1fr;align-items:start;gap:16px;}
  .commerce-amount,.commerce-amount-label{text-align:left;}
  .commerce-grid{grid-template-columns:1fr;}
  .commerce-actions .pbtn{min-height:44px;}
  .commerce-stats{grid-template-columns:1fr;}
  .commerce-share{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){.commerce-app *{scroll-behavior:auto!important;}}