/* ═══════════════════════════════════════════════════════════════════
   BASE
   Fallback values for every design token. The theme engine overwrites
   all of them on #stage at runtime — nothing below this file ever
   hard-codes a colour, radius or weight.
   ═══════════════════════════════════════════════════════════════════ */
#stage{
  --bg:#F3F4F2; --surface:#fff; --surface-2:#F1F4F2;
  --primary:#0B1A16; --on-primary:#fff;
  --text:#0B1A16; --mute:#6E7B77; --mute-2:#9AA6A1;
  --border:#E3E7E4; --accent:#B78F4E; --on-accent:#fff; --credit:#1B7A5B;
  --r-card:18px; --r-btn:13px; --r-pill:999px; --r-ico:50%;
  --sh-card:0 1px 2px rgba(11,26,22,.04),0 10px 24px -14px rgba(11,26,22,.16);
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  --f-num:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --w-display:640; --ls-display:-.021em; --ls-word:.36em;
  --bal-size:38px; --bal-weight:640; --bal-ls:-.028em;
  --pad-sec:16px; --gap-sec:14px; --pad-card:18px; --row-pad:13px; --bw:.5px;
  --hdr-bg:transparent; --hdr-fg:#0B1A16;
  --tab-bg:rgba(248,249,248,.86); --tab-fg:#9AA6A1; --tab-on:#0B1A16;
  --pl-a:#123A31; --pl-b:#0A211C; --pl-fg:#fff; --pl-accent:#B78F4E;
  --auth-fg:#fff; --auth-accent:#B78F4E; --auth-scrim:rgba(6,16,13,.62);
  --pc-bg:#fff; --pc-fg:#0B1A16; --pc-mute:#6E7B77; --pc-accent:#B78F4E;
  --pc-key-bg:#F1F4F2; --pc-key-fg:#0B1A16; --pc-key-bd:#E3E7E4;
  --pc-key-size:72px; --pc-key-gap:18px; --pc-key-font:26px; --pc-key-weight:420;
  --pc-dot:#B78F4E; --pc-dot-off:#E3E7E4; --pc-btn-bg:#0B1A16; --pc-btn-fg:#fff;

  --ease:cubic-bezier(.32,.72,0,1);
  --tabh:58px; --tdur:640ms; --introdur:16s;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;min-height:100%;margin:0;padding:0;overscroll-behavior:none}
html{background:#000}
body{
  font-family:var(--f-body,system-ui);background:#000;color:var(--text);
  overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img{display:block;max-width:100%}

/*
   DEVICE / INSTALLED WEB-APP CANVAS
   ---------------------------------
   MyBandz is designed for an installed iOS Web App. In standalone mode the
   stage is an exact device-sized canvas supplied by viewport.js from
   screen.width/screen.height. This prevents transient Safari chrome from
   changing the composition. The stage is always pinned to the viewport edges.
*/
#stage{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  height:100%;
  min-height:100%;
  max-height:none;
  overflow:hidden;
  background:var(--primary);
  isolation:isolate;
  transition:opacity 200ms ease;
}

/* Installed Home Screen / standalone mode: use the physical device canvas
   measured by viewport.js. No vh/dvh/svh/lvh units are used here. */
html.standalone-web-app,
html.standalone-web-app body{
  width:var(--pwa-width,100%);
  height:var(--pwa-height,100%);
  min-height:var(--pwa-height,100%);
  max-height:none;
  overflow:hidden;
}

html.standalone-web-app #stage{
  position:fixed;
  top:0;right:0;bottom:auto;left:0;
  width:var(--pwa-width,100%);
  height:var(--pwa-height,100%);
  min-height:var(--pwa-height,100%);
  max-height:none;
}

/* Keep safe-area values available to stage content without shrinking the
   physical canvas. Individual UI elements can opt into these insets. */
#stage{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

/* hold the first paint until the saved config is applied */
.booting #stage{opacity:0}

/* On a desktop the prop sits in a phone shell so framing matches the shot. */
@media (min-width:760px) and (min-height:780px){
  body{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,#16211D 0%,#0A0F0D 70%)}
  #stage{
    position:relative;inset:auto;width:390px;height:844px;min-height:844px;border-radius:46px;
    box-shadow:0 0 0 9px #141917,0 0 0 10px #2A322F,0 44px 90px -20px rgba(0,0,0,.75)
  }
}

.surface{position:absolute;inset:0;overflow:hidden}
.scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:0 0 calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 26px)
}

/* ── stage transitions ──────────────────────────────────────────────
   One shared vocabulary for moving between the three stages: smooth,
   horizontal, professionally eased, never bouncy. `--tdur` and the
   transition name both come from configuration. */
.stage-layer{position:absolute;inset:0;will-change:transform,opacity}
.tx-slide.is-next{transform:translate3d(100%,0,0)}
.tx-slide.is-in{transition:transform var(--tdur) var(--ease);transform:translate3d(0,0,0)}
.tx-slide.is-out{transition:transform var(--tdur) var(--ease);transform:translate3d(-22%,0,0)}
.tx-cover.is-next{transform:translate3d(0,100%,0)}
.tx-cover.is-in{transition:transform var(--tdur) var(--ease);transform:translate3d(0,0,0)}
.tx-cover.is-out{transition:opacity var(--tdur) var(--ease);opacity:.5}
.tx-scale.is-next{transform:scale(1.04);opacity:0}
.tx-scale.is-in{transition:transform var(--tdur) var(--ease),opacity calc(var(--tdur) * .7) ease;transform:scale(1);opacity:1}
.tx-scale.is-out{transition:transform var(--tdur) var(--ease),opacity calc(var(--tdur) * .6) ease;transform:scale(.97);opacity:0}
.tx-fade.is-next{opacity:0}
.tx-fade.is-in{transition:opacity var(--tdur) var(--ease);opacity:1}
.tx-fade.is-out{transition:opacity var(--tdur) var(--ease);opacity:0}
.tx-none.is-next{opacity:0}
.tx-none.is-in{opacity:1}
.tx-none.is-out{opacity:0}
.layer-hidden{display:none}
.drop-shadow{box-shadow:-18px 0 44px -8px rgba(0,0,0,.42)}
.settled{box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .tx-slide.is-in,.tx-slide.is-out,.tx-cover.is-in,.tx-cover.is-out,
  .tx-scale.is-in,.tx-scale.is-out{transition-duration:1ms}
}

/* MyBandz v20 Green Banking preset */
.lloyds .stage3 { background:#101211; color:#F5F7F6; }
.lloyds .bank-card, .lloyds .account-card, .lloyds .transaction-card {
  background:#202522; border:1px solid #343B37; border-radius:18px; box-shadow:none;
}
.lloyds button.primary, .lloyds .primary, .lloyds .btn-primary {
  background:#00E94B; color:#001208; border-radius:999px;
}
.lloyds .bottom-nav { background:#161A18; }
.lloyds .bottom-nav .active { color:#00E94B; }