/* Monvo Payments — shared dark design system.
   iOS system palette + type, grouped lists, spring motion. Loaded by the
   payer-facing pages (crypto, confirm, invoice-expired, callback, portal).
   The invoice page keeps its own inline copy of these tokens. */
:root{
  color-scheme: dark;
  --bg:#000;
  --cell:#1c1c1e;
  --cell-2:#2c2c2e;
  --cell-hi:#3a3a3c;
  --fill:rgba(120,120,128,.24);
  --fill-2:rgba(120,120,128,.16);
  --label:#fff;
  --label-2:rgba(235,235,245,.6);
  --label-3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.65);
  --green:#19c763;          /* Monvo brand green */
  --green-ink:#0b1f14;
  --tint:#0a84ff;
  --orange:#ff9f0a;
  --red:#ff453a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --rounded:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --material:rgba(22,22,24,.72);
  --spring:cubic-bezier(.25,.8,.25,1);
  --spring-snappy:cubic-bezier(.25,.8,.25,1);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --spring:linear(0, 0.0231, 0.0794, 0.1543, 0.2376, 0.3227, 0.4052, 0.4825, 0.5533, 0.617, 0.6735, 0.7229, 0.7659, 0.803, 0.8347, 0.8618, 0.8847, 0.9041, 0.9204, 0.934, 0.9454, 0.9549, 0.9629, 0.9694, 0.9749, 0.9794, 0.9831, 0.9861, 0.9887, 0.9907, 0.9924, 0.9938, 0.995, 0.9959, 0.9967, 0.9973, 0.9978, 0.9982, 0.9985, 0.9988, 1);
    --spring-snappy:linear(0, 0.021, 0.0739, 0.1465, 0.2296, 0.3165, 0.4027, 0.4849, 0.5613, 0.6305, 0.6923, 0.7464, 0.7933, 0.8334, 0.8673, 0.8955, 0.9189, 0.938, 0.9535, 0.9659, 0.9756, 0.9832, 0.9891, 0.9935, 0.9967, 0.9991, 1.0007, 1.0018, 1.0025, 1.0028, 1.003, 1.0029, 1.0028, 1.0026, 1.0024, 1.0021, 1.0018, 1.0016, 1.0014, 1.0012, 1);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:#000}
body{
  margin:0; background:var(--bg); color:var(--label);
  font:16px/1.45 var(--font); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button{font:inherit; color:inherit; letter-spacing:inherit}
a{color:var(--tint); text-decoration:none}
::selection{background:rgba(25,199,99,.35)}
:focus-visible{outline:2px solid var(--tint); outline-offset:2px; border-radius:10px}
svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Page frame ---- */
.m-app{position:relative; min-height:100vh; min-height:100dvh; overflow-x:clip}
.m-app::before{content:""; position:absolute; left:0; right:0; top:0; height:420px; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%, rgba(25,199,99,.14), rgba(25,199,99,0) 70%)}
.m-wrap{position:relative; max-width:480px; margin:0 auto; padding:0 16px}

/* ---- Provider nav ---- */
.m-nav{display:flex; align-items:center; justify-content:space-between; height:50px; padding-top:env(safe-area-inset-top)}
.m-brand{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; letter-spacing:-.02em; white-space:nowrap}
.m-brand img{width:20px; height:20px; display:block; flex:0 0 auto}
.m-secure{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:500; color:var(--label-2)}
.m-secure svg{width:13px; height:13px; color:var(--green)}

/* ---- Hero ---- */
.m-hero{padding:8px 0 24px; text-align:center}
.m-merchant-icon{width:60px; height:60px; margin:0 auto 12px}
.m-merchant-icon img{width:60px; height:60px}
.m-merchant{font-size:17px; font-weight:600; letter-spacing:-.022em}
.m-hero-sub{margin-top:2px; font-size:15px; color:var(--label-2)}
.m-amount{margin:14px 0 6px; font-family:var(--rounded); font-size:clamp(40px,12vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}

/* ---- Grouped lists ---- */
.m-section{margin-bottom:24px}
.m-group-header{margin:0 0 7px; padding:0 16px; font-size:13px; color:var(--label-2); text-transform:uppercase; letter-spacing:.01em}
.m-group-footer{margin:7px 0 0; padding:0 16px; font-size:13px; line-height:1.4; color:var(--label-2)}
.m-group{background:var(--cell); border-radius:14px; overflow:hidden}
.m-cell{position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 16px; background:transparent; border:0; text-align:left; color:var(--label)}
.m-cell + .m-cell::before{content:""; position:absolute; top:0; right:0; left:var(--inset,16px); border-top:.5px solid var(--sep)}
.m-cell .k{color:var(--label-2)}
.m-cell .v{margin-left:auto; text-align:right; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums}
.m-tap{cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .45s ease}
.m-tap:active{background:var(--cell-hi); transition-duration:0s}
.m-mono{font-family:var(--mono); font-size:14px}

/* ---- Buttons ---- */
.m-btn{width:100%; height:52px; border:0; border-radius:999px; cursor:pointer; font-size:17px; font-weight:600; letter-spacing:-.022em;
  display:flex; align-items:center; justify-content:center; gap:8px; -webkit-tap-highlight-color:transparent;
  transition:transform .45s var(--spring-snappy), opacity .25s ease}
.m-btn:active{transform:scale(.97); opacity:.85; transition-duration:.12s}
.m-btn:disabled{opacity:.4; cursor:default; transform:none}
.m-btn-primary{background:#fff; color:#000}
.m-btn-fill{background:var(--fill); color:var(--label)}
.m-btn-green{background:var(--green); color:var(--green-ink)}
.m-btn svg{width:16px; height:16px}
.m-spin{display:none; width:18px; height:18px; border-radius:50%; border:2px solid rgba(0,0,0,.2); border-top-color:currentColor; animation:m-spin .65s linear infinite}
.m-btn-fill .m-spin, .m-btn-green .m-spin{border-color:rgba(255,255,255,.25); border-top-color:currentColor}
.is-loading .m-spin{display:block}
.is-loading .m-lbl{display:none}

/* ---- Footer ---- */
.m-foot{padding:18px 16px calc(28px + env(safe-area-inset-bottom)); text-align:center; color:var(--label-3); font-size:12px; line-height:1.7}
.m-foot .s{display:inline-flex; align-items:center; gap:5px}
.m-foot .s svg{width:12px; height:12px}
.m-foot a{color:var(--label-2)}

/* ---- HUD toast ---- */
.m-hud{position:fixed; top:calc(env(safe-area-inset-top) + 12px); left:50%; z-index:90; pointer-events:none;
  display:flex; align-items:center; gap:8px; height:40px; padding:0 18px 0 14px; border-radius:999px;
  background:rgba(44,44,46,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 .5px rgba(255,255,255,.1);
  font-size:15px; font-weight:600; opacity:0; transform:translate(-50%,-70px) scale(.9); transition:opacity .22s ease, transform .3s ease-in}
.m-hud.show{opacity:1; transform:translate(-50%,0) scale(1); transition:opacity .2s ease, transform .55s var(--spring-snappy)}
.m-hud svg{width:17px; height:17px; color:var(--green)}

/* ---- Entrance ---- */
.m-rise{animation:m-rise .62s var(--spring) backwards; animation-delay:calc(var(--i,0) * 60ms + 40ms)}
@keyframes m-rise{from{opacity:0; transform:translateY(12px); filter:blur(4px)}}
@keyframes m-spin{to{transform:rotate(360deg)}}

@media (hover:hover) and (pointer:fine){
  .m-tap:hover{background:rgba(255,255,255,.04)}
  .m-btn-primary:hover{opacity:.92}
  .m-btn-fill:hover{background:#2e2e2a}
  .m-foot a:hover{color:var(--label)}
}
@media (prefers-reduced-motion:reduce){
  .m-rise{animation:m-fade .35s ease backwards}
  @keyframes m-fade{from{opacity:0}}
  .m-btn:active{transform:none}
  .m-hud,.m-hud.show{transform:translate(-50%,0)}
}